/* ==========================================================================
   Deskman Studio — Studio / About (redesign)

   Loaded ONLY on the Studio page, after main.css. Every selector is scoped
   under .std-redesign so nothing here can reach any other page. Colour, type
   and spacing tokens are inherited from main.css :root (--electric, --violet,
   --coral, --font-display, --font-mono, --font-script, --sp-*), so this file
   introduces no new fonts and no new palette — it only composes the page.

   Layout is a 12-column editorial grid at desktop, deliberately asymmetric:
   headings hold the left rail, body copy sits in the middle, and the hero art
   and metric row run out toward the right edge. Everything is contained by
   overflow-x:clip on the root, so no decorative bleed can produce a scrollbar.
   ========================================================================== */

.std-redesign{
  /* surfaces — warm off-white rather than pure white */
  --sd-paper:#F5F4F1;
  --sd-paper-2:#EFEEEA;
  --sd-white:#FFFFFF;
  --sd-ink:#141312;
  --sd-black:#0D0C0C;
  --sd-black-2:#191817;
  --sd-line:#E3E1DC;
  --sd-line-2:#D6D3CD;
  --sd-muted:#6C6864;
  --sd-muted-dark:#A6A3A0;
  /* accents, borrowed from the frozen global palette */
  --sd-lime:var(--electric);
  --sd-violet:var(--violet);
  --sd-coral:var(--coral);
  /* geometry */
  --sd-r:20px;              /* large panels / scenes            */
  --sd-r-md:16px;           /* cards                            */
  --sd-r-sm:10px;
  --sd-ease:cubic-bezier(.62,.05,0,1);
  /* vertical rhythm — one knob for the whole page */
  --sd-band:clamp(72px,8vw,132px);

  padding-top:0;            /* the hero owns its own nav offset */
  background:var(--sd-paper);
  color:var(--sd-ink);
  overflow-x:clip;
}
.std-redesign *{ box-sizing:border-box; }
.std-redesign .wrap{ position:relative; }

/* --------------------------------------------------------------------------
   Shared type + primitives
   -------------------------------------------------------------------------- */
.std-redesign .std-eyebrow{
  display:inline-flex; align-items:center; gap:.7em; margin:0 0 var(--sp-24);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sd-muted);
}
.std-redesign .std-eyebrow .d{
  width:8px; height:8px; border-radius:50%; background:var(--sd-lime);
  display:inline-block; flex:0 0 auto;
}
.std-redesign .std-eyebrow--dark{ color:var(--sd-muted-dark); }

.std-redesign .std-h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.045em;
  line-height:1.0; font-size:clamp(2.6rem,4.6vw,4.4rem); color:var(--sd-ink);
  margin:0; text-wrap:balance;
}

/* the recurring spark */
.std-redesign .std-star{ width:100%; height:100%; display:block; }
.std-redesign .std-star--violet{ color:var(--sd-violet); }
.std-redesign .std-star--lime{ color:var(--sd-lime); }

/* handwritten micro-notes */
.std-redesign .std-note{
  position:relative; display:inline-block; font-family:var(--font-script);
  font-weight:700; line-height:1.12; letter-spacing:0;
  font-size:clamp(1.05rem,1.4vw,1.28rem); color:var(--sd-ink);
}
.std-redesign .std-note__arc,
.std-redesign .std-note__hook{ position:absolute; width:54px; height:auto; opacity:.9; }

/* buttons — same silhouette as the global .btn, restated locally so the page
   controls its own sizing without touching the shared component */
.std-redesign .std-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  height:46px; padding-inline:1.5em; border-radius:var(--radius-pill);
  border:1px solid transparent; font-family:var(--font-body); font-weight:600;
  font-size:.98rem; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .25s var(--sd-ease), background-color .25s var(--sd-ease),
             color .25s var(--sd-ease), border-color .25s var(--sd-ease);
}
.std-redesign .std-btn .ar{ transition:transform .25s var(--sd-ease); }
.std-redesign .std-btn:hover .ar{ transform:translateX(4px); }
.std-redesign .std-btn--lime{ background:var(--sd-lime); color:var(--sd-ink); }
.std-redesign .std-btn--lime:hover{ transform:translateY(-2px); }
.std-redesign .std-btn--line{
  background:transparent; color:var(--sd-ink); border-color:var(--sd-line-2);
}
.std-redesign .std-btn--line:hover{ background:var(--sd-ink); color:var(--sd-paper); border-color:var(--sd-ink); }
.std-redesign .std-btn--lg{ height:52px; padding-inline:1.8em; font-size:1.02rem; }

.std-redesign .std-minilink{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sd-violet); transition:gap .25s var(--sd-ease);
}
.std-redesign .std-minilink:hover{ gap:.9em; }

/* ==========================================================================
   01 · HERO
   ========================================================================== */
