/* ============================================================
   Smartmi Air Conditioner — case study page
   Built from Figma 0petJpl0QZ2jcAe2MTgDeQ, node 128:2845
   Sections: 94:5581 / 94:5676 / 94:5760 / 94:5861, nav 128:2946

   Layout model
   ------------
   The design is four fixed 1920x1080 screens. Each screen is rendered
   as a 1920px-wide "stage" with children positioned at their exact
   Figma coordinates. On narrower viewports the whole stage is scaled
   down uniformly (smartmi.js sets --sm-scale); the fixed nav is NOT
   scaled so it stays readable, and scrolls horizontally when needed.
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("../assets/fonts/InterVariable.woff2") format("woff2-variations"),
      url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* palette, taken from the Figma layers */
  --sm-ink:#1c1c1b;          /* headings */
  --sm-body:#61615c;         /* body copy */
  --sm-muted:#737b7b;        /* captions, footers */
  --sm-deep:#3d4f4f;         /* eyebrows, primary button, nav active */
  --sm-teal:#4d797b;         /* accent: numbers, arrow notes, quote marks */
  --sm-mark:#6f8f90;         /* logo mark, timeline dots */
  --sm-nav-idle:#9e9e99;     /* nav inactive */
  --sm-line:#e0e5e4;         /* dividers, card borders */
  --sm-line-2:#e6eceb;       /* band borders */
  --sm-line-3:#e0e0db;       /* circle outlines */
  --sm-surface:#f7f7f5;      /* card fill */
  --sm-screen-bg:linear-gradient(143.13deg,
      #e9f2f1 7.1429%, #f8fafa 34.286%, #f5f6f7 57.143%, #e9eef1 78.571%);
  --sm-band-bg:linear-gradient(to right,#f0f5f4,#f9f9f9);

  --sm-scale:1;              /* set by smartmi.js */
  --sm-nav-h:84px;           /* fixed nav height, desktop */
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:#f5f6f7;
}

body.sm-body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--sm-ink);
  background:#f5f6f7;
  overflow-x:hidden;               /* the scaled stage must never push the page sideways */
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ------------------------------------------------------------
   Fixed navigation
   Frosted glass per the agreed case-study standard:
   rgba(248,250,255,0.55) + 16px blur, no shadow.
   Contents (back arrow, logo, wordmark, section links) follow the
   Smartmi design: 128:2946.
   ------------------------------------------------------------ */
.sm-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  background:rgba(248,250,255,0.55);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:none;
  border:0;
}

.sm-nav__inner{
  max-width:1920px;
  margin:0 auto;
  padding:26px 80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.sm-nav__brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  flex:0 0 auto;
}

.sm-nav__back{
  width:30px;
  height:30px;
  display:block;
}

.sm-nav__logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.sm-nav__mark{
  width:22px;
  height:22px;
  border-radius:6px;
  background:var(--sm-mark);
}

.sm-nav__word{
  font-size:17px;
  font-weight:600;
  color:var(--sm-ink);
  line-height:1;
}

.sm-nav__links{
  display:flex;
  align-items:center;
  gap:34px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sm-nav__links::-webkit-scrollbar{display:none}

.sm-nav__links a{
  font-size:13px;
  font-weight:400;
  letter-spacing:1px;
  color:var(--sm-nav-idle);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease;
}

.sm-nav__links a:hover{color:var(--sm-deep)}

.sm-nav__links a.is-active{
  font-weight:600;
  color:var(--sm-deep);
}

/* ------------------------------------------------------------
   Stage: the scaled 1920px canvas
   ------------------------------------------------------------ */
.sm-stage-wrap{
  margin-top:var(--sm-nav-h);
  overflow:hidden;
  /* the wrapper's height is set from JS when the stage is scaled;
     scroll anchoring must not fight that adjustment */
  overflow-anchor:none;
}

.sm-stage{
  width:1920px;
  transform:scale(var(--sm-scale));
  transform-origin:top left;
}

.sm-screen{
  position:relative;
  width:1920px;
  height:1080px;
  background:var(--sm-screen-bg);
  overflow:hidden;
}

/* Anchor targets sit at the top of each screen; smartmi.js does the
   nav-height compensation when scrolling, so no scroll-margin hacks. */

/* ------------------------------------------------------------
   Shared type styles
   ------------------------------------------------------------ */
.sm-eyebrow{
  position:absolute;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.1px;
  color:var(--sm-deep);
  margin:0;
}

.sm-eyebrow-sm{
  position:absolute;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--sm-deep);
  margin:0;
}

