/* ===========================================================
   The Alpha's — Design System
   Dark charcoal/green background, cream text, gold accents.
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   =========================================================== */

:root{
  --bg:#10140f;
  --bg-soft:#151b13;
  --fg:#f3ead9;
  --muted:#b3ae9f;
  --card:#1a2018;
  --card-hover:#1f271c;
  --border:rgba(217,169,78,.18);
  --border-strong:rgba(217,169,78,.4);

  --gold:#d9a94e;
  --gold-light:#e8c37a;
  --gold-dim:#a67f3a;

  --lavender:#cbbed8;
  --peach:#f0c9b8;
  --sage:#33402c;
  --beige:#e5ceb9;
  --taupe:#9b8b81;
  --green:#2a3524;
  --darkgreen:#1a2216;

  --danger:#e57373;
  --danger-bg:rgba(229,115,115,.08);
  --danger-border:rgba(229,115,115,.35);

  --radius:14px;
  --radius-lg:20px;
  --container:1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'DM Sans','Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond','Georgia',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 .4em;
  color:var(--fg);
}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.25rem;
}
@media(min-width:1024px){ .container{padding:0 2rem;} }

.section{padding:5rem 0;}
@media(max-width:640px){ .section{padding:3.25rem 0;} }

.text-center{text-align:center;}
.text-left{text-align:left;}
.muted{color:var(--muted);}
.eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow--gold{color:var(--gold);}
.eyebrow::after{content:''; display:block; width:2.1rem; height:2px; margin-top:.5rem; border-radius:2px; background:linear-gradient(90deg, var(--gold), transparent);}
.text-center .eyebrow::after, .eyebrow.text-center::after{margin-left:auto; margin-right:auto;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  font-family:'DM Sans',sans-serif;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--fg); color:var(--bg); box-shadow:0 6px 18px rgba(0,0,0,.25);}
.btn-primary:hover{opacity:.92; box-shadow:0 10px 26px rgba(0,0,0,.32);}
.btn-outline{background:var(--card); border-color:var(--border); color:var(--fg);}
.btn-outline:hover{background:var(--card-hover); border-color:var(--border-strong);}
.btn-gold{background:var(--gold); color:#181405; box-shadow:0 8px 22px rgba(217,169,78,.28);}
.btn-gold:hover{opacity:.94; box-shadow:0 12px 28px rgba(217,169,78,.4);}
.btn-dark{background:var(--bg); color:var(--fg); border:1px solid rgba(243,234,217,.25);}
.btn-dark:hover{background:rgba(243,234,217,.08); border-color:rgba(243,234,217,.4);}
@media(prefers-reduced-motion:reduce){ .btn, .btn:hover{transition:none; transform:none;} }
.btn-block{width:100%;}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem;}

/* Badge / pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--border);
  background:var(--card);
  padding:.4rem 1rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  animation:pill-in .6s ease both;
}
@keyframes pill-in{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
@media(prefers-reduced-motion:reduce){ .pill{animation:none;} }

/* Cards */
.card{
  border:1px solid var(--border);
  background:linear-gradient(155deg, var(--card-hover) 0%, var(--card) 45%);
  border-radius:var(--radius-lg);
  padding:1.75rem;
}
.card-hover{transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.card-hover:hover{border-color:var(--border-strong); box-shadow:0 16px 36px rgba(0,0,0,.38); transform:translateY(-5px);}
@media(prefers-reduced-motion:reduce){ .card-hover:hover{transform:none;} }

/* Service cards (homepage preview + /services grid): stretch to the row's
   full height and pin the "Learn more" link to the bottom via margin-top:auto,
   so shorter descriptions don't leave a dead empty gap under the text. */
.service-card{display:flex; flex-direction:column; height:100%;}
.service-card > p{flex:0 0 auto;}
.service-card .link-more{margin-top:auto; padding-top:1rem;}

/* Generic small text CTA — used standalone (service/work cards) and inside
   .section-head. Gold, with the arrow nudging forward on hover/focus. */
.link-more{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.88rem; font-weight:600; color:var(--gold);
  transition:gap .2s ease, color .2s ease;
}
.link-more:hover, .link-more:focus-visible{gap:.55rem; color:var(--gold-light);}

/* Scroll-reveal (progressive enhancement — see main.js; elements are only
   given the .reveal-init class by JS, so content is never hidden if JS fails) */
.reveal-init{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-init.reveal-in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ .reveal-init{opacity:1; transform:none; transition:none;} }

/* ============ SPRINT 2 — signature headings, indexed services list, process line, package polish ============ */
.disp{ font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4.6vw,3.9rem); line-height:1.04; letter-spacing:-.015em; margin:0; }
.disp .l1{ display:block; color:var(--fg); }
.disp .l2{ display:block; color:var(--gold); font-style:italic; }
.disp .l2--outline{ color:transparent; -webkit-text-stroke:1.4px var(--gold); }

.eyebrow--micro{ font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; display:flex; align-items:center; gap:.55rem; }
.text-center .eyebrow--micro{ justify-content:center; }
.eyebrow--micro::before{ content:''; width:7px; height:7px; background:var(--gold); flex-shrink:0; }
.eyebrow--micro::after{ display:none; }

