/* ============================================================
   SECOND STAR BALLOONS — site.css
   Palette: client brand guide (Oct 2026) five-color system.
   Type: Fraunces + Work Sans (approved demo). See build plan, Decision 1.
   ============================================================ */
:root{
  --blue:#3170BF;        /* Signature Blue */
  --navy:#0B2456;        /* Midnight Navy */
  --royal:#1B469E;       /* hover step between blue and navy */
  --dream:#B6CAED;       /* Dream Blue */
  --dream-soft:#E3ECFA;  /* Dream Blue at ~35% over ivory, for tints */
  --ivory:#FFFBF7;       /* Soft Ivory, page foundation */
  --star:#FED715;        /* Star Yellow, stars only */
  --white:#FFFFFF;
  --ink:var(--navy);
  --ink-soft:rgba(11,36,86,.72);
  --line:rgba(11,36,86,.12);

  --font-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Inclusive Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-img:24px; --r-card:20px; --r-field:12px; --r-tag:8px;
  --container:1280px; --gutter:80px; --section:96px;

  --d-fast:150ms; --d-normal:300ms; --d-slow:500ms; --d-slower:800ms;
  --ease-out:cubic-bezier(.25,0,.25,1);
  --ease-in-out:cubic-bezier(.42,0,.58,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.55;color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:600}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(34px,3.8vw,54px);line-height:1.1;letter-spacing:-.01em}
h2{font-size:clamp(30px,3.2vw,40px);line-height:1.15;letter-spacing:-.01em}
h3{font-size:clamp(20px,1.7vw,24px);font-weight:500;line-height:1.25}
h4{font-size:19px;font-weight:500;line-height:1.3}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.5}
.small{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.tier-word{font-family:var(--font-head);font-weight:500;font-style:italic}

.eyebrow{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:10px;margin:0 0 18px}
.eyebrow .spark{width:14px;height:14px;fill:var(--star);flex:none}
.on-dark .eyebrow{color:rgba(255,255,255,.82)}
.spark{display:inline-block;fill:var(--star)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.split > *,.hero-split .container > *,.cta-grid > *,.magic-grid > *,.detail-grid > *,.cards > *,.steps > *,.info-grid > *,.areas > *,.tier-band > *,.form-grid > *{min-width:0}
.narrow{max-width:860px}
section{padding:var(--section) 0;position:relative}
.bg-dream{background:var(--dream)}
.bg-dream-soft{background:var(--dream-soft)}
.bg-white{background:var(--white)}
.bg-navy{background:var(--navy);color:var(--white)}
.bg-blue{background:var(--blue);color:var(--white)}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white)}
.on-dark .small{color:rgba(255,255,255,.75)}
.on-dark a:not(.btn){color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}

/* Placeholders and confirm flags (swap before launch) */
.ph{text-decoration:underline dotted var(--blue);text-decoration-thickness:2px;text-underline-offset:3px;cursor:help}
.confirm{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#FFF1C2;color:#6B4E00;border-radius:6px;padding:2px 7px;margin-left:4px;vertical-align:middle;cursor:help}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:500;font-size:15px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;padding:16px 34px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;min-height:44px;transition:background var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out),border-color var(--d-fast) var(--ease-out),transform var(--d-fast) var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--royal);color:var(--white)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.btn-white{background:var(--white);color:var(--blue)}
.btn-white:hover{background:var(--ivory);color:var(--royal)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:#071a40}
.btn-outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn-outline-white:hover{background:var(--white);color:var(--blue);border-color:var(--white)}
.btn .lucide{width:18px;height:18px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--blue);position:relative;padding-bottom:2px}
.text-link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);transition:width 200ms var(--ease-out)}
.text-link:hover::after{width:100%}
.text-link .lucide{width:18px;height:18px;transition:transform 200ms var(--ease-out)}
.text-link:hover .lucide{transform:translateX(4px)}
.on-dark .text-link{color:var(--white);text-decoration:none}
.on-dark .text-link::after{background:var(--white)}

.lucide{stroke-width:2}
.icon-lg{width:40px;height:40px;stroke-width:1.5}
.icon-md{width:24px;height:24px}
.icon-sm{width:20px;height:20px}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:border-color var(--d-normal),background var(--d-normal)}
.header.scrolled,.header.solid{border-bottom-color:var(--line);background:rgba(255,251,247,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px;transition:height var(--d-normal) var(--ease-out)}
.header.scrolled .header-inner{height:72px}
.logo{flex:none}
.logo img{height:52px;width:auto;transition:height var(--d-normal) var(--ease-out)}
.header.scrolled .logo img{height:42px}
.nav{display:flex;align-items:center;gap:32px}
.nav > a,.nav-dropdown-trigger{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--navy);position:relative;padding:6px 0;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.nav > a::after,.nav-dropdown-trigger::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
.nav > a:hover::after,.nav > a[aria-current="page"]::after,.nav-dropdown.current .nav-dropdown-trigger::after{transform:scaleX(1)}
.header-right{display:flex;align-items:center;gap:22px}
.header-phone{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--navy);white-space:nowrap}
.header-phone .lucide{width:18px;height:18px;color:var(--blue)}
.header .btn{padding:13px 24px;font-size:14px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--navy)}
.nav-toggle .lucide{width:28px;height:28px}

.nav-dropdown{position:relative}
.nav-dropdown-trigger .lucide{width:16px;height:16px;transition:transform 200ms var(--ease-out)}
.nav-dropdown.open .nav-dropdown-trigger .lucide{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:-16px;min-width:280px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:10px 0;margin-top:14px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);z-index:60}
.nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-dropdown.open .nav-dropdown-menu{opacity:1;transform:none;pointer-events:auto}
.nav-dropdown-menu li a{display:block;padding:10px 20px;font-size:15px;color:var(--navy);transition:background 150ms,color 150ms}
.nav-dropdown-menu li a:hover{background:var(--dream-soft);color:var(--blue)}
.nav-dropdown-menu li.all{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.nav-dropdown-menu li.all a{font-weight:600}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--blue);color:var(--white);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;padding:92px 24px 40px;overflow-y:auto;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity var(--d-normal) var(--ease-out),transform var(--d-normal) var(--ease-out)}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mobile-menu a.mlink{font-family:var(--font-head);font-size:30px;color:var(--white);padding:6px 0}
.mobile-menu .msub{display:flex;flex-direction:column;align-items:center;gap:2px;margin:-2px 0 10px}
.mobile-menu .msub a{color:rgba(255,255,255,.88);font-size:16px;padding:4px 0}
.mobile-menu .mphone{margin-top:18px;color:var(--white);font-weight:500;display:inline-flex;gap:8px;align-items:center}
.mobile-menu .btn{margin-top:14px}
.mobile-close{position:absolute;top:22px;right:22px;background:none;border:0;color:var(--white);cursor:pointer;padding:8px}
.mobile-close .lucide{width:30px;height:30px}
.mobile-menu .spark{position:absolute;opacity:.9}

/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--ink-soft);margin-bottom:22px}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--blue)}
.crumbs .lucide{width:14px;height:14px;opacity:.6}

/* ---------- HOME top block (arch hero + logos + carousel) ---------- */
.top{position:relative;background:var(--ivory);overflow-x:clip;overflow-y:visible}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,251,247,0),var(--ivory))}
.top > section{background:transparent;position:relative;z-index:1}
.hero-scatter{position:absolute;inset:-96px 0 0;z-index:0;pointer-events:none;overflow:hidden}
.hero-scatter .tw,.star-field .tw{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);fill:var(--star);opacity:.12;transform:translate(-50%,-50%) scale(.7);animation:twinkle var(--t,4.5s) var(--ease-in-out) infinite;animation-delay:var(--d,0s)}
@keyframes twinkle{0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(.7)}50%{opacity:.6;transform:translate(-50%,-50%) scale(1.05)}}
.hero-scatter img{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);opacity:var(--o,.22);filter:blur(var(--b,0px));transform:translate(-50%,-50%) rotate(var(--r,0deg))}
/* Stars never sit behind text: .l / .r stars are positioned inside the margin outside the copy column.
   --fx is a fraction (0-1) of that margin. Hero copy column is 780px wide and centered. */
.hero-scatter .tw.l{left:calc(max(0px,50% - 400px) * var(--fx,.5))}
.hero-scatter .tw.r{left:calc(100% - max(0px,50% - 400px) * var(--fx,.5))}

.hero-home{padding:0 0 8px;overflow:visible;margin-top:-12px;--arch-w:min(1500px,98vw)}
/* Round 3: the stage reserves less than the arch's full height, so "Trusted by" and the logo row ride over the
   arch's feet and the photo carousel starts where the arch ends (Dallin, 2026-10-11). */
.hero-stage{position:relative;width:100%;margin:0 auto;min-height:calc(var(--arch-w) * 0.47)}
.hero-arch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--arch-w);max-width:none;height:auto;pointer-events:none;user-select:none;opacity:.95}
.hero-copy{position:relative;z-index:1;padding:calc(var(--arch-w) * 0.185) 16px 0;max-width:780px;margin:0 auto}
.hero-glass{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-glass .eyebrow{margin-bottom:14px;justify-content:center}
.hero-glass h1{font-size:clamp(32px,3.3vw,52px);line-height:1.1;max-width:14ch}
.hero-glass .lead{margin:18px 0 26px;color:var(--navy);max-width:52ch;font-size:clamp(16px,1.15vw,18px);line-height:1.5}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero-glass > *,.hero-arch{opacity:0;animation:fadeUp var(--d-slow) var(--ease-out) forwards}
.hero-glass .eyebrow{animation-delay:0ms}
.hero-glass h1{animation-delay:100ms}
.hero-glass .lead{animation-delay:250ms}
.hero-glass .hero-ctas{animation-delay:400ms}
.hero-arch{animation:archIn var(--d-slower) var(--ease-out) forwards}
@keyframes archIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:.95;transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{margin-top:0}50%{margin-top:-14px}}

