:root{
  /* Sarang — the daylight half of the brand, and the fallback if JavaScript
     is off. Brindavani Sarang is a midday raga and the one this studio is
     named after. Its counterpart, Malkauns, takes over after sunset; both are
     defined in the picker script in index.html, which is the only place the
     palettes live. */
  --indigo-deep: #211E18;
  --indigo: #332E24;
  --indigo-light: #4A4335;
  --ink: #1F1C16;
  --mist: #D2C9B6;
  --paper: #FCFAF3;
  --paper-dim: #F1ECDE;

  /* The accent moves with the raga rather than being a fixed brand gold:
     marigold by day, a paler brass by night. Names kept as --gold* so nothing
     downstream had to be rewritten. */
  --gold: #E9A62B;
  --gold-deep: #BE8214;
  --gold-ink: #6D4A0C;

  /* Configurator surfaces. Derived from the accent with color-mix so they
     track whichever raga is active; the flat rgba above each one is the
     fallback for engines without color-mix and matches the default theme. */
  --gold-veil: rgba(233,166,43,0.13);
  --gold-veil: color-mix(in srgb, var(--gold) 13%, transparent);
  --gold-glow: rgba(233,166,43,0.20);
  --gold-glow: color-mix(in srgb, var(--gold) 20%, transparent);
  --cfg-shadow: rgba(0,0,0,0.32);

  /* The hero sweep masks itself with the logo. Declared here, not in an inline
     style attribute: a relative url() inside a custom property resolves against
     the stylesheet that *consumes* it, so declaring it in the HTML resolved to
     css/img/logo.webp and 404'd once every animation frame. */
  --logo-mask-src: url(../img/logo.webp);

  --serif: 'Cormorant Garamond', serif;
  --sans: 'Jost', sans-serif;

  --max-w: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Smooths the main background-bearing containers when the raga changes the
   root variables. Deliberately narrow (not *) so it doesn't
   fight the more specific transitions already set on cards/buttons/nav. */
body, section, footer{
  transition: background-color 0.5s ease, color 0.5s ease;
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3{
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
}

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------- SKIP LINK ---------------- */
/* First thing in the tab order. Off-screen until focused, then it drops into
   the top-left so a keyboard user can jump the nav and go straight to content. */
.skip-link{
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--indigo-deep);
  font-size: 14px;
  font-weight: 500;
  border-radius: 0 0 4px 0;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}
.skip-link:focus{ transform: translateY(0); }

/* ---------------- NAV ---------------- */
.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  background-color: transparent;
  /* The nav's background is deliberately NOT transitioned. It used to animate
     the `background` shorthand, and a transition whose end value comes from a
     custom property caches that value — so once the theme switcher changed
     --indigo-deep the nav stayed frozen on the old colour, and at one point on
     `transparent`, which left the nav links sitting unreadably (1.54:1) over
     whatever was behind them. Padding and shadow still animate, which is where
     the movement was doing its work anyway. */
  transition: box-shadow 0.3s ease, padding 0.3s ease;
  padding: 22px 0;
}
.site-nav.scrolled{
  background-color: var(--indigo-deep);
  box-shadow: 0 8px 24px rgba(5,29,51,0.25);
  padding: 12px 0;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
}
.brand-mark{
  display:flex;
  align-items:center;
  gap: 10px;
}
/* The mark is a mask filled with the current accent rather than a fixed-colour
   raster, so it moves with the raga instead of staying marigold at night. The
   webp already carries an alpha channel, so no vector was needed. One file,
   one request, used in three places. */
.brand-logo{
  display: block;
  flex-shrink: 0;
  height: 34px;
  aspect-ratio: 988 / 402;
  background-color: var(--gold);
  -webkit-mask: var(--logo-mask-src) center/contain no-repeat;
  mask: var(--logo-mask-src) center/contain no-repeat;
  transition: background-color 0.4s ease;
}
.brand-logo-sm{ height: 26px; }
.brand-mark span{
  font-family: var(--serif);
  font-size: 20px;
  color: var(--paper);
  letter-spacing: 0.01em;
}
.nav-links{
  display:flex;
  gap: 32px;
}
.nav-links a{
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--mist);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover{
  color: var(--gold);
  border-color: var(--gold);
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width: 32px;
  height: 24px;
  position: relative;
  z-index: 20;
  padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  position:absolute;
  left:0; right:0;
  height: 2px;
  background: var(--paper);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle span{ top:11px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span::after{ transform: translateY(-8px) rotate(-45deg); }

/* ---------------- HERO ---------------- */
.hero{
  background: var(--indigo-deep);
  padding: 190px 0 140px;
  position: relative;
  overflow: hidden;
}
.hero-inner{
  text-align:center;
  position: relative;
  z-index: 2;
}
.hero-logo-stage{
  width: clamp(300px, 21vw, 420px);
  aspect-ratio: 1025 / 484;
  margin: 0 auto 8px;
  position: relative;
}
.hero-particles{
  position:absolute;
  inset: -60px;
  overflow: visible;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 55%, transparent));
}
.spark{
  position:absolute;
  color: var(--gold);
  left:60px; top:60px;
  opacity: 0;
  transform: translate(var(--sx), var(--sy)) rotate(var(--rot)) scale(1.3);
  animation: spark-gather 3.1s cubic-bezier(0.22, 1, 0.36, 1) forwards var(--delay);
}
.spark svg{ width:100%; height:100%; display:block; }
@keyframes spark-gather{
  0%{ opacity:0; transform: translate(var(--sx), var(--sy)) rotate(var(--rot)) scale(1.3); }
  14%{ opacity:1; }
  72%{ opacity:0.85; }
  100%{ opacity:0; transform: translate(var(--tx), var(--ty)) rotate(calc(var(--rot) + 50deg)) scale(0.4); }
}