.svc{ border-top:1px solid var(--border); margin-top:2.5rem; position:relative; }
.svc a{ display:grid; grid-template-columns:56px 128px 1fr auto; gap:22px; align-items:center; padding:26px 4px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--fg); position:relative; transition:padding-left .5s cubic-bezier(.16,1,.3,1), background .4s; }
.svc a:hover, .svc a:focus-visible{ padding-left:18px; background:linear-gradient(90deg, rgba(217,169,78,.09), transparent 70%); }
.svc .n{ font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:10px; letter-spacing:.18em; color:var(--gold); }
.svc .t{ font-family:'Cormorant Garamond',serif; font-size:clamp(1.15rem,2.4vw,1.9rem); }
.svc .m{ font-size:.78rem; color:var(--muted); transition:color .3s ease; }
.svc a:hover .m, .svc a:focus-visible .m{ color:var(--gold); }
.svc-thumb{ position:relative; overflow:hidden; aspect-ratio:3/2; border-radius:2px; border:1px solid var(--border); background:var(--card); }
.svc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.35) brightness(.86); transform:scale(1.02); transition:filter .6s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.svc a:hover .svc-thumb img, .svc a:focus-visible .svc-thumb img{ filter:grayscale(0) brightness(1); transform:scale(1.07); }
@media(prefers-reduced-motion:reduce){ .svc-thumb img{ transition:none; } .svc a:hover .svc-thumb img{ transform:none; } }
.svc::before{ content:''; position:absolute; left:28px; top:0; bottom:0; width:2px; background:linear-gradient(var(--gold), var(--gold-dim), transparent); }
.svc a::before{ content:''; position:absolute; left:23px; top:50%; margin-top:-5px; width:10px; height:10px; border-radius:50%; background:var(--gold); border:2px solid var(--bg); box-shadow:0 0 0 3px rgba(217,169,78,.25); transition:box-shadow .3s ease; z-index:1; }
.svc a:hover::before, .svc a:focus-visible::before{ box-shadow:0 0 0 6px rgba(217,169,78,.3); }
@media(max-width:640px){ .svc a{ grid-template-columns:40px 76px 1fr; gap:14px; } .svc .m{ display:none; } .svc::before{ left:19px; } .svc a::before{ left:15px; } }

.timeline.reveal-init{ opacity:1; transform:none; }
.timeline.reveal-init::before{ transform:scaleY(0); transform-origin:top; }
.timeline.reveal-in::before{ transform:scaleY(1); transition:transform 1.6s cubic-bezier(.16,1,.3,1); }
@media(prefers-reduced-motion:reduce){ .timeline.reveal-init::before{ transform:none; } }

.pkg-card.highlight{ background:var(--card); }
.pkg-card .badge-pop{ background:transparent; color:var(--gold); border:1px solid var(--gold); font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; letter-spacing:.1em; text-transform:uppercase; font-size:.62rem; }
.pkg-card .price{ font-size:2.4rem; color:var(--gold); }
.pkg-card .period{ font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }

/* Grids */
.grid{display:grid; gap:1.5rem;}
.grid-2{grid-template-columns:repeat(1,1fr);}
.grid-3{grid-template-columns:repeat(1,1fr);}
.grid-4{grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-5{grid-template-columns:repeat(5,1fr);}
}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:3rem;
}
.section-head h2{font-size:2.2rem; margin-top:.4rem;}
.section-head .link-more{
  font-size:.9rem; font-weight:600; display:inline-flex; align-items:center; gap:.35rem;
}
.section-head .link-more:hover{color:var(--gold);}

/* Icon chip */
.icon-chip{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem; height:2.75rem;
  border-radius:.85rem;
  background:rgba(203,190,216,.16);
  color:var(--fg);
  margin-bottom:1rem;
  font-size:1.3rem;
}
/* Soft colour-matched glow behind every chip so flat icon squares don't
   read as dead grey boxes — uses currentColor so each variant glows its
   own accent automatically. */
.icon-chip::before{
  content:''; position:absolute; inset:-7px; z-index:-1; border-radius:inherit;
  background:currentColor; opacity:.16; filter:blur(11px);
}
.icon-chip--gold{background:rgba(217,169,78,.16); color:var(--gold);}
.icon-chip--lavender{background:rgba(203,190,216,.18); color:var(--lavender);}
.icon-chip--peach{background:rgba(240,201,184,.18); color:var(--peach);}
.icon-chip--sage{background:rgba(51,64,44,.55); color:#8fae70;}
.icon-chip{transition:transform .25s ease, background .25s ease;}
.card-hover:hover .icon-chip{transform:scale(1.08) rotate(-3deg);}
@media(prefers-reduced-motion:reduce){ .card-hover:hover .icon-chip{transform:none;} }

/* ============ HEADER / NAV ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(16,20,15,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.site-header.scrolled{background:rgba(16,20,15,.96); box-shadow:0 10px 28px rgba(0,0,0,.35);}
.brand{transition:color .2s ease, letter-spacing .2s ease;}
.brand:hover{color:var(--gold);}
.nav{
  height:4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--fg);
}
.nav-links{
  display:none;
  align-items:center;
  gap:1.75rem;
}
.nav-links a{
  position:relative;
  font-size:.9rem; font-weight:500; color:var(--muted);
  transition:color .15s ease;
  padding-bottom:.3rem;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--gold); border-radius:2px; transition:right .25s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--fg);}
.nav-links a:hover::after, .nav-links a.active::after{right:0;}
.nav-cta-wrap{display:flex; align-items:center; gap:1rem;}
.nav-toggle{
  background:none; border:none; color:var(--fg); font-size:1.5rem; cursor:pointer;
  line-height:1; padding:.25rem;
}
@media(min-width:1024px){
  .nav-links{display:flex;}
  .nav-toggle{display:none;}
}
.mobile-menu{
  display:none;
  border-top:1px solid var(--border);
  padding:1.25rem;
  background:var(--bg);
}
.mobile-menu.open{display:flex; flex-direction:column; gap:1rem;}
.mobile-menu a{color:var(--muted); font-size:1rem; font-weight:500;}
.mobile-menu a:hover{color:var(--fg);}

/* ============ HERO ============ */
.hero{
  position:relative;
  overflow:hidden;
  padding:4rem 0;
}
.hero-grid{
  display:grid;
  gap:3rem;
  align-items:center;
}
@media(min-width:1024px){ .hero-grid{grid-template-columns:1fr 1fr;} }
.hero h1{
  font-size:2.6rem;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:1.1rem 0 1rem;
}
@media(min-width:640px){ .hero h1{font-size:3.4rem;} }
@media(min-width:1024px){ .hero h1{font-size:4.2rem;} }
.hero p.lede{font-size:1.1rem; color:var(--muted); max-width:34rem;}

.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; z-index:0; animation:blob-float 12s ease-in-out infinite;}
.blob-lavender{background:var(--lavender); width:280px; height:280px; top:-60px; right:-60px;}
.blob-peach{background:var(--peach); width:280px; height:280px; bottom:-60px; left:-60px; animation-delay:-6s;}
@keyframes blob-float{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-16px,18px) scale(1.08);} }
@media(prefers-reduced-motion:reduce){ .blob{animation:none;} }