/* Trusted by */
.clients{padding:36px 0 40px;text-align:center}
.clients .eyebrow{margin-bottom:30px}
.client-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 64px}
.client-logos li{display:flex;align-items:center;justify-content:center}
.client-logos img{height:40px;width:auto;transition:transform var(--d-normal) var(--ease-spring)}
.client-logos img.tall{height:68px}
.client-logos li:hover img{transform:scale(1.12)}
.client-names{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin-top:30px;max-width:980px;margin-left:auto;margin-right:auto}
.client-names li{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;align-items:center;gap:18px}
.client-names li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--dream);display:inline-block}

/* Marquee */
.marquee-section{padding:16px 0 96px}
.logo-marquee{margin-top:8px;--gap:80px}
.logo-marquee .marquee-track{align-items:center;animation-direction:reverse}
.logo-marquee .marquee-track img{height:40px;width:auto;flex:none;border-radius:0;opacity:.95;transition:transform var(--d-normal) var(--ease-spring)}
.logo-marquee .marquee-track img.tall{height:64px}
.logo-marquee .marquee-track img.short{height:30px}
.clients{padding:36px 0 24px}
.marquee{overflow:hidden;width:100%;--gap:20px}
.marquee-track{display:flex;gap:var(--gap);width:max-content;animation:marquee 80s linear infinite}
.photo-marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:340px;width:auto;border-radius:18px;flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--gap)/2))}}

/* ---------- Inner page hero (split) ---------- */
.hero-split{padding:56px 0 72px;overflow:hidden}
.hero-split .container{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-split h1{margin-bottom:18px}
.hero-split .lead{color:var(--ink);max-width:54ch;margin-bottom:28px}
.hero-photo{position:relative;justify-self:end;width:100%;max-width:520px}
.hero-photo.r32{max-width:600px}
.hero-photo .frame{border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/5;position:relative;z-index:1}
.hero-photo.r32 .frame{aspect-ratio:3/2}
.hero-photo .frame img{width:100%;height:100%;object-fit:cover}
.hero-photo::before{content:"";position:absolute;inset:-28px -28px 40px 40px;background:var(--dream);border-radius:40% 60% 55% 45%/55% 45% 55% 45%;z-index:0;opacity:.7}
.hero-photo .spark{position:absolute;z-index:2;fill:var(--star)}
.hero-photo .s1{width:48px;height:48px;top:-22px;right:-18px}
.hero-photo .s2{width:22px;height:22px;top:34px;right:-34px}
.hero-photo .tagchip{position:absolute;left:16px;bottom:16px;z-index:2}
/* keep-portrait: pages whose hero subject is tall (the branded column) keep 4:5 on tablet and phone */
.hero-photo.keep-portrait .frame{aspect-ratio:4/5}
.hero-simple{padding:64px 0 48px;text-align:center}
.hero-simple .container{max-width:860px}
.hero-simple h1{margin-bottom:18px}
.hero-simple .lead{max-width:60ch;margin:0 auto 28px}
.hero-simple .crumbs,.hero-simple .btn-row{justify-content:center}
.hero-simple .eyebrow{justify-content:center}
.hero-phone{font-family:var(--font-head);font-size:clamp(28px,3vw,40px);color:var(--navy);display:inline-flex;gap:12px;align-items:center;margin-top:8px}
.hero-phone .lucide{width:28px;height:28px;color:var(--blue)}

/* Cloud / Wish chips */
.chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px 5px 9px;font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1;background:var(--white);color:var(--navy);border:1px solid var(--line)}
.chip .lucide{width:14px;height:14px;stroke-width:2.2}
.chip.cloud{background:var(--dream-soft)}
.chip.wish{background:var(--navy);color:var(--white);border-color:var(--navy)}
.chip.wish .lucide{color:var(--star)}

/* ---------- Direct answer (TL;DR) ---------- */
.answer{padding:0 0 72px}
.answer .lead{max-width:760px;font-size:clamp(17px,1.35vw,20px);line-height:1.6}
.answer-card{background:var(--dream);border-radius:var(--r-img);padding:40px 48px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.answer-card .lucide{width:34px;height:34px;stroke-width:1.5;color:var(--navy);margin-top:4px}
.answer-card p{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:none}
.answer-card .eyebrow{margin-bottom:10px;color:var(--navy)}

/* ---------- Split sections ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split.flip .split-img{order:2}
.split-img{border-radius:var(--r-img);overflow:hidden;position:relative}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img.r32{aspect-ratio:3/2}
.split-img.r45{aspect-ratio:4/5;max-width:480px}
.split-img.r43{aspect-ratio:4/3}
.split-copy{max-width:560px}
.split-copy h2{margin-bottom:20px}
.split-copy p{margin-bottom:1.1em}
.split-copy .btn-row{margin-top:8px}
.img-caption{position:absolute;left:16px;bottom:16px;background:rgba(255,251,247,.94);border-radius:14px;padding:8px 14px;font-size:13px;color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.uses{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:22px 0 26px}
.uses li{display:flex;align-items:flex-start;gap:10px;font-size:16px}
.uses .spark{width:12px;height:12px;margin-top:8px;flex:none}

/* ---------- Section head ---------- */
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head .lead{margin-top:14px;color:var(--ink-soft)}

/* ---------- Detail grid (H2 blocks) ---------- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.detail{background:var(--white);border-radius:var(--r-card);padding:32px 32px 30px;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;transition:transform 200ms var(--ease-out),border-color 200ms}
.detail:hover{transform:translateY(-3px);border-color:var(--dream)}
.detail .lucide{width:30px;height:30px;stroke-width:1.5;color:var(--blue)}
.detail h2,.detail h3{font-size:clamp(21px,1.8vw,24px);font-weight:500;line-height:1.25}
.detail p{font-size:16px;color:var(--ink)}
.detail ul{display:flex;flex-direction:column;gap:8px}
.detail ul li{display:flex;gap:10px;align-items:flex-start;font-size:16px}
.detail ul li .spark{width:11px;height:11px;flex:none;margin-top:8px}
.detail-grid .wide{grid-column:1/-1}

/* ---------- Cards (services) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border-radius:var(--r-img);overflow:hidden;display:flex;flex-direction:column;transition:transform 200ms var(--ease-out);border:1px solid var(--line)}
.card:hover{transform:translateY(-4px)}
.card-img{aspect-ratio:4/3;overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-top .lucide{width:30px;height:30px;stroke-width:1.5;color:var(--ink-soft);transition:color var(--d-fast)}
.card:hover .card-top .lucide{color:var(--blue)}
.card p{font-size:16px;color:var(--ink);flex:1}
.card .text-link{font-size:15px;margin-top:4px}
.card .examples{font-size:14px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.card .examples span{display:flex;gap:8px;align-items:flex-start}
.card .examples .chip{padding:3px 9px 3px 7px;font-size:11.5px;flex:none}

/* Tier strip under the home cards */
.tier-band{margin-top:40px;background:var(--blue);color:var(--white);border-radius:var(--r-img);padding:34px 40px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.tier-band > div{display:flex;flex-direction:column;gap:10px}
.tier-band .tier-word{font-size:30px;color:var(--white)}
.tier-band p{color:rgba(255,255,255,.92);font-size:16px}
.tier-band .text-link{color:var(--white);margin-top:4px}
.tier-band .text-link::after{background:var(--star)}
.tier-band > div + div{border-left:1px solid rgba(255,255,255,.25);padding-left:32px}

/* ---------- Choose your magic (shared strip) ---------- */
.magic{background:var(--dream-soft)}
.magic-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.magic-card{background:var(--white);border-radius:var(--r-img);padding:40px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);position:relative;overflow:hidden}
.magic-card.wish{background:var(--navy);color:var(--white);border-color:var(--navy)}
.magic-card .top-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.magic-card .tier-word{font-size:clamp(30px,2.6vw,38px)}
.magic-card.wish .tier-word{color:var(--white)}
.magic-card .icon-lg{color:var(--blue)}
.magic-card.wish .icon-lg{color:var(--star)}
.magic-card p{font-size:16.5px}
.magic-card.wish p{color:rgba(255,255,255,.9)}
.magic-card .price{font-family:var(--font-head);font-size:24px;font-weight:500}
.magic-card .q{font-family:var(--font-head);font-style:italic;font-size:21px;line-height:1.35}
.magic-card .example{font-size:14.5px;color:var(--ink-soft);display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.magic-card.wish .example{color:rgba(255,255,255,.75);border-top-color:rgba(255,255,255,.2)}
.magic-card .example .lucide{width:18px;height:18px;flex:none;margin-top:2px}
.magic-card .btn{align-self:flex-start;margin-top:4px}
.magic-card .field-spark{position:absolute;right:22px;bottom:22px;width:56px;height:56px;fill:var(--star);opacity:.9}
.magic-note{text-align:center;margin-top:28px;color:var(--ink-soft)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;counter-reset:step}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px;display:flex;flex-direction:column;gap:10px}
.step .num{font-family:var(--font-head);font-size:40px;line-height:1;color:var(--blue);font-weight:500}
.step h3{font-size:22px}
.step p{font-size:16px}
.steps.four{grid-template-columns:repeat(4,1fr)}

/* ---------- Frozen photo band ("pin"): the page scrolls over a fixed photo ---------- */
.pin{position:relative;min-height:78vh;clip-path:inset(0);isolation:isolate;display:flex;align-items:flex-end;padding:0 0 96px;color:var(--white)}
.pin-img{position:fixed;inset:0;top:var(--hdr-h);width:100%;height:calc(100vh - var(--hdr-h));height:calc(100lvh - var(--hdr-h));object-fit:cover;z-index:-2}
.pin-scrim{position:fixed;inset:0;top:var(--hdr-h);height:calc(100vh - var(--hdr-h));height:calc(100lvh - var(--hdr-h));z-index:-1;background:linear-gradient(180deg,rgba(11,36,86,.08) 0%,rgba(11,36,86,.22) 55%,rgba(11,36,86,.72) 100%)}
.pin-copy{position:relative;z-index:1;max-width:900px}
.pin-copy .eyebrow{color:rgba(255,255,255,.85)}
.pin-line{font-family:var(--font-head);font-size:clamp(28px,3.6vw,48px);line-height:1.12;letter-spacing:-.01em;color:var(--white);max-width:20ch;text-wrap:balance;margin:0}
.pin-copy .btn-row{margin-top:26px}
.pin-copy .small{color:rgba(255,255,255,.8);margin-top:14px}
.pin-top{align-items:flex-start;padding:96px 0 0}
.pin-top .pin-scrim{background:linear-gradient(0deg,rgba(11,36,86,.05) 0%,rgba(11,36,86,.2) 55%,rgba(11,36,86,.6) 100%)}
/* the section after a pin slides up over the photo like a card */
.over{position:relative;z-index:2;border-radius:36px 36px 0 0;margin-top:-36px;background:var(--ivory)}
.over.bg-white{background:var(--white)}
.over.bg-dream-soft{background:var(--dream-soft)}
.over.magic{background:var(--dream-soft)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-card);border:1px solid var(--line);background:var(--white)}
table th,table td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px}
table th{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--dream-soft)}
table tr:last-child td{border-bottom:0}
table td strong{font-family:var(--font-head);font-weight:500;font-size:18px}

