/* =====================================================================
   STITCH VARIATION: "Ask Fides Institutional" design system (Google Stitch)
   Paper & Ink type and surfaces: charcoal #111827 on off-white #F9FAFB,
   Playfair Display headlines, Hanken Grotesk body, 1px #E5E7EB lines,
   4px corners, dark pill buttons. Photos, screens and video stay in full
   colour, set on soft Stitch tints (#d6e0f1 slate, #f9debf parchment).
   ===================================================================== */
:root{color-scheme:light;
  --canvas:#F9FAFB; --surface-white:#FFFFFF; --ink:#111827; --on-surface:#191c1d;
  --muted:#4B5563; --text-muted:#6B7280; --line:#E5E7EB; --chip:#F3F4F6;
  --slate-tint:#d6e0f1; --slate-fixed:#dce2f7; --parchment:#f9debf; --parchment-soft:#fbf3e8;
  --bg:var(--canvas); --surface:#FFFFFF; --navy:#111827; --blue:#111827; --link:#111827;
  --band:var(--canvas); --band-2:#FFFFFF; --band-fg:#111827; --band-muted:#4B5563;
  --tint:#F3F4F6; --tint-2:#E5E7EB;
  --shadow:none; --overlay-shadow:0 10px 15px -3px rgba(0,0,0,.05);
  --f-serif:"Playfair Display","Iowan Old Style",Georgia,serif;
  --f-display:"Playfair Display","Iowan Old Style",Georgia,serif;
  --f-body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --max:1280px;
  --logo-op:.6; --logo-f:grayscale(1)}

