/* Food Feed Studio.

   Reference: squarespace.com, supplied by Niket after five rejected versions.
   What that page actually does, and what every previous attempt here got wrong:

     the PHOTOGRAPH is the design, not the layout
     composition is CENTRED, not left-aligned editorial
     type is a clean neutral sans that gets out of the way
     one plain rectangular button, no ornament

   Every earlier version made the layout the idea — a menu card, a tile board,
   a report — and dressed it in a character typeface. That is why they read as
   design-y rather than expensive. Here the images carry it and everything else
   stays quiet.

   Motion: a slow pan on the hero. A static hero has lost its momentum by 2026;
   the fix is atmosphere, not effects, and it costs one CSS keyframe. */

/* Self-hosted fonts. Google's CDN cost mobile a render-blocking connection to
   two extra origins before first paint (Lighthouse mobile: FCP 3.1s). Geist is
   a variable font, so one file per subset covers weights 400-600. latin-ext is
   not optional: the rupee sign (U+20B9) lives there, and every price on the
   site uses it. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fragment-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fragment-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --orange: #f16614;
  --ink: #111;
  --white: #fff;
  --muted: #6b6b6b;
  --line: #e4e2df;
  --dark: #0e0e0f;

  /* Geist: a modern neo-grotesque with tighter apertures and a colder, more
     engineered feel than Instrument Sans, which was a touch soft and generic
     at display size. Legible at 96px, invisible at 16px — the reference uses a
     custom face for exactly that reason. Not a character typeface: five
     versions proved those read as decoration here. */
  --sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Fragment Mono', ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: var(--white); padding: 12px 24px; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap { width: min(1240px, 100% - 2 * var(--pad)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.centre { text-align: center; }
.centre p { margin-inline: auto; }

/* ------------------------------------------------------------------ type ---
   Tight tracking at display size, normal below. The reference's headline is
   plain — no italics, no colour, no second face. Its power is scale. */
.h1, .h2, .h3 { font-family: var(--sans); font-weight: 500; margin: 0 0 1rem; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6rem); }
.h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); }
.h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); letter-spacing: -.02em; }

.lede { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--muted); max-width: 56ch; margin: 0 0 2rem; }
p { max-width: 62ch; }
.k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.val { color: var(--orange); }

/* ---------------------------------------------------------------- header ---
   Logo left, links centre, one filled button right. Exactly the reference's
   arrangement, because it is the arrangement that gets out of the way. */
.site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 1.25rem 0; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); }
.brand__mark { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); flex: none; }
.brand__name { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }
.nav { display: flex; align-items: center; gap: clamp(.75rem, 2.4vw, 2.25rem); }
.nav__link { text-decoration: none; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.86); }
.nav__link:hover, .nav__link.is-here { color: var(--white); }
.nav__link--cta { background: var(--white); color: var(--ink); padding: .7rem 1.35rem; font-weight: 600; }
.nav__link--cta:hover { background: var(--orange); color: var(--white); }
/* Pages without a dark hero need dark header type. */
.is-light .site-head { position: static; border-bottom: 1px solid var(--line); }
.is-light .brand { color: var(--ink); }
.is-light .nav__link { color: var(--muted); }
.is-light .nav__link:hover, .is-light .nav__link.is-here { color: var(--ink); }
.is-light .nav__link--cta { background: var(--ink); color: var(--white); }
@media (max-width: 700px) { .nav__link:not(.nav__link--cta) { display: none; } }

/* --------------------------------------------------------------- buttons ---
   One plain rectangle. The reference has exactly one button in its hero and it
   is a white box with a word in it — no marker, no dial, no wipe. Five
   versions of inventing a control taught me the control is not the idea. */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .9375rem;
  padding: 1.05rem 2.25rem; background: var(--white); color: var(--ink);
  border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--orange); color: var(--white); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: var(--orange); }
.btn--line { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--line:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.centre .actions { justify-content: center; }

/* ------------------------------------------------------------------ hero ---
   Full bleed, dark, the photograph doing the work. The scrim is a gradient
   rather than a flat overlay so the image keeps its depth instead of going
   grey, and the type stays legible over the busiest part of the frame. */
.hero { position: relative; min-height: min(92vh, 900px); display: grid; place-items: center; overflow: hidden; background: var(--dark); color: var(--white); text-align: center; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: drift 26s ease-in-out infinite alternate; }
/* The slow pan. A static hero has lost momentum before the first scroll; this
   is atmosphere, not an effect, and it is one keyframe. */
@keyframes drift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; transform: scale(1.06); } }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.42) 38%, rgba(8,8,10,.78) 100%); }
.hero__inner { position: relative; padding: 8rem var(--pad) 5rem; width: min(940px, 100%); }
.hero__h { font-size: clamp(2.75rem, 1rem + 7.2vw, 6.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 0 0 1.5rem; }
.hero__sub { font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); color: rgba(255,255,255,.86); max-width: 40ch; margin: 0 auto 2.25rem; }
.hero__note { margin: 1.25rem auto 0; font-size: .875rem; color: rgba(255,255,255,.6); }