.std-redesign .std-hero{
  padding:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--sp-56))
          0 clamp(var(--sp-56),6vw,var(--sp-80));
}
.std-redesign .std-hero__grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(var(--sp-32),3.6vw,var(--sp-56)); align-items:center;
}
.std-redesign .std-hero__copy{ min-width:0; }

.std-redesign .std-h1{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.05em;
  line-height:.93; font-size:clamp(3.2rem,5.55vw,5.6rem);
  color:var(--sd-ink); margin:0 0 var(--sp-24);
}
.std-redesign .std-h1__l1,
.std-redesign .std-h1__l2{ display:block; position:relative; }
.std-redesign .std-h1__l2{ display:inline-block; }
/* No rule under the headline: at this weight and size the descenders of
   "on purpose." run straight through any underline sitting close enough to
   read as drawn, and pushing it clear leaves it floating. The lime lives in
   the primary button and the eyebrow dot instead. */

.std-redesign .std-lead{
  max-width:44ch; font-size:1.08rem; line-height:1.65; color:var(--sd-muted);
  margin:0 0 var(--sp-32);
}
.std-redesign .std-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-16); }

.std-redesign .std-servline{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55em;
  margin:clamp(var(--sp-40),5vw,var(--sp-72)) 0 0;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sd-ink);
}
.std-redesign .std-servline .d{
  width:7px; height:7px; border-radius:50%; background:var(--sd-ink);
  display:inline-block; margin-right:.4em;
}
.std-redesign .std-servline .sep{ color:var(--sd-line-2); }

/* ---- hero art ------------------------------------------------------------
   The scene runs out toward the right edge on wide screens. The bleed is a
   negative margin bounded by overflow-x:clip on the root, so it can never
   create a scrollbar at any width. */
.std-redesign .std-hero__art{ position:relative; min-width:0; }
@media (min-width:1200px){
  .std-redesign .std-hero__art{ margin-right:clamp(-3.5vw,-2vw,0px); }
}

/* container-type makes the scene the reference box for everything drawn
   inside it, so the whole composition scales with the panel rather than with
   the viewport. Sized in vw it fell apart between breakpoints — the laptop
   shrank while the caption did not — which is what the tablet render showed.
   Browsers without container queries drop the cqw font-size and inherit the
   root size, which still renders a legible scene. */
