/* Studio FB USA — global stylesheet.
   Paste into Divi 5 > Theme Options > Custom CSS, or (better) enqueue from a
   child theme. Every code module below depends on this file being present.
   GENERATED from studio-fb-usa/index.html — edit there, then rerun
   tools/build-modules.py. */

/* ==========================================================================
   Studio FB USA — Design tokens
   Single source of truth. Mirrored into Divi 5 › Design System (see
   docs/divi5-build-spec.md). Every code module inherits from these vars,
   so the site stays consistent whether a section is a native Divi module
   or a code module.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Two colours, by the owner's decision (2026-09-07): Ink #1A1A1A and
     Paper #F4F1EA. Nothing else. Every intermediate tone — secondary text,
     hairlines, overlays, the second light surface — is one of the two at an
     alpha, never a third colour. The former terracotta accent is gone: what
     needed an accent is now solid Ink on Paper, or the inverse.
     Mirrored in Divi 5 > Design System (global colours "Ink", "Paper", …).
     Ink on Paper measures 15.4:1 — every pairing below is AA (>= 4.5:1). */
  --ink:        #1A1A1A;   /* text, buttons, dark surfaces, borders */
  --ink-soft:   #1A1A1A;   /* raised dark surface — same Ink; separate with a hairline */
  --bone:       #F4F1EA;   /* Paper — page background and the contrast colour on Ink */
  --bone-deep:  rgba(26, 26, 26, 0.045);  /* second light surface: Ink at 4.5% over Paper */
  --clay:       #1A1A1A;   /* legacy name kept so nothing breaks: accent surface -> Ink */
  --clay-deep:  #1A1A1A;   /* legacy: accent text on light -> Ink */
  --clay-light: #F4F1EA;   /* legacy: accent on dark grounds -> Paper */
  --muted:      rgba(26, 26, 26, 0.66);     /* secondary text on light (5.3:1 on Paper) */
  --muted-dark: rgba(244, 241, 234, 0.68);  /* secondary text on dark (7.7:1 on Ink) */
  --line:       rgba(26, 26, 26, 0.18);
  --line-dark:  rgba(244, 241, 234, 0.22);

  /* --- Type --------------------------------------------------------------
     Fraunces: high-contrast editorial serif — the gallery/print voice.
     Inter: neutral grotesk for UI and body — gets out of the way. */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid scale — clamp() so it breathes without breakpoint churn */
  --t-hero:  clamp(2.75rem, 7.2vw, 6.5rem);
  --t-h2:    clamp(2rem, 4.4vw, 3.75rem);
  --t-h3:    clamp(1.35rem, 2vw, 1.75rem);
  --t-lead:  clamp(1.05rem, 1.35vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* --- Space -------------------------------------------------------------- */
  --gap:        1.5rem;
  --section-y:  clamp(5rem, 10vw, 9.5rem);
  --shell:      1280px;   /* standard content width */
  --shell-wide: 1600px;   /* gallery / full-bleed content */
  --shell-text: 62ch;     /* readable measure */

  /* --- Form -------------------------------------------------------------- */
  --radius:     2px;      /* near-square: print/gallery feel, not app feel */
  --radius-pill: 999px;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur:        0.6s;
}

/* Reduced motion is respected everywhere reveals are used. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== Components ===== */
/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.shell      { width: 100%; max-width: var(--shell);      margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); }
.shell--wide{ max-width: var(--shell-wide); }
.section    { padding-block: var(--section-y); }
.measure    { max-width: var(--shell-text); }

/* Small-caps label used sparingly — a motif, not an every-section eyebrow */
.label {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}
.label--dark { color: var(--muted-dark); }

/* --- Photo placeholders --------------------------------------------------
   Renders on its own so the layout can be reviewed before real photos exist.
   To go live: replace the <div class="ph"> with <img> at the same ratio. */
