/* Self-hosted fonts (SIL Open Font License): Outfit and Azeret Mono, variable weights. Latin + Latin-ext (₹). */
@font-face{font-family:'Outfit';font-style:normal;font-weight:200 500;font-display:swap;src:url(../fonts/outfit-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200 500;font-display:swap;src:url(../fonts/outfit-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/azeret-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/azeret-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* =============================================================
   DAHMION — site styles
   Tokens first. Light is the base; [data-theme="dark"] swaps them.
   The theme is set on <html> by the inline script in index.html.
   ============================================================= */

:root{
  /* light (default) */
  --bg:#FFFFFF;
  --bg-2:#F5F5F3;
  --bg-3:#EBEBE7;
  --ink:#0B0B0C;
  --muted:#6D6D73;
  --faint:#6F6F76;
  --line:rgba(11,11,12,.14);
  --line-soft:rgba(11,11,12,.07);
  --accent:#D95F00;
  --accent-ink:#0B0B0C;
  --menu-bg:#0B0B0C;
  --menu-ink:#F5F5F3;
  --mark-filter:invert(1);
  --shadow:0 26px 70px rgba(11,11,12,.13);
  --art:rgba(11,11,12,.09);

  --display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --mono:"Azeret Mono",ui-monospace,Menlo,monospace;

  --frame:clamp(16px,4.6vw,64px);   /* side gutter for the fixed frame */
  --pad:clamp(18px,4vw,58px);
  --maxw:1500px;
  --ease:cubic-bezier(.22,.8,.28,1);
}

:root[data-theme="dark"]{
  --bg:#08080A;
  --bg-2:#101014;
  --bg-3:#17171D;
  --ink:#F5F5F7;
  --muted:#93939E;
  --faint:#888894;
  --line:rgba(245,245,247,.14);
  --line-soft:rgba(245,245,247,.07);
  --accent:#FF8A22;
  --accent-ink:#0B0B0C;
  --menu-bg:#101014;
  --menu-ink:#F5F5F7;
  --mark-filter:none;
  --shadow:0 26px 70px rgba(0,0,0,.6);
  --art:rgba(245,245,247,.10);
}

*{box-sizing:border-box;}

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

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--display);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
}
body.locked{overflow:hidden;}

::selection{background:var(--accent);color:var(--accent-ink);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.03em;line-height:1;text-wrap:balance;}
h1{font-size:clamp(40px,7.6vw,124px);}
h2{font-size:clamp(30px,5.2vw,76px);}
h3{font-size:clamp(21px,2.6vw,34px);letter-spacing:-.02em;}

.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;}
.accent{color:var(--accent);}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2;}
.mark{display:block;aspect-ratio:148/221;background:url("../img/logo.png") center/contain no-repeat;filter:var(--mark-filter);height:1em;}

/* ================= fixed frame ================= */
.skip-link{position:fixed;left:var(--frame);top:12px;z-index:220;transform:translateY(-140%);background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
.skip-link:focus-visible{transform:translateY(0);}
.frame{position:fixed;inset:0;z-index:110;pointer-events:none;}
.frame > *{pointer-events:auto;}

.frame-logo{
  position:absolute;top:clamp(18px,2.6vw,34px);left:var(--frame);
  display:flex;align-items:center;gap:10px;
}
.frame-logo .mark{height:26px;}
.frame-logo b{
  font-weight:300;font-size:15px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink);transition:color .3s var(--ease);
}

.desktop-nav{
  position:absolute;top:clamp(16px,2.3vw,30px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:clamp(16px,2vw,30px);
  pointer-events:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.desktop-nav a{transition:color .3s var(--ease);}
.desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--accent);}

.frame-tools{
  position:absolute;top:clamp(14px,2.2vw,28px);right:var(--frame);
  display:flex;align-items:center;gap:10px;
}
.theme-btn{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  border:1px solid var(--line);border-radius:100px;background:transparent;
  color:var(--ink);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.theme-btn:hover{border-color:var(--accent);color:var(--accent);}
.theme-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;}
.menu-btn{
  width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  display:grid;place-content:center;gap:7px;padding:0;
}
.menu-btn i{display:block;width:26px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),width .4s var(--ease),background .3s var(--ease);}
.menu-btn:hover i:first-child{width:18px;}
body.menu-open .menu-btn i{background:var(--menu-ink);}
body.menu-open .menu-btn i:first-child{transform:translateY(4.2px) rotate(45deg);width:26px;}
body.menu-open .menu-btn i:last-child{transform:translateY(-4.2px) rotate(-45deg);}

/* frame while the fullscreen menu is open */
body.menu-open .frame-logo{color:var(--menu-ink);}
body.menu-open .frame-logo b{color:var(--menu-ink);}
body.menu-open .frame-logo .mark{filter:none;}
body.menu-open .desktop-nav{opacity:0;pointer-events:none;}

/* adaptive rail — JS toggles these based on whichever section (or tonal
   band) currently sits behind the fixed logo/menu, so it stays readable
   over dark AND light sections regardless of the overall site theme. */
.frame.on-dark{
  --ink:#F5F5F7;--muted:#B6B6BF;--faint:#A4A4AE;--line:rgba(245,245,247,.14);--mark-filter:none;
}
.frame.on-light{
  --ink:#0B0B0C;--muted:#55555D;--faint:#6F6F76;--line:rgba(11,11,12,.14);--mark-filter:invert(1);
}
body.menu-open .theme-btn{color:var(--menu-ink);border-color:rgba(255,255,255,.2);}
body.menu-open .theme-btn:hover{color:var(--accent);border-color:var(--accent);}
body.menu-open .frame-label,body.menu-open .frame-top{opacity:0;pointer-events:none;}

/* rotated edge labels */
.frame-label,.frame-top{
  position:absolute;left:var(--frame);bottom:clamp(24px,5vh,60px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);writing-mode:vertical-rl;transform:rotate(180deg);
  transition:color .3s var(--ease);
}
.frame-top{
  left:auto;right:var(--frame);display:flex;align-items:center;gap:14px;
  color:var(--muted);opacity:0;pointer-events:none;transition:opacity .4s var(--ease),color .3s var(--ease);
  background:none;border:0;cursor:pointer;font-family:var(--mono);
}
.frame-top.on{opacity:1;pointer-events:auto;}
.frame-top .circle{
  writing-mode:horizontal-tb;transform:rotate(180deg);
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.frame-top:hover .circle{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.frame-top svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:90;}

/* ================= line-art backdrop ================= */
.art{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.art svg{position:absolute;stroke:var(--art);fill:none;stroke-width:1;}
.art .poly{width:min(620px,60vw);top:-10%;right:-12%;animation:spin 100s linear infinite;}
.art .rings{width:min(520px,54vw);bottom:-12%;left:-18%;opacity:.7;animation:spin 100s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ================= custom cursor ================= */
.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--accent);z-index:130;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease);
  mix-blend-mode:normal;
}
.cursor.on{opacity:1;}
.cursor.grow{width:70px;height:70px;background:color-mix(in srgb,var(--accent) 18%,transparent);}
.cursor .cursor-label{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);opacity:0;transition:opacity .25s var(--ease);
}
.cursor.grow .cursor-label{opacity:1;}
@media (hover:none),(max-width:900px){.cursor{display:none;}}