.sm-title{
  position:absolute;
  font-size:38px;
  font-weight:700;
  color:var(--sm-ink);
  margin:0;
}

.sm-title--hero{
  font-size:42px;
  line-height:1.18;
}

.sm-intro{
  position:absolute;
  font-size:12.5px;
  font-weight:400;
  line-height:1.55;
  color:var(--sm-body);
  margin:0;
}

.sm-footer-note{
  position:absolute;
  top:1046px;
  font-size:11px;
  font-weight:400;
  color:var(--sm-muted);
  margin:0;
}
.sm-footer-note--l{left:80px}
.sm-footer-note--r{left:1613px;width:227px;text-align:right}

.sm-abs{position:absolute;margin:0}

/* ------------------------------------------------------------
   Cards, bands and circles
   ------------------------------------------------------------ */
.sm-card{
  position:absolute;
  background:var(--sm-surface);
  border:1px solid var(--sm-line);
  border-radius:12px;
  overflow:hidden;
}

.sm-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sm-band{
  position:absolute;
  background:var(--sm-band-bg);
  border:1px solid var(--sm-line-2);
  border-radius:14px;
  overflow:hidden;
}

/* white outlined circle used by the bands */
.sm-circle{
  position:absolute;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--sm-line-3);
}

/* filled circle used by the three "core challenge" badges */
.sm-badge{
  position:absolute;
  border-radius:50%;
  background:#fff;
}
.sm-badge--alt{background:var(--sm-surface)}

.sm-quote-mark{
  position:absolute;
  font-size:24px;
  font-weight:700;
  color:var(--sm-teal);
  margin:0;
  line-height:1;
}

.sm-band-label{
  position:absolute;
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--sm-deep);
  margin:0;
}

/* ------------------------------------------------------------
   01 · Overview
   ------------------------------------------------------------ */
.sm-subtitle{
  position:absolute;
  font-size:16px;
  color:var(--sm-muted);
  margin:0;
}

.sm-desc{
  position:absolute;
  font-size:12.5px;
  line-height:1.58;
  color:var(--sm-body);
  margin:0;
}

.sm-meta-label{
  position:absolute;
  left:80px;
  width:130px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.6px;
  color:var(--sm-deep);
  margin:0;
}

.sm-meta-value{
  position:absolute;
  left:220px;
  width:440px;
  font-size:12.5px;
  color:var(--sm-body);
  margin:0;
}

.sm-meta-rule{
  position:absolute;
  left:80px;
  width:590px;
  height:1px;
  background:var(--sm-line);
}

.sm-cta{
  position:absolute;
  left:80px;
  top:488px;
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  overflow:hidden;
}

.sm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:6px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.3;
  text-decoration:none;
  white-space:pre;
  border:1px solid transparent;
  transition:opacity .18s ease;
}
.sm-btn:hover{opacity:.88}

.sm-btn--primary{
  background:var(--sm-deep);
  color:#fff;
}

.sm-btn--secondary{
  background:var(--sm-surface);
  border-color:var(--sm-deep);
  color:var(--sm-deep);
}

.sm-band-eyebrow{
  position:absolute;
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--sm-deep);
  margin:0;
}

.sm-band-head{
  position:absolute;
  font-size:16.5px;
  font-weight:600;
  color:var(--sm-ink);
  margin:0;
}

.sm-band-body{
  position:absolute;
  font-size:12.5px;
  line-height:1.5;
  color:var(--sm-body);
  margin:0;
}

.sm-challenge-num{
  position:absolute;
  width:60px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--sm-teal);
  margin:0;
}

.sm-challenge-title{
  position:absolute;
  width:350px;
  font-size:14.5px;
  font-weight:600;
  color:var(--sm-ink);
  margin:0;
}

.sm-challenge-body{
  position:absolute;
  width:350px;
  font-size:12px;
  line-height:1.46;
  color:var(--sm-body);
  margin:0;
}

.sm-pill{
  position:absolute;
  left:72px;
  top:850px;
  width:138px;
  height:29px;
  border-radius:8px;
  background:var(--sm-teal);
}

.sm-pill-text{
  position:absolute;
  left:86px;
  top:858px;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.1px;
  color:#fff;
  white-space:nowrap;
  margin:0;
}

.sm-pill-caption{
  position:absolute;
  left:223px;
  top:857px;
  font-size:12px;
  color:var(--sm-muted);
  white-space:nowrap;
  margin:0;
}

.sm-timeline-rule{
  position:absolute;
  left:72px;
  top:933px;
  width:1760px;
  height:1px;
  background:var(--sm-line);
}

.sm-timeline-dot{
  position:absolute;
  top:929px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sm-mark);
}

