/* assets/css/style.css */
/* ============================================================
   SA MEDIA — Premium cinematic design system
   ============================================================ */

/* ── Font: Jost, self-hosted (latin, variable weight; OFL, assets/fonts/Jost-OFL.txt).
   includes/meta.php preloads the file. ── */
@font-face{
  font-family:'Jost';
  src:url('../fonts/jost-latin-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Base: these rules were the inline style element in includes/meta.php, placed before this
   file; moved here unchanged and first, so the cascade is the same (SA-15, CSP). ── */
:root{
  --bg:#0d0d0f;--bg-2:#141417;--bg-3:#1b1b1f;
  --cream:#f3f0ea;--ink:#111114;
  --white:#ffffff;--muted-d:#9a9aa1;--muted-l:#5f5f66;
  --gold:#d8a13f;--coral:#ff4b4b;
  --line-d:rgba(255,255,255,.11);--line-l:rgba(0,0,0,.12);
  --sans:'Jost',system-ui,sans-serif;
  --wrap:1280px;--gut:40px;
  --sect:clamp(80px,11vw,150px);
  --radius:4px;
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{font-family:var(--sans);background:#0d0d0f;color:#fff;font-size:16px;line-height:1.65;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
img{display:block;max-width:100%;}
svg{overflow:hidden;}
.reveal{opacity:0;}
.hero,.page-hero{background:#0d0d0f;min-height:100vh;}
.site-header{position:absolute;top:0;left:0;right:0;z-index:200;background:var(--bg);background:color-mix(in srgb,var(--bg) var(--header-opacity,80%),transparent);}
body:not([data-page="home"]):not([data-section="web"]) .site-header,
body[data-section="web"]:not([data-page="web-home"]) .site-header{position:sticky;}
.mobile-nav{visibility:hidden;transform:translateX(100%);position:fixed;}


:root{
  /* color */
  --bg:        #0d0d0f;
  --bg-2:      #141417;
  --bg-3:      #1b1b1f;
  --cream:     #f3f0ea;
  --cream-2:   #e9e5dc;
  --ink:       #111114;
  --white:     #ffffff;
  --muted-d:   #9a9aa1;   /* muted text on dark */
  --muted-l:   #5f5f66;   /* muted text on light, 4.5:1 or more on cream, cream-2 and white */
  --gold:      #d8a13f;
  --gold-soft: #e6bd72;
  --gold-on-light: #855912;  /* gold text on cream, cream-2 and white, 4.8:1 or more (D25) */
  --coral:     #ff4b4b;
  --coral-700: #e23a3a;
  --action:       #d93030;   /* filled red buttons with white text, 4.76:1 (D22) */
  --action-hover: #c62828;
  --success-on-light: #1b6e37; /* success text on cream 5.5:1, on white 6.3:1 (SA-10) */
  --line-d:    rgba(255,255,255,.11);
  --line-l:    rgba(0,0,0,.12);

  /* type */
  --sans: 'Jost', system-ui, sans-serif;
  --display: 'Jost', system-ui, sans-serif;   /* headings */
  --hero-veil: .72;                            /* page-hero overlay darkness */
  --header-opacity: 80%;                       /* header bar, Settings → Header (P-06, D21) */

  /* layout */
  --wrap: 1280px;
  --gut: 40px;
  --sect: clamp(36px, 5vw, 64px);
  --radius: 4px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--white);
  font-size:17px;   /* was set to 17px by the removed tweaks script (A13) */
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--gold); color:#111; }

/* ---- typography ---- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.02em; }
.display{
  font-weight:600;
  font-size:clamp(2.1rem, 7vw, 6.4rem);
  line-height:.9;
  letter-spacing:-.035em;
}
.h-xl{ font-size:clamp(1.6rem, 3.6vw, 3.2rem); line-height:1.0; }
.h-lg{ font-size:clamp(1.3rem, 2.6vw, 2.2rem); line-height:1.06; }
.h-md{ font-size:clamp(1.0rem, 1.6vw, 1.3rem); }
.h-sm{ font-size:.9rem; font-weight:600; }

.eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:30px; height:1px;
  background:var(--gold);
  opacity:.7;
}
.eyebrow.center::before{ display:none; }
.eyebrow.center{ justify-content:center; }

.lead{ font-size:.92rem; color:var(--muted-d); line-height:1.75; }
.on-light .lead, .on-light .muted{ color:var(--muted-l); }
.muted{ color:var(--muted-d); }
.accent{ color:var(--gold); }
em.accent{ font-style:normal; color:var(--gold); }

/* ---- layout helpers ---- */
.wrap{ width:min(100% - 2*var(--gut), var(--wrap)); margin-inline:auto; }
.wrap-wide{ width:min(100% - 2*var(--gut), 1600px); margin-inline:auto; }
.section{ padding-block:var(--sect); }
.center{ text-align:center; }
.on-light{ background:var(--cream); color:var(--ink); }
.on-light h1,.on-light h2,.on-light h3,.on-light h4{ color:var(--ink); }
.eyebrow.dark{ color:var(--ink); }
.eyebrow.dark::before{ background:var(--ink); }

.grid{ display:grid; gap:var(--gut); }
.flex{ display:flex; }
.stack-sm{ display:flex; flex-direction:column; gap:14px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:500; font-size:.95rem; letter-spacing:.02em;
  padding:14px 28px;
  border:1px solid transparent;
  border-radius:12px;
  transition:.45s var(--ease);
  position:relative;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .45s var(--ease); flex:none; }
.btn-coral{ background:var(--action); color:var(--white); font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.18); } /* D22 */
.btn-coral:hover{ background:var(--action-hover); transform:translateY(-2px); box-shadow:0 8px 24px color-mix(in srgb, var(--action) 30%, transparent); }
.btn-coral:hover svg{ transform:translateX(4px); }
.btn-light{ background:var(--white); color:var(--ink); }
.btn-light:hover{ background:var(--gold); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.88); border-radius:12px; }
.on-light .btn-ghost,
.cta-band.on-light .btn-ghost{ border-color:rgba(0,0,0,.2); color:var(--ink); }
.on-light .btn-ghost:hover,
.cta-band.on-light .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

.link-u{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:600; letter-spacing:.02em;
  padding-bottom:5px;
  border-bottom:2px solid currentColor;
  transition:.35s var(--ease);
}
.link-u svg{ width:20px; height:14px; transition:transform .35s var(--ease); }
.link-u:hover{ color:var(--gold); }
.link-u:hover svg{ transform:translateX(6px); }

/* ============================================================
   HEADER
   ============================================================ */
/* Dark translucent bar on every page, over the hero too (P-06). Opacity from
   Settings → Header (80 to 100, D21); --bg shows where color-mix() is unsupported. */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:200;
  padding-block:22px;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) var(--header-opacity), transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-d);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
/* Inner pages: sticky so nav is always reachable */
body:not([data-page="home"]):not([data-section="web"]) .site-header,
body[data-section="web"]:not([data-page="web-home"]) .site-header{
  position:sticky; top:0;
}
/* Home and Creative Studio home: over the hero and fixed, so the bar stays at the top while
   the page scrolls under it, like the sticky bar on every other page. */
body[data-page="home"] .site-header,
body[data-page="web-home"] .site-header{
  position:fixed; top:0; left:0; right:0;
}
/* Menu highlight: red on Real Estate pages, yellow on Creative Studio pages (P-10) */
body{ --nav-accent:var(--coral); }
body[data-section="web"]{ --nav-accent:var(--gold); }
.header-inner{ display:flex; align-items:center; gap:30px; }
/* Text shadow so nav stays legible over video */
body[data-page="home"] .main-nav a,
body[data-page="home"] .brand-name,
body[data-page="home"] .switch-tag,
body[data-page="web-home"] .main-nav a,
body[data-page="web-home"] .brand-name,
body[data-page="web-home"] .switch-tag{
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.brand{ display:flex; align-items:center; gap:13px; margin-right:auto; }
.brand-mark{
  width:46px; height:46px; flex:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center;
  font-weight:600; font-size:1.02rem; letter-spacing:-.04em;
  color:#fff;
}
.brand-name{ font-weight:500; font-size:1.18rem; letter-spacing:.01em; line-height:1; }
.brand-name small{ display:block; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted-d); margin-top:5px; font-weight:500; }
.brand-logo-img{ max-height:70px; max-width:260px; width:auto; height:auto; object-fit:contain; display:block; } /* P-06 */
.site-footer .brand-logo-img{ max-height:76px; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-size:.97rem; font-weight:500; letter-spacing:.01em;
  color:rgba(255,255,255,.82);
  position:relative; padding-block:6px;
  transition:.3s;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:2px; background:var(--nav-accent); transition:width .3s var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color:#fff; }
.main-nav a.active::after{ width:100%; }
.main-nav a:hover::after{ width:100%; }

.nav-has-drop{ position:relative; }
.nav-drop{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  background:#16161a; border:1px solid var(--line-d);
  border-radius:4px; padding:10px; min-width:230px;
  opacity:0; visibility:hidden; transition:.28s var(--ease);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.nav-has-drop:hover .nav-drop,
.nav-has-drop:focus-within .nav-drop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop a{
  display:block; padding:10px 14px; border-radius:3px; font-size:.92rem;
  color:var(--muted-d);
}
.nav-drop a::after{ display:none; }
.nav-drop a:hover{ background:rgba(255,255,255,.05); color:#fff; padding-left:20px; }
/* Menu item with a dropdown: label and caret (were inline styles, SA-15) */
.main-nav .nav-drop-toggle{ display:inline-flex; align-items:center; }
.main-nav .nav-drop-caret{ width:13px; height:13px; margin-left:2px; }

.header-actions{ display:flex; align-items:center; gap:18px; }
/* Phone button (P-08): icon + number; icon only below 768 px */
.header-phone{ padding:13px 22px; font-size:.92rem; white-space:nowrap; }
.header-phone .header-phone-icon{ width:18px; height:18px; }
.footer-socials{ margin-top:24px; }
.site-header a:focus-visible, .site-header button:focus-visible,
.mobile-nav a:focus-visible, .mobile-nav button:focus-visible,
.site-footer a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.switch-tag{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(216,161,63,.4); color:var(--gold);
  padding:7px 14px; border-radius:40px; transition:.3s var(--ease);
  white-space:nowrap;
}
.switch-tag:hover{ background:var(--gold); color:#111; }
.socials{ display:flex; gap:10px; }
.soc{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-d);
  display:grid; place-items:center; color:rgba(255,255,255,.7);
  transition:.3s var(--ease);
}
.soc svg{ width:15px; height:15px; }
.soc:hover{ background:var(--gold); border-color:var(--gold); color:#111; transform:translateY(-2px); }

.burger{ display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-d); background:none; color:#fff; }
.burger svg{ width:20px; height:20px; margin:auto; }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:300;
  background:rgba(13,13,15,.98); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; padding:90px 8vw 40px;
  transform:translateX(100%); transition:transform .45s var(--ease), visibility 0s .45s;
  overflow-y:auto;
  visibility:hidden;
  will-change:transform;
}
.mobile-nav.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .45s var(--ease), visibility 0s 0s;
}
.mobile-nav a{ font-size:1.7rem; font-weight:500; padding:14px 0; border-bottom:1px solid var(--line-d); }
.mobile-nav .sub{ font-size:1.05rem; color:var(--muted-d); padding-left:18px; }
.mobile-close{ position:absolute; top:26px; right:8vw; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-d); background:none; color:#fff; font-size:1.4rem; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  position:relative; padding:120px 0 50px; text-align:center;
  overflow:hidden; min-height:0;
}
.page-hero .bg{ position:absolute; inset:0; z-index:0; }
.page-hero .bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(13,13,15,.7), rgba(13,13,15,.8)); }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(1.6rem,3.6vw,2.8rem); }
.crumbs{ margin-top:20px; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-d); font-weight:500; display:flex; gap:14px; justify-content:center; align-items:center; }
.crumbs a:hover{ color:var(--gold); }
.crumbs .sep{ color:var(--gold); }

/* ============================================================
   ROTATING BADGE
   ============================================================ */