.hero-logo{
  position:absolute; inset:0;
  width:100%; height:100%;
  background-color: var(--gold);
  -webkit-mask: var(--logo-mask-src) center/contain no-repeat;
  mask: var(--logo-mask-src) center/contain no-repeat;
  opacity: 0;
  animation:
    logo-reveal 2s cubic-bezier(0.22, 1, 0.36, 1) forwards 3.55s,
    logo-idle 2s ease-in-out 2 5.6s;
}
@keyframes logo-reveal{
  0%{ opacity: 0; transform: scale(1.03); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold) 20%, transparent)); }
  42%{ opacity: 1; filter: drop-shadow(0 0 60px color-mix(in srgb, var(--gold) 60%, transparent)); }
  100%{ opacity: 1; transform: scale(1); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--gold) 42%, transparent)); }
}
@keyframes logo-idle{
  0%, 100%{ transform: scale(1); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--gold) 42%, transparent)); }
  50%{ transform: scale(1.012); filter: drop-shadow(0 0 30px color-mix(in srgb, var(--gold) 56%, transparent)); }
}

.hero-logo-sweep{
  position:absolute; inset:0;
  -webkit-mask-image: var(--logo-mask-src);
  mask-image: var(--logo-mask-src);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  mix-blend-mode: screen;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: sweep-fade 4s ease-in-out 1 5.6s forwards;
}
.hero-logo-sweep::before{
  content:'';
  position:absolute;
  inset: -20% -70%;
  background: linear-gradient(100deg, transparent 42%, rgba(255,244,214,0.95) 50%, transparent 58%);
  transform: translateX(-55%);
  animation: sweep-move 2s ease-in-out 2 5.7s;
}
@keyframes sweep-move{
  0%{ transform: translateX(-55%); }
  100%{ transform: translateX(55%); }
}
@keyframes sweep-fade{
  0%, 12%{ opacity: 0; }
  22%, 78%{ opacity: 0.6; }
  100%{ opacity: 0; }
}
.eyebrow{
  font-size: clamp(12px, 0.75vw, 15px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  opacity: 0;
  animation: rise 0.8s ease forwards 0.35s;
}
.hero h1{
  font-size: clamp(42px, 6vw, 96px);
  color: var(--paper);
  margin: 0 0 14px;
  opacity: 0;
  animation: rise 0.8s ease forwards 0.5s;
}
.hero h1 em{
  font-style: italic;
  color: var(--gold);
}
.hero p.tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 1.7vw, 30px);
  color: var(--mist);
  margin: 0 0 28px;
  opacity: 0;
  animation: rise 0.8s ease forwards 0.65s;
}
.hero p.sub{
  max-width: clamp(520px, 75vw, 640px);
  margin: 0 auto 36px;
  color: var(--mist);
  font-size: clamp(16px, 1vw + 6px, 19px);
  opacity: 0;
  animation: rise 0.8s ease forwards 0.8s;
}
.hero-ctas{
  display:flex;
  gap: 16px;
  justify-content:center;
  flex-wrap: wrap;
  opacity: 0;
  animation: rise 0.8s ease forwards 0.95s;
}
.hero-ctas .btn{
  padding: clamp(13px, 0.9vw, 18px) clamp(28px, 2vw, 38px);
  font-size: clamp(14px, 0.85vw, 16px);
}

@keyframes rise{
  to{ opacity: 1; transform: translateY(0); }
}

.btn{
  display:inline-block;
  padding: 13px 28px;
  border-radius: 3px;
  font-size: 14px;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary{
  background: var(--gold);
  color: var(--indigo-deep);
  font-weight: 500;
}
.btn-primary:hover{ background: var(--gold-deep); transform: translateY(-2px); }
.btn-ghost{
  border: 1px solid var(--mist);
  color: var(--paper);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* faint ambient curve behind hero content */
.hero-ambient{
  position:absolute;
  inset: 0;
  opacity: 0.16;
  z-index: 1;
}
.hero-ambient path{
  animation: ambient-drift-a 18s ease-in-out infinite;
}
.hero-ambient path:nth-child(2){
  animation-name: ambient-drift-b;
  animation-duration: 24s;
}
@keyframes ambient-drift-a{
  0%, 100%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(-38px) translateY(6px); }
}
@keyframes ambient-drift-b{
  0%, 100%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(32px) translateY(-8px); }
}

/* ---------------- WAVE DIVIDER (signature) ---------------- */
.wave-divider{
  display:block;
  width: 100%;
  height: 64px;
}
.wave-divider path{
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  opacity: 0.55;
}
/* Compound selectors, not descendant ones: the modifier class sits on the
   <svg> itself, so `.on-dark .wave-divider` needed a *nested* divider and
   could never match. Every divider silently fell back to the gold base rule
   above, which is close to invisible on paper — which is exactly why the
   .on-light variant was written in the first place.
   All five dividers sit in normal flow on the body background (--paper), so
   they all carry .on-light; .on-dark stays for any divider later placed
   inside a dark section. */
.wave-divider.on-dark path{ stroke: var(--gold); opacity: 0.5; }
.wave-divider.on-light path{ stroke: var(--indigo); opacity: 0.35; }

/* ---------------- SECTION SCAFFOLD ---------------- */
section{ padding: 100px 0; }
.section-dark{ background: var(--indigo-deep); color: var(--paper); }

.kicker{
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 14px;
}
.section-dark .kicker{ color: var(--gold); }

.section-head{
  max-width: 640px;
  margin-bottom: 56px;
  position: relative;
}
.section-head h2{
  font-size: clamp(30px, 4vw, 42px);
  margin-bottom: 16px;
}
.section-head p{
  font-size: 16px;
  opacity: 0.85;
}

/* ---------------- ABOUT ---------------- */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items:center;
  position: relative;
}
.about-copy p{ margin: 0 0 18px; font-size: 16px; }
.about-copy p:last-child{ margin-bottom:0; }
.about-copy strong{ color: var(--indigo); }

