/* shared-skin.css — the wordmark, button system and hero skin, verbatim, for every live
   page. Link this in <head> right after tokens.css.
   Added 2026-09-21 after booking.html's hero silently rendered the retired dark-violet
   design (chalk-white text, gold top bar, no accent word) while its own <style> block
   used all the right token NAMES (--hero-chalk, --hero-gold) — just locally redefined to
   the old colours. Nothing that greps for hardcoded literals can catch that, because
   nothing was hardcoded; each page's copy-pasted rule block was free to redefine what its
   own tokens meant. These rules now exist in exactly one place, so a page can't diverge —
   there's nothing left to copy-paste.
   A live page's own <style> keeps only what's genuinely page-specific: hero LAYOUT
   (.wrap/.herogrid grid-template, padding, any graphics cluster or widget panel) and its
   own copy/markup. See docs/BRAND-GUIDELINE.md for the human-readable spec, CLAUDE.md for
   the rule that a page never redeclares a selector defined here, and
   scripts/audit-brand-consistency.sh section 1b for the mechanical check. */

/* Wordmark: same display face, normal tracking, across every lockup (2026-09-20). */
.wm{font-size:clamp(20px,2vw,26px);letter-spacing:-.05em;line-height:var(--lh-tight);display:inline-flex;align-items:center;white-space:nowrap}
.wm .txt{display:inline-flex;align-items:center;line-height:var(--lh-tight)}
.wm .brandmark{width:.74em;height:.74em;flex:none;display:inline-block;border:none;padding:0;margin:0 .01em;object-fit:contain}
.wm .sub{font-family:var(--font-body);font-weight:var(--fw-semibold);letter-spacing:-.01em;font-size:var(--t-body);color:var(--mute);margin-left:12px}
.wm,.wm *{font-family:var(--font-display) !important;letter-spacing:normal !important}

/* Buttons: violet is the action colour, orange is brand accent only (2026-09-20). */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--btn-grad);color:var(--btn-ink);font-weight:var(--fw-bold);padding:16px 22px;border-radius:var(--r-md);line-height:var(--lh-tight);white-space:nowrap;box-shadow:var(--shadow-float-sm);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-float-md);filter:brightness(1.05)}
.btn.big{padding:22px 30px;font-size:var(--t-lead)}
.section:not(.cream-field) .btn{background:var(--btn-on-dark);color:var(--btn-on-dark-ink)}
.section:not(.cream-field) .btn:hover{filter:brightness(.96)}
.nav .tel .ic{color:var(--cream)}
.nav .btn{padding:10px 18px;background:var(--btn-flat);color:var(--btn-ink);box-shadow:none}
.nav .btn:hover{background:var(--btn-flat-hover)}

/* Hero skin: colour scheme, accent word, eyebrow, lead and credibility line. Light cream
   field, dark ink text, one orange-gradient accent word — replaced a dark violet field
   with chalk-white text on 2026-09-20; booking.html still had the old one until
   2026-09-21. Padding/grid-template stay in each page's own <style> — genuine layout,
   not skin. */