/* ------------------------------------------------------------- showcase ---
   The reference puts real product screenshots under the hero, overlapping the
   fold. Ours are the client sites and dishes — the work, not a mock-up. */
.showcase { margin-top: -6rem; position: relative; z-index: 2; }
.showcase__row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .showcase__row { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.showcase .plate { margin: 0; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.showcase .plate:nth-child(2) { transform: translateY(-2rem); }
@media (max-width: 759px) { .showcase { margin-top: -3rem; } .showcase .plate:nth-child(2) { transform: none; } }

/* ----------------------------------------------------------------- split ---
   Alternating image / copy bands. Image-led, centred copy, generous space. */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--flip .split__media { order: 2; } }
.split__copy { max-width: 46ch; }

/* ------------------------------------------------------------------ band ---
   One dark band with a photograph behind it, for the proof section. */
.band { position: relative; color: var(--white); background: var(--dark); overflow: hidden; }
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.band .wrap { position: relative; }
.band .lede { color: rgba(255,255,255,.8); }
.band .k { color: rgba(255,255,255,.6); }

/* ----------------------------------------------------------------- plate --- */
.plate { margin: 0; }
.plate img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.plate--pending { aspect-ratio: 4/3; border: 1px solid var(--line); display: grid; place-items: center; }
.plate__label, .exhibit { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .75rem 0 0; }

/* ---------------------------------------------------------------- ledger ---
   Services. Quiet rows, big names, price right. Kept from the report version
   because it reads cleanly and the price beside what gets measured is the one
   piece of substance no competitor publishes. */
.ledger { border-top: 1px solid var(--line); }
.row { display: grid; gap: .5rem; padding: 2rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
@media (min-width: 900px) { .row { grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: baseline; } }
.row:hover .row__name { color: var(--orange); }
.row__name { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 500; letter-spacing: -.03em; margin: 0 0 .25rem; transition: color .15s ease; }
.row__desc { margin: 0; color: var(--muted); }
.row__price { font-weight: 600; margin: 0 0 .25rem; }
.row__tracked { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- ticket --- */
.ticket { font-family: var(--mono); font-size: .75rem; line-height: 1.7; max-width: 330px; background: var(--white); color: var(--ink); padding: 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ticket__perf { display: none; }
.ticket__title { margin: 0; letter-spacing: .1em; text-transform: uppercase; }
.ticket__meta { margin: 2px 0 1rem; color: var(--muted); font-size: .625rem; letter-spacing: .06em; }
.ticket__lines { list-style: none; margin: 0; padding: 1rem 0; border-block: 1px dashed var(--line); }
.ticket__line { display: flex; justify-content: space-between; gap: 1rem; }
.ticket__label { color: var(--muted); }
.ticket__val { color: var(--orange); }
.ticket__foot { margin: 1rem 0 0; color: var(--muted); font-size: .625rem; }

/* ----------------------------------------------------------------- notes --- */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .notes { grid-template-columns: repeat(3, 1fr); } }
.notes b { display: block; font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -.035em; margin-bottom: .25rem; }
.notes li { color: var(--muted); font-size: .9375rem; }

/* ------------------------------------------------------------------ case --- */
.cases { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case__kind { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
.case__client { margin: 0 0 .5rem; }
.case__summary { font-weight: 600; margin: 0 0 .5rem; }
.case__body { color: var(--muted); font-size: .9375rem; margin: 0 0 1rem; }
.case__tags { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; font-size: .8125rem; }
.case__tags a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--orange); }

/* ------------------------------------------------------------------- faq --- */
.faq__item { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.faq__q { font-size: 1.1875rem; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.02em; }
.faq__a { margin: 0; color: var(--muted); }

/* --------------------------------------------------------------- related --- */
.rel__grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .rel__grid { grid-template-columns: repeat(3, 1fr); } }
.rel__card { display: block; text-decoration: none; padding: 1.75rem; background: #f7f6f4; }
.rel__card:hover { background: var(--ink); color: var(--white); }
.rel__course { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rel__card:hover .rel__course, .rel__card:hover .rel__blurb { color: rgba(255,255,255,.7); }
.rel__name { display: block; font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; margin: .4rem 0; }
.rel__blurb { display: block; color: var(--muted); font-size: .9375rem; }

/* ---------------------------------------------------------------- footer --- */
.site-foot { background: var(--dark); color: rgba(255,255,255,.72); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot__logo { font-weight: 600; font-size: 1.125rem; color: var(--white); margin: 0 0 .5rem; letter-spacing: -.02em; }
.foot__line { margin: 0 0 .35rem; font-size: .9375rem; }
.foot__muted { color: rgba(255,255,255,.5); font-size: .875rem; }
.foot__head { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0 0 .85rem; }
.foot__grid a { display: block; text-decoration: none; font-size: .9375rem; padding: .25rem 0; color: rgba(255,255,255,.72); }
.foot__grid a:hover { color: var(--white); }
.foot__legal { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.45); font-size: .8125rem; }

/* ---------------------------------------------------------------- reveal --- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* The showcase was overlapping into the buttons rather than under them. Give
   the hero room to finish its sentence before the work starts. */
.hero__inner { padding-bottom: clamp(7rem, 14vw, 11rem); }
.showcase { margin-top: clamp(-9rem, -8vw, -5rem); }

/* An outline button over photography is only legible where the photograph is
   dark, and this one is not reliably dark. Give it its own ground. */
.btn--line { background: rgba(10,10,12,.42); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.7); }

/* ------------------------------------------------------------- sections ---
   Proper sections, not a row of stat notes. Each is a heading, a sentence and
   a reason — the shape a marketing page actually needs. */
.cols { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 820px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } .cols--2 { grid-template-columns: repeat(2, 1fr); } }
.col__h { font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; margin: 0 0 .65rem; }
.col p { color: var(--muted); margin: 0; }
.col__n { font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; color: var(--orange); display: block; margin-bottom: 1rem; }

/* Numbered steps. The order carries information here — it is a sequence, so
   the numbers are content rather than decoration. */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: step; }
.step { display: grid; gap: .5rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .step { grid-template-columns: 4rem 1fr 1fr; gap: 2.5rem; align-items: baseline; } }
.step__n { font-family: var(--mono); font-size: .75rem; color: var(--orange); }
.step__h { font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; margin: 0; }
.step p { margin: 0; color: var(--muted); }

/* Interior page heroes: the homepage's first section, shorter. */
.hero--page { min-height: min(58vh, 560px); }
.hero--page .hero__inner { padding-block: 9rem 4rem; }
.hero--page .hero__h { font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem); }
.hero__k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); margin: 0 0 1.25rem; }