/* ================= fullscreen menu ================= */
.menu{
  position:fixed;inset:0;z-index:100;background:var(--menu-bg);color:var(--menu-ink);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.menu.open{opacity:1;visibility:visible;}
.menu-left{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:clamp(80px,12vh,140px) clamp(24px,6vw,110px);
  border-right:1px solid rgba(255,255,255,.1);
}
.menu-left a{
  font-size:clamp(30px,4.6vw,62px);font-weight:300;letter-spacing:-.02em;line-height:1.32;
  color:var(--menu-ink);opacity:.65;transition:opacity .3s var(--ease),color .3s var(--ease),transform .4s var(--ease);
  display:flex;align-items:baseline;gap:16px;
}
.menu-left a span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;opacity:.5;}
.menu-left a:hover,.menu-left a[aria-current="page"]{opacity:1;color:var(--accent);transform:translateX(10px);}
.menu-right{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px;align-content:center;
  padding:clamp(80px,12vh,140px) clamp(24px,6vw,110px);
}
.menu-col h4{font-size:15px;font-weight:400;letter-spacing:0;margin-bottom:18px;}
.menu-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.menu-col li,.menu-col p{color:rgba(245,245,247,.55);font-size:15px;margin:0;line-height:1.5;}
.menu-col a:hover{color:var(--accent);}

/* ================= intro veil (fog + counter) =================
   Always dark, regardless of the site's light/dark theme — it just reads
   better that way. Overriding the tokens locally means every var(--ink)
   etc. below resolves to the dark palette no matter what [data-theme] is
   set on <html>. */
.veil{
  --bg:#08080A;--ink:#F5F5F7;--muted:#93939E;--line:rgba(245,245,247,.14);
  --accent:#FF8A22;--accent-ink:#0B0B0C;--mark-filter:none;
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:var(--bg);color:var(--ink);cursor:crosshair;touch-action:none;
  transition:opacity 1s var(--ease);
}
.js .veil{display:flex;}
.veil.gone{opacity:0;pointer-events:none;}
.veil canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.veil-brand{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vw,26px);text-align:center;padding:0 24px;}
.veil-brand .mark{height:clamp(72px,10vw,132px);}
.veil-word{font-size:clamp(28px,6vw,78px);font-weight:200;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;margin:0;}
.veil-tag{font-family:var(--mono);font-size:clamp(9px,1vw,11px);letter-spacing:.45em;text-indent:.45em;text-transform:uppercase;color:var(--muted);margin:0;}
.veil-count{
  position:absolute;right:var(--frame);bottom:clamp(24px,6vh,58px);z-index:3;
  font-size:clamp(48px,9vw,132px);font-weight:200;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink);opacity:.9;
}
.veil-ui{
  position:absolute;left:var(--frame);bottom:clamp(26px,6vh,58px);z-index:3;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.veil-hint{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
.veil-hint .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}
.veil-meter{width:min(260px,52vw);height:1px;background:var(--line);overflow:hidden;}
.veil-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .18s linear;}
.veil-skip{
  background:none;border:1px solid var(--line);color:var(--muted);border-radius:100px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 16px;cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.veil-skip:hover{color:var(--accent);border-color:var(--accent);}

/* ================= page shell ================= */
main{position:relative;z-index:2;padding:0 var(--frame);}
.band{padding:clamp(70px,11vh,150px) 0;}
.band + .band{border-top:1px solid var(--line-soft);}

.crumb{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:clamp(30px,6vh,64px);}
.crumb b{color:var(--ink);font-weight:400;}

.head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:end;margin-bottom:clamp(36px,6vw,76px);}
.head p{margin:0;color:var(--muted);max-width:44ch;font-size:17px;}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent);margin-bottom:22px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);}

/* ================= hero ================= */
.hero{padding-top:clamp(110px,17vh,190px);padding-bottom:clamp(50px,8vh,96px);}
.hero h1 span{display:block;}
.hero h1 .mark{display:inline-block;height:.72em;vertical-align:-.06em;margin-right:.16em;}
.hero-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:end;margin-top:clamp(38px,6vh,72px);}
.hero-sub p{margin:0;color:var(--muted);font-size:clamp(16px,1.3vw,19px);max-width:42ch;}
.hero-sub p b{color:var(--ink);font-weight:500;}
.scroll-cue{display:inline-flex;align-items:center;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
.scroll-cue .circle{
  width:52px;height:52px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.scroll-cue:hover .circle{background:var(--accent);color:var(--accent-ink);transform:translateY(4px);}
.scroll-cue svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;}

/* ================= staggered work grid ================= */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,90px) clamp(24px,5vw,80px);}
.work-item{display:block;position:relative;}
.work-item:nth-child(even){margin-top:clamp(40px,12vw,180px);}
.work-item figure{margin:0;overflow:hidden;background:var(--bg-2);}
.work-item img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transform:scale(1.02);transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.work-item:nth-child(4n+2) img{aspect-ratio:3/4;}
.work-item:hover img{transform:scale(1.09);}
.work-meta{display:flex;align-items:center;gap:16px;margin:22px 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;}
.work-meta .cat{color:var(--accent);}
.work-meta .date{color:var(--faint);}
.work-item h3{transition:color .3s var(--ease);}
.work-item:hover h3{color:var(--accent);}
.work-item p{margin:12px 0 0;color:var(--muted);font-size:15.5px;max-width:46ch;}
.work-item .metric{margin-top:16px;display:flex;align-items:baseline;gap:12px;}
.work-item .metric b{font-size:clamp(20px,2.2vw,28px);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.work-item .metric span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);max-width:24ch;line-height:1.5;}

/* ================= stats ================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line-soft);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.stat{background:var(--bg);padding:clamp(26px,3.4vw,44px) clamp(16px,2vw,26px);}
.stat .n{display:block;font-size:clamp(38px,5vw,72px);font-weight:200;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;}
.stat .l{display:block;margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.45;}

/* ================= capability rows ================= */
.caps{border-top:1px solid var(--line);}
.cap{
  display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.1fr);gap:clamp(14px,3vw,48px);
  padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--line);align-items:baseline;
  transition:padding-left .4s var(--ease);
}
.cap:hover{padding-left:clamp(8px,1.6vw,24px);}
.cap .num{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint);}
.cap p{margin:0;color:var(--muted);font-size:16px;max-width:52ch;}

/* clients */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.clients div{background:var(--bg);padding:28px 12px;text-align:center;color:var(--muted);font-size:14px;letter-spacing:.14em;text-transform:uppercase;transition:color .3s var(--ease),background .3s var(--ease);}
.clients div:hover{color:var(--accent);background:var(--bg-2);}

/* ================= studio ================= */
.manifesto{font-size:clamp(21px,3vw,42px);font-weight:300;line-height:1.22;letter-spacing:-.025em;max-width:26ch;margin:0 0 clamp(30px,5vw,58px);}
.manifesto span{color:var(--faint);}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(24px,4vw,64px);}
.cols p{margin:0 0 18px;color:var(--muted);}
.cols p:last-child{margin-bottom:0;}
.cols b{color:var(--ink);font-weight:500;}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(34px,5vw,64px);}
.principle{border-top:1px solid var(--ink);padding-top:16px;}
.principle h4{font-size:15px;font-weight:500;letter-spacing:0;margin-bottom:10px;}
.principle p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;}

.steps{border-top:1px solid var(--line);}
.step{display:grid;grid-template-columns:78px minmax(0,1fr) 140px;gap:clamp(14px,3vw,44px);padding:clamp(22px,2.8vw,34px) 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .4s var(--ease);}
.step:hover{padding-left:clamp(8px,1.6vw,24px);}
.step .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);}
.step h4{font-size:clamp(18px,2.2vw,26px);font-weight:300;letter-spacing:-.02em;margin-bottom:10px;}
.step p{margin:0;color:var(--muted);font-size:16px;max-width:58ch;}
.step .dur{justify-self:end;text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(20px,3vw,40px);}
.person .av{aspect-ratio:4/5;background:var(--bg-2);display:grid;place-items:center;font-size:66px;font-weight:200;color:var(--faint);margin-bottom:18px;}
.person b{display:block;font-weight:500;font-size:15px;margin-bottom:6px;}
.person span{color:var(--muted);font-size:14.5px;line-height:1.55;}

