/* =================================================================
   JUSTDIZ PREPRODUCTIONS - Business teaser-demo (overhauled)
   Dark editorial identity built from #171B22 / #20252D with a single
   champagne-gold accent.

   SYSTEM:
   - Plain HTML/CSS/JS, no build step.
   - Playfair Display for display, Montserrat for text/UI.
   - One dark theme, value-stepped bands, one gold accent locked page-wide.
   - Layout families are deliberately distinct per section so the page
     no longer reads as a templated section stack.
   ================================================================= */
:root {
  /* SWAP: brand tokens ------------------------------------------- */
  --brand:        #D7B36A;
  --brand-dark:   #B98C3A;
  --brand-deep:   #7B5C24;
  --brand-tint:   rgba(215,179,106,.16);
  --honey:        #E6C982;

  /* dark editorial ramp ----------------------------------------- */
  --ink:          #F8F4EA;
  --ink-soft:     #CFC7B9;
  --cream:        #20252D;
  --cream-2:      #262C36;
  --cream-3:      #2A303B;
  --espresso:     #171B22;
  --line:         rgba(255,255,255,.14);
  --line-soft:    rgba(255,255,255,.09);
  --panel:        #2B313C;
  --panel-deep:   #1E232B;

  /* type --------------------------------------------------------- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-head:    "PesoFix", "Montserrat", system-ui, sans-serif;
  --font-body:    "PesoFix", "Montserrat", system-ui, sans-serif;

  /* shape -------------------------------------------------------- */
  --radius:       14px;
  --radius-sm:    8px;
  --maxw:         1180px;
  --accent-bar:   4px;
  --header-h:     70px;

  /* shadows ------------------------------------------------------ */
  --shadow:       0 14px 34px rgba(0,0,0,.20);
  --shadow-lg:    0 28px 72px rgba(0,0,0,.35);

  /* spacing scale ----------------------------------------------- */
  --space-2:      .5rem;
  --space-3:      .75rem;
  --space-4:      1rem;
  --space-5:      1.5rem;
  --space-6:      2rem;
  --space-7:      3rem;
  --gap:          clamp(1.25rem, 1rem + 1.4vw, 2rem);
  --panel-pad:    clamp(1.5rem, 1.05rem + 2vw, 2.75rem);
  --section-pad:  clamp(4.5rem, 3rem + 7vw, 8rem);
  --head-gap:     clamp(2.5rem, 1.8rem + 2.4vw, 3.8rem);
}

@font-face {
  font-family: "PesoFix";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto"), local("Noto Sans");
  unicode-range: U+20B1;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--demo-banner-h, 0px) + 18px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  font-size: .95rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, iframe, svg { max-width: 100%; display: block; }
a { color: var(--honey); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:not(.btn):focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; border-radius: 3px; }
h1,h2,h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h2 { font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.85rem); line-height: 1.06; }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.14; }
p { margin: 0 0 1rem; }
.muted { color: var(--ink-soft); }
.container { width: min(100% - 2.6rem, var(--maxw)); margin-inline: auto; }
.section { position: relative; padding: var(--section-pad) 0; }