/* Alternate light section ground, so consecutive white sections separate. */
.section--tint { background: #f7f6f4; }

/* ===================================================================== *
   COLOUR. "Don't keep it plain white anywhere" — and that is right: twelve
   pages of white sections in a row is not restraint, it is absence. Sections
   alternate through four grounds so no two consecutive bands read the same
   and no page runs white end to end.
 * ===================================================================== */
.section--tint { background: #faf7f4; }
.section--dark { background: var(--dark); color: var(--white); }
.section--dark .lede, .section--dark .col p, .section--dark .step p { color: rgba(255,255,255,.72); }
.section--dark .k { color: rgba(255,255,255,.55); }
.section--dark .steps, .section--dark .step, .section--dark .ledger, .section--dark .row, .section--dark .faq__item { border-color: rgba(255,255,255,.16); }
.section--dark .row__desc, .section--dark .faq__a, .section--dark .case__body { color: rgba(255,255,255,.72); }
.section--orange { background: var(--orange); color: var(--white); }
.section--orange .lede, .section--orange .col p, .section--orange .step p { color: rgba(255,255,255,.92); }
.section--orange .k { color: rgba(255,255,255,.8); }
.section--orange .steps, .section--orange .step { border-color: rgba(255,255,255,.32); }
.section--orange .step__n, .section--orange .col__n { color: var(--white); }
.section--orange .btn { background: var(--ink); color: var(--white); }
.section--orange .btn:hover { background: var(--white); color: var(--ink); }

/* The studio mark, used as the mark rather than a plain orange disc. */
.brand__mark { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--orange); }

/* ------------------------------------------------------------- clients ---
   Real logos on a dark ground, so a white mark and a coloured mark can sit in
   one row without either disappearing. */
.clients { display: grid; gap: 1px; background: rgba(255,255,255,.14); border-block: 1px solid rgba(255,255,255,.14); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .clients { grid-template-columns: repeat(4, 1fr); } }
.client { background: var(--dark); padding: 2rem 1.5rem; display: grid; place-items: center; gap: .6rem; text-decoration: none; text-align: center; transition: background .18s ease; }
.client:hover { background: #1a1a1e; }
.client__logo { height: 44px; width: auto; max-width: 130px; object-fit: contain; }
.client__logo--invert { filter: brightness(0) invert(1); opacity: .9; }
.client__name { font-size: .9375rem; font-weight: 600; color: var(--white); }
.client__kind { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* Case entries get a ground and a logo instead of sitting on bare white. */
.case { background: #faf7f4; padding: 2rem; }
.section--dark .case { background: #17171a; }
.case__logo { height: 38px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 1.25rem; }
.case__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 1.25rem; }
.case__site { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); text-decoration: none; }

/* Cards get a ground too, so a related row is not three white rectangles. */
.rel__card { background: #faf7f4; }
.section--dark .rel__card { background: #17171a; color: var(--white); }
.section--dark .rel__card:hover { background: var(--orange); }

/* ===================================================================== *
   QA PASS — from Niket's screenshots, 2026-08-06.
 * ===================================================================== */

/* 1. SMALL TEXT WAS ROBOTIC.
   Fragment Mono was carrying every label, caption, price note and eyebrow, so
   "TRACKED: INDEXING, SPEED, SCHEMA" read as terminal output on a page selling
   restaurant marketing. Monospace now survives in exactly one place — the
   printed audit ticket — where a receipt genuinely is monospaced. Everything
   else is the sans, small, with letter-spacing doing the work instead. */
.k, .row__tracked, .plate__label, .exhibit, .client__kind, .case__kind,
.foot__head, .hero__k, .step__n, .col__n, .rel__course, .case__site, .client__name {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
.k, .hero__k { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--orange); }
.section--dark .k, .section--orange .k, .hero__k { color: rgba(255,255,255,.72); }
.row__tracked { font-size: .8125rem; color: var(--muted); }
.plate__label, .exhibit { font-size: .8125rem; color: var(--muted); }
.client__kind { font-size: .8125rem; color: rgba(255,255,255,.6); }
.case__kind { font-size: .8125rem; font-weight: 600; color: var(--orange); }
.foot__head { font-size: .8125rem; font-weight: 600; color: var(--orange); letter-spacing: .01em; text-transform: uppercase; }
.step__n, .col__n { font-size: 1rem; font-weight: 600; color: var(--orange); }
.rel__course { font-size: .8125rem; font-weight: 600; color: var(--orange); }
.case__site { font-size: .875rem; font-weight: 600; color: var(--orange); }

/* 2. CLIENT LOGOS WERE BROKEN.
   Inverting them turned YoGo Bowls' mark into a blank square and left Mamma
   Roti's dark logo invisible on a dark ground, while Samredal's stayed full
   colour — three different results in one row. Every mark now sits on its own
   white plate, which is what a logo wall does: the plate normalises light,
   dark and coloured marks without touching the artwork. */
.client { padding: 1.75rem 1.25rem; gap: .85rem; }
.client__logo, .client__logo--invert {
  filter: none; opacity: 1;
  background: var(--white); border-radius: 10px;
  padding: .7rem .9rem; height: 62px; max-width: 100%;
  box-sizing: content-box;
}
/* A client with no published logo gets a lettered plate rather than a gap, so
   the row stays even instead of one cell reading as a missing image. */
.client__initials {
  display: grid; place-items: center; height: 62px; min-width: 82px;
  background: var(--white); color: var(--ink); border-radius: 10px;
  padding: .7rem .9rem; font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em;
}

/* 3. NOTHING LOOKED CLICKABLE.
   The service rows were plain text on a flat ground with no cue at all — the
   only signal was a colour change on hover, which a visitor never discovers.
   They now carry an arrow, shift on hover and take a pointer. */
.row { cursor: pointer; position: relative; padding-inline: 1rem; margin-inline: -1rem; transition: background .16s ease; }
.row__main { display: flex; align-items: baseline; gap: .6rem; }
.row__arrow { color: var(--orange); font-size: 1.1em; transition: transform .18s ease; display: inline-block; }
.row:hover { background: rgba(241,102,20,.06); }
.row:hover .row__arrow { transform: translateX(5px); }
.section--dark .row:hover { background: rgba(255,255,255,.05); }

/* 4. TAP TARGETS WERE TOO SMALL.
   Measured on the built page: nav links 22px, every footer link 31px. The
   floor for a thumb is 44px, and this audience is overwhelmingly on a phone —
   a restaurant owner standing in a kitchen, which is the whole reason WhatsApp
   is the primary call to action. */
.nav__link { min-height: 44px; display: inline-flex; align-items: center; }
.nav__link--cta { padding: .7rem 1.35rem; }
.foot__grid a { min-height: 44px; display: flex; align-items: center; padding: 0; }
.case__tags a, .rel__card { min-height: 44px; display: flex; align-items: center; }
.rel__card { display: block; }          /* the card is already tall enough */

/* 5. MOBILE.
   The showcase pulled up under the hero at desktop widths and collided with
   the buttons on a narrow screen; the split band put a 330px ticket beside
   copy in a single column. Both need to stop being clever below 760px. */
@media (max-width: 760px) {
  .showcase { margin-top: 0; }
  .showcase__row { gap: .75rem; }
  .showcase .plate:nth-child(2) { transform: none; }
  .hero__inner { padding-bottom: 4rem; }
  .hero { min-height: auto; }
  .ticket { max-width: 100%; }
  .split { gap: 2rem; }
  .row { grid-template-columns: 1fr; }
  .clients { grid-template-columns: repeat(2, 1fr); }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
}

/* The hero image is scaled past 100% by the drift animation, so it must be
   clipped by its own frame — otherwise it widens the document and the whole
   page scrolls sideways on a phone. */
.hero, .hero__media, .band, .band__media { overflow: hidden; }
html, body { overflow-x: hidden; }
.brand { min-height: 44px; }

/* 6. THERE WAS NO NAVIGATION ON A PHONE.
   Verified at a real 390px viewport: `.nav__link:not(.nav__link--cta)` was set
   to display:none below 700px, so Menu, Work and About simply did not exist on
   mobile — the only route to them was scrolling to the footer. On a site whose
   audience is overwhelmingly on a phone that is not a compromise, it is a
   missing feature.

   Fixed without a hamburger: the brand WORD drops on small screens (the mark
   still carries it, and it links home), which frees exactly enough width for
   all four destinations to sit in one row. A toggle would mean JS, focus
   management and a trap to get wrong; four links fit. */
@media (max-width: 700px) {
  .nav__link:not(.nav__link--cta) { display: inline-flex; }
  .brand__name { display: none; }
  .site-head { padding: .6rem 0; }
  .nav { gap: .9rem; }
  .nav__link { font-size: .8125rem; }
  .nav__link--cta { padding: .6rem .85rem; font-size: .8125rem; }
}
@media (max-width: 380px) {
  .nav { gap: .65rem; }
  .nav__link { font-size: .75rem; }
}

/* ===================================================================== *
   USABILITY PASS — measured, not eyeballed.
 * ===================================================================== */

/* 7. ORANGE SMALL TEXT FAILED WCAG AA ON LIGHT GROUNDS.
   Measured by painting to a canvas, because computed style returns the colour
   function verbatim and comparing those strings gives a false pass:

     #f16614 on white  3.16:1   needs 4.5   FAIL
     #f16614 on tint   2.96:1   needs 4.5   FAIL
     #f16614 on dark   6.11:1               pass

   Every small label — section eyebrows, "Tracked:", case kinds, footer heads —
   was below standard on a light section. The brand colour is unchanged for
   fills, large type and anything on dark; small text on a light ground uses a
   darker step of the same hue: #bf4c04 measures 4.94:1 on white and 4.63:1 on
   the tint. Identity intact, text legible. */
:root { --orange-text: #bf4c04; }
.k, .case__kind, .foot__head, .step__n, .col__n, .rel__course, .case__site,
.row__price, .row__arrow, .ticket__val, .case__tags a { color: var(--orange-text); }
/* On dark and orange grounds the full brand orange already passes, and the
   darker step would muddy it. */
.section--dark .k, .section--dark .step__n, .section--dark .col__n,
.section--dark .rel__course, .section--dark .case__kind { color: var(--orange); }
.section--orange .k, .section--orange .step__n, .section--orange .col__n { color: rgba(255,255,255,.85); }
.foot__head { color: var(--orange); }        /* footer is dark: brand orange passes at 6.11:1 */
.hero__k { color: rgba(255,255,255,.85); }
.row:hover { background: rgba(191,76,4,.07); }

/* 8. A BRIGHT PHOTOGRAPH LEFT HERO TYPE UNREADABLE.
   The service photographs vary from a dark kitchen to a bright desk, and one
   fixed scrim cannot serve both — on /restaurant-websites/ the kicker sat on
   near-white laptop screen. The scrim is now stronger and the type carries a
   soft shadow, which costs nothing on the dark images and rescues the light
   one. Belt and braces on purpose: the alternative is auditing every future
   photograph by eye. */
.hero__scrim { background:
  linear-gradient(180deg, rgba(8,8,10,.78) 0%, rgba(8,8,10,.55) 40%, rgba(8,8,10,.85) 100%); }
.hero__h, .hero__sub, .hero__k, .hero__note { text-shadow: 0 1px 24px rgba(0,0,0,.55); }

/* 9. FOCUS WAS INVISIBLE ON DARK AND ORANGE GROUNDS.
   A 2px orange ring on an orange band is not a focus indicator. Keyboard users
   get a white ring with a dark halo, which reads on every ground the site has. */
:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(0,0,0,.55); }
.section--tint :focus-visible, body:not(.is-light) main > .section:not([class*="--"]) :focus-visible {
  outline-color: var(--ink); box-shadow: 0 0 0 6px rgba(255,255,255,.9);
}

/* ===================================================================== *
   SERVICES — sticky image, scrolling copy.
   The ledger was five text rows with an arrow: correct information, no
   presence, and nothing showing what any of it looks like. The image panel
   pins while the entries scroll past it and swaps as each one takes the
   viewport, so the section shows the work instead of listing it.
 * ===================================================================== */
.svc { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .svc { grid-template-columns: 0.95fr 1.05fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .svc__media { position: sticky; top: 6rem; }
}
.svc__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--dark); }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .55s ease, transform 1.2s ease; }
.svc__media img.is-on { opacity: 1; transform: scale(1); }
/* The index reads as a caption on the image, so the panel is never anonymous. */
.svc__badge { position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--orange); color: var(--white); font-weight: 600; font-size: .8125rem; padding: .75rem 1.15rem; }

.svc__list { display: grid; }
.svc__item { border-top: 1px solid var(--line); padding: clamp(2rem, 5vw, 3.25rem) 0; text-decoration: none; display: block; position: relative; }
.svc__item:last-child { border-bottom: 1px solid var(--line); }
.section--dark .svc__item { border-color: rgba(255,255,255,.16); }
.svc__n { font-size: .8125rem; font-weight: 600; color: var(--orange-text); }
.section--dark .svc__n { color: var(--orange); }
.svc__name { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; margin: .35rem 0 .5rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.svc__arrow { color: var(--orange-text); font-size: .8em; transition: transform .2s ease; display: inline-block; }
.svc__item:hover .svc__arrow { transform: translateX(6px); }
.svc__item:hover .svc__name { color: var(--orange-text); }
.svc__desc { color: var(--muted); margin: 0 0 1rem; max-width: 48ch; }
.section--dark .svc__desc { color: rgba(255,255,255,.72); }
.svc__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; }
.svc__price { font-weight: 600; color: var(--orange-text); }
.svc__tracked { font-size: .8125rem; color: var(--muted); }
/* On a phone the panel cannot pin, so each entry carries its own picture. */
.svc__inline { display: block; margin-bottom: 1.25rem; aspect-ratio: 16/10; object-fit: cover; width: 100%; }
@media (min-width: 900px) { .svc__inline { display: none; } .svc__media--mobile { display: none; } }
@media (max-width: 899px) { .svc__media { display: none; } }

/* ===================================================================== *
   HOW IT WORKS — a sequence, drawn.
   Four text rows on black read as a spreadsheet. The numbers are now the
   structure: oversized, with a rail that fills as the section is read, so the
   order is visible rather than merely stated.
 * ===================================================================== */
.flow { position: relative; display: grid; gap: 0; }
.flow__rail { position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.14); }
.flow__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--orange); transition: height .5s ease; }
.flow__step { position: relative; display: grid; gap: .5rem 2rem; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.75rem, 3.5vw, 2.75rem) 4.75rem; }
@media (min-width: 860px) { .flow__step { grid-template-columns: 1fr 1.15fr; align-items: baseline; } }
.flow__n {
  position: absolute; left: 0; top: clamp(1.5rem, 3.2vw, 2.4rem);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 1rem;
  background: var(--dark); color: rgba(255,255,255,.5);
  border: 2px solid rgba(255,255,255,.22); transition: all .35s ease;
}
.flow__step.is-on .flow__n { background: var(--orange); border-color: var(--orange); color: var(--white); }
.flow__h { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); font-weight: 500; letter-spacing: -.025em; margin: 0; }
.flow__step p { margin: 0; color: rgba(255,255,255,.72); }
@media (prefers-reduced-motion: reduce) { .flow__fill { transition: none; } .flow__n { transition: none; } }