.honors{border-top:1px solid var(--line-soft);}
.honor{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:20px;padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:baseline;}
.honor .yr{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint);font-variant-numeric:tabular-nums;}
.honor .what{font-size:16.5px;}
.honor .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-align:right;}

/* ================= services ================= */
.services-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr);gap:clamp(30px,5vw,84px);align-items:start;}
.services-aside{position:sticky;top:clamp(90px,14vh,140px);}
.services-aside p{color:var(--muted);max-width:32ch;margin:18px 0 0;font-size:15.5px;line-height:1.6;}
.services-aside .btn{margin-top:30px;}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.service-card{display:block;background:var(--bg);padding:clamp(26px,3vw,42px);position:relative;transition:background .35s var(--ease);}
.service-card .num{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--faint);margin-bottom:20px;}
.service-card h3{margin-bottom:14px;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;}
.service-card .lead{margin:0 0 22px;color:var(--muted);font-size:15px;line-height:1.6;max-width:38ch;}
.deliverables{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.deliverables li{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:100px;padding:6px 12px;line-height:1.4;}
.service-card .more{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
.service-card .more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s var(--ease);}
.service-card:hover{background:var(--bg-2);}
.service-card:hover .more{color:var(--accent);}
.service-card:hover .more svg{transform:translateX(3px);}
@media (max-width:980px){.services-layout{grid-template-columns:1fr;}.services-aside{position:static;}}
@media (max-width:620px){.service-grid{grid-template-columns:1fr;}}

.engagements{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.eng{background:var(--bg);padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;position:relative;transition:background .4s var(--ease);}
.eng:hover{background:var(--bg-2);}
.eng.feature{background:var(--bg-2);}
.eng .badge{align-self:flex-start;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:100px;}
.eng h4{font-size:22px;font-weight:300;letter-spacing:-.02em;}
.eng .price{font-size:26px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.eng .price small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
.eng p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;}
.eng .fit{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.8;}

details.faq{border-bottom:1px solid var(--line-soft);padding:20px 0;}
details.faq:first-of-type{border-top:1px solid var(--line-soft);}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:clamp(17px,1.9vw,22px);font-weight:300;letter-spacing:-.02em;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:18px;flex:none;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin:14px 0 0;color:var(--muted);max-width:64ch;font-size:16px;}

/* ================= contact ================= */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);}
form{display:flex;flex-direction:column;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--display);font-size:17px;padding:11px 2px;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6;}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 20px,calc(100% - 7px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#d33;}
.field-error{min-height:18px;color:#d33;font-size:13px;line-height:1.35;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px;}
.btn{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:17px 28px;border-radius:100px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-2px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent;}
.form-note{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.8;min-height:16px;}
.form-note.ok{color:var(--accent);}

.contact-side{display:flex;flex-direction:column;}
.addr{padding:22px 0;border-bottom:1px solid var(--line-soft);}
.addr:first-child{border-top:1px solid var(--line-soft);}
.addr b{display:block;font-weight:500;font-size:15px;margin-bottom:8px;}
.addr span{display:block;color:var(--muted);font-size:15px;line-height:1.6;}
.addr a{color:var(--accent);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;}
.addr a:hover{text-decoration:underline;}

/* ================= closer + footer ================= */
.closer{text-align:center;padding:clamp(80px,14vh,180px) 0;border-top:1px solid var(--line-soft);}
.closer .mark{height:clamp(40px,4.6vw,62px);margin:0 auto clamp(26px,4vh,40px);}
.closer h2{font-size:clamp(32px,6.6vw,104px);}
.closer p{color:var(--muted);max-width:44ch;margin:24px auto 34px;}
footer{padding:26px 0 40px;border-top:1px solid var(--line-soft);}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.foot-in a:hover{color:var(--accent);}

/* ================= fixed rail colour =================
   The fixed rail (logo, page label, menu lines, back-to-top) used to invert
   itself against whatever section scrolled behind it via mix-blend-mode:
   difference. That trick silently breaks on position:fixed content in
   Chromium — the rail gets promoted to its own compositing layer, so
   "difference" never actually sees the page behind it and just paints
   plain white, which vanishes on the light theme's white background.
   Rail elements now simply follow the current theme's ink colour, which
   is always guaranteed to contrast with --bg. */

/* ================= reveals ================= */
/* Fallback path (no GSAP): a light CSS reveal, only armed once JS confirms
   IntersectionObserver support via .io on <html>. GSAP, when present, takes
   over and clears these. Content is always visible without JS. */
.io.no-gsap .reveal{opacity:0;transform:translateY(26px);}
.io.no-gsap .reveal.seen{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);}

/* ================= page-transition curtain ================= */
.curtain{
  position:fixed;inset:0;z-index:150;pointer-events:none;
  background:var(--menu-bg);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.curtain.in{transform:scaleY(1);transform-origin:bottom;}   /* covering, before leaving */
.curtain.out{transform:scaleY(0);transform-origin:top;}     /* uncovering, on arrival */
.curtain-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:44px;aspect-ratio:148/221;
  background:url("../img/logo.png") center/contain no-repeat;
  opacity:0;transition:opacity .3s var(--ease);
}
.curtain.in .curtain-logo{opacity:1;}

/* hero line masks — GSAP animates the inner span up from behind the mask */
.line-mask{display:block;overflow:hidden;padding-bottom:.04em;}
.line-mask > *{display:inline-block;}
.band-cta{margin-top:clamp(30px,4vw,52px);}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;}
.foot-nav a{color:var(--faint);}
.foot-nav a:hover{color:var(--accent);}

/* magnetic wrap keeps the button centred while JS nudges it */
.magnetic{display:inline-block;will-change:transform;}

/* marquee strip */
.marquee{overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:20px 0;}
.marquee-track{display:flex;gap:0;width:max-content;will-change:transform;}
.marquee-track span{
  display:inline-flex;align-items:center;gap:34px;padding-right:34px;white-space:nowrap;
  font-size:clamp(28px,4.4vw,60px);font-weight:300;letter-spacing:-.02em;color:var(--faint);
}
.marquee-track span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;}