.top-anchor {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; pointer-events: none;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--espresso); padding: .7rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ic {
  display: inline-block; vertical-align: middle;
  width: 1.2em; height: 1.2em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.eyebrow {
  display: block;
  font-family: var(--font-head); font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  font-size: .72rem; color: var(--honey);
  margin: 0 0 1rem;
}

/* Section folios ------------------------------------------------- */
/* Editorial chapter marks: an italic title beside a gold hairline
   that fades out. The centered variant (testimonial) runs rule —
   label — rule; its leading rule fades IN via --in. */
.sec-folio {
  display: flex; align-items: center; gap: var(--space-5);
  margin: 0 0 clamp(2.5rem, 1.8rem + 2vw, 3.4rem);
}
.sec-folio-label {
  flex: none;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: .95rem; letter-spacing: .02em; color: var(--brand);
  white-space: nowrap;
}
.sec-folio-rule {
  flex: 1 1 auto; height: 1px; margin: 0; border: none;
  background: linear-gradient(90deg, var(--brand) 0%, transparent 100%);
}
.sec-folio--center { justify-content: center; }
.sec-folio--center .sec-folio-rule { flex: 0 1 120px; }
.sec-folio-rule--in { background: linear-gradient(90deg, transparent 0%, var(--brand) 100%); }

/* Shared section lead line ------------------------------------- */
.work-lead, .services-lead, .pricing-lead, .contact-lead {
  color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 56ch;
}

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 600; font-size: .86rem; letter-spacing: .015em;
  padding: .58rem 1.2rem; border-radius: 999px; border: 1.25px solid transparent;
  background: var(--brand-dark); color: #11151B; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
.btn-primary { background: linear-gradient(180deg, #E6C982, var(--brand-dark)); color: #15191F; box-shadow: 0 12px 26px rgba(0,0,0,.25); }
.btn-primary:hover { background: linear-gradient(180deg, #F1D995, #C59A4F); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline { background: transparent; color: var(--honey); border-color: rgba(215,179,106,.6); }
.btn-outline:hover { background: rgba(215,179,106,.1); color: #fff; }
.btn-lg { padding: .72rem 1.5rem; font-size: .92rem; }
.btn-block { width: 100%; }
.link-quiet { font-family: var(--font-head); font-weight: 700; color: var(--honey); text-decoration: underline; text-underline-offset: 3px; }

/* ============================ CHROME ============================ */
.demo-banner{
  position: sticky; top: 0; z-index: 1000;
  background: #101319; color: #F8F4EA;
  font: 600 .82rem/1.4 var(--font-body);
  text-align: center; padding: .5rem 1rem;
  letter-spacing: .01em;
  border-bottom: 1px solid rgba(255,255,255,.11);
}

.site-header {
  position: fixed; top: var(--demo-banner-h, 0px); left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -34px 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.22) 64%, transparent 100%);
  transition: opacity .3s ease;
}
.site-header .header-inner { position: relative; z-index: 1; }
.site-header.scrolled {
  background: rgba(23,27,34,.92); backdrop-filter: blur(12px);
  border-bottom-color: var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.32);
}
.site-header.scrolled::before { opacity: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .75rem; color: #fff; }
.brand:hover { text-decoration: none; }
.brand-logo, .footer-logo {
  display: block; object-fit: contain; background: #050607;
  border: 1px solid rgba(255,255,255,.18); box-shadow: var(--shadow);
}
.brand-logo { width: 46px; height: 46px; border-radius: 10px; padding: 5px; }
.footer-logo { width: 48px; height: 48px; border-radius: 10px; padding: 5px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1; letter-spacing: 0; display: flex; flex-direction: column; gap: .2rem; }
.brand-sub { font-family: var(--font-head); font-size: .6rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--honey); }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { position: relative; font-family: var(--font-head); color: #fff; font-weight: 700; font-size: .92rem; transition: color .15s ease; }
.nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav a:not(.nav-cta):hover, .nav a:not(.nav-cta):focus-visible { text-decoration: none; }
.nav a:not(.nav-cta):hover::after, .nav a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.nav a.active:not(.nav-cta)::after { transform: scaleX(1); background: var(--honey); }
.nav-cta { margin-left: .55rem; padding: .48rem 1.05rem; }
.nav a.nav-cta, .nav a.nav-cta:hover { color: #14171D; }
.nav a.nav-cta::after { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ============================== HERO ============================== */
/* Editorial-spread layout: a narrow left rail (folio mark + rotated
   eyebrow label) beside a wider column carrying the headline, sub-copy
   and CTAs. Collapses to a horizontal strip above the headline at
   <=860px per RESPONSIVE below. */
.hero {
  position: relative; color: #fff; overflow: hidden; border-top: 0;
  display: flex; align-items: flex-end;
  min-height: clamp(580px, 92svh, 940px);
  padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7);
}
.hero-bg {
  position: absolute; inset: 0;
  /* WebP (~60% lighter) via image-set; the plain url() declaration is the
     fallback for browsers without image-set support. */
  background:
    linear-gradient(180deg, rgba(9,11,15,.28) 0%, rgba(11,13,17,.40) 38%, rgba(8,10,14,.82) 72%, rgba(7,9,12,.95) 100%),
    radial-gradient(130% 85% at 16% 100%, rgba(7,9,12,.58), transparent 62%),
    url("/assets/justdiz-hero.jpg") center/cover no-repeat;
  background:
    linear-gradient(180deg, rgba(9,11,15,.28) 0%, rgba(11,13,17,.40) 38%, rgba(8,10,14,.82) 72%, rgba(7,9,12,.95) 100%),
    radial-gradient(130% 85% at 16% 100%, rgba(7,9,12,.58), transparent 62%),
    image-set(url("/assets/justdiz-hero.webp") type("image/webp"), url("/assets/justdiz-hero.jpg") type("image/jpeg")) center/cover no-repeat;
  transform: scale(1.06);
}
.hero-inner {
  position: relative; max-width: 980px;
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: end; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding: 0 0 clamp(1rem, .5rem + 1.6vw, 2.25rem);
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.hero-rail {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; justify-self: start; gap: 1.4rem;
  padding-right: .65rem;
  border-right: 1px solid var(--line);
  min-height: clamp(220px, 26vw, 320px);
}
.hero-rail-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-body); font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; font-size: .72rem;
  color: var(--ink-soft);
}
.hero-rail-label b { color: var(--brand); }
.hero-main { min-width: 0; }
.hero-eyebrow { color: var(--honey); margin-bottom: 1.1rem; }
.hero-title {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.1rem);
  line-height: 1.02; color: #fff; margin: 0 0 .6em;
  letter-spacing: -.015em; text-wrap: wrap;
  padding-bottom: .18em;
}
.hero-title em {
  font-style: italic; font-weight: 500; color: var(--honey);
}
/* The champagne rule is bound to the headline's LAST LINE (.ht-last in the
   markup) rather than drawn on the h1 at a fixed em width. A fixed width
   cannot know where the line ends, so it ran past the period while fading
   out. Anchored to the last line, the rule terminates exactly on the period
   at every viewport. The line break is explicit (<br>) because a pseudo-
   element cannot find a break that text-wrap: balance decides at runtime. */
.hero-title .ht-last { position: relative; display: inline-block; }
.hero-title .ht-last::after {
  content: ""; position: absolute; left: 0; bottom: -.18em;
  width: 100%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 88%, rgba(215,179,106,0) 100%);
  transform-origin: left; transform: scaleX(1);
}
.hero-rule {
  display: none;
}
.hero-sub { font-size: clamp(1rem, .92rem + .45vw, 1.18rem); line-height: 1.5; max-width: 42ch; color: #EEE7DC; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem) 0 0; }
/* ============================== WORK ============================== */
.work { background: var(--cream); }
.work-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
  max-width: 62ch; margin-bottom: var(--head-gap);
}
.work-title { font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3rem); margin: 0; text-wrap: balance; }

/* Gallery wall. Three themed columns (People / Places / Concepts) hung at
   offset starts so the eye drifts diagonally; each column carries a quiet
   theme label. Frames keep their natural aspect ratio — a portrait reads
   tall next to a wide landscape — and a museum-placard caption (gold tick +
   italic serif) sits under each. Collapses to a single column at <=820px. */
.work-wall {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.75rem);
  align-items: start;
}
.work-col { display: flex; flex-direction: column; gap: clamp(1.6rem, 1rem + 1.6vw, 2.4rem); }
.work-col:nth-child(2) { margin-top: clamp(2rem, 1rem + 3vw, 4.5rem); }
.work-col:nth-child(3) { margin-top: clamp(1rem, .5rem + 1.5vw, 2rem); }
.work-col-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-weight: 800; font-size: .7rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--honey);
}
.work-col-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.work-item {
  display: flex; flex-direction: column; gap: .7rem;
  position: relative; margin: 0; min-width: 0;
}
.work-view {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden;
}
.work-view:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }
.work-item img {
  width: 100%; height: auto; display: block; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); background: var(--panel);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.work-item:hover img { transform: scale(1.04); }