.ph {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(26,26,26,.045) 0 2px, transparent 2px 9px),
    var(--bone-deep);
  border: 1px solid var(--line);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.ph::after {
  content: attr(data-shot);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: var(--muted);
  padding: .7rem .8rem;
  line-height: 1.35;
}
.ph:has(img) { background: none; border: 0; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--dark { background: repeating-linear-gradient(135deg, rgba(244,241,234,.05) 0 2px, transparent 2px 9px), var(--ink-soft); border-color: var(--line-dark); }
.ph--dark::after { color: var(--muted-dark); }
.r-portrait { aspect-ratio: 4 / 5; }
.r-tall     { aspect-ratio: 3 / 4.6; }
.r-square   { aspect-ratio: 1 / 1; }
.r-land     { aspect-ratio: 3 / 2; }
.r-wide     { aspect-ratio: 16 / 9; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: var(--t-small); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1.05rem 2rem; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--bone); color: var(--ink); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn--onDark { border-color: var(--line-dark); color: var(--bone); }
.btn--onDark:hover, .btn--onDark:focus-visible { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* Quiet text link with an animated rule — the secondary action everywhere */
.tlink {
  display: inline-block; font-size: var(--t-small); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: .3rem; border-bottom: 1px solid currentColor;
  opacity: .82; transition: opacity var(--dur) var(--ease);
}
.tlink:hover, .tlink:focus-visible { opacity: 1; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* --- Small utilities -----------------------------------------------------
   These exist so the markup carries no inline style attributes: Divi rejects
   inline styles in code modules without an explicit override, and keeping the
   values here means a spacing change is one edit rather than a hunt through
   the HTML. */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.lead-muted { margin-top: 1.5rem; color: var(--muted); }
.btn--block { justify-content: center; }
.arc__cta { margin-top: clamp(3rem, 6vw, 4.5rem); display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.arc__cta p { color: var(--muted); font-size: var(--t-small); margin: 0; }
.foot__blurb { font-size: var(--t-small); max-width: 34ch; }
.foot__nap { font-size: var(--t-small); margin-top: 1rem; }

/* --- Scroll reveal ------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   NAV — transparent over the hero, solid once you scroll past it
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { background: rgba(244,241,234,.94); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.15rem; }
.brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.01em; color: var(--bone); transition: color var(--dur) var(--ease); }
.brand b { font-weight: 500; }
.nav.is-stuck .brand { color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: 2.1rem; }
.nav__links a { font-size: var(--t-small); color: var(--bone); opacity: .88; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav__links a:hover { opacity: 1; }
.nav.is-stuck .nav__links a { color: var(--ink); }
.nav .btn { padding: .75rem 1.4rem; }
.nav__toggle { display: none; background: none; border: 0; color: var(--bone); padding: .5rem; cursor: pointer; }
.nav.is-stuck .nav__toggle { color: var(--ink); }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 0; flex-direction: column; justify-content: center;
    background: var(--ink); gap: 1.75rem;
    transform: translateX(100%); transition: transform var(--dur) var(--ease);
  }
  .nav__links a, .nav.is-stuck .nav__links a { color: var(--bone); font-size: 1.4rem; font-family: var(--font-display); }
  .nav.is-open .nav__links { transform: none; }
  .nav.is-open .nav__toggle { color: var(--bone); position: relative; z-index: 2; }
}

/* ==========================================================================
   HERO — full-bleed image, text sitting in the lower third.
   One primary action; the portfolio is a quiet link, not a second button.
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media .ph { height: 100%; border: 0; align-items: flex-end; }
.hero__media .ph::after {
  /* Mockup-only note. Delete this rule together with the placeholder when the
     real <img> goes in. */
  position: absolute; left: 0; bottom: 0; max-width: 46ch;
  padding: .8rem 1rem; opacity: .45;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,.62) 0%, rgba(26,26,26,.34) 30%, rgba(26,26,26,.88) 100%);
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3rem, 7vh, 5.5rem); padding-top: 9rem; color: var(--bone); }
.hero h1 { font-size: var(--t-hero); color: var(--bone); max-width: 20ch; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--clay-light); }
.hero__sub { margin-top: 1.6rem; font-size: var(--t-lead); color: rgba(244,241,234,.9); max-width: 46ch; }
.hero__cta { margin-top: 2.4rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero__scroll { margin-top: 3rem; display: flex; align-items: center; gap: .75rem; color: rgba(244,241,234,.6); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; }
.hero__scroll span { width: 46px; height: 1px; background: currentColor; }
@media (max-width: 780px) { .hero__media .ph::after { display: none; } }

/* ==========================================================================
   CREDENCIAL STRIP — a hairline row, not the usual big stats band
   ========================================================================== */
.creds { border-bottom: 1px solid var(--line); }
.creds__in { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 4.5rem); padding-block: 1.6rem; align-items: center; }
.creds__item { display: flex; align-items: center; gap: .6rem; font-size: var(--t-small); color: var(--muted); }
.creds__item b { color: var(--ink); font-weight: 500; }
.stars { color: var(--clay-deep); letter-spacing: .12em; font-size: .8rem; }