.std-redesign .std-scene{
  position:relative; margin:0; border-radius:var(--sd-r); overflow:hidden;
  background:var(--sd-black); isolation:isolate;
  container-type:inline-size;
  box-shadow:0 40px 80px -46px rgba(0,0,0,.62), 0 2px 0 rgba(255,255,255,.04) inset;
}
.std-redesign .std-scene--hero{ aspect-ratio:4/3.05; }
.std-redesign .std-scene__photo{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* the built-in CSS set ---------------------------------------------------
   Everything below is sized in em against .std-set's own cqw-derived
   font-size, so one number controls the whole composition. */
.std-redesign .std-set{
  position:absolute; inset:0; overflow:hidden; isolation:isolate;
  font-size:clamp(9px,3.15cqw,21px);
  background:
    radial-gradient(120% 92% at 76% 4%, #272624 0%, #151413 44%, #0B0A0A 100%);
}
.std-redesign .std-set__glow{
  position:absolute; right:-8%; top:-16%; width:64%; aspect-ratio:1;
  border-radius:50%; background:var(--sd-lime); opacity:.09; z-index:0;
  filter:blur(3em); pointer-events:none;
}
/* the desk plane. Without it the laptop and mug read as floating shapes on a
   gradient; this gives the lower third a surface and a lit front edge. */
.std-redesign .std-set::after{
  content:""; position:absolute; left:0; right:0; top:72%; bottom:0; z-index:1;
  background:linear-gradient(180deg,#2C2926 0%,#1A1817 30%,#0C0B0B 100%);
  border-top:1px solid rgba(255,255,255,.1);
  pointer-events:none;
}
/* a soft cone of light falling from a lamp just out of frame, top-left */
.std-redesign .std-set__lamp{
  position:absolute; left:8%; top:-10%; width:58%; height:86%;
  background:linear-gradient(178deg, rgba(255,255,255,.17), rgba(255,255,255,0) 74%);
  clip-path:polygon(36% 0%, 58% 0%, 100% 100%, 2% 100%); z-index:0;
  filter:blur(.4em); pointer-events:none;
}
.std-redesign .std-set__poster{
  position:absolute; right:6%; top:8%; width:30%; margin:0; z-index:2;
  font-family:var(--font-display); font-weight:600; line-height:1.16;
  letter-spacing:-.015em; font-size:.72em; text-transform:uppercase;
  color:#EDEBE8;
}
.std-redesign .std-set__poster i{
  display:block; width:1.6em; height:.1em; background:#75726E; margin-top:.8em;
}
.std-redesign .std-set__plant{
  position:absolute; left:2.5%; bottom:2%; width:17%; color:#4C493C; z-index:3;
}
.std-redesign .std-set__plant svg{ width:100%; height:auto; display:block; }

.std-redesign .std-set__laptop{ position:absolute; left:13%; bottom:14%; width:55%; z-index:4; }
.std-redesign .std-set__screen{
  position:relative; aspect-ratio:16/10.4; border-radius:.4em;
  background:linear-gradient(158deg,#201F1E,#0F0E0E);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 1.4em 2.6em -1.2em rgba(0,0,0,.92);
  padding:9% 8%; display:flex; align-items:center;
}
.std-redesign .std-set__dot{
  position:absolute; left:7%; top:8%; width:.32em; height:.32em;
  border-radius:50%; background:var(--sd-lime); opacity:.9;
}
.std-redesign .std-set__stack{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.03em;
  line-height:1.16; font-size:1.02em; color:#F2F1EF;
}
.std-redesign .std-set__stack i{ font-style:normal; color:var(--sd-lime); }
/* the laptop deck, seen at a shallow angle */
.std-redesign .std-set__base{
  display:block; height:.55em; margin:.1em -7% 0;
  background:linear-gradient(180deg,#413F3C,#232221);
  clip-path:polygon(4% 0%, 96% 0%, 100% 100%, 0% 100%);
  border-radius:0 0 .2em .2em;
}
.std-redesign .std-set__mug{
  position:absolute; right:6%; bottom:10%; width:13.5%; aspect-ratio:1/1.05; z-index:4;
  border-radius:.22em .22em .5em .5em; z-index:2; white-space:nowrap;
  background:linear-gradient(150deg,#2E2C2A 0%,#1B1A19 46%,#0F0E0E 100%);
  border:1px solid rgba(255,255,255,.11);
  /* flex, not grid: place-items on a grid turned the wordmark and its lime
     dot into two separate rows, so the mark read as "DS" over a full stop */
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700; font-size:.66em; color:#F0EFED; letter-spacing:-.02em;
  box-shadow:0 .8em 1.4em -.7em rgba(0,0,0,.9);
}
/* the handle, so the shape reads as a mug rather than a box */
.std-redesign .std-set__mug::after{
  content:""; position:absolute; right:-.48em; top:24%; width:.55em; height:46%;
  border:.15em solid #3A3836; border-left:0;
  border-radius:0 .6em .6em 0;
}
.std-redesign .std-set__mug i{ font-style:normal; color:var(--sd-lime); }
/* very light film grain, generated — no extra request */
.std-redesign .std-set__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.42; z-index:9;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

/* Handwritten note over the hero scene. Parked at mid-height on the right so
   it sits between the wall poster above and the mug below — at 22% it landed
   on top of the mug at every width. */
.std-redesign .std-note--hero{
  position:absolute; right:4.5%; top:44%; z-index:3; color:var(--sd-lime);
  text-align:left; max-width:8em;
}
.std-redesign .std-note--hero .std-note__arc{ left:-3.4em; top:.3em; width:3em; }

/* rotating seal, overlapping the scene's bottom-left corner */
.std-redesign .std-seal{
  position:absolute; left:-30px; bottom:29%; z-index:4;
  width:clamp(84px,8vw,116px); aspect-ratio:1; border-radius:50%;
  background:var(--sd-paper); display:grid; place-items:center;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.5);
}
.std-redesign .std-seal__ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:std-seal-spin 26s linear infinite;
}
.std-redesign .std-seal__ring text{
  font-family:var(--font-mono); font-size:9.4px; letter-spacing:.15em;
  fill:var(--sd-muted); text-transform:uppercase;
}
.std-redesign .std-seal__mark{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.05rem,1.5vw,1.4rem); color:var(--sd-ink);
}
.std-redesign .std-seal__mark i{ font-style:normal; color:var(--sd-lime); }
@keyframes std-seal-spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   02 · ABOUT + METRICS
   ========================================================================== */
.std-redesign .std-about{
  padding:var(--sd-band) 0;
  background:var(--sd-paper-2);
  border-top:1px solid var(--sd-line);
}
.std-redesign .std-about__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2.2fr);
  gap:clamp(var(--sp-32),3.4vw,var(--sp-56));
  align-items:start;
}
.std-redesign .std-about__head{ position:relative; }
.std-redesign .std-note--about{
  display:block; margin-top:var(--sp-56); padding-left:52px;
  transform:rotate(-1.5deg); transform-origin:left center;
}
.std-redesign .std-note--about .std-note__hook{ left:0; top:-4px; width:40px; }

.std-redesign .std-about__body{ padding-top:.4em; }
.std-redesign .std-about__body p{
  font-size:1.05rem; line-height:1.68; color:var(--sd-muted);
  max-width:42ch;
}
.std-redesign .std-about__body p + p{ margin-top:1.1em; }

/* the star motif + service list */
.std-redesign .std-about__motif{ justify-self:end; text-align:left; width:100%; max-width:200px; }
.std-redesign .std-motif{
  display:block; width:clamp(56px,5vw,76px); aspect-ratio:1;
  margin-bottom:var(--sp-40);
  animation:std-motif-turn 34s linear infinite;
}
@keyframes std-motif-turn{ to{ transform:rotate(180deg); } }
.std-redesign .std-motif__list{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sd-muted); line-height:2.1;
}
.std-redesign .std-motif__rule{
  display:block; width:26px; height:1px; background:var(--sd-line-2); margin-top:1em;
}