/* ================= responsive ================= */
@media (max-width:1100px){
  .head{grid-template-columns:1fr;}
  .hero-sub{grid-template-columns:1fr;}
  .cap{grid-template-columns:52px minmax(0,1fr);}
  .cap p{grid-column:2;}
  .practice{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .menu{grid-template-columns:1fr;}
  .menu-left{border-right:0;padding-bottom:20px;justify-content:flex-end;}
  .menu-right{padding-top:0;align-content:start;}
}
@media (max-width:760px){
  .work-grid{grid-template-columns:1fr;}
  .work-item:nth-child(even){margin-top:0;}
  .work-item:nth-child(4n+2) img{aspect-ratio:4/3;}
  .step{grid-template-columns:1fr;}
  .step .dur{justify-self:start;text-align:left;}
  .field-row{grid-template-columns:1fr;}
  .honor{grid-template-columns:56px 1fr;}
  .honor .who{grid-column:2;text-align:left;}
  .frame-label{display:none;}
  .frame-logo b{display:none;}
  .theme-btn span{display:none;}
  .theme-btn{padding:0 12px;}
  .desktop-nav{display:none;}
  main{padding:0 clamp(16px,5vw,28px);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .js .reveal{opacity:1;transform:none;}
}

/* ================= tonal section bands (dark / light within any theme) ================= */
.tone-dark{
  --bg:#08080A;--bg-2:#101014;--bg-3:#17171D;--ink:#F5F5F7;--muted:#B6B6BF;--faint:#A4A4AE;
  --line:rgba(245,245,247,.14);--line-soft:rgba(245,245,247,.07);--accent:#FF8A22;--accent-ink:#0B0B0C;
  background:var(--bg);color:var(--ink);
}
.tone-light{
  --bg:#FFFFFF;--bg-2:#F5F5F3;--bg-3:#EBEBE7;--ink:#0B0B0C;--muted:#55555D;--faint:#6F6F76;
  --line:rgba(11,11,12,.14);--line-soft:rgba(11,11,12,.07);--accent:#D95F00;--accent-ink:#0B0B0C;
  background:var(--bg);color:var(--ink);
}
/* bleed tonal bands edge-to-edge while keeping their content aligned to the grid */
.band.tone-dark,.band.tone-light{
  margin-left:calc(var(--frame)*-1);margin-right:calc(var(--frame)*-1);
  padding-left:var(--frame);padding-right:var(--frame);
}
.band.tone-dark + .band.tone-light,.band.tone-light + .band.tone-dark{border-top:0;}

/* big statement line */
.statement{font-size:clamp(28px,5.4vw,72px);font-weight:200;letter-spacing:-.035em;line-height:1.04;max-width:20ch;margin:0;}
.statement b{font-weight:400;color:var(--accent);}

/* testimonial voices */
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.voice{background:var(--bg);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:18px;margin:0;}
.voice .q{font-family:var(--display);font-weight:300;font-size:46px;line-height:.4;color:var(--accent);height:26px;}
.voice p{margin:0;font-size:clamp(16px,1.4vw,20px);line-height:1.5;}
.voice .by{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.voice .by b{display:block;color:var(--ink);font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;margin-bottom:3px;}

/* ================= home: studio teaser ================= */
.teaser{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,4vw,60px);align-items:stretch;}
.teaser-panel{border:1px solid var(--line);min-height:260px;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,36px);gap:24px;}
.teaser-panel .mark{height:44px;filter:var(--mark-filter);}
.teaser-panel .mono{color:var(--faint);}
.teaser-body{display:flex;flex-direction:column;gap:24px;justify-content:center;}
.teaser-body p{margin:0;font-size:clamp(18px,1.7vw,23px);color:var(--muted);max-width:48ch;line-height:1.5;}
.teaser-body .btn{align-self:flex-start;}
@media (max-width:760px){.teaser{grid-template-columns:1fr;}}

/* ================= journal / posts ================= */
.journal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
@media (max-width:900px){.journal{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.journal{grid-template-columns:1fr;}}
.post{background:var(--bg);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px;min-height:220px;text-decoration:none;transition:background .3s var(--ease);}
.post:hover{background:var(--bg-2);}
.post .meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;gap:14px;}
.post .meta .cat{color:var(--accent);}
.post h3{font-size:clamp(19px,2vw,26px);transition:color .3s var(--ease);}
.post:hover h3{color:var(--accent);}
.post p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;}
.post .more{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.post:hover .more{color:var(--accent);}

/* editorial hero (home) */
.hero-lg h1{font-size:clamp(46px,10vw,150px);letter-spacing:-.04em;}
.hero-lg{padding-top:clamp(120px,18vh,200px);}

/* =============================================================
   DAHMION — infographic layer
   Loaded AFTER site.css. Uses the same tokens (--accent, --ink,
   --muted, --line, --mono) so every figure follows the theme and
   the brand colour automatically. Nothing here redefines a colour.
   ============================================================= */

/* ---------- figure shell ---------- */
.fig{
  border:1px solid var(--line-soft);
  border-radius:4px;
  padding:clamp(22px,3.2vw,40px);
  background:var(--bg-2);
}
.tone-dark .fig{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);}
.fig + .fig{margin-top:18px;}
.fig-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 24px;margin-bottom:clamp(20px,2.6vw,34px);
}
.fig-head h3{font-size:clamp(19px,2vw,26px);font-weight:300;letter-spacing:-.02em;}
.fig-note{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);
}
.fig-grid{display:grid;gap:18px;}
@media (min-width:900px){
  .fig-grid.two{grid-template-columns:1fr 1fr;}
  .fig-grid.split{grid-template-columns:1.25fr 1fr;}
}

