/* ==========================================================================
   Vivlio Info Solution — vivlioinfosolution.co.in
   Design system: "The Composed Page"
   Built by Loov Company
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand — sampled from the Vivlio logo */
  --plum:#572363;          /* the V */
  --plum-deep:#3B1544;
  --plum-soft:#7A4088;
  --ink:#1C2153;           /* INFO SOLUTION bar */
  --ink-deep:#11163A;
  --saffron:#F26A21;       /* page-flip orange */
  --leaf:#0B6E33;          /* page-flip green */

  /* Surfaces — cool paper, tinted toward the plum */
  --paper:#F7F5FA;
  --paper-2:#FFFFFF;
  --paper-3:#EFEBF4;
  --rule:#DCD5E5;
  --rule-soft:#E9E4F0;

  /* Text */
  --tx:#181633;
  --tx-2:#4A4763;
  --tx-3:#6E6B87;
  --on-dark:#F2EEF7;
  --on-dark-2:#C0B6CE;

  /* Type */
  --display:"Poppins","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Scale — deliberately large per brief */
  --t-hero:clamp(2.35rem,5.1vw,4.7rem);
  --t-h1:clamp(2.35rem,5vw,4.3rem);
  --t-h2:clamp(2rem,3.9vw,3.35rem);
  --t-h3:clamp(1.6rem,2.6vw,2.5rem);
  --t-h4:clamp(1.3rem,1.9vw,1.7rem);
  --t-lead:clamp(1.19rem,1.65vw,1.45rem);
  --t-body:clamp(1.08rem,1.1vw,1.19rem);
  --t-small:clamp(1rem,1vw,1.06rem);

  /* Layout */
  --wrap:1280px;
  --wrap-narrow:920px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --sec:clamp(5rem,9vw,9rem);
  --r-lg:26px;
  --r-md:16px;
  --r-sm:8px;

  /* a fine milled weave — the surface treatment that replaces photo washes */
  --milled:
    repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.028) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(to right,rgba(226,182,240,.05) 0 1px,transparent 1px 3px);
  --milled-lite:
    repeating-linear-gradient(45deg,rgba(87,35,99,.035) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,rgba(28,33,83,.03) 0 1px,transparent 1px 6px);

  --shadow-1:0 2px 8px rgba(28,33,83,.06),0 14px 40px -18px rgba(28,33,83,.22);
  --shadow-2:0 4px 14px rgba(28,33,83,.08),0 34px 80px -34px rgba(60,20,72,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --hdr-h:104px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:var(--body);font-size:var(--t-body);line-height:1.68;
  font-weight:420;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.032em}
p{margin:0 0 1.15em}
figure,blockquote,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:4px}
::selection{background:var(--plum);color:#fff}

/* ---------- 3. Utilities ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-n{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--tx-2);max-width:60ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dark{background:var(--ink-deep);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lead{color:var(--on-dark-2)}

/* Marker: a folio rule — used where content is a real sequence or a section head */
.folio{display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem;font-size:var(--t-small);
  font-weight:600;color:var(--plum);letter-spacing:.01em}
.folio::before{content:"";width:34px;height:3px;background:var(--saffron);border-radius:2px;flex:none}
.dark .folio{color:#E4B9F0}

/* The page-grid texture — baseline + column marks, the Kriyadocs-style textured head */
.textured{position:relative;isolation:isolate;overflow:hidden}
.textured::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(to bottom,rgba(87,35,99,.055) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(to right,rgba(28,33,83,.05) 0 1px,transparent 1px 88px);
  mask-image:radial-gradient(120% 90% at 20% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 25%,transparent 78%);
}
.dark.textured::before{
  background-image:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(to right,rgba(226,182,240,.09) 0 1px,transparent 1px 88px);
}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1.05rem 2rem;border-radius:100px;border:2px solid transparent;
  font-weight:650;font-size:var(--t-small);letter-spacing:-.01em;cursor:pointer;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .25s,color .25s,border-color .25s;
  position:relative;overflow:hidden;
}
.btn svg{flex:none;transition:transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-3px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(-1px)}
.btn-primary{background:var(--plum);color:#fff;box-shadow:0 10px 26px -10px rgba(87,35,99,.75)}
.btn-primary:hover{background:var(--plum-deep);box-shadow:0 18px 40px -14px rgba(87,35,99,.8)}
.btn-accent{background:var(--saffron);color:#231005;box-shadow:0 10px 26px -10px rgba(242,106,33,.7)}
.btn-accent:hover{background:#FF7C34}
.btn-ghost{border-color:var(--rule);background:transparent;color:var(--tx)}
.btn-ghost:hover{border-color:var(--plum);color:var(--plum);background:rgba(87,35,99,.04)}
.dark .btn-ghost,.hero .btn-ghost,.banner .btn-ghost,.phead .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.06)}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.banner .btn-ghost:hover,.phead .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.15);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* Text link with a drawn rule */
.tlink{display:inline-flex;align-items:center;gap:.5rem;font-weight:650;color:var(--plum);
  padding-bottom:3px;background-image:linear-gradient(var(--saffron),var(--saffron));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--ease-out)}