/* ---------- Checklist / bullet list ---------- */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.checklist li{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:16px}
.checklist li .lucide{width:20px;height:20px;color:var(--blue);flex:none;margin-top:2px}
.bullets{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.bullets li{display:flex;gap:10px;align-items:flex-start}
.bullets .spark{width:11px;height:11px;flex:none;margin-top:9px}

/* ---------- Prose block (About, etc.) ---------- */
.prose{max-width:720px}
.prose h2{margin:0 0 18px}
.prose p{font-size:17px}
.prose + .prose{margin-top:56px}

/* ---------- Logo strip (text) ---------- */
.worked{padding:0 0 var(--section)}
.worked-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-img);padding:36px 40px;text-align:center}
.worked-card h2{font-size:clamp(22px,2vw,26px);font-weight:500;margin-bottom:18px}
.worked-card ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.worked-card li{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:inline-flex;gap:22px;align-items:center}
.worked-card li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--dream);display:inline-block}
.worked-card .text-link{margin-top:20px}

/* ---------- Testimonials (hidden until real reviews exist) ---------- */
.reviews{position:relative;overflow:hidden}
.reviews > .container{position:relative;z-index:1}
.star-field{position:absolute;inset:0;z-index:0;pointer-events:none}
/* star-field stars sit in the section's top/bottom padding (px offsets) or the outer margins (.l/.r) */
.star-field .tw.l{left:calc((100% - min(100%,var(--container))) / 2 * var(--fx,.5))}
.star-field .tw.r{left:calc(100% - (100% - min(100%,var(--container))) / 2 * var(--fx,.5))}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:var(--white);color:var(--navy);border-radius:var(--r-img);padding:32px 30px 28px;display:flex;flex-direction:column;gap:18px}
.review-top{display:flex;align-items:center;justify-content:space-between}
.star-rating{display:flex;gap:2px;color:var(--star)}
.star-rating svg{width:18px;height:18px;fill:currentColor}
.review blockquote{margin:0;font-family:var(--font-head);font-style:italic;font-weight:400;font-size:20px;line-height:1.4;flex:1}
.review cite{font-style:normal;font-size:14px;color:var(--ink-soft);display:flex;flex-direction:column;gap:2px}
.review cite strong{color:var(--navy)}

/* ---------- FAQ ---------- */
.faq .container{max-width:860px}
.faq h2{text-align:center;margin-bottom:44px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;font-family:var(--font-head);font-weight:500;font-size:clamp(19px,1.6vw,22px);transition:color var(--d-fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue)}
.faq summary .lucide{width:22px;height:22px;flex:none;color:var(--blue);transition:transform var(--d-normal) var(--ease-out)}
.faq details[open] summary .lucide{transform:rotate(180deg)}
.faq .answer-text{padding:0 4px 26px;max-width:720px;color:var(--ink)}

/* ---------- Wave + final CTA ---------- */
.wave{display:block;width:100%;height:auto;margin-bottom:-1px}
.cta-final{padding-top:56px}
.cta-final.no-wave{padding-top:var(--section)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cta-copy h2{color:var(--white);margin-bottom:18px}
.cta-copy .lead{color:rgba(255,255,255,.9);margin-bottom:26px;max-width:46ch}
.cta-copy .btn-row{margin-top:4px}
.cta-copy .small{margin-top:28px}
.cta-simple{text-align:center}
.cta-simple .container{max-width:860px}
.cta-simple h2{color:var(--white);margin-bottom:16px}
.cta-simple .lead{color:rgba(255,255,255,.9);margin:0 auto 28px;max-width:48ch}
.cta-simple .btn-row{justify-content:center}
.cta-simple .star-field{inset:0}

/* ---------- Forms ---------- */
.form-card{background:var(--white);border-radius:var(--r-img);padding:40px;color:var(--navy);border:1px solid var(--line)}
.form-card .form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.form-card .form-head .tier-word{font-size:24px}
.form-card h3,.on-dark .form-card h3{margin-bottom:6px;font-size:24px;color:var(--navy)}
.on-dark .form-card .small,.on-dark .form-card .hint{color:var(--ink-soft)}
.form-card .sub{color:var(--ink-soft);margin-bottom:22px;font-size:15.5px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.field label,.field .label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.field label .req{color:var(--blue)}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-body);font-size:16px;color:var(--navy);background:var(--ivory);border:1.5px solid var(--line);border-radius:var(--r-field);padding:13px 14px;transition:border-color var(--d-fast),background var(--d-fast),box-shadow var(--d-fast);min-height:48px}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230B2456' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(49,112,191,.12)}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(11,36,86,.42)}
.radios{display:grid;gap:8px}
.radios label{display:flex;gap:10px;align-items:center;font-size:15.5px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r-field);background:var(--ivory);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;color:var(--navy);margin:0}
.radios label:has(input:checked){border-color:var(--blue);background:var(--white)}
.radios input{accent-color:var(--blue);width:18px;height:18px;margin:0}
.radios.cols{grid-template-columns:1fr 1fr}
.field .hint{font-size:13px;color:var(--ink-soft);margin:6px 0 0}
.form-card .btn{width:100%;margin-top:6px}
.form-card .small.after{margin:14px 0 0;text-align:center}
.form-card .after a{font-weight:500}