.hero{
  --hero-ink:var(--violet-deep); --hero-chalk:var(--ink); --hero-gold:var(--orange); --hero-gold-deep:var(--orange-deep);
  --hero-chalk-70:var(--ink-mute); --hero-line:var(--ink-line);
  --mute:var(--hero-chalk-70); --line:var(--hero-line); --line-soft:var(--ink-faint); --ghost:var(--ink-ghost);
  position:relative;color:var(--hero-chalk);
  background:
    radial-gradient(900px 600px at 78% 38%, var(--violet-wash), transparent 62%),
    radial-gradient(520px 420px at 88% 92%, var(--orange-wash), transparent 65%),
    var(--cream);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7vw),0 100%);
  overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--ink-faint) 1px,transparent 1px),linear-gradient(90deg,var(--ink-faint) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(70% 70% at 68% 45%,#000 30%,transparent 100%)}
.hero a:focus-visible,.hero button:focus-visible{outline-color:var(--hero-gold)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--hero-chalk-70)}
.hero .eyebrow::before{content:"";width:8px;height:8px;background:var(--hero-gold);flex:none}
/* sentence case, not the page's uppercase display default: dropped 2026-09-20 so the hero H1
   inherits .disp's default uppercase like every section title. Don't reintroduce it per page. */
.hero h1{color:var(--hero-chalk)}
.hero h1 span{display:block}
.hero h1 .l1,.hero h1 .l2,.hero h1 .l3{margin-left:0;font-size:inherit;letter-spacing:inherit}
.hero h1 .cyc{display:inline-block;position:relative;width:7.4em;height:1em;overflow:visible;vertical-align:top;perspective:400px}
.hero h1 .cyc span{display:inline-block;position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform-origin:50% 100%;
  background:linear-gradient(92deg,var(--accent-a) 0%,var(--accent-b) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:cycword 7.5s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * -1.5s)}
.hero h1 .cyc::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.09em;border-radius:99px;background:linear-gradient(90deg,var(--accent-line),transparent 70%);opacity:.6}
.hero h1 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero h1 .hlacc{display:inline-block;position:relative;background:linear-gradient(92deg,var(--accent-a) 0%,var(--accent-b) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .hlacc::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.09em;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent-line),transparent 70%);opacity:.6}
@keyframes cycword{
  0%{opacity:0;transform:translateY(.5em) rotateX(-65deg);filter:blur(5px)}
  4%,17%{opacity:1;transform:none;filter:blur(0)}
  21%,100%{opacity:0;transform:translateY(-.45em) rotateX(55deg);filter:blur(5px)}
}
.hero .under{margin-top:clamp(24px,2.6vw,34px)}
.hero .lead{max-width:44ch;color:var(--hero-chalk-70);margin-bottom:clamp(24px,2.6vw,34px)}
.hero .actions{display:flex;gap:16px 32px;flex-wrap:wrap;align-items:center}
.hero .btn{background:var(--btn-flat);color:var(--btn-ink);box-shadow:none;border-radius:var(--r-sm);padding:20px 28px;font-size:var(--t-body);transition:background .15s ease,transform .15s ease}
.hero .btn:hover{background:var(--btn-flat-hover);transform:none;box-shadow:none;filter:none}
.hero .btn:active{transform:translateY(1px)}
.hero .actions .ghost{border:0;padding:8px 2px;box-shadow:none;font-weight:var(--fw-semibold);color:var(--hero-chalk);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--hero-line);transition:text-decoration-color .2s}
.hero .actions .ghost:hover{border-color:transparent;text-decoration-color:var(--hero-gold)}
.hero .cred{margin-top:22px;color:var(--hero-chalk-70)}
.hero .cred b{color:var(--hero-chalk)}
.hero .cred a{color:var(--hero-chalk);font-weight:var(--fw-bold);white-space:nowrap;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hero-line)}
.hero .cred a:hover{text-decoration-color:var(--hero-gold)}

/* Section titles (FAQ/pivot/closing/about-copy headings): sourced verbatim from
   homepage-established-v6.html, added 2026-09-22 after Odri flagged the workshop page's FAQ
   heading ("The things people ask before booking.") rendering in the wrong title treatment.
   Cause: every live page has the base ".disp{font-family:var(--font-display);...}" rule (the
   big Poppins hero treatment), but v6 also has a second, more specific rule that downgrades a
   SECTION heading's ".disp" back to the body font at a smaller size — neither zoho-partner.html
   nor speed-to-lead-workshop.html had ever carried that second rule, so their own section
   headings (anything inside .head/.shead/.pivot/.closing/.about .copy) were rendering with the
   big hero treatment instead of the correct, smaller section-title treatment. Single source now;
   a page's own <style> should never redeclare these selectors.
   Correction, same day: the first version of the ".out" override below reset colour/background
   but not "-webkit-text-stroke". v6's own base ".out{color:var(--mute)}" has no stroke, so v6 was
   fine — but zoho-partner.html/booking.html/build-it-in-10.html/speed-to-lead-workshop.html all
   have a DIFFERENT base ".out{color:transparent;-webkit-text-stroke:2px var(--cream)}" (the hero-
   style outline-text look). On those pages the override left the 2px stroke active underneath the
   new solid fill colour, so every accent line inside a .head/.shead/.pivot/.closing section —
   including zoho-partner.html's own real page title ("Melbourne, working Australia-wide.") —
   rendered as doubled/ghosted text. Added "-webkit-text-stroke:0" to actually cancel it. */