.tlink:hover{background-size:100% 2px}
.dark .tlink{color:#E4B9F0}

/* ---------- 5. Header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.hdr::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(247,245,250,.86);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;opacity:0;transition:opacity .4s var(--ease),border-color .4s}
.hdr.is-stuck::after{opacity:1;border-bottom-color:var(--rule-soft)}
.hdr.is-stuck{box-shadow:0 10px 34px -22px rgba(28,33,83,.5)}
.hdr__bar{display:flex;align-items:center;gap:1rem;height:var(--hdr-h);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.hdr__bar>.btn{white-space:nowrap;flex:none}
.hdr__logo{flex:none;display:block;transition:transform .35s var(--ease-out)}
.hdr__logo img{height:68px;width:auto}          /* deliberately large per brief */
.hdr__logo .lg-white{display:none}
.hdr__logo:hover{transform:scale(1.04)}
.hdr__spacer{flex:1}

/* On hero pages the header starts transparent over the dark cover */
.hdr.on-dark:not(.is-stuck) .nav__link{color:#fff}
.hdr.on-dark:not(.is-stuck) .nav__link:hover{color:#fff;background:rgba(255,255,255,.14)}
.hdr.on-dark:not(.is-stuck) .nav__link[aria-current="page"]{color:#fff}
.hdr.on-dark:not(.is-stuck) .burger span{background:#fff}
.hdr.on-dark:not(.is-stuck) .hdr__logo .lg-dark{display:none}
.hdr.on-dark:not(.is-stuck) .hdr__logo .lg-white{display:block}

/* Nav */
.nav{display:flex;align-items:center;gap:.35rem}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:.35rem;padding:.65rem .78rem;border-radius:10px;
  font-weight:580;font-size:.99rem;white-space:nowrap;color:var(--tx);transition:color .25s,background .25s}
.nav__link:hover,.nav__item.is-open>.nav__link{color:var(--plum);background:rgba(87,35,99,.06)}
.nav__link[aria-current="page"]{color:var(--plum)}
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.3rem;height:2px;background:var(--saffron);border-radius:2px}
.nav__caret{width:11px;height:11px;transition:transform .35s var(--ease-out)}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}
.hdr__tel{display:none;align-items:center;gap:.5rem;font-weight:600;font-size:.97rem;white-space:nowrap;padding:.55rem .7rem}
.hdr__tel svg{width:19px;height:19px;flex:none}
@media (min-width:1460px){.hdr__tel{display:flex}}
.hdr__tel:hover{color:var(--plum)}

/* Mega menu — services, with a picture panel */
.mega{
  position:fixed;top:calc(var(--hdr-h) - 6px);left:50%;translate:-50% 0;
  width:min(94vw,1000px);background:var(--paper-2);border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden;
  display:grid;grid-template-columns:.78fr 1.22fr;
  opacity:0;visibility:hidden;transform:translateY(-14px) scale(.985);transform-origin:top center;
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out),visibility .34s;
}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mega__pic{position:relative;background:var(--ink-deep);overflow:hidden;min-height:0}
.mega__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.1);transition:opacity .6s var(--ease-out),transform 1.1s var(--ease-out)}
.mega__pic img.is-live{opacity:.62;transform:scale(1)}
.mega__pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,rgba(59,21,68,.55),rgba(17,22,58,.94))}
.mega__cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.3rem;color:#fff}
.mega__cap b{display:block;font-family:var(--display);font-size:1.4rem;font-weight:700;line-height:1.2;margin-bottom:.35rem}
.mega__cap span{color:var(--on-dark-2);font-size:.94rem;line-height:1.45;display:block}
.mega__list{padding:1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:.15rem;align-content:start}
.mega__link{display:flex;gap:.8rem;padding:.72rem;border-radius:12px;align-items:center;transition:background .25s var(--ease)}
.mega__link:hover{background:var(--paper-3)}
.mega__ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(87,35,99,.1);color:var(--plum);transition:background .25s,color .25s,transform .35s var(--ease-out)}
.mega__link:hover .mega__ico{background:var(--plum);color:#fff;transform:rotate(-6deg) scale(1.06)}
.mega__ico svg{width:19px;height:19px}
.mega__t{display:block;font-weight:680;font-size:1.01rem;line-height:1.25;margin-bottom:.1rem}
.mega__d{display:block;font-size:.91rem;color:var(--tx-3);line-height:1.35}
.mega__foot{grid-column:1/-1;margin-top:.35rem;padding:.9rem .72rem .3rem;border-top:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* Burger */
.burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:48px;height:48px;
  border:0;background:transparent;cursor:pointer;padding:0;border-radius:10px}
.burger span{display:block;height:2.5px;width:26px;background:var(--tx);border-radius:2px;margin-inline:auto;
  transition:transform .4s var(--ease-out),opacity .25s}
.burger.is-on span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{position:fixed;inset:var(--hdr-h) 0 0 0;z-index:880;background:var(--paper);
  padding:1.5rem var(--gut) 4rem;overflow-y:auto;
  transform:translateX(100%);transition:transform .45s var(--ease-out);visibility:hidden}
.drawer.is-on{transform:none;visibility:visible}
.drawer__link{display:block;padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);
  font-family:var(--display);font-size:1.45rem;font-weight:650;letter-spacing:-.02em}
.drawer__sub{display:grid;gap:0;max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
.drawer__sub.is-on{max-height:620px}
.drawer__sub a{display:block;padding:.85rem 0 .85rem 1.2rem;border-bottom:1px solid var(--rule-soft);
  font-size:1.08rem;font-weight:550;color:var(--tx-2)}
.drawer__tog{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;
  padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);font-family:var(--display);font-size:1.45rem;
  font-weight:650;letter-spacing:-.02em;cursor:pointer;text-align:left}
.drawer__tog svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
.drawer__tog[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---------- 6. Hero — the book that opens on scroll ---------- */
.hero{position:relative;height:240vh}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink-deep);
  perspective:1600px;perspective-origin:50% 48%}
/* the whole backdrop pushes away as the book opens, so the reveal has depth */
.hero__media{position:absolute;inset:0;
  transform:scale(calc(1.16 - var(--open,0) * .16));
  filter:blur(calc((1 - var(--open,0)) * 7px)) saturate(calc(.7 + var(--open,0) * .3))}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,22,58,.72),rgba(59,21,68,.78) 55%,rgba(17,22,58,.9))}
.hero__inner{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;
  padding:calc(var(--hdr-h) + 2rem) var(--gut) 5rem;
  transform:translateY(calc(var(--open,0) * -28px)) scale(calc(.965 + var(--open,0) * .035));
}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1.6rem;padding:.55rem 1.15rem;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;color:#fff;font-weight:600;font-size:1rem;
  background:rgba(255,255,255,.07);backdrop-filter:blur(8px)}
.hero__eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--saffron);
  box-shadow:0 0 0 0 rgba(242,106,33,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(242,106,33,0)}100%{box-shadow:0 0 0 0 rgba(242,106,33,0)}}
.hero__inner>div{width:min(720px,90vw)}
.hero__title{font-size:var(--t-hero);color:#fff;max-width:19ch;margin-inline:auto;
  letter-spacing:-.038em;line-height:1.18;font-weight:700;text-wrap:balance;padding-bottom:.12em;
  text-shadow:0 6px 40px rgba(0,0,0,.35)}
.hero__title .w{display:inline-block;padding-bottom:.04em;opacity:0;transform:translateY(.42em) rotate(2.5deg);
  animation:wIn .95s var(--ease-out) forwards;animation-delay:calc(var(--i) * 85ms + 350ms)}
@keyframes wIn{to{opacity:1;transform:none}}
.hero__sub{font-size:clamp(1.13rem,1.55vw,1.32rem);color:#DDD3E6;max-width:46ch;margin:1.7rem auto 0;line-height:1.58;
  opacity:0;animation:fadeUp .9s var(--ease-out) 1.05s forwards}
.hero__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem;
  opacity:0;animation:fadeUp .9s var(--ease-out) 1.25s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* The two covers */
.hero__cover{position:absolute;top:0;bottom:0;width:50.4%;z-index:6;
  background:
    radial-gradient(90% 120% at 100% 50%,rgba(255,255,255,.1),transparent 60%),
    linear-gradient(160deg,var(--plum) 0%,var(--plum-deep) 46%,var(--ink) 100%);
  will-change:transform;backface-visibility:hidden;
  box-shadow:0 0 90px rgba(0,0,0,.5);
}
.hero__cover::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 2px,transparent 2px 7px)}
.hero__cover--l{left:0;transform-origin:right center;
  transform:translateX(calc(var(--open,0) * -53vw)) rotateY(calc(var(--open,0) * -82deg))}
.hero__cover--r{right:0;transform-origin:left center;
  transform:translateX(calc(var(--open,0) * 53vw)) rotateY(calc(var(--open,0) * 82deg))}
/* spine highlight + gilt page edge */
.hero__cover--l::after,.hero__cover--r::after{content:"";position:absolute;top:0;bottom:0;width:16px}
.hero__cover--l::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.45))}
.hero__cover--r::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.45))}
.hero__mark{position:absolute;top:50%;translate:0 -50%;opacity:calc(1 - var(--open,0) * 2.2)}
.hero__cover--l .hero__mark{right:9%;width:min(30vw,260px)}
.hero__cover--r .hero__mark{left:9%;width:min(30vw,260px)}
.hero__cover--l .hero__mark img{opacity:.22}
.hero__mark img{width:100%;filter:drop-shadow(0 8px 30px rgba(0,0,0,.4))}

/* Scroll cue */
.hero__cue{position:absolute;left:50%;bottom:2.2rem;translate:-50% 0;z-index:7;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:.95rem;font-weight:550;
  opacity:calc(1 - var(--open,0) * 1.6);pointer-events:none}