/* ==========================================================================
   TIMELINE — the signature section.
   Maternity → newborn → milestone → first birthday is one 18-month journey,
   and parents genuinely don't know when to book each one. Selling the arc
   (rather than a flat service grid) is both the conversion device and the
   internal-link hub for the service pages.
   ========================================================================== */
.arc { background: var(--bone-deep); }
.arc__head { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.arc__head h2 { font-size: var(--t-h2); max-width: 16ch; }
.arc__head p { color: var(--muted); }
.arc__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 2rem); }
.stage { position: relative; display: flex; flex-direction: column; }
/* The connecting rule that makes it read as one timeline, not four cards */
.stage::before {
  content: ""; position: absolute; top: -1.9rem; left: 0; right: 0; height: 1px; background: var(--line);
}
.stage::after {
  content: ""; position: absolute; top: -1.9rem; left: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--clay); transform: translate(0, -4px);
}
.stage:last-child::before { right: auto; width: 9px; }
.stage__when { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--clay-deep); margin: 1.4rem 0 .7rem; font-weight: 500; }
.stage h3 { font-size: var(--t-h3); margin-bottom: .55rem; }
.stage p { font-size: var(--t-small); color: var(--muted); }
.stage .ph { order: -1; }
/* Alternating vertical offset keeps the row from reading as a flat grid */
.stage:nth-child(even) { transform: translateY(clamp(1.5rem, 3vw, 3rem)); }

@media (max-width: 900px) {
  .arc__head { grid-template-columns: 1fr; }
  .arc__rail { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.25rem; }
  .stage:nth-child(even) { transform: none; }
  .stage::before, .stage::after { display: none; }
}
@media (max-width: 560px) { .arc__rail { grid-template-columns: 1fr; } }

/* ==========================================================================
   PORTFOLIO — the work is the product, so it gets the most room on the page.
   Editorial masonry, deliberately uneven, near-full-bleed.
   ========================================================================== */
.work { background: var(--ink); color: var(--bone); }
.work h2 { font-size: var(--t-h2); color: var(--bone); max-width: 14ch; }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work__filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  font-size: var(--t-small); letter-spacing: .04em; padding: .55rem 1.15rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius-pill);
  color: rgba(244,241,234,.75); background: none; cursor: pointer; font-family: inherit;
  transition: all var(--dur) var(--ease);
}
.chip:hover { color: var(--bone); border-color: rgba(244,241,234,.45); }
.chip[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(.6rem, 1.2vw, 1.1rem);
}
.grid figure { margin: 0; position: relative; overflow: hidden; }
.grid .ph { transition: transform 1.2s var(--ease); }
.grid figure:hover .ph { transform: scale(1.035); }
.grid figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 1rem 1.1rem;
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
  background: linear-gradient(180deg, transparent, rgba(26,26,26,.75));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.grid figure:hover figcaption { opacity: 1; }