/* Base .disp uppercase treatment: also sourced verbatim from v6, added 2026-09-22 after Odri
   pointed out the workshop page's hero headline was missing v6's uppercase display treatment.
   v6 had this as a second, unscoped ".disp" rule (text-transform:uppercase) that every other live
   page never carried — so their hero h1s (and anything else using .disp, e.g. big stat numbers)
   rendered in plain sentence case instead of v6's actual look. h2/h3/.pq are exempted right below,
   same as v6 always did (section headings read as statements, not posters). */
.disp{text-transform:uppercase;letter-spacing:-.01em}
h2.disp,h3.disp,.pq.disp,.head h1.disp{text-transform:none}
.head h1.disp,.head h2.disp,.shead h2.disp,.pivot .pq.disp,.closing h2.disp,.about .copy h2.disp{font-family:inherit;font-weight:var(--fw-semibold);font-variation-settings:normal;letter-spacing:0;line-height:var(--lh-heading);font-size:var(--t-h3)}
@media (max-width:768px){
  .head h1.disp,.head h2.disp,.shead h2.disp,.pivot .pq.disp,.closing h2.disp,.about .copy h2.disp{font-size:var(--t-lead)}
}
.head h1 .l2,.head h2 .l2,.shead h2 .l2,.about .copy h2.disp .l2{margin-left:0}
.head h1 .out,.head h2 .out,.shead h2 .out,.pivot .pq .out,.closing h2 .out,.about .copy h2.disp .out{background:none;-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:currentColor;color:var(--mute);-webkit-text-stroke:0}

/* Card recipe (Family A item card), added 2026-09-22. "border:2px solid var(--ink)" +
   "box-shadow:var(--shadow-card-lift)" was hand-retyped in ~15 different component rules across
   v6/build-it-in-10/speed-to-lead-workshop/zoho-partner before this — the exact root cause of the
   workshop page's rounded-borderless "SaaS card" drift Odri caught (proofcard/pricecard had lost the
   border and gained a radius no other card has). Single source now: a card element carries
   class="card <component>" in markup; the component class supplies its own padding/background/layout
   only, never border or shadow. .faqitem[open] (identical in 4 files) folded in here too. */
.card{border:2px solid var(--ink);box-shadow:var(--shadow-card-lift)}
.faqitem[open]{border:2px solid var(--ink);margin:var(--sp-2) -2px;box-shadow:var(--shadow-card-lift)}

/* Mobile nav sheet: moved here 2026-09-22, sourced verbatim from homepage-established-v6.html —
   the page Odri named as THE standing source ("every page stemming out for Essor website will
   always refer to the version six homepage"). Before this, three pages independently drifted:
   systems/strategy/case-studies had their own older single-column variant (no in-page-anchor tier,
   hardcoded font-weight numbers instead of tokens); zoho-partner.html had a from-scratch
   acquisition.com-style redesign that was never reconciled back. Those three pages are archived now,
   but the drift was real and is exactly the failure this file's own header comment already warns
   about. Nothing left to copy-paste: every live page reads this one definition. A page's own
   <style> should only ever add genuinely page-specific nav content (extra .m-inpage anchors that
   only exist on that page, etc), never redeclare these selectors. */