.hero-visual{
  position:relative; z-index:1;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg, var(--card), var(--darkgreen));
  padding:2.25rem;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  transition:transform .35s ease, box-shadow .35s ease;
}
.hero-visual:hover{transform:translateY(-4px) rotate(-.3deg); box-shadow:0 28px 68px rgba(0,0,0,.48);}
@media(max-width:1023px){ .hero-visual:hover{transform:none;} }
@media(prefers-reduced-motion:reduce){ .hero-visual:hover{transform:none;} }
.hero-visual .stat-row{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.25rem;}
.hero-visual .stat-row div{flex:1; min-width:100px;}
.hero-visual b{display:block; font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--gold);}
.hero-visual span{font-size:.78rem; color:var(--muted);}
.hero-visual-img{
  margin:-2.25rem -2.25rem 1.5rem;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;
}
.hero-visual-img img{width:100%; height:230px; object-fit:cover; display:block;}

/* ============ TICKER ============ */
.ticker{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--fg);
  color:var(--bg);
  padding:.9rem 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  gap:2.5rem;
  align-items:center;
  animation:ticker 32s linear infinite;
  white-space:nowrap;
}
.ticker-track span.sep{color:var(--gold); margin-left:2.5rem;}
.ticker-track .item{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.1rem;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ticker:hover .ticker-track{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){ .ticker-track{animation:none;} }

/* ============ LOGO WALL ============ */
.logo-wall{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.02);}
.logo-wall-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 2rem; margin-top:2rem;
}
@media(min-width:640px){ .logo-wall-grid{grid-template-columns:repeat(4,1fr);} }
@media(min-width:1024px){ .logo-wall-grid{grid-template-columns:repeat(8,1fr);} }
.logo-wall-grid div{
  text-align:center; font-family:'Cormorant Garamond',serif; font-weight:600;
  color:rgba(243,234,217,.55); font-size:1.02rem;
  border:1px solid var(--border); border-radius:999px; padding:.65rem .5rem;
  background:rgba(255,255,255,.015);
  transition:color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.logo-wall-grid div:hover{color:var(--gold); border-color:var(--border-strong); transform:translateY(-3px); background:rgba(217,169,78,.06);}
@media(prefers-reduced-motion:reduce){ .logo-wall-grid div:hover{transform:none;} }

/* ============ PORTFOLIO FILTERS ============ */
.filter-row{display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:2.75rem;}
.filter-pill{
  border:1px solid var(--border); background:var(--card); color:var(--muted);
  padding:.55rem 1.15rem; border-radius:999px; font-size:.82rem; font-weight:600;
  font-family:'DM Sans',sans-serif; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
}
.filter-pill:hover{border-color:var(--border-strong); color:var(--fg); transform:translateY(-2px);}
.filter-pill.active{background:var(--gold); color:#181405; border-color:var(--gold);}
@media(prefers-reduced-motion:reduce){ .filter-pill:hover{transform:none;} }
.filter-hide{display:none !important;}

/* ============ WORK / SERVICE / STAT CARDS ============ */
.service-card p{font-size:.9rem; color:var(--muted); margin:0;}
.service-card h3{font-size:1.25rem;}

.work-card{border-radius:var(--radius-lg); overflow:hidden; background:var(--card); border:1px solid var(--border); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.work-card:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(0,0,0,.4); border-color:var(--border-strong);}
.thumb{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.92); font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600;
  text-align:center; padding:1rem; position:relative; overflow:hidden;
}
.thumb span{position:relative; z-index:1;}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s ease;}
.work-card:hover .thumb img{transform:scale(1.07);}
.thumb.has-img::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.1) 55%); z-index:0;}
@media(prefers-reduced-motion:reduce){ .work-card:hover, .work-card:hover .thumb img{transform:none;} }
.work-card .body{padding:1.5rem;}
.work-card .cat{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--taupe);}
.work-card h3{margin:.25rem 0 .35rem; font-size:1.4rem;}
.tag{
  display:inline-block; background:rgba(229,206,185,.14); color:var(--fg);
  font-size:.72rem; font-weight:600; padding:.3rem .7rem; border-radius:999px; margin:.2rem .35rem .2rem 0;
}

.stat-card{position:relative; overflow:hidden; border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:2rem; text-align:center; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.stat-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light));}
.stat-card:hover{transform:translateY(-5px); box-shadow:0 16px 36px rgba(0,0,0,.35); border-color:var(--border-strong);}
.stat-card .value{font-family:'Cormorant Garamond',serif; font-size:2.6rem; font-weight:700; color:var(--fg);}
.stat-card .label{font-size:.85rem; color:var(--muted); margin-top:.4rem;}
@media(prefers-reduced-motion:reduce){ .stat-card:hover{transform:none;} }