/* Adaptive Clouds / Wishes form (home + service pages): first question sorts the lead, fields swap below */
.form-dual{scroll-margin-top:96px}
.path-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field .path-tile{position:relative;display:flex;flex-direction:column;gap:5px;padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--ivory);cursor:pointer;text-transform:none;letter-spacing:0;font-size:16px;font-weight:400;color:var(--navy);margin:0;transition:border-color 150ms var(--ease-out),background 150ms var(--ease-out),box-shadow 150ms var(--ease-out)}
.path-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.path-tile .tier-word{font-size:22px;color:var(--navy)}
.path-tile .small{font-size:13px;text-transform:none;letter-spacing:0;font-weight:400}
.path-tile .chip{align-self:flex-start;margin-top:4px}
.path-tile:hover{border-color:var(--dream)}
.path-tile:has(input:checked){border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(49,112,191,.12)}
.path-tile:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.path-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path-fields[hidden]{display:none}
.path-fields.fade{animation:fieldsIn 200ms var(--ease-out)}
@keyframes fieldsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Tabs (contact page form chooser) */
.tabpanel{scroll-margin-top:96px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.tab{background:var(--white);border:1.5px solid var(--line);border-radius:18px;padding:18px 20px;text-align:left;cursor:pointer;font-family:var(--font-body);color:var(--navy);display:flex;flex-direction:column;gap:6px;transition:border-color 150ms,transform 150ms}
.tab:hover{transform:translateY(-2px)}
.tab[aria-selected="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,112,191,.12)}
.tab .tier-word{font-size:22px}
.tab .small{font-size:13.5px}
.tab .chip{align-self:flex-start;margin-top:4px}
.tabpanel[hidden]{display:none}

/* ---------- Gallery ---------- */
.gallery-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:56px}
.gallery-nav a{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:500;color:var(--navy);background:var(--white);transition:border-color 150ms,color 150ms}
.gallery-nav a:hover{border-color:var(--blue);color:var(--blue)}
.gset{padding:0 0 72px}
.gset-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.gset-head h2{font-size:clamp(26px,2.6vw,34px)}
.gset-head p{color:var(--ink-soft);margin:6px 0 0}
.ggrid{columns:3;column-gap:16px}
.gitem{break-inside:avoid;margin-bottom:16px;position:relative;border-radius:18px;overflow:hidden;background:var(--white);display:block}
.gitem img{width:100%;height:auto;transition:transform 400ms var(--ease-out)}
.gitem:hover img{transform:scale(1.03)}
.gitem .chip{position:absolute;top:12px;left:12px}
.gitem figcaption{padding:12px 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.gitem figcaption a{color:var(--blue);font-weight:500}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(11,36,86,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1200px,96vw);max-height:84vh;border-radius:16px;object-fit:contain}
.lightbox figcaption{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:rgba(255,255,255,.85);font-size:14px;padding:0 24px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);border:0;color:var(--white);border-radius:999px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox .lb-close{top:20px;right:20px}
.lightbox .lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lightbox button .lucide{width:24px;height:24px}

/* ---------- Contact info rows ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.info{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:8px}
.info .lucide{width:28px;height:28px;stroke-width:1.5;color:var(--blue)}
.info h3{font-size:20px}
.info a{font-weight:500}
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.area{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.area h3{font-size:19px;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.area h3 .lucide{width:18px;height:18px;color:var(--blue)}
.area p{font-size:15px;color:var(--ink-soft)}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:var(--white);padding:72px 0 36px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:48px}
.footer-brand img{height:72px;width:auto;margin-bottom:22px}
.footer-brand p{color:rgba(255,255,255,.8);max-width:300px;font-family:var(--font-head);font-size:19px;font-style:italic}
.footer h4{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px}
.footer li{margin-bottom:10px}
.footer a{color:rgba(255,255,255,.85);transition:color var(--d-fast)}
.footer a:hover{color:var(--white);text-decoration:underline}
.footer-contact li{color:rgba(255,255,255,.85);display:flex;gap:10px;align-items:flex-start}
.footer-contact .lucide{width:18px;height:18px;flex:none;margin-top:3px;color:var(--dream)}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:rgba(255,255,255,.65)}
.footer .spark{width:12px;height:12px;vertical-align:-1px;margin:0 6px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 650ms var(--ease-out),transform 650ms var(--ease-out)}
.reveal.from-left{transform:translateX(-28px)}
.reveal.from-right{transform:translateX(28px)}
.reveal.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(14px);transition:opacity 650ms var(--ease-out),transform 650ms var(--ease-out)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:100ms}
.stagger.in > *:nth-child(3){transition-delay:200ms}
.stagger.in > *:nth-child(4){transition-delay:150ms}
.stagger.in > *:nth-child(5){transition-delay:250ms}
.stagger.in > *:nth-child(6){transition-delay:350ms}
.stagger.in > *:nth-child(n+7){transition-delay:400ms}

@media (width >= 1280px){
  .hero-scatter img{animation:drift 14s var(--ease-in-out) infinite}
  .hero-scatter img:nth-child(2n){animation-duration:18s;animation-direction:reverse}
  .hero-scatter img:nth-child(3n){animation-duration:22s}
}

/* ---------- Responsive ---------- */
@media (max-width:1279px){:root{--gutter:60px}}
@media (max-width:1099px){
  .header-phone{display:none}
  .nav{gap:24px}
  .hero-home{--arch-w:min(1500px,150vw);padding-bottom:32px}
  .hero-stage{min-height:0}
  .hero-copy{max-width:640px}
  .hero-glass h1{font-size:clamp(32px,4.6vw,46px)}
  .areas{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  :root{--gutter:40px;--section:80px}
  .split{gap:44px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .marquee-track img{height:280px}
  .hero-split .container{grid-template-columns:1fr;gap:40px}
  .hero-photo{justify-self:start;max-width:100%}
  .hero-photo .frame{aspect-ratio:4/3}
  .hero-photo.r32 .frame{aspect-ratio:3/2}
  .hero-photo.keep-portrait{max-width:440px}
  .hero-photo.keep-portrait .frame{aspect-ratio:4/5}
  .steps,.steps.four{grid-template-columns:1fr 1fr}
  .info-grid{grid-template-columns:1fr}
  .ggrid{columns:2}
  .magic-grid{grid-template-columns:1fr}
  .tabs{grid-template-columns:1fr}
}
@media (max-width:899px){
  .nav,.header-phone{display:none}
  .nav-toggle{display:inline-flex}
  .header-inner{height:76px}
  .logo img{height:48px}
  .hero-home{padding-top:32px}
  .hero-scatter img{opacity:calc(var(--o,.22) * .8)}
  .hero-scatter img:nth-child(3n){display:none}
  .split,.split.flip{grid-template-columns:1fr}
  .split.flip .split-img{order:0}
  .split.img-last .split-img{order:2}
  .split-img.r45{max-width:100%;aspect-ratio:4/4.2}
  .detail-grid{grid-template-columns:1fr}
  .checklist{grid-template-columns:1fr}
  .tier-band{grid-template-columns:1fr}
  .tier-band > div + div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.25);padding-top:24px}
  .cta-grid{grid-template-columns:1fr}
  .form-card{padding:30px 24px}
  .answer-card{grid-template-columns:1fr;padding:30px 28px;gap:12px}
  .pin{min-height:62vh;padding-bottom:64px}
  .areas{grid-template-columns:1fr}
}
@media (max-width:767px){
  :root{--gutter:20px;--section:56px}
  body{font-size:16px}
  .hero-home{--arch-w:200vw}
  .hero-copy{padding-left:8px;padding-right:8px}
  .hero-glass h1{font-size:clamp(30px,8.4vw,38px);max-width:12ch}
  .hero-glass .lead{font-size:16px}
  .header .btn{display:none}
  .clients{padding:16px 0 32px}
  .marquee-section{padding-bottom:56px}
  .client-logos{gap:22px 36px}
  .client-logos img{height:30px}
  .client-logos img.tall{height:52px}
  .uses{grid-template-columns:1fr}
  .cards,.cards.two{grid-template-columns:1fr}
  .card-body{padding:22px 22px 24px}
  .marquee-track img{height:220px;border-radius:14px}
  .logo-marquee{--gap:48px}
  .logo-marquee .marquee-track img{height:30px}
  .logo-marquee .marquee-track img.tall{height:48px}
  .logo-marquee .marquee-track img.short{height:24px}
  .form-grid,.path-fields{grid-template-columns:1fr}
  .radios.cols{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .reveal,.stagger > *{transition-duration:450ms}
  .steps,.steps.four{grid-template-columns:1fr}
  .ggrid{columns:1}
  .hero-split{padding:32px 0 48px}
  .hero-simple{padding:40px 0 32px}
  .magic-card{padding:28px 24px}
  .worked-card{padding:28px 20px}
  .over{border-radius:24px 24px 0 0;margin-top:-24px}
  table th,table td{padding:12px 14px;font-size:15px}
}
@media (max-width:479px){
  .hero-ctas .btn,.cta-copy .btn,.hero-split .btn-row .btn,.cta-simple .btn,.magic-card .btn,.hero-simple .btn-row .btn{width:100%}
  .btn{white-space:normal;text-align:center}
  .path-tiles{grid-template-columns:1fr}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero-glass > *,.reveal,.stagger > *{opacity:1 !important;transform:none !important}
  .hero-arch{opacity:.95 !important;transform:translateX(-50%) !important}
  .hero-scatter .tw,.star-field .tw{opacity:.35 !important}
  .marquee{overflow-x:auto}
  .marquee-track{animation:none;width:auto}
  .pin-img,.pin-scrim{position:absolute;top:0;height:100%}
}

/* ---------- Ambient layer: faded balloons + twinkling stars on ivory sections ---------- */
.has-amb{position:relative;overflow:hidden}
.has-amb > .container{position:relative;z-index:1}
.amb{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb img{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);opacity:var(--o,.18);filter:blur(var(--b,0px));transform:translate(-50%,-50%) rotate(var(--r,0deg))}
.amb .tw{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);fill:var(--star);opacity:.12;transform:translate(-50%,-50%) scale(.7);animation:twinkle var(--t,4.5s) var(--ease-in-out) infinite;animation-delay:var(--d,0s)}
/* Round 3: ambient stars only in the outer margins (outside the 1280px container), so they are never behind copy.
   --fx is a fraction of that margin. Below 1280px the margin is gone, so stars hide and the balloons carry the layer. */
.amb .tw.l{left:calc((100% - min(100%,var(--container))) / 2 * var(--fx,.5))}
.amb .tw.r{left:calc(100% - (100% - min(100%,var(--container))) / 2 * var(--fx,.5))}
@media (max-width:1279px){.amb .tw.l,.amb .tw.r,.hero-scatter .tw,.star-field .tw.l,.star-field .tw.r{display:none}}
@media (width >= 1280px){
  .amb img{animation:drift 16s var(--ease-in-out) infinite}
  .amb img:nth-child(2n){animation-duration:20s;animation-direction:reverse}
  .amb img:nth-child(3n){animation-duration:24s}
}
@media (max-width:899px){.amb img{opacity:calc(var(--o,.18) * .75)}.amb img:nth-child(3n){display:none}}
@media (prefers-reduced-motion:reduce){.amb .tw{opacity:.35 !important}}

/* ---------- Gallery wall (photos first) ---------- */
.gfilters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 32px}
.gfilters button{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--navy);background:var(--white);cursor:pointer;transition:border-color 150ms,color 150ms,background 150ms}
.gfilters button:hover{border-color:var(--blue);color:var(--blue)}
.gfilters button[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.gfilters button .lucide{width:16px;height:16px}
.gwall{columns:4;column-gap:18px}
.gwall .gitem{break-inside:avoid;margin-bottom:16px;position:relative;border-radius:18px;overflow:hidden;background:var(--dream-soft);display:block;cursor:zoom-in}
.gwall .gitem[hidden]{display:none}
.gwall .gitem img{width:100%;height:auto;display:block;transition:transform 500ms var(--ease-out)}
.gwall .gitem:hover img{transform:scale(1.04)}
.gwall .gitem .chip{position:absolute;top:12px;left:12px;z-index:2}
.gwall .gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(180deg,rgba(11,36,86,0),rgba(11,36,86,.82));color:rgba(255,255,255,.95);font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(8px);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
.gwall .gitem:hover figcaption,.gwall .gitem:focus-within figcaption,.gwall .gitem:focus figcaption{opacity:1;transform:none}
.gwall .gitem figcaption a{color:var(--white);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);display:inline-block;margin-top:4px}
.gallery-top{padding:40px 0 28px;text-align:center}
.gallery-top h1{font-size:clamp(30px,3vw,42px);margin-bottom:10px}
.gallery-top p{color:var(--ink-soft);max-width:60ch;margin:0 auto}
.gallery-top .legend{margin-top:14px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:13.5px}
@media (max-width:1399px){.gwall{columns:3}}
@media (max-width:1023px){.gwall{columns:2}}
@media (max-width:767px){.gwall .gitem figcaption{opacity:1;transform:none;padding-top:28px}.gallery-top{padding:28px 0 20px}}
@media (max-width:599px){.gwall{columns:1}}
@media (hover:none){.gwall .gitem figcaption{opacity:1;transform:none}}