/* metric cards */
.std-redesign .std-metrics{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--sp-16),1.6vw,var(--sp-24));
  margin-top:clamp(var(--sp-56),6vw,var(--sp-80));
}
.std-redesign .std-metric{
  position:relative; background:var(--sd-white); border:1px solid var(--sd-line);
  border-radius:var(--sd-r-md); padding:clamp(var(--sp-24),2.4vw,var(--sp-40));
  min-height:clamp(128px,11vw,158px); display:flex; flex-direction:column;
  justify-content:center; gap:var(--sp-16);
  transition:transform .35s var(--sd-ease), box-shadow .35s var(--sd-ease);
}
.std-redesign .std-metric:hover{
  transform:translateY(-3px); box-shadow:0 22px 40px -30px rgba(0,0,0,.4);
}
.std-redesign .std-metric.is-dark{
  background:var(--sd-black); border-color:var(--sd-black); color:var(--sd-white);
}
.std-redesign .std-metric__n{
  display:flex; align-items:baseline; font-family:var(--font-display);
  font-weight:700; letter-spacing:-.05em; line-height:.9;
  font-size:clamp(2.6rem,4.4vw,3.9rem); color:var(--sd-ink);
}
.std-redesign .std-metric.is-dark .std-metric__n{ color:var(--sd-white); }
.std-redesign .std-metric__n i{
  font-style:normal; font-size:.52em; letter-spacing:-.03em; margin-left:.06em;
}
.std-redesign .std-metric.is-dark .std-metric__n i{ color:var(--sd-lime); }
.std-redesign .std-metric__l{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sd-muted);
}
.std-redesign .std-metric.is-dark .std-metric__l{ color:var(--sd-muted-dark); }

/* ==========================================================================
   03 · PHILOSOPHY + PRINCIPLES
   ========================================================================== */
.std-redesign .std-phil{ padding:var(--sd-band) 0; }
.std-redesign .std-phil__grid{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5.4fr);
  gap:clamp(var(--sp-32),4vw,var(--sp-64)); align-items:start;
}
.std-redesign .std-phil__body{ padding-top:.5em; }
.std-redesign .std-phil__body p{
  font-size:1.05rem; line-height:1.68; color:var(--sd-muted); max-width:46ch;
}
.std-redesign .std-phil__body p + p{ margin-top:1.1em; }

.std-redesign .std-principles{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(var(--sp-16),1.6vw,var(--sp-24));
  margin-top:clamp(var(--sp-48),5vw,var(--sp-72));
}
.std-redesign .std-pr{
  position:relative; background:var(--sd-white); border:1px solid var(--sd-line);
  border-radius:var(--sd-r-md); padding:clamp(var(--sp-24),2.4vw,var(--sp-32));
  display:flex; flex-direction:column;
  transition:transform .35s var(--sd-ease), box-shadow .35s var(--sd-ease);
}
.std-redesign .std-pr:hover{
  transform:translateY(-3px); box-shadow:0 24px 44px -32px rgba(0,0,0,.4);
}
.std-redesign .std-pr.is-dark{
  background:var(--sd-black); border-color:var(--sd-black); color:var(--sd-white);
}
.std-redesign .std-pr__badge{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:rgba(104,64,255,.09); margin-bottom:var(--sp-32);
}
.std-redesign .std-pr__badge .std-star{ width:19px; height:19px; }
.std-redesign .std-pr.is-dark .std-pr__badge{ background:rgba(161,255,98,.13); }
.std-redesign .std-pr__n{
  position:absolute; right:clamp(var(--sp-24),2.4vw,var(--sp-32));
  top:clamp(var(--sp-24),2.4vw,var(--sp-32));
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--sd-line-2);
}
.std-redesign .std-pr.is-dark .std-pr__n{ color:#4A4846; }
.std-redesign .std-pr__t{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.28rem,1.9vw,1.55rem); line-height:1.12;
  margin:0 0 .55em; color:var(--sd-ink);
}
.std-redesign .std-pr.is-dark .std-pr__t{ color:var(--sd-white); }
.std-redesign .std-pr__d{
  font-size:1rem; line-height:1.62; color:var(--sd-muted); max-width:32ch;
}
.std-redesign .std-pr.is-dark .std-pr__d{ color:var(--sd-muted-dark); }

/* ==========================================================================
   04 · PROCESS
   ========================================================================== */