.g-5 { grid-column: span 5; } .g-7 { grid-column: span 7; }
.g-4 { grid-column: span 4; } .g-8 { grid-column: span 8; }
.g-6 { grid-column: span 6; } .g-3 { grid-column: span 3; }
.work__more { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
@media (max-width: 780px) {
  .g-5, .g-7, .g-4, .g-8, .g-3 { grid-column: span 6; }
  .g-6 { grid-column: span 12; }
}
/* On a phone the work is the product — give every frame the full width
   rather than shrinking it into a 170px thumbnail. */
@media (max-width: 560px) {
  .g-5, .g-7, .g-4, .g-8, .g-3, .g-6 { grid-column: span 12; }
  .grid figcaption { opacity: 1; }
}

/* ==========================================================================
   EXPERIENCE — editorial, asymmetric, image bleeding past the text column.
   Three beats stacked, not a six-card "our standards" grid.
   ========================================================================== */
.exp__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.exp__head h2 { font-size: var(--t-h2); max-width: 18ch; }
.beat { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.beat + .beat { margin-top: clamp(3.5rem, 8vw, 7rem); }
.beats > .beat:nth-child(even) .beat__media { grid-column: 6 / span 7; order: 2; }
.beats > .beat:nth-child(even) .beat__body  { grid-column: 1 / span 4; order: 1; }
.beat__media { grid-column: 1 / span 7; }
.beat__body  { grid-column: 8 / span 5; }
/* Reverse every other beat — see .beats wrapper below */
.beat h3 { font-size: var(--t-h3); margin-bottom: .9rem; }
.beat p { color: var(--muted); }
.beat__no { font-family: var(--font-display); font-size: 3.2rem; color: var(--clay); opacity: .28; line-height: 1; margin-bottom: .5rem; }
@media (max-width: 860px) {
  .beat, .beats > .beat:nth-child(even) { grid-template-columns: 1fr; }
  .beat__media, .beat__body, .beats > .beat:nth-child(even) .beat__media, .beats > .beat:nth-child(even) .beat__body { grid-column: 1 / -1; order: 0; }
}

/* ==========================================================================
   HEADSHOTS — a different buyer (books alone, needs it fast, highest CPC
   term on the account). Given its own inverted lane so it reads as a
   separate door rather than one more item in the family-photo list.
   ========================================================================== */
.pro { background: var(--ink-soft); color: var(--bone); }
.pro__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.pro h2 { font-size: var(--t-h2); color: var(--bone); max-width: 13ch; }
.pro p { color: var(--muted-dark); }
.pro__facts { list-style: none; margin: 2rem 0 2.4rem; padding: 0; }
.pro__facts li { display: flex; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--line-dark); font-size: var(--t-small); }
.pro__facts li:last-child { border-bottom: 1px solid var(--line-dark); }
.pro__facts b { color: var(--bone); font-weight: 500; min-width: 8.5rem; }
.pro__facts span { color: var(--muted-dark); }
.pro__stack { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1.2vw, 1rem); }
.pro__stack .ph:nth-child(1) { transform: translateY(-1.5rem); }
.pro__stack .ph:nth-child(4) { transform: translateY(-1.5rem); }
@media (max-width: 860px) {
  .pro__in { grid-template-columns: 1fr; }
  .pro__stack .ph { transform: none !important; }
}

/* ==========================================================================
   WEDDINGS — the studio's highest-ticket line and a completely different
   buyer from the baby work, so it gets its own treatment rather than a card
   in a grid: one cinematic frame with the copy sitting on top of its lower
   edge. Deliberately unlike the beats and the headshot stack, so the eye
   registers a new chapter rather than another row.
   ========================================================================== */