.spin-badge{ position:relative; width:130px; height:130px; }
.spin-badge .ring{ width:100%; height:100%; animation:spin 14s linear infinite; }
.spin-badge .ring text{ fill:var(--gold); font-size:11.5px; font-weight:500; letter-spacing:3px; text-transform:uppercase; font-family:var(--sans); }
.spin-badge .dot{
  position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%;
  background:var(--coral); display:grid; place-items:center;
}
.spin-badge .dot svg{ width:18px; height:18px; color:#fff; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line-l); }
.on-light .svc-card{ border-right:1px solid var(--line-l); border-bottom:1px solid var(--line-l); }
.svc-card{
  padding:32px 30px; transition:.4s var(--ease); position:relative;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  background:transparent;
}
.svc-card .ic{ width:40px; height:40px; color:var(--ink); transition:.4s var(--ease); }
.svc-card .ic svg{ width:100%; height:100%; stroke-width:1.2; }
.svc-card h3{ font-size:1.15rem; }
.svc-card p{ color:var(--muted-l); font-size:.88rem; }
.svc-card .go{ margin-top:auto; padding-top:14px; color:var(--ink); transition:.4s var(--ease); }
.svc-card .go svg{ width:26px; height:14px; }
.svc-card:hover{ background:var(--ink); color:#fff; transform:translateY(-4px); z-index:2; box-shadow:0 30px 60px rgba(0,0,0,.18); }
.svc-card:hover h3{ color:#fff; }
.svc-card:hover p{ color:var(--muted-d); }
.svc-card:hover .ic, .svc-card:hover .go{ color:var(--gold); }

/* dark variant */
.svc-grid.dark{ border-color:var(--line-d); }
.svc-grid.dark .svc-card{ border-right:1px solid var(--line-d); border-bottom:1px solid var(--line-d); color:#fff; }
.svc-grid.dark .svc-card .ic, .svc-grid.dark .svc-card .go{ color:#fff; }
.svc-grid.dark .svc-card p{ color:var(--muted-d); }
.svc-grid.dark .svc-card:hover{ background:var(--bg-2); }
.svc-grid.dark .svc-card:hover .ic, .svc-grid.dark .svc-card:hover .go{ color:var(--gold); }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.stat .num{ font-size:clamp(1.8rem,3vw,2.7rem); font-weight:500; line-height:1; letter-spacing:-.04em; }
.stat .num .accent{ color:var(--gold); }
.stat .lbl{ margin-top:10px; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-d); font-weight:500; }
.on-light .stat .lbl{ color:var(--muted-l); }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pf-item{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/3.2; cursor:pointer; }
.pf-item.is-static{ cursor:default; }
.pf-item.tall{ aspect-ratio:4/5.4; }
.pf-item img{ width:100%; height:100%; object-fit:cover; transition:1s var(--ease); }
.pf-item:hover img{ transform:scale(1.07); }
.pf-overlay{
  position:absolute; inset:0; padding:30px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top, rgba(13,13,15,.85), transparent 60%);
  opacity:0; transform:translateY(14px); transition:.5s var(--ease);
}
.pf-item:hover .pf-overlay, .pf-item:focus-visible .pf-overlay{ opacity:1; transform:translateY(0); }
.pf-overlay .cat{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.pf-overlay h4{ font-size:1.45rem; margin-top:8px; color:#fff; }
.pf-overlay .plus{ position:absolute; top:26px; right:26px; width:46px; height:46px; border-radius:50%; background:var(--coral); display:grid; place-items:center; }
.pf-overlay .plus svg{ width:18px; height:18px; color:#fff; }

/* Portfolio page (SA-09): filter tabs on a white band (P-24), masonry, "Load more" */
.pf-filter{ background:var(--white); border-block:1px solid var(--line-l); padding-block:22px; }
.pf-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pf-tab{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:12px 24px;
  border:1px solid var(--line-l); border-radius:40px; background:var(--white); color:var(--ink);
  font:inherit; font-size:.95rem; font-weight:500; white-space:nowrap; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.pf-tab:hover{ color:var(--action); border-color:var(--action); }
.pf-tab[aria-selected="true"]{ background:var(--action); border-color:var(--action); color:var(--white); }
.pf-tab:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.pf-count{ font-size:.8rem; font-weight:600; color:var(--muted-l); }
.pf-tab[aria-selected="true"] .pf-count{ color:var(--white); }
.pf-body{ padding-block:var(--sect); }
.pf-masonry{ column-count:3; column-gap:18px; }
.pf-masonry:focus-visible{ outline:3px solid var(--ink); outline-offset:6px; }
.pf-masonry .pf-item{ display:block; width:100%; margin-bottom:18px; break-inside:avoid; aspect-ratio:auto; }
.pf-masonry .pf-item[hidden]{ display:none; }
/* The video row (helpers.php pairVideos) has no space left when the filter hides all its videos */
.pf-video-row:not(:has(> .pf-item:not([hidden]))){ display:none !important; }
.pf-masonry .pf-item img{ width:100%; display:block; aspect-ratio:4/3.1; object-fit:cover; }
.pf-masonry .pf-item.tall img{ aspect-ratio:4/5.3; }
.pf-item:focus-visible{ outline:3px solid var(--action); outline-offset:3px; }
.pf-more{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:26px; text-align:center; }
.pf-more-btn{ border:1px solid var(--ink); background:transparent; color:var(--ink); }
.pf-more-btn:hover{ background:var(--ink); color:var(--white); }
.pf-more-btn[hidden]{ display:none; }
@media (max-width:980px){ .pf-masonry{ column-count:2; } }
@media (max-width:768px){
  .pf-tabs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding-bottom:4px; scroll-padding-inline:var(--gut); }
}
@media (max-width:680px){ .pf-masonry{ column-count:1; } }

/* ============================================================
   PRICING
   ============================================================ */
/* ── Pricing desktop grid ─────────────────────────────────── */
.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.price-card{
  background:var(--bg-2); border:1px solid var(--line-d);
  border-radius:6px; padding:32px 24px; display:flex; flex-direction:column;
  transition:.4s var(--ease); position:relative;
}
.price-card:hover{ transform:translateY(-4px); border-color:rgba(216,161,63,.4); }
.price-card.featured{ background:#fff; color:var(--ink); border-color:#fff; }
.price-card.featured h3,.price-card.featured .price{ color:var(--ink); }

/* on-light section — cards stay dark, fix text + button visibility */
.on-light .price-card .price{ color:#fff; }
.on-light .price-card h3{ color:#fff; } /* package title on the dark card (SA-19: was ink on dark) */
.on-light .price-card .price-row .from{ color:var(--muted-d); }
.on-light .price-card p{ color:var(--muted-d); }
.on-light .price-card .feat-list li{ color:var(--muted-d); }
.on-light .price-card .btn-ghost{ border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.88); }
.on-light .price-card .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.on-light .price-card.featured{ background:#fff; border-color:#fff; box-shadow:0 8px 40px rgba(0,0,0,.18); }
.on-light .price-card.featured .price, .on-light .price-card.featured h3{ color:var(--ink); }
.on-light .price-card.featured .price-row .from{ color:var(--muted-l); }
.on-light .price-card.featured p{ color:var(--muted-l); }
.on-light .price-card.featured .feat-list li{ color:#3a3a40; }
.badge-pop{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--action); color:var(--white); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; padding:6px 16px; border-radius:40px; width:max-content; max-width:calc(100% - 24px); text-align:center; line-height:1.3;
}
.price-card .sub{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.price-card.featured .sub{ color:var(--gold-on-light); }
.price-row{ display:flex; align-items:baseline; gap:8px; margin-top:14px; }
.price-row .from{ font-size:.8rem; color:var(--muted-d); }
.price-card.featured .price-row .from{ color:var(--muted-l); }
.price{ font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:-.03em; }
.feat-list{ list-style:none; margin:16px 0; display:flex; flex-direction:column; gap:10px; }
.feat-list li{ display:flex; gap:9px; font-size:.88rem; color:var(--muted-d); line-height:1.4; align-items:flex-start; }
.price-card.featured .feat-list li{ color:#3a3a40; }
.feat-list li svg{ width:14px; height:14px; flex:none; color:var(--gold); margin-top:2px; }
.price-card .btn{ margin-top:auto; align-self:flex-start; }
.price-card.featured .btn{ align-self:stretch; justify-content:center; }
.price-tier{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.9rem; padding:10px 0; border-bottom:1px dashed var(--line-d); color:var(--muted-d); }
.price-card.featured .price-tier{ border-color:var(--line-l); color:var(--muted-l); }
.price-tier b{ color:#fff; font-weight:600; font-size:1rem; text-align:right; }
.price-card.featured .price-tier b{ color:var(--ink); }
.pkg-note{ font-size:.82rem; color:var(--muted-d); font-style:italic; margin-top:10px; line-height:1.55; }
.pricing-note{ margin-top:34px; font-size:.92rem; }

/* Add-ons and FAQ (pricing page, moved from pricing.php in SA-09) */
.addons{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-l); border-left:1px solid var(--line-l); }
.addon{ border-right:1px solid var(--line-l); border-bottom:1px solid var(--line-l); padding:32px 30px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; transition:.3s var(--ease); }
.addon:hover{ background:var(--white); }
.addon-title{ font-size:1.1rem; }
.addon p{ color:var(--muted-l); font-size:.88rem; margin-top:4px; }
.addon .p{ font-weight:600; color:var(--action-hover); /* 4.9:1 on cream */ white-space:nowrap; font-size:1.05rem; }
.faq-grid{ grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; }
.faq-item{ border-bottom:1px solid var(--line-d); }
.faq-h{ font:inherit; margin:0; }
.faq-q{ width:100%; background:none; border:none; color:var(--white); text-align:left; font-family:inherit; font-size:1.18rem; font-weight:500; padding:24px 40px 24px 0; position:relative; display:flex; cursor:pointer; }
.faq-q::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--gold); font-weight:400; transition:.3s; }
.faq-item.open .faq-q::after{ content:"–"; }
.faq-a{ max-height:0; overflow:hidden; transition:.4s var(--ease); color:var(--muted-d); }
.faq-a p{ padding-bottom:24px; padding-right:30px; }
.on-light .faq-item{ border-bottom-color:var(--line-l); }
.on-light .faq-q{ color:var(--ink); }
.on-light .faq-q::after{ color:var(--gold-on-light); }
.on-light .faq-a{ color:var(--muted-l); }
@media (max-width:980px){ .addons{ grid-template-columns:1fr 1fr; } .faq-grid{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:680px){ .addons{ grid-template-columns:1fr; } }
.price-card.featured .pkg-note{ color:var(--muted-l); }

/* ── Pricing pill list — mobile/tablet only ──────────────── */
.pkg-pills{ display:none; flex-direction:column; gap:10px; }
.pkg-pill{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  text-decoration:none; color:var(--ink);
  border:1px solid var(--line-l);
  border-radius:12px;
  background:#fff;
  transition:.3s var(--ease);
  position:relative;
}
/* no top border needed */.pkg-pill:first-child{ }
.pkg-pill:hover{ background:#f9f6f0; border-color:var(--gold); transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,.08); }
.pkg-pill--pop{ background:#fff; border-color:var(--gold); border-left:3px solid var(--gold); padding-left:18px; } /* the thicker edge takes from the padding, so the row content lines up */
.pkg-pill--pop:hover{ background:#fdf8ee; }

/* Icon */
.pkg-pill-icon{
  width:38px; height:38px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  background:var(--cream-2);
  border:1px solid var(--line-l);
  color:var(--muted-l);
  transition:.3s var(--ease);
}
.pkg-pill-icon svg{ width:18px; height:18px; }
.pkg-pill--pop .pkg-pill-icon{ background:rgba(216,161,63,.12); border-color:rgba(216,161,63,.4); color:var(--gold); }
.pkg-pill:hover .pkg-pill-icon{ border-color:var(--gold); color:var(--gold); }

/* Name + tag */
.pkg-pill-left{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; flex:1; min-width:0; }
.pkg-pill-tag{
  font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
  background:var(--ink); color:var(--white); padding:3px 9px; border-radius:20px; max-width:100%;
}
.pkg-pill-name{ font-size:1rem; font-weight:600; line-height:1.3; min-width:0; overflow-wrap:break-word; color:var(--ink); }
/* Price */
.pkg-pill-price{
  flex:none; text-align:right;
  font-size:.92rem; font-weight:700;
  color:var(--gold-on-light); white-space:nowrap; /* pills sit on white (mobile pricing teaser) */
  letter-spacing:-.01em;
}

/* Arrow */
.pkg-pill-arrow{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-l);
  color:var(--muted-l);
  transition:.3s var(--ease);
}
.pkg-pill-arrow svg{ width:14px; height:14px; }
.pkg-pill:hover .pkg-pill-arrow{ border-color:var(--gold); color:var(--gold); transform:translateX(3px); }

.pkg-pills-cta{ margin-top:20px; }
.pkg-desktop-cta{ display:block; }

@media(max-width:1080px){
  /* Homepage only — hide grid, show pills */
  body[data-page="home"] .price-grid,
  body[data-page="home"] .pkg-desktop-cta{ display:none; }
  body[data-page="home"] .pkg-pills{ display:flex; }
}

/* ============================================================
   TEAM / TESTIMONIAL / IMAGE BLOCKS
   ============================================================ */
.media-frame{ position:relative; overflow:hidden; border-radius:4px; }
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.play-btn{
  position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.92); display:grid; place-items:center; transition:.3s var(--ease);
}
.play-btn:hover{ transform:scale(1.08); background:#fff; }
.play-btn svg{ width:24px; height:24px; color:var(--ink); margin-left:3px; }

.check-list{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.check-list li{ display:flex; gap:12px; align-items:center; font-weight:500; }
.check-list svg{ width:18px; height:18px; color:var(--coral); flex:none; }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.field{ position:relative; }
.field label{ position:absolute; left:34px; top:14px; color:var(--muted-d); font-size:1rem; pointer-events:none; transition:.25s var(--ease); display:flex; gap:10px; align-items:center; }
.field svg{ width:17px; height:17px; }
.field input, .field textarea{
  width:100%; background:none; border:none; border-bottom:1px solid var(--line-d);
  color:#fff; font-family:inherit; font-size:1rem; padding:14px 0; transition:.3s;
}
.on-light .field input, .on-light .field textarea{ color:var(--ink); border-color:var(--line-l); }
.on-light .field label{ color:var(--muted-l); }
.on-light .field input:focus + label, .on-light .field input:not(:placeholder-shown) + label,
.on-light .field textarea:focus + label, .on-light .field textarea:not(:placeholder-shown) + label{ color:var(--gold-on-light); }
.on-light .field .ic-lead{ color:var(--gold-on-light); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:-16px; left:0; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.field .ic-lead{ position:absolute; left:0; top:14px; color:var(--gold); }
.field.has-ic input{ padding-left:30px; }
.field.has-ic label{ left:30px; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ── Project bar — above footer ──
   Background image per brand from Settings → Footer (--cta-image-re/-cs, set in
   meta.php). The overlay keeps the text at 4.5:1 or more over any image (P-16):
   the lead text is 5.1:1 where the overlay is lightest, over a white image. */
.project-bar{
  background:var(--bg) center/cover no-repeat;
  /* SA-18: the overlay covers the padding box only, so the image stops there too; the borders
     are opaque (8% white over --bg, as before on dark pages) so no page colour shows through. */
  background-clip:padding-box;
  border-top:1px solid color-mix(in srgb, #fff 8%, var(--bg));
  border-bottom:1px solid color-mix(in srgb, #fff 8%, var(--bg));
  padding:54px 0;
  position:relative;
  overflow:hidden;
}
.project-bar::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(13,13,15,.88) 0%, rgba(13,13,15,.72) 100%);
  pointer-events:none;
}
.project-bar > *{ position:relative; z-index:1; }
.project-bar--re{ background-image:var(--cta-image-re, none); }
.project-bar--cs{ background-image:var(--cta-image-cs, none); }
/* Parallax only with a fine pointer and motion allowed; touch devices get a still image. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .project-bar{ background-attachment:fixed; }
}
.project-bar .project-bar-text h3{ color:#fff; }
.project-bar .project-bar-text p{ color:rgba(255,255,255,.72); }
.project-bar .btn-coral{ box-shadow:0 8px 24px rgba(0,0,0,.4); }
.project-bar .btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.project-bar .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* "Trusted by" strip (P-12): partner logos or names in an endless row. The list is
   rendered twice; the copy is aria-hidden. Pauses on hover, focus and the button. */
.trusted{ padding-block:clamp(36px,5vw,56px); border-bottom:1px solid var(--line-l); }
.trusted-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:22px; }
.brands-label{
  font-family:var(--sans); font-size:.72rem; font-weight:600; line-height:1.4; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted-l);
}
.on-light .brands-label{ color:var(--muted-l); }
.marquee{
  width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
          mask-image:linear-gradient(to right, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee var(--marquee-duration, 40s) linear infinite; }
.marquee:hover .marquee-track,
.trusted:focus-within .marquee-track,
.marquee.is-paused .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee-list{
  list-style:none; flex:none; min-width:100vw;
  display:flex; align-items:center; justify-content:space-around;
  gap:clamp(32px,5vw,64px); padding-inline:clamp(16px,2.5vw,32px);
}
.marquee-item{ flex:none; }
.marquee-item a{ display:block; border-radius:var(--radius); }
.brand-logo{
  font-family:var(--display); font-size:clamp(1rem,1.4vw,1.25rem);
  font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  color:var(--muted-l); transition:color .3s var(--ease);
}
.brand-logo-mark{
  height:40px; width:auto; max-width:160px; object-fit:contain;
  filter:grayscale(1); opacity:.75; transition:filter .3s var(--ease), opacity .3s var(--ease);
}
.marquee-item:hover .brand-logo, .marquee-item a:focus-visible .brand-logo{ color:var(--ink); }
.marquee-item:hover .brand-logo-mark, .marquee-item a:focus-visible .brand-logo-mark{ filter:none; opacity:1; }
.marquee-toggle{
  position:absolute; top:-10px; right:0;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-l); color:var(--ink);
}
.marquee-toggle:hover{ border-color:var(--ink); }
.marquee-toggle svg{ width:16px; height:16px; }
@media (max-width:600px){
  .brand-logo{ font-size:.95rem; }
  .brand-logo-mark{ height:32px; }
  .marquee-toggle{ top:0; right:50%; transform:translateX(50%); }
  .brands-label{ order:-1; }
}
@media (prefers-reduced-motion:reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track{ animation:none; width:auto; }
  .marquee-list{ flex:1; min-width:0; flex-wrap:wrap; justify-content:center; row-gap:18px; }
  .marquee-list[aria-hidden="true"], .marquee-toggle{ display:none !important; }
  .trusted-inner{ padding-top:0; }
}

/* Testimonials on light bg — adjust card colors */
.testi-section.on-light .testi-card{
  background:#fff;
  border-color:var(--line-l);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.testi-section.on-light .testi-card:hover{ border-color:rgba(0,0,0,.22); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.testi-section.on-light .testi-card--highlight{ background:#fff; border-color:var(--gold); box-shadow:0 8px 28px rgba(216,161,63,.18); }
.testi-section.on-light .testi-quote{ color:var(--ink); }
.testi-section.on-light .testi-meta{ border-top-color:var(--line-l); }
.testi-section.on-light .testi-name{ color:var(--ink); }
.testi-section.on-light .testi-avatar{ background:var(--cream-2); border-color:var(--line-l); color:var(--gold-on-light); }
.testi-section.on-light .testi-card--highlight .testi-avatar{ background:#fff; }
.testi-section.on-light .testi-role{ color:var(--muted-l); }
.testi-section.on-light .testi-avatar--img{ border-color:var(--line-l); }
.testi-section.on-light .testi-btn{ border-color:var(--line-l); color:var(--ink); }
.testi-section.on-light .testi-btn:hover{ border-color:var(--gold); color:var(--gold); }
.testi-section.on-light .testi-dot{ background:rgba(0,0,0,.22); }
.testi-section.on-light .testi-dot.active{ background:var(--gold); }
.project-bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.project-bar-text h3{ font-size:clamp(1.1rem,2vw,1.4rem); font-weight:600; margin-bottom:6px; }
.project-bar-text p{ font-size:.93rem; color:var(--muted-d); margin:0; }
.project-bar-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.project-bar .btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.project-bar .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
@media(max-width:600px){
  .project-bar{ padding:28px 0; }
  .project-bar-inner{ flex-direction:column; align-items:flex-start; gap:18px; }
  .project-bar-actions{ width:100%; }
  .project-bar-actions .btn{ flex:1; justify-content:center; }
}

.site-footer{ background:var(--bg); border-top:1px solid var(--line-d); padding-top:var(--sect); }
.footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; }
.footer-cols h5{ font-size:1.05rem; margin-bottom:22px; }
.footer-cols a, .footer-cols p{ color:var(--muted-d); font-size:.96rem; }
.footer-cols .stack-sm a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid var(--line-d); padding-block:30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:.88rem; color:var(--muted-d); }
.footer-bottom a:hover{ color:var(--gold); }
/* Footer brand column and the switch to the other side (were inline styles, SA-15; the
   selectors outrank .brand, .brand-name small, its phone rule and .footer-cols a/p as the
   inline styles did) */
.site-footer .brand{ margin-bottom:22px; display:inline-flex; }
.site-footer .brand-name small{ display:block; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-d); margin-top:4px; }
.site-footer .footer-blurb{ max-width:30ch; }
.site-footer .footer-switch{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line-d); }
.site-footer .footer-switch-title{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-d); font-weight:600; margin-bottom:12px; }
.site-footer .footer-switch-link{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; color:var(--gold); }
.site-footer .footer-switch-icon{ width:16px; height:16px; }

/* back to top */
.to-top{ position:fixed; right:28px; bottom:28px; z-index:150; width:50px; height:50px; border-radius:50%; background:var(--action); border:none; color:var(--white); display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(14px); transition:.4s var(--ease); }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--action-hover); }
.to-top svg{ width:18px; height:18px; }

/* ============================================================
   HERO SLIDER
   ============================================================ */
#hero-slider{ position:relative; overflow:hidden; }
.hs-track{ position:absolute; inset:0; }
.hs-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); z-index:0; background:#0d0d0f; }
.hs-slide.active{ opacity:1; z-index:1; }
.hs-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.hs-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.hs-prev,.hs-next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%;
  background:rgba(13,13,15,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  transition:.3s var(--ease); opacity:0;
}
.hs-prev svg,.hs-next svg{ width:18px; height:18px; }
.hs-prev{ left:12px; } .hs-next{ right:12px; }
#hero-slider:hover .hs-prev,
#hero-slider:hover .hs-next{ opacity:1; }
.hs-prev:hover,.hs-next:hover{ background:var(--action); border-color:var(--action); }

.hs-dots{ display:flex; gap:7px; }
.hs-dot{
  width:7px; height:7px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.35); border:none; cursor:pointer;
  transition:.3s var(--ease);
}
.hs-dot.active{ background:#fff; transform:scale(1.3); }

.hero-slider-counter{
  display:flex; align-items:center; gap:16px;
  font-size:.88rem; font-weight:500;
}
.hs-bar{
  width:120px; height:2px; background:var(--line-d);
  position:relative; overflow:hidden; border-radius:1px; flex-shrink:0;
}
.hs-bar-fill{
  position:absolute; left:0; top:0; height:100%;
  background:var(--gold); transition:width .6s var(--ease); width:33.3%;
}

/* Touch devices — always show arrows */
@media (hover:none){
  .hs-prev,.hs-next{ opacity:.7; width:36px; height:36px; }
}

/* ============================================================
   HOME (SA-06) — moved from home.php and new for P-03, P-04, P-11 to P-14
   ============================================================ */
/* Hero videos (P-03, P-04): centred text, poster first, video over it once playing.
   The veil keeps white text at 5.5:1 or more over a white frame. */
.home-hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--bg); }
.hv-media{ position:absolute; inset:0; z-index:0; }
.hv-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.1s var(--ease), visibility 0s linear 1.1s; }
.hv-slide.is-active{ opacity:1; visibility:visible; transition:opacity 1.1s var(--ease); }
.hv-poster, .hv-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hv-video{ opacity:0; transition:opacity .6s var(--ease); }
.hv-slide.is-playing .hv-video{ opacity:1; }
.hv-veil{ position:absolute; inset:0; z-index:1; background:color-mix(in srgb, var(--bg) 62%, transparent); }
.hv-inner{
  position:relative; z-index:2; width:min(var(--wrap), 100% - 2*var(--gut)); margin-inline:auto;
  padding-block:clamp(110px,14vh,160px) clamp(96px,12vh,130px);
  display:flex; justify-content:center; text-align:center;
}
.hv-text{ max-width:1100px; }
.hv-title{
  font-size:clamp(2.2rem,6vw,6rem); font-weight:700; line-height:1.02; letter-spacing:-.035em;
  color:var(--white); text-wrap:balance;
}
.hv-sub{ max-width:60ch; margin:clamp(14px,2.4vh,24px) auto 0; font-size:clamp(1rem,1.4vw,1.2rem); color:var(--white); text-wrap:pretty; }
.hv-text.is-in{ animation:hv-in .8s var(--ease); }
@keyframes hv-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hv-controls{ position:absolute; right:var(--gut); bottom:clamp(20px,4vh,36px); z-index:3; display:flex; align-items:center; gap:14px; }
.hv-dots{ display:flex; gap:2px; }
.hv-dot{ width:24px; height:24px; padding:0; border:0; background:none; display:grid; place-items:center; }
.hv-dot::before{ content:""; width:8px; height:8px; border-radius:50%; background:color-mix(in srgb, var(--white) 70%, transparent); transition:.3s var(--ease); }
.hv-dot[aria-current="true"]::before{ background:var(--white); transform:scale(1.4); }
.hv-pause{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--bg) 55%, transparent); border:1px solid color-mix(in srgb, var(--white) 45%, transparent);
  color:var(--white); backdrop-filter:blur(6px);
}
.hv-pause:hover{ border-color:var(--white); }
.hv-pause svg{ width:16px; height:16px; }
.hv-ic-play{ display:none; }
.is-paused .hv-ic-play{ display:block; }
.is-paused .hv-ic-pause{ display:none; }
.hv-dot:focus-visible, .hv-pause:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (max-width:600px){
  .home-hero{ min-height:92vh; min-height:92svh; }
  .hv-title{ font-size:clamp(1.9rem,8.5vw,3.4rem); }
  .hv-controls{ right:50%; transform:translateX(50%); }
}
@media (prefers-reduced-motion:reduce){
  .hv-slide, .hv-video{ transition:none; }
  .hv-text.is-in{ animation:none; }
}

/* Intro (P-11) */
.intro-band{
  background-color:var(--bg-2);
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border-block:1px solid color-mix(in srgb, var(--white) 6%, transparent);
}
.btn-row-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; }

/* Shared layout of the home sections */
[data-page="home"] .intro-grid{ grid-template-columns:1fr 1.1fr; align-items:center; gap:60px; }
[data-page="home"] .head-row{ grid-template-columns:1.1fr 1fr; align-items:end; }
[data-page="home"] .iguide-grid{ grid-template-columns:1.05fr 1fr; align-items:center; gap:60px; }
.head-row-end{ align-self:end; }
.iguide-frame{ aspect-ratio:4/5; }
/* One image, shown whole at its own proportions (a photo or a product shot alike) */
.iguide-single{ aspect-ratio:auto; width:100%; max-width:620px; justify-self:end; }
.iguide-single img{ height:auto; max-height:640px; object-fit:contain; }
.eyebrow.center{ justify-content:center; }
.pricing-lead{ max-width:56ch; margin-inline:auto; }
.price-desc{ font-size:.88rem; margin-top:10px; color:var(--muted-d); }
.price-card.featured .price-desc{ color:var(--muted-l); }
.price-feats{ margin-top:16px; }
.btn-center{ justify-content:center; }
@media (max-width:1080px){
  [data-page="home"] .intro-grid, [data-page="home"] .iguide-grid, [data-page="home"] .head-row{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:1080px){
  .iguide-single{ max-width:620px; justify-self:center; }
}

/* Service image cards (P-13), shared by /home and /services (includes/partials/service-card.php) */
.svc-portal-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 1.5vw, 20px); }
.svc-portal-card{
  position:relative; overflow:hidden; border-radius:8px;
  display:flex; flex-direction:column; min-height:clamp(280px, 32vw, 420px);
  text-decoration:none; color:var(--white); background:var(--bg-3);
  transition:.55s var(--ease);
}
.svc-portal-card::before,
.svc-portal-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  transition:transform .85s var(--ease), filter .5s;
  filter:brightness(.48) saturate(.85);
}
.svc-portal-card::before{ content:""; background-size:cover; background-position:center; }
.svc-portal-card:hover::before,
.svc-portal-card:hover .svc-portal-img{ transform:scale(1.04); filter:brightness(.62) saturate(1); }
.svc-portal-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(170deg, color-mix(in srgb, var(--bg) 5%, transparent) 0%, color-mix(in srgb, var(--bg) 65%, transparent) 100%);
}
.svc-portal-body{ position:relative; z-index:2; display:flex; flex-direction:column; height:100%; flex:1; padding:clamp(22px, 3vw, 36px); }
.svc-portal-tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:color-mix(in srgb, var(--white) 50%, transparent); margin-bottom:12px;
}
.svc-portal-tag::before{ content:""; width:16px; height:1px; background:currentColor; }
.svc-portal-card h3{ font-size:clamp(1.2rem, 2vw, 1.65rem); font-weight:600; line-height:1.1; letter-spacing:-.02em; margin-bottom:10px; color:var(--white); }
.svc-portal-card p{ font-size:clamp(.82rem, .95vw, .93rem); color:color-mix(in srgb, var(--white) 60%, transparent); line-height:1.6; max-width:26ch; }
.svc-portal-badge{ font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-top:12px; }
.svc-portal-spacer{ flex:1; }
.svc-portal-cta{
  display:inline-flex; align-items:center; gap:.6em; align-self:flex-start;
  font-size:clamp(.85rem, .9vw, .95rem); font-weight:600;
  padding:13px 24px; border-radius:4px; margin-top:24px;
  background:var(--action); color:var(--white); /* D22 */
  transition:.3s var(--ease);
}
.svc-portal-cta svg{ width:16px; height:11px; flex:none; transition:transform .3s; }
.svc-portal-card:hover .svc-portal-cta{ background:var(--action-hover); }
.svc-portal-card:hover .svc-portal-cta svg{ transform:translateX(4px); }
.svc-portal-card:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.svc-portal-bar{
  position:absolute; bottom:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(to right, var(--coral), var(--coral-700));
  transform:scaleX(0); transform-origin:left; transition:.55s var(--ease);
}
.svc-portal-card:hover .svc-portal-bar{ transform:scaleX(1); }
@media (max-width:1080px){ .svc-portal-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){
  .svc-portal-grid{ grid-template-columns:1fr; }
  .svc-portal-card{ min-height:clamp(220px, 60vw, 300px); }
}