.work-cap {
  flex: none; display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: .88rem; line-height: 1.3; color: var(--ink-soft);
  transition: color .25s ease;
}
.work-cap::before {
  content: ""; flex: none; width: 1.4rem; height: 1px; background: var(--brand);
}
.work-item:hover .work-cap { color: var(--honey); }
.work-cta {
  display: flex; align-items: center; justify-content: center; text-align: center;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding: 2rem 1.5rem;
  background: linear-gradient(150deg, #262C36, #12161C); color: #fff;
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.work-cta:hover { text-decoration: none; }
.work-cta-inner { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; }
.work-cta-inner .ic { width: 1.9rem; height: 1.9rem; color: var(--honey); }
.work-cta-handle { font-weight: 700; font-size: .82rem; color: var(--honey); }
.work-cta:focus-visible { outline: 3px solid var(--honey); outline-offset: 3px; }

/* Gallery lightbox (native dialog) */
.lightbox {
  padding: clamp(1rem, .8rem + 1.5vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-deep); color: var(--ink);
  max-width: min(92vw, 1040px); box-shadow: var(--shadow-lg);
}
.lightbox::backdrop { background: rgba(10, 12, 16, .82); backdrop-filter: blur(6px); }
.lightbox-figure { margin: 0; }
.lightbox-figure img {
  width: 100%; max-height: 72vh; object-fit: contain;
  border-radius: var(--radius-sm); background: var(--espresso);
}
.lightbox-cap {
  display: flex; align-items: center; gap: .6rem; margin-top: .9rem;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1rem; color: var(--ink-soft);
}
.lightbox-cap::before { content: ""; flex: none; width: 1.4rem; height: 1px; background: var(--brand); }
.lightbox-cta { margin-top: 1.1rem; max-width: 100%; white-space: normal; text-align: center; }
.lightbox-close {
  position: absolute; top: .6rem; right: .75rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(23,27,34,.85); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { color: var(--honey); border-color: var(--brand-dark); }
.lightbox-close:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }

/* Staggered reveal for the gallery wall (wall stays put; columns cascade
   left-to-right so the diagonal offset is echoed in the entrance). */
.work-wall.reveal { opacity: 1; transform: none; }
.work-wall .work-col { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.work-wall.in .work-col { opacity: 1; transform: none; }
.work-wall.in .work-col:nth-child(2) { transition-delay: .1s; }
.work-wall.in .work-col:nth-child(3) { transition-delay: .2s; }

/* ============================ SERVICES ============================ */
.services { background: var(--espresso); }
.services-head { max-width: 62ch; margin-bottom: var(--head-gap); }
.svc-rows { display: flex; flex-direction: column; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.badge {
  display: inline-block; font-family: var(--font-head); color: var(--honey);
  font-weight: 700; font-size: .82rem; letter-spacing: .01em;
  margin-bottom: .6rem;
}

/* alternating feature rows */
.svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3.5vw, 4rem); align-items: center; }
.svc-row--rev .svc-media { order: 2; }
.svc-media {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.svc-row:hover .svc-media img { transform: scale(1.04); }
.svc-copy { max-width: 46ch; }
.svc-copy h3 { color: #fff; }
.svc-copy p { color: var(--ink-soft); margin: 0; font-size: 1rem; line-height: 1.55; }

/* full-width statement band that breaks the zigzag run */
.svc-statement {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center; padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  border-radius: var(--radius); border: 1px solid rgba(215,179,106,.3);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(215,179,106,.16), transparent 55%),
    var(--panel-deep);
  box-shadow: var(--shadow-lg);
}
.svc-statement-logo { width: 76px; height: 76px; border-radius: var(--radius-sm); padding: 8px; background: #050607; border: 1px solid rgba(255,255,255,.18); box-shadow: var(--shadow); }
.svc-statement-body { max-width: 62ch; }
.svc-statement-line {
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.4rem); line-height: 1.05;
  margin: .1rem 0 .6rem; text-wrap: balance;
}
.svc-statement-copy { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin: 0; }

/* Quiet per-service booking link -> prefills the inquiry service select */
.svc-book {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.1rem;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem;
  color: var(--honey);
}
.svc-book .ic { width: 1.05em; height: 1.05em; transition: transform .2s ease; }
.svc-book:hover { text-decoration: none; }
.svc-book:hover .ic { transform: translateX(4px); }

/* ============================== ABOUT ============================== */
/* Editorial atelier: numbered eyebrow, drop-cap lead, centered pull-quote.
   Portrait + copy stay a two-column split; quote breaks full-width below. */
.about { background: var(--cream-2); }
.about-inner {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
}
.about-portrait {
  position: relative; margin: 0; align-self: center;
  width: 100%; max-width: 340px; justify-self: center;
  aspect-ratio: 1284 / 1585; border-radius: clamp(16px, .9rem + .8vw, 22px);
  overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.14);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.about-portrait-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: .15rem;
  padding: 2.2rem 1.1rem .95rem; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6,8,11,.9));
}
.about-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.1; }
.about-role { font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--honey); }
.about-copy { max-width: 60ch; }
.about-copy p { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); }
/* Raised initial on the first body paragraph only (.about-lead).
   Not a floated drop cap: a float detaches the J from "ustdiz" so the
   word stops reading as "Justdiz". Instead the oversized J stays inline
   on the FIRST LINE'S BASELINE — the word stays contiguous, alignment is
   exact by construction, and Playfair's J-descender hangs into the
   paragraph's own leading below. line-height >1 cushions the raised
   ascent so the glyph can't collide with the heading above. */