.sm-step-num{
  position:absolute;
  top:909px;
  width:277.33px;
  font-size:10px;
  font-weight:600;
  color:var(--sm-teal);
  margin:0;
}

.sm-step-title{
  position:absolute;
  top:947px;
  width:277.33px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.28;
  color:var(--sm-ink);
  margin:0;
}

.sm-step-body{
  position:absolute;
  top:979px;
  width:277.33px;
  font-size:10px;
  line-height:1.38;
  color:var(--sm-body);
  margin:0;
}

/* ------------------------------------------------------------
   02 · Insight-Driven Strategy
   ------------------------------------------------------------ */
.sm-col-icon{
  position:absolute;
  top:260.5px;
  display:flex;
  align-items:center;
  gap:10px;
}

.sm-col-icon img{
  display:block;
  width:24px;
  height:24px;
}

.sm-col-icon span{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--sm-deep);
}

.sm-col-head{
  position:absolute;
  top:296px;
  font-size:16.5px;
  font-weight:600;
  color:var(--sm-ink);
  white-space:nowrap;
  margin:0;
}

.sm-quote-line{
  position:absolute;
  width:540px;
  font-size:12.5px;
  line-height:1.3;
  color:var(--sm-ink);
  margin:0;
}

.sm-arrow-line{
  position:absolute;
  width:540px;
  font-size:11px;
  line-height:1.3;
  color:var(--sm-teal);
  margin:0;
}

.sm-evidence-head{
  position:absolute;
  left:80px;
  top:602px;
  width:830px;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  color:var(--sm-ink);
  margin:0;
}

.sm-evidence-body{
  position:absolute;
  left:80px;
  top:642px;
  width:830px;
  font-size:12px;
  line-height:1.58;
  color:var(--sm-body);
  margin:0;
}

/* phone mock-up inside the evidence card — built from real elements */
.sm-phone{
  position:absolute;
  left:539px;
  top:19px;
  width:200px;
  height:180px;
  border-radius:18px;
  background:#141414;
  overflow:hidden;
}

.sm-phone__title{
  position:absolute;
  left:16px;
  top:14px;
  width:168px;
  font-size:8.5px;
  font-weight:600;
  color:#fff;
  margin:0;
}

.sm-phone__temp{
  position:absolute;
  left:16px;
  top:44px;
  width:168px;
  font-size:26px;
  font-weight:700;
  color:#fff;
  margin:0;
}

.sm-phone__ambient{
  position:absolute;
  left:16px;
  top:76px;
  width:168px;
  font-size:8px;
  color:#b3b3b3;
  margin:0;
}

.sm-phone__mode{
  position:absolute;
  left:16px;
  top:100px;
  width:168px;
  font-size:8px;
  font-weight:600;
  color:#99d9e5;
  margin:0;
}

.sm-phone__dot{
  position:absolute;
  top:114px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#2e2e2e;
}

.sm-phone__label{
  position:absolute;
  top:146px;
  width:48px;
  font-size:6.5px;
  color:#a6a6a6;
  text-align:center;
  transform:translateX(-50%);
  margin:0;
}

.sm-judgment-quote{
  position:absolute;
  left:119px;
  top:59px;
  width:1538px;
  font-size:19px;
  font-weight:600;
  line-height:1.4;
  color:var(--sm-ink);
  margin:0;
}

.sm-judgment-sub{
  position:absolute;
  left:119px;
  top:131px;
  width:1580px;
  font-size:12.5px;
  color:var(--sm-body);
  margin:0;
}

/* ------------------------------------------------------------
   03 · Visual System
   ------------------------------------------------------------ */
.sm-sub-head{
  position:absolute;
  font-size:18px;
  font-weight:600;
  color:var(--sm-ink);
  margin:0;
}

.sm-vd-line{
  position:absolute;
  left:80px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--sm-body);
  white-space:nowrap;
}

.sm-vd-line::before{
  content:"";
  flex:0 0 auto;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--sm-body);
}

.sm-vd-line b{font-weight:700}

.sm-swatches{
  position:absolute;
  left:78px;
  top:485px;
  display:flex;
  align-items:center;
  gap:8px;
}

.sm-swatch{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  width:150px;
}

.sm-swatch__chip{
  width:130px;
  height:50px;
  border-radius:6px;
}

.sm-swatch__hex{
  font-size:14px;
  line-height:1.4;
  color:var(--sm-deep);
  margin:0;
}

.sm-swatch__use{
  font-size:12px;
  line-height:1.4;
  color:var(--sm-body);
  margin:0;
}