/* ------------------------------------------------------------------ blog ---
   Answer-first layout: the summary sits in a marked box directly under the
   title, because that is the block an assistant lifts and a reader scans. */
.answer { background: #faf7f4; border-left: 4px solid var(--orange); padding: 1.5rem 1.75rem; margin: 0 0 2.5rem; }
.answer p { margin: 0; font-size: 1.125rem; max-width: 68ch; }
.answer .k { margin-bottom: .5rem; }
.post { max-width: 720px; }
.post h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 500; letter-spacing: -.025em; margin: 2.5rem 0 .75rem; }
.post p { margin: 0 0 1.25rem; color: #3d3d3b; }
.postlist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.postcard { display: grid; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
@media (min-width: 800px) { .postcard { grid-template-columns: 260px 1fr; align-items: start; } }
.postcard img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.postcard__date { font-size: .8125rem; color: var(--muted); margin: 0 0 .35rem; }
.postcard__h { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); font-weight: 500; letter-spacing: -.025em; margin: 0 0 .5rem; }
.postcard:hover .postcard__h { color: var(--orange-text); }
.postcard p { margin: 0; color: var(--muted); }

/* ===================================================================== *
   FIXES from "looks ugly" and "looks ugly 2", 2026-08-06.
 * ===================================================================== */

/* THE SHOWCASE STRIP WAS A MESS.
   Three images at different heights, the middle one nudged up by 2rem, each
   caption landing at a different vertical position, and the whole row half on
   the dark hero and half on white. The stagger was meant to feel casual and
   read as broken alignment instead — which is the correct verdict, because a
   visitor cannot tell a deliberate offset from a bug. */
.showcase { margin-top: 0; padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--white); }
.showcase__row { gap: clamp(.75rem, 1.5vw, 1.25rem); align-items: stretch; }
.showcase .plate { display: flex; flex-direction: column; }
.showcase .plate:nth-child(2) { transform: none; }
/* One ratio for all three, so they align top AND bottom and the captions sit
   on one line. 3:2 matches the source crops, so nothing is squeezed. */