.about-copy .about-lead::first-letter {
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  font-size: 2.6em; line-height: 1.15;
  float: none; margin-right: .03em; padding: 0;
  color: var(--brand);
}
.about-quote {
  position: relative; display: block;
  max-width: 760px; margin: clamp(4rem, 2.5rem + 5vw, 7.5rem) auto 0;
  padding: 0; border: 0; text-align: center;
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.875rem, 1.35rem + 2.1vw, 3.125rem); line-height: 1.28;
  color: var(--ink); quotes: none;
}
.about-quote::before,
.about-quote::after {
  content: ""; display: block; width: 4rem; height: 1px;
  margin-inline: auto; background: var(--brand);
}
.about-quote::before { margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
.about-quote::after { margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
.about-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: var(--space-5) 0 0; margin: var(--space-5) 0 0; border-top: 1px solid var(--line); }
.about-tags li {
  font-family: var(--font-head); color: var(--ink-soft); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line);
}

/* =========================== TESTIMONIAL =========================== */
.testimonial { background: var(--espresso); }
.testimonial-slide[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .testimonial-slide.is-active { animation: quoteIn .5s ease; }
}
@keyframes quoteIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.testimonial-dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1.6rem; }
.testimonial-dots button {
  width: .62rem; height: .62rem; padding: 0; border-radius: 999px;
  border: 1px solid var(--brand-dark); background: transparent; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.testimonial-dots button.is-active { background: var(--brand); transform: scale(1.25); }
.testimonial-dots button:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
.testimonial-inner { max-width: 860px; margin-inline: auto; text-align: center; }
.testimonial-mark { width: 2.6rem; height: 2.6rem; color: var(--brand); margin: 0 auto 1.1rem; }
.testimonial-quote {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1.15rem + 1.9vw, 2.5rem); line-height: 1.24;
  color: #F5EFE4; text-wrap: balance;
}
.testimonial-attr {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  margin: 1.8rem 0 0; font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: #fff;
}
.testimonial-note { font-weight: 600; font-size: .8rem; letter-spacing: .04em; color: var(--honey); }
.testimonial-disclaimer { font-size: .84rem; color: var(--ink-soft); max-width: 62ch; margin: 2.2rem auto 0; }