.std-redesign .std-proc{
  padding:var(--sd-band) 0;
  background:var(--sd-paper-2);
  border-top:1px solid var(--sd-line);
  border-bottom:1px solid var(--sd-line);
}
.std-redesign .std-proc__head{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5.4fr);
  gap:clamp(var(--sp-32),4vw,var(--sp-64)); align-items:end;
}
.std-redesign .std-proc__aside{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-32); padding-bottom:.4em;
}
.std-redesign .std-proc__aside p{
  font-size:1.02rem; line-height:1.62; color:var(--sd-muted); max-width:38ch;
}
.std-redesign .std-proc__aside .std-minilink{ flex:0 0 auto; padding-top:.25em; }

/* the five-stage rail */
.std-redesign .std-steps{
  list-style:none; padding:0;   /* it is an <ol>: the 01..05 labels are the numbering */
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(var(--sp-16),1.8vw,var(--sp-32));
  margin-top:clamp(var(--sp-56),6vw,var(--sp-80));
}
.std-redesign .std-step{ position:relative; min-width:0; }

/* dot + connecting line + arrow */
.std-redesign .std-step__track{
  display:block; position:relative; height:11px; margin-bottom:var(--sp-24);
}
.std-redesign .std-step__dot{
  position:absolute; left:0; top:0; width:11px; height:11px; border-radius:50%;
  background:var(--sd-violet);
  transition:transform .3s var(--sd-ease), background-color .3s var(--sd-ease);
}
.std-redesign .std-step__line{
  position:absolute; left:19px; right:0; top:5px; height:1px;
  background:var(--sd-line-2); overflow:hidden;
}
/* the lime fill that sweeps across on hover */
.std-redesign .std-step__line::after{
  content:""; position:absolute; inset:0; background:var(--sd-lime);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--sd-ease);
}
.std-redesign .std-step:last-child .std-step__line{ right:22px; }
.std-redesign .std-step__arrow{
  position:absolute; right:-2px; top:50%; font-style:normal; line-height:1;
  font-size:12px; color:var(--sd-line-2);
  transform:translate(-4px,-50%);
  transition:transform .3s var(--sd-ease), color .3s var(--sd-ease), opacity .3s var(--sd-ease);
  opacity:0;
}
.std-redesign .std-step:last-child .std-step__arrow{ right:0; }

.std-redesign .std-step__n{
  display:block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.12em; color:var(--sd-muted); margin-bottom:.5em;
  transition:color .3s var(--sd-ease);
}
.std-redesign .std-step__t{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.15rem,1.7vw,1.42rem); line-height:1.1; margin:0 0 .5em;
  color:var(--sd-ink);
}
.std-redesign .std-step__d{
  font-size:.96rem; line-height:1.6; color:var(--sd-muted);
  transition:color .3s var(--sd-ease);
}

@media (hover:hover){
  .std-redesign .std-step:hover .std-step__dot{ background:var(--sd-lime); transform:scale(1.35); }
  .std-redesign .std-step:hover .std-step__line::after{ transform:scaleX(1); }
  .std-redesign .std-step:hover .std-step__arrow{ opacity:1; transform:translate(0,-50%); color:var(--sd-ink); }
  .std-redesign .std-step:hover .std-step__n{ color:var(--sd-violet); }
  .std-redesign .std-step:hover .std-step__d{ color:var(--sd-ink); }
}

/* ==========================================================================
   05 · BRAND STATEMENT
   ========================================================================== */
.std-redesign .std-statement{
  padding:clamp(var(--sp-56),6.5vw,var(--sp-112)) 0 clamp(var(--sp-48),5.5vw,var(--sp-80));
}
.std-redesign .std-statement__t{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.055em;
  line-height:.88; font-size:clamp(2.8rem,8.2vw,7rem); color:var(--sd-ink);
  margin:0; text-transform:uppercase;
}
/* the second line steps out of the grid to the right; contained by the root's
   overflow-x:clip, and the offset is a percentage of the line's own box so it
   cannot outrun the viewport */
.std-redesign .std-statement__t br + *{ display:inline; }
.std-redesign .std-statement__t{ position:relative; }
@media (min-width:900px){
  .std-redesign .std-statement__t{ margin-left:-.035em; }
}

/* ==========================================================================
   06 · THE PEOPLE
   ========================================================================== */
.std-redesign .std-people{ padding:0 0 var(--sd-band); }
.std-redesign .std-people__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(var(--sp-16),1.8vw,var(--sp-24)); align-items:stretch;
}
.std-redesign .std-scene--people{ aspect-ratio:auto; min-height:clamp(320px,38vw,480px); }
.std-redesign .std-scene--people .std-scene__photo{ position:absolute; inset:0; }

/* the room set. Same em-on-cqw system as the hero scene: the desk line sets
   the horizon, the monitor stands on it, and the chair sits in front. */
