/* =====================================================================
   PAVILION — shared design system (getpavilion.co.uk, multi-page)
   Light · warm · premium · dynamic. Fraunces (display) + DM Sans (body).
   Terracotta #C94F28 accent · navy #10162E ink · cream canvas.
   Linked by every page. Keep tokens here; pages add only page-specific CSS.
   ===================================================================== */

:root{
  /* canvas + surfaces */
  --cream:#FBF7F0; --cream-2:#F6F4EF; --paper:#FFFFFF; --paper-2:#FCFAF5; --paper-deep:#F1EADD;
  /* ink + text (navy ink, warm-taupe body) */
  --ink:#10162E; --ink-2:#2C3450; --body:#5E5A54; --muted:#928B80;
  /* terracotta accent */
  --terra:#C94F28; --terra-dk:#A83F1F; --terra-soft:#E07A5F; --terra-tint:#FBEEE8; --terra-2:#F5DCCE;
  /* warm borders + soft tints */
  --line:#ECE3D4; --line-soft:#F3EDE2;
  --green:#2A7A4B; --green-tint:#E8F2EB; --amber:#B07A16; --amber-tint:#FAF0DA; --blue:#1C5FA6; --blue-tint:#E7F0FA;
  /* gentle warm shadows */
  --sh-sm:0 2px 8px -3px rgba(60,48,30,.12);
  --sh:0 18px 40px -26px rgba(60,48,30,.30);
  --sh-lg:0 40px 80px -44px rgba(40,30,18,.42);
  --sh-terra:0 16px 34px -16px rgba(201,79,40,.5);
  /* type + layout */
  --font-display:'Fraunces',Georgia,serif; --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1240px; --maxw-wide:1360px;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px;overflow-x:hidden}
body{font-family:var(--font-body);background:var(--cream);color:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img,svg,video{display:block;max-width:100%}
em{font-style:italic}
::selection{background:var(--terra-tint);color:var(--terra-dk)}

/* ── layout ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section.tight{padding:60px 0}
.head{max-width:680px;margin:0 auto 48px;text-align:center}
.head.left{margin-left:0;text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--terra);margin-bottom:16px}
.eyebrow::before{content:"";width:18px;height:1.5px;background:var(--terra)}
.eyebrow.center{justify-content:center}
.h1{font-family:var(--font-display);font-size:clamp(38px,5.6vw,62px);font-weight:400;color:var(--ink);line-height:1.04;letter-spacing:-0.025em}
.h2{font-family:var(--font-display);font-size:clamp(29px,4.2vw,45px);font-weight:400;color:var(--ink);line-height:1.1;letter-spacing:-0.02em}
.h3{font-family:var(--font-display);font-size:clamp(21px,2.5vw,27px);font-weight:500;color:var(--ink);line-height:1.18;letter-spacing:-0.01em}
.h1 em,.h2 em,.h3 em{font-style:italic;color:var(--terra)}
.lead{font-size:clamp(17px,1.9vw,19px);color:var(--body);font-weight:300;line-height:1.7;max-width:600px}
.head .lead{margin:18px auto 0}
.head.left .lead{margin-left:0}
.kicker-sm{font-size:13px;color:var(--muted);font-weight:500}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--r-sm);cursor:pointer;border:1.5px solid transparent;transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s,color .2s;letter-spacing:-0.01em;white-space:nowrap}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--terra);color:#fff;box-shadow:var(--sh-terra)}
.btn-primary:hover{background:var(--terra-dk);transform:translateY(-2px)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-soft{background:var(--terra-tint);color:var(--terra-dk)}
.btn-soft:hover{background:var(--terra-2);transform:translateY(-2px)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-text{color:var(--terra);font-weight:600;display:inline-flex;align-items:center;gap:7px}
.btn-text .arr{transition:transform .2s var(--ease)}
.btn-text:hover .arr{transform:translateX(3px)}

/* ── badges ── */
.badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px;display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.badge-live{background:var(--green-tint);color:var(--green)}
.badge-soon{background:var(--amber-tint);color:var(--amber)}
.badge-new{background:var(--terra-tint);color:var(--terra-dk)}
.badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:70px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:rgba(251,247,240,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(251,247,240,.92)}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo .mk{width:38px;height:38px;border-radius:10px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo .mk svg{width:22px;height:20px}
.nav-logo b{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-link{position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:9px 14px;border-radius:8px;transition:color .18s,background .18s;display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:none;font-family:inherit}
.nav-link:hover{color:var(--terra);background:var(--terra-tint)}
.nav-link .chev{width:13px;height:13px;transition:transform .2s}
.nav-item{position:relative}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}
/* mega dropdown */
.nav-drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);width:560px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:12px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.nav-drop::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop a{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:10px;transition:background .15s}
.nav-drop a:hover{background:var(--cream-2)}
.nav-drop .di{width:34px;height:34px;border-radius:9px;background:var(--terra-tint);color:var(--terra);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-drop .di svg{width:18px;height:18px}
.nav-drop .dt{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;line-height:1.3}
.nav-drop .dd{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.nav-cta{background:var(--terra);color:#fff!important;padding:10px 18px;border-radius:9px;font-size:14.5px;font-weight:600;transition:background .18s,transform .12s;white-space:nowrap}
.nav-cta:hover{background:var(--terra-dk);transform:translateY(-1px)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{height:2px;background:var(--ink);border-radius:2px;transition:.25s}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:70px 0 0;z-index:190;background:var(--cream);padding:18px 24px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .3s var(--ease)}
body.menu-open .mobile-menu{transform:none}
.mobile-menu a,.mm-group>span{display:block;padding:13px 0;font-size:18px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.mm-group>span{font-family:var(--font-display);color:var(--terra);font-size:14px;text-transform:uppercase;letter-spacing:.1em;border:none;padding:18px 0 6px}
.mobile-menu .mm-sub{font-size:15px;color:var(--ink-2);padding:9px 0 9px 16px;border:none}
.mobile-menu .mm-cta{margin-top:20px;background:var(--terra);color:#fff;text-align:center;border-radius:10px;padding:15px;font-weight:600;border:none}

/* ── reveal / motion (JS-gated so no-JS shows everything) ── */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pv-js .reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none}
.rd-1{transition-delay:.07s}.rd-2{transition-delay:.14s}.rd-3{transition-delay:.21s}.rd-4{transition-delay:.28s}.rd-5{transition-delay:.35s}

/* ── feature-grid card ── */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{position:relative;display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;overflow:hidden}
.fcard::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--terra),var(--terra-soft));opacity:0;transition:opacity .25s;border-radius:var(--r) var(--r) 0 0}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--terra-soft)}
.fcard:hover::after{opacity:1}
.fcard-ic{width:46px;height:46px;border-radius:12px;background:var(--terra-tint);color:var(--terra);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .25s,color .25s,transform .25s}
.fcard:hover .fcard-ic{background:var(--terra);color:#fff;transform:scale(1.05)}
.fcard-ic svg{width:23px;height:23px}
.fcard h3{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:7px;display:flex;align-items:center;gap:8px;letter-spacing:-0.01em}
.fcard p{font-size:14px;color:var(--body);font-weight:300;line-height:1.6}
.fcard .more{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--terra);display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateX(-4px);transition:.25s}
.fcard:hover .more{opacity:1;transform:none}