.hero__cue i{display:block;width:1px;height:42px;background:linear-gradient(#fff,transparent);
  animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 7. Page head (inner pages) ---------- */
.phead{position:relative;padding-top:calc(var(--hdr-h) + clamp(3rem,6vw,5.5rem));
  padding-bottom:clamp(3rem,6vw,5rem);color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(120deg,var(--plum-deep) 2%,var(--ink-deep) 58%,var(--plum) 130%)}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:var(--milled)}
.phead__grid{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(to right,rgba(226,182,240,.1) 0 1px,transparent 1px 92px);
  mask-image:radial-gradient(110% 100% at 85% 20%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(110% 100% at 85% 20%,#000,transparent 72%)}
.phead h1{font-size:var(--t-h1);max-width:17ch;letter-spacing:-.034em;text-wrap:balance}
.phead .lead{color:#CFC4DC;margin-top:1.5rem;font-size:var(--t-lead)}
.crumb{display:flex;gap:.55rem;align-items:center;margin-bottom:1.5rem;font-size:1rem;color:#C0B6CE;flex-wrap:wrap}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5}

/* ---------- 8. Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}
.rv-d4{transition-delay:.4s}.rv-d5{transition-delay:.5s}

/* Big animated section titles — masked line rise */
.bigtitle{font-size:var(--t-h2);max-width:20ch;letter-spacing:-.034em;line-height:1.1;text-wrap:balance}
.bigtitle .ln{padding-bottom:.06em;margin-bottom:-.06em}
.bigtitle .ln{display:block;overflow:hidden}
.bigtitle .ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.bigtitle.in .ln>span{transform:none}
.bigtitle .ln:nth-child(2)>span{transition-delay:.1s}
.bigtitle .ln:nth-child(3)>span{transition-delay:.2s}

/* ---------- 9. Layout blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.split--wide{grid-template-columns:.95fr 1.05fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.4vw,2rem)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,2vw,1.6rem)}

/* Figure — the minimal in-between PNG placements */
.figstrip{display:grid;place-items:center;padding-block:clamp(.75rem,1.6vw,1.4rem)}
.figstrip img{width:min(100%,660px)}
.figstrip--sm img{width:min(100%,430px)}
.figstrip figcaption{margin-top:.9rem;text-align:center;color:var(--tx-3);font-size:1.02rem;max-width:52ch}

.shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);position:relative;background:var(--ink-deep)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.shot:hover img{transform:scale(1.045)}
.shot--tall{aspect-ratio:4/5}
.shot--wide{aspect-ratio:16/10}

/* ---------- 10. Service cards ---------- */
.svc{position:relative;display:flex;flex-direction:column;background:var(--paper-2);
  border:1px solid var(--rule-soft);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .35s}
.svc:hover{transform:translateY(-8px);box-shadow:var(--shadow-2);border-color:transparent}
.svc__pic{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3);position:relative}
.svc__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.svc:hover .svc__pic img{transform:scale(1.07)}
.svc__n{position:absolute;top:1rem;left:1rem;z-index:2;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--plum)}
.svc__n svg{width:23px;height:23px}
.svc__body{padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column;flex:1}
.svc h3{font-size:var(--t-h4);margin-bottom:.7rem;letter-spacing:-.03em}
.svc p{color:var(--tx-2);font-size:1.05rem;line-height:1.6;margin-bottom:1.3rem}
.svc .tlink{margin-top:auto}

/* ---------- 11. Feature banners (3 across the home page) ---------- */
.banner{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4rem,8vw,7rem);color:#fff}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background-image:var(--milled)}
.banner--plum{background:linear-gradient(110deg,var(--plum-deep) 12%,var(--plum) 62%,var(--ink) 105%)}
.banner--ink{background:linear-gradient(285deg,var(--ink-deep) 12%,var(--ink) 58%,var(--plum-deep) 105%)}
.banner h2{font-size:var(--t-h2);max-width:18ch;letter-spacing:-.04em;text-wrap:balance}
.banner .lead{color:#D7CDE2;margin-top:1.4rem}
.banner--right .banner__in{margin-left:auto;text-align:left;max-width:640px}

/* ---------- 12. Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--paper-2);padding:clamp(1.6rem,3vw,2.6rem)}
.dark .stats,.banner .stats{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.18)}
.dark .stat,.banner .stat{background:rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.4rem,4.2vw,3.5rem);font-weight:700;
  line-height:1;letter-spacing:-.045em;color:var(--plum)}
.dark .stat b,.banner .stat b{color:#fff}
.stat span{display:block;margin-top:.7rem;color:var(--tx-2);font-size:1.03rem;line-height:1.45}
.dark .stat span,.banner .stat span{color:var(--on-dark-2)}

/* ---------- 13. Animated timeline ---------- */
.tl{position:relative;padding-left:0;margin-top:clamp(3rem,6vw,4.5rem)}
.tl__rail{position:absolute;left:31px;top:14px;bottom:14px;width:3px;background:var(--rule);border-radius:3px}
.tl__fill{position:absolute;inset:0 0 auto 0;width:100%;height:0%;border-radius:3px;
  background:linear-gradient(180deg,var(--saffron),var(--plum) 55%,var(--ink));
  transition:height .18s linear}
.dark .tl__rail{background:rgba(255,255,255,.16)}
.tl__item{position:relative;padding-left:96px;padding-bottom:clamp(2.6rem,5vw,4rem)}
.tl__item:last-child{padding-bottom:0}
.tl__dot{position:absolute;left:0;top:0;width:66px;height:66px;border-radius:50%;
  background:var(--paper);border:3px solid var(--rule);display:grid;place-items:center;
  font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--tx-3);
  transition:all .55s var(--ease-out);z-index:2}
.dark .tl__dot{background:var(--ink-deep);border-color:rgba(255,255,255,.2)}
.tl__item.in .tl__dot{border-color:var(--plum);background:var(--plum);color:#fff;
  transform:scale(1.08);box-shadow:0 0 0 8px rgba(87,35,99,.14)}
.tl__item h3{font-size:var(--t-h4);margin-bottom:.6rem;letter-spacing:-.03em;
  opacity:0;transform:translateX(24px);transition:all .7s var(--ease-out) .1s}
.tl__item p{color:var(--tx-2);max-width:58ch;font-size:1.08rem;
  opacity:0;transform:translateX(24px);transition:all .7s var(--ease-out) .2s}
.dark .tl__item p{color:var(--on-dark-2)}
.tl__item.in h3,.tl__item.in p{opacity:1;transform:none}
.tl__when{display:inline-block;margin-bottom:.5rem;font-size:.98rem;font-weight:650;color:var(--saffron)}

/* ---------- 14. Infographic panels (Kriyadocs-style) ---------- */
.info-panel{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--shadow-1)}
.dark .info-panel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.2rem,4vw,3.5rem);align-items:center}
.flow__col{display:grid;gap:.6rem}
.flow__hd{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;
  font-size:.96rem;font-weight:700;color:var(--plum);letter-spacing:.01em;white-space:nowrap}
.flow__hd::after{content:"";flex:1;height:1px;background:var(--rule)}
.flow__col--out .flow__hd{flex-direction:row-reverse;color:var(--leaf)}
/* chips sit on a white panel and carry their own dark ink, whatever colour
   the section around them happens to be */
.chip{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.15rem;border-radius:11px;
  background:#fff;color:#181633;font-weight:600;font-size:1.02rem;line-height:1.35;white-space:nowrap;
  border:1px solid var(--rule-soft);box-shadow:0 1px 3px rgba(28,33,83,.05);
  transition:transform .4s var(--ease-out),box-shadow .3s,border-color .3s}