/* ============ TESTIMONIALS ============ */
.testi-card{position:relative; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:1.75rem;}
.testi-card::before{
  content:'\201C'; position:absolute; top:-1.2rem; right:.75rem; font-family:'Cormorant Garamond',serif;
  font-size:8rem; line-height:1; color:var(--gold); opacity:.08; pointer-events:none;
}
.testi-card .quote-mark{font-size:1.8rem; color:var(--gold); font-family:'Cormorant Garamond',serif; position:relative; z-index:1;}
.testi-card blockquote{flex:1; margin:1rem 0; font-size:.92rem; color:rgba(243,234,217,.9); position:relative; z-index:1;}
.stars{color:var(--gold); letter-spacing:.15em; margin-bottom:.5rem; position:relative; z-index:1;}
.testi-card figcaption{border-top:1px solid var(--border); padding-top:.75rem; margin-top:.5rem; position:relative; z-index:1;}
.testi-card .t-name{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.05rem;}
.testi-card .t-brand{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.t-avatar{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#181405;
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:1.1rem;
}

/* ============ PROCESS TIMELINE ============ */
.timeline{position:relative; max-width:900px; margin:3rem auto 0; padding:0;}
.road-svg{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.road-path{stroke-dasharray:4000; stroke-dashoffset:0; transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);}
.timeline.reveal-init .road-path{stroke-dashoffset:4000;}
.timeline.reveal-in .road-path{stroke-dashoffset:0;}
@media(prefers-reduced-motion:reduce){ .road-path{stroke-dashoffset:0 !important; transition:none;} }
.timeline-step{position:relative; width:50%; padding-bottom:3rem;}
.timeline-step:nth-child(odd){left:0; padding-right:3.25rem; text-align:right;}
.timeline-step:nth-child(even){left:50%; padding-left:3.25rem; text-align:left;}
.timeline-step:nth-child(odd) .step-tag-row{justify-content:flex-end;}
.timeline-step::before{
     content:''; position:absolute; top:.4rem; width:.9rem; height:.9rem;
     border-radius:50%; background:var(--gold); border:2px solid var(--bg); box-shadow:0 0 0 3px rgba(217,169,78,.25);
     transition:box-shadow .3s ease;
}
.timeline-step:nth-child(odd)::before{right:-.45rem;}
.timeline-step:nth-child(even)::before{left:-.45rem;}
.timeline-step:hover::before{box-shadow:0 0 0 6px rgba(217,169,78,.3);}
.timeline-step .card{padding:1.5rem 1.75rem; transition:border-color .25s ease, transform .25s ease;}
.timeline-step:nth-child(odd):hover .card{border-color:var(--border-strong); transform:translateX(-4px);}
.timeline-step:nth-child(even):hover .card{border-color:var(--border-strong); transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){ .timeline-step:hover .card{transform:none;} }
@media(max-width:767px){
     .timeline{padding-left:2rem;}
     .timeline::before{left:.4rem; margin-left:0;}
     .timeline-step, .timeline-step:nth-child(odd), .timeline-step:nth-child(even){width:100%; left:0; padding-left:1.5rem; padding-right:0; text-align:left;}
     .timeline-step .step-tag-row, .timeline-step:nth-child(odd) .step-tag-row{justify-content:flex-start;}
     .timeline-step::before, .timeline-step:nth-child(odd)::before, .timeline-step:nth-child(even)::before{left:-1.6rem; right:auto;}
     .timeline-step:nth-child(odd):hover .card, .timeline-step:nth-child(even):hover .card{transform:none;}
}
.step-tag-row{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem;}
.step-sign{
  background:var(--beige); color:#181405; font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:.75rem; letter-spacing:.12em; padding:.3rem .8rem; border-radius:6px;
}
.step-timing{
  background:rgba(51,64,44,.6); color:var(--gold-light); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px;
}
.step-num{display:block; font-family:'Cormorant Garamond',serif; font-weight:700; font-size:3.4rem; line-height:1; color:transparent; -webkit-text-stroke:1.4px var(--gold); opacity:.8; margin:.35rem 0 0;}
.timeline-step h3{font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em;}
.timeline-step p{color:var(--muted); font-size:.92rem; margin:.5rem 0 0;}

.mini-steps{display:grid; gap:1rem; grid-template-columns:repeat(2,1fr);}
@media(min-width:1024px){ .mini-steps{grid-template-columns:repeat(5,1fr);} }
.mini-steps .card{padding:1.25rem;}
.mini-steps .num{font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:700; color:var(--gold);}
.mini-steps .name{font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:600; margin-top:.3rem;}

/* ============ PACKAGES ============ */
.pkg-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:2rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.pkg-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.4); border-color:var(--border-strong);}
.pkg-card.highlight{border-color:var(--gold); background:rgba(217,169,78,.07);}
.pkg-card.highlight:hover{box-shadow:0 18px 44px rgba(217,169,78,.22);}
@media(prefers-reduced-motion:reduce){ .pkg-card:hover{transform:none;} }
.pkg-card .badge-pop{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  background:var(--fg); color:var(--bg); font-size:.7rem; font-weight:700;
  padding:.3rem 1rem; border-radius:999px; white-space:nowrap;
}
.pkg-card h3{font-size:1.5rem;}
.pkg-card .subtitle{font-size:.85rem; color:var(--muted); margin-top:.15rem;}
.pkg-card .price{font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700; margin-top:1.25rem;}
.pkg-card .period{font-size:.82rem; color:var(--muted);}
.pkg-card ul{flex:1; margin:1.5rem 0; display:flex; flex-direction:column; gap:.65rem;}
.pkg-card li{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--muted);}
.pkg-card li .check{color:var(--sage); flex-shrink:0; margin-top:.15rem;}
.pkg-card li .check::before{content:'✓';}
.color-sage .check{color:#8fae70;}

/* ============ FAQ ============ */
.faq-item{
  border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:1.5rem 1.75rem; margin-bottom:.85rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover{border-color:var(--border-strong);}
.faq-item[open]{border-color:var(--border-strong); box-shadow:0 10px 28px rgba(0,0,0,.28);}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.15rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{color:var(--gold); transition:transform .2s ease; font-size:1rem;}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item p{margin:.9rem 0 0; color:var(--muted); font-size:.92rem;}

/* ============ FORMS ============ */
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem;}
.field label{font-size:.85rem; font-weight:600; color:var(--fg);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--border); background:var(--bg); color:var(--fg);
  padding:.75rem 1rem; border-radius:.7rem; font-family:inherit; font-size:.9rem; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold);}
.form-grid{display:grid; gap:1rem;}
@media(min-width:640px){ .form-grid{grid-template-columns:1fr 1fr;} }
.hp-field{position:absolute; left:-9999px; top:auto;}

.alert{border-radius:.85rem; padding:1rem 1.25rem; font-size:.9rem; margin-bottom:1.25rem;}
.alert-success{background:rgba(203,190,216,.14); border:1px solid rgba(203,190,216,.4); color:var(--fg);}
.alert-error{background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger);}

.contact-method{
  display:flex; gap:1rem; align-items:flex-start; border:1px solid var(--border); background:var(--card);
  border-radius:var(--radius-lg); padding:1.25rem; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contact-method:hover{border-color:var(--border-strong); transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.3);}