.about-values{
  background: var(--paper-dim);
  border-radius: 6px;
  padding: 32px;
}
.about-values h3{
  font-size: 20px;
  margin-bottom: 18px;
  color: var(--indigo);
}
.about-values ul{
  list-style:none;
  margin:0; padding:0;
  display: grid;
  gap: 12px;
}
.about-values li{
  display:flex;
  gap: 10px;
  font-size: 14.5px;
  align-items:flex-start;
}
.about-values li::before{
  content:'';
  width: 6px; height:6px;
  border-radius:50%;
  background: var(--gold-deep);
  margin-top: 7px;
  flex-shrink:0;
}

/* ---------------- SERVICES: PRICING CONFIGURATOR ---------------- */
/* Replaces the retired five-tier pricing table. Every colour here resolves
   through the themed root variables above; the only literal colour values
   are the gold washes declared in :root, and gold is a brand constant the
   theme switcher deliberately never reaches.
   Contrast note: --gold on --indigo bottoms out at 3.84:1 in the Indigo Dye
   Paper theme, so gold is never used for small text inside a card — only as
   a fill, a border, or the large total. Small text inside cards is --mist or
   --paper, both of which clear AA against --indigo in all seven themes. */

#services [hidden]{ display: none !important; }

.cfg-head{ max-width: 620px; }

/* Gold sparks by the heading — the same motif as the hero entrance and the
   contact sparks, at a much lower intensity. They gather once and settle;
   they never loop. Driven by the section's own in-view class (set by the
   flourish observer) so they fire on arrival rather than on page load. */
.cfg-spark{
  position: absolute;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate(var(--sx), var(--sy)) scale(1.25);
}
.cfg-spark svg{ display: block; width: 100%; height: 100%; }
#services.section-in-view .cfg-spark{
  animation: cfg-spark-settle 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards var(--delay);
}
@keyframes cfg-spark-settle{
  0%{ opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(0deg) scale(1.25); }
  28%{ opacity: 0.95; }
  100%{ opacity: 0.4; transform: translate(0, 0) rotate(36deg) scale(0.62); }
}

/* ---- Layout: questions beside a summary that follows you down ---- */
.cfg-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
}
.cfg-questions{
  display: grid;
  gap: 0;
  min-width: 0;
}

/* ---- A question ---- */
/* Deliberately role="group" + aria-labelledby rather than fieldset/legend:
   a <legend> is laid out centred on its fieldset's top border edge, which
   makes a hairline separator cut straight through the question heading.
   The grouping semantics are identical; the layout is predictable. */
.cfg-q{
  border-top: 1px solid var(--indigo-light);
  margin: 0;
  padding: 38px 0 30px;
  min-width: 0;
}
#cfgQ1{ border-top: 0; padding-top: 0; }
#cfgFlow{ display: grid; }

.cfg-q-legend{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 1.7vw, 26px);
  line-height: 1.25;
  color: var(--paper);
}
.cfg-q-num{
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 9px;
}
.cfg-q-hint{
  font-size: 13.5px;
  color: var(--mist);
  margin: 10px 0 0;
  max-width: 54ch;
  line-height: 1.55;
}
.cfg-aside{
  font-size: 13px;
  color: var(--mist);
  font-style: italic;
  margin: 14px 0 0;
  max-width: 54ch;
  line-height: 1.55;
}