.chip:hover{transform:translateX(6px);border-color:var(--plum);box-shadow:0 6px 18px -8px rgba(87,35,99,.45)}
.flow__col--out .chip{flex-direction:row-reverse;text-align:right}
.flow__col--out .chip:hover{transform:translateX(-6px);border-color:var(--leaf)}
.chip i{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(242,106,33,.16)}
.flow__col--out .chip i{box-shadow:0 0 0 3px rgba(11,110,51,.16)}
.flow__mid{display:grid;place-items:center;gap:.8rem;text-align:center}
.flow__core{width:clamp(86px,12vw,124px);aspect-ratio:1;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--plum),var(--ink));color:#fff;box-shadow:var(--shadow-2);
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.4vw,1.2rem);text-align:center;line-height:1.2;
  animation:float 5s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.flow__arrow{width:30px;color:var(--saffron)}
.flow__note{font-size:.93rem;color:var(--tx-3);max-width:16ch;line-height:1.4;text-align:center}

/* Standards badges */
.badges{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.badge{padding:.6rem 1.1rem;border-radius:100px;border:1.5px solid var(--rule);font-weight:620;font-size:1rem;
  transition:all .35s var(--ease-out)}
.badge:hover{border-color:var(--plum);color:var(--plum);transform:translateY(-3px)}
.dark .badge{border-color:rgba(255,255,255,.26);color:#fff}
.dark .badge:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* Checklist */
.checks{display:grid;gap:.95rem;margin:1.8rem 0}
.checks li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.08rem;line-height:1.55}
.checks svg{flex:none;width:25px;height:25px;color:var(--leaf);margin-top:2px}
.dark .checks svg{color:#5DD68B}

/* ---------- 15. Team ---------- */
.person{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.person:hover{transform:translateY(-8px);box-shadow:var(--shadow-2)}
.person__pic{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.person__pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.person:hover .person__pic img{transform:scale(1.05)}
.person__body{padding:1.6rem}
.person h3{font-size:1.4rem;margin-bottom:.25rem}
.person__role{color:var(--plum);font-weight:620;font-size:1.02rem;margin-bottom:1rem;display:block}
.person__links{display:flex;gap:.6rem;flex-wrap:wrap}
.person__links a{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:100px;
  background:var(--paper-3);font-size:.97rem;font-weight:600;transition:all .3s var(--ease-out)}
.person__links a:hover{background:var(--plum);color:#fff;transform:translateY(-2px)}
.person__links svg{width:17px;height:17px}

/* ---------- 16. Accordion (FAQ) ---------- */
.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.6rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:clamp(1.18rem,1.85vw,1.45rem);font-weight:650;letter-spacing:-.028em;
  transition:color .3s}
.acc__btn:hover{color:var(--plum)}
.acc__btn i{flex:none;position:relative;width:26px;height:26px}
.acc__btn i::before,.acc__btn i::after{content:"";position:absolute;background:var(--plum);border-radius:2px;
  transition:transform .4s var(--ease-out)}
.acc__btn i::before{left:0;right:0;top:11.75px;height:2.5px}
.acc__btn i::after{top:0;bottom:0;left:11.75px;width:2.5px}
.acc__btn[aria-expanded="true"] i::after{transform:rotate(90deg)}
.acc__p{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.acc__p>div{padding-bottom:1.7rem;color:var(--tx-2);max-width:72ch;font-size:1.08rem}

/* ---------- 17. Forms ---------- */
.form{display:grid;gap:1.4rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.field{display:grid;gap:.55rem}
.field label{font-weight:640;font-size:1.04rem}
.field .req{color:var(--saffron)}
.field .hint{font-size:.98rem;color:var(--tx-3);line-height:1.45}
.field input,.field select,.field textarea{
  width:100%;padding:1.05rem 1.15rem;border:1.5px solid var(--rule);border-radius:13px;
  background:var(--paper-2);font-size:1.06rem;transition:border-color .3s,box-shadow .3s,background .3s}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23572363' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:19px;padding-right:3rem}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 4px rgba(87,35,99,.12);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:#9B97AE}

/* Dropzone */
.drop{position:relative;border:2.5px dashed var(--rule);border-radius:var(--r-md);background:var(--paper-2);
  padding:clamp(2rem,4vw,3rem) 1.5rem;text-align:center;cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s var(--ease-out)}
.drop:hover,.drop.is-over{border-color:var(--plum);background:rgba(87,35,99,.04)}
.drop.is-over{transform:scale(1.01)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop__ico{width:56px;height:56px;margin:0 auto 1rem;border-radius:16px;display:grid;place-items:center;
  background:rgba(87,35,99,.1);color:var(--plum)}
.drop__ico svg{width:28px;height:28px}
.drop b{display:block;font-size:1.15rem;font-weight:680;margin-bottom:.35rem}
.drop span{color:var(--tx-3);font-size:1rem;display:block}
.drop__files{display:grid;gap:.6rem;margin-top:1.2rem;text-align:left}
.drop__file{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;background:var(--paper-3);
  border-radius:11px;font-size:1rem}
.drop__file svg{flex:none;width:20px;height:20px;color:var(--plum)}
.drop__file b{font-size:1rem;font-weight:620;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop__file em{font-style:normal;color:var(--tx-3);font-size:.94rem;margin-left:auto;flex:none}

/* Consent + status */
.consent{display:flex;gap:.85rem;align-items:flex-start;font-size:1rem;line-height:1.55;color:var(--tx-2)}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--plum)}
.fstatus{display:none;padding:1.15rem 1.35rem;border-radius:13px;font-weight:580;font-size:1.05rem;line-height:1.55}
.fstatus.is-on{display:block;animation:fadeUp .5s var(--ease-out)}
.fstatus.ok{background:rgba(11,110,51,.1);color:#075C2A;border:1.5px solid rgba(11,110,51,.3)}
.fstatus.err{background:rgba(214,58,36,.09);color:#9D2C13;border:1.5px solid rgba(214,58,36,.28)}
.fstatus.busy{background:rgba(87,35,99,.08);color:var(--plum);border:1.5px solid rgba(87,35,99,.25)}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important}
.prog{height:7px;border-radius:5px;background:var(--rule);overflow:hidden;margin-top:.9rem;display:none}
.prog.is-on{display:block}
.prog i{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--saffron),var(--plum));transition:width .3s var(--ease)}

/* Form shell */
/* a form card is always a light surface, so it sets its own ink rather than
   inheriting white from a dark section wrapped around it */
.fcard{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3.4vw,3rem);box-shadow:var(--shadow-1);color:var(--tx)}
.fcard h2,.fcard h3{color:var(--ink)}
.fcard p,.fcard span,.fcard li{color:var(--tx-2)}
.fcard .field label{color:var(--ink)}
.fcard .field .hint{color:var(--tx-3)}
.fcard .field .req{color:var(--saffron)}
.fcard .consent{color:var(--tx-2)}
.fcard .drop b{color:var(--ink)}
.fcard .drop span{color:var(--tx-3)}
.fcard .drop__file b{color:var(--ink)}
.fcard .tlink{color:var(--plum)}

/* Contact rows */
.cinfo{display:grid;gap:1.6rem}
.cinfo__row{display:flex;gap:1.1rem;align-items:flex-start}
.cinfo__ico{flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:rgba(87,35,99,.1);color:var(--plum)}
.cinfo__ico svg{width:24px;height:24px}
.cinfo__row b{display:block;font-size:1.1rem;font-weight:680;margin-bottom:.25rem}
.cinfo__row a,.cinfo__row span{color:var(--tx-2);font-size:1.06rem;line-height:1.55;display:block}
.cinfo__row a:hover{color:var(--plum)}

/* ---------- 18. Jobs ---------- */
.job{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  padding:clamp(1.5rem,3vw,2.2rem);background:var(--paper-2);border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s}
.job:hover{transform:translateY(-5px);box-shadow:var(--shadow-1);border-color:var(--rule)}
.job h3{font-size:clamp(1.35rem,2.1vw,1.75rem);margin-bottom:.6rem}
.job__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.job__meta span{padding:.42rem .9rem;border-radius:100px;background:var(--paper-3);font-size:.96rem;font-weight:580}
.job p{margin:0;color:var(--tx-2);font-size:1.05rem;max-width:70ch}

/* ---------- 19. WhatsApp float ---------- */
.wa{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:950;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.wa__list{display:flex;flex-direction:column;gap:.7rem;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transform-origin:bottom right;
  transition:opacity .38s var(--ease-out),transform .38s var(--ease-out),visibility .38s}
.wa.is-on .wa__list{opacity:1;visibility:visible;transform:none}
.wa__p{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.1rem .6rem .6rem;border-radius:100px;
  background:#fff;box-shadow:0 6px 26px -8px rgba(28,33,83,.4);border:1px solid var(--rule-soft);
  transform:translateX(24px);opacity:0;transition:transform .45s var(--ease-out),opacity .45s var(--ease-out),box-shadow .3s}
.wa.is-on .wa__p{transform:none;opacity:1}
.wa.is-on .wa__p:nth-child(1){transition-delay:.06s}
.wa.is-on .wa__p:nth-child(2){transition-delay:.13s}
.wa__p:hover{box-shadow:0 12px 34px -10px rgba(37,211,102,.6);border-color:#25D366}
.wa__p img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #25D366}
.wa__p b{display:block;font-size:1.02rem;font-weight:680;line-height:1.25;white-space:nowrap}
.wa__p span{display:block;font-size:.92rem;color:var(--tx-3);white-space:nowrap}
.wa__btn{width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:#25D366;color:#fff;box-shadow:0 10px 30px -6px rgba(37,211,102,.7);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);position:relative}
.wa__btn svg{width:34px;height:34px;transition:transform .4s var(--ease-out)}
.wa__btn:hover{transform:scale(1.09)}
.wa.is-on .wa__btn{transform:rotate(135deg) scale(1.02);background:var(--plum);box-shadow:0 10px 30px -6px rgba(87,35,99,.7)}
.wa.is-on .wa__btn .wa-i{opacity:0;transform:scale(.6)}
.wa.is-on .wa__btn .wa-x{opacity:1;transform:none}
.wa__btn .wa-x{position:absolute;opacity:0;transform:scale(.6)}
.wa__btn::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #25D366;
  animation:ring 2.6s var(--ease) infinite;pointer-events:none}
.wa.is-on .wa__btn::after{display:none}
@keyframes ring{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
.wa__tip{position:absolute;right:82px;bottom:18px;white-space:nowrap;background:var(--ink-deep);color:#fff;
  padding:.6rem 1rem;border-radius:10px;font-size:.96rem;font-weight:580;opacity:0;pointer-events:none;
  transform:translateX(8px);transition:all .3s var(--ease-out)}
.wa__btn:hover+.wa__tip,.wa__tip.show{opacity:1;transform:none}
.wa.is-on .wa__tip{opacity:0!important}

/* ---------- 20. Footer ---------- */
.ftr{background:var(--ink-deep);color:var(--on-dark-2);padding-top:clamp(4rem,8vw,6.5rem);position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:repeating-linear-gradient(to right,rgba(226,182,240,.09) 0 1px,transparent 1px 92px);
  mask-image:linear-gradient(#000,transparent 60%);-webkit-mask-image:linear-gradient(#000,transparent 60%)}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(3rem,6vw,4.5rem);position:relative}
.ftr__logo img{height:78px;width:auto;margin-bottom:1.5rem}
.ftr p{font-size:1.05rem;line-height:1.7;max-width:42ch}
.ftr h4{color:#fff;font-family:var(--body);font-size:1.08rem;font-weight:700;letter-spacing:.005em;margin-bottom:1.3rem}
.ftr__nav{display:grid;gap:.75rem}
.ftr__nav a{font-size:1.04rem;color:var(--on-dark-2);transition:color .25s,transform .3s var(--ease-out);width:fit-content}
.ftr__nav a:hover{color:#fff;transform:translateX(4px)}
.ftr__c{display:grid;gap:1rem;font-size:1.04rem;line-height:1.6}
.ftr__c a:hover{color:#fff}
.ftr__social{display:flex;gap:.65rem;margin-top:1.6rem}
.ftr__social a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:all .35s var(--ease-out)}
.ftr__social a:hover{background:var(--plum);transform:translateY(-4px)}
.ftr__social svg{width:20px;height:20px}
.ftr__bot{border-top:1px solid rgba(255,255,255,.12);padding-block:1.8rem;display:flex;
  justify-content:space-between;gap:1.2rem;flex-wrap:wrap;font-size:.99rem;position:relative}
.ftr__bot a:hover{color:#fff}

/* ---------- 21. Responsive ---------- */
@media (max-width:1180px){
  .hdr__logo img{height:56px}
  --hdr-h:92px;
  .nav__link{padding:.65rem .7rem;font-size:.99rem}
  .hdr__tel{display:none}
}
@media (max-width:1024px){
  :root{--hdr-h:86px}
  .nav,.hdr__tel{display:none}
  .burger{display:flex}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr}
  .split,.split--wide{grid-template-columns:1fr;gap:2.5rem}
  .flow{grid-template-columns:1fr;gap:1.5rem}
  .flow__arrow{transform:rotate(90deg)}
  .hero{height:200vh}
}
/* On narrow screens the covers must swing clear far faster, or the
   headline sits behind them. Wider travel + steeper hinge. */
@media (max-width:900px){
  .hero__cover--l{transform:translateX(calc(var(--open,0) * -64vw)) rotateY(calc(var(--open,0) * -88deg))}
  .hero__cover--r{transform:translateX(calc(var(--open,0) * 64vw)) rotateY(calc(var(--open,0) * 88deg))}
  .hero__inner>div{width:min(720px,84vw)}
  .hero__mark{display:none}
}
@media (max-width:720px){
  :root{--hdr-h:78px}
  .hdr__bar>.btn{display:none}
  .hero__sub{max-width:34ch}
  .hdr__logo img{height:50px}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .f-row{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
  .job{grid-template-columns:1fr}
  .tl__item{padding-left:74px}
  .tl__dot{width:54px;height:54px;font-size:1.2rem}
  .tl__rail{left:25px}
  .hero{height:175vh}
  .hero__cover{width:51%}
  .wa__p span{display:none}
  .btn{padding:.95rem 1.6rem}
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .bigtitle .ln>span{transform:none}
  .hero{height:100vh}
  .hero__stage{position:relative}
  .hero__cover{display:none}
  .hero__title .w{opacity:1;transform:none}
  .hero__sub,.hero__cta{opacity:1}
  .tl__item h3,.tl__item p{opacity:1;transform:none}
}

/* ---------- 23. Print ---------- */
@media print{
  .hdr,.wa,.hero__cover,.ftr__social,.drawer{display:none!important}
  .hero{height:auto}.hero__stage{position:relative;height:auto;padding-block:4rem}
  body{background:#fff;color:#000}
}


/* ---------- 24. Slim continuous services band ---------- */
.ticker{position:relative;overflow:hidden;background:var(--ink-deep);color:#fff;
  padding-block:1.15rem;border-block:1px solid rgba(255,255,255,.1)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:clamp(50px,9vw,150px);z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-deep),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink-deep),transparent)}
.ticker__track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__grp{display:flex;align-items:center;flex:none}
.ticker__i{display:inline-flex;align-items:center;gap:.85rem;padding-inline:clamp(1.1rem,2.4vw,2rem);
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.35vw,1.28rem);
  letter-spacing:-.02em;white-space:nowrap;color:#fff;transition:color .3s}
.ticker__i:hover{color:#F7C9A3}
.ticker__i b{width:7px;height:7px;border-radius:50%;background:var(--saffron);flex:none}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- 25. Horizontal process track (left to right) ---------- */
/* the texture helper sets overflow:hidden, which turns this into a scroll
   container and stops the stage from pinning — the stage clips its own track */
.hflow,.hflow.textured{position:relative;height:340vh;overflow:visible}
.hflow__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;padding-top:calc(var(--hdr-h) + 1.5rem);padding-bottom:1.5rem}
.hflow__head{max-width:var(--wrap);width:100%;margin-inline:auto;padding-inline:var(--gut);margin-bottom:clamp(1.5rem,2.8vw,2.4rem)}
.hflow__viewport{overflow:hidden;width:100%}
.hflow__track{display:flex;gap:clamp(1.1rem,2vw,1.8rem);padding-inline:var(--gut);
  width:max-content;will-change:transform}
.hstep{position:relative;flex:none;width:clamp(268px,24vw,356px);align-self:stretch;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.2vw,2rem);
  transition:background .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.hstep.on{background:rgba(255,255,255,.1);border-color:rgba(226,182,240,.5);transform:translateY(-8px)}
.hstep__n{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:.95rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  font-family:var(--display);font-weight:700;font-size:1.25rem;color:#fff;
  transition:background .5s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s}
.hstep.on .hstep__n{background:var(--saffron);border-color:transparent;color:#2A1105;
  transform:rotate(-6deg) scale(1.06);box-shadow:0 10px 26px -10px rgba(242,106,33,.85)}
.hstep h3{font-size:1.22rem;margin-bottom:.6rem;color:#fff;letter-spacing:-.028em}
.hstep p{margin:0;color:var(--on-dark-2);font-size:.99rem;line-height:1.55}
.hstep__when{display:block;font-size:.93rem;font-weight:700;color:var(--saffron);margin-bottom:.45rem}
/* connector under the cards, filling left to right */
.hflow__rail{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.14);
  max-width:var(--wrap);width:calc(100% - var(--gut) * 2);margin:clamp(1.4rem,2.4vw,2rem) auto 0}
.hflow__rail i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--saffron),var(--plum-soft))}
.hflow__cue{max-width:var(--wrap);width:100%;margin:.9rem auto 0;padding-inline:var(--gut);
  display:flex;align-items:center;gap:.6rem;color:var(--on-dark-2);font-size:.98rem}
.hflow__cue svg{width:20px;animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* ---------- 26. Offices ---------- */
.office{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.office:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.office__map{position:relative;aspect-ratio:16/10;background:var(--paper-3)}
.office__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.92)}
.office__body{padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column;flex:1}
.office__tag{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;margin-bottom:.9rem;
  padding:.4rem .9rem;border-radius:100px;background:rgba(87,35,99,.09);color:var(--plum);
  font-size:.93rem;font-weight:700}
.office h3{font-size:1.5rem;margin-bottom:.7rem}
.office address{font-style:normal;color:var(--tx-2);font-size:1.05rem;line-height:1.65}
.office__go{margin-top:1.3rem}

/* ---------- 27. Loader + page transition ---------- */
.loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--plum) 0%,var(--plum-deep) 45%,var(--ink-deep) 100%);
  transition:opacity .6s var(--ease-out),visibility .6s}
.loader__in{display:grid;justify-items:center;gap:1.5rem;padding:2rem;
  animation:loadPop .8s var(--ease-out) both}
@keyframes loadPop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.loader img{width:min(58vw,250px);height:auto}
.loader__bar{width:min(52vw,210px);height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--saffron);
  animation:loadBar 1.5s var(--ease-out) forwards}
@keyframes loadBar{0%{width:0}55%{width:72%}100%{width:100%}}
.loader__txt{font-size:.96rem;font-weight:500;color:#C9B8D6;letter-spacing:.01em}
.loader.done{opacity:0;visibility:hidden}
body.loading{overflow:hidden}

/* curtain: five panels that sweep across on navigation */
.curtain{position:fixed;inset:0;z-index:9990;display:flex;pointer-events:none;visibility:hidden}
.curtain span{flex:1;background:linear-gradient(160deg,var(--plum),var(--ink-deep));
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-out)}
.curtain span:nth-child(1){transition-delay:0s}
.curtain span:nth-child(2){transition-delay:.06s}
.curtain span:nth-child(3){transition-delay:.12s}
.curtain span:nth-child(4){transition-delay:.18s}
.curtain span:nth-child(5){transition-delay:.24s}
.curtain.in{visibility:visible}
.curtain.in span{transform:scaleY(1)}
/* content settles in after the curtain lifts */
main{animation:pageIn .7s var(--ease-out) both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .hflow{height:auto}
  .hflow__stage{position:static;height:auto;padding-block:var(--sec)}
  .hflow__viewport{overflow:visible}
  .hflow__track{flex-direction:column;width:auto;transform:none!important;padding-inline:var(--gut)}
  .hstep{width:auto}
  .hflow__rail,.hflow__cue{display:none}
  .office__map{aspect-ratio:16/11}
}
@media (max-width:860px){
  .chip{white-space:normal}
}
@media (max-width:720px){
  .flow__col--out .chip,.flow__col--out .flow__hd{flex-direction:row;text-align:left}
  .flow__col--out .flow__hd::after{order:0}
  .loader img{width:min(64vw,200px)}
}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .hflow{height:auto}
  .hflow__stage{position:static;height:auto;padding-block:var(--sec)}
  .hflow__track{flex-direction:column;width:auto;transform:none!important}
  .hstep{width:auto}
  main{animation:none}
  .curtain{display:none}
}


/* ---------- 28. Sample tab, pinned to the right edge ---------- */
/* upright, with the words always readable — not an icon that needs hovering */
.sidetab{position:fixed;right:0;top:50%;translate:0 -50%;z-index:940;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  width:56px;padding:1.1rem .5rem 1.25rem;border-radius:16px 0 0 16px;
  background:linear-gradient(170deg,var(--saffron),#E2560F);color:#2A1105;
  box-shadow:-6px 8px 30px -10px rgba(242,106,33,.85);
  transition:width .35s var(--ease-out),background .3s,box-shadow .35s}
.sidetab__ico{display:block;flex:none}
.sidetab__ico svg{width:22px;height:22px;display:block}
.sidetab__t{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
  max-width:none;opacity:1;font-weight:700;font-size:1rem;letter-spacing:.01em}
.sidetab:hover,.sidetab:focus-visible{width:62px;
  background:linear-gradient(170deg,#FF7C34,var(--saffron));
  box-shadow:-6px 8px 36px -10px rgba(242,106,33,1)}

/* ---------- 29. Colour separation on light sections ---------- */
/* headings take the brand plum so they read apart from body copy */
.svc h3,.office h3,.person h3,.job h3,.info-panel h3,.tl__item h3{color:var(--plum)}
.dark .info-panel h3,.dark .tl__item h3{color:#E4B9F0}
.acc__btn{color:var(--ink)}
.acc__btn[aria-expanded="true"]{color:var(--plum)}
.field label{color:var(--ink)}

/* ---------- 30. Footer hovers in light purple ---------- */
.ftr h4{color:#DBB4E8}
.ftr__nav a:hover,.ftr__c a:hover,.ftr__bot a:hover{color:#E9C7F4}
.ftr__social a:hover{background:var(--plum-soft)}


/* ---------- 31. Image bands — pictures shown whole, not washed out behind text ---------- */
.shotband{position:relative;width:100%;line-height:0;background:var(--ink-deep)}
/* supply band images at exactly 1800 x 600 and CSS will not re-crop them */
.shotband img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;display:block}
.shotband--rounded{padding-inline:var(--gut);background:transparent}
.shotband--rounded img{border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.shotband figcaption{line-height:1.5;padding:1rem var(--gut) 0;color:var(--tx-3);font-size:1rem;text-align:center}
.banner .shotband figcaption{color:var(--on-dark-2)}
/* a band sitting at the top of a banner, pulled up to meet the section edge */
.banner__top{margin-top:calc(clamp(4rem,8vw,7rem) * -1);margin-bottom:clamp(2.5rem,5vw,4rem)}
.banner__bottom{margin-bottom:calc(clamp(4rem,8vw,7rem) * -1);margin-top:clamp(2.5rem,5vw,4rem)}
/* the image band under a page head, overlapping the join */
.phead__band{position:relative;margin-top:calc(clamp(2rem,4vw,3.5rem) * -1);z-index:3;
  padding-inline:var(--gut);max-width:var(--wrap);margin-inline:auto}
.phead__band img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);display:block}
.after-band{padding-top:clamp(3rem,6vw,4.5rem)}
/* light sections get the same weave, far softer */
.milled{position:relative;isolation:isolate}
.milled::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--milled-lite);opacity:.85}
@media (max-width:720px){
  .shotband img{aspect-ratio:2.2/1}
  .phead__band img{aspect-ratio:2.2/1}
}


/* ---------- 32. Animated formats infographic ---------- */
.flow .chip{opacity:0;transform:translateX(-26px) scale(.96)}
.flow__col--out .chip{transform:translateX(26px) scale(.96)}
.flow.go .chip{opacity:1;transform:none;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),box-shadow .3s,border-color .3s}
.flow.go .flow__col .chip:nth-child(2){transition-delay:.06s}
.flow.go .flow__col .chip:nth-child(3){transition-delay:.18s}
.flow.go .flow__col .chip:nth-child(4){transition-delay:.30s}
.flow.go .flow__col .chip:nth-child(5){transition-delay:.42s}
.flow.go .flow__col .chip:nth-child(6){transition-delay:.54s}
/* the two feed lines, drawn in as the panel arrives */
.flow__col{position:relative}
.flow__col::after{content:"";position:absolute;top:50%;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--saffron),rgba(242,106,33,0));
  transition:width .9s var(--ease-out) .35s}