/* Recent work tabs (P-14) */
.work-tabs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding:4px 2px 6px; }
.work-tab{
  flex:none; padding:10px 20px; border-radius:40px; border:1px solid var(--line-l);
  background:transparent; color:var(--ink); font-size:.9rem; font-weight:500; white-space:nowrap;
  transition:.3s var(--ease);
}
.work-tab:hover{ border-color:var(--ink); }
.work-tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.work-tab:focus-visible, .marquee-toggle:focus-visible, .marquee-item a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pf-overlay .pf-title{ font-size:1.45rem; margin-top:8px; color:var(--white); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:.7s var(--ease); animation:reveal-fallback 0s 1.2s forwards; }
.reveal.in{ opacity:1; transform:none; animation:none; }
@keyframes reveal-fallback{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; animation:none; }
  .spin-badge .ring{ animation:none; }
  *{ scroll-behavior:auto; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.mt-s{ margin-top:8px; } .mt-m{ margin-top:16px; } .mt-l{ margin-top:26px; }
.maxw-sm{ max-width:560px; } .maxw-md{ max-width:720px; }
.tag{ display:inline-block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600; }

/* ============================================================
   SERVICE DETAIL
   ============================================================ */
.sd-intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.sd-intro .media-frame{ aspect-ratio:4/4.4; }
.sd-incl{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 44px; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); list-style:none; }
.sd-incl li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-l); align-items:flex-start; }
.sd-incl svg{ width:20px; height:20px; color:var(--coral); flex:none; margin-top:3px; }
.sd-incl b{ display:block; font-weight:600; } .sd-incl span{ color:var(--muted-l); font-size:.92rem; }
.sd-feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.sd-feat .item{ padding-top:24px; border-top:2px solid var(--line-d); }
.on-light .sd-feat .item{ border-color:var(--line-l); }
.sd-feat .fn{ font-size:1.5rem; font-weight:600; color:var(--gold); margin-bottom:12px; }
.on-light .sd-feat .fn{ color:var(--gold-on-light); }   /* 24 px, large text (D25) */
.sd-next{ display:flex; gap:16px; flex-wrap:wrap; }
.sd-next a{ border:1px solid var(--line-d); border-radius:40px; padding:12px 26px; font-weight:500; transition:.3s var(--ease); }
.sd-next a:hover{ border-color:var(--gold); color:var(--gold); }