/* ---- Options ---- */
.cfg-options{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}
@media (min-width: 560px){
  .cfg-options{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cfg-option-label{
  position: relative;
  display: block;
  min-width: 0;
}
.cfg-native{
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.cfg-option{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 16px 18px;
  text-align: left;
  font: inherit;
  color: var(--paper);
  background: var(--indigo);
  border: 1px solid var(--indigo-light);
  border-radius: 7px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.cfg-option:hover{ border-color: var(--gold-deep); }

.cfg-option[aria-pressed="true"],
.cfg-native:checked + .cfg-option{
  border-color: var(--gold);
  background-image: linear-gradient(var(--gold-veil), var(--gold-veil));
  box-shadow: inset 0 0 0 1px var(--gold), 0 6px 18px var(--gold-glow);
}
.cfg-native:focus-visible + .cfg-option{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.cfg-check{
  flex-shrink: 0;
  width: 21px; height: 21px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--mist);
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cfg-check::after{
  content: '';
  position: absolute;
  left: 6px; top: 3px;
  width: 5px; height: 9px;
  border: solid var(--indigo-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.cfg-option[aria-pressed="true"] .cfg-check,
.cfg-native:checked + .cfg-option .cfg-check{
  background: var(--gold);
  border-color: var(--gold);
}
.cfg-option[aria-pressed="true"] .cfg-check::after,
.cfg-native:checked + .cfg-option .cfg-check::after{
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.cfg-option-text{ display: block; flex: 1 1 auto; min-width: 0; }
.cfg-option-title{
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--paper);
}
.cfg-option-sub{
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mist);
  margin-top: 5px;
}
.cfg-option-price{
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 1px;
  font-size: 13.5px;
  color: var(--mist);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cfg-option[aria-pressed="true"] .cfg-option-price,
.cfg-native:checked + .cfg-option .cfg-option-price{ color: var(--paper); }

/* ---- Care plans: four narrow cards ---- */
.cfg-plans{ grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px){
  .cfg-plans{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px){
  .cfg-plans{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cfg-plan{
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 16px;
}
/* At four-across the cards are ~170px, too narrow to sit the plan name and
   its price on one line — so the price drops beneath the name and gets to
   carry a bit more weight, which is what it deserves here anyway. */
.cfg-plan-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 11px;
  align-items: start;
}
.cfg-plan-head .cfg-option-text{ grid-column: 2; }
.cfg-plan .cfg-option-price{
  grid-column: 2;
  align-self: start;
  padding-top: 0;
  font-size: 15px;
  color: var(--paper);
}
.cfg-plan ul{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 7px;
}
.cfg-plan li{
  font-size: 12px;
  line-height: 1.4;
  color: var(--mist);
  display: flex;
  gap: 7px;
}
.cfg-plan li::before{ content: '—'; opacity: 0.5; flex-shrink: 0; }

/* ---- Online-shop branch ---- */
.cfg-ecom{
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--indigo);
  padding: 28px 26px;
  margin: 26px 0 6px;
}
.cfg-ecom h3{
  font-family: var(--serif);
  font-size: 22px;
  color: var(--paper);
  margin: 0 0 12px;
}
.cfg-ecom p{
  font-size: 14.5px;
  color: var(--mist);
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 56ch;
}
.cfg-ecom p:last-of-type{ margin-bottom: 20px; }

/* ---- The summary ---- */
/* Deliberately outside every .reveal wrapper: .reveal sets a transform, and
   a transformed ancestor would make both position:sticky and the mobile
   position:fixed dock resolve against the wrapper instead of the viewport. */
.cfg-summary{
  position: sticky;
  top: 96px;
  background: var(--indigo);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 24px 22px;
  box-shadow: 0 14px 34px var(--cfg-shadow);
}
.cfg-summary-label{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 12px;
}
/* the glance line and its disclosure exist only for the docked mobile bar */
.cfg-glance,
.cfg-detail-toggle{ display: none; }
.cfg-total{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.cfg-total-from{
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--mist);
}
.cfg-total-value{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 3.2vw, 46px);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cfg-was{
  font-size: 15px;
  color: var(--mist);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cfg-lines{
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--indigo-light);
}
.cfg-line{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mist);
}
.cfg-line > span:last-child{
  flex-shrink: 0;
  color: var(--paper);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cfg-line.is-strong{ color: var(--paper); font-size: 13px; }
.cfg-split{
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mist);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cfg-summary .btn{ display: block; text-align: center; margin-top: 18px; }

.cfg-sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Static blocks: quieter than the question cards on purpose ---- */
.cfg-static{ margin-top: 46px; }
.cfg-static h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--gold);
  margin: 0 0 6px;
}
.cfg-static > p{
  font-size: 13.5px;
  color: var(--mist);
  margin: 0 0 16px;
  max-width: 60ch;
}
.cfg-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0; padding: 0;
}
.cfg-pills li{
  font-size: 12.5px;
  color: var(--mist);
  border: 1px solid var(--indigo-light);
  border-radius: 20px;
  padding: 6px 14px;
}
.cfg-excluded{
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0; padding: 0;
}
.cfg-excluded li{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mist);
  display: flex;
  gap: 10px;
  max-width: 62ch;
}
.cfg-excluded li::before{ content: '—'; opacity: 0.5; flex-shrink: 0; }
.cfg-footnote{
  margin: 40px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--indigo-light);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mist);
  max-width: 62ch;
}

/* ---- The send block: turns the answers into a drafted email ----
   Carries the same gold border as the summary because it is the end of the
   flow, not another question. Nothing here posts anywhere — the two buttons
   hand the text to the visitor's own mail client or their clipboard. */
.cfg-send{
  margin-top: 46px;
  padding: 30px 28px;
  background: var(--indigo);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 14px 34px var(--cfg-shadow);
}
.cfg-send h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--paper);
  margin: 0 0 10px;
}
.cfg-send-intro{
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mist);
  margin: 0 0 24px;
  max-width: 60ch;
}