/* ============================================================
   ROUND 4 (2026-10-16): client copy markup + website-changes notes
   ============================================================ */
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* Hero fills the first screen; the photo strip and logos start below it */
.hero-stage{min-height:max(calc(var(--arch-w) * 0.6), calc(100svh - 84px))}
.hero-glass h1{max-width:none}
.hero-glass h1 .h1-line{max-width:15ch;margin:0 auto}
.hero-copy{padding-top:calc(var(--arch-w) * 0.215)}
.hero-glass .lead{text-wrap:balance;max-width:54ch}
.hero-glass h1 .eyebrow{display:flex;justify-content:center;margin:0 auto 16px;max-width:none;line-height:1.5;text-wrap:balance}
.hero-glass h1 .h1-line{display:block;text-wrap:balance}
.hero-glass .lead{margin:20px 0 0}
.hero-glass .lead-2{margin:10px 0 28px;animation-delay:330ms}
@media (max-width:1099px){.hero-stage{min-height:calc(100svh - 76px)}.hero-copy{padding-top:calc(var(--arch-w) * 0.165)}}
@media (max-width:767px){.hero-copy{padding-top:calc(var(--arch-w) * 0.15)}}
@media (max-width:767px){.hero-glass h1 .h1-line{max-width:13ch}.hero-glass h1 .eyebrow{font-size:11.5px;letter-spacing:.07em;gap:8px}}

/* Photos first (Dallin), then logos. Photos lift on hover; logos keep moving and stay their size */
.marquee-section{padding:8px 0 0}
.photo-marquee{padding:14px 0 22px}
.photo-marquee .marquee-track img{transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
.photo-marquee .marquee-track img:hover{transform:translateY(-8px);box-shadow:0 20px 36px -16px rgba(11,36,86,.5)}
.clients{padding:36px 0 104px}
@media (max-width:767px){.marquee-section{padding:0}.clients{padding:24px 0 64px}}

/* Corporate block */
.list-label{font-weight:600;margin:4px 0 -10px}

/* Homepage services: two cards, Clouds and Wishes */
.tier-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.tier-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-img);overflow:hidden;display:flex;flex-direction:column;transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
.tier-card:hover{transform:translateY(-6px);box-shadow:0 26px 48px -26px rgba(11,36,86,.4)}
/* R13 (client): no navy outline on the Wishes card. It keeps the same faint --line border as the Clouds card; padding-box
   stops the navy fill from showing through that 1px ring, so both cards have an identical edge around the photo. */
.tier-card.wish{background:var(--navy);background-clip:padding-box}
.tier-img{display:block;aspect-ratio:4/3;overflow:hidden}
.tier-img img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease-out)}
.tier-card:hover .tier-img img{transform:scale(1.04)}
.tier-body{padding:32px 36px 36px;display:flex;flex-direction:column;gap:12px;flex:1}
.tier-body .top-row,.tier-section .top-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tier-body .tier-word,.tier-section .top-row .tier-word{font-size:clamp(30px,2.6vw,38px)}
.tier-card.wish .tier-word{color:var(--white)}
.tier-body .eyebrow{margin:2px 0 0}
.tier-body h3{font-size:clamp(24px,2vw,30px);margin:0 0 2px}
.tier-body p{font-size:16.5px;margin:0}
.tier-card.wish .tier-body p{color:rgba(255,255,255,.9)}
.tier-body .price,.tier-section .price{font-family:var(--font-head);font-size:22px;font-weight:500;margin-top:6px}
.tier-card.wish .tier-body .price{color:var(--white)}
.tier-body .btn-row{margin-top:auto;padding-top:12px}
@media (max-width:899px){.tier-cards{grid-template-columns:1fr}.tier-body{padding:26px 24px 28px}}

/* Frozen photo sub line */
.pin-line,.pin-sub{text-shadow:0 2px 22px rgba(11,36,86,.6)}
.pin-sub{color:rgba(255,255,255,.92);font-size:clamp(17px,1.4vw,20px);margin:14px 0 0;max-width:46ch}

/* Testimonials: bigger section, no Google mark, stars twinkle until the card is hovered */
.reviews{padding-top:calc(var(--section) + 28px);padding-bottom:calc(var(--section) + 28px)}
.reviews .sec-head{margin-bottom:56px}
.review-grid{gap:28px}
.review{padding:40px 38px 36px;gap:22px}
.review blockquote{font-size:clamp(20px,1.75vw,24px);line-height:1.42}
.review cite{font-size:15px}
.star-rating{gap:4px}
.star-rating svg{width:22px;height:22px}
.star-rating.twinkle svg{animation:starTwinkle 2.6s var(--ease-in-out) infinite;transform-origin:50% 50%}
.star-rating.twinkle svg:nth-child(2){animation-delay:.3s}
.star-rating.twinkle svg:nth-child(3){animation-delay:.6s}
.star-rating.twinkle svg:nth-child(4){animation-delay:.9s}
.star-rating.twinkle svg:nth-child(5){animation-delay:1.2s}
@keyframes starTwinkle{0%,62%,100%{transform:scale(1) rotate(0);opacity:1;filter:none}31%{transform:scale(1.25) rotate(10deg);opacity:.7;filter:drop-shadow(0 0 6px rgba(254,215,21,.9))}}
.review:hover .star-rating.twinkle svg,.review:focus-within .star-rating.twinkle svg{animation:none}
@media (max-width:767px){.review{padding:30px 26px 28px}}

/* Back button (every inner page) */
.crumb-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:22px}
.crumb-row .crumbs{margin:0}
.back-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 15px 6px 11px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);font-size:14px;font-weight:500;color:var(--navy);transition:border-color 150ms,color 150ms}
.back-btn:hover{border-color:var(--blue);color:var(--blue)}
.back-btn .lucide{width:16px;height:16px;transition:transform 200ms var(--ease-out)}
.back-btn:hover .lucide{transform:translateX(-3px)}
@media (hover:none){.back-btn{min-height:44px}}

/* Services menu: Clouds and Wishes first */
.nav-dropdown-menu li.tier a{display:flex;align-items:baseline;gap:10px;padding:9px 20px}
.nav-dropdown-menu li.tier .tier-word{font-size:19px;color:var(--navy)}
.nav-dropdown-menu li.tier .small{font-size:12.5px;color:var(--ink-soft)}
.nav-dropdown-menu li.dd-label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:12px 20px 4px;border-top:1px solid var(--line);margin-top:6px}
.mobile-menu .msub a.mtier{font-family:var(--font-head);font-style:italic;font-size:19px;color:var(--white)}

/* Booking form */
.form-booking{scroll-margin-top:96px}
.date-row{display:flex;gap:14px;align-items:center}
.date-row input[type="date"]{flex:1;min-width:0}
.field .check{display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;color:var(--navy);cursor:pointer}
.field .check input{width:18px;height:18px;padding:0;border:0;margin:0;accent-color:var(--blue);flex:none}
.field input:disabled{opacity:.5;cursor:not-allowed}
.other-field.fade{animation:fieldsIn 200ms var(--ease-out)}
@media (max-width:420px){.date-row{flex-direction:column;align-items:stretch;gap:10px}}

