/* =========================================================
   v7: hero + nav matched to the Cardinal reference
   full-bleed hero, invisible nav, one-line headline, corner badge clusters
   ========================================================= */

/* ---- hero canvas ---- */
.hero{min-height:100vh;min-height:100svh;padding:0;display:flex;flex-direction:column;justify-content:center}
.hero__bg{inset:0;border-radius:0}
.hero-cream .hero__bg{background:#FFF8ED}
.hero-cream .glow,.hero-cream .hero__bg .grain{display:none}
.hero-light:not(.hero-cream) .glow{opacity:.6}
.grid{background-size:170px 170px;background-position:center top;-webkit-mask:none;mask:none}
.hero-light .grid{background-image:linear-gradient(rgba(120,86,40,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(120,86,40,.075) 1px,transparent 1px)}
html:not(.hero-light) .grid{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}

/* ---- copy sizes (reference: 16 / 62 / 19 / 17) ---- */
.hero__copy{max-width:none;padding:96px var(--gut) 40px}
.backed{font-size:16px;gap:12px}
.backed .crest-member{height:40px}
.hero h1{font-size:clamp(34px,4.3vw,62px);line-height:1.08;letter-spacing:-.032em;margin-top:22px;max-width:none;white-space:nowrap}
.hero h1 br{display:none}
.hero h1 .ul{margin-left:.24em}
.scribble{bottom:-.24em;height:.3em}
.hero__sub{margin-top:30px;font-size:clamp(16px,1.25vw,19px);line-height:1.3;max-width:620px;color:#4B4B4B}
.hero-light .hero__sub{color:#4B4B4B}
html:not(.hero-light) .hero__sub{color:rgba(232,240,250,.74)}
.hero__cta{margin-top:30px;gap:14px}
.hero__cta .btn{height:42px;padding:0 14px;border-radius:6px;font-size:17px;font-weight:400;letter-spacing:-.01em;box-shadow:none}
.hero-light .hero .btn--light{background:#0A1324;color:#fff;box-shadow:none}
.hero-light .hero .btn--light:hover{background:#1c2638}
.hero-light .hero .btn--ghost{background:transparent;color:#0A1324;border:1px solid #0A1324}
.hero-light .hero .btn--ghost:hover{background:rgba(10,19,36,.04)}
.hero__cta{flex-direction:row-reverse}

/* ---- nav: same colour as the hero, no chrome ---- */
.nav{top:0;padding:0}
.nav__cap,.nav:not(.is-light) .nav__cap,
.hero-cream .nav:not(.is-light) .nav__cap,
.hero-light:not(.hero-cream) .nav:not(.is-light) .nav__cap,
html:not(.hero-light) .nav:not(.is-light) .nav__cap{
  max-width:none;height:84px;margin:0;padding:0 clamp(20px,6vw,96px);border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;gap:0}
.hero-cream .nav:not(.is-light) .nav__cap{background:#FFF8ED;color:#0A1324}
.hero-light:not(.hero-cream) .nav:not(.is-light) .nav__cap{background:#fff;color:#0A1324}
html:not(.hero-light) .nav:not(.is-light) .nav__cap{background:#06122A;color:#fff}
.nav.is-light .nav__cap{background:rgba(246,245,241,.94);color:#0A1324;border-bottom:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{font-size:24px;font-weight:500;letter-spacing:-.03em;gap:10px}
.brand img{width:22px;height:auto}
.nav__links{margin-left:30px;gap:2px;font-size:18px}
.nav__links a{padding:6px 10px;opacity:1;color:#6E6A64;border-radius:6px}
html:not(.hero-light) .nav:not(.is-light) .nav__links a{color:rgba(232,240,250,.7)}
.nav__links a:hover{color:inherit}
.nav .eye{margin:0 0 0 auto;width:38px;height:38px;border:0!important;background:transparent!important;border-radius:8px;color:inherit;opacity:.75}
.nav .eye:hover{opacity:1;background:rgba(10,19,36,.05)!important}
.nav .eye+.eye{margin-left:4px}
.nav .badges-t[aria-pressed="true"]{color:var(--accent);background:transparent!important;opacity:1}
.btn--nav,.nav:not(.is-light) .btn--nav,.hero-light .nav:not(.is-light) .btn--nav{margin-left:16px;height:42px;padding:0 14px;border-radius:6px;font-size:17px;font-weight:400;background:#0A1324;color:#fff}
html:not(.hero-light) .nav:not(.is-light) .btn--nav{background:#fff;color:#0A1324}
.mnav{margin:0 12px}

/* ---- corner badge clusters (reference positions) ---- */
.certs{position:absolute;inset:0;pointer-events:none;z-index:1}
.certs>*{position:absolute;pointer-events:auto;transition:opacity .5s ease,scale .6s cubic-bezier(.2,.8,.2,1),rotate .35s ease}
.cg{display:flex;gap:14px;align-items:flex-end}
.cg img{height:104px;width:auto;transition:translate .25s}
.cg:hover img{translate:0 -3px}
.cg--tl{left:12%;top:20%}
.cg--tr{right:12%;top:20%}
.note{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;padding:12px;border-radius:8px;background:#fff;border:1px solid rgba(10,19,36,.1);box-shadow:0 2px 0 rgba(10,19,36,.06),0 16px 30px -18px rgba(10,19,36,.35);rotate:var(--r)}
.note img{width:118px;height:118px}
.note:hover{rotate:0deg;scale:1.04;z-index:3}
.note--a{--r:-4deg;left:12%;bottom:14%}
.note--b{--r:3deg;left:calc(12% + 118px);bottom:7%;z-index:2}
.charter{right:calc(10% + 170px);bottom:9%}
.charter img{width:128px;height:128px;border-radius:50%;box-shadow:0 16px 30px -18px rgba(10,19,36,.4)}
.note--g2{--r:5deg;right:10%;bottom:16%;gap:4px;text-align:center}
.note--g2 .g2{width:36px;height:36px;font-size:13px;margin:0 0 4px}
.note--g2 b{font-size:28px;letter-spacing:-.03em;line-height:1}
.note--g2 b small{font-size:14px;color:var(--muted);font-weight:500}
.note--g2 .stars{margin:2px 0;font-size:12px;gap:2px}
.note__l{font-size:12.5px;color:var(--muted)}

/* toggle */
.hero .certs>*{opacity:0;scale:.92;pointer-events:none}
.badges-on .hero .certs>*{opacity:1;scale:1;pointer-events:auto}
.badges-on .hero .note--b{transition-delay:.05s}.badges-on .hero .charter{transition-delay:.1s}.badges-on .hero .note--g2{transition-delay:.15s}.badges-on .hero .cg--tr{transition-delay:.05s}

/* dark hero: CREST colour badges need a light ground (CREST rule) */
html:not(.hero-light) .cg{background:#fff;padding:10px 12px;border-radius:10px}

@media (max-width:1180px){
  .hero h1{white-space:normal}
  .hero h1 .ul{margin-left:0}
  html:not(.badges-on) .hero .certs{display:none}
  .certs{position:relative;inset:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;padding:8px var(--gut) 64px}
  .certs>*{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .cg img{height:84px}
  .note{width:120px;height:120px;--r:0deg}
  .note img{width:92px;height:92px}
  .charter img{width:104px;height:104px}
}
@media (max-width:860px){
  .nav__cap,.nav:not(.is-light) .nav__cap,.hero-cream .nav:not(.is-light) .nav__cap,.hero-light:not(.hero-cream) .nav:not(.is-light) .nav__cap,html:not(.hero-light) .nav:not(.is-light) .nav__cap{height:64px;padding:0 20px}
  .brand{font-size:20px}
}
@media (max-width:640px){
  .hero__copy{padding:96px 20px 28px}
  .hero h1{font-size:36px;line-height:1.1}
  .hero__cta{flex-direction:column-reverse;align-items:stretch}
  .certs{gap:12px}
  .cg img{height:68px}
  .cg{gap:8px}
  .note{width:96px;height:96px;padding:8px}
  .note img{width:76px;height:76px}
  .charter img{width:84px;height:84px}
  .note--g2 b{font-size:20px}.note--g2 .stars,.note__l{display:none}
}

/* reviews: pin only the content height (top set by JS) */
.ycx--pin .ycx__pin{position:sticky;height:auto;padding-top:0;display:flex;flex-direction:column;gap:clamp(24px,4vh,44px)}
.yc{padding-top:clamp(88px,10vw,136px);padding-bottom:clamp(88px,10vw,136px)}
.yc__list{transition:transform .55s cubic-bezier(.2,.8,.2,1)!important}
.yc__list li{transition:opacity .4s ease!important}
.ycx--pin .yc__names{height:min(400px,46vh)}
.hero h1 .ul{margin-left:0}
@media (max-width:640px){.hero__cta .btn{height:48px;font-size:16px}}

/* CREST accreditation row under the CTAs (always visible) */
.accred2{display:inline-flex;justify-content:center;align-items:flex-end;gap:22px;margin-top:40px}
.accred2 img{height:84px;width:auto;transition:translate .25s}
.accred2:hover img{translate:0 -3px}
html:not(.hero-light) .accred2{background:#fff;padding:14px 22px;border-radius:12px}
@media (max-width:640px){.accred2{gap:10px;margin-top:32px}.accred2 img{height:62px}}

/* headline back on two lines */
.hero h1{white-space:normal;font-size:clamp(38px,5vw,72px);line-height:1.06}
.hero h1 br{display:inline}
.backed .crest-member{height:52px}

/* proof boxes: icon tile + label, one for CREST, one for G2 */
.proofs{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.pbox{display:inline-flex;align-items:stretch;height:46px;border:1px solid #2B3340;border-radius:2px;background:transparent;transition:background .2s,transform .2s}
.pbox:hover{background:rgba(10,19,36,.04);transform:translateY(-1px)}
.pbox__ic{display:grid;place-items:center;width:46px;flex:none;border-right:1px solid #2B3340}
.pbox__ic--crest{background:#fff}
.pbox__ic--crest img{height:34px!important;width:auto;display:block!important}
.pbox__ic--g2{background:#FF492C;color:#fff;font-weight:600;font-size:16px;letter-spacing:-.02em}
.pbox__t{display:flex;align-items:center;padding:0 18px;font:400 15px/1 ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;letter-spacing:.02em;color:#4A5568;white-space:nowrap}
html:not(.hero-light) .pbox{border-color:rgba(255,255,255,.35)}
html:not(.hero-light) .pbox__ic{border-color:rgba(255,255,255,.35)}
html:not(.hero-light) .pbox__t{color:rgba(232,240,250,.8)}
html:not(.hero-light) .pbox:hover{background:rgba(255,255,255,.06)}
.hero h1{margin-top:30px}
@media (max-width:640px){.pbox{height:42px}.pbox__ic{width:42px}.pbox__t{font-size:13px;padding:0 12px}}

/* smaller proof boxes */
.proofs{gap:10px}
.pbox{height:36px}
.pbox__ic{width:36px}
.pbox__ic--crest img{height:26px!important}
.pbox__ic--g2{font-size:13px}
.pbox__t{font-size:12.5px;padding:0 13px}
@media (max-width:640px){.pbox{height:34px}.pbox__ic{width:34px}.pbox__t{font-size:12px;padding:0 11px}}

/* proof boxes, one step smaller */
.proofs{gap:8px}
.pbox{height:28px}
.pbox__ic{width:28px}
.pbox__ic--crest img{height:20px!important}
.pbox__ic--g2{font-size:10.5px}
.pbox__t{font-size:11px;padding:0 10px;letter-spacing:.01em}
@media (max-width:640px){.pbox{height:28px}.pbox__ic{width:28px}.pbox__t{font-size:11px;padding:0 9px}}

/* whole page uses the hero colour */
:root{--page:#FFF8ED}
.hero-cream body,.hero-cream .sec:not(.sec--dark),.hero-cream .sec--tint,.hero-cream .clients,.hero-cream .yc,.hero-cream .hack{background:var(--page)}
.hero-light:not(.hero-cream) body,.hero-light:not(.hero-cream) .sec--tint,.hero-light:not(.hero-cream) .hack{background:#fff}
.hero-cream .nav.is-light .nav__cap{background:rgba(255,248,237,.94);border-bottom-color:rgba(120,86,40,.12)}
.hero-cream .tabs{background:#F3EADB}
.hero-cream .line{border-color:rgba(120,86,40,.12)}
.hero-cream .card,.hero-cream .rev,.hero-cream .svc__item,.hero-cream .yc__tile,.hero-cream .yc__card,.hero-cream .note{border-color:rgba(120,86,40,.13)}
.hero-cream .chain,.hero-cream .mini{background:#FBF4E8;border-color:rgba(120,86,40,.1)}
.hero-cream .yc__card.is-soon{background:repeating-linear-gradient(135deg,#FFFBF4 0 12px,#FBF3E5 12px 24px)}

/* reviews: drop the small labels around the cards */
.yc__head .eyebrow,.yc__cap,.yc__under{display:none}