/* ============================================================
   Sim Dhaliwal — shared design system
   Fonts: Schibsted Grotesk (headings) / Hanken Grotesk (body)
   ============================================================ */

:root{
  --page-bg:#FAF8F5;
  --accent:#8A2E7F;
  --accent-deep:#6E2465;
  --ink:#2A2521;
  --ink-2:#332B32;
  --muted:#5E564D;
  --muted-2:#6B6259;
  --muted-3:#8B8177;
  --line:rgba(42,37,33,0.08);
  --line-2:rgba(42,37,33,0.12);
  --chip:#F2ECE4;
  --dark:#211D1A;
  --font-head:'Schibsted Grotesk';
  --font-body:'Hanken Grotesk';
  --maxw:1180px;
  /* strong custom easings — built-in CSS curves are too weak */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page-bg);color:var(--ink);
  font-family:var(--font-body),system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head),system-ui,sans-serif;font-weight:600;letter-spacing:-0.02em;margin:0}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
::selection{background:#E6D8EA;color:var(--ink)}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:32px;padding-right:32px}
.wrap-narrow{max-width:820px;margin:0 auto;padding-left:32px;padding-right:32px}
.section{padding-top:clamp(72px,10vw,148px);padding-bottom:clamp(72px,10vw,148px)}
.section-sm{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.bg-alt{background:#F6F2EB;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bg-alt+.site-footer{border-top:0}
.center{text-align:center}
.stack-lg{display:flex;flex-direction:column;gap:22px}

/* ---------- eyebrow / headings ---------- */
/* one eyebrow system site-wide: .eyebrow-line (editorial layer, below) */
.h-xl{font-size:clamp(38px,4.9vw,68px);line-height:1.03}
.h-lg{font-size:clamp(30px,3.8vw,48px);line-height:1.06}
.h-md{font-size:clamp(28px,3.4vw,42px);line-height:1.08}
.lead{font-size:clamp(17px,1.35vw,20px);color:var(--muted)}
.muted{color:var(--muted)}
.section-head{max-width:46ch;margin:0 auto clamp(40px,5vw,56px)}
.section-head .lead{margin-top:18px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:100px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid transparent;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}
.btn-dark{background:var(--dark);color:#FAF8F5;box-shadow:0 2px 6px rgba(42,37,33,0.14)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(42,37,33,0.2);color:#FAF8F5}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-light:hover{transform:translateY(-2px);border-color:rgba(42,37,33,0.28);color:var(--ink)}
.btn:active{transform:scale(0.97);transition-duration:.12s}
.btn-sm{padding:12px 24px;font-size:15px}

/* ---------- pills / chips / badges ---------- */
.chip{display:inline-flex;align-items:center;background:var(--chip);border:1px solid rgba(42,37,33,0.07);padding:9px 16px;border-radius:100px;font-size:13.5px;font-weight:600;color:#4A4239}
.pill{display:inline-flex;align-items:center;background:var(--chip);padding:9px 17px;border-radius:100px;font-size:14.5px;font-weight:500;color:#4A4239}
.tag{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(42,37,33,0.08);padding:8px 16px;border-radius:100px;font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#7A5C79;box-shadow:0 1px 3px rgba(42,37,33,0.05)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid rgba(42,37,33,0.07);border-radius:24px;padding:32px}
.card-hover{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 24px 50px -26px rgba(42,37,33,0.28)}
.card-hover .icon-tile{transition:transform .35s var(--ease-out)}
.card-hover:hover .icon-tile{transform:scale(1.06) rotate(-2deg)}
.card-outline{border:1px solid var(--line-2);border-radius:24px;padding:34px;background:#fff;box-shadow:0 10px 26px -20px rgba(42,37,33,0.22)}
.co-title{font-family:var(--font-head);font-weight:600;font-size:clamp(24px,2.2vw,27px);line-height:1.18;margin-top:6px}
@media(min-width:901px){.co-title{min-height:2.4em}}
.icon-tile{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px;color:var(--ink-2)}
.icon-tile svg{width:22px;height:22px}
.icon-plum{background:#EDE3F0}.icon-blue{background:#E1EAF6}.icon-sand{background:#F6E7DD}.icon-green{background:#E4EDE3}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card h3{font-size:21px}
.card p{margin-top:10px;font-size:15.5px;color:var(--muted-2)}

/* ---------- media / framed images ---------- */
.framed{border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(74,44,70,0.4)}
.framed img{width:100%;height:100%;object-fit:cover}
.blob{border-radius:52% 48% 46% 54% / 46% 52% 48% 54%;overflow:hidden;box-shadow:0 30px 60px -28px rgba(74,44,70,0.4)}
.blob img{width:100%;height:100%;object-fit:cover}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(250,248,245,0.72);border-bottom:1px solid rgba(42,37,33,0.07);transition:box-shadow .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
.site-header.scrolled{background:rgba(250,248,245,0.86);border-bottom-color:rgba(42,37,33,0.1);box-shadow:0 10px 30px -22px rgba(42,37,33,0.4)}
.site-header .bar{max-width:var(--maxw);margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand img{height:40px;width:auto}
.brand .name{font-family:var(--font-head);font-weight:600;font-size:17px;letter-spacing:-0.02em}
.brand .role{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-3)}
.brand .stack{display:flex;flex-direction:column;line-height:1.1}
.nav{display:flex;align-items:center;gap:30px}
.nav a.link{color:#575047;font-size:15px;font-weight:500;transition:color .2s var(--ease-out)}
.nav a.link:hover{color:var(--accent)}
.nav a.link.active{color:var(--accent)}
.nav .cta{display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:#FAF8F5;padding:11px 22px;border-radius:100px;font-size:14px;font-weight:600;box-shadow:0 1px 2px rgba(42,37,33,0.12);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.nav .cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(42,37,33,0.18);color:#FAF8F5}
.nav .cta:active{transform:scale(0.97);transition-duration:.12s}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line)}
.footer-badges{max-width:var(--maxw);margin:0 auto;padding:44px 32px 8px}
.footer-badges .label{text-align:center;font-size:11.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#A79E93;margin-bottom:24px}
.badge-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px}
.badge{height:74px;min-width:186px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(42,37,33,0.09);border-radius:16px;padding:0 26px;box-shadow:0 8px 22px -16px rgba(42,37,33,0.25)}
.footer-btm{max-width:var(--maxw);margin:32px auto 0;padding:32px 32px 44px;border-top:1px solid rgba(42,37,33,0.07);display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footer-id{display:flex;align-items:center;gap:12px}
.footer-id img{height:34px;width:auto}
.footer-id .name{font-family:var(--font-head);font-weight:600;font-size:16px}
.footer-id .sub{font-size:12.5px;color:var(--muted-3)}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.footer-nav a{color:var(--muted-2)}
.footer-legal{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--muted-3);text-align:right;line-height:1.5}

/* ---------- reveal animation ---------- */
[data-reveal]{opacity:0;will-change:opacity,transform;transition:opacity 720ms var(--ease-out),transform 720ms var(--ease-out);transform:translate3d(0,26px,0)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal="left"]{transform:translate3d(-40px,0,0)}
[data-reveal="right"]{transform:translate3d(40px,0,0)}
[data-reveal="scale"]{transform:translate3d(0,20px,0) scale(0.95)}
[data-reveal="fade"]{transform:translate3d(0,10px,0)}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--muted-2);letter-spacing:0.02em}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;padding:13px 15px;border:1px solid rgba(42,37,33,0.14);border-radius:12px;background:var(--page-bg);color:var(--ink);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{resize:vertical}
/* custom select chevron so the control matches the other fields */
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A2E7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;cursor:pointer}

/* ---------- FAQ ---------- */
.faq-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.faq-tab{background:#fff;border:1px solid var(--line-2);padding:11px 22px;border-radius:100px;font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--muted-2);cursor:pointer;transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out),transform .15s var(--ease-out)}
.faq-tab:hover{border-color:rgba(42,37,33,0.28)}
.faq-tab:active{transform:scale(0.97)}
.faq-tab.active{background:var(--dark);color:#FAF8F5;border-color:var(--dark)}
.faq-panel{display:none}
.faq-panel.active{display:block}
.faq-list{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-0.01em;transition:color .2s var(--ease-out)}
.faq-item.open .faq-q,.faq-q:hover{color:var(--accent)}
.faq-sign{flex:none;width:28px;height:28px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--accent);font-family:var(--font-body);transition:transform .3s var(--ease-out),background-color .25s var(--ease-out)}
.faq-item.open .faq-sign{transform:rotate(135deg);background:#EBDCEC}
/* smooth height accordion — 0fr→1fr grid track, JS wraps content in .faq-a-inner */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-drawer)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;min-height:0}
.faq-a-body{padding:2px 28px 26px;font-size:16px;line-height:1.6;color:var(--muted);max-width:66ch;opacity:0;transition:opacity .28s var(--ease-out)}
.faq-item.open .faq-a-body{opacity:1}
.faq-a-body p+p{margin-top:12px}
/* crafted numbered list inside answers */
.faq-a-body ol{list-style:none;counter-reset:faq-ol;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.faq-a-body ol li{counter-increment:faq-ol;position:relative;padding-left:36px}
.faq-a-body ol li::before{content:counter(faq-ol);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;background:var(--chip);color:var(--accent);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---------- misc ---------- */
.stars{color:var(--accent);letter-spacing:3px}
.quote-band{font-family:var(--font-head);font-weight:500;letter-spacing:-0.02em;font-size:clamp(24px,3.3vw,40px);line-height:1.28;color:var(--ink-2)}
.tick{display:flex;gap:12px;align-items:flex-start}
.tick .m{color:var(--accent);font-size:18px;line-height:1.5}
.tick .m svg{display:block;width:16px;height:16px;margin-top:5px}
.tick .t{font-size:15.5px;color:#4A4239}
.tick .t strong{color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  /* Closed state is hidden via opacity/visibility, not an off-canvas transform/inset
     offset, because a position:fixed drawer whose containing block is the
     backdrop-filter'd sticky header still counts toward the document's scrollable
     area even when translated past the edge. That was inflating the mobile layout
     viewport (390px device width measuring as roughly 730px) and squashing every
     section below the header, including the about-hero grid. Keeping the box's
     geometry inside the viewport at all times avoids that without needing
     overflow:hidden on any ancestor of the sticky header. */
  .nav .links{position:fixed;inset:0 0 0 auto;top:73px;width:min(80vw,320px);height:calc(100vh - 73px);background:var(--page-bg);border-left:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:4px;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--ease-out),visibility 0s linear .26s;box-shadow:-20px 0 50px -30px rgba(42,37,33,0.4)}
  .nav .links.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .26s var(--ease-out)}
  .nav .links a.link{width:100%;padding:14px 6px;font-size:17px;border-bottom:1px solid var(--line)}
  .nav .links .cta{width:100%;justify-content:center;margin-top:14px;padding:14px 22px;font-size:16px}
  .nav-toggle{display:flex}
  .nav{gap:0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-btm{flex-direction:column}
  .footer-legal{text-align:left}
}
/* keep the header brand to a tidy single line on small screens */
@media(max-width:520px){
  .brand .role{font-size:9px;letter-spacing:0.09em}
}
.nav .links{display:flex;align-items:center;gap:30px}
@media(min-width:901px){
  .nav-toggle{display:none}.nav .links{transform:none!important}
  /* animated underline that grows from the left on hover / active page */
  .nav a.link{position:relative}
  .nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out)}
  .nav a.link:hover::after,.nav a.link.active::after{transform:scaleX(1)}
}

/* ---------- keyboard focus polish ---------- */
:focus-visible{outline:none}
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav .cta:focus-visible,.faq-tab:focus-visible,.faq-q:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:1px}

/* ---------- touch devices: no sticky hover lift ---------- */
@media(hover:none){
  .btn-dark:hover,.btn-light:hover,.nav .cta:hover,.card-hover:hover{transform:none;box-shadow:none}
  .btn-dark:hover{box-shadow:0 2px 6px rgba(42,37,33,0.14)}
  .card-hover:hover .icon-tile{transform:none}
}

/* ---------- 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}
  .faq-a-body{opacity:1}
  [data-parallax]{transform:none!important}
  [data-reveal="clip"]{clip-path:none!important}
}

/* ============================================================
   Editorial + effects layer (selected v14 upgrades on v13 base)
   Only the pieces used by the imported sections. Inert until used.
   ============================================================ */

/* ---- display helpers ---- */
.h-2xl{font-size:clamp(40px,5.6vw,80px);line-height:1.0;letter-spacing:-0.03em}
.display-accent{color:var(--accent)}
.balance{text-wrap:balance}

/* ---- eyebrow with a leading hairline rule (the single eyebrow style) ---- */
.eyebrow-line{display:inline-flex;align-items:center;gap:14px;font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.eyebrow-line::before{content:"";width:36px;height:1px;background:currentColor;opacity:.55}
.eyebrow-line.center{justify-content:center}
/* centered heads get a symmetric rule on both sides */
.eyebrow-line.center::after{content:"";width:36px;height:1px;background:currentColor;opacity:.55}
.eyebrow-line.plum{color:#7A5C79}

/* ---- sticky process timeline ---- */
.timeline{position:relative;display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.timeline-aside{position:sticky;top:120px}
.timeline-rail{position:relative;display:flex;flex-direction:column;gap:0}
.timeline-line{position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--line-2);overflow:hidden}
.timeline-line span{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .2s linear}
.timeline-step{position:relative;padding:0 0 clamp(30px,4vw,48px) 62px;opacity:.5;transform:translateY(6px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.timeline-step:last-child{padding-bottom:0}
.timeline-step.is-active{opacity:1;transform:none}
.timeline-node{position:absolute;left:12px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--page-bg);border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:border-color .4s var(--ease-out),background-color .4s var(--ease-out)}
.timeline-node::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background-color .4s var(--ease-out),transform .4s var(--ease-out)}
.timeline-step.is-active .timeline-node{border-color:var(--accent)}
.timeline-step.is-active .timeline-node::after{background:var(--accent);transform:scale(1.15)}
.timeline-step .s-kicker{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.timeline-step h3{font-size:clamp(22px,2.4vw,28px);margin-top:6px}
.timeline-step p{margin-top:10px;font-size:16px;color:var(--muted);max-width:46ch}

/* ---- soft animated mesh backdrop ---- */
.mesh{position:relative;overflow:hidden}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none;opacity:.7}
.mesh::before{width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,#F1E3F0,transparent 68%);animation:drift1 22s ease-in-out infinite}
.mesh::after{width:44vw;height:44vw;right:-12vw;bottom:-20vw;background:radial-gradient(circle,#E7EEF7,transparent 66%);animation:drift2 26s ease-in-out infinite}
.mesh>*{position:relative;z-index:1}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,4%) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-4%) scale(1.06)}}

/* ---- responsive collapse for the timeline ---- */
@media(max-width:900px){
  .timeline{grid-template-columns:1fr;gap:36px}
  .timeline-aside{position:static;top:auto}
}