.cfg-send-fields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (min-width: 620px){
  .cfg-send-fields{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cfg-field{ min-width: 0; }
.cfg-field-label{
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 7px;
}
.cfg-optional{
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
  font-size: 11.5px;
}
.cfg-send input,
.cfg-send textarea{
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14.5px;
  color: var(--paper);
  background: var(--indigo-deep);
  border: 1px solid var(--indigo-light);
  border-radius: 6px;
  transition: border-color 0.15s ease;
  /* keep focused fields clear of the docked summary bar on mobile */
  scroll-margin-bottom: 110px;
}
.cfg-send textarea{
  min-height: 100px;
  line-height: 1.55;
  resize: vertical;
}
.cfg-send input::placeholder,
.cfg-send textarea::placeholder{ color: var(--mist); opacity: 0.72; }
.cfg-send input:hover,
.cfg-send textarea:hover{ border-color: var(--gold-deep); }
.cfg-send input:focus,
.cfg-send textarea:focus{ border-color: var(--gold); outline: none; }
.cfg-send input:focus-visible,
.cfg-send textarea:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

.cfg-counter{
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--mist);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cfg-counter.is-low{ color: var(--paper); font-weight: 500; }

.cfg-preview{ margin: 20px 0 0; }
.cfg-preview summary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13.5px;
  color: var(--mist);
  cursor: pointer;
  list-style: none;
}
.cfg-preview summary::-webkit-details-marker{ display: none; }
.cfg-preview summary::before{
  content: '';
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.cfg-preview[open] summary::before{ transform: rotate(90deg); }
.cfg-preview summary:hover{ color: var(--paper); }
.cfg-preview textarea{
  margin-top: 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}
.cfg-reset{
  margin-top: 10px;
  min-height: 44px;
  padding: 9px 16px;
  font: inherit;
  font-size: 12.5px;
  color: var(--mist);
  background: transparent;
  border: 1px solid var(--indigo-light);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cfg-reset:hover{ border-color: var(--gold-deep); color: var(--paper); }

.cfg-send-warn{
  margin: 18px 0 0;
  padding: 12px 15px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--paper);
  background: var(--indigo-deep);
  border-left: 3px solid var(--gold);
  border-radius: 0 5px 5px 0;
}

.cfg-send-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.cfg-send-actions .btn{ cursor: pointer; font-family: inherit; }
.cfg-send-actions .btn-ghost{ background: transparent; }
.cfg-send-note{
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mist);
  max-width: 60ch;
}
.cfg-send-note strong{ color: var(--paper); font-weight: 500; }

/* ---- Summary docks to the bottom of the viewport on narrow screens ----
   Compact by default — total, one glance line, and a disclosure for the
   full breakdown — so the bar stays around 76px and never sits over the
   option the visitor is reaching for. */
@media (max-width: 980px){
  .cfg-layout{ grid-template-columns: 1fr; gap: 0; }
  .cfg-questions{ padding-bottom: 116px; }
  .cfg-summary{
    position: fixed;
    top: auto;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    padding: 10px 18px 12px;
    border-radius: 0;
    border-width: 1px 0 0;
    box-shadow: 0 -10px 28px var(--cfg-shadow);
    transform: translateY(105%);
    transition: transform 0.3s ease;
  }
  #services.section-in-view .cfg-summary{ transform: translateY(0); }
  .cfg-summary-label{ display: none; }

  .cfg-summary-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cfg-total{ flex-direction: column; align-items: flex-start; gap: 0; flex-shrink: 0; }
  .cfg-total-value{ font-size: 30px; }
  .cfg-was{ font-size: 12.5px; }

  .cfg-glance{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--mist);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .cfg-glance strong{ color: var(--paper); font-weight: 500; }

  .cfg-detail-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    margin: 0; padding: 0;
    background: transparent;
    border: 1px solid var(--indigo-light);
    border-radius: 50%;
    color: var(--mist);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .cfg-detail-toggle:hover{ border-color: var(--gold-deep); }
  .cfg-detail-toggle svg{
    width: 15px; height: 15px;
    transition: transform 0.2s ease;
  }
  #services.summary-open .cfg-detail-toggle svg{ transform: rotate(180deg); }

  .cfg-detail{ display: none; }
  #services.summary-open .cfg-detail{
    display: block;
    max-height: 38vh;
    overflow-y: auto;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--indigo-light);
  }
  .cfg-lines{ margin: 0; padding: 0; border-top: 0; }
  .cfg-summary .btn{ margin-top: 14px; }

  /* keep the back-to-top button clear of the docked bar, and out of the way
     entirely once the breakdown is expanded over it */
  #services.section-in-view ~ .back-to-top{ transform: translateY(-88px); }
  #services.summary-open ~ .back-to-top{ opacity: 0; visibility: hidden; }

  /* Once the visitor reaches the send block the running total has done its job
     — the estimate is already inside the drafted email — so the bar retires
     rather than sitting over the two buttons. Declared after the rules above so
     it wins on source order at equal specificity. */
  #services.sending .cfg-summary{ transform: translateY(105%); }
  #services.sending ~ .back-to-top{ transform: translateY(0); }
}

/* ---------------- WORK: FEATURED CLIENT ---------------- */
.featured-client{
  background: var(--indigo-deep);
  color: var(--paper);
  border-radius: 8px;
  padding: 48px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items:center;
  margin-bottom: 32px;
}
.featured-client.reverse .client-visual-wrap{ order: -1; }
.status-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: var(--gold-veil);
  color: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.status-badge::before{
  content:'';
  width: 7px; height:7px;
  border-radius: 50%;
  background: var(--gold);
}
.featured-client h3{
  font-size: 30px;
  margin-bottom: 14px;
}
.featured-client p{ font-size: 15px; color: var(--mist); margin: 0 0 12px; }
.featured-client ul{
  list-style:none; padding:0;
  margin: 20px 0 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.featured-client li{
  font-size: 13px;
  color: var(--mist);
  display:flex;
  gap:8px;
}
.featured-client li::before{ content:'✓'; color: var(--gold); }

.client-visual-wrap{
  position: relative;
}
.client-visual[hidden],
.mobile-preview[hidden]{
  display: none;
}
.preview-toggle{
  position:absolute;
  top:10px; right:10px;
  z-index: 6;
  display:flex;
  gap:2px;
  background: rgba(5,29,51,0.6);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 3px;
}
.preview-toggle button{
  width:28px; height:28px;
  border:none;
  border-radius:50%;
  background:transparent;
  color: rgba(255,255,255,0.65);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.preview-toggle button svg{ width:14px; height:14px; }
.preview-toggle button.active{ background: var(--gold); color: var(--indigo-deep); }
.preview-toggle button:hover:not(.active){ color:white; }

.client-visual{
  /* aspect-ratio is set inline per-card to exactly match its screenshot — no cropping */
  border-radius: 6px;
  position: relative;
  overflow:hidden;
  display:block;
}
.client-visual img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform 0.4s ease;
}
.client-visual:hover img{ transform: scale(1.04); }
.client-visual-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(5,29,51,0.75) 0%, rgba(5,29,51,0.1) 45%, transparent 70%);
  display:flex;
  align-items:flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.client-visual:hover .client-visual-overlay,
.client-visual:focus-visible .client-visual-overlay{ opacity: 1; }
.client-visual-cta{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  background: var(--gold);
  color: var(--indigo-deep);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
}
.client-visual-cta svg{ width:13px; height:13px; }