.wed { background: var(--bone-deep); }
.wed__frame { position: relative; }
.wed__frame .ph { aspect-ratio: 21 / 9; }
.wed__card {
  position: relative; z-index: 2;
  background: var(--bone);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  max-width: 52ch;
  margin-top: clamp(-7rem, -8vw, -3rem);
  margin-left: clamp(0rem, 4vw, 4.5rem);
}
.wed__card h2 { font-size: var(--t-h2); max-width: 15ch; }
.wed__card p { color: var(--muted); margin-top: 1.25rem; }
.wed__meta { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.75rem 0 2rem; }
.wed__meta div { font-size: var(--t-small); }
.wed__meta b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--clay-deep); }
.wed__meta span { color: var(--muted); }
@media (max-width: 760px) {
  .wed__frame .ph { aspect-ratio: 4 / 3; }
  .wed__card { margin-top: 0; margin-left: 0; max-width: none; }
}

/* ==========================================================================
   REVIEWS — REMOVED, ON PURPOSE.
   The design called for three pull-quotes here. Studio FB USA has no Google
   Business Profile and no discoverable reviews anywhere (checked: Google,
   the Meta Ad Library, the live site, the Instagram profile), so every quote
   would have been fabricated. Inventing testimonials is an FTC exposure and
   destroys exactly the trust this page is built to earn.
   Put the section back — the `.says` / `.quote` styles are in git history at
   the commit that removed them — the day real reviews exist. Until then the
   page carries no social proof at all, which is honest, and getting that
   profile live is the first task in docs/seo-brief.md §7.
   ========================================================================== */

/* ==========================================================================
   BOOK — conversion + the local-SEO payload (NAP, hours, map, service area)
   ========================================================================== */
.book { background: var(--ink); color: var(--bone); }
.book__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
.book h2 { font-size: var(--t-h2); color: var(--bone); max-width: 12ch; }
.book__lead { color: var(--muted-dark); margin-top: 1.4rem; max-width: 40ch; }
.nap { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.nap li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line-dark); font-size: var(--t-small); }
.nap li:last-child { border-bottom: 1px solid var(--line-dark); }
.nap dt, .nap .k { color: var(--muted-dark); letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-micro); padding-top: .18rem; }
.nap a { border-bottom: 1px solid var(--line-dark); }
.nap a:hover { border-color: var(--bone); }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label { display: block; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius);
  color: var(--bone); font-family: inherit; font-size: var(--t-body); padding: .9rem 1rem;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--clay-light); outline: none; }
.field select option { background: var(--ink); color: var(--bone); }
.field textarea { resize: vertical; min-height: 7rem; }
.form__note { font-size: var(--t-micro); color: var(--muted-dark); }
@media (max-width: 860px) { .book__in, .form__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--ink); color: var(--muted-dark); border-top: 1px solid var(--line-dark); }
.foot__in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem); }
.foot h4 { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--bone); margin: 0 0 1.1rem; font-weight: 500; font-family: var(--font-body); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; font-size: var(--t-small); }
.foot a:hover { color: var(--bone); }
.foot__brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--bone); margin-bottom: 1rem; }
.foot__bar { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 1.5rem; border-top: 1px solid var(--line-dark); font-size: var(--t-micro); }
.foot__lang { display: flex; gap: 1.25rem; }
@media (max-width: 860px) { .foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__in { grid-template-columns: 1fr; } }

/* Sticky mobile bar — the highest-intent actions always reachable.
   WhatsApp earns its slot: the studio's advertising has historically driven
   almost entirely to conversations rather than to the site, so it is the
   channel these visitors already expect to use. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  grid-template-columns: repeat(3, 1fr); background: var(--ink); border-top: 1px solid var(--line-dark);
}
.callbar a { padding: 1rem .5rem; text-align: center; font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); font-weight: 500; }
.callbar a + a { border-left: 1px solid var(--line-dark); }
.callbar a:last-child { background: var(--bone); color: var(--ink); border-left: 0; }
@media (max-width: 780px) { .callbar { display: grid; } body { padding-bottom: 3.5rem; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--bone); color: var(--ink); padding: .8rem 1.2rem; }