.std-redesign .std-set--room{
  background:radial-gradient(115% 95% at 28% 10%, #2C2B28 0%, #171615 46%, #0B0A0A 100%);
}
.std-redesign .std-set--room::after{ top:74%; }
.std-redesign .std-set__lamp2{
  position:absolute; left:6%; top:42%; width:20%; aspect-ratio:1; border-radius:50%; z-index:0;
  background:#FFF3D2; opacity:.22; filter:blur(1.7em);
}
.std-redesign .std-set__frame{
  position:absolute; margin:0; padding:1em .9em; z-index:2;
  background:#100F0F; border:1px solid rgba(255,255,255,.11); border-radius:.16em;
  font-family:var(--font-display); font-weight:600; line-height:1.24;
  letter-spacing:-.015em; font-size:.72em; color:#EDEBE8;
  box-shadow:0 1em 2em -1.2em rgba(0,0,0,.9);
}
.std-redesign .std-set__frame--1{ left:13%; top:9%; width:26%; }
.std-redesign .std-set__frame--2{ right:8%; top:9%; width:26%; }
.std-redesign .std-set__frame i{
  display:block; width:1.4em; height:.1em; background:#6E6B67; margin-top:.8em;
}
/* the desk: a lit top edge and a darker front face under it */
.std-redesign .std-set__desk{
  position:absolute; left:6%; right:3%; top:71%; height:1.4em; z-index:2;
  background:linear-gradient(180deg,#6A5F53 0%,#3E372F 40%,#221E1A 100%);
  border-radius:.12em;
  box-shadow:0 1.8em 2.6em -1.4em rgba(0,0,0,.9);
}
.std-redesign .std-set__monitor{
  position:absolute; left:46%; bottom:30.5%; width:34%; aspect-ratio:16/10; z-index:3;
  transform:translateX(-50%);
  background:linear-gradient(158deg,#1E1D1C,#0D0C0C);
  border:1px solid rgba(255,255,255,.13); border-radius:.28em;
  display:flex; align-items:center; justify-content:center; white-space:nowrap;
  font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:.95em; color:#F2F1EF; box-shadow:0 1.2em 2.2em -1em rgba(0,0,0,.9);
}
/* the stand, so the monitor meets the desk instead of floating */
.std-redesign .std-set__monitor::after{
  content:""; position:absolute; left:50%; top:100%; width:16%; height:1.5em;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#343230,#211F1E);
  border-radius:0 0 .1em .1em;
}
.std-redesign .std-set__monitor i{ font-style:normal; color:var(--sd-lime); }
.std-redesign .std-set__chair{
  position:absolute; left:29%; bottom:-6%; width:30%; height:22%; z-index:4;
  background:linear-gradient(180deg,#2A2724 0%,#171514 60%,#0E0D0D 100%);
  border-radius:1.4em 1.4em .4em .4em;
  box-shadow:0 -1px 0 rgba(255,255,255,.09) inset;
}
.std-redesign .std-set__plant--room{ left:1.5%; bottom:-4%; width:19%; color:#4A473C; z-index:4; }

/* the dark editorial card */
.std-redesign .std-card{
  position:relative; background:var(--sd-black); color:var(--sd-white);
  border-radius:var(--sd-r); overflow:hidden;
  padding:clamp(var(--sp-32),3.6vw,var(--sp-64));
  display:flex; flex-direction:column; justify-content:center;
}
/* Same treatment as the closing panel's mark, so the two dark cards read as
   one system: a small, sharp spark in the corner rather than a large faint
   wash sitting behind the heading. */
.std-redesign .std-card__spark{
  position:absolute; right:clamp(24px,3.4vw,44px); top:clamp(24px,3.4vw,44px);
  width:clamp(40px,3.8vw,56px); height:clamp(40px,3.8vw,56px);
  opacity:.85; pointer-events:none;
}
.std-redesign .std-card__spark .std-star{ stroke-width:2.6; }
.std-redesign .std-card__h{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.04em;
  line-height:1.0; font-size:clamp(2rem,3.4vw,3rem); color:var(--sd-white);
  margin:0 0 var(--sp-24);
}
.std-redesign .std-card__p{
  font-size:1.04rem; line-height:1.68; color:var(--sd-muted-dark);
  max-width:40ch; margin:0 0 clamp(var(--sp-32),3vw,var(--sp-40));
}
.std-redesign .std-card__foot{
  display:flex; align-items:center; gap:var(--sp-40); flex-wrap:wrap;
}
.std-redesign .std-note--people{
  color:var(--sd-white); padding-left:52px; transform:rotate(-1deg);
}
.std-redesign .std-note--people .std-note__hook{ left:0; top:6px; width:42px; }

/* ==========================================================================
   07 · CLOSING CTA
   ========================================================================== */
.std-redesign .std-cta{ padding:0 0 clamp(var(--sp-80),9vw,var(--sp-152)); }
.std-redesign .std-cta__panel{
  position:relative; overflow:hidden; background:var(--sd-black);
  color:var(--sd-white); border-radius:var(--sd-r);
  padding:clamp(var(--sp-48),5.5vw,var(--sp-112)) clamp(var(--sp-32),4vw,var(--sp-80));
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(var(--sp-32),4vw,var(--sp-64)); align-items:end;
}
.std-redesign .std-cta__spark{
  position:absolute; right:clamp(24px,4vw,64px); top:clamp(24px,4vw,52px);
  left:auto; bottom:auto; width:clamp(44px,4.4vw,64px); height:clamp(44px,4.4vw,64px);
  opacity:.85; pointer-events:none;
  animation:std-motif-turn 40s linear infinite;
}
.std-redesign .std-cta__spark .std-star{ stroke-width:2.6; }
.std-redesign .std-cta__h{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.045em;
  line-height:.98; font-size:clamp(2.4rem,5vw,4.4rem); color:var(--sd-white);
  margin:0 0 var(--sp-24);
}
.std-redesign .std-cta__p{
  font-size:1.05rem; line-height:1.66; color:var(--sd-muted-dark); max-width:46ch;
}
.std-redesign .std-cta__side{
  position:relative; display:flex; flex-direction:column;
  align-items:flex-start; gap:var(--sp-24);
}
.std-redesign .std-cta__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6em;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  line-height:1.7; text-transform:uppercase; color:var(--sd-muted-dark);
}
.std-redesign .std-cta__meta .dot{
  width:7px; height:7px; border-radius:50%; background:var(--sd-lime);
  display:inline-block; flex:0 0 auto;
}
.std-redesign .std-cta__meta--links a{
  color:var(--sd-white); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);
}
.std-redesign .std-cta__meta--links a:hover{ text-decoration-color:var(--sd-lime); }

/* the page's own block-editor content, if any */
.std-redesign .pagey{ color:var(--sd-muted); }

/* ==========================================================================
   REVEAL — hooks into main.js's .fade/.anim system with a small stagger.
   Content is visible by default and only hidden once html.anim is set (GSAP
   confirmed + motion allowed), so a blocked script never leaves a blank page.
   ========================================================================== */
html.anim .std-redesign .fade.d1{ transition-delay:.06s; }
html.anim .std-redesign .fade.d2{ transition-delay:.12s; }
html.anim .std-redesign .fade.d3{ transition-delay:.18s; }

@media (prefers-reduced-motion:reduce){
  .std-redesign *,
  .std-redesign *::before,
  .std-redesign *::after{
    animation:none !important;
    transition:none !important;
  }
  .std-redesign .std-step__line::after{ transform:scaleX(0); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- 1280 and down: tighten the three-column about grid ------------------ */
@media (max-width:1280px){
  .std-redesign .std-about__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);
    gap:var(--sp-32);
  }
  .std-redesign .std-seal{ left:-14px; }
}

/* --- 1024 and down: two columns, art below copy -------------------------- */
@media (max-width:1024px){
  .std-redesign .std-hero__grid{ grid-template-columns:1fr; gap:var(--sp-48); }
  .std-redesign .std-hero__art{ margin-right:0; max-width:620px; width:100%; }
  .std-redesign .std-lead{ max-width:52ch; }
  .std-redesign .std-servline{ margin-top:var(--sp-40); }

  /* about: heading over copy, motif drops to a horizontal strip */
  .std-redesign .std-about__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .std-redesign .std-about__motif{
    grid-column:1 / -1; justify-self:start; max-width:none;
    display:flex; align-items:center; gap:var(--sp-32);
    padding-top:var(--sp-16); border-top:1px solid var(--sd-line);
    width:100%;
  }
  .std-redesign .std-motif{ margin-bottom:0; flex:0 0 auto; width:48px; }
  .std-redesign .std-motif__list{ display:flex; flex-wrap:wrap; gap:0 var(--sp-24); line-height:1.6; }
  .std-redesign .std-motif__rule{ display:none; }
  .std-redesign .std-note--about{ margin-top:var(--sp-40); }

  .std-redesign .std-phil__grid,
  .std-redesign .std-proc__head{ grid-template-columns:1fr; gap:var(--sp-32); align-items:start; }
  .std-redesign .std-proc__aside{ padding-bottom:0; }

  /* the process rail stays horizontal here — see the 900px block below,
     where five columns stop being readable and it becomes a timeline */
  .std-redesign .std-steps{ gap:var(--sp-16); }
  .std-redesign .std-step__d{ font-size:.92rem; }

  /* people: stacked */
  .std-redesign .std-people__grid{ grid-template-columns:1fr; }
  .std-redesign .std-scene--people{ min-height:0; aspect-ratio:16/11; }
  .std-redesign .std-card{ padding:clamp(var(--sp-32),5vw,var(--sp-48)); }

  .std-redesign .std-cta__panel{ grid-template-columns:1fr; align-items:start; }
}

/* --- 900 and down: the process rail becomes a vertical timeline ---------- */
@media (max-width:900px){
  .std-redesign .std-steps{
    grid-template-columns:1fr; gap:0; margin-top:var(--sp-48);
  }
  .std-redesign .std-step{
    display:grid; grid-template-columns:30px minmax(0,1fr);
    column-gap:var(--sp-24); padding-bottom:var(--sp-40);
  }
  .std-redesign .std-step:last-child{ padding-bottom:0; }
  .std-redesign .std-step__track{
    grid-column:1; grid-row:1 / span 3; height:100%; width:11px; margin:0;
  }
  .std-redesign .std-step__dot{ top:4px; }
  /* the connector has to run all the way into the next dot, so it clears the
     list item's own bottom padding rather than stopping short of it */
  .std-redesign .std-step__line{
    left:5px; right:auto; top:20px; bottom:calc(-1 * var(--sp-40) - 4px);
    width:1px; height:auto;
  }
  .std-redesign .std-step__line::after{ transform:scaleY(0); transform-origin:top center; }
  .std-redesign .std-step:last-child .std-step__line{ display:none; }
  .std-redesign .std-step__arrow{ display:none; }
  .std-redesign .std-step__n{ grid-column:2; margin-bottom:.35em; }
  .std-redesign .std-step__t{ grid-column:2; font-size:1.28rem; }
  .std-redesign .std-step__d{ grid-column:2; max-width:56ch; font-size:1rem; }
  @media (hover:hover){
    .std-redesign .std-step:hover .std-step__line::after{ transform:scaleY(1); }
  }
}

/* --- 860 and down: cards go two-up, then one-up -------------------------- */
@media (max-width:860px){
  .std-redesign .std-about__grid{ grid-template-columns:1fr; }
  .std-redesign .std-about__body p{ max-width:58ch; }
  .std-redesign .std-principles{ grid-template-columns:1fr; }
  .std-redesign .std-pr__badge{ margin-bottom:var(--sp-16); }
  .std-redesign .std-pr__d{ max-width:58ch; }
  .std-redesign .std-proc__aside{ flex-direction:column; align-items:flex-start; gap:var(--sp-24); }
  .std-redesign .std-proc__aside p{ max-width:58ch; }
}

/* --- 640 and down: the mobile composition -------------------------------- */
@media (max-width:640px){
  .std-redesign{ --sd-band:clamp(56px,13vw,80px); }

  .std-redesign .std-hero{
    padding-top:calc(var(--nav-top) + var(--nav-h) + var(--ticker-h) + var(--sp-40));
  }
  .std-redesign .std-h1{ font-size:clamp(2.9rem,12.5vw,3.9rem); }
  .std-redesign .std-lead{ font-size:1.02rem; }
  .std-redesign .std-actions{ gap:var(--sp-8) var(--sp-16); }
  .std-redesign .std-actions .std-btn{ flex:1 1 auto; min-width:150px; }
  /* the service line moves under the CTAs and above the visual */
  .std-redesign .std-servline{ margin-top:var(--sp-32); letter-spacing:.12em; }
  .std-redesign .std-hero__art{ max-width:none; }
  .std-redesign .std-scene--hero{ aspect-ratio:4/3.4; }
  /* the seal moves to the empty top-left of the scene: on the right it sat
     straight on top of the wall poster */
  .std-redesign .std-seal{ left:10px; bottom:auto; top:-24px; width:72px; }
  .std-redesign .std-note--hero{ right:auto; left:5%; top:auto; bottom:5%; font-size:1rem; }
  .std-redesign .std-note--hero .std-note__arc{ display:none; }

  /* metrics: three compact cards in a stack, still legible */
  .std-redesign .std-metrics{ grid-template-columns:1fr; gap:var(--sp-16); }
  .std-redesign .std-metric{
    min-height:0; flex-direction:row; align-items:center;
    justify-content:space-between; padding:var(--sp-24); gap:var(--sp-16);
  }
  .std-redesign .std-metric__n{ font-size:2.5rem; }
  .std-redesign .std-metric__l{ text-align:right; }

  .std-redesign .std-motif__list{ font-size:10px; gap:0 var(--sp-16); }

  .std-redesign .std-statement{ padding:var(--sp-72) 0 var(--sp-56); }
  .std-redesign .std-statement__t{ font-size:clamp(2.6rem,13.5vw,4.4rem); line-height:.92; }

  .std-redesign .std-card__foot{ gap:var(--sp-24); }
  .std-redesign .std-note--people{ padding-left:46px; }

  .std-redesign .std-cta__panel{ padding:var(--sp-40) var(--sp-24); border-radius:var(--sd-r-md); }
  .std-redesign .std-cta__side{ width:100%; }
  .std-redesign .std-cta__side .std-btn{ width:100%; }
  .std-redesign .std-cta__spark{ width:40px; height:40px; right:20px; top:20px; }
}

/* --- 380 and down: the narrowest supported width ------------------------- */
@media (max-width:380px){
  .std-redesign .std-actions .std-btn{ width:100%; min-width:0; }
  .std-redesign .std-metric{ flex-direction:column; align-items:flex-start; }
  .std-redesign .std-metric__l{ text-align:left; }
  .std-redesign .std-seal{ width:62px; left:8px; }
}