/* iGuide tour (P-22): one image that opens the tour in an overlay; the iframe loads on open. */
.sd-tour{ position:relative; display:block; overflow:hidden; border-radius:var(--radius); aspect-ratio:16/9; background:var(--bg-2); }
.sd-tour img{ width:100%; height:100%; object-fit:cover; display:block; }
a.sd-tour::after{ content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 35%, transparent); transition:background .4s var(--ease); }
a.sd-tour:hover::after{ background:color-mix(in srgb, var(--bg) 20%, transparent); }
a.sd-tour:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
.sd-tour-label{
  position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:10px; max-width:calc(100% - 32px);
  padding:14px 26px; border-radius:12px; background:var(--action); color:var(--white); font-weight:600; text-align:center;
}
.sd-tour-label svg{ width:18px; height:12px; flex:none; }
a.sd-tour:hover .sd-tour-label{ background:var(--action-hover); }
.tour-overlay{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:clamp(16px, 3vw, 40px); }
.tour-overlay[hidden]{ display:none; }
.tour-backdrop{ position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 94%, transparent); }
.tour-panel{ position:relative; display:flex; flex-direction:column; gap:12px; width:100%; height:100%; max-width:1600px; }
.tour-panel iframe{ flex:1; width:100%; min-height:0; border:0; border-radius:var(--radius); background:var(--bg-2); }
.tour-close{
  align-self:flex-end; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px;
  border:1px solid var(--line-d); border-radius:12px; background:var(--bg-3); color:var(--white); font:inherit; font-weight:600; cursor:pointer;
}
.tour-close:hover{ border-color:var(--gold); color:var(--gold); }
.tour-close:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.tour-close svg{ width:18px; height:18px; }
html.tour-open{ overflow:hidden; }
@media (max-width:600px){
  .tour-overlay{ padding:0; }
  .tour-panel{ gap:0; max-width:none; }
  .tour-panel iframe{ border-radius:0; }
  .tour-close{ position:absolute; top:10px; right:10px; z-index:1; }
}

/* 3D tours on the page (D32): poster with a start button; the iframe loads on click. */
.sd-tours{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap:44px 32px; }
.sd-tours--single{ grid-template-columns:1fr; max-width:960px; margin-inline:auto; } /* one tour: full content width, centred (SA-19) */
.sd-resource a{ display:inline-flex; gap:10px; align-items:flex-start; color:var(--muted-d); font-size:.88rem; line-height:1.5; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-d); transition:color .25s var(--ease); }
.sd-resource a:hover, .sd-resource a:focus-visible{ color:#fff; text-decoration-color:var(--gold); }
.sd-resource svg{ width:18px; height:18px; flex:none; color:var(--gold); margin-top:1px; }
.on-light .sd-resource a{ color:var(--muted-l); text-decoration-color:var(--line-l); }
.on-light .sd-resource a:hover, .on-light .sd-resource a:focus-visible{ color:var(--ink); }
.on-light .sd-resource svg{ color:var(--gold-on-light); }
.sd-tours-wrap--single > *{ max-width:960px; margin-inline:auto; } /* heading and lead line up with the single tour */
.tour-embed{ position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:var(--radius); background:var(--bg-2); }
.tour-embed-poster{ width:100%; height:100%; object-fit:cover; display:block; }
.tour-embed.is-playing .tour-embed-poster{ visibility:hidden; }
.tour-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.tour-embed-start{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:10px; max-width:calc(100% - 32px); min-height:44px;
  padding:14px 26px; border:0; border-radius:12px; background:var(--action); color:var(--white);
  font:inherit; font-weight:600; text-align:center; cursor:pointer;
}
.tour-embed-start:hover{ background:var(--action-hover); }
.tour-embed-start:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.tour-embed-start svg{ width:20px; height:14px; flex:none; }
.sd-tour-title{ margin-top:18px; font-size:1.15rem; font-weight:600; }
.sd-tour-caption{ margin-top:6px; }
.sd-tour-actions{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:14px; }
button.link-u{ background:none; border-width:0 0 2px; border-style:solid; color:inherit; font:inherit; font-weight:600; cursor:pointer; }
.sd-tour-actions .link-u{ min-height:24px; }
.sd-tour-actions .link-u:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* Before/after sliders (D33). Without JS: before image, then after image below.
   With JS (.is-enhanced): one frame, Before on the left and After on the right; the after
   image is clipped from the left to --ba-pos, so moving the range left reveals more of it. */
.sd-compare{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap:44px 32px; }
.ba{ margin:0; }
.ba-frame{ position:relative; border-radius:var(--radius); }
.ba-img{ position:relative; }
.ba-img + .ba-img{ margin-top:12px; }
.ba-img img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); background:var(--bg-2); }
.ba-tag{
  position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:40px;
  background:color-mix(in srgb, var(--bg) 82%, transparent); color:var(--white);
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.ba-caption{ margin-top:12px; }
.ba.is-enhanced .ba-frame{ --ba-pos:50%; overflow:hidden; aspect-ratio:3/2; }
.ba.is-enhanced .ba-img{ position:absolute; inset:0; margin:0; }
.ba.is-enhanced .ba-img img{ height:100%; border-radius:0; }
.ba.is-enhanced .ba-after{ z-index:1; clip-path:inset(0 0 0 var(--ba-pos)); }
.ba.is-enhanced .ba-after .ba-tag{ left:auto; right:12px; }
.ba.is-enhanced .ba-frame::after{
  content:""; position:absolute; z-index:2; top:0; bottom:0; left:var(--ba-pos); width:2px;
  transform:translateX(-1px); background:var(--white); pointer-events:none;
}
.ba.is-enhanced .ba-frame::before{
  content:""; position:absolute; z-index:2; top:50%; left:var(--ba-pos); width:44px; height:44px;
  transform:translate(-50%,-50%); border:2px solid var(--white); border-radius:50%;
  background:color-mix(in srgb, var(--bg) 60%, transparent); pointer-events:none;
}
.ba-range{ position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.ba.is-enhanced .ba-frame:focus-within{ outline:3px solid var(--gold); outline-offset:4px; }
/* Recent staging (D37): shown instead of the sliders while every pair is a placeholder. */
.ba-recent-label{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted-d); }
.on-light .ba-recent-label{ color:var(--muted-l); }
.ba-recent{ list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.ba-recent figure{ margin:0; }
.ba-recent img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); background:var(--bg-2); }
.ba-recent figcaption{ margin-top:12px; }
@media (max-width:900px){ .ba-recent{ grid-template-columns:1fr 1fr; } }
@media (max-width:900px){ .ba-recent{ gap:16px; } }

/* "See our work" link (P-23) */
.sd-work-link{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); text-align:center; } /* "See our work" closing "What's included" (SA-19) */

/* Package accordion: shown up to 1080 px, as before */
.sd-packages{ display:none; }
.pac-btn{ margin-top:20px; justify-content:center; }
.on-light .pac .btn-ghost{ border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.88); } /* dark accordion on cream (SA-19: was ink on dark) */
.on-light .pac .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* Pricing on request (Virtual Staging) */
.qp-box{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; padding:44px; border:1px solid var(--line-d); border-radius:6px; background:var(--bg-2); }
.room-list{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.room-list li{ padding:9px 20px; border:1px solid var(--line-d); border-radius:40px; font-size:.88rem; font-weight:500; color:var(--muted-d); }
.qp-step strong{ display:block; color:var(--white); }
@media (max-width:768px){
  .qp-box{ grid-template-columns:1fr; gap:30px; padding:26px 20px; }
}
@media (max-width:980px){
  .sd-intro{ grid-template-columns:1fr; gap:36px; }
  .sd-incl, .sd-feat{ grid-template-columns:1fr; }
}

/* ============================================================
   BOOKING SYSTEM
   ============================================================ */
.booking{ display:grid; grid-template-columns:1fr 360px; gap:50px; align-items:start; }
.booking-summary{
  position:sticky; top:120px;
  background:var(--bg-2); border:1px solid var(--line-d);
  border-radius:6px; padding:32px;
}
.booking-summary h4{ font-size:1.1rem; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line-d); }
.summary-row{ display:flex; justify-content:space-between; font-size:.92rem; padding:10px 0; border-bottom:1px solid var(--line-d); color:var(--muted-d); }
.summary-row b{ color:#fff; font-weight:500; }
.summary-total{ display:flex; justify-content:space-between; margin-top:18px; font-weight:600; font-size:1.1rem; }

/* Package selector */
.pkg-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:34px; }
.pkg-card{
  border:1px solid var(--line-d); border-radius:4px;
  padding:22px 20px; cursor:pointer; transition:.3s var(--ease);
  display:flex; flex-direction:column; gap:6px;
}
.pkg-card:hover{ border-color:var(--gold); }
.pkg-card.selected{ border-color:var(--gold); background:rgba(216,161,63,.06); }
.pkg-card .pkg-name{ font-weight:600; font-size:.98rem; }
.pkg-card .pkg-price{ font-size:.88rem; color:var(--muted-d); }
.pkg-card .pkg-pop{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--coral); font-weight:600; }