.sm-pd-line{
  position:absolute;
  left:970px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  line-height:1.35;
  color:var(--sm-body);
}

.sm-pd-line img{
  display:block;
  width:16px;
  height:16px;
  flex:0 0 auto;
}

.sm-thumb{
  position:absolute;
  top:813px;
  width:161.2px;
  height:90px;
  background:var(--sm-surface);
  border:1px solid var(--sm-line);
  border-radius:12px;
  overflow:hidden;
}

.sm-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sm-system-quote{
  position:absolute;
  left:103px;
  top:47px;
  width:1600px;
  font-size:15.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--sm-ink);
  margin:0;
}

/* ------------------------------------------------------------
   04 · Execution & System
   ------------------------------------------------------------ */
.sm-bg-sketch{
  position:absolute;
  left:-3px;
  top:324px;
  width:671px;
  height:368px;
  pointer-events:none;
}

.sm-bg-sketch img{
  display:block;
  width:100%;
  height:100%;
}

.sm-detail-card{
  position:absolute;
  left:680px;
  top:250px;
  width:1160px;
  height:330px;
  background:#fff;
  border:1px solid var(--sm-line);
  border-radius:12px;
  overflow:hidden;
}

.sm-detail-title{
  position:absolute;
  left:27px;
  top:29px;
  width:500px;
  font-size:26px;
  font-weight:700;
  line-height:32px;
  color:var(--sm-ink);
  margin:0;
}

.sm-detail-sub{
  position:absolute;
  left:27px;
  top:67px;
  width:500px;
  font-size:14px;
  color:var(--sm-body);
  margin:0;
}

.sm-detail-body{
  position:absolute;
  left:27px;
  top:103px;
  width:500px;
  font-size:12.5px;
  line-height:20px;
  color:var(--sm-muted);
  margin:0;
}

.sm-detail-source{
  position:absolute;
  left:27px;
  top:199px;
  width:500px;
  font-size:10.5px;
  color:var(--sm-muted);
  margin:0;
}

.sm-detail-photo{
  position:absolute;
  left:559px;
  top:21px;
  width:572px;
  height:286px;
  background:var(--sm-surface);
  border:1px solid var(--sm-line);
  border-radius:10px;
  overflow:hidden;
}

.sm-detail-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sm-modes{
  position:absolute;
  left:390px;
  top:745px;
  display:flex;
  align-items:flex-end;
  gap:6.5px;
}

.sm-mode{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11.9px;
  width:130.12px;
}

.sm-mode img{
  display:block;
  width:53.08px;
  height:53.08px;
}

.sm-mode span{
  font-size:10.3px;
  font-weight:600;
  color:#262626;
  text-align:center;
}

.sm-so-thumb{
  position:absolute;
  top:710px;
  width:205.5px;
  height:140px;
  background:var(--sm-surface);
  border:1px solid var(--sm-line);
  border-radius:12px;
  overflow:hidden;
}

.sm-so-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.sm-so-caption{
  position:absolute;
  top:860px;
  font-size:10px;
  line-height:1.4;
  color:var(--sm-muted);
  text-align:center;
  white-space:nowrap;
  transform:translateX(-50%);
  margin:0;
}

.sm-reflection-body{
  position:absolute;
  left:95px;
  top:39px;
  width:1600px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--sm-body);
  margin:0;
}

/* ------------------------------------------------------------
   Page footer (outside the scaled stage)
   ------------------------------------------------------------ */
.sm-pagefoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  max-width:1920px;
  margin:0 auto;
  padding:28px 80px 40px;
  font-size:12px;
  color:var(--sm-muted);
  background:#f5f6f7;
}

.sm-pagefoot a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--sm-deep);
  text-decoration:none;
  font-weight:600;
}

.sm-pagefoot a:hover{text-decoration:underline}

.sm-pagefoot p{margin:0}

/* ------------------------------------------------------------
   Narrow screens
   The stage keeps scaling down; only the nav needs adjusting so the
   links stay legible and scroll sideways instead of overflowing.
   ------------------------------------------------------------ */
@media (max-width:1100px){
  .sm-nav__inner{padding:18px 24px;gap:20px}
  :root{--sm-nav-h:68px}
}

@media (max-width:700px){
  .sm-nav__inner{
    padding:12px 16px;
    gap:12px;
    align-items:center;
  }
  .sm-nav__word{font-size:15px}
  .sm-nav__back{width:24px;height:24px}
  .sm-nav__links{gap:20px}
  .sm-nav__links a{font-size:11px;letter-spacing:.8px}
  :root{--sm-nav-h:58px}
  .sm-pagefoot{padding:20px 16px 28px;font-size:11px}
}