.flow__col:not(.flow__col--out)::after{left:calc(100% + 2px)}
.flow__col--out::after{right:calc(100% + 2px);background:linear-gradient(270deg,var(--leaf),rgba(11,110,51,0))}
.flow.go .flow__col::after{width:clamp(14px,3.4vw,46px)}
/* pulses travelling into and out of the core */
.flow__mid{position:relative}
.flow__core{position:relative;overflow:hidden}
.flow__core::after{content:"";position:absolute;inset:-40%;border-radius:50%;
  background:radial-gradient(circle,rgba(242,106,33,.55),transparent 62%);opacity:0}
.flow.go .flow__core::after{animation:corePulse 3.2s var(--ease) infinite}
@keyframes corePulse{0%{opacity:0;transform:scale(.55)}45%{opacity:.85}100%{opacity:0;transform:scale(1.25)}}
.flow.go .flow__core{animation:float 5s var(--ease) infinite}
.flow__arrow{position:relative}
.flow.go .flow__arrow{animation:nudge 1.9s var(--ease) infinite}
.flow__mid .flow__spark{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--saffron);opacity:0;pointer-events:none}
.flow.go .flow__spark{animation:spark 2.6s var(--ease-out) infinite}
.flow.go .flow__spark:nth-of-type(2){animation-delay:.9s}
.flow.go .flow__spark:nth-of-type(3){animation-delay:1.8s}
@keyframes spark{
  0%{opacity:0;transform:translate(-220%,-50%) scale(.6)}
  18%{opacity:1}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1;background:var(--leaf)}
  100%{opacity:0;background:var(--leaf);transform:translate(220%,-50%) scale(.6)}
}