/* Calendar */
.cal-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.cal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-weight:600; }
.cal-header button{ background:none; border:none; color:var(--muted-d); font-size:1.2rem; padding:4px 10px; transition:.3s; }
.cal-header button:hover{ color:#fff; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day-label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-d); text-align:center; padding-bottom:8px; }
.cal-day{
  aspect-ratio:1; border-radius:3px; border:none;
  background:none; color:rgba(255,255,255,.7);
  font-size:.9rem; font-weight:500; cursor:pointer;
  transition:.25s var(--ease); display:grid; place-items:center;
}
.cal-day:hover:not(:disabled){ background:rgba(255,255,255,.08); color:#fff; }
.cal-day.selected{ background:var(--action); color:var(--white); }
.cal-day.today{ color:var(--gold); font-weight:700; }
.cal-day:disabled{ opacity:.28; cursor:not-allowed; }
.cal-day.other-month{ opacity:.25; }

/* Slot picker */
.slot-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.slot-btn{
  border:1px solid var(--line-d); border-radius:3px;
  background:none; color:rgba(255,255,255,.7); font-family:inherit;
  font-size:.92rem; font-weight:500; padding:12px; cursor:pointer;
  transition:.25s var(--ease);
}
.slot-btn:hover{ border-color:var(--gold); color:#fff; }
.slot-btn.selected{ background:var(--action); border-color:var(--action); color:var(--white); }
.slot-btn:disabled{ opacity:.28; cursor:not-allowed; }

/* ============================================================
   BOOKING STATUS BADGES  (admin + confirmation pages)
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 12px; border-radius:40px;
}
.badge-pending  { background:rgba(216,161,63,.14);  color:var(--gold-soft); border:1px solid rgba(216,161,63,.3);  }
.badge-confirmed{ background:rgba(74,222,128,.12);  color:#4ade80;          border:1px solid rgba(74,222,128,.3);  }
.badge-completed{ background:rgba(99,102,241,.12);  color:#818cf8;          border:1px solid rgba(99,102,241,.3);  }
.badge-cancelled{ background:rgba(255,75,75,.10);   color:var(--coral);     border:1px solid rgba(255,75,75,.25);  }

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash{
  padding:16px 22px; border-radius:4px;
  font-size:.95rem; font-weight:500;
  display:flex; align-items:center; gap:12px;
  margin-bottom:24px;
}
.flash svg{ width:18px; height:18px; flex:none; }
.flash-success{ background:rgba(74,222,128,.1);  color:#4ade80; border:1px solid rgba(74,222,128,.25); }
.flash-error  { background:rgba(255,75,75,.1);   color:var(--coral); border:1px solid rgba(255,75,75,.25); }
.flash-info   { background:rgba(216,161,63,.1);  color:var(--gold-soft); border:1px solid rgba(216,161,63,.25); }
/* On cream and white (contact and booking pages) the light colours above are unreadable. */
.on-light .flash-success{ color:var(--success-on-light); }
.on-light .flash-error{ color:var(--action-hover); }
.on-light .flash-info{ color:var(--gold-on-light); }

/* ============================================================
   FORM VALIDATION STATES
   ============================================================ */
.field.is-error input,
.field.is-error textarea,
.field.is-error select{
  border-color:var(--coral);
}
.field.is-error label{ color:var(--coral); }
.field-error{
  font-size:.78rem; color:var(--coral);
  margin-top:6px; display:block; letter-spacing:.02em;
}
.field.is-valid input,
.field.is-valid textarea{
  border-color:rgba(74,222,128,.6);
}

/* Select elements */
.field select{
  width:100%; background:var(--bg-2); border:1px solid var(--line-d);
  border-radius:3px; color:#fff; font-family:inherit;
  font-size:1rem; padding:14px 16px; cursor:pointer;
  appearance:none; transition:.3s;
}
.field select:focus{ outline:none; border-color:var(--gold); }
.on-light .field select{ background:var(--white); color:var(--ink); border-color:var(--line-l); }

/* Contact form layout */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-form-wrap{ background:var(--bg-2); border:1px solid var(--line-d); border-radius:6px; padding:44px; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.form-row{ display:flex; flex-direction:column; gap:24px; }

/* ============================================================
   ABOUT PAGE (SA-07) — moved from about.php and new for P-18 to P-21
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.owner-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.value-item{ padding-top:22px; border-top:2px solid var(--line-d); }

/* Company intro + numbered points (P-19). Numbers in --gold-on-light, text in --muted-l on cream. */
.about-company-intro{ max-width:780px; margin-inline:auto; }
.btn-row-center{ gap:16px; justify-content:center; flex-wrap:wrap; }
.about-points{ list-style:none; margin-top:clamp(36px, 5vw, 56px); }
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.value{ padding-top:22px; border-top:2px solid var(--line-d); }
.v-num{ font-size:1.4rem; font-weight:600; color:var(--gold); margin-bottom:14px; }
.on-light .v-num{ color:var(--gold-on-light); }
.value h3{ margin-bottom:8px; font-size:1rem; }
.value p{ font-size:.88rem; color:var(--muted-d); }
.on-light .value p{ color:var(--muted-l); }

/* Creative Vision (P-21): about 60% of the old height and a smaller quote. The words take
   turns once and rest on the last (site.js). Fixed background only on fine pointers with
   motion allowed; the image comes from Pages → About as --quote-image (theme-css.php). */
.quote-band{
  position:relative; padding:clamp(40px, 5vw, 56px) 0; text-align:center;
  background-color:var(--bg); background-image:var(--quote-image, none); background-size:cover; background-position:center;
}
.quote-band::after{ content:""; position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 78%, transparent); }
.quote-band .wrap{ position:relative; z-index:2; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .quote-band{ background-attachment:fixed; }
}
.quote-eyebrow{ color:var(--gold-soft); }
.quote-text{ font-size:clamp(1.25rem, 2.4vw, 2rem); line-height:1.3; font-weight:500; margin-inline:auto; letter-spacing:-.02em; }
.quote-static{ display:block; color:var(--white); }
.quote-word-slot{ display:inline-block; overflow:hidden; height:1.35em; vertical-align:bottom; margin-top:.1em; }
.quote-word{ display:block; color:var(--gold); font-weight:600; transition:transform .45s var(--ease), opacity .3s ease; }
.quote-word.is-below{ transform:translateY(110%); opacity:0; transition:none; }
.quote-word.is-above{ transform:translateY(-110%); opacity:0; }
.quote-role{ margin-top:4px; color:color-mix(in srgb, var(--white) 75%, transparent); }

/* Meet Our Founder (P-18): badge on the filled red (D22) */
.about-hero-grid{ grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-portrait{ position:relative; }
.about-portrait .media-frame{ aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; }
.about-badge{
  position:absolute; right:-20px; bottom:40px;
  background:var(--action); color:var(--white);
  padding:22px 26px; border-radius:var(--radius);
  box-shadow:0 20px 40px color-mix(in srgb, var(--bg) 30%, transparent);
}
.about-badge .num{ font-size:2.4rem; font-weight:700; line-height:1; }
.about-badge .lbl{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; max-width:11ch; margin-top:4px; }
.about-name{ font-size:clamp(1.15rem, 1.8vw, 1.5rem); font-weight:600; }
.about-role{ margin-top:6px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--gold); }
.about-tagline{ font-size:clamp(1.1rem, 1.8vw, 1.4rem); color:var(--muted-d); line-height:1.65; margin-top:20px; }
.about-checks{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.about-checks li{ display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color:var(--muted-d); }
.about-checks li svg{ flex:none; width:16px; height:16px; color:var(--gold); margin-top:3px; }
.about-checks li strong{ color:var(--white); display:block; margin-bottom:2px; }
.about-links{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; align-items:center; }

/* Meet the Team (P-20): 3 per row, 2 below 1080px, 1 below 600px */
.team-lead{ max-width:62ch; margin-inline:auto; }
.team-grid{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.team-card{ display:flex; flex-direction:column; }
.team-photo{ aspect-ratio:1; overflow:hidden; border-radius:var(--radius); background:var(--cream-2); margin-bottom:18px; }
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-name{ font-size:1.1rem; font-weight:600; }
.team-role{ margin-top:4px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--muted-l); }
.team-bio{ margin-top:10px; font-size:.92rem; line-height:1.65; color:var(--muted-l); }
@media (max-width:1080px){
  .about-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .about-portrait{ max-width:420px; }
  .team-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .team-grid{ grid-template-columns:1fr; }
}
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.process-step{ display:flex; flex-direction:column; gap:14px; }
.process-num{ font-size:2.4rem; font-weight:600; color:var(--gold); line-height:1; letter-spacing:-.04em; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:80px; }
.svc-row:nth-child(even){ direction:rtl; }
.svc-row:nth-child(even) > *{ direction:ltr; }
.svc-row-img{ aspect-ratio:4/3; }
.svc-row-body{ display:flex; flex-direction:column; gap:22px; }
.svc-row-from{ font-size:.84rem; color:var(--muted-d); }
.svc-row-from strong{ color:var(--gold); font-size:1.3rem; font-weight:600; }

/* ============================================================
   WEB / CREATIVE STUDIO
   ============================================================ */
.web-svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
.web-svc{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line-l); }
.web-svc-img{ aspect-ratio:16/9; }
.web-svc-body{ padding:40px 44px; display:flex; flex-direction:column; gap:18px; justify-content:center; }

/* ============================================================
   PORTFOLIO MASONRY
   ============================================================ */
.pf-masonry{ column-count:3; column-gap:18px; }
.pf-masonry .pf-item{ break-inside:avoid; margin-bottom:18px; aspect-ratio:auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- header below 768px: smaller logo, phone icon only (P-06, P-08) ---- */
@media (max-width:767.98px){
  .brand-logo-img{ max-height:52px; }
  .header-phone{ width:46px; height:46px; padding:0; justify-content:center; }
  .header-phone .header-phone-number{ display:none; }
}

/* ---- large tablet / small desktop (≤1080px) ---- */
@media (max-width:1080px){
  .main-nav, .header-actions .socials{ display:none; }
  .switch-tag{ font-size:.62rem; padding:6px 11px; }
  .burger{ display:grid; }
  .header-actions{ margin-left:auto; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  
  .pf-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  /* home page layout */
  .intro-grid, .stats-grid, .iguide-grid{ grid-template-columns:1fr; gap:40px; }
  .head-row{ grid-template-columns:1fr; gap:20px; }
  .hero-badge{ display:none; }
  .hero-mid{ grid-template-columns:1fr; }
  .hero-img{ width:100%; }
  .hero-caption{ max-width:none; }
  /* about */
  .about-grid, .owner-grid{ grid-template-columns:1fr; gap:40px; }
  .about-badge{ right:20px; }
  /* services */
  .svc-row{ grid-template-columns:1fr; gap:28px; }
  .svc-row:nth-child(even) .svc-row-img{ order:0; }
  .process{ grid-template-columns:1fr 1fr; gap:28px; }
  /* pricing */
  .faq-grid{ grid-template-columns:1fr; gap:34px; }
  .addons{ grid-template-columns:1fr 1fr; }
  /* contact / book */
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .booking{ grid-template-columns:1fr; }
  .booking-summary{ position:static; }
  .cal-wrap{ grid-template-columns:1fr 1fr; }
  /* values */
  .values-grid{ grid-template-columns:1fr 1fr; }
}

/* ---- tablet portrait (≤768px) ---- */
@media (max-width:768px){
  :root{ --gut:28px; --sect:clamp(28px,5vw,50px); }
  .display{ font-size:clamp(1.8rem,8vw,4rem); }
  .h-xl{ font-size:clamp(1.4rem,4.4vw,2.2rem); }
  .h-lg{ font-size:clamp(1.1rem,3.4vw,1.6rem); }
  
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .pkg-grid{ grid-template-columns:1fr 1fr; }
  .form-2{ grid-template-columns:1fr 1fr; }
  .pf-masonry{ column-count:2; }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:30px; }
  .sd-incl{ grid-template-columns:1fr; }
  .sd-feat{ grid-template-columns:1fr 1fr; }
  .cal-wrap{ grid-template-columns:1fr; gap:24px; }
  .slot-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---- mobile (≤600px) ---- */
@media (max-width:600px){
  :root{ --gut:18px; --sect:clamp(24px,7vw,40px); }
  /* layout */
  .svc-grid, .price-grid, .pf-grid, .stats,
  .footer-cols, .pkg-grid, .form-2,
  .addons, .process, .values-grid{ grid-template-columns:1fr; }
  .stats{ gap:28px; }
  .pf-item, .pf-item.tall{ aspect-ratio:4/3.2; }
  .pf-masonry{ column-count:1; }
  /* hero */
  .hero{ padding-top:110px; }
  .hero-top{ flex-direction:column; gap:8px; }
  .hero-bottom{ flex-direction:column; gap:8px; align-items:flex-start; }
  .hero-slider-counter{ display:none; }
  /* inner page hero */
  .page-hero{ padding:90px 0 40px; }
  .page-hero h1{ font-size:clamp(1.3rem,5.6vw,2.1rem); }
  /* header */
  .switch-tag{ display:none; }
  .brand-name small{ display:none; }
  /* contact form */
  .contact-form-wrap{ padding:24px 18px; }
  /* booking */
  .cal-wrap, .pkg-grid, .slot-grid{ grid-template-columns:1fr 1fr; }
  .slot-grid{ grid-template-columns:1fr 1fr; }
  /* footer */

  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }
  /* service cards */
  .svc-card{ padding:34px 26px; }
  /* sd */
  .sd-intro{ gap:26px; }
  .sd-feat{ grid-template-columns:1fr; }
  /* about */
  .about-badge{ position:relative; right:auto; bottom:auto; margin-top:-30px; display:inline-block; }
  /* web studio grid */
  .web-svc-grid{ grid-template-columns:1fr; }
  .web-svc{ grid-template-columns:1fr; }
  .web-svc-img{ aspect-ratio:16/7; }
}

/* Hero content — never animate, always visible immediately */
.hero .hero-content,
.hero .hero-title,
.hero .hero-sub,
.hero .hero-actions { opacity:1 !important; transform:none !important; animation:none !important; }

/* Hero meta — counter + dots — in normal flow, pushed to right */
.hero .hero-meta{
  display:flex; align-items:center; gap:16px;
  justify-content:flex-end;
  opacity:1 !important; transform:none !important; animation:none !important;
}

/* ============================================================
   TESTIMONIALS SLIDER
   ============================================================ */
.testi-head{ max-width:52ch; }
.testi-slider-wrap{ position:relative; overflow:visible; }
.testi-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  padding-top:18px;
  scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-track:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
.testi-card{
  position:relative;
  flex:0 0 calc(33.333% - 14px);
  min-width:300px;
  scroll-snap-align:start;
  background:var(--bg-2);
  border:1px solid var(--line-d);
  border-radius:6px;
  padding:32px 28px;
  display:flex; flex-direction:column; gap:24px;
  transition:border-color .3s var(--ease);
}
.testi-card:hover{ border-color:rgba(255,255,255,.18); }
.testi-card--highlight{ background:var(--bg-3); border-color:var(--gold); }
.testi-card--highlight:hover{ border-color:var(--gold-soft); }
.testi-tag{
  position:absolute; top:-12px; left:28px;
  background:var(--gold); color:var(--ink);
  font-size:.65rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:4px 12px; border-radius:20px;
}
.testi-quote{
  font-size:.95rem; line-height:1.75;
  color:rgba(255,255,255,.82);
  font-style:italic; flex:1;
}
.testi-quote::before{ content:'“'; color:var(--gold); font-size:2rem; line-height:0; vertical-align:-.5rem; margin-right:4px; font-style:normal; }
.testi-meta{
  display:flex; align-items:center; gap:14px;
  padding-top:20px; border-top:1px solid var(--line-d);
}
.testi-avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--bg-3); border:1px solid var(--line-d);
  display:grid; place-items:center;
  font-size:.78rem; font-weight:700; color:var(--gold); letter-spacing:.05em;
}
.testi-card--highlight .testi-avatar{ background:rgba(216,161,63,.15); border-color:var(--gold); }
.testi-avatar--img{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--line-d); }
.testi-card--highlight .testi-avatar--img{ border-color:var(--gold); }
.testi-name{ font-size:.9rem; font-weight:600; color:#fff; }
.testi-role{ font-size:.75rem; color:var(--muted-d); margin-top:2px; }
.testi-stars{ margin-left:auto; display:flex; gap:3px; color:var(--gold); }
.testi-stars svg{ width:12px; height:12px; }
.testi-nav{
  display:flex; align-items:center;
  gap:10px; margin-top:22px;
}
.testi-btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-d); background:none;
  color:#fff; cursor:pointer; display:grid; place-items:center;
  transition:.25s var(--ease); flex:none;
}
.testi-btn:hover{ border-color:var(--gold); color:var(--gold); }
.testi-btn svg{ width:16px; height:16px; }
.testi-dots{ display:flex; gap:7px; align-items:center; margin-right:auto; }
.testi-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25); border:none; cursor:pointer; padding:0; transition:.3s var(--ease); }
.testi-dot.active{ background:var(--gold); transform:scale(1.3); }
@media(max-width:1080px){
  .testi-card{ flex:0 0 calc(50% - 10px); min-width:260px; }
}
@media(max-width:600px){
  .testi-card{ flex:0 0 calc(100% - 0px); min-width:0; padding:24px 20px; }
}