/* ---------- horizontal bars ---------- */
.bars{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;}
.bar-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.bar-name{font-size:15px;color:var(--ink);letter-spacing:-.01em;}
.bar-val{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bar-track{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden;}
.bar-fill{
  display:block;height:100%;width:0;border-radius:4px;
  background:var(--accent);
  transition:width 1.1s var(--ease);
}
.bar-fill.muted{background:var(--faint);opacity:.55;}
.bar-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ---------- donut rings ---------- */
.rings-row{
  display:grid;gap:clamp(20px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.ring{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.ring-svg{width:clamp(120px,14vw,168px);height:auto;transform:rotate(-90deg);}
.ring-svg .track{fill:none;stroke:var(--line);stroke-width:5;}
.ring-svg .val{
  fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1 999;transition:stroke-dasharray 1.3s var(--ease);
}
.ring-wrap{position:relative;display:grid;place-items:center;}
.ring-num{
  position:absolute;font-size:clamp(26px,3.2vw,38px);font-weight:200;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
.ring-num i{font-style:normal;font-size:.5em;color:var(--accent);margin-left:1px;}
.ring-label{font-size:14px;color:var(--muted);max-width:22ch;line-height:1.45;}

/* ---------- funnel ---------- */
.funnel{display:grid;gap:clamp(20px,3vw,44px);align-items:center;}
@media (min-width:820px){ .funnel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.funnel-svg{width:100%;height:auto;}
.funnel-svg .fn{
  fill:var(--accent);
  opacity:0;transform:translateY(10px);transform-box:fill-box;transform-origin:center;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.funnel-svg .fn.on{transform:none;}
.funnel-svg .fn:nth-of-type(1).on{opacity:1;}
.funnel-svg .fn:nth-of-type(2).on{opacity:.82;}
.funnel-svg .fn:nth-of-type(3).on{opacity:.62;}
.funnel-svg .fn:nth-of-type(4).on{opacity:.42;}
.fn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.fn-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:clamp(13px,1.7vw,19px) 0;border-bottom:1px solid var(--line-soft);
}
.fn-list li:first-child{border-top:1px solid var(--line-soft);}
.fn-list b{font-weight:400;font-size:clamp(15px,1.6vw,18px);letter-spacing:-.01em;color:var(--ink);}
.fn-list span{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fn-drop{
  margin:22px 0 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}

/* ---------- line curve ---------- */
.curve{width:100%;height:auto;overflow:visible;}
.curve .grid{stroke:var(--line-soft);stroke-width:1;}
.curve .axis{stroke:var(--line);stroke-width:1;}
.curve .line{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.curve .line.ghost{stroke:var(--faint);stroke-width:1.5;stroke-dasharray:4 5;stroke-dashoffset:0;opacity:.6;}
.curve .area{fill:var(--accent);opacity:0;transition:opacity 1.2s var(--ease) .5s;}
.curve.on .line{stroke-dashoffset:0;}
.curve.on .area{opacity:.08;}
.curve .dot{fill:var(--accent);stroke:var(--bg);stroke-width:2.5;}
.curve text{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--faint);text-transform:uppercase;}
.curve text.big{font-size:15px;fill:var(--ink);letter-spacing:-.01em;text-transform:none;}

/* ---------- KPI tiles ---------- */
.kpis{
  display:grid;gap:1px;background:var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border:1px solid var(--line-soft);
}
.kpi{background:var(--bg);padding:clamp(22px,2.8vw,34px);}
.tone-dark .kpi{background:var(--bg-2);}
.kpi b{
  display:block;font-size:clamp(34px,4.6vw,62px);font-weight:200;letter-spacing:-.045em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.kpi b i{font-style:normal;color:var(--accent);}
.kpi span{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);line-height:1.7;
}

/* ---------- step rail ---------- */
.rail{position:relative;display:grid;gap:clamp(26px,3vw,40px);}
@media (min-width:860px){ .rail{grid-template-columns:repeat(3,1fr);} }
.rail::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line);
  display:none;
}
@media (min-width:860px){ .rail::before{display:block;} }
.rail-step{position:relative;padding-top:34px;}
.rail-step::before{
  content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1px solid var(--accent);
}
.rail-step.on::before{background:var(--accent);}
.rail-step .n{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--accent);
  display:block;margin-bottom:10px;
}
.rail-step h3{font-size:clamp(18px,2vw,24px);font-weight:300;margin-bottom:10px;}
.rail-step p{margin:0;color:var(--muted);font-size:15px;max-width:34ch;}

/* ---------- service matrix ---------- */
.matrix{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.mx{
  background:var(--bg);display:grid;gap:12px 24px;align-items:center;
  grid-template-columns:44px minmax(0,1fr);
  padding:clamp(20px,2.4vw,28px);
  transition:background .4s var(--ease);
}
.tone-dark .mx{background:var(--bg-2);}
.mx:hover{background:var(--bg-3);}
@media (min-width:880px){
  .mx{grid-template-columns:44px minmax(0,1.1fr) minmax(0,1.4fr) 150px;}
}
.mx .num{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);}
.mx h3{font-size:clamp(18px,2vw,25px);font-weight:300;letter-spacing:-.02em;}
.mx p{margin:0;color:var(--muted);font-size:15px;}
.mx .moves{
  display:flex;flex-direction:column;gap:5px;
  grid-column:2;
}
@media (min-width:880px){ .mx .moves{grid-column:auto;align-items:flex-end;text-align:right;} }
.mx .moves b{font-size:26px;font-weight:200;letter-spacing:-.03em;color:var(--ink);line-height:1;}
.mx .moves span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ---------- comparison ---------- */
.versus{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
@media (min-width:820px){ .versus{grid-template-columns:1fr 1fr;} }
.vs{background:var(--bg);padding:clamp(24px,3vw,38px);}
.tone-dark .vs{background:var(--bg-2);}
.vs .tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:20px;
}
.vs.good .tag{color:var(--accent);}
.vs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.vs li{position:relative;padding-left:26px;font-size:15.5px;color:var(--muted);line-height:1.5;}
.vs li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:1px;background:var(--faint);
}
.vs.good li{color:var(--ink);}
.vs.good li::before{background:var(--accent);width:11px;height:11px;top:5px;border-radius:50%;}

/* ---------- legend-free single-series note ---------- */
.fig-key{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.fig-key i{display:inline-flex;align-items:center;gap:8px;font-style:normal;}
.fig-key i::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--accent);}
.fig-key i.alt::before{background:var(--faint);opacity:.6;}

/* ---------- compact hero stat strip ---------- */
.hero-figs{
  display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:clamp(34px,5vh,64px);
}
.hero-figs div{background:var(--bg);padding:20px clamp(16px,2vw,24px);}
.hero-figs b{
  display:block;font-size:clamp(24px,3vw,38px);font-weight:200;letter-spacing:-.04em;
  color:var(--ink);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.hero-figs span{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);
}

/* ---------- placeholder marker ---------- */
.todo{
  border-left:2px solid var(--accent);padding:10px 0 10px 16px;margin:0 0 26px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);line-height:1.9;
}

/* ---------- FAQ ---------- */
.faq{max-width:900px;}
.faq details{border-bottom:1px solid var(--line-soft);}
.faq details:first-child{border-top:1px solid var(--line-soft);}
.faq summary{
  cursor:pointer;list-style:none;display:flex;gap:20px;align-items:baseline;
  justify-content:space-between;padding:clamp(18px,2.2vw,26px) 0;
  font-size:clamp(16px,1.8vw,21px);font-weight:300;letter-spacing:-.01em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1;flex:none;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{margin:0 0 clamp(18px,2.2vw,26px);color:var(--muted);max-width:62ch;font-size:16px;}

/* ---------- deliverables ---------- */
.deliver{
  list-style:none;margin:0;padding:0;display:grid;gap:14px 34px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.deliver li{position:relative;padding-left:28px;color:var(--muted);font-size:16px;line-height:1.55;}
.deliver li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--accent);
}

/* ---------- source note under a figure ---------- */
.fig-src{
  margin:20px 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);line-height:1.8;
}

/* ---------- preview badge (only while TEST_MODE is on in src/build.js) ---------- */
.preview-badge{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:140;
  display:flex;align-items:center;gap:9px;
  background:var(--menu-bg);color:var(--menu-ink);
  border:1px solid rgba(255,255,255,.18);border-radius:100px;
  padding:9px 16px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.preview-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  animation:blink 2s ease-in-out infinite;
}
.preview-badge button{
  background:none;border:0;color:inherit;opacity:.5;cursor:pointer;
  font:inherit;padding:0 0 0 6px;line-height:1;
}
.preview-badge button:hover{opacity:1;}
@media (max-width:600px){ .preview-badge{left:12px;right:12px;transform:none;justify-content:center;} }

/* DAHMION — additions for the rebuilt site (same tokens as site.css) */
.team-photo{margin:0 0 clamp(30px,4vw,52px);overflow:hidden;border:1px solid var(--line-soft);background:var(--bg-2);}
.team-photo img{display:block;width:100%;height:auto;}
.team-photo figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:12px 16px;}
.people .person{border-top:1px solid var(--line);padding-top:20px;}
.person .n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.person b{font-size:19px;font-weight:400;letter-spacing:-.01em;}
.markets .vs ul{margin-bottom:0;}
.vs p.lead{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 18px;max-width:46ch;}
.legal{max-width:74ch;}
.legal h3{font-weight:400;font-size:clamp(19px,1.8vw,23px);letter-spacing:-.01em;margin:clamp(30px,4vw,44px) 0 12px;}
.legal p,.legal li{color:var(--muted);font-size:16px;line-height:1.72;}
.legal ul{padding-left:20px;}
.legal a{color:var(--accent);}
.legal .updated{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.work-item p.plan{margin-top:10px;}

/* ================= phones & small tablets ================= */
/* Service cards: the description belongs in the text column, not under the 44px number column */
@media (max-width:879px){
  .mx{grid-template-columns:36px minmax(0,1fr);gap:8px 16px;}
  .mx p{grid-column:2;}
  .mx .moves{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;}
  .mx .moves b:empty{display:none;}
}
@media (max-width:760px){
  /* readable labels (the 9–10px mono labels are fine on desktop, too small on a phone) */
  .eyebrow,.crumb,.mx .num,.rail-step .n,.fig-note,.fig-src,.vs .tag,.work-meta,.post .meta,.post .more,
  .field label,.form-note,.person .n,.team-photo figcaption,.legal .updated{font-size:11px;letter-spacing:.14em;}
  .mx .moves span{font-size:10.5px;}
  .btn{font-size:11px;}
  /* contact links: big enough to tap */
  .addr a{display:inline-block;padding:10px 0;}
  /* legal pages: comfortable reading width on small screens */
  .legal p,.legal li{font-size:16px;}
  .legal p a,.legal li a{word-break:break-word;}
}

/* Mobile header: show the DAHMION name next to the mark; menu scrolls on short phones */
@media (max-width:760px){
  .frame-logo b{display:inline-block;font-size:12px;letter-spacing:.32em;}
  .menu{overflow-y:auto;-webkit-overflow-scrolling:touch;}
}

/* ================= fullscreen menu (rebuilt right panel) ================= */
/* left list: size to the screen height too, so all 8 items always fit */
.menu-left{overflow-y:auto;}
.menu-left a{font-size:clamp(28px,min(4.2vw,6.2vh),58px);line-height:1.28;}
/* right panel: top → CTA, middle → links, bottom → location */
.menu-right{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3.6vh,48px);align-content:normal;overflow-y:auto;padding-top:clamp(84px,11vh,130px);padding-bottom:clamp(28px,5vh,60px);}
.menu-kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.menu-kicker::before{content:"";width:28px;height:1px;background:var(--accent);}
.menu-cta-h{font-size:clamp(28px,3vw,46px);font-weight:200;letter-spacing:-.03em;line-height:1.08;margin:18px 0 14px;color:var(--menu-ink);max-width:14ch;}
.menu-cta-h b{font-weight:400;color:var(--accent);}
.menu-cta-p{color:rgba(245,245,247,.55);font-size:15px;line-height:1.6;max-width:40ch;margin:0 0 26px;}
.menu-btn-cta{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;background:var(--menu-ink);color:var(--menu-bg);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
.menu-btn-cta:hover{background:var(--accent);color:#fff;transform:translateY(-2px);}
.menu-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 40px;padding-top:clamp(24px,4vh,40px);border-top:1px solid rgba(255,255,255,.1);}
.menu-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:rgba(245,245,247,.45);margin-bottom:16px;}
.menu-col li{font-size:15.5px;color:rgba(245,245,247,.75);}
.menu-col a{transition:color .3s var(--ease);}
.menu-h4-gap{margin-top:28px;}
.menu-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,245,247,.4);}
/* phones & tablets: single column — keep the CTA and contact, drop the service list (it's one tap away) */
@media (max-width:1100px){
  .menu-left{justify-content:flex-start;padding-top:92px;padding-bottom:6px;overflow:visible;}
  .menu-right{justify-content:flex-start;gap:26px;padding-top:28px;padding-bottom:40px;overflow:visible;}
  .menu-services{display:none;}
  .menu-grid{grid-template-columns:1fr;padding-top:22px;}
  .menu-cta-h{font-size:28px;}
  .menu-cta-p{display:none;}
}