/* Mobile preview mode — real live site, run at true mobile viewport width, scaled to fit a phone frame */
.mobile-preview{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  padding: 18px 0 4px;
}
.phone-frame{
  width: 230px;
  height: 409px;
  border-radius: 26px;
  border: 6px solid var(--indigo-deep);
  background: white;
  overflow:hidden;
  position:relative;
  box-shadow: 0 16px 32px rgba(5,29,51,0.28);
}
.phone-frame .notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:70px; height:14px;
  background:var(--indigo-deep);
  border-radius: 0 0 10px 10px;
  z-index:2;
}
.phone-frame img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: top center;
  display:block;
}
.mobile-preview-link{
  font-size: 12px;
  color: var(--mist);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.mobile-preview-link:hover{ color: var(--gold); }
.mobile-preview-link svg{ width:11px; height:11px; }

/* ---------------- WORK: SEE IT IN ACTION (mini interactive widgets) ---------------- */
.showcase-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
/* the showcase grid is two columns, so an odd final card would otherwise sit
   at half width on its own — let it take the full row instead */
.showcase-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
.showcase-card{
  background: var(--paper-dim);
  border-radius: 6px;
  padding: 26px 24px;
  display:flex;
  flex-direction:column;
}
.showcase-card h4{
  font-family: var(--serif);
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--indigo);
}
.showcase-card p.desc{
  font-size: 13px;
  color: var(--ink);
  opacity: 0.75;
  margin: 0 0 6px;
}
.mini-status{
  font-size: 12.5px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(27,29,36,0.15);
  color: var(--ink);
  line-height: 1.5;
}
.mini-status.is-tip{ color: var(--gold-ink); font-style: italic; }
.mini-status strong{ color: var(--indigo); font-style:normal; }
/* inline reset for the CMS demo, since its edit now outlives the visit */
.mini-reset{
  font: inherit;
  font-size: 11.5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-ink);
  text-decoration: underline;
  cursor: pointer;
}
.mini-reset:hover{ color: var(--indigo); }

.mini-note{
  font-size: 11px;
  color: var(--ink);
  opacity: 0.55;
  margin: 6px 0 0;
  line-height: 1.5;
}