/* ---------- 33. Box entrances, replayed each time they come back ---------- */
.pop{opacity:0;transform:translateY(38px) scale(.965);
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.pop.in{opacity:1;transform:none}
.pop:nth-child(2){transition-delay:.09s}
.pop:nth-child(3){transition-delay:.18s}
.pop:nth-child(4){transition-delay:.27s}
.pop:nth-child(5){transition-delay:.36s}
.pop:nth-child(6){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  .pop,.flow .chip{opacity:1;transform:none}
  .flow__col::after{width:clamp(14px,3.4vw,46px)}
  .flow.go .flow__core,.flow.go .flow__arrow,.flow.go .flow__spark,.flow.go .flow__core::after{animation:none}
  .flow__spark{display:none}
}


/* ---------- 34. Hero page leaves — the paper peels before the boards swing ---------- */
.hero__leaves{position:absolute;inset:0;z-index:5;pointer-events:none;transform-style:preserve-3d}
.hero__leaf{position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(90deg,#F4EFE6 0%,#E6DCCB 62%,#CFC2AC 100%);
  box-shadow:0 0 44px rgba(0,0,0,.34);backface-visibility:hidden;
  opacity:calc(1 - var(--open,0) * 1.05)}
.hero__leaf::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(to bottom,rgba(120,105,85,.16) 0 1px,transparent 1px 7px)}
.hero__leaf--l{left:0;transform-origin:right center}
.hero__leaf--r{right:0;transform-origin:left center;
  background:linear-gradient(270deg,#F4EFE6 0%,#E6DCCB 62%,#CFC2AC 100%)}
/* three leaves a side, each running slightly ahead of the next */
/* the leaves sweep outward with the covers rather than pivoting on the spine,
   so they never sit across the headline, and they fade once the book is open */
.hero__leaf--l.l1{transform:translateX(calc(var(--open,0) * -46vw)) rotateY(calc(var(--open,0) * -118deg))}
.hero__leaf--l.l2{transform:translateX(calc(var(--open,0) * -40vw)) rotateY(calc(var(--open,0) * -104deg))}
.hero__leaf--l.l3{transform:translateX(calc(var(--open,0) * -34vw)) rotateY(calc(var(--open,0) * -92deg))}
.hero__leaf--r.l1{transform:translateX(calc(var(--open,0) * 46vw)) rotateY(calc(var(--open,0) * 118deg))}
.hero__leaf--r.l2{transform:translateX(calc(var(--open,0) * 40vw)) rotateY(calc(var(--open,0) * 104deg))}
.hero__leaf--r.l3{transform:translateX(calc(var(--open,0) * 34vw)) rotateY(calc(var(--open,0) * 92deg))}
.hero__leaf{opacity:calc(1 - max(0, var(--open,0) - .16) * 3.6)}
/* a warm seam of light down the spine while the book is still closing */
.hero__spine{position:absolute;left:50%;top:0;bottom:0;width:clamp(90px,14vw,190px);z-index:7;
  translate:-50% 0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,rgba(255,214,160,.5),transparent 72%);
  opacity:calc((1 - var(--open,0)) * var(--open,0) * 3.4);filter:blur(12px)}
@media (prefers-reduced-motion:reduce){
  .hero__leaves,.hero__spine{display:none}
  .hero__media{transform:none;filter:none}
}


/* ---------- 33. Side "Get a sample" tab (replaces the header button) ---------- */

/* ---------- 34. Repeating entrance for boxed content ---------- */
/* boxes lift in every time they come back into view, not just the first */
.svc,.info-panel,.person,.job,.office,.stat,.hstep,.fcard,.shot{
  --box-y:26px}
.rv.out{opacity:0;transform:translateY(var(--box-y,26px)) scale(.985)}
.pop{opacity:0;transform:translateY(30px) scale(.97);
  transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
.pop.in{opacity:1;transform:none}
.pop.out{opacity:0;transform:translateY(30px) scale(.97)}
.pop-d1{transition-delay:.08s}.pop-d2{transition-delay:.16s}
.pop-d3{transition-delay:.24s}.pop-d4{transition-delay:.32s}

/* ---------- 35. Slight colour separation: headings vs body ---------- */
/* on light sections a card heading takes the plum, so a block of text is not
   one flat wall of near-black */
.svc h3,.person h3,.office h3,.job h3,.acc__btn,
.section:not(.dark) .info-panel h3{color:var(--plum)}
.acc__btn:hover{color:var(--plum-deep)}
.section:not(.dark) .info-panel p,.svc p,.job p{color:var(--tx-2)}
.tl__item h3{color:var(--plum)}
.dark .tl__item h3,.dark .info-panel h3,.dark .acc__btn{color:#fff}
.checks li b{color:var(--plum)}
.dark .checks li b{color:#E9C7F4}


/* ---------- 36. Hero: depth, page edges and a wipe reveal ---------- */
/* the stage is tilted back on load and levels out as the book opens, so the
   reveal has real depth rather than reading as two flat doors */
.hero__stage{perspective-origin:50% 42%}
/* a stack of page edges bound to the inner edge of each cover — these travel
   with the cover, so they never intrude on the reading window */
.hero__cover .edge{position:absolute;top:2.5%;bottom:2.5%;width:26px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#FBF7EF 0 2px,#DCD0BB 2px 4px);
  box-shadow:0 0 22px rgba(0,0,0,.45)}
.hero__cover--l .edge{right:-9px;border-radius:2px 5px 5px 2px;
  transform:rotateY(calc(var(--open,0) * 16deg));transform-origin:left center}
.hero__cover--r .edge{left:-9px;border-radius:5px 2px 2px 5px;
  transform:rotateY(calc(var(--open,0) * -16deg));transform-origin:right center}

/* a specular sheen that travels across each cover as it swings */
.hero__cover::before{content:"";position:absolute;inset:0;opacity:.35;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 2px,transparent 2px 7px),
    linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
  background-size:auto,260% 100%;
  background-position:0 0,calc(120% - var(--open,0) * 200%) 0}

/* the spine seam glows, then dims and blurs away as the book opens out */
.hero__stage::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;z-index:7;
  translate:-50% 0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(242,106,33,.85) 22%,rgba(233,199,244,.9) 50%,rgba(242,106,33,.85) 78%,transparent);
  opacity:calc(max(0, 1 - var(--open,0) * 1.9) * .9);
  filter:blur(calc(1px + var(--open,0) * 5px))}

/* headline wipes outward from the spine as the covers part */
.hero__title{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-size:calc(86% + var(--open,0) * 50%) 108%;
  mask-size:calc(86% + var(--open,0) * 50%) 108%;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

@media (prefers-reduced-motion:reduce){
  .hero__stage::after,.hero__cover .edge{display:none}
  .hero__title{-webkit-mask-image:none;mask-image:none}
}


/* ---------- 37. Short viewports: keep the whole process card visible ---------- */
@media (min-width:901px) and (max-height:900px){
  .hflow__stage{gap:clamp(.9rem,1.8vw,1.5rem);padding-bottom:clamp(1rem,2vw,1.6rem)}
  .hflow__head .bigtitle{font-size:clamp(1.45rem,2.3vw,2rem)}
  .hflow__head .lead{font-size:1rem;line-height:1.5}
  .hflow__head .folio{margin-bottom:.6rem;font-size:.92rem}
  .hstep{padding:1.15rem 1.25rem}
  .hstep__n{width:44px;height:44px;border-radius:13px;font-size:1.1rem;margin-bottom:.8rem}
  .hstep h3{font-size:1.12rem;margin-bottom:.4rem}
  .hstep p{font-size:.95rem;line-height:1.5}
  .hstep__when{font-size:.85rem;margin-bottom:.3rem}
}
@media (min-width:901px) and (max-height:760px){
  .hflow__head .lead{display:none}
  .hstep p{font-size:.92rem}
}

/* ---------- 38. Side tab: upright, always readable ---------- */


/* ---------- 39. Banner artwork slot ----------
   Each home-page banner carries one image in the column opposite its text.
   Replace the file in /img keeping the SAME name and pixel size (see
   SETUP-GUIDE.md, "Image sizes"), and the crop will land correctly. */
.banner__art{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-2);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14)}
.banner__art img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block;
  transition:transform 1.2s var(--ease-out)}