/* ================= team change requests (Oct 2026) ================= */
/* CR01 — FAQ sections centred in their band, questions stay left-aligned for easy reading */
.band:has(> .faq) .head{grid-template-columns:1fr;justify-items:center;text-align:center;margin-left:auto;margin-right:auto;}
.band:has(> .faq) .head .eyebrow{justify-content:center;}
.band:has(> .faq) .head p{margin:0 auto;}
.band .faq{margin-left:auto;margin-right:auto;}

/* CR03 — vertical page label sits on the very edge, clear of the content */
.frame-label{left:clamp(6px,1vw,16px);font-size:9px;opacity:.75;}

/* CR04 — "Back to top": a clear round button in the corner on every screen (no rotated text) */
.frame-top{left:auto;right:clamp(16px,2.4vw,36px);bottom:clamp(16px,3vh,32px);writing-mode:horizontal-tb;transform:none;}
.frame-top > span:first-child{display:none;}
.frame-top .circle{width:46px;height:46px;transform:none;background:var(--bg);border-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18);}
.frame-top .circle svg{transform:none;}

/* CR04 — footer: brand + three link groups, then a bottom bar */
footer{padding:clamp(48px,7vw,84px) 0 clamp(26px,3vw,34px);}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px clamp(24px,4vw,64px);}
.foot-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);}
.foot-brand .mark{height:26px;filter:var(--mark-filter);}
.foot-brand b{font-weight:300;font-size:15px;letter-spacing:.3em;text-transform:uppercase;}
.foot-brand p{color:var(--muted);font-size:15px;line-height:1.6;max-width:34ch;margin:18px 0 16px;}
.foot-brand a.foot-mail{color:var(--ink);font-size:15px;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease);}
.foot-brand a.foot-mail:hover{color:var(--accent);border-color:var(--accent);}
.foot-brand .foot-where{display:block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.foot-col h4,.foot-col .foot-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--faint);margin:0 0 16px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-col a{color:var(--muted);font-size:14.5px;transition:color .3s var(--ease);}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.foot-top{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;
  font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--ink);transition:border-color .3s var(--ease),color .3s var(--ease);}
.foot-top:hover{border-color:var(--accent);color:var(--accent);}
.foot-social{display:flex;gap:18px;}
@media (max-width:980px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .foot-brand{grid-column:1 / -1;} }
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px 20px;}
  .foot-col a{display:inline-block;padding:10px 0;font-size:15px;}
  .foot-brand a.foot-mail{display:inline-block;padding:10px 0 4px;}
  .foot-col ul{gap:2px;}
  .foot-col.foot-legal-col{grid-column:1 / -1;}
  .foot-col.foot-legal-col ul{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
}
/* CR05 — section headings that open their page */
.head h2 a.head-link{color:inherit;transition:color .3s var(--ease);}
.head h2 a.head-link:hover{color:var(--accent);}
/* The floating back-to-top button covered content on the right edge — the footer has its own "Back to top" button instead */
.frame-top{display:none !important;}

/* ================= Oct 2026 round 3 ================= */
/* Top bar backdrop after scrolling — matches the light/dark tone the bar is already painted for */
.frame::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(74px,8.6vw,108px);pointer-events:none;opacity:0;transition:opacity .35s var(--ease);
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);}
.frame.scrolled::before{opacity:1;}
.frame.on-dark::before{background:rgba(10,10,12,.86);}
.frame.on-light::before{background:rgba(255,255,255,.86);}
body.menu-open .frame::before{opacity:0;}

/* Services list: wider right-hand column so labels sit on one line */
@media (min-width:880px){
  .mx{grid-template-columns:44px minmax(0,1fr) minmax(0,1.3fr) 240px;}
  .mx .moves span{white-space:nowrap;}
  .mx .moves b{font-size:24px;}
}

/* "Who we work best with" — card grid */
.fit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.fit{background:var(--bg);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px;min-height:200px;transition:background .3s var(--ease);}
.tone-dark .fit{background:var(--bg-2);}
.fit:hover{background:var(--bg-3);}
.fit .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);}
.fit h3{font-size:clamp(20px,2vw,27px);font-weight:300;letter-spacing:-.02em;margin-top:auto;}
.fit p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:34ch;}
.fit-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;}
.fit-cta span{color:var(--muted);font-size:14.5px;}
@media (max-width:900px){ .fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .fit-grid{grid-template-columns:1fr;} .fit{min-height:0;} .fit h3{margin-top:4px;} }

/* Checklists (International "The basics", Launch types, Industries, Careers, Creator network):
   a full-width grid of ticked cells instead of a plain bullet list */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.checks li{position:relative;background:var(--bg);padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) clamp(58px,5vw,70px);
  font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.5;color:var(--ink);min-height:96px;display:flex;align-items:center;transition:background .3s var(--ease);}
