@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-749a3084.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-1ab1ad55.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-749a3084.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-1ab1ad55.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-749a3084.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-1ab1ad55.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-749a3084.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-1ab1ad55.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: 400;
  font-display: swap;
  src: url(fonts/outfit-f37fa50e.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/outfit-c8e7a734.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: 500;
  font-display: swap;
  src: url(fonts/outfit-f37fa50e.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/outfit-c8e7a734.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: 600;
  font-display: swap;
  src: url(fonts/outfit-f37fa50e.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/outfit-c8e7a734.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: 700;
  font-display: swap;
  src: url(fonts/outfit-f37fa50e.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/outfit-c8e7a734.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;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#080808; --text:#F0EEEB; --muted:#8888A0; --accent:#6B50A8;
  --accent-h:#5A4090; --warm:#9B7EC8; --blue:#5888C8; --silver:#DCDCE8;
  --line:rgba(240,238,235,0.10); --line-soft:rgba(240,238,235,0.06);
  --tile:#101014; --head:'Outfit',sans-serif; --sans:'Inter',-apple-system,sans-serif;
  --radius:28px;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 70% 30%, rgba(107,80,168,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(88,136,200,0.06) 0%, transparent 65%);
}
img { display:block; max-width:100%; height:auto; }
video { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
::selection { background:rgba(155,126,200,0.35); color:var(--text); }

.grain {
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
}

/* === CHANGE 8 — CONSENT BANNER + LEGAL PAGES
   Remove: delete this CSS block + the JS_CONSENT block + consent_banner()
   + page_privacy() + its main() write + its footer/sitemap links.
   ========================================= */
.consent { position:fixed; left:0; right:0; bottom:0; z-index:300; display:none;
  padding:16px 20px; background:rgba(16,16,20,0.97); border-top:1px solid var(--line);
  backdrop-filter:blur(14px); }
.consent.is-on { display:block; }
.consent__inner { max-width:1240px; margin:0 auto; display:flex; align-items:center;
  gap:18px; flex-wrap:wrap; justify-content:space-between; }
.consent__text { font-size:0.82rem; color:var(--muted); max-width:720px; line-height:1.55; }
.consent__text a { color:var(--silver); text-decoration:underline; text-underline-offset:3px; }
.consent__btns { display:flex; gap:10px; flex-shrink:0; }
.consent__btn { font-family:var(--sans); font-size:0.8rem; font-weight:600; cursor:pointer;
  padding:10px 20px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--text); transition:background 0.2s, border-color 0.2s; }
.consent__btn:hover { border-color:var(--warm); }
.consent__btn--ok { background:var(--accent); border-color:var(--accent); color:#fff; }
.consent__btn--ok:hover { background:var(--accent-h); border-color:var(--accent-h); }
/* mobile: anchored from the top, never bottom-fixed (toolbar resize jank) */
@media (max-width:768px){
  .consent { top:68px; bottom:auto; border-top:none; border-bottom:1px solid var(--line); }
  .consent__inner { gap:14px; }
  .consent__text { font-size:0.78rem; }
  .consent__btns { width:100%; }
  .consent__btn { flex:1; }
}
.legal { max-width:760px; margin:0 auto; padding:0 24px 40px; text-align:left; }
.legal h2 { font-family:var(--head); font-size:clamp(19px,2vw,24px); font-weight:600;
  letter-spacing:-0.01em; margin:42px 0 12px; color:var(--text); }
.legal p, .legal li { font-size:0.95rem; line-height:1.75; color:var(--muted); }
.legal p { margin-bottom:14px; }
.legal ul { margin:0 0 14px 0; }
.legal li { position:relative; padding-left:18px; margin-bottom:7px; }
.legal li::before { content:''; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--warm); }
.legal a { color:var(--silver); text-decoration:underline; text-underline-offset:3px; }
.legal strong { color:var(--silver); font-weight:600; }
.legal__updated { font-size:0.78rem; color:var(--muted); opacity:0.7; }
/* END CHANGE 8 */

/* --- NAV --- */
.nav {
  position:fixed; inset:0 0 auto; z-index:100; display:flex; align-items:center;
  justify-content:space-between; height:68px; padding:0 32px;
  background:rgba(8,8,8,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav__logo { font-family:var(--head); font-size:1.15rem; font-weight:700; letter-spacing:0.04em; color:var(--warm); }
.nav__links {
  position:fixed; top:0; left:50%; transform:translateX(-50%); height:68px;
  display:flex; align-items:center; gap:36px; z-index:101; padding:0; margin:0; list-style:none;
}
.nav__links a { font-size:0.875rem; font-weight:500; color:var(--text); transition:color 0.2s; cursor:pointer; }
.nav__links a:hover, .nav__links a.on { color:var(--warm); }
.nav__cta {
  background:var(--accent); color:#fff; padding:10px 20px; font-size:0.82rem; font-weight:600;
  border-radius:980px; transition:background 0.2s; cursor:pointer;
}
.nav__cta:hover { background:var(--accent-h); }
.nav__toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; margin-left:auto; }
.nav__toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform 0.2s, opacity 0.2s; }
@media (max-width: 768px) {
  .nav { padding:0 20px; z-index:300; }
  .nav__toggle { display:flex; }
  .nav__cta { margin-left:auto; margin-right:16px; }
  /* === CHANGE 7 — MOBILE NAV replicated 1:1 from the deployed axlron.com
     (inline styles in its index.html): full-screen curtain wipe, equal-height
     link rows with hairline borders, big heading-font links sliding in from
     the left with a stagger. CTA kept in the bar (live site hides it).
     Remove: restore the previous mobile .nav__links block here. ========== */
  .nav__links {
    top:0; left:0; right:0; bottom:0; transform:none; height:100%;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    background:var(--bg); border-bottom:none; padding:68px 0 0;
    clip-path:inset(0 0 100% 0);
    transition:clip-path 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events:none; z-index:200;
  }
  .nav__links.is-open { clip-path:inset(0 0 0% 0); pointer-events:auto; }
  .nav__links li {
    flex:1; display:flex; align-items:center;
    border-top:1px solid rgba(240,238,235,0.07); padding:0 28px;
    opacity:0; transform:translateX(-24px);
    transition:opacity 0.3s, transform 0.3s;
  }
  .nav__links li:last-child { border-bottom:1px solid rgba(240,238,235,0.07); }
  .nav__links.is-open li:nth-child(1) { opacity:1; transform:none; transition-delay:0.12s; }
  .nav__links.is-open li:nth-child(2) { opacity:1; transform:none; transition-delay:0.17s; }
  .nav__links.is-open li:nth-child(3) { opacity:1; transform:none; transition-delay:0.22s; }
  .nav__links.is-open li:nth-child(4) { opacity:1; transform:none; transition-delay:0.27s; }
  .nav__links.is-open li:nth-child(5) { opacity:1; transform:none; transition-delay:0.32s; }
  .nav__links a {
    font-size:clamp(30px, 9vw, 50px); font-family:var(--head); font-weight:600;
    letter-spacing:-0.02em; padding:0; width:100%; color:var(--text);
  }
  /* END CHANGE 7 */
}

main { position:relative; z-index:2; overflow-x:clip; }
section { scroll-margin-top: 80px; }

/* --- HERO (kept 1:1 from live site) --- */
.hero { min-height:100vh; display:flex; align-items:flex-start; justify-content:flex-start; text-align:left; position:relative; }
html.fx .hero { height:100vh; overflow:hidden; }
@supports (height:100svh) { html.fx .hero { height:100svh; } }
.hero__inner { position:relative; z-index:3; padding:68px 0 0; width:100%; height:100%; }
.hero__title {
  font-family:var(--head); font-weight:700; font-size:clamp(52px, 23.5vh, 300px);
  line-height:0.93; letter-spacing:-0.04em; color:var(--silver); padding:0 48px;
}
.hero__row { display:block; position:relative; overflow:hidden; }
.hero__row-stroke { display:block; color:transparent; -webkit-text-stroke:1.5px rgba(220,220,232,0.28); user-select:none; }
.hero__row-fill { position:absolute; inset:0; display:block; color:var(--warm); -webkit-text-stroke:0; clip-path:inset(0 100% 0 0); pointer-events:none; }
html:not(.fx) .hero__row-fill { clip-path:none; }
.hero__stats { position:absolute; right:44px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:28px; z-index:3; }
.hero__stat { padding:0 0 0 18px; border-left:1px solid rgba(240,238,235,0.12); max-width:160px; }
.hero__stat-value { display:block; font-family:var(--head); font-size:0.9rem; font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.hero__stat-label { display:block; font-size:0.62rem; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase; margin-top:3px; }
/* === CHANGE 16 — HERO SUBHEADLINE, stroke + fill like the headline.
   550x200 block, vertically centered on the right of the hero. Desktop: it
   appears and fills by scroll only AFTER the headline finishes filling.
   Mobile: sits under the headline; its fill starts when the headline's
   time-based fill ends. The 4 hero stats are removed for now (markup kept
   in an HTML comment in page_home). Remove: delete this block, the
   .hero__sub element, and its tweens in JS_HERO. ======================== */
.hero__sub {
  position:absolute; right:-32px; top:50%; transform:translateY(-50%); z-index:3;
  width:620px; height:220px; display:flex; flex-direction:column; justify-content:center;
  font-family:var(--head); font-weight:700; font-size:61px; line-height:1.12;
  letter-spacing:-0.03em; text-align:left;
}
/* nowrap so the larger size / shifted box can never rewrap the two rows */
.hero__sub .hero__row { overflow:visible; white-space:nowrap; }
html.fx .hero__sub { opacity:0; visibility:hidden; }
/* the headline fills white; the subheadline keeps the warm purple fill */
.hero__title .hero__row-fill { color:var(--text); }
@media (max-width:900px) { .hero__sub { display:none; } }
@media (max-width:768px) {
  .hero__sub {
    display:flex; position:static; transform:none; width:auto; height:auto;
    margin:74px 10px 0; font-size:clamp(34px, 10vw, 54px);
    align-items:center; text-align:center;
  }
  /* hidden until the headline's fill finishes (2.8s), then it appears */
  html:not(.fx) .hero__sub { opacity:0; animation:sub-in 0.4s ease-out 2.85s both; }
}
@keyframes sub-in { to { opacity:1; } }
/* === CHANGE 17 — MOBILE hero CTA: outlined button under the subheadline
   leading to the homepage services section. Mobile only.
   Remove: delete this block + the .hero__cta-m anchor in page_home. ==== */
.hero__cta-m { display:none; }
@media (max-width:768px) {
  .hero__cta-m {
    display:flex; align-items:center; justify-content:center; gap:12px;
    width:fit-content; margin:52px auto 0; padding:14px 24px;
    border:1.5px solid var(--accent); border-radius:14px; background:transparent;
    color:#fff; font-family:var(--sans); font-size:0.95rem; font-weight:600;
    opacity:0; animation:sub-in 0.4s ease-out 3s both;
  }
}
/* END CHANGE 17 */
@media (max-width:900px) {
  .hero__stats { display:none; }
  .hero__title { padding:0 24px; font-size:clamp(44px, 20vh, 180px); }
}
@media (max-width:768px) {
  .hero { min-height:0; padding:80px 0 96px; }
  .hero__inner { padding:0; }
  .hero__title { padding:0 10px; font-size:clamp(60px, 27vw, 155px); line-height:1.0; }
  .hero__row { overflow:visible; }
  html:not(.fx) .hero__row-fill { clip-path:inset(0 100% -20% 0); }
  @keyframes hfill-m { to { clip-path:inset(0 0% -20% 0); } }
  html:not(.fx) #hfill0 { animation:hfill-m 0.6s ease-out 0.4s both; }
  html:not(.fx) #hfill1 { animation:hfill-m 0.6s ease-out 1.0s both; }
  html:not(.fx) #hfill2 { animation:hfill-m 0.6s ease-out 1.6s both; }
  html:not(.fx) #hfill3 { animation:hfill-m 0.6s ease-out 2.2s both; }
  /* CHANGE 16 — subheadline fill starts once the headline's fill ends (2.8s) */
  html:not(.fx) #sfill0 { animation:hfill-m 0.6s ease-out 2.9s both; }
  html:not(.fx) #sfill1 { animation:hfill-m 0.6s ease-out 3.4s both; }
}

/* --- APPLE TILE SYSTEM --- */
.rail { max-width:1720px; margin:0 auto; padding:0 12px; display:grid; gap:12px; }
.rail + .rail { margin-top:12px; }
.rail--half { grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .rail--half { grid-template-columns:1fr; } }
.tile {
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--tile);
  text-align:center; display:flex; flex-direction:column; align-items:center;
  padding:clamp(56px, 7vw, 96px) 24px 0;
}
.tile--pad-b { padding-bottom:clamp(56px, 7vw, 96px); }
.tile--light { background:#f5f5f7; color:#14120e; }
.tile--light .t-sub { color:#55555f; }
.tile--light .t-eyebrow { color:var(--accent); }
.tile--light .t-link { color:var(--accent); }
a.tile { cursor:pointer; }
a.tile:hover .t-link { text-decoration:underline; text-underline-offset:3px; }

.sec-head { max-width:1720px; margin:clamp(90px, 11vw, 160px) auto 28px; padding:0 24px; text-align:center; }
.sec-head--first { margin-top:12px; }
.page-top { padding-top:clamp(120px, 15vh, 190px); }

.t-eyebrow {
  display:block; font-family:var(--head); font-size:0.72rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--warm); margin-bottom:18px;
}
.t-head { font-family:var(--head); font-weight:700; letter-spacing:-0.03em; line-height:1.04; font-size:clamp(40px, 5vw, 76px); }
.t-head--xl { font-size:clamp(44px, 6vw, 92px); }
.t-head--md { font-size:clamp(30px, 3.2vw, 48px); }
.t-head--sm { font-size:clamp(24px, 2.4vw, 34px); }
.t-sub { font-size:clamp(16px, 1.45vw, 21px); line-height:1.55; color:var(--muted); max-width:640px; margin:18px auto 0; }
.t-links { display:flex; gap:34px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.t-link { font-size:clamp(15px, 1.25vw, 19px); font-weight:500; color:var(--warm); }
.t-link::after { content:' \203A'; }
.t-link:hover { text-decoration:underline; text-underline-offset:3px; }

.btn {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
  font-size:0.875rem; font-weight:600; padding:14px 28px; border-radius:980px; border:none;
  cursor:pointer; background:var(--accent); color:#fff;
  transition:background 0.2s, transform 0.2s, box-shadow 0.2s; white-space:nowrap;
}
.btn:hover { background:var(--accent-h); transform:translateY(-2px); box-shadow:0 8px 28px rgba(107,80,168,0.35); }
.btn--ghost { background:transparent; color:var(--text); border:1.5px solid rgba(240,238,235,0.18); }
.btn--ghost:hover { background:rgba(155,126,200,0.08); border-color:rgba(155,126,200,0.5); box-shadow:none; }
.tile--light .btn--ghost { color:var(--accent); border-color:rgba(107,80,168,0.35); }
.tile--light .btn--ghost:hover { background:rgba(107,80,168,0.08); border-color:var(--accent); box-shadow:none; }
.t-btns { display:flex; gap:14px; justify-content:center; margin-top:26px; flex-wrap:wrap; }
/* CHANGE 13 — services-PAGE hero panel: dark tile, no mockup, text centered.
   The homepage variant (.hero-svc--mock) keeps the light tile + browser
   mockup it always had. */
.hero-svc { height:790px; overflow:hidden; padding-top:0; justify-content:center; }
.hero-svc .t-eyebrow { margin-bottom:8px; }
.hero-svc .t-head { font-size:clamp(32px, 4vw, 56px); line-height:1.05; }
.hero-svc .t-sub { font-size:clamp(15px, 1.2vw, 18px); margin-top:10px; }
.hero-svc .t-btns { margin-top:24px; }
.hero-svc--mock { justify-content:flex-start; padding-top:40px; }
.hero-svc--mock .t-btns { margin-top:18px; }
.hero-svc--mock .tile__media { margin-top:53px; }
.hero-svc__frame { width:740px; height:440px; }
.frame--fixed { display:flex; flex-direction:column; }
.frame--fixed img { flex:1 1 auto; height:auto; min-height:0; }
.svc-card-frame { height:284px; }
@media (max-width:900px) { .svc-card-frame { height:auto; } }
@media (max-width:768px) {
  .hero-svc { height:auto; overflow:visible; padding-top:clamp(56px, 7vw, 96px); padding-bottom:clamp(56px, 7vw, 96px); }
  .hero-svc .t-head { font-size:clamp(44px, 11vw, 64px); }
  .hero-svc .t-sub { font-size:clamp(16px, 4vw, 19px); margin-top:18px; }
  .hero-svc .t-btns { margin-top:26px; }
  .hero-svc--mock { padding-bottom:clamp(40px, 6vw, 64px); }
  .hero-svc--mock .tile__media { margin-top:36px; }
  .hero-svc__frame { width:100%; height:auto; }
}

.tile__media { width:100%; margin-top:clamp(36px, 4.5vw, 64px); display:flex; justify-content:center; align-items:flex-end; }
.tile__media--tuck { margin-bottom:-6%; }
/* === CHANGE 1 — FULL DEVICES + 70PX BREATHING ROOM
   Tiles whose media should show completely, with 70px of tile background
   below the lowest point. Remove: delete this rule + the tile--breathe
   class in page_home (devices trio, AdDesign, DSC Vision tiles), and
   restore tile__media--tuck on those three medias.
   ========================================= */
.tile--breathe { padding-bottom:70px; }
/* END CHANGE 1 */

/* browser frame */
.frame { border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.07); background:#101014; }
.tile--light .frame { box-shadow:0 30px 80px rgba(20,18,14,0.28), 0 0 0 1px rgba(20,18,14,0.06); }
.frame__bar { display:flex; align-items:center; gap:9px; padding:9px 12px; background:#141418; border-bottom:1px solid rgba(255,255,255,0.05); }
.frame__dots { display:flex; gap:5px; }
.frame__dots span { width:8px; height:8px; border-radius:50%; }
.frame__dots span:nth-child(1){ background:#ff5f56; } .frame__dots span:nth-child(2){ background:#ffbd2e; } .frame__dots span:nth-child(3){ background:#27c93f; }
.frame__url { flex:1; background:rgba(255,255,255,0.06); border-radius:4px; padding:3px 10px; font-size:10px; color:rgba(255,255,255,0.3); text-align:center; white-space:nowrap; overflow:hidden; }
.frame img, .frame video { width:100%; object-fit:cover; object-position:top; }
.frame video { height:auto; }
.frame--light .frame__bar { background:#e8e8ea; border-bottom-color:rgba(0,0,0,0.06); }
.frame--light .frame__url { background:rgba(0,0,0,0.05); color:rgba(0,0,0,0.35); }
.frame--light { background:#fff; }
.frame--bare { border-radius:16px; aspect-ratio:53/29; }  /* 1060 x 580 */
.frame--bare video { height:100%; }

/* device frames */
.dev-laptop { width:min(720px, 58vw); border-radius:18px 18px 14px 14px; box-shadow:0 50px 100px rgba(20,18,14,0.16); }
.dev-laptop__lid { background:#1a1a1f; border-radius:18px 18px 0 0; padding:12px 12px 0; border:1px solid rgba(255,255,255,0.09); border-bottom:none; }
.dev-laptop__screen { overflow:hidden; border-radius:8px 8px 0 0; background:#000; }
.dev-laptop__screen img { width:100%; }
.dev-laptop__base { height:16px; background:linear-gradient(180deg,#26262c,#131317); border-radius:0 0 14px 14px; width:calc(100% + 56px); margin-left:-28px; position:relative; }
.dev-laptop__base::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:6px; background:rgba(0,0,0,0.45); border-radius:0 0 8px 8px; }
.dev-tablet { width:min(300px, 24vw); background:#1a1a1f; border:1px solid rgba(255,255,255,0.09); border-radius:24px; padding:12px; box-shadow:0 30px 70px rgba(0,0,0,0.5); }
.dev-tablet img { border-radius:12px; }
.dev-phone {
  width:min(210px, 18vw); background:#1a1a1f; border:1px solid rgba(255,255,255,0.09);
  border-radius:34px; padding:10px; box-shadow:0 30px 70px rgba(0,0,0,0.5); position:relative;
}
.dev-phone::before { content:''; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:54px; height:14px; background:#000; border-radius:9px; z-index:2; }
/* CHANGE 14 — phone mockups were as tall as the raw screenshots; cap them
   (9:17, screenshot pinned to the top so nothing is cut off up there).
   The homepage trio phone stays at the slightly shorter 9:16. */
.dev-phone img { border-radius:24px; aspect-ratio:9/17; object-fit:cover; object-position:top; width:100%; }
.trio .dev-phone img { aspect-ratio:9/16; }
.trio .dev-phone { width:min(195px, 16.5vw); }
.trio { display:flex; align-items:flex-end; justify-content:center; gap:0; width:100%; }
.trio .dev-laptop { z-index:2; box-shadow:0 40px 90px rgba(0,0,0,0.55); border-radius:18px 18px 14px 14px; }
.trio .dev-tablet { margin-right:-40px; margin-bottom:8px; z-index:1; }
.trio .dev-phone { margin-left:-34px; margin-bottom:8px; z-index:3; }
@media (max-width:768px) {
  /* === CHANGE 8 — MOBILE TRIO like the live axlron.com site: one row,
     tablet left behind, laptop center, phone right front, thin bezels.
     Remove: restore the previous stacked rules here. ==================== */
  /* CHANGE 10 — mobile gallery/demo phone mockups at a proper size
     (base rule; the trio overrides below win for the devices row) */
  .dev-phone { width:min(240px, 60vw); }
  .trio { flex-wrap:nowrap; gap:0; padding:0 4px; align-items:flex-end; }
  .dev-laptop { width:min(220px, 58vw); }
  .dev-laptop__lid { padding:5px 5px 0; border-radius:12px 12px 0 0; }
  .dev-laptop__base { height:9px; width:calc(100% + 20px); margin-left:-10px; border-radius:0 0 8px 8px; }
  .dev-laptop__base::before { width:60px; height:4px; }
  .trio .dev-tablet { width:min(112px, 29vw); padding:5px; border-radius:12px; margin:0 -12px 6px 0; }
  .trio .dev-tablet img { border-radius:7px; }
  .trio .dev-phone { width:min(80px, 21.5vw); padding:4px; border-radius:12px; margin:0 0 6px -8px; }
  .trio .dev-phone::before { width:26px; height:6px; top:8px; border-radius:4px; }
  .trio .dev-phone img { border-radius:8px; }
  .tile--breathe .tile__media { margin-top:44px; }
  /* the devices row bleeds past the tile padding so the mockups render larger */
  .tile__media--trio { width:calc(100% + 40px); margin-left:-20px; margin-right:-20px; }
  /* END CHANGE 8 */
}

/* demo/case cards on home + work index */
/* === CHANGE 2 — HOME DEMOS: 6 VISIBLE + REVEAL MORE
   Remove: delete this block, the hidden param in demo_grid_cell, the
   demosMoreBtn markup in page_home, and its handler in JS_BASE.
   ========================================= */
.demo-more { display:none; }
.demos-open .demo-more { display:flex; }
.demos-open #demosMoreRow { display:none; }
#demosLessRow { display:none; }
.demos-open #demosLessRow { display:flex; }
button.t-link { background:none; border:none; padding:0; cursor:pointer; font-family:var(--sans); }
/* END CHANGE 2 */
.demo-tile { min-height:560px; justify-content:flex-start; }
.demo-tile .t-head { font-size:clamp(28px, 2.6vw, 40px); }
.demo-tile .t-eyebrow { margin-bottom:12px; }
.demo-tile .tile__media { margin-top:34px; }
.demo-tile .frame { width:min(560px, 88%); }
.demo-tile .dev-phone { width:min(230px, 56vw); margin-bottom:-14%; }
@media (max-width:900px) { .demo-tile { min-height:0; } .demo-tile .dev-phone { margin-bottom:-10%; } }
/* === CHANGE 11 — MOBILE services cards: equal panel heights (landing card
   matches the maintenance one), landing mockup fully visible and centered
   with at least 20px to the panel bottom.
   Remove: delete this block. =========================================== */
@media (max-width:768px) {
  #services .rail--half { grid-auto-rows:1fr; }
  #services .demo-tile .tile__media--tuck { margin:auto 0; padding:20px 0; }
}
/* END CHANGE 11 */

/* per-project tints */
.tile--flower { background:#F7F2EA; color:#191512; }
.tile--flower .t-eyebrow { color:#fb3c7a; } .tile--flower .t-sub { color:#6b6359; } .tile--flower .t-link { color:#191512; }
.tile--anamaria { background:#EFEAF7; color:#1B1722; }
.tile--anamaria .t-eyebrow { color:#7d67ab; } .tile--anamaria .t-sub { color:#645d72; } .tile--anamaria .t-link { color:#1B1722; }
.tile--diana { background:#F8ECF1; color:#171216; }
.tile--diana .t-eyebrow { color:#C9557F; } .tile--diana .t-sub { color:#756c72; } .tile--diana .t-link { color:#171216; }
.tile--alice { background:#f4ede2; color:#24201a; }
.tile--alice .t-eyebrow { color:#8a6d4e; } .tile--alice .t-sub { color:#6d6659; } .tile--alice .t-link { color:#24201a; }
.tile--manz { background:#f2e8d4; color:#141414; }
.tile--manz .t-eyebrow { color:#31564a; } .tile--manz .t-sub { color:#5d5a50; } .tile--manz .t-link { color:#31564a; }
.tile--claudia { background:#faf6f1; color:#201c1a; }
.tile--claudia .t-eyebrow { color:#b1423a; } .tile--claudia .t-sub { color:#6b6560; } .tile--claudia .t-link { color:#b1423a; }
.tile--avangarde { background:#17181a; color:#f0efec; }
.tile--avangarde .t-eyebrow { color:#b9b9c4; }
.tile--carla { background:#10281d; color:#f2ecdf; }
.tile--carla .t-eyebrow { color:#9dc2a9; } .tile--carla .t-sub { color:rgba(242,236,223,0.6); } .tile--carla .t-link { color:#9dc2a9; }
.tile--addesign { background:#efe9df; color:#14120e; }
.tile--addesign .t-eyebrow { color:#8a6d4e; } .tile--addesign .t-sub { color:#5d5850; } .tile--addesign .t-link { color:#14120e; }
.tile--dsc { background:#fafafa; color:#111; }
.tile--dsc .t-eyebrow { color:#c0392b; } .tile--dsc .t-sub { color:#55555f; } .tile--dsc .t-link { color:#111; }

/* chips + swatches + meta */
.chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; max-width:660px; }
.chip { font-size:0.8rem; font-weight:500; color:var(--silver); border:1px solid var(--line); border-radius:980px; padding:7px 16px; background:rgba(255,255,255,0.02); }
.tile--light .chip { color:#3a3a40; border-color:rgba(20,18,14,0.14); background:rgba(255,255,255,0.5); }
.meta-strip { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px; }
.meta-chip { text-align:left; border:1px solid var(--line); border-radius:14px; padding:12px 18px; min-width:130px; background:rgba(255,255,255,0.02); }
/* === CHANGE 12 — MOBILE case-page hero order: eyebrow, title, subheadline,
   then the browser mockup / video, the live link right under it, and the
   Type/Scope/Status/Location boxes last. The tuck cut is neutralized since
   the media is no longer the last element, and the tile gets its bottom
   padding back. Remove: delete this block + the case-hero class in
   page_case. =========================================================== */
@media (max-width:768px) {
  .case-hero { padding-bottom:clamp(40px, 8vw, 56px); }
  .case-hero .tile__media { order:4; }
  .case-hero .t-links { order:5; }
  .case-hero .meta-strip { order:6; }
  .case-hero .tile__media--tuck { margin-bottom:0; }
}
/* END CHANGE 12 */

/* === CHANGE 9 — case-page meta chips: visible borders on light tiles,
   centered + tighter rows on mobile. Remove: delete this block. ======== */
.tile--alice .meta-chip, .tile--manz .meta-chip, .tile--claudia .meta-chip, .tile--flower .meta-chip,
.tile--anamaria .meta-chip, .tile--diana .meta-chip, .tile--addesign .meta-chip, .tile--dsc .meta-chip {
  border-color:rgba(20,18,14,0.16); background:rgba(255,255,255,0.35);
}
@media (max-width:768px) {
  .meta-strip { gap:8px; margin-top:24px; }
  .meta-chip { text-align:center; min-width:0; padding:9px 14px; }
  .meta-chip b { margin-bottom:2px; }
}
/* END CHANGE 9 */
.meta-chip b { display:block; font-family:var(--head); font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.meta-chip span { font-size:0.88rem; font-weight:500; }
.swatches { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:34px; }
.swatch { display:flex; flex-direction:column; align-items:center; gap:10px; }
.swatch i { display:block; width:64px; height:64px; border-radius:50%; border:1px solid var(--line); }
.swatch span { font-size:0.72rem; color:var(--muted); font-family:var(--head); letter-spacing:0.06em; }
.fontlist { margin-top:30px; width:min(560px, 100%); text-align:left; }
.fontlist li { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid var(--line-soft); font-size:0.95rem; }
.fontlist li b { font-family:var(--head); font-weight:600; }
.fontlist li span { color:var(--muted); font-size:0.85rem; }
.tile--light .fontlist li { border-top-color:rgba(20,18,14,0.1); }
.tile--light .fontlist li span { color:#77716a; }

/* feature rows */
.rowlist { width:min(900px, 100%); text-align:left; margin-top:clamp(30px, 4vw, 50px); }
.rowlist li { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:18px 0; border-top:1px solid var(--line-soft); align-items:baseline; }
.rowlist li b { font-family:var(--head); font-weight:600; font-size:0.98rem; }
.rowlist li span { color:var(--muted); font-size:0.9rem; line-height:1.55; }
@media (max-width:700px){ .rowlist li { grid-template-columns:1fr; gap:4px; } }

/* included grid */
.inc-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px 32px; width:100%; max-width:1240px; margin-top:clamp(36px, 4vw, 56px); text-align:left; }
.inc-item { border-top:1px solid var(--line); padding-top:18px; }
.inc-item__name { font-family:var(--head); font-weight:600; font-size:0.95rem; color:var(--text); display:block; margin-bottom:6px; }
.inc-item__desc { font-size:0.8rem; color:var(--muted); line-height:1.5; }
.inc-guarantee { margin:clamp(40px,5vw,64px) auto 0; max-width:700px; font-size:clamp(16px,1.4vw,20px); color:var(--silver); }
.inc-guarantee b { color:var(--warm); font-weight:600; }
@media (max-width:1100px){ .inc-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .inc-grid { grid-template-columns:1fr 1fr; } }

/* before/after */
.ba { display:flex; align-items:flex-end; justify-content:center; gap:clamp(14px,3vw,40px); width:100%; padding:0 12px; }
.ba__col { width:min(560px, 42vw); }
.ba__label { display:block; font-family:var(--head); font-size:0.72rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.ba__label--after { color:var(--warm); }
.ba__arrow { color:var(--warm); padding-bottom:8vw; }
@media (max-width:768px){ .ba { flex-direction:column; align-items:center; } .ba__col { width:92%; } .ba__arrow { display:none; } }

/* status card */
.status { width:min(400px, 88%); background:#16161b; border:1px solid var(--line); border-radius:18px; padding:26px 26px 18px; text-align:left; box-shadow:0 30px 70px rgba(0,0,0,0.45); }
.status__header { display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:600; font-size:0.95rem; margin-bottom:16px; }
.status__dot { width:9px; height:9px; border-radius:50%; background:#3ddc84; box-shadow:0 0 10px rgba(61,220,132,0.8); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:0.45; } }
.status__row { display:flex; justify-content:space-between; font-size:0.82rem; padding:8px 0; border-bottom:1px solid var(--line-soft); color:var(--muted); }
.status__val { color:var(--text); }
.status__green { color:#3ddc84; }
.status__hb { color:var(--warm); width:100%; margin-top:14px; opacity:0.9; }

/* process cards */
.proc-wrap { max-width:1720px; margin:0 auto; padding:0 12px; position:relative; }
.proc-track { display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:10px; }
.proc-track::-webkit-scrollbar { display:none; }
.proc-card { flex-shrink:0; width:min(460px, 84vw); scroll-snap-align:start; background:var(--tile); border-radius:var(--radius); padding:40px 36px 44px; text-align:left; }
/* === CHANGE 6 — PROCESS CARDS: 3 FULL + PEEK OF 4TH, APPLE OVERLAY ARROWS
   Desktop shows exactly 3 cards with ~60px of the 4th peeking. One circular
   arrow overlaid mid-height: right arrow until the 4th card is revealed,
   then it swaps to a left arrow. Remove: delete this block, restore the
   .proc-nav block below, restore procScroll() in JS_BASE and the
   .proc-nav markup in page_process.
   ========================================= */
@media (min-width:901px){ .proc-card { width:calc((100% - 96px) / 3); } }
.proc-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10); color:var(--text);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:opacity 0.3s, visibility 0.3s, background 0.2s;
}
.proc-arrow:hover { background:var(--accent); }
.proc-arrow--next { right:26px; }
.proc-arrow--prev { left:26px; }
.proc-arrow.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
@media (max-width:768px){
  .proc-arrow { width:42px; height:42px; }
  .proc-arrow--next { right:14px; }
  .proc-arrow--prev { left:14px; }
  /* no entrance animation for any step card on mobile */
  .proc-card.rv { opacity:1 !important; transform:none !important; transition:none !important; }
}
/* END CHANGE 6 */
.proc-card__num { font-family:var(--head); font-size:0.78rem; font-weight:700; letter-spacing:0.2em; color:var(--warm); display:block; margin-bottom:56px; }
.proc-card__title { font-family:var(--head); font-weight:700; font-size:clamp(24px,2vw,30px); letter-spacing:-0.02em; line-height:1.15; margin-bottom:14px; }
.proc-card__desc { color:var(--muted); font-size:0.95rem; margin-bottom:20px; }
.proc-card__list li { font-size:0.86rem; color:var(--silver); padding:9px 0; border-top:1px solid var(--line-soft); }

/* FAQ */
.faq { width:min(760px, 100%); text-align:left; margin-top:clamp(30px, 4vw, 50px); }
.faq details { border-top:1px solid var(--line-soft); }
.faq details:last-child { border-bottom:1px solid var(--line-soft); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 4px; font-family:var(--head); font-weight:600; font-size:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-size:1.3rem; color:var(--warm); transition:transform 0.25s; flex-shrink:0; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq p { color:var(--muted); font-size:0.92rem; padding:0 4px 22px; max-width:640px; }

/* contact */
.contact-card { width:min(560px, 100%); background:#131318; border:1px solid var(--line); border-radius:22px; padding:34px 30px; margin-top:44px; text-align:left; }
.contact-card__label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.pill { font-family:var(--sans); font-size:0.8rem; font-weight:500; color:var(--silver); background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:980px; padding:8px 16px; cursor:pointer; transition:all 0.2s; }
.pill:hover { border-color:rgba(155,126,200,0.5); }
.pill.selected { background:var(--accent); border-color:var(--accent); color:#fff; }
.field { margin-bottom:12px; }
.field input, .field textarea {
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:10px;
  padding:13px 16px; font-family:var(--sans); font-size:0.9rem; color:var(--text); outline:none;
  transition:border-color 0.2s; resize:vertical;
}
.field input:focus, .field textarea:focus { border-color:rgba(155,126,200,0.55); }
.field input::placeholder, .field textarea::placeholder { color:rgba(136,136,160,0.7); }
.contact-submit { width:100%; justify-content:center; margin-top:6px; }
.contact-meta { display:flex; gap:34px; justify-content:center; flex-wrap:wrap; margin-top:30px; font-size:0.85rem; color:var(--muted); }
.contact-meta a { color:var(--silver); }
.contact-meta a:hover { color:var(--warm); }
.next-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:min(900px,100%); margin-top:clamp(36px,4vw,56px); }
.next-step { border:1px solid var(--line); border-radius:18px; padding:24px 22px; text-align:left; background:rgba(255,255,255,0.02); }
.next-step b { font-family:var(--head); font-weight:600; display:block; margin-bottom:6px; font-size:0.95rem; }
.next-step span { font-size:0.84rem; color:var(--muted); line-height:1.5; }
.next-step em { font-style:normal; color:var(--warm); font-family:var(--head); font-weight:700; font-size:0.75rem; letter-spacing:0.14em; display:block; margin-bottom:12px; }
@media (max-width:768px){ .next-steps { grid-template-columns:1fr; } }

/* case navigation */
.case-nav { display:flex; justify-content:space-between; gap:12px; max-width:1720px; margin:12px auto 0; padding:0 12px; }
.case-nav a { flex:1; border:1px solid var(--line); border-radius:18px; padding:22px 26px; background:var(--tile); transition:border-color 0.2s; }
.case-nav a:hover { border-color:rgba(155,126,200,0.45); }
.case-nav a b { display:block; font-family:var(--head); font-weight:600; font-size:1rem; }
.case-nav a span { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.case-nav a.next { text-align:right; }

/* FOOTER (directory) */
.footer { max-width:1720px; margin:clamp(90px,11vw,160px) auto 0; padding:44px 24px 48px; border-top:1px solid var(--line-soft); }
.footer__grid { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:36px; max-width:1240px; margin:0 auto; }
.footer__brand p { color:var(--muted); font-size:0.85rem; max-width:260px; margin-top:12px; }
.footer__logo { font-family:var(--head); font-weight:700; color:var(--warm); font-size:1.1rem; }
.footer__col b { display:block; font-family:var(--head); font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.footer__col a { display:block; font-size:0.85rem; color:var(--silver); padding:4px 0; }
.footer__col a:hover { color:var(--warm); }
.footer__bar { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:1240px; margin:40px auto 0; padding-top:22px; border-top:1px solid var(--line-soft); font-size:0.78rem; color:var(--muted); }
.footer__bar a:hover { color:var(--warm); }
@media (max-width:900px){ .footer__grid { grid-template-columns:1fr 1fr; } }

/* === CHANGE 5 — STACKED TEASERS (Process / About / Contact), home only
   Pure CSS sticky stack inside #stackWrap: the Process tile pins when its
   "Process" word sits 50px under the nav (nav 68px + 50px = 118px, minus the
   tile's own top padding). About rides up and docks at the same spot, fully
   covering Process (Contact sits glued below About, so no strip of Process
   ever peeks out). Contact stays in normal flow, so it rises over both and
   covers them, then the page continues normally. Desktop only; mobile keeps
   plain stacking. Remove: delete this block + the #stackWrap wrapper div in
   page_home.
   ========================================= */
#process-teaser, #about-teaser { position: sticky; top: calc(118px - clamp(56px, 7vw, 96px)); }
/* END CHANGE 5 */

/* reveals */
.rv { opacity:0; transform:translateY(28px); transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.rv.in { opacity:1; transform:none; }
.rv-d1 { transition-delay:0.08s; }
.rv-d2 { transition-delay:0.16s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity:1; transform:none; transition:none; } }