/* ==========================================================================
   adwali BRAND ALIGNMENT LAYER  (loads last, overrides off-brand decoration)
   Brings the v8 layout into line with Brand Guidelines v1.0:
   Poppins only, clean geometry, palette-true borders, no text clipping.
   ========================================================================== */

:root{
  --ink:#17110F; --paper:#FAF4EA; --paper2:#F2E8D8;
  --pink:#FF2D6B; --pinkdeep:#D91752; --soft:#5A4F49; --gold:#FFB800;
  --lineink:#17110F; --lineink2:rgba(23,17,15,.18);
  --border:2px solid var(--ink);
  --r:14px;
}

/* 1) POPPINS ONLY, retire the handwriting font everywhere ---------------------------------- */
.hand,.note,.pname,.ptag,.subline,.qm,.mtag,.chkick,.chstrip,.horn,.den,.cap,
.fill,.fin,.n,.aw-badge,.ibk,.badge,.fn-sign,.cc-or,.fcap,.fsign,.fwho span,
.slip-head,.dateline,.psub,.metricW,.wtag,.rd,.exc,.mast em,.mast span{
  font-family:'Poppins',-apple-system,'Segoe UI',sans-serif !important;
}
.fsign,.fn-sign{font-weight:800;font-style:normal}
.slip-head span,.mtag,.ibk,.aw-badge,.badge{font-weight:600;letter-spacing:.02em}

/* 2) FLATTEN the wonky sketch geometry -------------------------------------- */
.aw-card,.aw-why-cell,.aw-val,.aw-contact-card,.aw-svc-card,.aw-panel,.aw-method,
.aw-price-card,.aw-step,.aw-role,.ccard,.ccard.pb,.ccard.pb2,.aw-stat,
.slip,.pop-slip,.fnote,.fpic img,.clip,.bub,.shot,.aw-logo-cell,.aw-map,
.aw-map iframe,.card,.tik,.bwin,.ph,.photo,.fn-photo,.aw-subpill,.aw-tab,.aw-chip,
.slipok,.pop-card{
  border-radius:var(--r) !important;
  transform:none !important;
}
/* kill decorative rotation on every reveal/element */
.rv,.tilt,.stat,.clip,.bub,.shot,.aw-stat,.slip,.fnote,.fpic,.pop-slip,
.aw-card,.aw-price-card,.ccard,.mtag,.aw-badge,.badge,.fcap,.chip{transform:none !important}
[style*="rotate"]{transform:none !important}
[style*="--r:"]{--r:14px}

/* 3) CLEAN, PALETTE-TRUE BORDERS -------------------------------------------- */
.aw-card,.aw-why-cell,.aw-val,.aw-svc-card,.aw-panel,.aw-method,.aw-price-card,
.aw-step,.aw-role,.ccard,.aw-stat,.slip,.pop-slip,.fnote,.card,.aw-logo-cell,
.bwin,.ph,.aw-contact-card,.clip,.bub,.shot{
  border:var(--border) !important;
}
.fpic img,.photo,.fn-photo{border:2px solid var(--ink) !important}
.aw-ci,.subs a,.aw-subpill,.aw-tab,.aw-chip,.feat,.post-meta,.bar{
  border-color:var(--lineink2) !important;
}
/* tape strips + pins + doodles: off-brand, hide them */
.aw-card::before,.aw-why-cell::before,.aw-val::before,.fnote::before,
.slip-body .freesk,.tapeh,.idoodle,.btail,.den,.horn{display:none !important}

/* 4) NO TEXT CLIPPING, anywhere --------------------------------------------- */
.h1,.h2,.ih1,.ih2,.kicker,.chap,.phl,.hero-h1,h1,h2,h3,h4{
  overflow:visible !important; white-space:normal !important;
  word-break:normal; overflow-wrap:anywhere; padding-bottom:.06em;
}
.phl{display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.h1,.ih1{line-height:1.05 !important}
.h2{line-height:1.1 !important}
main,.wrap,section,.pagebody,.pagebody>section{overflow-x:clip}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,5vw,40px);width:100%}

/* the marigold highlight: brand-correct, behind the word, one per headline */
.phl{background:linear-gradient(180deg,transparent 62%,var(--gold) 62% 92%,transparent 92%);
     padding:0 .04em; border-radius:0}

/* 5) SECTION RHYTHM: even, aligned, generous -------------------------------- */
.pagebody>section{padding:clamp(40px,6vw,72px) 0 !important;border:0 !important;background:none !important}
.pagebody>section:nth-of-type(even){background:var(--paper2) !important}
.ihero{padding:clamp(120px,16vw,168px) 0 clamp(30px,5vw,52px) !important}
.isec,.fsec{padding:clamp(36px,5vw,64px) 0 !important}
.sec{padding:clamp(40px,6vw,72px) 0}