/* ============================= PRICING ============================= */
.pricing { background: var(--cream-3); }
.pricing-grid {
  display: grid; grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 1.2rem + 3.5vw, 4.5rem); align-items: start;
}
.pricing-intro {
  position: sticky; top: calc(var(--header-h) + var(--demo-banner-h, 0px) + 1.5rem);
}
.pricing-intro h2 { margin-bottom: .6rem; }
.pricing-lead { margin-bottom: 1.6rem; }
.pricing-intro .btn { margin-bottom: .9rem; }
.pricing-email { display: block; margin-bottom: 1.6rem; }
.pricing-disclaimer { font-size: .84rem; color: var(--ink-soft); max-width: 44ch; margin: 0; padding-top: 1.3rem; border-top: 1px solid var(--line); }

.pricing-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 1.2rem + 2.5vw, 3rem) clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.menu-group-title {
  color: #fff; font-size: 1.2rem; margin: 0 0 1.1rem; padding-bottom: .7rem;
  border-bottom: 1px solid rgba(215,179,106,.5);
}
.menu-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; margin-bottom: 1.35rem; }
.menu-item:last-child { margin-bottom: 0; }
.menu-name { font-family: var(--font-head); font-weight: 800; font-size: .96rem; color: #fff; }
.menu-dot { flex: 1 1 1.5rem; min-width: 1.5rem; align-self: center; border-bottom: 1px dotted rgba(255,255,255,.28); transform: translateY(-.2rem); }
.menu-price { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--honey); white-space: nowrap; }
.menu-desc { flex-basis: 100%; margin: .3rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); max-width: 42ch; }