body{background:var(--canvas);color:var(--on-surface);font:400 1rem/1.55 var(--f-body)}
body::before{background:var(--canvas)}
::selection{background:#111827;color:#fff}

/* type scale */
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.5rem,5.4vw,4.5rem);font-weight:700;line-height:1.08;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:600;line-height:1.2;letter-spacing:-.01em}
h3{font-size:1.4rem;font-weight:600;line-height:1.3;letter-spacing:0}
h1 em,h2 em,.band h1 em,.vhero h1 em{font-style:italic;font-weight:500;color:var(--ink)}
.lede,.band .lede{font-size:1.125rem;line-height:1.6;color:var(--muted)}
.eyebrow,.band .eyebrow,.vhero .eyebrow,.amb-panel .eyebrow,.label{font:600 .75rem/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
a{color:var(--ink)}
:focus-visible{outline:2px solid #111827;outline-offset:3px}

/* buttons */
.btn{font:500 .9375rem/1 var(--f-body);letter-spacing:.01em;border-radius:9999px;padding:.95em 1.5em;border-width:1px}
.btn-primary,.btn-primary:hover{background:#111827;color:#fff;border-color:#111827;box-shadow:none}
.btn-primary:hover{background:#000}
.btn-ghost,.band .btn-ghost{background:transparent;color:#111827;border:1px solid var(--line)}
.btn-ghost:hover{background:#fff;border-color:#111827}
.btn-light{background:#fff;color:#111827;border-color:#fff}

/* header */
.site-header,body:not(.home) .site-header{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav,.home .site-header.scrolled .nav,body:not(.home) .nav{background:transparent;border-color:transparent;box-shadow:none}
.nav-links > li > a,.dd-btn,.nav .login{color:var(--muted);font:600 .75rem/1.4 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.nav-links > li > a:hover,.dd-btn:hover,.dd-btn[aria-expanded="true"],.nav .login:hover{color:#111827;background:transparent}
.nav-links > li > a[aria-current="page"],.dd-btn.is-cur{color:#111827;background:transparent;box-shadow:inset 0 -1px 0 #111827;border-radius:0}
.dd{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:var(--overlay-shadow)}
.dd-ico{background:var(--slate-fixed);color:#111827;border-radius:4px}
.dd-item{border-radius:4px}
.dd-item:hover,.dd-item[aria-current="page"]{background:var(--canvas)}
.dd-item b{font-family:var(--f-body);color:#111827;text-transform:none;letter-spacing:0}
.dd-item small{text-transform:none;letter-spacing:0}
.menu-btn{background:#fff;border:1px solid var(--line);border-radius:4px}
.menu-btn .bars i{background:#111827}
@media (max-width:1060px){
  .nav-links{background:#fff;border:1px solid var(--line);box-shadow:var(--overlay-shadow);border-radius:4px}
  .dd{background:var(--canvas);box-shadow:none}}

/* ---------- text-only heroes: no images, no video ---------- */
.shero,.vhero.shero{position:relative;display:block;min-height:0;background:var(--canvas);color:var(--ink);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.shero::before,.page-hero.shero-page::before,.plat-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(17,24,39,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(17,24,39,.055) 1px,transparent 1px);
  background-size:48px 48px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 30% 20%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 80% 90% at 30% 20%,#000 25%,transparent 100%)}
.vhero.shero .wrap{padding-block:clamp(96px,13vw,152px) clamp(56px,7vw,88px)}
.vhero.shero .vhero-copy{max-width:980px;gap:28px;padding-top:0}
.vhero.shero h1{font-size:clamp(2.75rem,6.6vw,5.5rem);line-height:1.04}
.vhero.shero .lede{max-width:60ch;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--muted)}
.hero-ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(48px,6vw,80px);border-top:1px solid #111827}
.hero-ledger div{padding:18px 24px 0 0;border-right:1px solid var(--line);margin-right:24px}
.hero-ledger div:last-child{border-right:0;margin-right:0}
.hero-ledger b{display:block;font:600 .75rem/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.hero-ledger span{display:block;font:500 1.0625rem/1.4 var(--f-display);color:#111827}
@media (max-width:760px){.hero-ledger{grid-template-columns:1fr 1fr;row-gap:20px}.hero-ledger div:nth-child(2){border-right:0;margin-right:0}}

.page-hero.shero-page,.plat-hero{position:relative;background:var(--canvas)!important;color:var(--ink);border-bottom:1px solid var(--line);isolation:isolate;overflow:hidden}
.page-hero.shero-page .wrap{padding-block:clamp(96px,12vw,144px) clamp(48px,6vw,72px)!important}
.page-hero.shero-page .hero-copy,.page-hero.shero-page .sec-head{max-width:860px}
.page-hero.shero-page h1{font-size:clamp(2.4rem,5vw,4rem);color:#111827}
.page-hero.shero-page .lede{color:var(--muted);max-width:60ch}

/* ---------- colour media bands, directly under each hero ---------- */
/* Home: the bright hero film, framed like a document on a slate mat */
.film-band{padding-block:clamp(32px,5vw,56px) clamp(56px,7vw,96px);background:linear-gradient(180deg,var(--canvas) 0 50%,#fff 50% 100%);border-bottom:1px solid var(--line)}
.film-frame{position:relative;border:1px solid var(--line);border-radius:6px;background:#fff;padding:8px;box-shadow:16px 16px 0 -1px var(--slate-tint)}
.film-band .vhero-media,.film-band .vhero-media{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:clamp(240px,46vw,600px)!important;margin:0!important;object-fit:cover;border-radius:3px;z-index:auto;-webkit-mask-image:none!important;mask-image:none!important;max-width:none}
.film-band .vplay{position:absolute;top:auto;bottom:24px;right:24px;background:rgba(255,255,255,.92);color:#111827;border:1px solid var(--line);border-radius:9999px;font:600 .75rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:10px 16px}
.film-band .vplay:hover{border-color:#111827}
@media (max-width:700px){.film-frame{box-shadow:8px 8px 0 -1px var(--slate-tint)}.film-band .vplay{bottom:16px;right:16px}}
/* Inner pages: the page photo, wide, on an offset parchment mat */
.photo-strip{padding-block:clamp(32px,5vw,56px) clamp(56px,7vw,88px);background:linear-gradient(180deg,var(--canvas) 0 45%,#fff 45% 100%);border-bottom:1px solid var(--line)}
.ps-frame{margin:0;position:relative;border:1px solid var(--line);border-radius:6px;background:#fff;padding:8px;box-shadow:-16px 16px 0 -1px var(--parchment)}
.ps-img{width:100%;height:clamp(220px,38vw,520px);object-fit:cover;object-position:center 35%;border-radius:3px;max-width:none}
@media (max-width:700px){.ps-frame{box-shadow:-8px 8px 0 -1px var(--parchment)}}

/* sections and bands: flat canvas or white with hairlines */
.band{background:var(--canvas);color:var(--ink)}
.sec-sky{background:#fff}
.sec-stone{background:var(--parchment-soft)}
.cta-band{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:12px 12px 0 -1px var(--slate-tint)}
.strip{background:#fff;border-block:1px solid var(--line)}

/* cards: white, 1px border, 4px, no shadow */
.card,.band .card,.aud-card,.ncard,.value,.tcard,.pcard,.form-card,.contact-card{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:none}
.ncard:hover,.aud-card:hover{box-shadow:none;border-color:#111827}
.band .ico,.trust .ico,.ico{background:var(--slate-fixed);color:#111827;border-radius:4px}
.avatar{background:var(--parchment);color:#111827;font-family:var(--f-display)}
.nbadge{box-shadow:none;border:1px solid var(--line)}
.ncover{background:var(--slate-fixed)}
.aud-card.stone,.demo-frame.stone{background:var(--parchment-soft)}
.aud-card.is-on,.demo-frame.blue{background:#eef2fb}

/* chips and tabs */
.chip,.tag,.pill{border-radius:2px}
.pr-tab{border-radius:4px}
.pr-tab[aria-selected="true"]{background:#111827;border-color:#111827;color:#fff}
.feat-item button{font-family:var(--f-display)}
.feat-item.on button{color:#111827}

/* product screens: full colour on thin frames, tinted mats */
.pshot,.shot{border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 2px rgba(17,24,39,.04);background:#fff}
.pshot-bar{background:var(--canvas);border-bottom:1px solid var(--line)}
.demo-frame,.inset{border-radius:4px;box-shadow:none}
.demo-frame{background:#eef2fb}

/* inputs */
input,select,textarea{font:400 1rem/1.5 var(--f-body);border:1px solid var(--line)!important;border-radius:4px!important;background:#fff;box-shadow:none!important}
input:focus,select:focus,textarea:focus{outline:none;border-color:#111827!important}

/* walkthrough video */
.promo-frame{border:1px solid var(--line);border-radius:6px;box-shadow:16px 16px 0 -1px var(--slate-tint);background:#fff}
.promo-play .pill{background:#111827;color:#fff;border-radius:9999px}
.promo-play .dot{background:#fff;color:#111827}

/* footer */
.cf{background:var(--canvas);border-top:1px solid var(--line);color:var(--muted)}
.cf h3{font:600 .75rem/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.cf a{color:var(--muted)}
.cf a:hover{color:#111827}
.cf-news{background:#111827;box-shadow:none;border-radius:4px}
.cf-news h3,.cf-news p{color:#fff}
.cf-bar{background:var(--canvas);border-top:1px solid var(--line)}
.cf-social a{background:#fff;border:1px solid var(--line);color:#111827}
.cf-social a:hover{background:#111827;color:#fff}

@media (prefers-reduced-motion:reduce){.vhero.shero{background:var(--canvas)}}

/* home header: solid paper bar from the start (the hero is text only now) */
.home .site-header,.home .site-header.scrolled{position:sticky;top:0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* platform: text-only hero, its product screen sits in the band below */
.plat-hero .wrap{display:block!important;padding-block:clamp(96px,12vw,144px) clamp(48px,6vw,72px)!important}
.plat-hero-copy{max-width:860px}
.shot-strip .ps-frame{box-shadow:16px 16px 0 -1px var(--slate-tint)}
.shot-strip .pshot{border:0;box-shadow:none}
.plat-hero-copy{display:grid;gap:24px}.plat-hero-copy .hero-cta{margin-top:4px}

/* ---- round 3: centred Stitch heroes ---- */
.vhero.shero .vhero-copy,.page-hero.shero-page .hero-copy,.page-hero.shero-page .sec-head,.plat-hero-copy{margin-inline:auto;text-align:center;justify-items:center}
.vhero.shero .vhero-copy,.page-hero.shero-page .hero-copy,.plat-hero-copy{display:grid}
.vhero.shero .hero-cta,.page-hero.shero-page .hero-cta,.plat-hero-copy .hero-cta{justify-content:center}
.vhero.shero .lede,.page-hero.shero-page .lede,.plat-hero .lede{margin-inline:auto}
.vhero.shero h1,.page-hero.shero-page h1,.plat-hero h1{max-width:20ch;margin-inline:auto}
.hero-ledger{max-width:1080px;margin-inline:auto;text-align:center}
.hero-ledger div{padding:18px 12px 0}
.hero-ledger div:last-child{padding-right:12px}
.shero::before,.page-hero.shero-page::before,.plat-hero::before{-webkit-mask-image:radial-gradient(ellipse 70% 85% at 50% 30%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 70% 85% at 50% 30%,#000 25%,transparent 100%)}

/* ---- image bands carry a caption card ---- */
.ps-frame,.film-frame{position:relative}
.ps-cap{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);max-width:min(460px,calc(100% - 40px));display:grid;gap:8px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:4px;padding:22px 26px;box-shadow:var(--overlay-shadow);z-index:2}
.ps-k{font:600 .6875rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.ps-cap strong{font:600 clamp(1.25rem,2vw,1.6rem)/1.2 var(--f-display);color:#111827}
.ps-s{font-size:.9375rem;line-height:1.5;color:var(--muted)}
.shot-strip .ps-cap{left:auto;right:clamp(20px,3vw,40px)}
@media (max-width:700px){
  .ps-cap{position:relative;left:auto!important;right:auto!important;bottom:auto;max-width:none;margin:8px 0 0;box-shadow:none;border:0;padding:16px 8px 8px;background:transparent}
}

/* ---- team: no cut-out frame, photo blends into the card ---- */
.team-photo .person{background:#F3F4F6;border:0;border-radius:6px;box-shadow:none}
.team-photo .person img{aspect-ratio:1/1;object-position:50% 55%;-webkit-mask-image:radial-gradient(ellipse 95% 100% at 50% 30%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 95% 100% at 50% 30%,#000 72%,transparent 100%)}
.team-photo .person div{padding:4px 24px 26px}
.shot-strip .pshot img{max-height:620px;object-fit:cover;object-position:top}

/* tighter hero top: one rhythm step below the header */
.vhero.shero,.page-hero.shero-page,.plat-hero{padding-block:0!important}
.vhero.shero .wrap{padding-block:clamp(56px,6vw,80px) clamp(48px,6vw,72px)!important}
.page-hero.shero-page .wrap,.plat-hero .wrap{padding-block:clamp(56px,6vw,80px) clamp(48px,6vw,72px)!important}
.vhero.shero .vhero-copy{gap:22px}
.hero-ledger{margin-top:clamp(40px,5vw,56px)}