/* 6) CARD GRIDS: equal heights, clean gaps ---------------------------------- */
.aw-cards,.aw-why-grid,.aw-values,.aw-related-grid,.aw-panel-grid,.aw-price-grid,
.work-grid,.rev-grid,.blog-grid,.con-cards{
  display:grid;gap:clamp(14px,2vw,20px);align-items:stretch
}
.work-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rev-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.blog-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.aw-card,.aw-why-cell,.aw-val,.aw-price-card,.clip,.bub,.shot{
  height:100%;display:flex;flex-direction:column
}
.aw-card,.aw-why-cell,.aw-val,.aw-svc-card,.aw-panel,.aw-price-card,.ccard,
.clip,.bub,.aw-stat{padding:clamp(18px,2.4vw,24px) !important;box-shadow:none !important}
.aw-card:hover,.aw-why-cell:hover,.aw-val:hover,.aw-svc-card:hover,.ccard:hover,
.clip:hover,.bub:hover,.shot:hover{
  transform:translateY(-3px) !important;box-shadow:4px 6px 0 rgba(23,17,15,.1) !important
}

/* 7) BUTTONS: clean pill, brand ink border ---------------------------------- */
.btn{border-radius:999px !important;transform:none !important}
.btn.prime{background:var(--ink);color:var(--paper);border:2px solid var(--ink)}
.btn:not(.prime){background:transparent;border:2px solid var(--ink);color:var(--ink)}

/* 8) MOBILE POLISH ---------------------------------------------------------- */
@media (max-width:860px){
  .idoodle{display:none !important}
  .fgrid,.con-grid,.aw-contact-grid,.aw-intro-grid,.aw-panel-grid{grid-template-columns:1fr !important;gap:20px}
  .ih1{font-size:clamp(2rem,8.5vw,2.9rem) !important}
  .h2{font-size:clamp(1.7rem,7vw,2.4rem) !important}
  .hero-ctas{flex-wrap:wrap;gap:10px}
  .hero-ctas .btn{width:100%;justify-content:center}
  .wrap{padding-inline:18px}
  .work-grid,.rev-grid,.blog-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ih1{font-size:clamp(1.8rem,9vw,2.4rem) !important}
  .crumb{font-size:.78rem}
  .pop-card{max-width:100%}
}

/* ========== MEGA MENU ========== */
.mega-item{position:static;display:inline-flex;align-items:center}
.mega-trigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.mega-trigger .chev{width:11px;height:7px;transition:transform .2s}
.mega-item.open .mega-trigger .chev{transform:rotate(180deg)}
.mega-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-top:2px solid var(--ink);
  box-shadow:0 18px 40px rgba(23,17,15,.14);
  padding:clamp(20px,3vw,34px) 0;z-index:1200;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.mega-item.open .mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{max-width:1200px;margin:0 auto;padding:0 clamp(18px,5vw,40px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.4vw,32px)}
.mega-col{display:flex;flex-direction:column;gap:9px}
.mega-col a{color:var(--soft);text-decoration:none;font-size:.9rem;font-weight:500;padding:2px 0;transition:color .15s}
.mega-col a:hover{color:var(--pinkdeep)}
.mega-col a.mega-h{color:var(--ink);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.mega-col a.mega-h:first-child{margin-top:0}
.mega-col a.mega-all{color:var(--pinkdeep);font-weight:700;margin-top:8px}
@media (max-width:960px){
  .mega-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border-top:0;padding:0 0 8px;display:none;background:none}
  .mega-item.open .mega-panel{display:block}
  .mega-grid{grid-template-columns:1fr 1fr;gap:12px;padding:8px 0 0}
  .mega-col a{font-size:.86rem}
  .mega-trigger{width:100%;justify-content:space-between}
}

/* footer text contrast (WCAG AA on dark ink) */
footer, footer p, footer .f-links a, footer a, footer span,
footer [style*="--chalk2"], footer [style*="chalk2"]{color:rgba(250,244,234,.82) !important}
footer .f-links a:hover, footer a:hover{color:#fff !important}
footer h4, footer .f-h, footer strong, footer b{color:rgba(250,244,234,.95) !important}

/* sr-only utility (visually hidden, screen-reader accessible) */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* LCP fix: above-the-fold hero paints immediately, no reveal delay */
.hero .rv, .hero-h1, .hero .lead, .mast .rv, section:first-of-type .lead.rv,
h1.hero-h1, .hero .h1, .hero p.lead{opacity:1 !important;transform:none !important;transition:none !important}

/* ===== CLS prevention (Cumulative Layout Shift) ===== */
/* reserve intrinsic space for any image so loading doesn't push content */
img{max-width:100%}
img[width][height]{height:auto}
.fpic img,.founder-grid img,.fframe img{aspect-ratio:520/620;height:auto;width:100%;max-width:340px}
/* reveal uses transform only (composited, no layout shift); ensure no margin animation */
.rv{will-change:opacity,transform}
/* stabilise font swap: keep line-height identical across fallback + Poppins */
body{font-synthesis:none}
/* the marigold highlight background must not change box size */
.phl{box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* dynamic sections (blog/case/review) reserve min-height so late DB content doesn't jump */
.work-grid,.rev-grid,.blog-grid{min-height:1px}