/* SparkMyName™ unified polish layer — adapted 2026-07-03 to the production design tokens.
   Loads AFTER each page's base stylesheet. Preserves approved palette, fonts, and display-line systems. */
:root{
  --smn-cream:#FFFFFF; --smn-paper:#FFFFFF; --smn-ink:#171410; --smn-muted:#3E3A32;
  --smn-gold:#A8802A; --smn-gold-dark:#7E6018; --smn-line:#ECE7DB;
  --smn-shadow:0 18px 50px rgba(46,34,12,.10); --smn-radius:18px; --smn-max:1180px;
  --smn-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --smn-serif:"Playfair Display",Georgia,serif;
}
body{background:var(--smn-cream);color:var(--smn-ink);font-family:var(--smn-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.display,.hero-title{font-family:var(--smn-serif);color:var(--smn-ink)}
h2{font-weight:700;line-height:1.08;letter-spacing:-.018em}
.eyebrow,.kicker,.section-kicker{color:var(--smn-gold-dark);font-family:var(--smn-body);font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.card,.panel,.smn-card{background:rgba(255,253,248,.92);border:1px solid var(--smn-line);border-radius:var(--smn-radius);box-shadow:var(--smn-shadow)}
img[src*="hero-sphere"]{border-radius:22px;box-shadow:0 24px 70px rgba(30,20,5,.14)}
.indGrid .indTile,.industry-tile,.sample-tile{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.featRow>*,.deliverables-grid>*,.package-grid>*{min-height:100%}
@media (max-width:760px){.eyebrow,.kicker,.section-kicker{letter-spacing:.14em}}

/* 2026-07-04 homepage reorder: industries as one compact mosaic of breadth */
@media(min-width:760px){.indGrid{grid-template-columns:repeat(5,1fr)!important;gap:10px!important}}
.indGrid .indTile{cursor:default}
.indGrid .indTile b{font-size:11.5px!important}
/* 2026-09-03 fix: below 760px, cinema.css's auto-fill minmax(205px,1fr) collapses to a single
   column — all 18 industry tiles stack full-width at aspect-ratio 4/3, adding roughly 7,500px
   of scroll to the mobile homepage on its own. Two columns keeps every tile legible while
   cutting that section's height by about half. */
@media(max-width:759px){.indGrid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
.indGrid .indTile b{font-size:10.5px!important}}
.sampleGridBtns{display:grid!important;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.sampleGridBtns{grid-template-columns:1fr}}

/* 2026-07-04 PM polish: hero why-line, package hierarchy, wide capture, aligned proof */
.whyLine{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.015em;color:#171410;margin:10px auto 0;max-width:88%}
.wygLine{font:800 13px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#7E6018;margin:12px 0 6px}
.pkgLede{max-width:80%!important;margin-left:auto!important;margin-right:auto!important;text-align:justify;text-align-last:center}
@media(min-width:1000px){.kitGrid.kitSix{grid-template-columns:repeat(4,1fr)!important;gap:16px!important}}
@media(min-width:700px) and (max-width:999px){.kitGrid.kitSix{grid-template-columns:repeat(2,1fr)!important}}
.procStrip .howRow{max-width:100%!important;width:100%}
.procStrip .wrapC{max-width:1160px!important}
.procStrip h2{font-size:clamp(30px,4vw,44px)}
.heroCapSec .wrapC{max-width:1160px!important}
.heroCapSec .heroStage,.heroCapSec .capCard{max-width:100%!important;width:100%!important}
.chipsRow{display:flex!important;width:100%;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-start}
@media(min-width:760px){.chipsRow .chip{flex:1;justify-content:center;text-align:center;display:inline-flex;align-items:center}}
/* 2026-09-03 fix: the three rules above (now removed) squashed every industry-tile photo down
   to a 96px sliver and hid its label — on the live site this meant only the top edge of each
   image painted, leaving most tiles looking like empty beige cards. Restoring cinema.css's
   original full-cover tile (image fills the card, label + gradient legible on top).
   2026-09-03 fix #2: the line below did the exact same thing to the three showroom preview
   cards (JetForce Clean / Charter Edge Consulting / AccidentAllies) — squashing photoCard to a
   96px sliver while its bottom-anchored label and "Open ↓" pill (cinema.css .photoCard b /
   .openHint, both position:absolute;bottom:17px) stayed sized for a full card, so on the live
   site the multi-line brand names and the pill overlapped into unreadable stacked text.
   Restoring cinema.css's own aspect-ratio:4/3 sizing fixes both the crushed photo and the
   overlapping text at once. */
.sampleGridBtns{margin-top:14px}
@media print{.whyLine{margin-top:6px}}

/* 2026-07-04 sub-hero mosaic: one 2K image, three live doors */
.mosaicWrap{position:relative;margin-top:26px;border-radius:26px;overflow:hidden;box-shadow:0 2px 4px rgba(43,33,10,.05),0 34px 80px -34px rgba(43,33,10,.35)}
.mosaicWrap img{display:block;width:100%;height:auto}
.mosBtn{position:absolute;bottom:0;width:33.2%;height:32.5%;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:0 0 3.2% 2.2%;text-align:left}
.mosBtn b{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(15px,2.1vw,27px);color:#fff;letter-spacing:-.015em;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.mosBtn span{margin-top:6px;font:800 clamp(9px,1vw,12.5px)/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#171410;background:rgba(255,255,255,.92);border-radius:999px;padding:.6em 1.1em}
.mosBtn:focus-visible{outline:3px solid #C6A035;outline-offset:-3px;border-radius:18px}
@media(max-width:640px){.mosBtn b{font-size:13px}.mosBtn span{display:none}}

/* 2026-07-04 hero restack + baked-title mosaic */
.heroStacked .wrapC{display:block!important;text-align:center}
.heroStacked .heroEd{max-width:900px;margin:0 auto}
.heroStacked .posLine{justify-content:center;margin-bottom:18px}
.heroStacked .heroStage{margin:6px auto 26px;max-width:1160px}
.heroStacked .heroBelow{margin-top:8px}
.heroStacked .heroCtaRow,.heroStacked .heroChips{justify-content:center}
#samples .mosaicWrap{margin-top:0}
.mosBtn{height:28.3%!important;padding-bottom:2.6%!important}

/* 2026-07-04 cinematic hero lines: globe-width, one piece */
.heroLine{max-width:1160px;margin:0 auto}
.heroLine img{display:block;width:100%;height:auto}
.heroStacked .heroEd{max-width:1160px}
.heroStacked .heroLine+.heroLine{margin-top:6px}
.heroStacked .heroBelow .heroLine{margin-bottom:10px}

/* 2026-07-04 THE WORDMARK: SparkMyName(tm) — CamelCase, editorial serif, gradient spark */
.brand,.brandC{text-transform:none!important;letter-spacing:-.022em!important;font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important;font-size:23px!important;gap:8px!important}
.brand em,.brandC em{font-style:normal!important;color:#A8802A!important}
.brand sup,.brandC sup{font-size:.4em!important;line-height:0;position:relative;top:-.85em;margin-left:1px;letter-spacing:0!important}
.brand .mk,.brandC .mk{font-size:21px!important;background:linear-gradient(180deg,#D8B95C,#C6A035 55%,#96721F);-webkit-background-clip:text;background-clip:text;color:transparent!important;transform:translateY(-1px)}
@media(max-width:560px){.brand,.brandC{font-size:19px!important}}

/* 2026-07-04 THE LOGO LAW v2: all-gold SparkMyName(tm), zero gaps, proud TM, living spark */
.brand,.brandC{gap:0!important}
.brand .mk,.brandC .mk{margin-right:9px}
.brand,.brandC,.brand em,.brandC em,.brandC em{color:transparent!important;background:linear-gradient(180deg,#D8B95C,#C6A035 52%,#96721F);-webkit-background-clip:text;background-clip:text}
.brand sup,.brandC sup{font-size:.62em!important;font-weight:800;top:-.62em;margin-left:2px;background:linear-gradient(180deg,#D8B95C,#96721F);-webkit-background-clip:text;background-clip:text;color:transparent!important}
@keyframes smnTwinkle{0%,100%{opacity:1;transform:translateY(-1px) scale(1)}50%{opacity:.55;transform:translateY(-1px) scale(.88) rotate(8deg)}}
.brand .mk,.brandC .mk{animation:smnTwinkle 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.brand .mk,.brandC .mk{animation:none}}
/* cinematic header bar */
.cinTop,header.top{background:linear-gradient(180deg,#FFFEFB,#FFFFFF)!important;border-bottom:1px solid transparent!important;border-image:linear-gradient(90deg,transparent,#E2CE96 30%,#C6A035 50%,#E2CE96 70%,transparent) 1!important;box-shadow:0 10px 30px -22px rgba(43,33,10,.35)}
/* tighten header-to-eyebrow breathing without bleed */
.heroCin{padding-top:26px!important}
.heroStacked .posLine,.heroStacked .heroEd:first-child{margin-bottom:12px}
.heroStacked .heroStage{margin-top:2px!important}

/* 2026-07-04 THE STORY PLATE: one image, three doors */
.storyPlate{position:relative;border-radius:26px;overflow:hidden}
.storyPlate .mosBtn{height:12.76%!important;padding-bottom:1.25%!important}
#storyBoards{max-width:1160px;margin:10px auto 0}

/* 2026-07-04 the living mark: the true favicon spark, twinkling everywhere */
.brand .mk,.brandC .mk{font-size:0!important;width:22px;height:22px;background:url(../favicon-v3.svg?v=3) center/contain no-repeat!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:transparent!important;display:inline-block}
@keyframes smnBreathe{0%,100%{opacity:1;transform:translateY(-1px) scale(1)}50%{opacity:.62;transform:translateY(-1px) scale(.9) rotate(10deg)}}
.brand .mk,.brandC .mk{animation:smnBreathe 3s ease-in-out infinite}
/* gentle light sweep across the story plate — GPU-cheap, motion-safe */
.storyPlate::after{content:'';position:absolute;top:0;left:-40%;width:34%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,244,214,.05) 45%,rgba(255,244,214,.09) 50%,rgba(255,244,214,.05) 55%,transparent);transform:skewX(-12deg);animation:smnSweep 9.5s ease-in-out infinite;pointer-events:none}
@keyframes smnSweep{0%,55%{left:-40%}90%,100%{left:120%}}
@media(prefers-reduced-motion:reduce){.brand .mk,.brandC .mk,.storyPlate::after{animation:none}}

/* 2026-07-04 FINAL LOOK: clean header, tight trust line, generous mic, category strip */
.trustLine{padding:26px 0 0;text-align:center}
.trustLine .eyebrow{margin:0}
.trustLine+.sec{padding-top:14px!important}
.heroCapSec{padding-top:14px!important}
.catStrip{padding-top:10px!important}
.catImg{display:block;width:100%;max-width:1160px;margin:18px auto 0;height:auto;border-radius:14px;box-shadow:0 22px 54px -26px rgba(43,33,10,.4)}
#micBtn{width:74px!important;height:74px!important}
.heroCin{padding-top:22px!important}

/* 2026-07-04 100% match: gold guarantee band + tap-to-speak */
.guarCard{background:linear-gradient(180deg,#C9A855,#B08E35)!important;border:0!important;border-radius:20px!important;color:#241B08!important;box-shadow:0 24px 60px -28px rgba(120,90,20,.55)}
.guarCard .eyebrow{color:#3D2E0C!important}
.guarCard h2,.guarCard .lede,.guarCard p{color:#241B08!important}
.guarCard a{color:#241B08!important;text-decoration:underline}
#micBtn{position:relative}
#micBtn::after{content:'Tap to speak';position:absolute;top:105%;left:50%;transform:translateX(-50%);font:700 11px/1 Inter,sans-serif;letter-spacing:.04em;color:#7E6018;white-space:nowrap}

/* 2026-07-04 exact-pixel sections */
.imgSec{padding-top:6px!important;padding-bottom:6px!important}
.secImg{display:block;width:100%;max-width:1160px;margin:0 auto;height:auto}
.imgWrap{position:relative;max-width:1160px;margin:0 auto}
.bandLink{position:absolute;bottom:4.5%;height:5.5%;display:block}

/* 2026-07-04 TIGHTEN: big gold trust header, gaps out everywhere */
.heroCin{padding-bottom:0!important}
.heroCin .heroStage{margin-bottom:0!important}
.trustLine{padding:14px 0 0!important;margin:0}
.trustLine .eyebrow{font-size:clamp(21px,2.5vw,33px)!important;font-weight:800!important;letter-spacing:.16em!important;color:#A8802A!important;line-height:1.25;max-width:1120px;margin:0 auto!important;text-indent:.16em}
.heroCapSec{padding-top:10px!important;padding-bottom:8px!important}
.heroCapSec .heroStage{margin-top:0!important}
.imgSec{padding-top:0!important;padding-bottom:0!important}
.catStrip{padding-top:0!important;padding-bottom:0!important}
.catStrip .eyebrow{margin-bottom:4px}
.catImg{margin-top:8px!important}
.capCard{padding-bottom:18px!important}
.capGuar{font-size:clamp(16px,1.7vw,21px)!important;font-weight:800!important;margin:14px 0 0!important}
.capGuar .tk{font-size:1.05em}
#guideLine:empty{display:none;margin:0}
.note{margin:16px auto 10px!important}
footer,.siteFoot{margin-top:8px!important}

/* 2026-07-04 box-2 exact: head outside, prompt lead, spark chips, spark CTA */
.capHead{max-width:1160px;margin:26px auto 14px}
.capHead .eyebrow{margin-bottom:6px}
.capH2{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.015em;color:#171410;margin:0 0 10px}
.capLede{font:500 16.5px/1.6 Inter,sans-serif;color:#5C5340;margin:0 auto;max-width:820px}
.chipsRow{flex-wrap:wrap}
.chipsLead{flex-basis:100%;font:600 13.5px/1 Inter,sans-serif;color:#6B6046;margin-bottom:10px}
.chipsRow .chip::before{content:'\2726';color:#A8802A;margin-right:7px;font-size:.85em}
#capCta{position:relative}
#capCta::after{content:'\2726';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:20px;color:#fff}
.capGuar{font-size:15px!important;font-weight:800!important}

/* 2026-07-04 FOUNDER EVENING PASS: crisp HTML trust bar, exact lede lines, prominent eyebrow */
.trustBar{background:#080400;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.6vw,34px);padding:20px 18px 24px;flex-wrap:wrap}
.trustBar span{display:inline-flex;align-items:center;gap:9px;font:800 clamp(10.5px,1.05vw,13px)/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#F3ECDD;white-space:nowrap}
.trustBar svg{width:17px;height:17px;color:#C6A035;flex:none}
.trustBar i{width:1px;height:15px;background:rgba(198,160,53,.45)}
@media(max-width:820px){.trustBar{gap:12px 18px;padding:16px 12px 20px}.trustBar i{display:none}}
.capLede{max-width:1120px!important}
.capHead .eyebrow{font-size:clamp(17px,1.9vw,24px)!important;font-weight:800!important;letter-spacing:.24em!important}

/* 2026-07-04 EXACT-MATCH FOOTER: six columns, social row, split fine print */
@media(min-width:961px){.footGridSix{grid-template-columns:1.55fr repeat(5,1fr)!important;gap:28px!important}}
.socRow{display:flex;gap:9px;margin-top:16px}
.soc{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--smn-line);border-radius:7px;color:#8A7A55;background:#fff}
.footFineRow{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;border-top:1px solid var(--smn-line);margin-top:34px;padding-top:20px;flex-wrap:wrap}
.footFineL{max-width:760px;margin:0!important;font-size:11.5px!important;line-height:1.6!important;color:#5C5340} /* CONTRAST FIX (2026-09-04): #8A8069 was 3.9:1 on white, fails WCAG AA; #5C5340 (cinema.css's own --ink3) is 7.6:1 */
.footFineL a{color:#5C5340;text-decoration:underline}
.footFineR{margin:0!important;font-size:12.5px!important;text-align:right;color:#5C5340;white-space:nowrap}
@media(max-width:760px){.footFineRow{flex-direction:column;align-items:flex-start}.footFineR{text-align:left;white-space:normal}}

/* 2026-07-04 AGENCY AT WORK: editorial transition block between proof and package */
.agencySec{padding-top:34px!important;padding-bottom:38px!important}
.agencyImg{border-radius:26px;box-shadow:0 3px 6px rgba(43,33,10,.06),0 34px 80px -32px rgba(43,33,10,.38)}
@media(max-width:640px){.agencySec{padding-top:22px!important;padding-bottom:24px!important}.agencyImg{border-radius:16px}}

/* 2026-07-04 CAPTURE REFINEMENT PASS — same content, elegant proportions.
   Flow: eyebrow -> headline -> support -> input -> chips -> benefits -> CTA */
.heroCapSec{padding-top:6px!important;padding-bottom:8px!important}
.capHead{margin:16px auto 8px!important}
.capHead .eyebrow{font-size:13.5px!important;font-weight:800!important;letter-spacing:.26em!important;margin-bottom:10px!important;color:#7E6018!important}
.capH2{font-size:clamp(27px,2.9vw,38px)!important;line-height:1.06!important;letter-spacing:-.014em;margin:0 auto 8px!important;max-width:680px}
.capLede{font-size:15.5px!important;line-height:1.55!important;max-width:1000px!important;color:#5C5340}
.heroStage .capCard{margin-top:14px!important;padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,28px) 16px!important}
/* integrated microphone: anchored to the input line, not floating mid-air */
.search{align-items:flex-start!important;padding:10px 14px 12px 16px!important}
.search textarea{min-height:138px!important}
#micBtn{align-self:flex-start!important;margin-top:10px;margin-right:6px}
#micBtn::after{letter-spacing:.05em}
/* calm, even chips */
.chipsRow{margin-top:12px!important;gap:8px!important}
.chipsLead{margin-bottom:8px!important;font-weight:600!important;color:#6B6046}
.chip{font-weight:600!important;padding:10px 14px!important}
/* quiet benefits row in support of the CTA */
.capAssure{margin:12px 0 2px!important;gap:6px 18px!important}
.capAssure li{font-size:13.5px!important;font-weight:600!important;color:#6B6046!important}
/* the CTA leads the lower half */
#capCta{margin-top:16px;font-size:16.5px!important;padding-top:17px!important;padding-bottom:17px!important}
.capGuar{font-size:13.5px!important;font-weight:700!important;margin:11px 0 0!important;color:#6B6046!important}

/* 2026-07-04 FINAL DRESS-UP: one design system, one rhythm, hero to footer */
/* unified corner language — every image plate speaks with the same radius */
.secImg{border-radius:18px}
.catImg{border-radius:18px!important}
@media(max-width:640px){.secImg,.catImg{border-radius:12px}}
/* consistent section rhythm: quiet, even breathing between every movement */
.imgSec{padding-top:14px!important;padding-bottom:14px!important}
.catStrip{padding-top:14px!important;padding-bottom:6px!important}
.heroCapSec{padding-bottom:14px!important}
/* examples row -> agency photo read as one proof movement, then a fuller pause into the package */
.agencySec{padding-top:10px!important;padding-bottom:30px!important}
/* one refined eyebrow voice everywhere on the page */
.catStrip .eyebrow{font-size:13.5px!important;font-weight:800!important;letter-spacing:.26em!important;color:#7E6018!important;margin-bottom:2px}
/* trademark note: quiet, elegant measure */
.note{font-size:13px!important;color:#5C5340!important;line-height:1.65;max-width:680px!important;margin:22px auto 12px!important} /* CONTRAST FIX (2026-09-04): #8A8069 was 3.9:1 on white, fails WCAG AA; #5C5340 (cinema.css's own --ink3) is 7.6:1 — this rule had overridden the design system's own compliant .note color */
/* mobile rhythm: proportional, never cramped, never gaping */
@media(max-width:640px){
  .imgSec{padding-top:8px!important;padding-bottom:8px!important}
  .agencySec{padding-top:6px!important;padding-bottom:18px!important}
  .capH2{font-size:25px!important}
  .capLede{font-size:14.5px!important}
  .heroStage .capCard{margin-top:10px!important}
  .capHead{margin-top:10px!important}
}

/* 2026-07-04 GLOBAL RESPONSIVE SYSTEM — every page, mobile first */
/* section labels: refined but present — they guide the story now */
.capHead .eyebrow,.catStrip .eyebrow{font-size:clamp(14.5px,1.55vw,17px)!important;letter-spacing:.24em!important;color:#6E5412!important;margin-bottom:12px!important}
.catStrip .eyebrow{margin-bottom:8px!important}
@media(max-width:640px){.capHead .eyebrow,.catStrip .eyebrow{font-size:13px!important;letter-spacing:.18em!important}}
/* one container system: no sideways scroll, ever */
html,body{overflow-x:hidden}
img,video{max-width:100%;height:auto}
p,li,td,.footFine{overflow-wrap:break-word}
/* tables (order summaries, sample reports) scroll gracefully on phones */
@media(max-width:640px){table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* inner-page heading scale on phones: present, never oversized */
@media(max-width:640px){
  main h1{font-size:clamp(26px,7.4vw,34px)!important;line-height:1.12!important}
  main h2:not(.capH2){font-size:clamp(20px,5.6vw,26px)!important;line-height:1.18!important}
  main p{line-height:1.6}
}
/* forms: iOS-safe input sizing and honest tap targets sitewide */
@media(max-width:640px){
  input,select,textarea{font-size:16px!important}
  .btn,button.btn,a.btn,.studioBtn,.chip{min-height:44px}
}
/* prose measure on text-heavy pages (legal, support, resources) */
main .wrap p,main .wrapC p{max-width:76ch}

/* 2026-07-04 EYEBROW CENTERING FIX — HOW IT WORKS sits dead-center over the headline */
.capHead{text-align:center!important}
.capHead .eyebrow,.catStrip .eyebrow{display:block!important;width:auto!important;max-width:none!important;float:none!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;text-indent:.24em!important;padding:0!important}
/* guarantee line centered beneath the CTA */
.capGuar{display:block!important;text-align:center!important;width:100%!important}

/* 2026-07-04 THE COMPLETE BRAND PACKAGE — 8 live category cards */
.pkgSec{padding:26px 0 34px!important}
.pkgSec .capHead{margin:0 auto 18px!important}
.pkgIntro{max-width:640px!important}
.pkgGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1160px;margin:0 auto}
.pkgCard{background:rgba(255,253,248,.92);border:1px solid var(--smn-line);border-radius:16px;box-shadow:0 2px 4px rgba(43,33,10,.04),0 18px 44px -26px rgba(43,33,10,.22);padding:22px 20px 18px;text-align:left}
.pkgIco{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,#FBF4E0,#F3E7C6);color:#A8802A;margin-bottom:12px}
.pkgIco svg{width:21px;height:21px}
.pkgCard b{display:block;font:800 12.5px/1 Inter,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#7E6018;margin:0 0 10px}
.pkgCard ul{list-style:none;margin:0;padding:0}
.pkgCard li{font:500 13.5px/1.5 Inter,sans-serif;color:#4A4234;padding:4px 0 4px 18px;position:relative}
.pkgCard li::before{content:'\2713';position:absolute;left:0;color:#A8802A;font-weight:800;font-size:.85em;top:6px}
.pkgCard li+li{border-top:1px solid rgba(236,231,219,.6)}
@media(max-width:1000px){.pkgGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .pkgGrid{grid-template-columns:1fr;gap:12px}
  .pkgCard{padding:18px 18px 14px}
  .pkgSec{padding:18px 0 24px!important}
}

/* 2026-07-04 MOBILE FLOW PASS — Galaxy Fold review: balance, size, rhythm */
/* live section labels above steps + examples (both sizes, one voice) */
.secLabel{display:block;text-align:center;font-size:clamp(15px,1.7vw,18px)!important;font-weight:800!important;letter-spacing:.22em!important;text-transform:uppercase;color:#6E5412!important;margin:0 0 12px!important;text-indent:.22em}
.catStrip .secLabel{margin-bottom:10px!important}
/* desktop keeps the wide strip; mobile gets the readable tile grid */
.catMob{display:none}
@media(max-width:640px){
  .catDesk{display:none}
  .catMob{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:100%}
  .catMob figure{margin:0}
  .catMob img{width:100%;height:auto;border-radius:10px;display:block}
  .catMob figcaption{font:700 10.5px/1.25 Inter,sans-serif;color:#3E3A32;text-align:center;margin-top:5px}
  /* chips: balanced 2x2, centered */
  .chipsRow{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .chipsLead{grid-column:1/-1;text-align:center;margin-bottom:2px!important}
  .chip{width:100%;justify-content:center;display:inline-flex;align-items:center;text-align:center;padding:11px 8px!important;font-size:13px!important}
  /* package: two columns, compact — half the scroll */
  .pkgGrid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .pkgCard{padding:14px 12px 10px!important;border-radius:13px}
  .pkgIco{width:30px;height:30px;border-radius:9px;margin-bottom:8px}
  .pkgIco svg{width:16px;height:16px}
  .pkgCard b{font-size:10.5px!important;letter-spacing:.1em!important;margin-bottom:6px!important}
  .pkgCard li{font-size:11.5px!important;line-height:1.4!important;padding:3px 0 3px 14px!important}
  .pkgCard li::before{top:4px;font-size:.8em}
  /* section labels louder on the phone */
  .secLabel{font-size:15px!important;letter-spacing:.16em!important;margin-bottom:9px!important}
  .capHead .eyebrow,.catStrip .eyebrow{font-size:15px!important;letter-spacing:.16em!important}
  /* tighten the vertical rhythm — the gaps Peter flagged */
  .imgSec{padding-top:5px!important;padding-bottom:5px!important}
  .catStrip{padding-top:6px!important;padding-bottom:4px!important}
  .agencySec{padding-top:5px!important;padding-bottom:10px!important}
  .pkgSec{padding:12px 0 18px!important}
  .heroCapSec{padding-bottom:8px!important}
  /* founder mobile composite: hotspots recalculated for the stacked layout */
  .blContact{left:9.5%!important;width:11%!important;bottom:4%!important;height:4.5%!important}
  .blRefund{left:21.5%!important;width:12%!important;bottom:4%!important;height:4.5%!important}
}

/* 2026-07-04 GUARANTEE PAIR — two checks, centered under Get My Brand */
.capGuar{display:flex!important;justify-content:center!important;align-items:center;gap:36px;flex-wrap:wrap}
.capGuar .gItem{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
@media(max-width:640px){.capGuar{gap:16px}.capGuar .gItem{white-space:normal}}

/* 2026-07-04 PACKAGE MEDALLIONS — black-and-gold jewelry icons, hero's own language */
.pkgIco2{display:block;width:44px;height:44px;margin-bottom:12px;border-radius:12px;box-shadow:0 8px 18px -8px rgba(43,33,10,.5)}
@media(max-width:640px){.pkgIco2{width:34px;height:34px;margin-bottom:8px;border-radius:9px}}

/* 2026-07-04 EVENING NOTES — founder live card, wide capture head, tight rhythm */
/* founder: full-width live card, readable personal serif */
.fSec{padding:12px 0 8px!important}
.fCard{display:flex;gap:34px;align-items:flex-start;background:rgba(255,253,248,.92);border:1px solid var(--smn-line);border-radius:18px;box-shadow:0 2px 4px rgba(43,33,10,.04),0 22px 54px -28px rgba(43,33,10,.24);padding:30px;max-width:1160px;margin:0 auto}
.fPhoto{flex:0 0 300px;width:300px;height:auto;border-radius:14px;display:block}
.fBody{flex:1;min-width:0}
.fEyebrow{font-size:13.5px!important;letter-spacing:.2em!important;color:#6E5412!important;margin:2px 0 12px!important;text-align:left!important}
.fQuote{margin:0;font:600 18.5px/1.62 'Playfair Display',Georgia,serif;font-style:normal;color:#241E12;letter-spacing:.002em}
.fStrong{font:700 15.5px/1.5 Inter,sans-serif;color:#171410;margin:16px 0 4px}
.fSig{font:500 14px/1.4 Inter,sans-serif;color:#6B6046;margin:0}
.gSec{padding-top:6px!important}
@media(max-width:760px){.fCard{flex-direction:column;gap:18px;padding:20px}.fPhoto{width:100%;flex:none;max-width:420px;margin:0 auto}.fQuote{font-size:16px}}
/* capture head: spans the page, everything tighter */
.capH2{max-width:none!important;font-size:clamp(30px,3.9vw,52px)!important}
.capLede{max-width:1160px!important;font-size:clamp(15.5px,1.55vw,18.5px)!important;line-height:1.5!important}
.capHead{margin:12px auto 6px!important}
.heroStage .capCard{margin-top:10px!important}
/* prompts lead centered above the chips */
.chipsLead{text-align:center!important;flex-basis:100%!important;width:100%}
/* the gold bar sits close under the benefits */
.capAssure{margin:10px 0 0!important}
#capCta{margin-top:10px!important}
.capCard{padding-bottom:14px!important}
/* section labels: dead-center, always */
.secLabel{width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;display:block!important;float:none!important}
/* white space out: proof flows tight into the package, band into the note */
.agencySec{padding-bottom:12px!important}
.pkgSec{padding:8px 0 22px!important}
.pkgSec .capHead{margin:0 auto 14px!important}
.catStrip{padding-top:4px!important}
.imgSec{padding-top:6px!important;padding-bottom:6px!important}
.note{margin:8px auto 8px!important}
@media(max-width:640px){.pkgSec{padding:8px 0 16px!important}.capH2{font-size:26px!important}.capLede{font-size:14.5px!important}}

/* ===== SMN A11Y LAYER (CO102): keyboard focus, reduced motion, touch targets ===== */
:focus-visible{outline:3px solid #9A6B2F;outline-offset:3px;border-radius:4px}
a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #9A6B2F;outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
@media (pointer:coarse){a,button,[role=button]{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}}
.smn-skip{position:absolute;left:-9999px;top:0;background:#0A1830;color:#fff;padding:12px 20px;z-index:9999;border-radius:0 0 8px 0;font:600 14px/1 Inter,sans-serif}
.smn-skip:focus{left:0}

/* ===== SMN LAYOUT ELEVATION (CO111): desktop breathing room, flush full-bleed hero, standard header ===== */
@media (min-width:1280px){.wrapC{max-width:1400px!important}}
@media (min-width:1750px){.wrapC{max-width:1520px!important}}
.cinTop .in{max-width:none!important;width:100%!important;padding:0 clamp(20px,2.6vw,44px)!important;display:flex!important;justify-content:space-between!important;align-items:center!important}
.cinTop .brand{font-size:clamp(22px,1.9vw,30px)!important}
.heroCin{padding-top:0!important;margin-top:0!important}
.heroCin .wrapC{max-width:none!important;padding:0!important}
.heroCin .heroEd{display:none!important}
.heroPlate{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;border-radius:0!important;overflow:hidden}
.heroPlate img{width:100%!important;height:auto!important;display:block!important;border-radius:0!important}
html,body{overflow-x:clip}

/* ===== SMN RESPONSIVE COMPOSITION (CO113): composed chapters, device-true ===== */
/* Header: intentional bar with breathing room, all devices */
.cinTop .in{padding-top:16px!important;padding-bottom:16px!important;gap:14px}
.cinNav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Opening promise: a real band framed like the hero */
#promiseBand{padding:clamp(34px,4.5vw,64px) clamp(20px,4vw,64px) clamp(22px,3vw,44px);text-align:center;background:linear-gradient(180deg,#FBF8F0,#F4EFE2)}
#promiseBand h1{margin:0}
/* Objection: full-width navy chapter beneath the hero */
#objectionBand{background:linear-gradient(180deg,#0A1830,#0D2244 60%,#0A1830);border-bottom:1px solid #1B3358;padding:clamp(44px,5.5vw,78px) 0!important}
#objectionBand h2{color:#EBE9B9!important}
#objectionBand p{color:#B9C3D6!important}
/* Capture chapter framing */
.heroCapSec{padding-top:clamp(40px,5vw,72px)!important;padding-bottom:clamp(36px,4.5vw,64px)!important}
/* Proof wall + grid: major-chapter width on big screens */
#premiereWall>div{max-width:min(1620px,94vw)!important}
#pmGrid{max-width:min(1620px,94vw);margin-left:auto;margin-right:auto}
/* Package / workspace / founder: same composed system */
.pkgSec,.fSec{padding-top:clamp(44px,5vw,76px)!important;padding-bottom:clamp(44px,5vw,76px)!important}
#workspace{background:linear-gradient(180deg,#0A1830,#0D2244 60%,#091529);padding:clamp(48px,5.5vw,80px) 0!important;border-top:3px solid #C6A035}
#workspace h2{color:#fff!important}
#workspace p{color:#B9C3D6!important}
#workspace .eyebrow{color:#C6A035!important}
#trustStrip{padding-bottom:clamp(30px,3.5vw,52px)!important}
#yourturn{padding:clamp(44px,5vw,72px) 0 clamp(56px,6vw,88px)!important}
/* Footer aligns to the same page system */
.cinFoot .in{max-width:1400px!important;padding-left:clamp(20px,2.6vw,44px)!important;padding-right:clamp(20px,2.6vw,44px)!important}
@media (min-width:1750px){.cinFoot .in{max-width:1520px!important}}
/* Tablet & phone: bands keep order, spacing scales via clamp; grids already fluid */
@media (max-width:768px){
  .cinTop .in{padding-top:12px!important;padding-bottom:12px!important}
  #promiseBand{padding-top:26px!important}
  .cinNav a{font-size:12.5px!important}
}

/* ===== SMN RHYTHM TUNING (CO114): continuous chapters, no cream deserts ===== */
/* top band stays attached to the hero on every breakpoint */
#promiseBand{padding-bottom:clamp(16px,2vw,30px)!important}
/* capture -> proof -> examples -> placeholder: one continuous run */
.heroCapSec{padding-bottom:clamp(22px,2.6vw,38px)!important}
#premiereWall{padding-top:clamp(40px,5vw,64px)!important;padding-bottom:clamp(40px,5vw,64px)!important}
#how{padding-top:clamp(26px,3vw,44px)!important;padding-bottom:clamp(22px,2.6vw,38px)!important}
#preview-reserved{padding-top:clamp(14px,1.8vw,26px)!important;padding-bottom:clamp(14px,1.8vw,26px)!important}
#preview-reserved>.wrapC{padding-top:26px!important;padding-bottom:26px!important}
/* package + workspace read as one working-product block */
.pkgSec{padding-top:clamp(30px,3.6vw,52px)!important;padding-bottom:clamp(22px,2.6vw,38px)!important}
#workspace{padding-top:clamp(40px,4.6vw,64px)!important;padding-bottom:clamp(40px,4.6vw,64px)!important}
/* founder + trust as one trust block */
.fSec{padding-bottom:clamp(10px,1.2vw,18px)!important}
#trustStrip{padding-top:0!important;padding-bottom:clamp(22px,2.6vw,36px)!important}
/* your turn + footer as the closing block */
#yourturn{padding-top:clamp(28px,3.2vw,46px)!important;padding-bottom:clamp(24px,2.8vw,40px)!important}
.cinFoot{margin-top:0!important}
/* mobile: keep the lower stack grouped, no voids */
@media (max-width:768px){
  #premiereWall,#workspace{padding-top:34px!important;padding-bottom:34px!important}
  #preview-reserved{padding-top:10px!important;padding-bottom:10px!important}
  #yourturn{padding-top:22px!important;padding-bottom:18px!important}
  .fSec{padding-bottom:8px!important}
}

/* ===== SMN DESKTOP WIDTH SYSTEM (CO115): one width, wide measures, no center squeeze ===== */
:root{--pageW:1400px}
@media (min-width:1750px){:root{--pageW:1520px}}
/* loosen narrow inner text measures inside major bands (desktop breathes, mobile unaffected) */
#promiseBand p{max-width:min(1160px,94%)!important;margin-left:auto!important;margin-right:auto!important}
#objectionBand .wrapC,#workspace .wrapC,#preview-reserved .wrapC,#yourturn .wrapC{max-width:var(--pageW)!important}
#objectionBand p,#workspace p{max-width:min(1120px,94%)!important;margin-left:auto!important;margin-right:auto!important}
#preview-reserved p{max-width:min(1040px,94%)!important;margin-left:auto!important;margin-right:auto!important}
.capHead{max-width:none!important}
.capHead .capLede{max-width:min(1100px,94%)!important;margin-left:auto!important;margin-right:auto!important}
/* capture card and founder card occupy confident widths */
.heroCapSec .capCard{max-width:min(1120px,100%)!important;margin-left:auto!important;margin-right:auto!important}
.fCard{max-width:min(1280px,100%)!important;margin-left:auto!important;margin-right:auto!important}
/* package grid stages its eight cards across the full system */
.pkgGrid{max-width:var(--pageW)!important;margin-left:auto!important;margin-right:auto!important;gap:clamp(14px,1.6vw,24px)!important}
/* examples chapter aligns to the system */
#how .wrapC{max-width:var(--pageW)!important}
#how img{width:100%!important;height:auto!important}

/* ===== SMN CINEMATIC FLOW (CO116): one continuous picture, stage-scale type, no dead air ===== */
/* Round 1+4: kill the dead air at the top; the story starts immediately */
.cinTop .in{padding-top:12px!important;padding-bottom:12px!important}
#promiseBand{padding:clamp(18px,2.2vw,34px) clamp(20px,4vw,64px) clamp(16px,2vw,30px)!important}
/* Round 5: the opening line performs across the whole stage */
#promiseBand h1{font-size:clamp(40px,5.6vw,92px)!important;line-height:1.06!important;letter-spacing:.005em;text-wrap:balance}
#promiseBand p{font-size:clamp(16px,1.35vw,20px)!important;line-height:1.55!important;text-wrap:balance}
/* Round 2: film cuts between dark chapters — gold rules echo the header bar */
#objectionBand{border-top:3px solid #C6A035}
/* Round 3: reading rhythm — bigger type, controlled measures, no run-on lines */
.capLede,#objectionBand p,#workspace p,#preview-reserved p{font-size:clamp(15.5px,1.22vw,19px)!important;line-height:1.68!important;text-wrap:pretty}
.capH2,#objectionBand h2,#workspace h2,#preview-reserved h2,#yourturn h2{font-size:clamp(28px,3.2vw,46px)!important;line-height:1.15!important;text-wrap:balance}
.eyebrow{letter-spacing:.22em!important}
/* Round 4: gap tightening through the middle of the film */
.heroCapSec{padding-top:clamp(26px,3vw,44px)!important}
#how{padding-top:clamp(20px,2.4vw,36px)!important}
#yourturn{padding-top:clamp(22px,2.6vw,38px)!important}
/* Round 6: pills and cards sit on the same visual beat */
#trustStrip .wrapC{gap:9px!important}
/* Round 7: phones — the same movie, one column, nothing crushed */
@media (max-width:768px){
  #promiseBand h1{font-size:clamp(34px,9.4vw,44px)!important}
  #promiseBand{padding-top:14px!important}
}

/* ===== SMN GOLD LOGIN PILL (CO121): the workspace login wears the gold capsule everywhere ===== */
.studioBtn{background:linear-gradient(180deg,#8A6D1F,#7E6018 55%,#6F5514)!important;color:#fff!important;
 font:800 13.5px/1 Inter,sans-serif!important;border-radius:999px!important;padding:12px 20px!important;
 text-decoration:none!important;display:inline-flex!important;align-items:center;gap:8px;
 box-shadow:0 10px 26px -10px rgba(198,160,53,.55);border:0!important;white-space:nowrap}
.studioBtn svg{stroke:#fff!important}

/* ===== SMN CINEMA WALL (CO122): 3 across on every device, image tiles ===== */
#pmGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(10px,1.4vw,20px)!important;max-width:min(1400px,96vw)!important;margin-left:auto;margin-right:auto}

/* ===== SMN CINE PREVIEW (CO124): wide, tall, agency-grade stage ===== */
#preview-reserved{padding-top:clamp(30px,3.4vw,52px)!important;padding-bottom:clamp(30px,3.4vw,52px)!important}
#preview-reserved>.wrapC{border:0!important;padding:0!important}
@media (max-width:640px){#cineStage{aspect-ratio:4/5!important;border-radius:14px!important}#cineVol{width:70px!important}}

/* ===== SMN MARQUEE (CO127): full-bleed cinematic theater band ===== */
#preview-reserved{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
 background:radial-gradient(130% 120% at 50% 0%,#0D2244 0%,#071328 55%,#050A16 100%)!important;
 border-top:3px solid #C6A035;border-bottom:3px solid #C6A035;
 padding:clamp(40px,4.8vw,72px) clamp(14px,2.5vw,40px)!important}
#preview-reserved .eyebrow{color:#C6A035!important}
#preview-reserved h2{color:#fff!important}
#preview-reserved .capHead p:not(.eyebrow){color:#B9C3D6!important}
#preview-reserved>.wrapC{max-width:min(1620px,94vw)!important}
#cineStage{max-width:min(1620px,94vw);margin:0 auto;border:1px solid #C6A035!important;
 box-shadow:0 0 0 1px rgba(198,160,53,.25),0 40px 110px -30px rgba(198,160,53,.28),0 30px 80px -30px rgba(0,0,0,.7)!important;border-radius:18px!important}

/* ===== SMN CINE CONTROLS v4 (CO130): discoverable, human ===== */
#cineBar{gap:14px!important;padding:12px 16px!important}
#cinePP,#cineRe,#cineMute,#cineExit{min-width:44px;min-height:44px}
video{cursor:pointer}
@media (max-width:640px){#cineKnob{width:22px!important;height:22px!important;transform:translateX(-11px)!important}}

/* ===== SMN ULTRAWIDE STAGE (CO131): big monitors get a big show ===== */
#promiseBand p{font-size:clamp(16px,1.05vw,24px)!important;max-width:min(74%,1720px)!important}
@media (min-width:1900px){
  .wrapC{max-width:1720px!important}
  .cinFoot .in{max-width:1720px!important}
  #premiereWall>div,#pmGrid,#preview-reserved>.wrapC,#cineStage{max-width:min(1840px,92vw)!important}
}

/* ===== SMN WIDESCREEN TRUE-UP (CO132): nothing lives at 1160 anymore ===== */
.catImg{max-width:100%!important}
.secImg{max-width:100%!important}
.imgWrap{max-width:100%!important}
.fCard{max-width:min(1560px,100%)!important}
.heroCapSec .capCard{max-width:min(1360px,100%)!important}
#promiseBand{padding-left:clamp(16px,2vw,40px)!important;padding-right:clamp(16px,2vw,40px)!important}

/* ===== SMN WIDE-MONITOR TUNE (CO132) ===== */
@media (min-width:1600px){
  .wrapC{max-width:1560px!important}
  .heroCapSec .capCard{max-width:min(1280px,100%)!important}
}
/* the 1-2-3 strip box spans its column instead of floating small */
#how .wrapC>div,#how .steps,#how .stepStrip{max-width:100%!important}
#how img.secImg{width:100%!important;height:auto!important}
#yourturn,#yourturn .wrapC{text-align:center!important}
#yourturn p,#yourturn h2{margin-left:auto!important;margin-right:auto!important}

/* 2026-09-03 cleanup: removed ~280 lines of CSS here (CO136 "SMN MIDNIGHT PRO" through
   CO166 "BRIGHT & TIGHT") that were entirely scoped under `body#mgHome` — a page id that
   does not exist anywhere on this site (checked: zero matches across every HTML file).
   That whole block was inert dead code from an earlier redesign iteration of the homepage
   that was never wired up (or was later abandoned) under a different body id. Removing it
   has no visual effect (confirmed via local Playwright screenshots before/after) — it only
   shrinks the file. If a real dark-mode/"blackout" homepage variant is wanted again, it
   should be rebuilt fresh against the current markup rather than resurrected from here. */
/* GLOBAL SPECS (2026-09-02, device test): on phones the header stacks — the wordmark keeps its full
   width on the first row ("SparkMy" used to be all that survived), the buttons sit on the row below. */
@media(max-width:600px){
  .cinTop .in{flex-wrap:wrap!important;row-gap:8px!important}
  .cinTop .brand,.cinTop .brandC{flex:0 0 auto!important;min-width:max-content!important;max-width:100%!important}
  .cinTop .cinNav{flex:1 1 100%!important;justify-content:flex-start!important}
}

@media (hover:hover) and (pointer:fine){
.indGrid .indTile:hover,.industry-tile:hover,.sample-tile:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(37,25,8,.16);filter:saturate(1.04)}
.mosBtn:hover span{background:#fff}
.studioBtn:hover{filter:brightness(1.06)}
#cineTrack:hover #cineKnob{transform:translateX(-9px) scale(1.15)}
}