.tone-dark .checks li{background:var(--bg-2);}
.checks li:hover{background:var(--bg-3);}
.checks li::before{content:"";position:absolute;left:clamp(20px,2.4vw,30px);top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;}
@media (max-width:900px){ .checks{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .checks{grid-template-columns:1fr;} .checks li{min-height:0;} }

/* ================= Journal articles ================= */
.article-wrap{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start;}
.article-side{position:sticky;top:clamp(96px,12vh,130px);display:flex;flex-direction:column;gap:26px;}
.article-meta{display:flex;flex-direction:column;gap:8px;margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.article-toc{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line-soft);}
.article-toc b{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--accent);margin-bottom:4px;}
.article-toc a{color:var(--muted);font-size:14px;line-height:1.45;transition:color .3s var(--ease);}
.article-toc a:hover{color:var(--accent);}
.article{max-width:70ch;font-size:clamp(16.5px,1.2vw,18px);line-height:1.75;color:var(--ink);}
.article p{margin:0 0 1.1em;color:var(--ink);opacity:.88;}
.article h2{font-size:clamp(25px,2.6vw,36px);font-weight:300;letter-spacing:-.025em;line-height:1.15;margin:1.9em 0 .6em;scroll-margin-top:110px;}
.article h2:first-child{margin-top:0;}
.article h3{font-size:clamp(19px,1.7vw,23px);font-weight:400;letter-spacing:-.01em;margin:1.6em 0 .5em;}
.article ul,.article ol{margin:0 0 1.2em;padding-left:1.25em;}
.article li{margin:0 0 .55em;opacity:.88;}
.article li::marker{color:var(--accent);}
.article b{font-weight:500;opacity:1;}
.article a{color:var(--accent);border-bottom:1px solid currentColor;}
.article .callout{margin:1.6em 0;padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);border-left:3px solid var(--accent);background:var(--bg-2);font-size:.98em;line-height:1.65;}
.journal-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.post p{flex:1;}
@media (max-width:900px){
  .article-wrap{grid-template-columns:1fr;}
  .article-side{position:static;}
  .article-toc{display:none;}
  .journal-2{grid-template-columns:1fr;}
}

/* ================= phone spacing: tighter vertical rhythm (desktop unchanged) ================= */
@media (max-width:760px){
  .hero{padding-top:104px;padding-bottom:20px;}
  .hero-sub{margin-top:28px;}
  .hero-figs{margin-top:32px;}
  .band{padding:52px 0;}
  .head{margin-bottom:26px;gap:16px;}
  .closer{padding:64px 0;}
  .closer p{margin:18px auto 26px;}
  .band-cta{margin-top:24px;}
  footer{padding-top:44px;}
}

/* Top-bar text menu: only where it has room (the ☰ menu covers tablets and phones); comfortable click targets */
@media (max-width:1099px){ .desktop-nav{display:none;} }
.desktop-nav a{display:inline-block;padding:10px 2px;font-size:10.5px;}
/* tablets: a little tighter than desktop too */
@media (min-width:761px) and (max-width:1100px){
  .hero{padding-bottom:36px;}
  .band{padding:76px 0;}
  .closer{padding:88px 0;}
}

/* ================= accessibility pass (audit Oct 2026) ================= */
/* Small orange labels need 4.5:1 contrast. On white/light backgrounds use a deeper orange; on dark keep the brand orange. */
:root{--accent-text:var(--accent);}
:root[data-theme="light"],.tone-light{--accent-text:#A84F00;}
.tone-dark,:root[data-theme="light"] .tone-dark{--accent-text:var(--accent);}
.eyebrow,.vs .tag,.person .n,.mx .num,.rail-step .n,.fit .n,.work-meta .cat,.post .meta .cat,.article-toc b,.legal a,.article a,.menu-kicker,.vs.good .tag{color:var(--accent-text);}
.addr a{color:var(--accent-text);}

/* Phones AND tablets: no label smaller than 11px */
@media (max-width:1100px){
  .eyebrow,.crumb,.mx .num,.rail-step .n,.fit .n,.fig-note,.fig-src,.fig-key i,.vs .tag,.work-meta,.work-meta .cat,.work-meta .date,
  .post .meta,.post .more,.field label,.form-note,.person .n,.team-photo figcaption,.legal .updated,.hero-figs span,.kpi span,
  .foot-where,.foot-bottom,.foot-col .foot-h,#theme-label,.article-meta,.mx .moves span,.btn{font-size:11px;letter-spacing:.13em;}
  /* comfortable tap targets */
  .frame-logo,.foot-logo{padding:8px 0;}
  .foot-brand a.foot-mail{display:inline-block;padding:10px 0 4px;}
  .addr a{display:inline-block;padding:10px 0;}
}
@media (max-width:1100px){ .foot-brand .foot-where,.work-item .metric span{font-size:11px;letter-spacing:.13em;} }
.desktop-nav a:hover,.desktop-nav a[aria-current="page"]{color:var(--accent-text);}

/* ================= designer change requests v4 (Oct 2026) ================= */
/* CR01 — softer top-bar backdrop: lighter, shorter and a long gentle fade, so no dark band appears */
.frame::before{height:clamp(62px,6.4vw,88px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 45%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.85) 45%,rgba(0,0,0,0) 100%);}
.frame.on-dark::before{background:rgba(10,10,12,.62);}
.frame.on-light::before{background:rgba(255,255,255,.66);}

/* CR02 — statement sections: headline left, a quiet orbit graphic + supporting line right */
.statement-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;}
.statement-aside{display:flex;flex-direction:column;align-items:flex-start;gap:22px;justify-self:end;max-width:340px;}
.statement-aside p{margin:0;color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.6;border-left:2px solid var(--accent);padding-left:16px;}
.statement-aside p b{color:var(--ink);font-weight:500;}
.orbit{width:clamp(150px,15vw,220px);height:auto;overflow:visible;}
.orbit circle{fill:none;stroke:var(--line);stroke-width:1;}
.orbit .orbit-dot,.orbit .orbit-core{fill:var(--accent);stroke:none;}
.orbit .orbit-spin{transform-origin:100px 100px;animation:orbit-spin 16s linear infinite;}
@keyframes orbit-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.orbit .orbit-spin{animation:none;}}
@media (max-width:900px){
  .statement-wrap{grid-template-columns:1fr;gap:28px;}
  .statement-aside{justify-self:start;flex-direction:row;align-items:center;gap:20px;max-width:none;}
  .orbit{width:96px;flex:none;}
}

/* CR04 — orange heading */
.head h2 .acc{color:var(--accent);}

/* CR06 — social icons (rendered only once profile links exist) */
.social-icons{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.social-icons a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:color .3s var(--ease),border-color .3s var(--ease);}
.social-icons a:hover{color:var(--accent);border-color:var(--accent);}
.social-icons svg{width:17px;height:17px;fill:currentColor;}

/* CR07 — phone footer: stacked sections, larger links, nothing cramped */
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:0;}
  .foot-brand{padding-bottom:28px;}
  .foot-brand p{font-size:16px;}
  .foot-col{border-top:1px solid var(--line-soft);padding:22px 0 14px;}
  .foot-col .foot-h,.foot-col h4{margin-bottom:8px;font-size:11px;}
  .foot-col ul,.foot-col.foot-legal-col ul{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
  .foot-col a{display:block;padding:11px 0;font-size:16px;line-height:1.35;}
  .foot-bottom{gap:16px;margin-top:20px;}
  .foot-top{padding:12px 18px;}
}

/* CR09 — policy pages: contents list on the left, text on the right; quieter background art */
.legal-wrap .legal{max-width:76ch;}
.legal h3{scroll-margin-top:110px;}
.legal h3:first-child{margin-top:0;}
.legal-links{display:flex;flex-wrap:wrap;gap:10px 22px;}
.page-legal .art{opacity:.35;}
.page-legal .art .poly{width:min(30vw,380px);}
@media (max-width:900px){ .legal-wrap .article-side{display:none;} .legal-wrap .legal{max-width:none;} }
.legal-links a{display:inline-block;padding:8px 0;}
/* CR01 (final): the bar's tint always matches the section behind the logo (site.js measures it every frame),
   so it can be near-solid without forming a band; the long fade at the bottom keeps it soft. Text never shows through the logo. */
.frame.on-dark::before{background:rgba(10,10,12,.9);}
.frame.on-light::before{background:rgba(255,255,255,.9);}
.frame::before{-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);}