@media(prefers-reduced-motion:reduce){ .contact-method:hover{transform:none;} }
.contact-method .label{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.contact-method .value{font-size:.92rem; font-weight:600; margin-top:.2rem;}

/* ============ FOOTER ============ */
.site-footer{position:relative; background:var(--fg); color:var(--bg);}
.site-footer::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--gold-dim), var(--gold), var(--lavender), var(--gold));}
.footer-connect a{display:inline-flex; align-items:center; gap:.5rem; transition:transform .2s ease, color .2s ease;}
.footer-connect a:hover{transform:translateX(4px);}
.footer-legal a{transition:color .2s ease;}
.footer-legal a:hover{color:var(--bg);}
.footer-grid{display:grid; gap:2.5rem; grid-template-columns:1fr;}
@media(min-width:768px){ .footer-grid{grid-template-columns:1.5fr 1fr 1fr; column-gap:3.5rem;} }
.site-footer .footer-legal{margin-top:1.4rem !important; display:flex; flex-direction:column; gap:.5rem;}
.site-footer h3{color:var(--bg); font-size:1.5rem;}
.site-footer h4{
  color:rgba(16,20,15,.65); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:.9rem;
}
.site-footer p{color:rgba(16,20,15,.7); font-size:.9rem;}
.site-footer ul li{margin-bottom:.55rem;}
.site-footer ul a{color:rgba(16,20,15,.8); font-size:.9rem;}
.site-footer ul a:hover{color:var(--bg);}
.footer-legal a{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(16,20,15,.6);}
.footer-connect li{display:flex; align-items:center; gap:.5rem;}
.footer-bottom{
  margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(16,20,15,.12);
  display:flex; flex-direction:column; gap:.6rem; align-items:center; justify-content:center; text-align:center;
}
@media(min-width:640px){ .footer-bottom{flex-direction:row; text-align:center;} }
.footer-bottom p{color:rgba(16,20,15,.6); margin:0; font-size:.85rem;}

/* ============ WHATSAPP FAB ============ */
.wa-fab{
  position:fixed; bottom:1.25rem; right:1.25rem; z-index:50;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); color:#181405; font-weight:700; font-size:.88rem;
  padding:.9rem 1.2rem; border-radius:999px; box-shadow:0 10px 30px rgba(217,169,78,.35);
  transition:transform .15s ease;
}
.wa-fab:hover{transform:scale(1.06);}
.wa-fab::before{
  content:''; position:absolute; inset:-6px; border-radius:999px; border:2px solid var(--gold);
  opacity:.6; animation:wa-pulse 2.4s ease-out infinite; pointer-events:none;
}
@keyframes wa-pulse{ 0%{transform:scale(.92); opacity:.55;} 70%{transform:scale(1.3); opacity:0;} 100%{opacity:0;} }
@media(prefers-reduced-motion:reduce){ .wa-fab::before{display:none;} .wa-fab:hover{transform:none;} }
@media(min-width:640px){ .wa-fab{bottom:2rem; right:2rem;} }
@media(max-width:639px){ .wa-fab-label{display:none;} }

/* ============ ADMIN ============ */
.admin-shell{background:var(--bg); min-height:100vh;}
.admin-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:var(--bg-soft);}
.admin-login-box{width:100%; max-width:420px; border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:2.5rem;}
.admin-header{border-bottom:1px solid var(--border); background:var(--bg);}
.admin-header .nav{justify-content:space-between;}
.admin-subnav{background:var(--bg-soft); border-bottom:1px solid var(--border); overflow-x:auto;}
.admin-subnav-inner{display:flex; gap:1.5rem; padding:.85rem 1.25rem; white-space:nowrap;}
.admin-subnav-inner a{font-size:.85rem; font-weight:600; color:var(--muted);}
.admin-subnav-inner a:hover, .admin-subnav-inner a.active{color:var(--gold);}
.admin-toolbar{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:1.5rem;}
.admin-toolbar input, .admin-toolbar select{
  border:1px solid var(--border); background:var(--card); color:var(--fg); padding:.6rem .9rem; border-radius:.6rem; font-size:.85rem;
}
.admin-form-card{border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:1.75rem; margin-top:1.5rem;}
.admin-form-card h2{font-size:1.3rem;}
.badge-sm{display:inline-block; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:rgba(217,169,78,.18); color:var(--gold);}
.row-actions{display:flex; gap:.5rem; flex-wrap:wrap;}
.row-actions .btn{padding:.4rem .8rem; font-size:.78rem;}
.pagination{display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem;}
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.2rem; height:2.2rem;
  border:1px solid var(--border); border-radius:.5rem; font-size:.82rem; color:var(--muted);
}
.pagination a:hover{border-color:var(--border-strong); color:var(--fg);}
.pagination .current{background:var(--gold); color:#181405; border-color:var(--gold); font-weight:700;}
.admin-table-wrap{border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); overflow:hidden; margin-top:2rem;}
table.leads{width:100%; border-collapse:collapse; font-size:.88rem;}
table.leads thead{background:rgba(229,206,185,.08); text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color:var(--muted);}
table.leads th, table.leads td{padding:.85rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--border);}
table.leads tbody tr:hover{background:rgba(255,255,255,.02);}
table.leads .empty{text-align:center; color:var(--muted); padding:3rem 1rem;}
table.leads tr.is-overdue{background:rgba(229,115,115,.06);}

/* ---- CRM: status badges (extend .badge-sm's gold default with pipeline colours) ---- */
.badge-info{background:rgba(203,190,216,.2); color:var(--lavender);}
.badge-warn{background:rgba(240,201,184,.22); color:var(--peach);}
.badge-success{background:rgba(143,174,112,.22); color:#8fae70;}
.badge-danger{background:var(--danger-bg); color:var(--danger);}
.status-select{
  border:1px solid var(--border); background:var(--card); color:var(--fg);
  padding:.35rem .6rem; border-radius:.5rem; font-size:.78rem; font-weight:600; cursor:pointer;
}
.overdue-flag{color:var(--danger); font-weight:700; font-size:.72rem;}

/* ---- CRM: dashboard stat cards + activity feed ---- */
.dash-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(2,1fr); margin-top:1.5rem;}
@media(min-width:768px){ .dash-grid{grid-template-columns:repeat(5,1fr);} }
.dash-stat{border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:1.4rem; text-align:center;}
.dash-stat .num{font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:700; color:var(--gold);}
.dash-stat.is-alert .num{color:var(--danger);}
.dash-stat .lbl{font-size:.75rem; color:var(--muted); margin-top:.3rem; text-transform:uppercase; letter-spacing:.06em;}
.dash-panels{display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2rem;}
@media(min-width:900px){ .dash-panels{grid-template-columns:1fr 1fr;} }
.dash-list{list-style:none; margin:0; padding:0;}
.dash-list li{padding:.75rem 0; border-bottom:1px solid var(--border); font-size:.85rem;}
.dash-list li:last-child{border-bottom:none;}
.dash-list .muted-sm{color:var(--muted); font-size:.75rem;}