/* Services page: Clouds vs Wishes */
.cw-intro{max-width:820px;text-align:center}
.cw-intro p{margin-top:1em}
.tier-section{position:relative;overflow:hidden;scroll-margin-top:84px}
.tier-section > .container{position:relative;z-index:1}
.tier-section .top-row{justify-content:flex-start;gap:14px;margin-bottom:12px}
.tier-section .split-copy .eyebrow{margin-bottom:10px}
.tier-section.wish .split-copy p{color:rgba(255,255,255,.9)}
.tiles-label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:72px 0 22px}
.tiles-label .spark{width:12px;height:12px;flex:none;fill:var(--star)}
.on-dark .tiles-label{color:rgba(255,255,255,.82)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.on-dark .card,.on-dark .card h3{color:var(--navy)}
.on-dark .card a:not(.btn){color:var(--blue);text-decoration:none}
.on-dark .card .text-link::after{background:var(--blue)}
.glance .table-wrap{max-width:980px;margin:0 auto}
.glance td:first-child{white-space:nowrap}
@media (max-width:1199px){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.cards.four{grid-template-columns:1fr}.tiles-label{margin-top:48px}.glance td:first-child{white-space:normal}}
/* Round 5: photo-shoot frozen photos are bright studio shots; a deeper scrim keeps the white copy readable */
.pin:has(.pin-img[src*="pin-brand-"]) .pin-scrim{background:linear-gradient(180deg,rgba(11,36,86,.12) 0%,rgba(11,36,86,.4) 50%,rgba(11,36,86,.8) 100%)}
/* Round 5: on phones the frozen photo shows a narrow center slice; aim it at the balloons */
@media (max-width:767px){.pin-img[src*="pin-woods-cross-towers"]{object-position:16% 50%}.pin-img[src*="pin-cream-arch"]{object-position:12% 50%}}

/* ============================================================
   ROUND 6 (2026-10-24): full-site client copy
   ============================================================ */
/* Keyword eyebrow inside the H1 on inner pages (same pattern as the homepage since Round 4) */
.hero-split h1 .eyebrow,.hero-simple h1 .eyebrow,.gallery-top h1 .eyebrow{display:flex;margin:0 0 14px;max-width:none;line-height:1.5;text-wrap:balance}
.hero-simple h1 .eyebrow,.gallery-top h1 .eyebrow{justify-content:center}
h1 .h1-line{display:block;text-wrap:balance}
.hero-split .hero-price{font-family:var(--font-head);font-size:22px;font-weight:500;color:var(--navy);margin:-12px 0 24px}
.hero-simple h1 .spark{width:.55em;height:.55em;fill:var(--star);vertical-align:-.02em;margin-left:.08em}
/* Frozen photo heading as a real H2; the body slides over it */
h2.pin-line{font-weight:400;max-width:22ch}
.over-copy p{font-size:clamp(17px,1.35vw,20px);line-height:1.6;margin-bottom:1.1em}
.over-copy .btn-row{margin-top:8px}
/* Services and Pricing: Clouds / Wishes sections with H3s, price tables, checklists */
.tier-section .split-copy h3{margin:22px 0 8px;font-size:clamp(20px,1.7vw,24px)}
.tier-section .split-copy .bullets{margin:12px 0 18px}
.cw-details{margin-top:56px}
.cw-details .detail .table-wrap{margin:4px 0 10px}
.price-h3{margin:56px 0 18px;font-size:clamp(22px,2vw,28px)}
.on-dark .checklist li{color:var(--navy)}
.on-dark .table-wrap{color:var(--navy)}
.detail-grid.three{grid-template-columns:repeat(3,1fr)}
.glance th .tier-word{text-transform:none;letter-spacing:0;font-size:22px;vertical-align:middle}
.glance th .lucide{width:16px;height:16px;vertical-align:middle;margin-left:8px;color:var(--blue)}
.glance th:nth-child(3) .lucide{color:var(--navy)}
/* Contact chooser cards: tier, one line, price, button label */
.tabs.chooser .tab{gap:10px;padding:22px 22px 20px}
.tabs.chooser .tab-title{font-family:var(--font-head);font-size:19px;line-height:1.2;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.tabs.chooser .tab-title .tier-word{font-size:24px}
.tabs.chooser .tab-sep{color:var(--dream)}
.tabs.chooser .tab .price{font-family:var(--font-head);font-size:20px;font-weight:500;color:var(--navy)}
.tabs.chooser .tab-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--blue);color:var(--white);font-weight:600;font-size:14px;align-self:flex-start;transition:background var(--d-fast)}
.tabs.chooser .tab[aria-selected="true"] .tab-cta{background:var(--navy)}
/* Forms */
.field[hidden]{display:none}
.delivery-field.fade{animation:fieldsIn 200ms var(--ease-out)}
.radios label .muted{color:var(--ink-soft);font-size:13.5px}
.radios.cols.five{grid-template-columns:repeat(3,1fr)}
.file-field input[type="file"]{padding:10px;border:1.5px dashed var(--line);border-radius:var(--r-field);background:var(--white);width:100%}
/* About: the founding story beside a sticky photo */
.split.story{align-items:start}
.story-photo{position:sticky;top:110px}
/* Narrow copy sections (Reviews, Thank you): breathing room under the H2 */
.container.narrow > h2{margin-bottom:16px}
/* Reviews: slot for the Google reviews display */
.reviews-slot{border:1.5px dashed var(--line);border-radius:var(--r-card);padding:28px;text-align:center;margin-top:20px;background:var(--white)}
/* Footer: Say Hello rows, legal links */
.footer-contact li span strong{color:rgba(255,255,255,.6);font-weight:600}
.footer-bottom .legal a{color:inherit}
@media (max-width:1023px){.detail-grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.detail-grid.three{grid-template-columns:1fr}.story-photo{position:static}.radios.cols.five{grid-template-columns:1fr 1fr}.cw-details{margin-top:40px}.price-h3{margin-top:40px}.hero-split .hero-price{margin:-6px 0 20px}}


/* ============================================================
   ROUND 7 (2026-10-24): client meeting notes
   ============================================================ */
/* Wishes mark. R12/R12b: a single filled four-point star, 1.3x taller than wide. Colours come from the same .lucide
   rules the cloud uses (chip yellow on navy, detail blue, table navy). A solid narrow star has less area than the
   cloud's outline, so it runs ~3px larger in chips, gallery badges and the table header to look the same size. */
.wstar{fill:currentColor;stroke:none;flex:none}
.chip .wstar{width:17px;height:17px;margin:-1.5px}
.chip.icon-only .wstar{width:19px;height:19px;margin:0}
.glance th .wstar{width:19px;height:19px}
/* Gallery chips: icon only */
.chip.icon-only{padding:0;gap:0;width:30px;height:30px;justify-content:center}
.chip.icon-only .lucide{width:16px;height:16px}

/* Header: Instagram where the phone was */
.header-social{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--navy);white-space:nowrap}
.header-social .lucide{width:18px;height:18px;color:var(--blue)}
.header-social:hover{color:var(--blue)}
@media (max-width:1099px) and (min-width:900px){.header-social{display:none}}
@media (max-width:899px){.header .header-social{display:inline-flex;font-size:15px}}

/* Services menu: two columns (Clouds / Wishes / All Services | By event) */
.nav-dropdown-menu{min-width:580px;padding:12px 10px}
.dd-cols{display:grid;grid-template-columns:1fr 1.1fr;gap:6px}
.dd-col+.dd-col{border-left:1px solid var(--line);padding-left:6px}
.nav-dropdown-menu .dd-col li a{border-radius:10px}
.nav-dropdown-menu li.dd-label{border-top:0;margin-top:0;padding:10px 20px 6px}
.nav-dropdown-menu li.all{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}

/* Mobile menu: Services accordion */
.mobile-menu .macc{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:30px;color:var(--white);padding:6px 0}
.mobile-menu .macc .lucide{width:24px;height:24px;transition:transform 200ms var(--ease-out)}
.mobile-menu .macc[aria-expanded="true"] .lucide{transform:rotate(180deg)}
.mobile-menu .msub[hidden]{display:none}
.mobile-menu .msub a.mall{font-weight:600;color:var(--white);margin-top:4px}

/* Homepage hero: copy on top, the brand-shoot photo in a wide frame underneath; logos right after, then the photo row */
.top .hero-home{padding:28px 0 0;margin-top:0;overflow:hidden}
.top .hero-home .hero-copy{position:relative;z-index:1;padding:28px 16px 36px;max-width:860px;margin:0 auto}
.hero-glass .hero-ctas{margin-top:28px}
.hero-photo-band{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:0 24px}
.hero-photo-band img{width:100%;height:auto;aspect-ratio:2000/1080;object-fit:cover;border-radius:var(--r-img);opacity:0;animation:fadeUp var(--d-slower) var(--ease-out) 350ms forwards}
.top .clients{padding:30px 0 6px}
.top .marquee-section{padding:8px 0 0}
.top .photo-marquee{padding:14px 0 44px}
@media (max-width:899px){.top .hero-home{padding-top:20px}}
@media (max-width:767px){
  .top .hero-home .hero-copy{padding:16px 8px 26px}
  .hero-photo-band{padding:0 16px}
  .hero-photo-band img{aspect-ratio:4/3;border-radius:18px}
  .top .clients{padding:22px 0 0}
  .top .photo-marquee{padding:10px 0 32px}
}
@media (prefers-reduced-motion:reduce){.hero-photo-band img{opacity:1 !important;animation:none !important}}

/* The wave takes the color of the section above it, so light-blue and navy sections run all the way into the blue */
.bg-dream-soft + .wave,.over.bg-dream-soft + .wave{background:var(--dream-soft)}
.bg-navy + .wave,.tier-section.wish + .wave{background:var(--navy)}
.bg-white + .wave,.over.bg-white + .wave{background:var(--white)}
.bg-dream + .wave{background:var(--dream)}

/* Stars: more of them, a touch brighter, and in the top/bottom bands on every screen size */
.amb .tw.t,.amb .tw.b{left:var(--x)}
.amb .tw{opacity:.16}
@keyframes twinkle{0%,100%{opacity:.16;transform:translate(-50%,-50%) scale(.7)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.05)}}
/* 404: big twinkling stars across the hero */
.amb.big-stars .tw{left:var(--x);top:var(--y);opacity:.3;animation-name:twinkleBig}
@keyframes twinkleBig{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.75) rotate(0deg)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.12) rotate(8deg)}}
.nf-hero{padding-top:88px;padding-bottom:72px}
@media (max-width:767px){.amb.big-stars .tw{width:calc(var(--s) * .7);height:calc(var(--s) * .7)}}

/* Pricing: the Wishes photo is now the 4:3 Swig arch */
.tier-section .split-img.r43{max-width:600px}