.showcase .plate img { aspect-ratio: 3/2; width: 100%; object-fit: cover; }
.showcase .exhibit { margin-top: .65rem; }

/* THE SERVICE PANEL SHOWED THE WRONG PICTURE AND DID NOT FILL ITS COLUMN.
   The badge read 02/05 while entries 03 and 04 were on screen — with a
   -35%/-35% margin two entries qualify at once and the larger ratio won, which
   is not the same as the one being read. It now picks the entry nearest the
   middle of the viewport, in JS. The panel also stopped short of the column,
   leaving a slab of empty tint under a photograph. */
.svc__media { aspect-ratio: auto; height: min(76vh, 620px); }
.svc__media img { object-position: center; }
.svc__badge { font-size: .875rem; letter-spacing: .02em; }

/* The panel was 620px tall against ~540px wide, so every landscape photograph
   was cropped hard to portrait — the "cropped not proper" complaint. The frame
   now matches the source ratio, so nothing is cut to fit. */
.svc__media { height: auto; aspect-ratio: 4/3; }
.svc__inline { aspect-ratio: 4/3; }

/* THE CLIENT STRIP SHOULD NEVER HAVE BEEN BLACK.
   Logos are drawn for light backgrounds. Putting four of them on near-black is
   what forced the white plates, the inversion filter, and the row where one
   mark vanished, one turned into a blank square and one stayed full colour.
   On a light ground the artwork just works, and the plates come off. */