/* ---- CRM: lead detail page ---- */
.lead-detail-grid{display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:1.5rem;}
@media(min-width:960px){ .lead-detail-grid{grid-template-columns:1.4fr 1fr;} }
.note-item{border:1px solid var(--border); border-radius:.7rem; padding:.9rem 1rem; margin-bottom:.75rem; background:rgba(255,255,255,.015);}
.note-item .note-date{font-size:.72rem; color:var(--muted); margin-bottom:.3rem;}
.tag-pill{display:inline-block; background:rgba(217,169,78,.14); color:var(--gold); font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; margin:.15rem .3rem .15rem 0;}

/* Section background helpers */
.bg-soft{background:var(--bg-soft);}
.bg-beige{background:rgba(229,206,185,.06);}
.bg-lavender{background:rgba(203,190,216,.06);}
.bg-peach{background:rgba(240,201,184,.06);}
.bg-sage{background:rgba(51,64,44,.25);}
.bg-dark{background:var(--fg); color:var(--bg);}
.bg-dark h2, .bg-dark p{color:var(--bg);}

/* Legal pages */
.legal h2{font-size:1.5rem; margin-top:2rem;}
.legal p, .legal li{color:var(--muted);}
.legal a{color:var(--gold); text-decoration:underline;}
.legal ul{list-style:disc; padding-left:1.4rem; margin-bottom:1em;}
.legal ul li{margin-bottom:.4em;}

/* ============ CREATIVE / INTERACTIVE LAYER ============
   Custom cursor, magnetic buttons, card spotlight, scroll progress,
   number counters, hero text-reveal. Desktop-pointer only (see JS gate),
   and everything respects prefers-reduced-motion. */

/* Scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light));
  z-index:200; transition:width .1s linear;
}
@media(prefers-reduced-motion:reduce){ .scroll-progress{display:none;} }

/* Custom cursor (dot + trailing ring). Only enabled on fine-pointer/hover
   devices via the .has-custom-cursor class the JS adds after feature-detecting. */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .25s ease;
}
.cursor-dot{width:6px; height:6px; background:var(--gold); }
.cursor-ring{
  width:34px; height:34px; border:1.5px solid rgba(217,169,78,.55);
  transition:opacity .25s ease, width .2s ease, height .2s ease, border-color .2s ease, background .2s ease;
}
.has-custom-cursor .cursor-dot, .has-custom-cursor .cursor-ring{opacity:1;}
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor .btn{cursor:none;}
.cursor-ring.is-hovering{
  width:56px; height:56px;
  background:rgba(217,169,78,.1);
  border-color:var(--gold);
}
@media(hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring{display:none;} }
@media(prefers-reduced-motion:reduce){ .cursor-dot, .cursor-ring{display:none;} .has-custom-cursor, .has-custom-cursor a{cursor:auto;} }

/* Magnetic buttons — JS sets --mx/--my (translate offset), CSS just applies it */
.magnetic{ transition:transform .25s cubic-bezier(.22,1,.36,1); }
.magnetic-active{ transition:transform .08s linear; transform:translate(var(--mx,0), var(--my,0)); }

/* Card spotlight — JS sets --sx/--sy (% position) on mousemove */
.spotlight{position:relative; overflow:hidden;}
.spotlight::after{
  content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%), rgba(217,169,78,.14), transparent 65%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.spotlight:hover::after{opacity:1;}
.spotlight > *{position:relative; z-index:1;}

/* Hero text-reveal — JS wraps words in spans with this class */
.word-reveal{display:inline-block; overflow:hidden; vertical-align:top;}
.word-reveal > span{display:inline-block; transform:translateY(110%); animation:word-in .7s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes word-in{ to{transform:translateY(0);} }
@media(prefers-reduced-motion:reduce){ .word-reveal > span{transform:none; animation:none;} }

/* Number counters — no layout change, just marks the element mid-count */
.counting{color:var(--gold);}

/* Ambient background: fixed, low-opacity colour blobs behind the whole page.
   Solid-background elements (opaque cards, bg-dark banners, footer) simply
   occlude it as normal; it only shows through the plain body background and
   the translucent bg-soft/lavender/peach/sage/beige section tints, which is
   exactly where flat sections previously had zero visual depth. Static
   (no animation), so it's unaffected by prefers-reduced-motion. */
.bg-ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(640px circle at 8% 6%, rgba(203,190,216,.08), transparent 60%),
    radial-gradient(560px circle at 92% 10%, rgba(217,169,78,.07), transparent 55%),
    radial-gradient(780px circle at 50% 55%, rgba(240,201,184,.05), transparent 65%),
    radial-gradient(620px circle at 94% 96%, rgba(51,64,44,.55), transparent 60%),
    radial-gradient(520px circle at 4% 94%, rgba(217,169,78,.05), transparent 55%);
}

/* ============ DECORATIVE SECTION PATTERN ============
Subtle gold infinity-loop motif (echoes the logo mark) layered onto the
plain colour-tint section backgrounds and the process step cards, so
these previously flat panels read as textured rather than empty. Pure
vector SVG tile at low opacity, doesn't affect text legibility. */
.bg-soft, .bg-sage, .bg-lavender, .bg-beige, .bg-peach{
     background-image: radial-gradient(ellipse 90% 65% at 50% 0%, rgba(16,20,15,0) 0%, rgba(16,20,15,.6) 100%), url('/assets/images/brand/pattern.svg') !important;
     background-repeat: no-repeat, repeat !important;
     background-size: 100% 100%, auto !important;
}
.mini-steps .card{
   background-image: url('/assets/images/brand/pattern.svg') !important;
   background-repeat: repeat !important;
   background-size: 130px 108px !important;
}