/* Services hub: branded-tower card beside the price table, pickup/delivery below */
.cw-details .detail.photo{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
.cw-details .detail.photo .detail-photo{border-radius:16px;overflow:hidden;aspect-ratio:4/5}
.cw-details .detail.photo .detail-photo img{width:100%;height:100%;object-fit:cover}
.cw-details .detail.photo .price{font-family:var(--font-head);font-size:22px;font-weight:500;margin:4px 0 8px}
.cw-details .detail.photo p:last-child{margin:0}
table td .muted{color:var(--ink-soft);font-size:14px}
@media (max-width:599px){.cw-details .detail.photo{grid-template-columns:1fr}.cw-details .detail.photo .detail-photo{max-width:220px}}

/* Gallery: a wider wall (4 columns on big desktops), Instagram CTA under it */
.container.gwide{max-width:1760px;padding:0 32px}
.ginsta{justify-content:center;margin-top:40px}
@media (max-width:767px){.container.gwide{padding:0 16px}}

/* Testimonials rotate: one card at a time cross-fades to the next review in the pool (site.js) */
.review .star-rating.twinkle svg{animation-duration:2.6s}

/* R7b: homepage tier cards show the full 4:3 card photo (16:10 frame was trimming the tower topper) */
/* R8: .tier-img is 4:3 site-wide; R8b: the two homepage cards are square so the tall tower/garland fill the frame */
#services .tier-img{aspect-ratio:1/1}

/* R7b-4: services "Branded towers" card = full-bleed photo with a frosted copy panel (>=1100px); side-by-side thumb below */
.cw-details .detail.photo .detail-photo img{object-position:left center}
@media (min-width:1100px){
  .cw-details .detail.photo{display:block;position:relative;padding:0;overflow:hidden;aspect-ratio:1/1;min-height:100%}
  .cw-details .detail.photo .detail-photo{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
  .cw-details .detail.photo .detail-copy{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:min(46%,250px);padding:22px 22px 20px;background:rgba(255,251,247,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);border-radius:16px;box-shadow:0 12px 32px rgba(11,36,86,.14)}
  .cw-details .detail.photo .detail-copy h3{font-size:22px}
  .cw-details .detail.photo .detail-copy .price{margin:4px 0 8px}
  .cw-details .detail.photo .detail-copy p:last-child{font-size:15px;line-height:1.5}
}

/* R7b: gallery filter row with the Instagram button on the right */
.gtop{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;margin:0 0 32px}
.gtop .gfilters{margin:0;justify-content:center;flex:0 1 auto}
.gtop .btn{flex:none;padding:9px 18px;font-size:14px}
@media (max-width:767px){.gtop{justify-content:center}.gtop .gfilters{justify-content:center;flex:1 1 100%}}

/* R7b: legend pairs (icon + offer) never split across lines */
.legend .lg{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

/* R7b: services Wishes split - photo starts level with the copy and stays put while the copy scrolls (overflow:clip keeps the
   section clipping its stars without becoming a scroll container, which overflow:hidden would) */
.tier-section.has-sticky{overflow:clip}
.split.sticky{align-items:start}
.split.sticky .split-img{position:sticky;top:110px}
@media (max-width:767px){.split.sticky .split-img{position:static}}

/* R7b-9: homepage hero redesign. The brand photo is the stage; the copy sits on the empty white wall lower-left and the two
   CTAs stack lower-right beside Helam (>=1100px). Below 1100px the pieces stack: copy, buttons, photo. */
.hero-overlay .hero-stage-wrap{position:relative;max-width:1500px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column}
.hero-overlay .hero-copy{order:1}
.hero-overlay .hero-ctas-side{order:2;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:-10px 0 30px;opacity:0;animation:fadeUp var(--d-slow) var(--ease-out) 400ms forwards}
.hero-overlay .hero-photo-band{order:3;padding:0;max-width:none}
.hero-overlay .hero-photo-band img{aspect-ratio:2000/1180}
.top .hero-overlay .hero-copy{padding-bottom:12px}
@media (min-width:1100px){
  .top .hero-overlay{padding-top:20px}
  .top .hero-overlay .hero-copy{position:absolute;z-index:2;left:calc(24px + 4.5%);bottom:21%;width:31%;max-width:470px;margin:0;padding:0}
  .hero-overlay .hero-glass{align-items:flex-start;text-align:left}
  .hero-overlay .hero-glass h1 .eyebrow{justify-content:flex-start;margin:0 0 14px;text-align:left}
  .hero-overlay .hero-glass h1{font-size:clamp(36px,3.1vw,44px)}
  .hero-overlay .hero-glass h1 .h1-line{margin:0;max-width:15ch}
  .hero-overlay .hero-glass .lead{margin:16px 0 0;max-width:34ch;font-size:16px;line-height:1.5}
  .hero-overlay .hero-ctas-side{position:absolute;z-index:2;right:calc(24px + 4%);bottom:15%;flex-direction:column;align-items:stretch;gap:12px;margin:0;width:min(22%,300px)}
  .hero-overlay .hero-ctas-side .btn{width:100%;justify-content:center}
  .hero-overlay .hero-ctas-side .btn-outline{background:rgba(255,251,247,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
@media (max-width:1099px){.hero-overlay .hero-glass .hero-ctas,.hero-overlay .hero-ctas-side{margin-top:0}}
@media (max-width:767px){.hero-overlay .hero-ctas-side{margin:-4px 0 24px}}
@media (prefers-reduced-motion:reduce){.hero-overlay .hero-ctas-side{opacity:1 !important;animation:none !important}}
/* R7b-9: overlay eyebrow wraps to two lines in the narrow copy column - star stays on line one, no trailing star */
@media (min-width:1100px){.hero-overlay .hero-glass h1 .eyebrow{align-items:flex-start;line-height:1.55}.hero-overlay .hero-glass h1 .eyebrow .spark:last-child{display:none}.hero-overlay .hero-glass h1 .eyebrow .spark{margin-top:3px}}
/* R7b-9: keep the hero on the first screen of short laptops; narrower copy column at 1100-1279 so the lead clears Brynne */
/* R7b-9b (Dallin): the hero fills the first screen on any monitor - 24px gutters, height = viewport minus header, photo
   cover-cropped from the top (balloons bleed off, shoes stay). Copy and CTAs are positioned inside that box, so they can never
   fall outside the photo. Type scales a little with the screen so the copy keeps its presence on big monitors. */
@media (min-width:1100px){
  .hero-overlay .hero-stage-wrap{max-width:none;display:block;height:clamp(560px,calc(100svh - 128px),1400px)}
  /* the band had margin:0 auto, which inside the flex column stopped it stretching, so the photo shrank to its natural
     width and centred while the copy stayed anchored to the full-width wrap (Dallin's screenshot). The band now fills the wrap. */
  .hero-overlay .hero-photo-band{position:absolute;inset:0 24px;margin:0;padding:0;max-width:none}
  .hero-overlay .hero-photo-band picture{display:block;height:100%}
  .hero-overlay .hero-photo-band img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 88%}
  .top .hero-overlay .hero-copy{width:36%;max-width:660px;bottom:19%}
  .hero-overlay .hero-glass h1{font-size:clamp(40px,2.7vw,58px)}
  .hero-overlay .hero-glass .lead{font-size:clamp(16px,0.95vw,20px);max-width:42ch}
  .hero-overlay .hero-ctas-side{width:min(22%,320px);bottom:14%}
}
@media (min-width:1100px) and (max-width:1279px){.top .hero-overlay .hero-copy{width:32%}.hero-overlay .hero-glass h1{font-size:36px}.hero-overlay .hero-glass .lead{max-width:33ch;font-size:15px}.hero-overlay .hero-ctas-side{width:min(24%,300px)}}

/* ---------- R8 (2026-11-02, client notes round 2) ---------- */
/* A2: Wishes buttons are Signature Blue on navy; the default hover (Royal) vanishes on navy, so hover goes white/blue */
.on-dark .btn-primary:hover{background:var(--white);color:var(--blue)}
/* B2: the services pin had Helam's hair on the top edge; wider-than-16:9 windows cover-crop the top. Keep the top of the
   frame and give up floor instead (file re-cropped with headroom too). Same preventive anchor on the home pin. */
.pin-img[src*="pin-brand-"]{object-position:center 15%}
:root{--hdr-h:73px}

/* ---------- R9 (2026-11-02): Google reviews slider — prev/next, no auto-advance ---------- */
.rv-slider{position:relative}
.rv-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-28px 0 24px;min-height:48px}
.rv-google{margin:0;font-size:15px;display:inline-flex;align-items:center;gap:10px}
.rv-google a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.rv-google a:hover{border-bottom-color:var(--white)}
.rv-slider.light .rv-google a{border-bottom-color:var(--line);color:var(--navy)}
.rv-slider.light .rv-google a:hover{border-bottom-color:var(--navy)}
.rv-nav{display:flex;gap:10px;margin-left:auto}
.rv-btn{width:48px;height:48px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:var(--white);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast),opacity var(--d-fast)}
.rv-btn .lucide{width:20px;height:20px}
.rv-btn:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.rv-btn:disabled{opacity:.35;cursor:default;background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.rv-slider.light .rv-btn{border-color:var(--navy);color:var(--navy)}
.rv-slider.light .rv-btn:hover{background:var(--navy);color:var(--white)}
.rv-slider.light .rv-btn:disabled{background:transparent;color:var(--navy);border-color:var(--navy)}
.rv-static .rv-nav{display:none}
.review-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 8px;margin:0;list-style:none;overscroll-behavior-x:contain}
.review-track::-webkit-scrollbar{display:none}
.review-track > .review{flex:0 0 calc((100% - 56px) / 3);scroll-snap-align:start}
@media (max-width:1099px){.review-track > .review{flex-basis:calc((100% - 28px) / 2)}}
@media (max-width:767px){.review-track > .review{flex-basis:100%}.rv-toolbar{margin-top:-16px}}
.review blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.review.open blockquote{display:block;-webkit-line-clamp:unset;overflow:visible}
.rv-more{align-self:flex-start;background:none;border:0;padding:0;margin:-10px 0 0;color:var(--blue);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.rv-more:hover{text-decoration:underline}
.review cite{flex-direction:row;align-items:center;gap:12px}
.review cite > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.rv-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.rv-name{color:var(--navy);font-weight:600;text-decoration:none}
a.rv-name:hover{text-decoration:underline}
.rv-slider.light .review{border:1px solid var(--line)}
.rv-google[hidden]{display:none}  /* the Google line stays hidden until the live feed answers (inline-flex would override [hidden]) */

/* R9b: reviewer name must stay navy on the white cards inside the navy section (beats .on-dark a) */
.on-dark .review a.rv-name{color:var(--navy);text-decoration:none}
.on-dark .review a.rv-name:hover{text-decoration:underline;text-decoration-color:currentColor}

/* R10: Women in Manufacturing logo carries small script text; needs more height than the other squarish logos */
.logo-marquee .marquee-track img.xtall{height:88px}
@media (max-width:767px){.logo-marquee .marquee-track img.xtall{height:76px}}
.radios label[hidden]{display:none}  /* R11: size options above the chosen design's cap */

/* ============================================================
   R15 (2026-11-04): Testimonials night sky, no labels on photos, no phone
   ============================================================ */
/* Contact "Prefer to chat?": two cards now (email, Instagram) */
.info-grid.two{grid-template-columns:repeat(2,1fr);max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:640px){.info-grid.two{grid-template-columns:1fr}}

/* Reviews. Wall (no JS, reduced motion, the Reviews page): every review, full text, balanced columns */
.rv-sky{position:relative}
.rv-sky .review-track{display:block;columns:3 300px;column-gap:28px;overflow:visible;scroll-snap-type:none;padding:0;margin:0;list-style:none}
.rv-sky .review-track > .review{break-inside:avoid;flex:none;margin:0 0 28px;width:auto}
.rv-sky .review blockquote{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:clamp(18px,1.35vw,20px);line-height:1.45}
.rv-sky .review.long blockquote{font-size:16.5px;line-height:1.55}
.rv-sky.light .review{border:1px solid var(--line)}
/* Sky (site.js adds .is-sky): cards appear at random spots across the section and twinkle in and out like the stars.
   The sky is wider than the 1280 container on big screens so the cards have room to wander. */
.rv-sky.is-sky{width:max(100%,min(100vw - 64px,1560px));left:50%;transform:translateX(-50%)}
.rv-sky.is-sky .review-track{columns:auto;position:relative;height:560px}
.rv-sky.is-sky .review-track > .review{position:absolute;left:0;top:0;margin:0;opacity:0;visibility:hidden;pointer-events:none}
.rv-sky.is-sky .review.rv-in{visibility:visible;pointer-events:auto;animation:rvIn 1.3s var(--ease-out) both}
.rv-sky.is-sky .review.rv-out{visibility:visible;animation:rvOut 1s var(--ease-in-out) both}
@keyframes rvIn{0%{opacity:0;scale:.9;filter:blur(6px);box-shadow:0 0 0 0 rgba(254,215,21,0)}55%{opacity:1;scale:1.012;filter:blur(0);box-shadow:0 0 56px 6px rgba(254,215,21,.3)}100%{opacity:1;scale:1;filter:none;box-shadow:0 0 0 0 rgba(254,215,21,0)}}
@keyframes rvOut{from{opacity:1;scale:1;filter:none}to{opacity:0;scale:.95;filter:blur(4px)}}
/* a gold spark (the Wishes star shape) twinkles once on a top corner as each card arrives */
.rv-sky.is-sky .review::before{content:"";position:absolute;top:-16px;right:-12px;width:26px;height:34px;background:var(--star);opacity:0;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5c0 6.67 3.72 11.5 8.85 11.5-5.13 0-8.85 4.83-8.85 11.5 0-6.67-3.72-11.5-8.85-11.5 5.13 0 8.85-4.83 8.85-11.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5c0 6.67 3.72 11.5 8.85 11.5-5.13 0-8.85 4.83-8.85 11.5 0-6.67-3.72-11.5-8.85-11.5 5.13 0 8.85-4.83 8.85-11.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.rv-sky.is-sky .review.sp-l::before{right:auto;left:-12px}
.rv-sky.is-sky .review.rv-in::before{animation:rvSpark 1.9s var(--ease-out) .2s both}
@keyframes rvSpark{0%{opacity:0;scale:.2;rotate:-25deg}35%{opacity:1;scale:1.1;rotate:6deg}100%{opacity:0;scale:.5;rotate:18deg}}
/* stars over the whole section, not just the padding bands and margins */
.star-field.sky .tw{left:var(--x);top:var(--y)}
@media (max-width:767px){
  .rv-sky .review blockquote{font-size:18px}
  .rv-sky .review.long blockquote{font-size:15.5px;line-height:1.5}
  .star-field.sky .tw:nth-child(3n){display:none}
}

/* R15b (Dallin): any review from the live feed sizes itself. Very long reviews (900+ characters) get a smaller font;
   any card taller than the sky allows shows the lines that fit, fades out, and gets "Read more" (full review in a
   dialog). Reviewers' own line breaks are kept; long links or unbroken text wrap inside the card. */
.rv-sky .review blockquote{white-space:pre-line;overflow-wrap:anywhere}
.rv-sky .review.xlong blockquote{font-size:15.5px;line-height:1.55}
.rv-sky .review.clamped blockquote{max-height:var(--qmax);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 3em),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 3em),transparent)}
.rv-sky .rv-more{margin:-10px 0 0}
.rv-sky .rv-more[hidden]{display:none}
.rv-dialog{border:0;padding:0;background:transparent;width:min(680px,calc(100vw - 32px));max-width:none;max-height:none;overflow:visible;color:var(--navy)}
.rv-dialog::backdrop{background:rgba(11,36,86,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rv-dialog .review{position:relative;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;padding:44px 40px 34px;border:0}
.rv-dialog .review blockquote{font-size:19px;line-height:1.6;max-height:none;-webkit-mask-image:none;mask-image:none}
.rv-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:999px;border:0;background:var(--ivory);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.rv-close:hover{background:var(--navy);color:var(--white)}
.rv-close .lucide{width:20px;height:20px}
@media (max-width:767px){
  .rv-sky .review.xlong blockquote{font-size:15px}
  .rv-dialog .review{padding:40px 24px 28px}
  .rv-dialog .review blockquote{font-size:17px}
}
/* R15c (Dallin): click or tap a review in the sky and it fades away for the next one */
.rv-sky.is-sky .review.rv-in{cursor:pointer}

/* R16 (Dallin): branded-towers frozen photo is the logo-topper tower in the studio (wall extended to a wide band).
   The tower sits at ~65-85% of the width. Anchored to the top so the balloon top never crops. 83% keeps the whole
   tower in view from phones (box ~0.5:1) up to tablets; wide screens use 55% so it stays clear of the headline. */
.pin-img[src*="pin-brand-logo-tower"]{object-position:83% 0%}
@media (min-aspect-ratio:3/2){.pin-img[src*="pin-brand-logo-tower"]{object-position:55% 0%}}
/* portrait screens load the portrait frame (picture source, same media): tower centred, top anchored */
@media (max-aspect-ratio:1/1){.pin-img[src*="pin-brand-logo-tower"]{object-position:50% 0%}}

/* R16 (Dallin): "Add your inspiration" photo picker on the Wishes form (site.js adds .ready) */
.file-field{position:relative}
.file-field .drop{display:none}
.file-field.ready input[type="file"]{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.file-field.ready .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:124px;margin:0;padding:22px 16px;text-align:center;cursor:pointer;background:var(--ivory);border:1.5px dashed rgba(49,112,191,.45);border-radius:var(--r-field);color:var(--navy);font-size:16px;font-weight:400;letter-spacing:0;text-transform:none;transition:border-color var(--d-fast),background var(--d-fast),box-shadow var(--d-fast)}
.file-field.ready .drop:hover,.file-field.dragging .drop{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(49,112,191,.12)}
.file-field:has(input:focus-visible) .drop{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(49,112,191,.28)}
.file-field .drop .lucide{width:30px;height:30px;color:var(--blue);margin-bottom:6px}
.file-field .drop-main{font-weight:600}
.file-field .drop-sub{font-size:14px;color:var(--ink-soft)}
.file-field.is-full .drop{opacity:.55;cursor:default;box-shadow:none;border-color:rgba(49,112,191,.45);background:var(--ivory)}
.file-field .thumbs{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.file-field .thumbs:empty,.file-field .upload-status:empty{display:none}
.file-field .thumbs li{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--ivory);border:1px solid var(--line)}
.file-field .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.file-field .thumb-x{position:absolute;top:5px;right:5px;width:28px;height:28px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(11,36,86,.78);transition:background var(--d-fast)}
.file-field .thumb-x::after{content:"";position:absolute;inset:-8px}
.file-field .thumb-x:hover{background:var(--navy)}
.file-field .thumb-x:focus-visible{outline:2px solid var(--white);outline-offset:-4px;box-shadow:0 0 0 2px var(--blue)}
.file-field .upload-status{font-size:14px;color:var(--navy);margin:10px 0 0}
@media (max-width:480px){.file-field .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* R16b (Dallin): once photos are added they replace the big drop zone; a small "+" tile at the end of the row adds more */
.file-field.ready.has-photos .drop{display:none}
.file-field.has-photos .thumbs{margin-top:2px}
.file-field .thumbs li.add{border:0;background:none;overflow:visible}
.file-field .add-tile{display:grid;place-items:center;width:100%;height:100%;margin:0;cursor:pointer;color:var(--blue);background:var(--ivory);border:1.5px dashed rgba(49,112,191,.45);border-radius:12px;transition:border-color var(--d-fast),background var(--d-fast),box-shadow var(--d-fast),color var(--d-fast)}
.file-field .add-tile:hover,.file-field.dragging .add-tile{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(49,112,191,.12)}
.file-field.has-photos:has(input:focus-visible) .add-tile{border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(49,112,191,.28)}
.file-field.dragging .thumbs li:not(.add){opacity:.7}
/* R16c (Dallin, security): the photo field only shows once site.js has it ready, so every file that leaves the site is a photo redrawn there */
.file-field:not(.ready){display:none}