@media (max-width:1260px){
  body.nav-open{overflow:hidden}
  body.nav-open .top{z-index:56}
  /* nav.nav (not .nav): a page's own unconditional desktop ".nav ul{display:flex}" rule has the
     same specificity and loads after this file, so it silently wins on mobile at equal specificity
     unless this rule outranks it explicitly. Found 2026-09-22 after the nav-CSS consolidation left
     the mobile sheet rendering as a flat inline row instead of the full-screen sheet on v6 and
     zoho-partner.html. */
  nav.nav ul{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto) 1fr;column-gap:var(--sp-3);row-gap:0;counter-reset:mnav;position:fixed;left:0;right:0;top:var(--header-h);bottom:0;padding:var(--sp-4) var(--gut) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));overflow-y:auto;background:radial-gradient(70% 45% at 100% 0,var(--violet-strong),transparent),var(--ink);visibility:hidden;opacity:0;transform:translateY(calc(-1 * var(--sp-3)));transition:opacity var(--dur-med) var(--ease-out-strong),transform var(--dur-med) var(--ease-out-strong),visibility 0s linear var(--dur-med)}
  .nav ul::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--sp-1);background:var(--orb-grad)}
  .nav.open ul{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav ul li{grid-column:1 / -1;opacity:0;translate:0 var(--sp-3);transition:opacity var(--dur-med) ease,translate var(--dur-med) var(--ease-out-strong)}
  .nav.open ul li{opacity:1;translate:none;transition-delay:calc(var(--i) * var(--dur-stagger))}
  .nav ul li:nth-child(1){--i:1}.nav ul li:nth-child(2){--i:2}.nav ul li:nth-child(3){--i:3}.nav ul li:nth-child(4){--i:4}
  .nav ul li:nth-child(5){--i:5}.nav ul li:nth-child(6){--i:5}.nav ul li:nth-child(7){--i:6}
  .nav ul li.m-page + li.m-page{border-top:1px solid var(--line-soft)}
  .nav ul li.m-page a{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--t-h3);line-height:var(--lh-heading);letter-spacing:var(--ls-tight);text-transform:none;color:var(--cream)}
  .nav ul li.m-page a::before{content:counter(mnav,decimal-leading-zero);counter-increment:mnav;flex:none;min-width:var(--sp-6);font-size:var(--t-label);letter-spacing:var(--ls-label);color:var(--orange)}
  .nav ul li.m-page a::after,.nav ul li.m-inpage a::after{content:"";position:static;flex:none;width:var(--sp-3);height:var(--sp-3);margin:0 var(--sp-1) 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;background:none;color:var(--ghost);transform:rotate(-45deg);transition:color var(--dur-fast) ease,translate var(--dur-fast) var(--ease-out-strong)}
  .nav ul li.m-page a:hover::after,.nav ul li.m-page a:active::after{color:var(--orange);translate:var(--sp-1) 0}
  .nav ul li.m-inpage{grid-column:auto;margin-top:var(--sp-5)}
  .nav ul li.m-inpage a{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t-body);font-weight:var(--fw-bold);letter-spacing:var(--ls-body);text-transform:none;color:var(--mute);transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
  .nav ul li.m-inpage a::after{width:var(--sp-2);height:var(--sp-2);margin:0 0 var(--sp-1);transform:rotate(45deg)}
  .nav ul li.m-inpage a:hover,.nav ul li.m-inpage a:active{color:var(--cream);border-color:var(--cream)}
  .nav ul li.m-inpage a:hover::after,.nav ul li.m-inpage a:active::after{color:var(--cream)}
  .nav.open li.m-card{display:grid;gap:var(--sp-4);align-self:end;margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--ink-2);box-shadow:var(--shadow-card-dark)}
  .nav ul .m-tel{display:inline-flex;align-items:center;gap:var(--sp-3);justify-self:start;font-weight:var(--fw-bold);font-size:var(--t-body);letter-spacing:var(--ls-body);text-transform:none;color:var(--cream)}
  .nav ul .m-tel .ic{color:var(--orange)}
  .nav ul .m-card .btn{justify-content:center;padding:var(--sp-4) var(--sp-5);font-size:var(--t-body);letter-spacing:var(--ls-body);text-transform:none;background:var(--btn-flat);color:var(--btn-ink);box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .nav ul,.nav.open ul,.nav ul li,.nav.open ul li,.nav ul li.m-page a::after,.nav ul li.m-inpage a,.nav ul li.m-inpage a::after,.menu-btn{transition:none}
  .nav ul li.m-page a:hover::after,.nav ul li.m-page a:active::after{translate:none}
}