/* Homepage statement band ("Every brand has a story..."): layer a dimmed,
green-tinted work photo behind the pattern for extra richness on this
one hero-adjacent section. */
.section-story{
   background-image:
      linear-gradient(rgba(16,20,15,.86), rgba(16,20,15,.86)),
      url('/assets/images/brand/pattern.svg'),
                  url('/assets/images/hero/hero-archive.webp') !important;
   background-repeat: no-repeat, repeat, no-repeat !important;
   background-size: cover, auto, cover !important;
   background-position: center, center, center !important;
}


/* ============ HERO — STITCH-INSPIRED POLISH ============
Borrowed from a Google Stitch AI concept generated for this site: an
italic-gold second headline line, a floating result badge pinned to the
hero image, and a consistent circular icon treatment on service cards. */
.hero-highlight-line{
font-family:'Cormorant Garamond',serif; font-weight:600; font-style:italic;
color:var(--gold); line-height:1.1; letter-spacing:-.02em;
font-size:2.6rem; margin:-.3rem 0 1rem;
}
@media(min-width:640px){ .hero-highlight-line{font-size:3.4rem;} }
@media(min-width:1024px){ .hero-highlight-line{font-size:4.2rem;} }

.hero-stat-badge{
position:absolute; top:1.4rem; right:1.4rem; z-index:2;
background:var(--gold); color:#181405; border-radius:var(--radius);
padding:.7rem 1.1rem; text-align:center; box-shadow:0 10px 26px rgba(217,169,78,.4);
}
.hero-stat-badge b{display:block; font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; line-height:1; color:#181405 !important;}
.hero-stat-badge span{display:block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#181405; opacity:.75; margin-top:.15rem;}

.service-card .icon-chip{
border-radius:50% !important;
background:rgba(217,169,78,.16) !important;
color:var(--gold) !important;
}

.logo-wall-grid .logo-mark{color:var(--gold); margin-right:.25rem; font-size:.85em;}

/* ============ VIEW TRANSITIONS (shared-element page transitions) ============
Progressive enhancement only: browsers that don't understand the
@view-transition at-rule or the view-transition-name property ignore both
and just navigate normally, exactly like today. Supported (Chromium)
browsers get a smooth cross-document crossfade, with the header logo
explicitly named so it morphs in place instead of cutting, since it's the
one element present edge-to-edge on every page. */
@view-transition{
   navigation: auto;
}
.brand-logo{ view-transition-name: site-logo; }
::view-transition-old(root), ::view-transition-new(root){
   animation-duration: .38s;
}
@media(prefers-reduced-motion:reduce){
   @view-transition{ navigation: none; }
}

/* ============ SCROLL PROGRESS — more dramatic ============ */
.scroll-progress{
   height:4px;
   background-size:200% 100%;
   box-shadow:0 0 12px rgba(217,169,78,.55), 0 0 2px rgba(217,169,78,.8);
   animation: progress-shimmer 3s linear infinite;
}
@keyframes progress-shimmer{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
@media(prefers-reduced-motion:reduce){ .scroll-progress{animation:none;} }

/* ============ COUNTER POP — punchier settle ============ */
@keyframes counter-pop{ 0%{transform:scale(1);} 40%{transform:scale(1.14);} 100%{transform:scale(1);} }
.counter-pop{ animation: counter-pop .38s cubic-bezier(.34,1.56,.64,1) both; display:inline-block; }
@media(prefers-reduced-motion:reduce){ .counter-pop{animation:none;} }

/* ============ MAGNETIC BUTTONS — stronger pull ============ */
.magnetic-active{ transition:transform .08s linear; transform:translate(var(--mx,0), var(--my,0)) scale(1.045); }


/* ============ CUSTOM CURSOR — bigger, blend-mode hover + click ping ============ */
.cursor-ring.is-hovering{
   width:64px; height:64px;
   background:rgba(217,169,78,.14);
   border-color:var(--gold);
   mix-blend-mode:difference;
}
.cursor-ping{
   position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
   width:8px; height:8px; border-radius:50%; border:1.5px solid var(--gold);
   transform:translate(-50%,-50%); opacity:.7;
   animation:cursor-ping .55s ease-out forwards;
}
@media(hover:none), (pointer:coarse){ .cursor-ping{display:none;} }
@media(prefers-reduced-motion:reduce){ .cursor-ping{display:none;} }

/* ============ HERO PARALLAX ============ */
.hero-visual-img img{ will-change:transform; }
.hero-visual{ perspective:800px; }

/* ============ SKELETON LOADERS ============ */
.thumb.img-loading::before{
   content:''; position:absolute; inset:0; z-index:2;
   background:linear-gradient(100deg, rgba(255,255,255,.03) 20%, rgba(217,169,78,.14) 42%, rgba(255,255,255,.03) 64%);
   background-size:200% 100%;
   animation:skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes skeleton-shimmer{ 0%{background-position:150% 0;} 100%{background-position:-50% 0;} }
@media(prefers-reduced-motion:reduce){ .thumb.img-loading::before{animation:none; opacity:.5;} }


/* ---- Lottie service-card illustrations (progressive enhancement) ----
   .lottie-mount is an empty span layered over the static SVG icon; JS
   (see main.js) loads lottie-web from a CDN and only swaps in the
   animation once it's visible and the user hasn't asked for reduced
   motion. Until then (or if JS/CDN fails) the static SVG stays visible
   underneath, so nothing is ever missing. */
.icon-chip { position: relative; overflow: hidden; }
.lottie-mount {
     position: absolute;
     inset: 0;
     display: block;
     opacity: 0;
     transition: opacity .4s ease;
     pointer-events: none;
}
.lottie-mount.is-ready { opacity: 1; }
.lottie-mount.is-ready ~ svg,
.icon-chip:has(.lottie-mount.is-ready) > svg { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
     .lottie-mount { display: none !important; }
}
/* ============ 3D WebGL ambient hero (nebula + starfield + infinity mark) ====
   Shader-only, zero-dependency (no Three.js/CDN — keeps script-src 'self'
   intact). Uses its own namespaced tokens so it never touches --gold used
   everywhere else on the site. Homepage gets the full effect via #gl with
   data-tier="full"; the Services hub gets a reduced-intensity ambient
   variant via data-tier="ambient" (no 3D infinity object). */
:root{
     --gl-bg:#081f16;
     --gl-gold:#d9b169;
     --gl-gold-lt:#f0d9a8; --gl-green:#2f9669; --gl-green-lt:#5ee3a8;
}
#gl{
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     display:block;
     pointer-events:none;
}
.hero-copy{ position:relative; }
.hero-copy::before{
   content:'';
   position:absolute; inset:-10% -14%; z-index:-1;
   background:radial-gradient(60% 70% at 32% 46%, rgba(8,31,22,.86), transparent 72%);
}

/* Ambient cursor glow — a soft drifting light that follows the pointer,
   layered separately from the existing precise cursor-dot/cursor-ring
   interaction cursor. Only ever mounted on pages that have a #gl canvas. */
#cursorGlow{
     position:fixed;
     top:0; left:0;
     width:520px; height:520px;
     margin:-260px 0 0 -260px;
     border-radius:50%;
     background:radial-gradient(circle, rgba(47,150,105,.16) 0%, rgba(94,227,168,.06) 35%, transparent 68%);
     pointer-events:none;
     z-index:5;
     opacity:0;
     transition:opacity .5s ease;
     mix-blend-mode:screen;
     will-change:transform;
}
body.has-glow-cursor #cursorGlow{ opacity:1; }
@media(max-width:900px){ #cursorGlow{ display:none; } }

/* Ghost-layer headline reveal — two faded, blurred duplicate copies of a
   headline sit on top of the real text and dissolve away on scroll-into-
   view, reading as the text "resolving" into place. */
.ghost-reveal{ position:relative; display:inline-block; }
.ghost-reveal .gh{
     position:absolute; inset:0;
     color:var(--gl-green-lt);
     opacity:0;
     pointer-events:none;
}
.ghost-reveal.gh-in .gh:nth-child(1){ animation:ghAnim 1.5s cubic-bezier(.16,1,.3,1) .05s both; }
.ghost-reveal.gh-in .gh:nth-child(2){ animation:ghAnim 1.5s cubic-bezier(.16,1,.3,1) .16s both; }
@keyframes ghAnim{
     0%{ opacity:.55; transform:translateY(20px) scale(1.03); filter:blur(7px); }
     100%{ opacity:0; transform:none; filter:blur(0); }
}

/* Skip-to-content link — WCAG 2.4.1, visually hidden until keyboard-focused */
.skip-link{
     position:absolute;
     left:1rem; top:-3rem;
     z-index:100;
     background:var(--gold);
     color:#181405;
     padding:.6rem 1.1rem;
     border-radius:8px;
     font-weight:600;
     font-size:.85rem;
     transition:top .2s ease;
     text-decoration:none;
}
.skip-link:focus{ top:1rem; }

@media(prefers-reduced-motion:reduce){
     .ghost-reveal .gh{ display:none; }
     #cursorGlow{ display:none; }
}


/* ============================================
   AUDIT FIX 1 — Image CLS safety net
   .thumb containers already set aspect-ratio
   inline; this ensures the <img>/<picture> fills
   them predictably even if an attribute is missed.
   ============================================ */
img{ height:auto; }
.thumb picture,
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================
   AUDIT FIX 3 — TAP TARGETS (WCAG 2.5.5 / Google minimum)
   Padding grows the hit area without changing
   visual size, so the design is unaffected.
   ============================================ */
@media (hover: none), (pointer: coarse){
  a, button, input[type="submit"], input[type="button"],
  select, [role="button"], .link-more, .btn{
    min-height:44px;
  }
  .link-more{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-block:.5rem;
  }
  .nav-links a{
    display:flex;
    align-items:center;
    min-height:48px;
    padding:.75rem 1rem;
  }
  .site-footer a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-block:.4rem;
  }
  .skip-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}
@media (hover: hover) and (pointer: fine){
  .nav-links a{ padding:.5rem .25rem; }
}

/* ============================================
   AUDIT FIX 4 — MINIMUM LEGIBLE TYPE
   Raises every sub-12px label to a 12px floor
   (13px on touch) while keeping the tracked-
   letter small-caps look that is a brand feature.
   ============================================ */
.eyebrow,
.pill,
.svc .n,
.pkg-card .badge-pop,
.pkg-card .period,
.work-card .cat,
.tag,
.tag-pill,
.testi-card .t-brand,
.step-timing,
.contact-method .label,
.footer-legal a,
.badge-sm,
.hero-stat-badge span,
table.leads thead,
.overdue-flag,
.note-item .note-date{
  font-size:.75rem;
}
@media (hover: none), (pointer: coarse){
  .eyebrow,
  .pill,
  .svc .n,
  .pkg-card .badge-pop,
  .pkg-card .period,
  .work-card .cat,
  .tag,
  .tag-pill,
  .testi-card .t-brand,
  .step-timing,
  .contact-method .label,
  .footer-legal a,
  .badge-sm,
  .hero-stat-badge span{
    font-size:.8125rem;
  }
  body{ font-size:16px; line-height:1.65; }
}

/* ============================================
   AUDIT FIX 5 — MOBILE FORM USABILITY
   ============================================ */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-size:16px;
  min-height:48px;
  padding:.85rem 1rem;
  width:100%;
  border-radius:.4rem;
  -webkit-appearance:none;
  appearance:none;
}
.contact-form textarea{
  min-height:120px;
  resize:vertical;
}
.contact-form label{
  display:block;
  margin-bottom:.4rem;
  font-size:.8125rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.contact-form .field{ margin-bottom:1.25rem; }
.contact-form button[type="submit"]{
  min-height:52px;
  width:100%;
  font-size:1rem;
}
@media (min-width: 640px){
  .contact-form button[type="submit"]{ width:auto; min-width:220px; }
}
.contact-form :is(input,select,textarea):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.contact-form :is(input,textarea):user-invalid{
  border-color:#d9534f;
}

/* ============================================
   AUDIT FIX 6 — heading hierarchy utility classes
   Use these to correct semantic level (h2/h3) while
   keeping the original visual size.
   ============================================ */
.h2-look{ font-size:clamp(1.9rem,4.2vw,3.2rem); line-height:1.08; }
.h3-look{ font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.15; }
.h4-look{ font-size:1.1rem; line-height:1.25; }