/* ============================================================
   PRICING ACCORDION — mobile/tablet only
   ============================================================ */
.pricing-accordion{ display:none; flex-direction:column; gap:10px; }
.pac{
  border:1px solid var(--line-d); border-radius:12px;
  overflow:hidden; background:var(--bg-2);
}
.pac--pop{ border-color:var(--gold); }
.pac-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 20px;
  background:none; border:none; cursor:pointer; color:#fff;
  text-align:left;
}
.pac-left{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; flex:1; min-width:0; }
.pac-name{ font-size:1rem; font-weight:600; line-height:1.3; min-width:0; overflow-wrap:break-word; color:#fff; }
.pac-tag{
  font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  background:#111114; color:#fff; border:1px solid rgba(255,255,255,.15);
  padding:3px 9px; border-radius:20px; max-width:100%; line-height:1.3;
}
.pac-right{ display:flex; align-items:center; gap:10px; flex:none; }
.pac-price{ font-size:.9rem; font-weight:700; color:var(--gold); white-space:nowrap; }
.pac-chev{
  width:18px; height:18px; flex:none; color:var(--muted-d);
  transition:transform .3s var(--ease);
}
.pac.open .pac-chev{ transform:rotate(180deg); }
.pac-body{
  max-height:0; overflow:hidden;
  transition:max-height .4s var(--ease);
  padding:0 20px;
}
.pac.open .pac-body{
  max-height:600px;
  padding:0 20px 20px;
}
.pac-tier{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.88rem; padding:9px 0;
  border-bottom:1px dashed var(--line-d); color:var(--muted-d);
}
.pac-tier b{ color:#fff; font-weight:600; }
.pac-feats{
  list-style:none; margin-top:16px;
  display:flex; flex-direction:column; gap:10px;
}
.pac-feats li{ display:flex; gap:9px; font-size:.88rem; color:var(--muted-d); line-height:1.4; align-items:flex-start; }
.pac-feats li svg{ width:14px; height:14px; flex:none; color:var(--gold); margin-top:2px; }

@media(max-width:1080px){
  body[data-page="pricing"] .price-grid{ display:none; }
  body[data-page="services"] .price-grid{ display:none; }
  body[data-page="services"] .sd-feat[style]{ grid-template-columns:1fr !important; }
  .pricing-accordion{ display:flex; }
  .sd-packages{ display:block; }
}

/* ============================================================
   PARALLAX BAND
   ============================================================ */
.parallax-band{
  position:relative;
  padding:clamp(80px,12vw,160px) 0;
  text-align:center;
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.parallax-band::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(13,13,15,.75);
}
.parallax-band .wrap{ position:relative; z-index:1; }
/* iOS fix - fixed attachment breaks inside scroll containers */
@media(max-width:768px){
  .parallax-band{ background-attachment:scroll; }
}
/* Portfolio: video (native) + facade + iframe support */
.pf-item video,
.pf-item iframe,
.pf-item .pf-facade {
  width: 100%; height: 100%; display: block; border: 0;
  transition: 1s var(--ease);
}
.pf-item video,
.pf-item img.pf-facade { object-fit: cover; }

/* Facade cursor + hover zoom to match other tiles */
.pf-item .pf-facade { cursor: pointer; }
.pf-item:hover img.pf-facade { transform: scale(1.07); }

/* Instagram placeholder (no thumbnail available) */
.pf-facade-ig {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
  color: #fff; text-align: center; padding: 20px;
  font-size: .95rem; line-height: 1.3; text-decoration: none;
}
.pf-ig-placeholder { max-width: 80%; }

/* Small play badge (top-right corner) */
.pf-item.is-video::before {
  content: ""; position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.6) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/16px no-repeat;
  pointer-events: none;
}

/* Overlay text sits above media; clicks pass through */
.pf-item .pf-overlay { z-index: 2; pointer-events: none; }

/* Footer legal links */
.footer-legal-links a { color: inherit; opacity: .85; transition: opacity .2s; }
.footer-legal-links a:hover { opacity: 1; color: var(--gold); }
.footer-legal-links span { margin: 0 4px; opacity: .5; }

/* ─── Parallax CTA block ─── */
.parallax-band{
  position:relative;
  min-height:420px;
  background:#0d0d0f center/cover no-repeat fixed;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:100px 24px;
  overflow:hidden;
}
.parallax-band::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(13,13,15,.35) 0%, rgba(13,13,15,.10) 100%);
  pointer-events:none;
}
.parallax-band > *{ position:relative; z-index:2; }
.parallax-band .eyebrow{ color:var(--gold); border-color:var(--gold); }
.parallax-band h2{ color:#fff; font-size:clamp(1.7rem,3.6vw,2.8rem); margin:14px 0 12px; max-width:780px; line-height:1.2; }
.parallax-band p{ color:rgba(255,255,255,.82); font-size:1.05rem; max-width:600px; margin:0 auto 28px; }
.parallax-band .btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* iOS doesn't support background-attachment: fixed reliably, so fall back */
@supports (-webkit-touch-callout: none){
  .parallax-band{ background-attachment:fixed; }
}
@media (max-width: 720px){
  .parallax-band{ min-height:340px; padding:70px 20px; background-attachment:fixed; }
}

/* Text shadow for legibility on lighter overlay */
.parallax-band h2, .parallax-band p, .parallax-band .eyebrow{
  text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.6);
}

/* ============================================================
   CONTACT PAGE (moved from contact.php, SA-10). At the end of the
   file, like the page style element it replaces. Labels on cream use ink,
   the consent text muted-l and the nudge label gold-on-light (AA).
   ============================================================ */
.contact-grid{ grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.contact-grid > div:first-child{ padding-right:32px; border-right:1px solid var(--line-l); }
.contact-lines{ display:flex; flex-direction:column; gap:26px; }
.cl-lbl{ display:block; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); font-weight:600; margin-bottom:6px; }
.cl-val{ font-size:1.35rem; font-weight:500; line-height:1.3; color:var(--ink); }
.cl-val-sm{ font-size:1.1rem; }
a.cl-val:hover{ color:var(--gold-on-light); }
.contact-image{ display:block; width:100%; border-radius:var(--radius); }
.contact-form-wrap{ background:var(--white); border:1px solid var(--line-l); border-radius:8px; padding:48px; box-shadow:0 4px 20px color-mix(in srgb, var(--ink) 4%, transparent); }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.contact-message{ margin-top:34px; }
.contact-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:40px; }
.consent{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--muted-l); cursor:pointer; }
.consent input{ width:16px; height:16px; accent-color:var(--action); }
.contact-nudge{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  background:var(--white); border:1px solid var(--line-l); border-left:4px solid var(--gold); border-radius:8px;
  padding:22px 28px; margin-bottom:40px; box-shadow:0 2px 12px color-mix(in srgb, var(--ink) 4%, transparent);
}
.contact-nudge-title{ margin:0 0 5px; font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-on-light); }
.contact-nudge-text{ margin:0; font-size:.93rem; color:var(--muted-l); }
.contact-nudge .btn{ flex-shrink:0; }
/* Spam-trap field (includes/partials/form-guard.php): off screen, still in the page for bots. */
.form-trap{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .contact-grid > div:first-child{ padding-right:0; border-right:0; padding-bottom:32px; border-bottom:1px solid var(--line-l); }
  .contact-form-wrap{ padding:32px 24px; }
}
@media (max-width:680px){ .form-2{ grid-template-columns:1fr; } }

/* ============================================================
   BOOK PAGE (moved from book.php, SA-10). Gold text on white uses
   gold-on-light; the popular badge uses --action (AA).
   ============================================================ */