/* ================= phone declutter (Oct 2026): fewer, shorter sections on phones ================= */
.foot-acc>summary{list-style:none;cursor:default;}
.foot-acc>summary::-webkit-details-marker{display:none;}
@media (max-width:560px){
  .foot-col{padding:0;}
  .foot-acc>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:20px 0;min-height:48px;}
  .foot-acc>summary .foot-h{margin:0;}
  .foot-acc>summary::after{content:"+";font-family:var(--mono);font-size:18px;line-height:1;color:var(--muted);transition:transform .3s var(--ease);}
  .foot-acc[open]>summary::after{transform:rotate(45deg);}
  .foot-acc ul{padding-bottom:14px;}
}
@media (max-width:760px){
  .band.m-hide{display:none;}                       /* home: budget chart, "why us" columns */
  .band.m-lean .people{display:none;}               /* home team: photo + link only */
  .statement-aside{display:none;}
  .statement-wrap{display:block;}
  .mx .moves{display:none;}
  .vs p.lead,.post p,.work-item p.plan,.fit-cta>span{display:none;}
  .fit-grid{grid-template-columns:1fr 1fr;}
  .fit-grid .fit p{display:none;}
  .fit-grid .fit{padding:18px 16px;min-height:0;}
  .fit-grid .fit h3{font-size:17px;line-height:1.25;}
}

/* DAHMION website assistant — always dark, like the menu, so it reads the same in both themes */
.dchat-launch,.dchat-panel{--c-bg:#101014;--c-bg2:#1a1a20;--c-ink:#F5F5F7;--c-mut:rgba(245,245,247,.6);--c-line:rgba(255,255,255,.12);}
.dchat-launch{position:fixed;background:var(--accent) !important;border-color:var(--accent) !important;color:var(--accent-ink) !important;right:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vh,26px);z-index:180;display:flex;align-items:center;gap:10px;
  height:46px;padding:0 18px 0 16px;border-radius:999px;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-ink);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:width .3s var(--ease),padding .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);}
.dchat-launch:hover{filter:brightness(1.08);transform:translateY(-2px);}
.dchat-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;}
.dchat-ico circle{fill:currentColor;stroke:none;}
.dchat-launch.dchat-mini{padding:0;width:50px;height:50px;justify-content:center;}
.dchat-launch.dchat-mini .dchat-launch-t{display:none;}
body.menu-open .dchat-launch,body.dchat-on .dchat-launch{opacity:0;pointer-events:none;}

.dchat-panel{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vh,26px);z-index:181;width:min(390px,calc(100vw - 28px));height:min(600px,calc(100vh - 110px));
  display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-ink);border:1px solid var(--c-line);border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.4);font-family:var(--display);}
.dchat-panel[hidden]{display:none;}
.dchat-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--c-line);}
.dchat-mark{width:30px;height:30px;border-radius:50%;background:var(--accent) url("../img/logo.png") center/9px auto no-repeat;flex:none;}
.dchat-head div{flex:1;min-width:0;}
.dchat-head b{display:block;font-weight:500;font-size:15px;}
.dchat-head span{display:block;font-size:12px;color:var(--c-mut);margin-top:2px;}
.dchat-new{background:none;border:1px solid var(--c-line);color:var(--c-mut);border-radius:999px;padding:6px 11px;font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap;}
.dchat-new:hover{color:var(--c-ink);border-color:var(--accent);}
.dchat-x{background:none;border:0;color:var(--c-mut);font-size:26px;line-height:1;cursor:pointer;width:36px;height:36px;border-radius:50%;}
.dchat-x:hover{color:var(--c-ink);background:var(--c-bg2);}
.dchat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;}
.dchat-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;word-wrap:break-word;}
.dchat-msg.bot{background:var(--c-bg2);border-top-left-radius:4px;align-self:flex-start;}
.dchat-msg.me{background:var(--accent);color:var(--accent-ink);border-top-right-radius:4px;align-self:flex-end;}
.dchat-msg a{color:var(--accent);text-decoration:underline;}
.dchat-msg.me a{color:var(--accent-ink);}
.dchat-typing{display:flex;gap:5px;}
.dchat-typing i{width:7px;height:7px;border-radius:50%;background:var(--c-mut);animation:dchat-b 1.1s infinite ease-in-out;}
.dchat-typing i:nth-child(2){animation-delay:.15s}.dchat-typing i:nth-child(3){animation-delay:.3s}
@keyframes dchat-b{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.dchat-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.dchat-chips button{background:none;border:1px solid var(--c-line);color:var(--c-ink);border-radius:999px;padding:9px 13px;font:inherit;font-size:13px;cursor:pointer;}
.dchat-chips button:hover{border-color:var(--accent);color:var(--accent);}
.dchat-form{background:var(--c-bg2);border:1px solid var(--c-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.dchat-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--c-mut);}
.dchat-form label i{font-style:normal;opacity:.7;}
.dchat-form input,.dchat-form textarea{background:var(--c-bg);border:1px solid var(--c-line);border-radius:10px;color:var(--c-ink);padding:10px 12px;font:inherit;font-size:16px;}
.dchat-form input:focus,.dchat-form textarea:focus,.dchat-input textarea:focus{outline:none;border-color:var(--accent);}
.dchat-form button{margin-top:4px;background:var(--c-ink);color:var(--c-bg);border:0;border-radius:999px;padding:13px 16px;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;}
.dchat-form button:hover{background:var(--accent);color:var(--accent-ink);}
.dchat-form button:disabled{opacity:.6;cursor:wait;}
.dchat-fine{font-size:11.5px;color:var(--c-mut);margin:0;} .dchat-fine a{color:var(--c-mut);text-decoration:underline;}
.dchat-err{font-size:13px;color:#ff8a65;margin:0;} .dchat-err:empty{display:none;}
.dchat-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.dchat-input{display:flex !important;flex-direction:row;flex-wrap:nowrap;gap:8px;align-items:flex-end;padding:12px;margin:0;border-top:1px solid var(--c-line);}
.dchat-input textarea{flex:1 1 auto;width:auto;min-width:0;margin:0;min-height:44px;resize:none;background:var(--c-bg2);border:1px solid var(--c-line);border-radius:12px;color:var(--c-ink);padding:11px 13px;font:inherit;font-size:16px;line-height:1.4;max-height:120px;}
.dchat-input button{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);font-size:18px;cursor:pointer;}
.dchat-note{margin:0;padding:0 14px 12px;font-size:11px;color:var(--c-mut);} .dchat-note a{color:var(--c-mut);text-decoration:underline;}
.dchat-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
/* phones: the chat becomes a full-screen sheet; the launcher is a small round button */
@media (max-width:600px){
  .dchat-launch{padding:0;width:52px;height:52px;justify-content:center;right:14px;bottom:14px;}
  .dchat-launch .dchat-launch-t{display:none;}
  .dchat-ico{width:22px;height:22px;}
  .dchat-panel{inset:0;width:100%;height:100dvh;border-radius:0;border:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
  .dchat-head{padding-top:max(16px,env(safe-area-inset-top));}
  body.dchat-on{overflow:hidden;}
  body.dchat-on .frame{pointer-events:none;}
}
@media (prefers-reduced-motion:reduce){ .dchat-typing i{animation:none;} .dchat-launch{transition:none;} }
@media (max-width:760px){ .dchat-launch.dchat-away{opacity:0;transform:translateY(12px);pointer-events:none;} }
/* phone field with country code */
.dchat-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--c-mut);}
.dchat-field label i{font-style:normal;opacity:.7;}
.dchat-phone{display:flex;gap:8px;min-width:0;}
.dchat-phone select{flex:0 0 auto;width:96px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:10px;color:var(--c-ink);padding:10px 8px;font:inherit;font-size:15px;appearance:auto;}
.dchat-phone input{flex:1 1 auto;min-width:0;}
.dchat-phone select:focus{outline:none;border-color:var(--accent);}
.dchat-form input[aria-invalid="true"]{border-color:#ff8a65;}