.banner__art:hover img{transform:scale(1.04)}
.banner--right .banner__art{order:-1}
@media (max-width:1024px){.banner--right .banner__art{order:0}}


/* ---------- 37. Process track on shorter viewports ---------- */
/* a laptop screen is often under 800px tall — shed the supporting copy and
   tighten the cards before anything gets cut off at the bottom */
@media (min-width:901px) and (max-height:900px){
  .hflow__head .lead{display:none}
  .hflow__head .bigtitle{font-size:clamp(1.5rem,2.4vw,2rem)}
  .hflow__stage{gap:clamp(1rem,1.8vw,1.5rem)}
  .hstep{padding:1.15rem 1.25rem}
  .hstep p{font-size:.95rem;line-height:1.5}
  .hstep h3{font-size:1.12rem;margin-bottom:.45rem}
  .hstep__n{width:42px;height:42px;margin-bottom:.7rem;font-size:1.1rem}
}
@media (min-width:901px) and (max-height:760px){
  .hflow__head .folio{display:none}
  .hflow__cue{display:none}
  .hstep p{font-size:.92rem}
}

/* ---------- 38. Side tab: upright, always readable ---------- */


/* ---------- 39. Mobile alignment ---------- */
@media (max-width:720px){
  /* the logo and the menu button were sitting hard against the screen edges */
  .hdr__bar{padding-inline:1.6rem;gap:.75rem}
  .hdr__logo img{height:46px}
  .burger{width:44px;height:44px}

  /* one floating control is enough on a phone — the upright tab covered text.
     "Get a sample" is still in the menu, the hero and every closing banner. */
  .sidetab{display:none}
  .wa__tip{display:none}
  .wa__btn{width:58px;height:58px}
  .wa__btn svg{width:29px;height:29px}
  .wa{right:.85rem;bottom:.85rem}

  /* a sticky sidebar has nothing to stick beside once the grid is one column,
     so it floated over the content beneath it */
  .sticky-col{position:static!important;top:auto!important}

  /* bands sit flush inside the gutter */
  .shotband--rounded{padding-inline:var(--gut)}
  .banner__art img{aspect-ratio:16/10}

  /* stop long email addresses and URLs pushing their container wide */
  .cinfo__row a,.cinfo__row span,.office address,.ftr__c{overflow-wrap:anywhere}
}