body[data-page="book"]{ background:var(--white); }
body[data-page="book"] .page-hero{ padding-bottom:90px; }
.book-section{ padding-top:70px; background:var(--white); }
.booking{ display:grid; grid-template-columns:1.5fr .8fr; gap:50px; align-items:start; }
.bk-step{ padding-bottom:50px; margin-bottom:50px; border-bottom:1px solid var(--line-l); }
.bk-step:last-child{ border:none; margin-bottom:0; }
.bk-head{ display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.bk-n{ font-size:1rem; font-weight:600; color:var(--gold-on-light); letter-spacing:.1em; }
.bk-gap{ margin-top:34px; }
.pkg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pkg{ position:relative; background:var(--white); border:1px solid var(--line-l); border-radius:8px; padding:22px 24px; cursor:pointer; transition:.3s var(--ease); box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 3%, transparent); }
.pkg:hover{ border-color:color-mix(in srgb, var(--gold) 60%, transparent); box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 6%, transparent); }
.pkg.sel{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, transparent); box-shadow:0 6px 18px color-mix(in srgb, var(--gold) 15%, transparent); }
.pkg .pop{ position:absolute; top:14px; right:14px; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--action); font-weight:600; }
.pkg h4{ font-size:1.25rem; color:var(--ink); }
.pkg .ps{ color:var(--muted-l); font-size:.88rem; margin-top:2px; }
.pkg .pp{ margin-top:14px; font-size:1.4rem; font-weight:600; color:var(--ink); }
.pkg .pp small{ font-size:.8rem; color:var(--muted-l); font-weight:400; }
.cal-wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:34px; }
.cal-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-weight:600; font-size:1.05rem; color:var(--ink); }
.cal-nav{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-l); background:var(--white); color:var(--ink); font-size:1.2rem; line-height:1; transition:.3s; cursor:pointer; }
.cal-nav:hover{ border-color:var(--gold); color:var(--gold-on-light); }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:8px; }
.cal-dow span{ text-align:center; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-l); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-grid button{ aspect-ratio:1; border:none; background:none; color:var(--ink); border-radius:50%; font-family:inherit; font-size:.95rem; transition:.25s; cursor:pointer; }
.cal-grid button:hover:not(:disabled){ background:color-mix(in srgb, var(--ink) 5%, transparent); }
.cal-grid button:disabled{ color:color-mix(in srgb, var(--ink) 22%, transparent); cursor:default; }
.cal-grid button.sel{ background:var(--action); color:var(--white); } /* D22 */
.slots-lbl{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-on-light); font-weight:600; margin-bottom:14px; }
.slot-loading{ color:var(--muted-l); font-size:.9rem; }
.slot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.slot-grid button{ border:1px solid var(--line-l); background:var(--white); color:var(--ink); border-radius:4px; padding:11px; font-family:inherit; font-size:.9rem; transition:.25s; cursor:pointer; }
.slot-grid button:hover:not(:disabled){ border-color:var(--gold); }
.slot-grid button:disabled{ opacity:.4; cursor:not-allowed; }
.booking-summary{ position:sticky; top:100px; }
.bs-card{ background:var(--white); border:1px solid var(--line-l); border-radius:8px; padding:34px; box-shadow:0 4px 20px color-mix(in srgb, var(--ink) 5%, transparent); }
.bs-card h3{ margin-bottom:22px; color:var(--ink); }
.bs-line{ display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-l); font-size:.95rem; }
.bs-line span{ color:var(--muted-l); }
.bs-line b{ font-weight:600; text-align:right; color:var(--ink); }
.bs-total{ display:flex; justify-content:space-between; align-items:baseline; padding:20px 0; }
.bs-total span{ color:var(--muted-l); font-size:.9rem; }
.bs-total b{ font-size:1.7rem; font-weight:600; color:var(--gold-on-light); }
.bs-fine{ font-size:.76rem; color:var(--muted-l); line-height:1.5; margin-bottom:18px; }
.bs-submit{ width:100%; justify-content:center; margin-top:8px; }
.bs-note{ color:var(--gold-on-light); font-weight:500; margin-top:14px; font-size:.9rem; opacity:0; transition:.4s; }
.bs-note.show{ opacity:1; }
.bs-help{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-l); font-size:.9rem; color:var(--muted-l); text-align:center; }
.bs-help a{ color:var(--gold-on-light); font-weight:600; }
@media (max-width:980px){
  .booking{ grid-template-columns:1fr; gap:32px; }
  .booking-summary{ position:static; }
  .bs-card{ padding:24px; }
  .bk-step{ padding-bottom:36px; margin-bottom:36px; }
  .cal-wrap{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:680px){
  .booking{ gap:24px; }
  .bk-step{ padding-bottom:28px; margin-bottom:28px; }
  .bk-head{ gap:12px; margin-bottom:18px; }
  .bk-head h2{ font-size:1.15rem; }
  body[data-page="book"] .pkg-grid, body[data-page="book"] .form-2{ grid-template-columns:1fr; gap:12px; }
  .pkg{ padding:18px 20px; }
  .pkg h4{ font-size:1.1rem; }
  .pkg .pp{ font-size:1.25rem; }
  /* Inputs at least 16px to prevent iOS zoom on focus */
  body[data-page="book"] .field input, body[data-page="book"] .field textarea, body[data-page="book"] .field select{ font-size:16px !important; }
  .cal-dow{ gap:2px; }
  .cal-grid{ gap:2px; }
  .cal-grid button{ font-size:.88rem; }
  .cal-nav{ width:40px; height:40px; }
  .cal-top{ font-size:1rem; }
  .slot-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .slot-grid button{ padding:14px 8px; font-size:.92rem; }
  .bs-card{ padding:20px; border-radius:6px; }
  .bs-card h3{ font-size:1.1rem; margin-bottom:14px; }
  .bs-line{ font-size:.88rem; padding:10px 0; }
  .bs-total b{ font-size:1.4rem; }
  .bs-card .btn-coral{ width:100%; justify-content:center; padding:14px 16px; font-size:1rem; }
}
@media (max-width:380px){
  .bs-card{ padding:16px; }
  .pkg{ padding:14px 16px; }
}

/* ============================================================
   CREATIVE STUDIO HOME (moved from web/index.php, SA-11). Scoped
   to the page and at the end of the file, like the page style element it
   replaces. Card numbers on white use gold-on-light (AA).
   ============================================================ */
body[data-page="web-home"] .hero{ position:relative; min-height:100vh; background:var(--bg); }
body[data-page="web-home"] #hero-slider{ position:absolute; inset:0; z-index:0; overflow:hidden; }
body[data-page="web-home"] #hero-slider .hs-track{ position:absolute; inset:0; }
body[data-page="web-home"] #hero-slider .hs-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); z-index:0; background:var(--bg); }
body[data-page="web-home"] #hero-slider .hs-slide.active{ opacity:1; z-index:1; }
body[data-page="web-home"] #hero-slider .hs-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
body[data-page="web-home"] #hero-slider .hs-slide .hs-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
body[data-page="web-home"] .hs-overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(to right, color-mix(in srgb, var(--ink) 65%, transparent) 0%, color-mix(in srgb, var(--ink) 30%, transparent) 60%, color-mix(in srgb, var(--ink) 5%, transparent) 100%); }
body[data-page="web-home"] .hs-prev, body[data-page="web-home"] .hs-next{ z-index:4; }
body[data-page="web-home"] .hero-inner{
  position:relative; z-index:3;
  width:min(var(--wrap), 100% - 2*var(--gut)); margin-inline:auto;
  padding-top:clamp(90px,12vh,140px);
  padding-bottom:clamp(60px,9vh,110px);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:100vh;
}
body[data-page="web-home"] .hero-content{ display:flex; flex-direction:column; }
body[data-page="web-home"] .hero-tagline{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem,6vw,6.8rem);
  line-height:1; letter-spacing:-.035em;
  color:var(--white); display:flex; flex-wrap:wrap; gap:.22em;
}
/* Words rise in one after another (the delay per word was an inline --i before SA-11). */
body[data-page="web-home"] .hw{ display:inline-block; opacity:0; transform:translateY(32px); animation:wordIn .75s var(--ease) forwards; animation-delay:calc(var(--i, 23) * 150ms + 300ms); }
body[data-page="web-home"] .hw:nth-child(1){ --i:0; }
body[data-page="web-home"] .hw:nth-child(2){ --i:1; }
body[data-page="web-home"] .hw:nth-child(3){ --i:2; }
body[data-page="web-home"] .hw:nth-child(4){ --i:3; }
body[data-page="web-home"] .hw:nth-child(5){ --i:4; }
body[data-page="web-home"] .hw:nth-child(6){ --i:5; }
body[data-page="web-home"] .hw:nth-child(7){ --i:6; }
body[data-page="web-home"] .hw:nth-child(8){ --i:7; }
body[data-page="web-home"] .hw:nth-child(9){ --i:8; }
body[data-page="web-home"] .hw:nth-child(10){ --i:9; }
body[data-page="web-home"] .hw:nth-child(11){ --i:10; }
body[data-page="web-home"] .hw:nth-child(12){ --i:11; }
body[data-page="web-home"] .hw:nth-child(13){ --i:12; }
body[data-page="web-home"] .hw:nth-child(14){ --i:13; }
body[data-page="web-home"] .hw:nth-child(15){ --i:14; }
body[data-page="web-home"] .hw:nth-child(16){ --i:15; }
body[data-page="web-home"] .hw:nth-child(17){ --i:16; }
body[data-page="web-home"] .hw:nth-child(18){ --i:17; }
body[data-page="web-home"] .hw:nth-child(19){ --i:18; }
body[data-page="web-home"] .hw:nth-child(20){ --i:19; }
body[data-page="web-home"] .hw:nth-child(21){ --i:20; }
body[data-page="web-home"] .hw:nth-child(22){ --i:21; }
body[data-page="web-home"] .hw:nth-child(23){ --i:22; }
body[data-page="web-home"] .hw:nth-child(24){ --i:23; }
@keyframes wordIn{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  body[data-page="web-home"] .hw{ animation:none; opacity:1; transform:none; }
}
/* Optional subtext and buttons under the tagline (empty by default). */
body[data-page="web-home"] .hero-subtext{ max-width:600px; margin-top:24px; font-size:1.05rem; line-height:1.6; color:color-mix(in srgb, var(--white) 85%, transparent); }
body[data-page="web-home"] .hero-buttons{ margin-top:32px; }
body[data-page="web-home"] .parallax-band{ background-image:var(--parallax-image, none); }
body[data-page="web-home"] .parallax-band .btn-ghost{ border-color:color-mix(in srgb, var(--white) 45%, transparent); color:var(--white); }
body[data-page="web-home"] .web-svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
body[data-page="web-home"] .web-svc{ text-decoration:none; color:var(--ink); border:1px solid var(--line-l); border-radius:6px; overflow:hidden; transition:.3s var(--ease); display:flex; flex-direction:column; }
body[data-page="web-home"] a.web-svc:hover{ transform:translateY(-4px); box-shadow:0 16px 36px color-mix(in srgb, var(--ink) 10%, transparent); border-color:var(--gold); }
body[data-page="web-home"] .web-svc-img{ aspect-ratio:3/2; overflow:hidden; width:100%; }
body[data-page="web-home"] .web-svc-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:.6s var(--ease); }
body[data-page="web-home"] a.web-svc:hover .web-svc-img img{ transform:scale(1.05); }
body[data-page="web-home"] .web-svc-body{ padding:18px 20px; background:var(--white); flex:1; }
body[data-page="web-home"] .web-svc-body .n{ font-size:.68rem; font-weight:700; color:var(--gold-on-light); letter-spacing:.16em; text-transform:uppercase; }
body[data-page="web-home"] .web-svc-body h3{ font-size:.95rem; font-weight:600; margin-top:6px; color:var(--ink); }
body[data-page="web-home"] .web-svc-body p{ font-size:.82rem; color:var(--muted-l); margin-top:6px; line-height:1.5; }
body[data-page="web-home"] .web-svc-more{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--ink); }
body[data-page="web-home"] .web-svc-more svg{ width:16px; height:12px; }
@media (max-width:1080px){
  body[data-page="web-home"] .web-svc-grid{ grid-template-columns:repeat(2,1fr); }
  body[data-page="web-home"] .hero-tagline{ font-size:clamp(1.8rem,8vw,4rem); }
  body[data-page="web-home"] .hero-inner{ justify-content:center; padding-top:clamp(100px,14vh,160px); }
}
@media (max-width:600px){
  body[data-page="web-home"] .web-svc-grid{ grid-template-columns:1fr; }
  body[data-page="web-home"] .hero{ min-height:92vh; }
  body[data-page="web-home"] .hero-inner{ justify-content:center; padding-top:clamp(90px,12vh,140px); }
}

/* ============================================================
   CREATIVE STUDIO SERVICE PAGES (moved from web/video.php and the
   3 others, SA-11; template includes/partials/cs-service-page.php).
   Card text on cream-2 uses ink at 70% (6.3:1); muted-d was 2.2:1.
   ============================================================ */
body[data-page="service-detail"] .page-hero{ padding:clamp(80px,10vw,120px) 0 clamp(40px,5vw,60px); background:var(--bg); }
body[data-page="service-detail"] .page-hero::after{ background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--bg) 86%, transparent)); }
body[data-page="service-detail"] .page-hero h1{ font-size:clamp(2rem,4vw,3.2rem); }
body[data-page="service-detail"] .crumbs .sep{ color:inherit; }
body[data-page="service-detail"] .sd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
body[data-page="service-detail"] .sd-img{ border-radius:4px; overflow:hidden; aspect-ratio:4/3.2; }
body[data-page="service-detail"] .sd-img img{ width:100%; height:100%; object-fit:cover; }
body[data-page="service-detail"] .incl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(30px,4vw,50px); list-style:none; }
body[data-page="service-detail"] .incl-item{ display:flex; gap:14px; padding:20px; border:1px solid var(--line-l); border-radius:4px; }
body[data-page="service-detail"] .incl-item svg{ flex:none; margin-top:3px; color:var(--gold); width:20px; height:20px; }
body[data-page="service-detail"] .incl-item h3{ font-size:.98rem; margin-bottom:4px; }
body[data-page="service-detail"] .incl-item p{ font-size:.88rem; color:var(--muted-l); }
body[data-page="service-detail"] .gal-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; height:520px; }
body[data-page="service-detail"] .gal-grid .g0{ grid-row:1/3; }
body[data-page="service-detail"] .gal-grid .gi{ overflow:hidden; border-radius:4px; }
body[data-page="service-detail"] .gal-grid .gi img{ width:100%; height:100%; object-fit:cover; transition:.8s var(--ease); }
body[data-page="service-detail"] .gal-grid .gi:hover img{ transform:scale(1.05); }
body[data-page="service-detail"] .cs-feat-section{ background:var(--cream-2); }
body[data-page="service-detail"] .sd-feat{ display:flex; flex-direction:column; }
body[data-page="service-detail"] .sd-feat .grid{ grid-template-columns:repeat(3,1fr); gap:30px; }
body[data-page="service-detail"] .sd-feat .item{ padding:28px; border:1px solid var(--line-l); border-radius:4px; }
body[data-page="service-detail"] .sd-feat .item h3{ font-size:1.05rem; margin-bottom:10px; }
body[data-page="service-detail"] .sd-feat .item p, body[data-page="service-detail"] .cs-feat-lead{ font-size:.92rem; color:color-mix(in srgb, var(--ink) 70%, transparent); }
@media (max-width:1080px){
  body[data-page="service-detail"] .sd-grid{ grid-template-columns:1fr; gap:34px; }
  body[data-page="service-detail"] .incl-grid{ grid-template-columns:1fr; }
  body[data-page="service-detail"] .sd-feat .grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  body[data-page="service-detail"] .gal-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto; height:auto; }
  body[data-page="service-detail"] .gal-grid .g0{ grid-row:auto; }
  body[data-page="service-detail"] .gal-grid .gi{ aspect-ratio:4/3; }
  body[data-page="service-detail"] .sd-feat .grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  body[data-page="service-detail"] .page-hero{ padding:160px 0 80px; }
  body[data-page="service-detail"] .gal-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   CREATIVE STUDIO CONTACT (moved from web/contact.php, SA-11). The
   page shares the CONTACT PAGE rules above; only the nudge differs
   (cream-2 box with the phone after the text; ink text for AA).
   ============================================================ */
body[data-section="web"][data-page="contact"] .contact-nudge{ background:var(--cream-2); border:1px solid var(--line-l); border-radius:6px; box-shadow:none; }
body[data-section="web"][data-page="contact"] .contact-nudge-title{ color:var(--ink); }
body[data-section="web"][data-page="contact"] .contact-nudge-text{ color:color-mix(in srgb, var(--ink) 70%, transparent); }
body[data-section="web"][data-page="contact"] .contact-nudge-phone{ color:var(--ink); font-weight:600; }

/* ============================================================
   LEGAL PAGES (/terms, /privacy; moved from the page heads, SA-12)
   The header is a white band with the breadcrumb only. The dark overlay of
   .page-hero is turned off: on stage_3 it covered the white band and left
   the breadcrumb at about 1.4:1.
   ============================================================ */
.legal-hero{ min-height:auto; padding:120px 0 30px; background:var(--white); }
.legal-hero::after{ content:none; }
.legal-hero .crumbs,
.legal-hero .crumbs a{ color:var(--muted-l); }
.legal-hero .crumbs [aria-current]{ color:var(--ink); }
.legal-section{ background:var(--white); padding-top:30px; }
.legal-wrap{ max-width:780px; margin:0 auto; padding:50px 0 90px; }
.legal-wrap h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:8px; color:var(--ink); }
.legal-wrap h1 + :not(.legal-meta){ margin-top:40px; }
.legal-wrap .legal-meta{ color:var(--muted-l); font-size:.88rem; margin-bottom:40px; }
.legal-wrap h2{ font-size:1.25rem; margin:36px 0 12px; color:var(--ink); }
.legal-wrap p, .legal-wrap li{ color:var(--ink); font-size:1rem; line-height:1.75; }
.legal-wrap ul{ margin:8px 0 8px 22px; }
.legal-wrap a{ color:var(--gold-on-light); text-decoration:underline; }

/* ============================================================
   ERROR PAGE (404; moved from the page head, SA-12)
   ============================================================ */
.error-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px var(--gut) 80px; }
.error-code{ font-size:clamp(6rem,20vw,14rem); font-weight:600; line-height:.9; letter-spacing:-.05em; color:var(--bg-3); position:relative; display:inline-block; }
.error-code::after{ content:attr(data-code); position:absolute; inset:0; background:linear-gradient(135deg,var(--gold) 0%,var(--coral) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:.15; }
.error-title{ margin-top:32px; }
.error-text{ max-width:44ch; margin-inline:auto; }
.error-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:40px; }
.error-help{ margin-top:48px; font-size:.82rem; color:var(--muted-d); }
.error-help a{ color:var(--gold); }

/* ============================================================
   PORTFOLIO VIDEO FACADES (YouTube and Instagram tiles)
   Was a style element printed with the first facade (helpers.php), after this
   file; moved here unchanged and last (SA-15, CSP). portfolio.js swaps
   a facade for its iframe and pairs the tiles in .pf-video-row.
   ============================================================ */