.clients {
  background: var(--line);            /* the 1px grid shows through as hairlines */
  border-block: 1px solid var(--line);
}
.client { background: var(--white); padding: 2.25rem 1.5rem; }
.client:hover { background: #faf7f4; }
.client__logo {
  background: none; border-radius: 0; padding: 0;
  height: 52px; max-width: 150px; filter: none; opacity: 1;
}
.client__initials { background: none; color: var(--ink); padding: 0; min-width: 0; font-size: 1.5rem; }
.client__name { color: var(--ink); }
.client__kind { color: var(--muted); }

/* THE SERVICES BLOCK WAS CONGESTED.
   Five entries, each with a name, a line of copy, a price and a tracked list,
   stacked at 2rem apart against a sticky panel — dense enough that nothing had
   room to be read. More air between entries, and the price and tracked line
   stop sharing a row so the eye has somewhere to rest. */
.svc__item { padding: clamp(2.75rem, 6vw, 4rem) 0; }
.svc__desc { margin-bottom: 1.5rem; }
.svc__meta { display: grid; gap: .3rem; }
.svc__price { font-size: 1.0625rem; }
.svc__tracked { font-size: .8125rem; }
@media (min-width: 900px) { .svc__media { top: 7rem; } }

/* With the stock strip gone the hero runs straight into the client wall, so it
   needs its own top margin rather than inheriting the strip's. */
.hero + .section { padding-top: clamp(4rem, 8vw, 6.5rem); }

/* ------------------------------------------------------------- marquee ---
   Four logos in a static row leaves most of the width empty and reads as "we
   have four clients". Moving, the same honest four read as a wall.

   The track holds four copies and translates by exactly one quarter, so copy
   two arrives where copy one started and the loop has no seam. The rule is
   (N-1)/N x track >= viewport; three copies satisfied a 1536px screen and
   would have torn on a 2560px one. Masked
   at both edges so logos fade rather than being guillotined by the viewport. */
.mq { overflow: hidden; padding-block: clamp(1.5rem, 3vw, 2.5rem); position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq__track { display: flex; width: max-content; animation: mq 42s linear infinite; }
@keyframes mq { to { transform: translateX(-25%); } }
.mq:hover .mq__track { animation-play-state: paused; }   /* let someone read one */

.mq__item {
  flex: none; width: clamp(210px, 24vw, 300px);
  display: grid; place-items: center; gap: .85rem;
  padding: 1.75rem clamp(1.25rem, 2.5vw, 2.5rem);
  text-decoration: none; text-align: center;
  border-right: 1px solid var(--line);
}
.mq__logo { height: 56px; width: auto; max-width: 170px; object-fit: contain; transition: transform .3s ease; }
.mq__item:hover .mq__logo { transform: scale(1.06); }
/* A client with no published logo gets its name set properly rather than a gap. */
.mq__word { font-size: 1.375rem; font-weight: 500; letter-spacing: -.025em; height: 56px; display: grid; place-items: center; }
.mq__kind { font-size: .8125rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mq { -webkit-mask-image: none; mask-image: none; }
  .mq__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .mq__item[aria-hidden="true"] { display: none; }   /* one honest set, static */
}

/* ------------------------------------------------------------ socials ---
   Named links rather than bare glyphs. An unlabelled icon is a guess for a
   sighted visitor and silence for a screen reader; the label costs one line. */
.social { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.social a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .55rem .95rem; text-decoration: none; font-size: .875rem; font-weight: 500;
  border: 1px solid rgba(255,255,255,.22); color: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.social a:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.social svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.is-light .social a, .section:not([class*="--"]) .social a { border-color: var(--line); }

/* ------------------------------------------------------ whatsapp floater ---
   Deliberately reinstated. An earlier critique said kill the floater, and for
   a portfolio it would be right — but this audience is a restaurant owner on a
   phone mid-service, and the whole business model is "message us a link". The
   quickest route to the one action that matters should not require finding the
   footer.

   Bottom-right, above the fold on every scroll position, and it never covers
   text: it sits in the gutter, and shrinks to a disc on small screens. */
.wa {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 40;
  display: inline-flex; align-items: center; gap: .6rem;
  background: #1faf55; color: var(--white); text-decoration: none;
  padding: .95rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .18s ease;
}
.wa:hover { background: #179045; transform: translateY(-2px); }
.wa svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.wa__t { white-space: nowrap; }
@media (max-width: 620px) { .wa__t { display: none; } .wa { padding: 1rem; } }
@media (prefers-reduced-motion: reduce) { .wa { transition: none; } .wa:hover { transform: none; } }
/* It must never sit on top of the footer's own contact links. */
.site-foot { padding-bottom: clamp(5rem, 10vw, 7rem); }

/* The footer social row sits inside the contact column now, so it stacks
   rather than sprawling across two lines of loose buttons. */
.site-foot .social { display: grid; gap: .5rem; margin-top: 1rem; }
.site-foot .social a { justify-content: flex-start; padding: .5rem .8rem; }

/* ===================================================================== *
   FOOTER, CENTRED.
   Four columns of links was a lot of structure for a twelve-page site, and it
   sat hard left while every other section on the page is centred. One column
   down the middle, and the social buttons become discs.
 * ===================================================================== */
.foot { display: grid; justify-items: center; text-align: center; gap: 0; }
.foot__mark { width: 56px; height: 56px; margin-bottom: 1.25rem; }
.foot__logo { font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; color: var(--white); margin: 0 0 .5rem; }
.foot__line { max-width: 46ch; margin: 0 0 2.25rem; color: rgba(255,255,255,.66); font-size: .9375rem; }

.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.75rem; margin-bottom: 2.25rem; }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: rgba(255,255,255,.82); font-size: .9375rem; font-weight: 500;
}
.foot__nav a:hover { color: var(--orange); }

/* Icon-only discs. Clean without going silent: each carries an aria-label, so
   a screen reader gets "WhatsApp" where a sighted visitor gets the glyph. */
.foot__socials { display: flex; justify-content: center; gap: .75rem; margin: 0 0 2rem; }
.orb {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.orb svg { width: 19px; height: 19px; fill: currentColor; }
.orb:hover { transform: translateY(-2px); color: var(--white); border-color: transparent; }
/* Each brand in its own colour on hover — recognisable, and it stops three
   identical circles reading as decoration. */
.orb--whatsapp:hover { background: #1faf55; }
.orb--instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.orb--facebook:hover { background: #1877f2; }
@media (prefers-reduced-motion: reduce) { .orb:hover { transform: none; } }

.foot__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .75rem; margin: 0 0 2.5rem; font-size: .9375rem; color: rgba(255,255,255,.7); }
.foot__contact a { text-decoration: none; }
.foot__contact a:hover { color: var(--orange); }
.foot__dot { color: rgba(255,255,255,.3); }

.foot__legal {
  margin: 0; padding-top: 2rem; width: 100%;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.4); font-size: .8125rem;
}

/* ------------------------------------------------------------- lead form ---
   One column, generous targets, and the button is the site's own control.
   The honeypot is off-canvas rather than display:none: some form bots skip
   fields a computed style hides. */
.lead-form { display: flex; flex-direction: column; gap: 1.125rem; margin-top: .5rem; }
.lead-form label { display: flex; flex-direction: column; gap: .4rem; font-weight: 500; font-size: .9375rem; }
.lead-form input {
  font: inherit; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 0;
  background: var(--white); color: var(--ink); min-height: 44px;
}
.lead-form input:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }
.lead-form .btn { align-self: flex-start; cursor: pointer; border: 0; font: inherit; font-weight: 600; }
.lead-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.lead-msg { margin: 0; font-size: .9375rem; color: var(--muted); min-height: 1.4em; }
.lead-msg.is-ok { color: var(--ink); font-weight: 500; font-size: 1.0625rem; }