/* One shared, generic, playful gradient box — used by all three mini-widgets */
.mini-widget-box{
  background: linear-gradient(120deg, #FDEBD3 0%, #E8E0FB 50%, #DBF0F1 100%);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 8px 0 4px;
  border: 1px solid rgba(74,46,61,0.08);
}

/* --- Live text editor --- */
.mini-cms-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mini-cms-row span{ font-weight:600; color: var(--ink); font-size:13px; }
.mini-edit-btn{
  background: rgba(255,255,255,0.7);
  border:none; cursor:pointer;
  color: #8B4FD6;
  flex-shrink:0;
  padding: 6px;
  border-radius: 50%;
  display:flex;
  transition: background 0.15s ease, transform 0.15s ease;
}
.mini-edit-btn:hover{ background: rgba(255,255,255,0.95); transform: scale(1.06); }
.mini-cms-input{
  width:100%;
  font-family: inherit;
  font-size: 13px;
  font-weight:600;
  padding: 6px 8px;
  border: 1px solid rgba(74,46,61,0.2);
  border-radius: 4px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.85);
  color: var(--ink);
}
.mini-cms-actions{ display:flex; gap:8px; }
.mini-save-btn, .mini-cancel-btn{
  font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 4px;
  border: none;
  cursor:pointer;
}
.mini-save-btn{ background: #8B4FD6; color: white; }
.mini-cancel-btn{ background:transparent; border: 1px solid rgba(74,46,61,0.25); color: var(--ink); }

/* --- Before / after slider (generic — not tied to any business type) --- */
.mini-slider-wrap{
  position:relative;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  user-select:none;
  touch-action: pan-y;
}
.mini-slide-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mini-slide-before{ background: repeating-linear-gradient(135deg, #DCD5E8, #DCD5E8 8px, #D3CBE3 8px, #D3CBE3 16px); }
.mini-slide-after{ background: linear-gradient(135deg, #FDEBD3, #DBF0F1); clip-path: inset(0 0 0 50%); }
.mini-slide-label{
  position:absolute; top:8px; font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  background:rgba(27,29,36,0.72); color:white; padding:3px 9px; border-radius:20px;
}
.mini-slide-before .mini-slide-label{ left:8px; }
.mini-slide-after .mini-slide-label{ right:8px; }
.mini-slide-layer svg{ width: 46%; opacity:0.85; }
.mini-slider-handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:white; transform:translateX(-50%); box-shadow: 0 0 0 1px rgba(74,46,61,0.15); }
.mini-handle-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%; background:white;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(74,46,61,0.25);
}
.mini-handle-grip svg{ width:14px; height:14px; }
.mini-slider-range{
  width:100%; margin-top:10px; display:block;
  -webkit-appearance:none; appearance:none;
  height:5px; border-radius:4px; background: rgba(74,46,61,0.15); outline:none;
}
.mini-slider-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background: #8B4FD6; cursor:pointer; border: 2px solid white; box-shadow: 0 2px 6px rgba(74,46,61,0.3);
}
.mini-slider-range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background: #8B4FD6; cursor:pointer; border: 2px solid white; box-shadow: 0 2px 6px rgba(74,46,61,0.3);
}

/* --- Click to reveal (generic hotspot diagram) --- */
.mini-hotspot-wrap{ display:flex; justify-content:center; padding: 4px 0; }
.mini-hotspot-wrap svg{ width: 100%; max-width: 220px; }
.mini-hotspot{ cursor:pointer; }
.mini-hotspot-dot{ fill: #8B4FD6; stroke: #FDEBD3; stroke-width:2; transition: r 0.15s ease, fill 0.15s ease; }
.mini-hotspot:hover .mini-hotspot-dot, .mini-hotspot.active .mini-hotspot-dot{ r:8; fill: var(--indigo); }

/* ---------------- PROCESS ---------------- */
.process-flow{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}
.process-step{
  text-align:center;
  position: relative;
}
.process-num{
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold);
  width: 42px; height:42px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
  background: var(--indigo-deep);
  position: relative;
  z-index: 2;
}
.process-step h4{
  font-family: var(--serif);
  font-size: 18px;
  color: var(--paper);
  margin: 0 0 8px;
}
.process-step p{
  font-size: 13px;
  color: var(--mist);
  margin:0;
}
.process-line{
  position:absolute;
  top: 21px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: rgba(199,210,227,0.25);
  z-index: 1;
}
.process-step:last-child .process-line{ display:none; }

/* ---------------- CONTACT ---------------- */
.contact-grid{
  max-width: 560px;
  margin: 0 auto;
}
.contact-heading-wrap{ position: relative; display:inline-block; }
.contact-copy h2{ font-size: clamp(28px,4vw,38px); margin-bottom:16px; color: var(--indigo); position: relative; z-index: 1; }
.contact-spark{
  position:absolute;
  color: var(--gold);
  animation: contact-twinkle 2.6s ease-in-out infinite;
  pointer-events: none;
}
.contact-spark svg{ display:block; }
@keyframes contact-twinkle{
  0%, 100%{ opacity: 0.25; transform: scale(0.85) rotate(0deg); }
  50%{ opacity: 0.9; transform: scale(1.05) rotate(8deg); }
}

.contact-status{
  display:inline-flex;
  align-items:center;
  gap: 9px;
  font-size: 13px;
  color: var(--gold-ink);
  background: var(--paper-dim);
  padding: 7px 14px 7px 12px;
  border-radius: 20px;
  margin-bottom: 26px;
}
.status-dot{
  width: 8px; height:8px;
  border-radius:50%;
  background: #4CAF6D;
  flex-shrink:0;
  position: relative;
}
.status-dot::after{
  content:'';
  position:absolute; inset:-4px;
  border-radius:50%;
  background: #4CAF6D;
  opacity: 0.4;
  animation: status-pulse 2s ease-out infinite;
}
@keyframes status-pulse{
  0%{ transform: scale(0.6); opacity: 0.5; }
  100%{ transform: scale(1.9); opacity: 0; }
}

.contact-copy p{ font-size: 16px; margin-bottom: 28px; }
.contact-links{
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.contact-link{
  display:flex;
  align-items:center;
  gap: 14px;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid rgba(27,29,36,0.12);
  padding: 4px 4px 14px 10px;
  margin-left: -10px;
  border-radius: 4px 4px 0 0;
  transition: color 0.2s ease, background 0.2s ease;
}
.contact-link:hover{ color: var(--gold-ink); background: var(--paper-dim); }
/* the address is not a link — no hover affordance, no pointer */
.contact-link.is-static{ margin: 0; cursor: default; }
.contact-link.is-static:hover{ color: var(--ink); background: transparent; }
.contact-link.is-static:hover .icon{ transform: none; }
.contact-link .icon{
  width: 20px; height:20px;
  flex-shrink:0;
  color: var(--gold-ink);
  transition: transform 0.3s ease;
}
.contact-link:hover .icon{ transform: scale(1.15) rotate(-6deg); }

/* ---------------- FOOTER ---------------- */
footer{
  background: var(--indigo-deep);
  color: var(--mist);
  padding: 44px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap: 10px;
}
/* width:auto matters here: as a flex item the img would otherwise take its
   988px intrinsic width as its flex basis and get squashed to a 592x26 smear.
   The nav rule already had it; this one did not. */
/* height comes from .brand-logo-sm; nothing img-specific left here */
.footer-brand span{ font-family: var(--serif); font-size:16px; color: var(--paper); }
.footer-links{ display:flex; gap: 24px; }
.footer-links a{ font-size: 13px; color: var(--mist); }
.footer-links a:hover{ color: var(--gold); }
.footer-raga{
  width: 100%;
  margin: 26px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-style: italic;
  color: var(--mist);
  opacity: 0.85;
}
.footer-raga strong{ font-style: normal; font-weight: 500; color: var(--gold); }
.footer-copy{ font-size: 12px; opacity: 0.6; width:100%; margin-top: 10px; text-align:center; }

/* ---------------- MEEND FLOURISHES ---------------- */
/* Small decorative curves, echoing the logo's meend gesture, placed inside
   a handful of sections (not all). Fade in while their section is in view,
   fade back out once scrolled away — not a persistent element, so there's
   nothing to hide behind a viewport-width media query; it just sits in
   normal document flow and works at any width, including mobile. */
.meend-flourish{
  position: absolute;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
  z-index: 1;
}
.meend-flourish.is-in-view{ opacity: 0.55; }
.meend-flourish svg{ display: block; }

/* ---------------- SCROLL REVEAL ---------------- */
/* Uses `animation`, deliberately not `transition` — cards below already
   declare their own transition (hover lift, border-color etc.), and two
   rules fighting over the same `transition` shorthand is exactly the kind
   of silent bug that broke the mobile nav earlier. animation is a
   separate mechanism, so the two never collide. */
.reveal{
  opacity: 0;
  transform: translateY(28px);
}
.reveal.is-visible{
  animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes reveal-up{
  from{ opacity: 0; transform: translateY(28px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------------- BACK TO TOP ---------------- */
.back-to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--indigo-deep);
  border: none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(5,29,51,0.3);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background 0.2s ease;
}
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.back-to-top:hover{ background: var(--gold-deep); }
.back-to-top svg{ width: 18px; height: 18px; }

/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 1400px){
  .hero{ padding: 220px 0 170px; }
}
@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-values{ order: -1; }
  .showcase-grid{ grid-template-columns: 1fr; }
  .process-flow{ grid-template-columns: 1fr; gap: 36px; }
  .process-line{ display:none; }
  .featured-client{ grid-template-columns: 1fr; padding: 32px; }
  .featured-client ul{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .nav-links{
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: 240px;
    background: var(--indigo-deep);
    flex-direction: column;
    justify-content:center;
    align-items:flex-start;
    padding: 40px;
    gap: 28px;
    transform: translateX(100%);
    /* Off-screen is not hidden: with transform alone the five links stayed in
       the tab order and the accessibility tree, so keyboard users tabbed
       through an invisible menu. visibility does remove them; the 0.3s delay
       holds it visible until the slide-out has finished. */
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    z-index: 10;
  }
  .nav-links.open{ transform: translateX(0); visibility: visible; transition: transform 0.3s ease; }
  .nav-toggle{ display:block; }
  section{ padding: 64px 0; }
  .hero{ padding: 150px 0 90px; }
  .featured-client{ padding: 24px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero-logo, .eyebrow, .hero h1, .hero p.tagline, .hero p.sub, .hero-ctas{ opacity: 1; transform:none; }
  /* the reveal helper sets a per-element animation-delay in JS; the rule
     above kills the duration but not the delay, so clear it too */
  .reveal{ animation-delay: 0s !important; }
  .cfg-spark{ display: none; }
}

/* ---------------- CLIENT LOGO STRIP ----------------
   A looping band of every site that is live, sitting at the foot of the work
   section. The logos belong to the clients, so unlike everything else on the
   page they keep their own colours and are never re-tinted by the raga. */
.client-strip-block{
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--paper-dim);
}
.client-strip-head{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 27px;
  text-align: center;
  color: var(--ink);
  margin: 0 0 26px;
}

.logo-strip{
  overflow: hidden;
  /* Fade both ends so logos enter and leave rather than being guillotined at
     the edge. This is a stencil, not a colour, hence the bare keywords. */
  -webkit-mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
          mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
}
/* Reduced motion: no loop, no duplicated half — just a strip you can push. */
.logo-strip.is-static{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* With only a few clients the row is narrower than the strip, and left-aligned
   logos with a gap on the right look like something failed to load. Auto
   margins centre it, and collapse to nothing once the row does overflow. */
.logo-strip.is-static .logo-track{ margin-inline: auto; }

.logo-track{
  display: flex;
  gap: 22px;
  width: max-content;
}
.logo-track.is-running{
  animation: logo-marquee linear infinite;
}
@keyframes logo-marquee{
  from{ transform: translateX(0); }
  /* one set-width exactly, so the next identical set lands where this one began */
  to  { transform: translateX(calc(-1 * var(--set-w, 50%))); }
}
/* Hold still while someone is reading or tabbing through it. */
.logo-strip:hover .logo-track.is-running,
.logo-strip:focus-within .logo-track.is-running{
  animation-play-state: paused;
}

.logo-tile{
  flex: 0 0 auto;
  width: 236px;
  height: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 26px;
  border-radius: 3px;
  background: var(--paper-dim);
  border: 1px solid transparent;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.logo-tile:hover,
.logo-tile:focus-visible{
  border-color: var(--gold);
  transform: translateY(-3px);
}
.logo-tile:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.logo-tile img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Square monograms read far larger than a wordmark at the same height, so
   they are pegged back to keep the optical weight even across the strip. */
.logo-tile img.is-mark{ max-height: 62px; }
/* Logos that carry their own background are given an edge, or they bleed into
   a tile of nearly the same value and look like a printing fault. */
.logo-tile img.is-boxed{
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--mist);
}

.client-strip-cta{ text-align: center; margin-top: 30px; }

.logo-fallback{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.logo-fallback a{ color: var(--gold-ink); text-decoration: underline; }

@media (max-width: 560px){
  .logo-tile{ width: 182px; height: 100px; padding: 16px 20px; }
  .logo-track{ gap: 14px; }
  .client-strip-head{ font-size: 23px; }
}

/* ---------------- WORK PAGE (work.html) ----------------
   The full list of live sites. The home page opens on a dark hero, so the nav
   can afford to start transparent there; this page opens on paper, where light
   nav links over a light background would be unreadable. So the nav is given
   its solid colour from the outset — set, never transitioned, for the reason
   spelled out on .site-nav above. */
.page-solid-nav .site-nav{ background-color: var(--indigo-deep); }

.work-page{ padding-top: 148px; }
.work-page .section-head{ max-width: 660px; }
.work-page h1{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--ink);
}
.work-count{
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.work-page-cta{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--paper-dim);
  text-align: center;
}
.work-page-cta p{
  font-size: 15px;
  color: var(--indigo);
  margin: 0 0 20px;
}

@media (max-width: 560px){
  .work-page{ padding-top: 116px; }
}

/* Work page footer actions — the primary route is a conversation, with the way
   back to the studio kept quieter beside it. `.btn-ghost` is built for dark
   sections, so this page needs its own low-key variant. */
.work-page-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.btn-quiet{
  /* NOT --mist. That is what .btn-ghost uses, but ghost sits on dark surfaces
     where mist is the light end of the scale; on paper the same variable gives
     a 1.57:1 edge, under the 3:1 a control boundary needs. --indigo-light is
     the light-background equivalent. */
  border: 1px solid var(--indigo-light);
  color: var(--indigo);
}
.btn-quiet:hover{ border-color: var(--gold); color: var(--gold-ink); }

/* ---------------- MEEND CURSOR ----------------
   The canvas and the hiding of the native cursor are both gated behind the
   `.meend-cursor` class, which only js/cursor.js adds. If that script never
   runs — blocked, errored, an old browser — none of this applies and the page
   keeps an ordinary pointer. That is the whole safety model, so do not move
   `cursor: none` out to a bare selector. */
.meend-cursor-canvas{
  position: fixed;
  inset: 0;
  z-index: 300;          /* above the nav (100) and the back-to-top (200) */
  pointer-events: none;  /* never intercepts a click */
}

/* The blanket override is deliberate: a lot of controls set their own
   `cursor: pointer`, and every one of them would otherwise punch a visible
   arrow back through the effect. */
.meend-cursor,
.meend-cursor *{ cursor: none !important; }

/* Text entry is the exception, always. A caret is not decoration — you cannot
   see where you are typing without one. */
.meend-cursor input,
.meend-cursor textarea,
.meend-cursor select,
.meend-cursor [contenteditable]{ cursor: auto !important; }

/* Anyone who has asked for less motion keeps the system cursor outright; the
   script bails before adding the class, and this is belt and braces. */
@media (prefers-reduced-motion: reduce){
  .meend-cursor, .meend-cursor *{ cursor: auto !important; }
  .meend-cursor-canvas{ display: none; }
}
/* Coarse pointers never see it either. */
@media (hover: none), (pointer: coarse){
  .meend-cursor, .meend-cursor *{ cursor: auto !important; }
  .meend-cursor-canvas{ display: none; }
}