/* Video block: single flex container, wraps 2 per row on desktop */
.pf-video-row{
  column-span:all !important; -webkit-column-span:all !important;
  display:flex !important; flex-wrap:wrap !important;
  gap:18px; margin-bottom:18px; width:100%;
  break-inside:avoid;
}
.pf-video-row > .pf-item{
  flex:0 0 calc(50% - 9px) !important;
  max-width:calc(50% - 9px) !important;
  aspect-ratio:16/9 !important;
  margin:0 !important;
}
.pf-item .pf-facade{
  width:100%; height:100%; display:block; border:0; cursor:pointer;
  transition:1s var(--ease);
}
.pf-item img.pf-facade{ object-fit:cover; }
.pf-item:hover img.pf-facade{ transform:scale(1.03); }
.pf-item.is-video iframe{
  width:100% !important; height:100% !important; border:0 !important; display:block !important;
  position:absolute !important; inset:0 !important;
}
.pf-item.is-video::before{ display:none !important; }
.pf-item.is-video .pf-overlay{ z-index:2; pointer-events:none; }
.pf-item.is-video:has(iframe) .pf-overlay{ display:none !important; }
.pf-facade-ig{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
  color:#fff; text-align:center; padding:20px; text-decoration:none;
}
@media (max-width:1024px){
  .pf-video-row > .pf-item{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}

/* /book while online booking is off: shown to a signed-in admin only */
.preview-bar{ background:var(--gold); color:var(--ink); text-align:center; font-size:.88rem; font-weight:600; padding:10px var(--gut); }

/* Sample deliverables gallery (RMS): floor plans shown whole on white, open full size */
.sd-gallery{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.sd-gallery figure{ margin:0; }
.sd-gallery-link{ display:block; background:#fff; border:1px solid var(--line-l); border-radius:var(--radius); padding:12px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.sd-gallery-link:hover, .sd-gallery-link:focus-visible{ border-color:var(--gold); box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.sd-gallery-link img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; }
.sd-gallery-link{ cursor:zoom-in; }
.sd-gallery figcaption{ margin-top:10px; font-size:.88rem; }
@media (max-width:900px){ .sd-gallery{ grid-template-columns:repeat(2, 1fr); gap:16px; } }

/* Booking: choose your team (employees, 0.9.0) */
.bk-team-intro{ margin:-6px 0 18px; }
.tm-role{ border:0; margin:0 0 22px; padding:0; min-width:0; }
.tm-role-title{ font-weight:600; font-size:.95rem; margin-bottom:10px; padding:0; }
.tm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; }
.tm-card{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--white); border:1px solid var(--line-l); border-radius:8px; cursor:pointer; transition:.25s var(--ease); }
.tm-card:hover{ border-color:var(--gold); }
.tm-card input{ position:absolute; opacity:0; width:1px; height:1px; }
.tm-card:has(input:checked){ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, var(--white)); box-shadow:0 6px 18px color-mix(in srgb, var(--gold) 15%, transparent); }
.tm-card:has(input:focus-visible){ outline:3px solid var(--ink); outline-offset:2px; }
.tm-face{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none; background:var(--cream-2); display:grid; place-items:center; }
.tm-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.tm-initials{ font-weight:700; font-size:.85rem; color:var(--gold-on-light); }
.tm-text{ display:grid; gap:2px; min-width:0; }
.tm-text b{ font-weight:600; color:var(--ink); }
.tm-text small{ font-size:.78rem; color:var(--muted-l); }
.tm-any .tm-initials{ color:var(--ink); }

/* Lightbox (RMS sample floor plans) */
.lb{ position:fixed; inset:0; margin:auto; width:min(1200px, 96vw); height:min(92vh, 1000px); max-width:none; max-height:none; padding:0; border:0; border-radius:10px; background:#fff; color:var(--ink); overflow:hidden; }
.lb[open]{ display:flex; flex-direction:column; }
.lb::backdrop{ background:rgba(13,13,15,.86); }
.lb-bar{ display:flex; align-items:center; gap:16px; padding:12px 16px 12px 22px; border-bottom:1px solid var(--line-l); }
.lb-cap{ flex:1; margin:0; font-weight:600; font-size:.95rem; }
.lb-open{ font-size:.88rem; color:var(--muted-l); text-decoration:underline; text-underline-offset:3px; }
.lb-open:hover{ color:var(--ink); }
.lb-close{ width:40px; height:40px; border:1px solid var(--line-l); border-radius:50%; background:#fff; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--ink); }
.lb-close:hover{ border-color:var(--ink); }
.lb-stage{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px 64px; }
.lb-img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--line-l); background:#fff; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.lb-nav:hover{ border-color:var(--gold); }
.lb-prev{ left:12px; } .lb-next{ right:12px; }
.lb-close:focus-visible, .lb-nav:focus-visible, .lb-open:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
@media (max-width:600px){ .lb-stage{ padding:10px 8px 60px; } .lb-nav{ top:auto; bottom:10px; transform:none; } .lb-prev{ left:calc(50% - 54px); } .lb-next{ right:calc(50% - 54px); } .lb-bar{ flex-wrap:wrap; } }

/* Pause buttons hidden (client request, 0.9.2). The logo strip still pauses on hover and
   keyboard focus; both the strip and the hero video stay still for visitors who ask their
   device for reduced motion. */
.marquee-toggle, .hv-pause{ display:none !important; }

/* Creative Studio switch in the mobile menu (0.9.3) */
.mobile-nav .mobile-switch{ margin-top:22px; font-size:1rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(216,161,63,.4); border-radius:40px; padding:12px 20px; align-self:flex-start; border-bottom:1px solid rgba(216,161,63,.4); }

/* Pricing grids by number of packages (0.9.3): 3 per row, the last row centred, so five
   packages show as 3 + 2 and every card is wider. Four keep one row. */
.price-grid--n3, .price-grid--n5, .price-grid--n6{ grid-template-columns:repeat(6, 1fr); gap:26px; }
.price-grid--n3 > *, .price-grid--n5 > *, .price-grid--n6 > *{ grid-column:span 2; }
.price-grid--n5 > :nth-child(4){ grid-column:2 / span 2; }
.price-grid--n5 > :nth-child(5){ grid-column:4 / span 2; }
.price-grid--n2{ grid-template-columns:repeat(2, minmax(0, 420px)); justify-content:center; }
.price-grid--n1{ grid-template-columns:minmax(0, 460px); justify-content:center; }
.price-grid--n3 .price-card, .price-grid--n5 .price-card, .price-grid--n6 .price-card{ padding:36px 32px; }

/* ── Service grids (0.9.4): every card the same size; rows of 4 + 3 for 7 services, the last
   row centred. --per is set from the number of services (sa_grid_per_row()). ── */
.svc-portal-grid, .svc-boxes{ --gap:clamp(12px, 1.5vw, 20px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap); }
.svc-portal-grid--1, .svc-boxes--1{ --per:1; } .svc-portal-grid--2, .svc-boxes--2{ --per:2; }
.svc-portal-grid--3, .svc-boxes--3{ --per:3; } .svc-portal-grid--4, .svc-boxes--4{ --per:4; }
.svc-portal-grid > *, .svc-boxes > *{ flex:0 0 calc((100% - (var(--per, 3) - 1) * var(--gap)) / var(--per, 3)); min-width:0; }
.svc-portal-grid--4 .svc-portal-card{ min-height:clamp(300px, 26vw, 380px); }
.svc-portal-grid--4 .svc-portal-card p{ max-width:none; }
@media (max-width:1080px){ .svc-portal-grid > *, .svc-boxes > *{ flex-basis:calc((100% - var(--gap)) / 2); } }
@media (max-width:600px){ .svc-portal-grid > *, .svc-boxes > *{ flex-basis:100%; } }

/* Home: plain service boxes (the earlier style), one border each so a short last row stays tidy */
.svc-boxes .svc-card{ border:1px solid var(--line-l); background:var(--white); border-radius:4px; min-height:250px; padding:32px 28px; }
.svc-boxes .svc-card .ic{ width:42px; height:42px; }
.svc-boxes .svc-card .tag{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--gold-text, #8a6420); }
.svc-boxes .svc-card .go{ display:inline-flex; align-items:center; gap:10px; font-size:.86rem; font-weight:600; }
.svc-boxes .svc-card:hover, .svc-boxes .svc-card:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.svc-boxes .svc-card:hover h3, .svc-boxes .svc-card:focus-visible h3{ color:var(--white); }
.svc-boxes .svc-card:hover p, .svc-boxes .svc-card:focus-visible p{ color:var(--muted-d); }
/* Highlights on hover in the site red (Settings → Theme → coral), readable on the dark box */
.svc-boxes .svc-card:hover .ic, .svc-boxes .svc-card:hover .go, .svc-boxes .svc-card:hover .tag,
.svc-boxes .svc-card:focus-visible .ic, .svc-boxes .svc-card:focus-visible .go, .svc-boxes .svc-card:focus-visible .tag{ color:var(--coral); }
.svc-boxes .svc-card:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .svc-boxes .svc-card:hover{ transform:none; } }
/* Service-page team: one or two people sit centred at a readable width */
.team-grid--n1{ grid-template-columns:minmax(0, 360px); justify-content:center; }
.team-grid--n2{ grid-template-columns:repeat(2, minmax(0, 360px)); justify-content:center; }
@media (max-width:600px){ .team-grid--n2{ grid-template-columns:minmax(0, 360px); } }

/* ── Portfolio (0.9.3): category blocks on "All", one even grid per category, viewer ── */
.pf-groups{ display:grid; gap:clamp(48px, 6vw, 80px); }
.pf-groups[hidden], .pf-list[hidden], .pf-more[hidden], .pf-cell[hidden], .pf-tile[hidden]{ display:none; }
.pf-group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--line-l); }
.pf-group-title{ font-size:clamp(1.35rem, 2.2vw, 1.8rem); display:flex; align-items:baseline; gap:12px; }
.pf-group-title .pf-count{ font-size:.9rem; }
.pf-group-all{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 4px; border:0; border-bottom:2px solid var(--action); background:none; color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
.pf-group-all svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.pf-group-all:hover svg{ transform:translateX(4px); }
.pf-group-all:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.pf-wall{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 18px); }
.pf-cell{ display:block; min-width:0; }
.pf-tile{ position:relative; display:block; aspect-ratio:3/2; overflow:hidden; border-radius:6px; background:#1a1a1e; color:var(--white); isolation:isolate; }
.pf-tile img, .pf-tile video, .pf-tile-blank{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.pf-tile img.pf-yt{ transform:scale(1.19); }  /* YouTube thumbnails are 4:3 with bars */
.pf-tile:hover img, .pf-tile:hover video{ transform:scale(1.05); }
.pf-tile:hover img.pf-yt{ transform:scale(1.25); }
.pf-tile::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(13,13,15,.78), rgba(13,13,15,0) 55%); opacity:0; transition:opacity .35s var(--ease); }
.pf-tile.is-video::after, .pf-tile:hover::after, .pf-tile:focus-visible::after{ opacity:1; }
.pf-mark{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(13,13,15,.55); color:var(--white); opacity:0; transform:scale(.85); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.pf-mark svg{ width:18px; height:18px; }
.pf-tile:hover .pf-mark, .pf-tile:focus-visible .pf-mark{ opacity:1; transform:scale(1); }
.pf-mark-play{ top:50%; left:50%; right:auto; width:62px; height:62px; margin:-31px 0 0 -31px; background:var(--action); opacity:1; transform:none; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.pf-mark-play svg{ width:24px; height:24px; margin-left:3px; }
.pf-tile:hover .pf-mark-play{ transform:scale(1.08); }
.pf-tile-cap{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; font-size:.92rem; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.pf-tile.is-video .pf-tile-cap, .pf-tile:hover .pf-tile-cap, .pf-tile:focus-visible .pf-tile-cap{ opacity:1; transform:none; }
.pf-tile:focus-visible{ outline:3px solid var(--action); outline-offset:3px; }
@media (max-width:980px){ .pf-wall{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px){
  .pf-wall{ grid-template-columns:1fr; }
  .pf-mark-play{ width:54px; height:54px; margin:-27px 0 0 -27px; }
}
@media (hover:none){ .pf-tile .pf-tile-cap{ opacity:1; transform:none; } .pf-tile::after{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .pf-tile img, .pf-tile video{ transition:none; } .pf-tile:hover img{ transform:none; } .pf-tile:hover img.pf-yt{ transform:scale(1.19); } }

/* Viewer: dark stage for photos and videos */
.lb.lb-dark{ background:#0d0d0f; color:var(--white); width:min(1280px, 96vw); }
.lb-dark .lb-bar{ border-bottom-color:var(--line-d); }
.lb-dark .lb-open{ color:var(--muted-d); }
.lb-dark .lb-open:hover{ color:var(--white); }
.lb-dark .lb-close{ background:transparent; border-color:var(--line-d); color:var(--white); }
.lb-dark .lb-close:hover{ border-color:var(--white); }
.lb-dark .lb-nav{ background:rgba(255,255,255,.08); border-color:var(--line-d); color:var(--white); box-shadow:none; }
.lb-dark .lb-nav:hover{ border-color:var(--gold); }
.lb-media{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
.lb-media img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.lb-media video{ max-width:100%; max-height:100%; display:block; background:#000; }
.lb-media iframe{ border:0; display:block; width:100%; max-height:100%; aspect-ratio:16/9; background:#000; }
.lb-media.is-instagram iframe{ width:min(100%, 480px); height:100%; aspect-ratio:auto; background:#fff; }
/* Home pricing teaser: a price written in words ("Starting $799+") at a smaller size */
.price.price-words{ font-size:clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing:-.02em; }

/* Home pricing rows on phones (0.9.6): name left, price right, arrow, like the Pricing page rows.
   The icon gives its width to the name; on the narrowest phones the price sits under the name. */
@media (max-width:560px){
  .pkg-pill{ gap:12px; }
  .pkg-pill-icon{ display:none; }
}
@media (max-width:374px){
  .pkg-pill{ display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; row-gap:2px; }
  .pkg-pill-left{ grid-column:1; grid-row:1; }
  .pkg-pill-price{ grid-column:1; grid-row:2; text-align:left; }
  .pkg-pill-arrow{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}

/* Tap and click feedback (0.9.6): no blue browser flash, a short press effect in its place.
   Keyboard focus outlines are separate (:focus-visible) and stay. */
html{ -webkit-tap-highlight-color:transparent; }
a, button, summary, label, select, [role="button"], [role="tab"], [tabindex]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a:active, button:active, summary:active, label:active, [role="button"]:active, [role="tab"]:active{ opacity:.72; transition-duration:.08s; }
.btn:active, .pkg-pill:active, .svc-card:active, .svc-portal-card:active, .pf-tile:active, .pf-tab:active, .work-tab:active, .sd-gallery-link:active, .pf-group-all:active{ transform:scale(.98); transition-duration:.08s; }
@media (prefers-reduced-motion:reduce){
  .btn:active, .pkg-pill:active, .svc-card:active, .svc-portal-card:active, .pf-tile:active, .pf-tab:active, .work-tab:active, .sd-gallery-link:active, .pf-group-all:active{ transform:none; }
}

/* Booking page package cards: a long tag wraps, and sits above the title on phones (0.9.8) */
.pkg .pop{ max-width:55%; text-align:right; line-height:1.3; }
@media (max-width:400px){ .pkg .pop{ position:static; display:block; max-width:none; text-align:left; margin-bottom:6px; } }