/* ── outcome-stats ── */
.stats{display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:center}
.stats.left{justify-content:flex-start}
.stat .v{font-family:var(--font-display);font-size:clamp(30px,3.4vw,40px);font-weight:500;color:var(--ink);line-height:1;letter-spacing:-0.02em}
.stat .v em{color:var(--terra);font-style:normal}
.stat .l{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:7px;letter-spacing:.02em}

/* ── product-showcase (light app mock in a browser frame) ── */
.win{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg)}
.win-bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 15px;background:var(--paper-deep);border-bottom:1px solid var(--line)}
.win-dot{width:11px;height:11px;border-radius:50%}
.win-url{margin-left:12px;flex:1;max-width:300px;height:22px;background:var(--cream);border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11px;color:var(--muted)}
.win-url svg{width:11px;height:11px;color:var(--green)}
/* placeholder flag overlay (remove when a real capture is dropped in) */
.is-placeholder{position:relative}
.is-placeholder::before{content:"Mockup";position:absolute;top:8px;right:8px;z-index:3;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);background:var(--amber-tint);border:1px solid rgba(176,122,22,.3);padding:2px 7px;border-radius:5px;opacity:.9}
.float{animation:pv-float 7s ease-in-out infinite;will-change:transform}
@keyframes pv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* light app mock interior (mirrors the refreshed light app UI) */
.appui{display:flex;min-height:380px;background:var(--cream)}
.appui-side{width:184px;flex-shrink:0;background:var(--paper);border-right:1px solid var(--line);padding:12px 10px;font-size:11px}
.appui-side .lg{display:flex;align-items:center;gap:7px;padding:4px 6px 12px}
.appui-side .lg .sq{width:24px;height:24px;border-radius:7px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.appui-side .lg .sq svg{width:14px;height:13px}
.appui-side .lg b{font-size:12px;color:var(--ink);font-weight:700}
.appui-side .club{display:flex;align-items:center;gap:8px;background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:7px 9px;margin-bottom:9px}
.appui-side .club .cr{width:24px;height:24px;border-radius:6px;background:var(--terra);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.appui-side .club .cn{font-size:10.5px;font-weight:700;color:var(--ink);line-height:1.2}
.appui-side .club .ct{font-size:8.5px;color:var(--muted)}
.appui-lbl{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px}
.appui-it{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;color:var(--ink-2);font-weight:500;margin-bottom:1px}
.appui-it svg{width:14px;height:14px;color:var(--muted);flex-shrink:0}
.appui-it.on{background:var(--terra-tint);color:var(--terra-dk);font-weight:600}
.appui-it.on svg{color:var(--terra)}
.appui-it .bdg{margin-left:auto;font-size:8px;font-weight:700;background:var(--terra);color:#fff;border-radius:10px;padding:1px 6px}
.appui-it .bdg.ai{background:var(--amber-tint);color:var(--amber)}
.appui-main{flex:1;min-width:0;padding:16px 18px}
.appui-banner{border-radius:13px;padding:16px 18px;background:linear-gradient(115deg,var(--ink) 0%,#1A2444 100%);color:#fff;margin-bottom:12px;position:relative;overflow:hidden}
.appui-banner .e{font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.appui-banner .n{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.05;margin:3px 0 6px}
.appui-banner .m{font-size:10px;color:rgba(255,255,255,.78);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.appui-banner .m .tag{background:rgba(255,255,255,.16);border-radius:20px;padding:2px 9px;font-weight:600}
.appui-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.appui-stats .s{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:8px 10px}
.appui-stats .s .v{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1}
.appui-stats .s .l{font-size:7px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:3px}
.appui-tile{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.appui-row{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:6px}
.appui-row .nm{flex:1;min-width:0;font-size:11.5px;font-weight:700;color:var(--ink)}
.appui-row .sub{font-size:9.5px;color:var(--muted)}
.appui-row .pill{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;flex-shrink:0;background:var(--blue-tint);color:var(--blue)}

/* ── split (showcase + copy) ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split.rev .split-copy{order:2}
.split-copy h2{margin-bottom:16px}
.split-copy .lead{margin-bottom:24px}
.checks{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 26px}
.checks li{display:flex;gap:11px;font-size:15px;color:var(--ink-2);line-height:1.5}
.checks li svg{width:20px;height:20px;color:var(--terra);flex-shrink:0;margin-top:1px}

/* ── who-it's-for band (asymmetric — not centred) ── */
.whofor{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px 60px;align-items:center}
.whofor-copy{max-width:440px}
.whofor-copy .lead{margin-top:16px}
.whofor-chips{display:flex;flex-wrap:wrap;gap:11px;align-content:center}
@media(max-width:860px){.whofor{grid-template-columns:1fr;gap:24px}.whofor-copy{max-width:none}}

/* ── pricing ── */
.ptable{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.tier{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.tier:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.tier.hot{border:2px solid var(--terra);box-shadow:0 30px 60px -34px rgba(201,79,40,.45)}
.tier-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--terra);color:#fff;padding:5px 14px;border-radius:20px;white-space:nowrap}
.tier-nm{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.tier-pr{font-family:var(--font-display);font-size:42px;font-weight:500;color:var(--ink);line-height:1;letter-spacing:-0.02em}
.tier-pr span{font-size:15px;color:var(--muted);font-family:var(--font-body)}
.tier-for{font-size:13px;color:var(--muted);margin:9px 0 18px;min-height:36px}
.tier-feats{list-style:none;display:flex;flex-direction:column;gap:9px;flex-grow:1;margin-bottom:22px;border-top:1px solid var(--line-soft);padding-top:18px}
.tier-feats li{font-size:13.5px;color:var(--ink-2);padding-left:24px;position:relative;line-height:1.45}
.tier-feats li svg{position:absolute;left:0;top:2px;width:15px;height:15px;color:var(--terra)}
.tier-feats li.hi{font-weight:600;color:var(--ink)}

/* ── FOOTER ── */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding:64px 24px 30px}
.footer-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
.footer-brand .fl{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand .fl .mk{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.footer-brand .fl .mk svg{width:20px;height:18px}
.footer-brand .fl b{font-family:var(--font-display);font-size:19px;color:#fff;font-weight:600}
.footer-brand p{font-size:13.5px;line-height:1.65;max-width:280px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:15px}
.footer-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.58);padding:5px 0;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-col a .badge{transform:scale(.85);transform-origin:left}
.footer-base{max-width:var(--maxw);margin:44px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)}
.footer-base a:hover{color:#fff}

/* ── big CTA band ── */
.cta-band{background:linear-gradient(160deg,var(--ink) 0%,#1A2342 100%);border-radius:var(--r-lg);padding:62px 40px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band h2 em{color:var(--terra-soft)}
.cta-band p{color:rgba(255,255,255,.72);max-width:480px;margin:0 auto 30px;font-weight:300}

/* ── responsive ── */
@media(max-width:980px){.fgrid{grid-template-columns:repeat(2,1fr)}.ptable{grid-template-columns:1fr;max-width:440px;margin:0 auto}.footer-top{grid-template-columns:1fr 1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:860px){
  .nav-right .nav-link,.nav-right .nav-item{display:none}
  .nav-burger{display:flex}.mobile-menu{display:block}
  .split,.split.rev{grid-template-columns:1fr;gap:34px}.split.rev .split-copy{order:0}
  .section{padding:64px 0}
}
@media(max-width:620px){
  .wrap,.wrap-wide{padding:0 18px}.nav{padding:0 18px}
  .fgrid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .stats{gap:18px 28px}
  .cta-band{padding:46px 24px}
  .section{padding:52px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}.float{animation:none}
  html{scroll-behavior:auto}
}