/* =============================== FAQ =============================== */
.faq { background: var(--espresso); }
.faq-head { max-width: 62ch; margin-bottom: var(--head-gap); }
.faq-lead { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 56ch; }
.faq-list { max-width: 780px; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:first-child { border-top: 1px solid var(--line-soft); }
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem .15rem; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink);
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none;
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
  color: var(--brand); transition: transform .25s ease;
}
.faq-item[open] summary { color: var(--honey); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--honey); }
.faq-item summary:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; border-radius: 4px; }
.faq-item p { margin: 0 0 1.2rem; padding-right: 2.2rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.62; max-width: 64ch; }

/* ======================= CONTACT + INQUIRY ======================= */
.contact { background: #15191F; color: #fff; }
.contact-head { max-width: 60ch; margin-bottom: var(--head-gap); }
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap); align-items: start; }

.inquiry-form {
  padding: var(--panel-pad);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-top: var(--accent-bar) solid var(--brand); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label { display: block; font-family: var(--font-head); font-weight: 700; font-size: .88rem; margin-bottom: .4rem; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; color: var(--ink);
  padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #20252D;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--honey) 50%), linear-gradient(135deg, var(--honey) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(215,179,106,.24); background: #252B35; }
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: #F1998E; background: #2A2022; }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #A2A9B4; opacity: 1; }
.form-trust {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: .9rem 0 0; font-family: var(--font-head); font-weight: 700;
  font-size: .85rem; color: var(--honey);
}
.form-trust .ic { width: 1.05rem; height: 1.05rem; }
.form-status { min-height: 1.35em; margin: .75rem 0 0; color: var(--honey); font-size: .86rem; font-weight: 700; text-align: center; }
.form-note { font-size: .82rem; color: var(--ink-soft); text-align: center; margin: .9rem 0 0; }
.btn:disabled { cursor: wait; opacity: .78; transform: none; }
.hp { position: absolute; left: -9999px; }

.contact-aside {
  padding: var(--panel-pad);
  background: var(--panel-deep); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1.6rem;
}
.aside-block h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .8rem; }
.avail-list { list-style: none; padding: 0; margin: 0; }
.avail-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.avail-list li:last-child { border-bottom: 0; }
.avail-day { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--ink); }
.avail-time { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--honey); white-space: nowrap; }
.avail-appt { color: var(--ink-soft); font-style: italic; font-weight: 600; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .ic { width: 1.2rem; height: 1.2rem; color: var(--honey); }
.contact-list li a { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.contact-list li a:hover { color: var(--honey); }

.aside-place { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.place-marker {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.5rem 1rem; border-radius: var(--radius-sm); text-align: center;
  background:
    radial-gradient(120% 90% at 50% 25%, rgba(215,179,106,.12), transparent 60%),
    linear-gradient(180deg, #2A313C, #191E25);
  border: 1px solid var(--line);
}
.place-marker .ic { width: 2.2rem; height: 2.2rem; color: var(--honey); margin-bottom: .25rem; }
.place-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
.place-sub { font-size: .82rem; letter-spacing: .03em; color: var(--ink-soft); }
.place-map {
  width: 100%; height: 220px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-top: 1rem;
  filter: saturate(.82) contrast(.96);
}
.place-note { font-size: .9rem; color: var(--ink-soft); margin: 1rem 0; max-width: 40ch; }
.place-btn { width: 100%; }
.aside-pay { font-size: .88rem; color: var(--ink-soft); padding: .85rem 1rem; margin: 0; background: rgba(215,179,106,.1); border: 1px solid rgba(215,179,106,.18); border-radius: var(--radius-sm); }

/* ============================= FOOTER ============================= */
.site-footer { background: var(--espresso); color: #EFE7D9; padding: var(--space-7) 0 var(--space-6); border-top: 1px solid var(--line); }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 2rem; align-items: start; }
.footer-brand { display: flex; align-items: center; gap: .85rem; }
.footer-brand strong { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; display: block; color: #fff; letter-spacing: 0; }
.footer-brand span { font-size: .82rem; color: var(--ink-soft); }
.footer-nav { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.footer-nav a { font-family: var(--font-head); color: #EFE7D9; font-weight: 700; font-size: .9rem; }
.footer-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.footer-social { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--font-head); font-weight: 800; font-size: .9rem; }
.footer-social a { color: #EFE7D9; }
.footer-social a:hover { color: var(--honey); text-decoration: none; }
.footer-connect .btn { padding: .56rem 1.15rem; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; margin-top: var(--space-6); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.footer-legal p { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.footer-legal .muted { color: #AFA698; max-width: 68ch; }

/* ============================= MOTION ============================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-rail, .hero-main > * { opacity: 0; transform: translateY(20px); animation: heroIn .85s cubic-bezier(.16,1,.3,1) forwards; }
  .hero-eyebrow { animation-delay: .08s; }
  .hero-title { animation-delay: .18s; }
  .hero-sub { animation-delay: .30s; }
  .hero-actions { animation-delay: .42s; }
  .hero-title .ht-last::after { transform: scaleX(0); animation: ruleIn .7s cubic-bezier(.16,1,.3,1) .7s forwards; }
  .hero-bg { animation: heroZoom 14s ease-out forwards; }
}
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes ruleIn { to { transform: scaleX(1); } }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }

/* Mobile-only sticky inquiry CTA */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta {
    display: flex; gap: .6rem; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: .7rem clamp(.9rem, 4vw, 1.2rem);
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(16,19,25,.94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    transition: transform .3s ease;
  }
  .mobile-cta .btn { flex: 1; padding-block: .68rem; }
  .mobile-cta .btn-ghost { flex: 0 0 auto; }
  .mobile-cta--hidden { transform: translateY(130%); }
  .contact { padding-bottom: calc(var(--section-pad) + 3.5rem); }
}

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1040px) {
  .nav { gap: 1.1rem; }
}
@media (max-width: 900px) {
  .site-header { background: rgba(23,27,34,.96); backdrop-filter: blur(12px); border-bottom-color: var(--line); box-shadow: 0 4px 18px rgba(0,0,0,.28); }
  .site-header::before { opacity: 0; }
  .nav {
    position: fixed; inset: calc(var(--header-h) + var(--demo-banner-h, 0px)) 0 auto 0; flex-direction: column; gap: 0;
    background: var(--espresso); border-bottom: 1px solid var(--line); padding: .5rem 1.2rem 1.2rem;
    visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-1rem); box-shadow: var(--shadow);
    transition: transform .3s ease, opacity .2s ease, visibility 0s linear .3s;
  }
  .nav.open {
    visibility: visible; opacity: 1; pointer-events: auto;
    transform: translateY(0); transition-delay: 0s;
  }
  .nav a { color: var(--ink); width: 100%; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .nav a:not(.nav-cta)::after { display: none; }
  .nav-cta, .nav a.nav-cta { margin: .8rem 0 0; width: 100%; color: #14171D; }
  .nav-toggle { display: flex; }

  .about-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-portrait { max-width: 420px; }
  .pricing-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .pricing-intro { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 1.6rem; }
  .footer-brand { justify-content: center; }
  .footer-nav { justify-content: center; }
  .footer-connect { align-items: center; }
  .footer-legal { justify-content: center; text-align: center; }
}
@media (max-width: 860px) {
  /* hero rail collapses to a horizontal strip above the headline */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-rail {
    flex-direction: row; align-items: center; justify-content: space-between;
    justify-self: stretch;
    min-height: 0; border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0 0 1rem; margin-bottom: 1.4rem;
  }
  .hero-rail-label { writing-mode: horizontal-tb; transform: none; }
  /* work grid becomes a single editorial run; placard captions flow below */
  .work-wall { grid-template-columns: 1fr; gap: 2.75rem; }
  .work-col { margin-top: 0 !important; }
  .work-col-eyebrow { margin-top: .5rem; }
  /* services rows stack; keep the image above the copy in a natural order */
  .svc-row, .svc-row--rev { grid-template-columns: 1fr; gap: 1.25rem; }
  .svc-row--rev .svc-media { order: 0; }
  .svc-media { aspect-ratio: 16 / 10; max-height: 60vh; }
  .svc-statement { grid-template-columns: 1fr; text-align: left; }
  .pricing-menu { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 1.5rem, var(--maxw)); }
  .hero-actions .btn { flex: 1 1 100%; white-space: normal; }
  .field-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .nav a:not(.nav-cta)::after { transition: none; }
  .site-header, .site-header::before, .header-inner { transition: none; }
  .work-item img, .svc-media img { transition: none; }
  .work-item:hover img, .svc-row:hover .svc-media img { transform: none; }
  .svc-book .ic { transition: none; }
  .svc-book:hover .ic { transform: none; }
  .faq-item summary::after { transition: none; }
  .testimonial-dots button { transition: none; }
  .work-wall .work-col { opacity: 1; transform: none; transition: none; }
  .hero-bg { transform: scale(1.02); }
  .mobile-cta { transition: none; }
}