/* ==========================================================================
   Navy Goose — corporate interim site
   ==========================================================================
   Colour and button shape are carried over from gift/assets/css/style.css:
   the same near-black and tan, the same pill. What is new here is the RHYTHM,
   taken from the interim design brief: alternating off-white / cream grounds,
   black bands, tan hairlines, a 720px reading measure and a lot more air.

   TYPE is no longer gift/'s. It was reset to match the Navy Goose logo, which
   is Perpetua and Goudy Old Style.
     Headings  Crimson Pro. Every heading on the site, at weight 400 — and the
               hero at 300, because a text face set large at 400 reads plain.
               Add any new weight to the font link in header.php first, or the
               browser will synthesise it.
     Body      Source Sans 3. Every SENTENCE: paragraphs, ledes, navigation,
               the announcement bar, plus all the small print — labels,
               buttons, credits, form fields. It replaced Aptos, which was
               declared src: local() and so never downloaded for anyone
               without Microsoft Office.
     Emphasis  Bold in body copy, italic in headings. The heading italic is the
               Fortnum & Mason device — one word set in italic — and it is the
               cheapest distinctive thing in the whole design.
     Openings  Every page opens with .eyebrow + title + .rule-short. That pair,
               plus a quieter lede, is what separates "nice font" from
               "expensive". The hero headline is deliberately SMALL (36px) —
               the illustration carries the page, not the type.

   Where the interim brief and the existing brand disagreed, the brand won,
   because gift/ is what launches on top of this:
     1. Palette — black #1a1a1a and tan #c19a6b, not #111111 and #C08D59.
                  Cream and pale grey ARE the brief's values: gift/ has no
                  equivalent, and they are needed for the alternating grounds.
     2. Buttons — pill, as gift/ sets them, not squared to 2px.
   ========================================================================== */

/* Aptos is gone. It was declared with src: local() only, which means it never
   actually downloaded — Windows visitors with Office got Aptos, and everybody
   else silently got Calibri or Segoe UI. Everything is a real webfont now, so
   every visitor sees the same page. */

:root {
  /* Caroline's brand palette, replacing the values inherited from gift/.
     Three of these actually changed, and the tan matters most:
       --ng-tan        #c19a6b -> #a97c4e   the LOGO's own tan. The site and
                                            the wordmark never matched before.
       --ng-tan-ink    #7f5a2e -> #8a653f
       --ng-tan-light  #d8b98c -> #d4a06c
       --ng-black      #1a1a1a -> #111111   a truer black.

     THE TANS ARE NOT INTERCHANGEABLE. Measured against the grounds here:
       --ng-tan-ink    4.6-5.2:1 on light  -> the only tan safe as body TEXT
       --ng-tan        3.2-3.7:1 on light  -> rules, borders, buttons, large
                                              display type. NOT body text.
                       5.1:1 on black      -> safe as text on dark
       --ng-tan-light  2.3:1 on white      -> DARK GROUNDS ONLY. It is the
                                              prettiest and the most misused. */
  --ng-black:       #111111;
  --ng-black-deep:  #111111;
  --ng-black-soft:  #2a2a2a;
  --ng-tan:         #a97c4e;
  --ng-tan-light:   #d4a06c;
  /* Tan TEXT on a light ground only. The brand tan is a rule-and-button
     colour: at #c19a6b it lands around 2.4:1 against off-white, so small caps
     credits and text links set in it are close to unreadable. This is the same
     hue taken down to ~5.4:1 on cream and ~5.7:1 on off-white. Rules, borders,
     buttons and anything sitting on black keep the brand tan. */
  --ng-tan-ink:     #8a653f;
  /* Warmed from #f7f5f2. At five points off neutral it was near enough grey to
     borrow a cast from whatever sat beside it, and next to the sage it read
     green. Twelve points gives it an identity of its own. Not warmer than this:
     at around twenty it becomes a cream page ground, which is the default look
     of every premium gifting site and the thing we are deliberately avoiding.
     NOTE: this colour also sets the pale type on the black footer and bands. */
  --ng-off-white:   #f8f4ec;
  --ng-grey:        #6f6a64;
  --ng-line:        #e7e3dd;
  --ng-white:       #ffffff;

  /* The soft fill: the hero ground, the closing band, project panels, pull
     quotes. Anywhere an area needs to lift off the page.

     Was cream #f4efe7. Now a warm sage, which does the same job but is a
     colour of our own rather than the shade every premium gifting site
     defaults to. The name stays --ng-cream so the nine rules below keep
     working untouched.

     RULE: sage and tan must never touch. Blended or butted together they
     read olive. Black, white or a photograph always goes between them. */
  --ng-cream:       #c7ccb2;
  /* The deeper step of the same sage, for the thin sage DETAILS: the band
     under the top bar, its twin above the footer on Contact, and the frames
     round the project boxes and gallery tiles. The soft sage above keeps the
     large areas. Caroline's call, 18 October 2026. */
  --ng-sage-deep:   #9ca57e;
  /* PLUM, THE ACTION COLOUR. Anything clickable or that responds to the
     pointer: buttons, hover colours, gallery arrows, FAQ plus signs, focus
     rings. Writing on plum is ALWAYS off-white, never tan. Never used for a
     large area, so black and sage still set the look. Too close to black to
     sit on it, so buttons on black bands keep their tan. Caroline's call,
     18 October 2026, after trying #45202b (too dark) and #6f2a3b (too red). */
  --ng-plum:        #562a3c;
  /* --ng-grey-pale (#e9e8e5) was RETIRED. A cool grey inherited from the
     original build, doing the same job as --ng-line (#e7e3dd) but a shade
     cooler — so hairlines across the site did not match each other, and the
     odd one out was not in the brand palette at all. Every border it carried
     now uses --ng-line; the two places it filled an area use --ng-cream.
     Do not reintroduce it: one line colour, one warm fill, and both are
     colours Caroline actually specified. */

  /* The one serif: headings, body copy and navigation. Crimson Pro is a TEXT
     face — easy to read in paragraphs, which is exactly what it is here for.
     Its light weights (200/300) are loaded because a text face set large at
     400 reads plain; dropping the weight at display size is what gives the
     headings some prettiness without introducing a second typeface. */
  --ng-serif: 'Crimson Pro', 'Crimson Text', Georgia, 'Times New Roman', serif;
  /* THE HERO LINE ONLY. Cormorant Garamond at Light — the display face, used
     in exactly one place on the site. It is fragile by design: very fine
     hairlines that thin out below about 40px, which is why the hero drops to
     weight 400 on a phone. Never use it for body copy or small headings. */
  --ng-display: 'Cormorant Garamond', Garamond, 'Palatino Linotype',
                Palatino, Georgia, 'Times New Roman', serif;
  /* The sans is SMALL PRINT ONLY: labels, eyebrows, buttons, credits,
     footer headings, form fields. It never sets a sentence and never appears
     above 15px. The serif does the talking — the structure every comparable
     retailer uses, where the sans handles admin and nothing else. */
  --ng-font:  'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui,
              -apple-system, sans-serif;
  /* Perpetua ships with Microsoft Office rather than the web, so it is only
     there for visitors who have it installed. The fallbacks are the nearest
     widely available old-style faces, in descending order of likeness. */
  --ng-perpetua: 'Perpetua', 'Palatino Linotype', Palatino, 'Book Antiqua',
                 'Baskerville', Georgia, 'Times New Roman', serif;
  --ng-maxw:    1240px;   /* outer container */
  --ng-measure:  720px;   /* reading measure for long-form text */
  --ng-narrow:   620px;   /* narrow measure for centred bands */
  --ng-gutter:   clamp(1.25rem, 5vw, 3.5rem);
  --ng-band:     clamp(4rem, 9vw, 7.5rem);   /* vertical band padding */
  --ng-radius:   50px;    /* pill, as gift/ has it */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The masthead is sticky and about 148px tall, so anything jumped to by an
   in-page link — #how-we-work, #about, #founder, #main — would otherwise land
   underneath it. This keeps the target clear of the header plus a little air.
   Every anchored element needs it, hence [id] rather than a list that would
   fall out of date the first time a section is added. */
[id] { scroll-margin-top: 10rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ng-off-white);
  color: var(--ng-black);
  /* BODY IS THE SANS. Source Sans 3 carries every sentence — paragraphs, ledes,
     navigation, the announcement bar. Crimson Pro carries every heading.
     Sizes are back to 17/18px: a sans has a much larger x-height than Crimson
     Pro, so the 19px that suited the serif reads oversized here. */
  font-family: var(--ng-font);
  font-size: 1.0625rem;          /* 17px, holds at 17px on mobile */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }   /* 18px */

/* Emphasis in body copy is bold again, now that the body is a sans with a real
   600. The italic device is kept where it belongs — one word of a HEADING,
   which is the Fortnum & Mason trick. Italic emphasis mid-paragraph in a sans
   is weak; bold is what a sans is for. */
strong, b { font-weight: 600; }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--ng-serif); font-weight: 400; line-height: 1.15; margin: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }

a { color: inherit; }

/* Text links inside body copy: black with a tan underline held a few pixels
   clear of the baseline; the whole link turns tan on hover. */
/* :not(.btn) because a button can sit inside body copy (Corporate, "Working
   with Navy Goose"). Without it the button took the underline and its writing
   turned plum on hover, the same colour as its fill, so it vanished. */
.prose a:not(.btn):not(.link-rule), .closing__line a, .intro__lede a, .contact-detail a, .site-footer__col a, .site-footer__social a {
  text-decoration: underline;
  text-decoration-color: var(--ng-tan);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s;
}
.prose a:not(.btn):not(.link-rule):hover, .closing__line a:hover, .intro__lede a:hover, .contact-detail a:hover { color: var(--ng-plum); }
.site-footer__col a:hover, .site-footer__social a:hover { color: var(--ng-tan); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ng-black); color: var(--ng-off-white); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--ng-plum); outline-offset: 3px; }
.masthead :focus-visible, .site-footer :focus-visible, .hero :focus-visible,
.band--black :focus-visible, .case-hero :focus-visible, .consent :focus-visible { outline-color: var(--ng-tan); }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
/* The homepage hero line. Deliberately SMALL — 36px, not the 72px it was.
   The illustration carries the page and the headline states the offer; a hero
   does not have to shout to be the first thing read. Dropping it also lets the
   eye take the whole line in without the sweep a 470px line demanded. */
/* Cormorant Garamond Light — the only place the display face appears. Crimson
   Pro carries every other heading; this one line gets the prettier face
   because it is the one that has to stop someone. */
/* Smaller again, Caroline's call: the reference sites only set a big title
   over a photograph, and there is no photography yet. 30px to 42px. The page
   titles on Corporate, Contact and the case studies use exactly this size so
   every page opens at the same volume. */
.hero__title   { font-family: var(--ng-display); font-weight: 300;
                 font-size: clamp(1.875rem, 3vw, 2.625rem);
                 line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; }
/* Back to 400 on a phone: at the 36px floor, Cormorant's hairlines give way. */
@media (max-width: 700px) { .hero__title { font-weight: 400; } }
/* One word in italic, borrowed from Fortnum & Mason, who set a single word or
   phrase of each heading in their serif italic. It costs nothing and it is the
   most distinctive thing they do typographically. */
.hero__title em, .section-title em, .page-title em { font-style: italic; }
/* Same weight as the hero, but on a light ground: the Corporate page opens on
   its own H1 rather than borrowing the hero band. */
/* BIG headings take the display face, matching the hero. Crimson Pro keeps
   everything below roughly 30px — the sub-headings, the Standards words, the
   case-study section titles — where Cormorant's hairlines start to give way.
   Sizes here are ~8% larger than their Crimson Pro equivalents because
   Cormorant's x-height is smaller; the optical size is unchanged. */
.page-title, .section-title, .closing__title,
.case-hero__title, .shop-teaser__title { font-family: var(--ng-display); font-weight: 400; }

/* Matched to .hero__title in size, weight and measure, so the inside pages do
   not open louder than the homepage. Section titles sit one step below. */
.page-title    { font-weight: 300; font-size: clamp(1.875rem, 3vw, 2.625rem); line-height: 1.12; max-width: 20ch;
                 letter-spacing: -.005em; text-wrap: balance; margin: 0 0 1.5rem; }
@media (max-width: 700px) { .page-title { font-weight: 400; } }
.section-title { font-size: clamp(1.625rem, 2.4vw, 2.125rem); letter-spacing: -.005em; margin: 0 0 .7em; }
/* 500, not 400, below roughly 30px: Cormorant's hairlines start to give way at
   small sizes, and a half-step of weight holds the line together. */
.sub-heading   { font-size: clamp(1.45rem, 2.4vw, 1.7rem); font-weight: 400; margin: 0 0 .5em; }

/* Small caps credit: tan, uppercase, wide. Testimonial attributions and
   section eyebrows. On black the brand tan reads well; on a light ground it
   needs the darker ink variant. */
.credit {
  font-family: var(--ng-font);
  font-size: .75rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ng-tan-ink); margin: 0;
}
/* .hero is NOT in this list any more: the hero is a light ground now, where
   the brand tan is unreadable. Dark grounds only. */
.band--black .credit, .testimonial .credit,
.case-hero .credit, .site-footer .credit { color: var(--ng-tan); }

/* Long-form reading column. */
.prose { max-width: var(--ng-measure); }

/* --------------------------------------------------------------------------
   Layout shells
   -------------------------------------------------------------------------- */
/* The masthead is sticky, so anything an in-page link jumps to has to leave
   room for it or the heading lands underneath the nav. */
/* (The rule that keeps jumped-to headings clear of the sticky menu is set
   once, near the top of this file.) */

/* The ground ladder, brightest to warmest: white -> off-white -> cream.
   The page alternates the first two; cream is reserved for the hero, which is
   why nothing else uses .band--cream any more. Each class name states the
   colour it actually paints — if the scheme changes, rename the classes rather
   than quietly repointing a name at a different colour. */
.band            { padding: var(--ng-band) 0; }
.band--white     { background: var(--ng-white); }
.band--off-white { background: var(--ng-off-white); }
.band--cream     { background: var(--ng-cream); }
.band--black     { background: var(--ng-black); color: var(--ng-off-white); }
.band--black h1, .band--black h2, .band--black h3 { color: var(--ng-off-white); }
.band__inner          { max-width: var(--ng-maxw); margin: 0 auto; padding: 0 var(--ng-gutter); }
.band__inner--narrow  { max-width: calc(620px + var(--ng-gutter) * 2); }
.band__inner--measure { max-width: calc(720px + var(--ng-gutter) * 2); }
.band__inner--centred { text-align: center; }

/* --------------------------------------------------------------------------
   Buttons and rule-links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 13px 30px; border-radius: var(--ng-radius);
  font-family: var(--ng-font); font-weight: 600; font-size: .9375rem;
  letter-spacing: .04em; line-height: 1.2; text-align: center; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  /* Plain black, no border, off-white writing (22 October 2026, replacing the
     plum button; a thin tan border and green were both tried and dropped).
     Plum stays as the hover colour. */
  background: var(--ng-black); color: var(--ng-off-white); border-color: var(--ng-black);
}
/* The border goes plum with the fill, so tan never sits on plum. */
.btn:hover      { background: var(--ng-plum); border-color: var(--ng-plum); color: var(--ng-off-white); }
.btn--tan       { background: var(--ng-tan); color: var(--ng-black); }
.btn--tan:hover { background: var(--ng-tan-light); color: var(--ng-black); }
.btn--ghost     { background: transparent; border-color: var(--ng-black); color: var(--ng-black); }
.btn--ghost:hover { background: var(--ng-plum); border-color: var(--ng-plum); color: var(--ng-off-white); }
.btn--sm        { padding: 9px 20px; font-size: .875rem; }

/* On a black ground the button turns tan with black writing, so it shows.
   Plum is too close to black to work as a hover there, so the hover is the
   lighter tan. (Caroline still deciding, 22 October 2026.) */
.band--black .btn, .hero--image .btn { background: var(--ng-tan); color: var(--ng-black); border-color: var(--ng-tan); }
.band--black .btn:hover, .hero--image .btn:hover { background: var(--ng-tan-light); border-color: var(--ng-tan-light); color: var(--ng-black); }
.band--black .btn--ghost, .hero--image .btn--ghost { background: transparent; border-color: var(--ng-tan); color: var(--ng-tan); }
.band--black .btn--ghost:hover, .hero--image .btn--ghost:hover { background: var(--ng-tan); color: var(--ng-black); }

/* Text link with a rule under it, used instead of a boxed button on cards.
   On a light ground the LABEL is black and the RULE is tan, which is the same
   treatment the brief gives body links and the only version that holds its
   contrast. On black the whole thing is tan. */
/* The sans, not the serif: this is a label-shaped link, and at weight 600 in a
   serif with no bold the browser would fake it. Small print is the sans's job. */
.link-rule {
  display: inline-block; text-decoration: none; color: var(--ng-black);
  font-family: var(--ng-font);
  font-weight: 600; font-size: .9375rem; letter-spacing: .04em;
  border-bottom: 1px solid var(--ng-tan); padding-bottom: 3px;
  transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
/* On hover the words turn the darker tan and the line stays (25 October 2026,
   option 2). A plum box and a black box were both tried and rejected. */
.link-rule:hover { color: var(--ng-tan-ink); }
.hero--image .link-rule, .band--black .link-rule { color: var(--ng-tan); border-color: var(--ng-tan); }
/* On black the words are already tan, so on hover they go the lighter tan. */
.hero--image .link-rule:hover, .band--black .link-rule:hover { color: var(--ng-tan-light); }

/* --------------------------------------------------------------------------
   Announcement bar and masthead
   -------------------------------------------------------------------------- */
/* A promotional strip, so it is actionable: message plus a link, the way every
   comparable retailer builds it. The CTA is underlined rather than a button —
   a second pill this close to the masthead's "Get in touch" would compete.

   It is --ng-black, NOT --ng-black-deep. Sitting on #000 above a #1a1a1a
   masthead put two near-identical blacks next to each other, which reads as a
   rendering fault rather than a decision. Now it is the only dark element at
   the top of a white page, so it does the job a promo strip is meant to do. */
/* The sage band under the strip bookends the page. At the foot, the closing
   band is sage sitting above the black footer. Here it is black above sage,
   the same two colours in mirror image, so the page opens and closes on the
   same note. It also gives the strip a bottom edge, which it needed anyway.
   It sits UNDER the black, never above it: between the white menu and the
   black strip the same band reads as a rendering fault rather than a choice. */
.announce {
  background: var(--ng-black); color: var(--ng-tan-light);
  /* The sage band used to sit under this bar. On trial (25 October 2026) it
     sits ABOVE it instead, on the bottom of the top bar, so it stays in view
     as the page scrolls. See .masthead. */
  /* On trial (25 October 2026): spaced capitals in the site's plain font, the
     CURATED GIFTS style. Crimson capitals were tried first, but their thin
     top strokes blurred at this size, light on black. */
  text-transform: uppercase;
  text-align: center; font-size: .75rem; letter-spacing: .16em;
  padding: 10px var(--ng-gutter);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .25rem 1rem;
}
.announce__cta {
  color: var(--ng-off-white); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ng-tan-light) 70%, transparent); padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.announce__cta:hover { color: var(--ng-tan); border-color: var(--ng-tan); }

/* White, like every comparable luxury retailer. The masthead's job is to get
   out of the way of product; dark chrome fights photography. Black is now
   reserved for the announcement strip, the testimonial band and the footer,
   where it is an accent with real weight rather than the default ground. */
/* Two rows: brand + utility, then navigation.
   THE WHOLE HEADER IS STICKY, not just the top row. Sticking row 1 alone was
   the intention, but a sticky element can only travel inside its own parent's
   box — inside .masthead there is nowhere to travel, so it scrolled away with
   everything else. Pinning both rows costs about 120px of viewport, which is
   the honest trade. Condensing on scroll needs JavaScript and can wait until
   the shop makes the nav row worth keeping. */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--ng-white); color: var(--ng-black);
  /* On trial (25 October 2026): the sage band, moved up from under the black
     bar. Being part of the top bar, it stays locked in view while scrolling.
     6px rather than 10, as it is always on screen. */
  border-bottom: 6px solid var(--ng-sage-deep);
}
.masthead__inner { max-width: var(--ng-maxw); margin: 0 auto; padding: 0 var(--ng-gutter); }

.masthead__bar {
  background: var(--ng-white); border-bottom: 1px solid var(--ng-line);
}
.masthead__bar .masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
/* To centre the wordmark, Harrods-style, once the nav is long enough to hold
   the centre up: change this to `display:grid; grid-template-columns:1fr auto
   1fr` and give the brand `grid-column:2`. Nothing else needs to move. */
.masthead__utility { display: flex; align-items: center; gap: 1.5rem; }
/* The site's one "Get in touch" button (25 October 2026, F5): solid lighter
   tan, from Caroline's LinkedIn banner, black writing in spaced Crimson capitals, square
   corners. Lighter tan on hover. It is the one confident thing on the page;
   everything else stays calm. Cormorant capitals (F3) was the close second. */
.masthead__cta {
  margin-left: .25rem; border-radius: 0;
  background: var(--ng-tan-light); color: var(--ng-black); border-color: var(--ng-tan-light);
  font-family: var(--ng-serif); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 400; font-size: .85rem; padding: 12px 20px;
}
/* The lighter tan at rest, the logo tan on hover (Caroline, 25 October 2026). */
.masthead__cta:hover { background: var(--ng-tan); border-color: var(--ng-tan); color: var(--ng-black); }

/* Shop tools: search, account, saved, basket. Hidden until NG_SHOP_LIVE. */
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--ng-black);
  transition: color .2s;
}
.icon-link:hover { color: var(--ng-tan-ink); }
.icon-link svg {
  width: 21px; height: 21px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.masthead__navrow { background: var(--ng-white); border-bottom: 1px solid var(--ng-line); }
.masthead__brand { display: inline-flex; align-items: center; color: var(--ng-black); text-decoration: none; }
/* The wordmark is the brand's single strongest asset, so it is given room:
   54px on desktop, scaling down to 40px on a phone where the nav toggle has
   to share the row. It was 38px, which read as timid next to the nav. */
/* A fifth bigger than it was (24 October 2026): at 54px Perpetua's thin strokes
   fell below one screen dot and looked patchy. Caroline chose option 4. */
.masthead__brand .site-logo { height: clamp(40px, 5.1vw, 66px); width: auto; display: block; }

/* The nav row. Generous gaps because this row has to hold six or eight
   categories once the shop lands, not three. */
.site-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }
.site-nav__link {
  color: var(--ng-black); text-decoration: none; font-size: .9375rem;
  letter-spacing: .04em; padding: .95rem 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
/* Tan INK, not brand tan: these sit on white, where #c19a6b is ~2.4:1. */
.site-nav__link:hover { color: var(--ng-plum); }
.site-nav__link.is-current { color: var(--ng-tan-ink); border-bottom-color: var(--ng-tan-ink); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; width: 44px; height: 44px;
}
.nav-toggle span { display: block; height: 1px; background: var(--ng-black); margin: 6px 0; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* The hero was flat black because no photograph existed and the brief judged
   black-with-reversed-type better than weak stock imagery. That was a
   workaround, not a brand decision, and it has been replaced: light ground,
   dark type, artwork in its own column. Light is what the whole category does,
   because a hero's job is to show the product, and dark chrome fights it.

   .hero--split puts the artwork BESIDE the copy rather than behind it. That is
   deliberate while the artwork is an illustration: full-bleed would upscale it
   past its 1024px width and bury the headline in a scrim. Beside the copy it
   reads as a considered brand illustration instead of a failed photograph.
   When real photography lands, "hero--image" plus a background-image on .hero
   still works, and the overlay below handles the contrast. */
/* The hero ground is WHITE, and the reason is the band below it.

   Sage was tried here and went heavy over an area this size, as well as
   fighting the warm illustration sitting in it. Off-white was then tried, but
   Projects now sits directly beneath the hero and is also off-white, so the
   two ran together as one long slab with no edge between them.

   White gives the page a clean alternation all the way down:
   white hero, off-white Projects, white Standards, sage closing, black footer.
   Change any one of those and check the two either side of it. */
.hero {
  background: var(--ng-white); color: var(--ng-black);
  min-height: 76vh; display: flex; align-items: center;
  padding: var(--ng-band) 0;
  position: relative; background-size: cover; background-position: center;
}
.hero--image { color: var(--ng-off-white); }
.hero--image::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.hero--image .hero__title { color: var(--ng-off-white); }
.hero__inner { position: relative; max-width: var(--ng-maxw); margin: 0 auto; padding: 0 var(--ng-gutter); width: 100%; }

/* Copy left, artwork right. 6fr/5fr gives the headline the wider column — the
   words are the message, the picture is the evidence. */
.hero--split .hero__inner {
  display: grid; grid-template-columns: 6fr 5fr;
  /* Row gap 0, column gap generous. The testimonial sits in row 2 and sets its
     own top margin; a shared gap would add to that and push it off the fold. */
  gap: 0 clamp(2.5rem, 6vw, 5rem);
  align-items: center; align-content: center;
}
.hero__media { margin: 0; }
.hero__media img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--ng-line);
}
.hero__title { color: var(--ng-black); max-width: 20ch; margin: 0 0 1.5rem; }

/* --------------------------------------------------------------------------
   Eyebrow and hairline — the page-opening pair
   --------------------------------------------------------------------------
   These two devices do most of the work in making a page opening read as
   considered rather than merely typeset: a small, widely tracked line above
   the title, and a short rule separating the claim from the explanation.
   Used by the Home hero (black ground) and the Corporate opener (off-white).
   Both are decoration, so the eyebrow is aria-hidden in the markup — it says
   nothing a screen reader needs that the page does not already say.

   Weight 400, not 600: a tracked line of small caps wants to be light —
   bold small caps read as a warning label. */
.eyebrow {
  font-family: var(--ng-font); font-size: .6875rem; font-weight: 400;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ng-tan-ink); margin: 0 0 1.9rem;
}
/* On the Corporate page the small line sits inside the main heading, so it
   must not pick up the heading's size, weight or italics. */
.page-title .eyebrow { display: block; font-style: normal; line-height: 1.5; }
.rule-short { width: 54px; height: 1px; background: var(--ng-tan); opacity: .75; margin: 0 0 1.6rem; }
/* On black the brand tan reads well; on a light ground it needs the ink
   variant, or it lands near 2.4:1 and is effectively unreadable. */
.band--black .eyebrow, .hero--image .eyebrow { color: var(--ng-tan); }
.band--off-white .rule-short, .band--cream .rule-short { opacity: 1; }

/* Quieter than it was, and on a tighter measure. The lede supports the
   headline; at full brightness and 40ch it was competing with it. */
/* Serif, like everything else that is a sentence rather than a label. */
.hero__lede  { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.7;
               color: var(--ng-grey); max-width: 42ch; margin: 0 0 2.4rem; }
.hero--image .hero__lede { color: color-mix(in srgb, var(--ng-off-white) 68%, transparent); }
.hero__cta   { display: flex; flex-wrap: wrap; align-items: center; gap: 2.25rem; }

/* The hero testimonial. Sits in the grid's second row, under the copy column,
   so it reads as a footnote to the promise rather than a competing headline.
   Small and quiet ON PURPOSE — 17px italic under a hairline. Scale is what
   stops a testimonial sounding like a boast. */
.hero__quote {
  grid-column: 1 / -1; align-self: start;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding-top: 1.5rem; border-top: 1px solid var(--ng-line);
}
.hero__quote blockquote { margin: 0; }
.hero__quote p {
  font-family: var(--ng-serif); font-style: italic;
  font-size: 1.0625rem; line-height: 1.55;
  color: var(--ng-black); margin: 0 0 .7rem;
}
.hero__quote .credit { font-style: normal; }
/* Centred on the homepage, where it runs the full width under the opening
   (25 October 2026). The Corporate page's quote sits in a column and stays left. */
.hero .hero__quote { text-align: center; }

/* --------------------------------------------------------------------------
   Navy Goose Standards — a numbered frieze, four across
   --------------------------------------------------------------------------
   This was a two-by-two grid with hairlines on all four sides of every cell,
   and it read as a specification table rather than a statement of values. The
   boxes are gone. What replaces them:
     - a tan rule over each item, the same device as the hero hairline and the
       testimonial, so the section speaks the page's own language
     - a numeral, which gives each item somewhere for the eye to start
     - four across rather than two by two, so they read as one SET taken in at
       a glance rather than four separate cards
   The numerals come from a CSS counter, so adding or reordering a standard in
   index.php renumbers them automatically — there is nothing to keep in sync.
   The words stay CRIMSON PRO: at ~31px they are below the size where Cormorant
   holds together, and the display face is reserved for the big headings. */
.standards__grid {
  list-style: none; counter-reset: std;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.standards__item {
  counter-increment: std;
  border-top: 1px solid var(--ng-tan); padding: 1.15rem 0 0;
}
.standards__item::before {
  content: "0" counter(std); display: block;
  font-family: var(--ng-font); font-size: .6875rem; letter-spacing: .24em;
  color: var(--ng-tan-ink); margin: 0 0 .9rem;
}
.standards__word { font-family: var(--ng-serif); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0 0 .55rem; }
.standards__line { color: var(--ng-grey); font-size: 1rem; line-height: 1.6; margin: 0; }

/* --------------------------------------------------------------------------
   Selected Projects
   -------------------------------------------------------------------------- */
.projects { background: var(--ng-off-white); padding: var(--ng-band) 0; }
.projects__inner { max-width: var(--ng-maxw); margin: 0 auto; padding: 0 var(--ng-gutter); }
.projects__intro { max-width: var(--ng-measure); color: var(--ng-grey); margin: 0 0 3rem; }
/* THREE COLUMNS, deliberately fixed, wrapping to a second row.
   Caroline's call: the target is SIX case studies in two rows of three, rather
   than letting the row grow to four or five across and squeezing each card.
   Three keeps the cards wide enough for a two-line client name to breathe.
   Card counts and how they land:
     3  one full row
     4  second row of one, with two gaps — the awkward one
     5  second row of two, one gap — acceptable
     6  two full rows, which is the target
   The row gap is tighter than the column gap: cards in a column are the same
   kind of thing, so they need less separation than cards side by side. */
.projects__grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 2.75rem);
}

/* Positioned so the name's link can stretch over the whole card, picture
   included, rather than only over the words. */
.project-card { display: flex; flex-direction: column; transition: transform .25s; position: relative; }
.project-card:hover { transform: translateY(-3px); }
.project-card--quiet:hover { transform: none; }

/* THE MOUNT. Three layers, like a framed photograph: a sage frame on the
   outside, a white mount inside it, then the picture.

   The white is the point. Sage never touches the photograph, so it cannot
   tint it, and warm shots cannot go olive against it. The same frame works
   for a warm picture and a cold one.

   The frame is 6px, the same idea as the band under the announcement strip
   but lighter, because 10px across a full-width band and 10px around a small
   card are not the same weight.

   A card with no photograph yet puts the client name inside the mount where
   the picture would be, so the frame is identical either way and an empty
   card does not read as a missing slot. */
.project-card__frame { background: var(--ng-sage-deep); padding: 6px; margin: 0 0 1.5rem; }
.project-card__mount { background: var(--ng-white); padding: 14px; }

.project-card__panel {
  aspect-ratio: 4 / 3; background: var(--ng-off-white);
  display: flex; align-items: center; justify-content: center;
  padding: 1.75rem; margin: 0; overflow: hidden; position: relative;
  font-size: clamp(1.3rem, 2vw, 1.6rem); text-align: center; line-height: 1.25;
}
/* The photograph fills the mount's opening. */
.project-card__panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card__panel--photo { padding: 0; background: var(--ng-off-white); }

/* The card's name, used only when a photograph has taken the panel. */
.project-card__name {
  font-family: var(--ng-display); font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2;
  margin: 0 0 .5rem;
}
.project-card__name a { text-decoration: none; transition: color .2s; }
.project-card__name a::after { content: ""; position: absolute; inset: 0; }
.project-card:hover .project-card__name a { color: var(--ng-plum); }
.project-card__panel a { text-decoration: none; transition: color .2s; }
.project-card__panel a::after { content: ""; position: absolute; inset: 0; }
.project-card:hover .project-card__panel a { color: var(--ng-plum); }
.project-card__teaser { color: var(--ng-grey); margin: 0 0 1.25rem; font-size: 1rem; }
.project-card .link-rule { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   Testimonial — black band, nothing else in it
   -------------------------------------------------------------------------- */
.testimonial { background: var(--ng-black); color: var(--ng-off-white); padding: var(--ng-band) 0; }
.testimonial__inner { max-width: calc(720px + var(--ng-gutter) * 2); margin: 0 auto; padding: 0 var(--ng-gutter); text-align: center; }
.testimonial__quote {
  font-family: var(--ng-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 1.8rem); line-height: 1.45;
  margin: 0 0 1.75rem; color: var(--ng-off-white);
}
.testimonial__quote p { margin: 0; }

/* Pull quote inside a case study: quiet pale grey band, not a plain paragraph. */
.pullquote {
  background: var(--ng-cream); border-left: 2px solid var(--ng-tan);
  padding: clamp(1.5rem, 3vw, 2.25rem); margin: 2.5rem 0;
}
.pullquote__quote { font-family: var(--ng-serif); font-style: italic; font-size: 1.4rem; line-height: 1.5; margin: 0 0 1rem; }
.pullquote__quote p { margin: 0; }

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */
.closing { background: var(--ng-cream); padding: clamp(5rem, 10vw, 10rem) 0; text-align: center; }
/* Stands in for the closing band on pages that suppress it, so every page
   still ends on sage above the black footer. Same 10px as the band under the
   announcement strip at the top of the page. */
.closing-rule { height: 10px; background: var(--ng-sage-deep); }
.closing__inner { max-width: calc(720px + var(--ng-gutter) * 2); margin: 0 auto; padding: 0 var(--ng-gutter); }
.closing__title { font-size: clamp(1.625rem, 2.4vw, 2.125rem); letter-spacing: -.005em; margin: 0 0 1rem; }
.closing__line { font-size: 1.0625rem; margin: 0; color: var(--ng-grey); }
.closing__line a { color: var(--ng-black); }

/* --------------------------------------------------------------------------
   Shop teaser (off by default, Caroline's call)
   -------------------------------------------------------------------------- */
.shop-teaser__title { font-size: clamp(1.625rem, 2.4vw, 2.125rem); margin: 0 0 .75rem; }
.shop-teaser__line { color: color-mix(in srgb, var(--ng-off-white) 82%, transparent); margin: 0 0 2rem; }
.shop-teaser__form { display: flex; flex-wrap: wrap; gap: .75rem; }
.shop-teaser__form input {
  flex: 1 1 260px; max-width: 340px; padding: 13px 20px;
  border: 1px solid var(--ng-tan); border-radius: var(--ng-radius);
  background: transparent; color: var(--ng-off-white); font: inherit; font-size: .9375rem;
}
.shop-teaser__form input::placeholder { color: color-mix(in srgb, var(--ng-off-white) 50%, transparent); }

/* --------------------------------------------------------------------------
   Corporate page
   -------------------------------------------------------------------------- */
/* Page intro: three columns, each under a tan hairline. The brief's
   "The stakes / The judgement / The scale" labels are structural notes rather
   than copy to set, so they are not displayed. */
/* Matched to .hero__lede, so the two page openings behave the same way: the
   supporting line is quieter and on a tighter measure than the title. */
.intro__lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.7; color: var(--ng-grey); max-width: 42ch; margin: 0 0 clamp(3rem, 6vw, 5rem); }
/* A page opening with a picture beside it (Corporate). The gap below matches
   the space the intro line normally leaves before the three columns. */
/* Same proportions as the homepage's opening (25 October 2026), so the
   cartoons are the same size on every page: words 6, picture 5. */
.page-head { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; margin: 0 0 clamp(3rem, 6vw, 5rem); }
.page-head .intro__lede { margin-bottom: 0; }
/* A longer opening (About): picture level with the top of the text. */
/* The picture sits level with the END of the writing, the way the Contact
   picture finishes its column, so it reads as part of the text rather than
   pinned to the top corner (Caroline, 25 October 2026: it looked stuck on). */
.page-head--top { align-items: start; margin-bottom: 0; }
.page-head--top .page-head__art { align-self: end; margin: 0 0 .4rem; }
/* About's opening: the picture set into the text, which wraps round it and
   carries on underneath (25 October 2026). Stacks on a phone. */
.about-intro { max-width: 980px; }
.about-intro::after { content: ""; display: block; clear: both; }
.about-intro__art { float: right; width: 44%; margin: .35rem 0 1.25rem 2.5rem; }
.about-intro__art img { width: 100%; height: auto; display: block; border: 1px solid var(--ng-line); }
@media (max-width: 760px) {
  .about-intro__art { float: none; width: 100%; margin: 0 0 1.5rem; }
}
/* The grey for About's paragraphs must not reach its small tan label. */
.about__body .eyebrow { color: var(--ng-tan-ink); }
.page-head__art { margin: 0; }
.page-head__art img { width: 100%; height: auto; display: block; border: 1px solid var(--ng-line); }
@media (max-width: 760px) {
  .page-head { grid-template-columns: 1fr; }
}
.intro__cols { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); }
.intro__col  { border-top: 1px solid var(--ng-tan); padding-top: 1.5rem; }
/* Grey 16px, the same as the Standards lines on the homepage. */
.intro__col p { margin: 0; color: var(--ng-grey); font-size: 1rem; line-height: 1.6; }

/* What We're Asked For: two columns of three, each line under a small tan
   mark. A rule, not a bullet dot, and no icons. */
.asked__list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); }
.asked__item { padding: 1.4rem 0; border-bottom: 1px solid var(--ng-line); display: flex; gap: 1.25rem; align-items: baseline;
               color: var(--ng-grey); font-size: 1rem; line-height: 1.6; }
.asked__item::before { content: ""; flex: 0 0 22px; height: 1px; background: var(--ng-tan); transform: translateY(-.4em); }

/* Working with Navy Goose: split, panel left, copy right, widest measure and
   the most air. This is the section most likely to be read closely. */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* White, sitting on the off-white band. Not sage: the writing in it is tan,
   and sage and tan never touch. */
.split__media { aspect-ratio: 4 / 5; background: var(--ng-white); border: 1px solid var(--ng-line); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* With an illustration in it: landscape, no inner padding, the picture fills
   the frame. 4:3 rather than the portrait panel, so the hands and the box
   both stay in shot. */
/* The cartoon's own shape, as on the homepage, rather than a taller crop. */
.split__media--art { aspect-ratio: auto; padding: 0; margin: 0; overflow: hidden; }
.split__media--art img { height: auto; display: block; }
.split__media-mark { font-family: var(--ng-serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--ng-tan-ink); text-align: center; line-height: 1.3; }
.split__body p { color: var(--ng-grey); }
.split__body .btn { margin-top: 1.25rem; }

.founder { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* No portrait exists. Run the section centred on the copy alone rather than
   holding open a placeholder. */
.founder--no-portrait { display: block; max-width: var(--ng-measure); }
/* Held small (4 November 2026): the photo is a phone selfie and goes soft if shown large. */
.founder__portrait { aspect-ratio: 3 / 4; background: var(--ng-cream); margin: 0; overflow: hidden; max-width: 300px; }
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder__links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 1.75rem 0 0; }
.founder__body p { color: var(--ng-grey); }

.about__body p { color: var(--ng-grey); }
.about__body strong { color: var(--ng-black); font-weight: 600; }

/* Popular Choices: one row of square tiles that swipes sideways, with the
   next tile peeking in at the edge to show there is more. Every picture is
   cropped to the same square on the same pale ground, so supplier photographs
   read as one selection rather than a catalogue. A tile with no picture yet
   shows the star, faintly, rather than an empty box.
   Written to be lifted as it stands into the shop. */
.gallery__intro { max-width: var(--ng-measure); color: var(--ng-grey); margin: 0 0 2.5rem; }
.gallery { position: relative; }
.gallery__row {
  list-style: none; display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 23%, 290px);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 12px;
  /* 12px of room all round so the tile frames are not clipped by the row. */
  padding: 12px 12px 1.5rem; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--ng-tan) var(--ng-line);
}
.gallery__row:focus-visible { outline-offset: 6px; }
.gallery__tile { scroll-snap-align: start; }
/* A slimmer version of the project box frame: 8px white mount, then 4px of
   deeper sage, drawn as shadows outside the picture so the gentle zoom on
   hover stays inside it. The white keeps sage off the photograph. */
.gallery__pic {
  aspect-ratio: 1 / 1; overflow: hidden; margin: 0 0 calc(1.1rem + 12px);
  background: var(--ng-off-white);
  box-shadow: 0 0 0 8px var(--ng-white), 0 0 0 12px var(--ng-sage-deep);
  display: flex; align-items: center; justify-content: center;
}
.gallery__pic img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: scale .8s cubic-bezier(.2, .6, .2, 1); }
.gallery__tile:hover .gallery__pic img:not(.gallery__mark) { scale: 1.04; }
.gallery__pic .gallery__mark { width: 44px; height: auto; object-fit: contain; opacity: .45; }
.gallery__name { font-family: var(--ng-serif); font-weight: 400; font-size: 1.25rem; line-height: 1.25; margin: 0 0 .4rem; }
.gallery__line { color: var(--ng-grey); font-size: 1rem; line-height: 1.6; margin: 0; }
/* The row can be dragged with a mouse. While dragging, snapping is off so the
   row follows the hand, and it settles on a tile when let go. */
.gallery__row { cursor: grab; }
.gallery__row.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
/* Arrows at each end of the row, level with the middle of the pictures
   (25 October 2026: at the bottom right they were missed). Square, fine black
   line on white. On hover the arrow and line turn the darker tan, the same
   as the underlined links. The arrow at an end with nothing more to show
   disappears. */
.gallery__controls {
  position: absolute; left: 0; right: 0; top: var(--gallery-arrow-top, 40%);
  height: 0; margin: 0; pointer-events: none;
}
.gallery__controls[hidden] { display: none; }
.gallery__btn {
  position: absolute; top: 0; transform: translateY(-50%); pointer-events: auto;
  width: 48px; height: 48px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--ng-black); background: var(--ng-white); color: var(--ng-black);
  font-size: 1.15rem; line-height: 1;
  transition: background .2s, color .2s, border-color .2s, opacity .2s, visibility .2s;
}
.gallery__btn[data-gallery-prev] { left: -6px; }
.gallery__btn[data-gallery-next] { right: -6px; }
.gallery__btn:hover:not(:disabled) { border-color: var(--ng-tan-ink); color: var(--ng-tan-ink); }
.gallery__btn:disabled { opacity: 0; visibility: hidden; }
/* Phones swipe, and arrows over small pictures only get in the way. */
@media (max-width: 760px) { .gallery__controls { display: none; } }
.gallery__cta { margin-top: 2rem; }

/* Popular Choices as words only (26 October 2026, until there are real
   photos): three columns of gift types, each under a hairline with the
   logo star in tan as its bullet. The star file is the lighter tan, so it is
   used as a stencil and filled with the logo tan for the pale background.
   The gallery rules above stay for when pictures return, here or in the shop. */
.choices__list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 2.25rem clamp(2rem, 4vw, 3.5rem); }
.choices__item { position: relative; padding: 1.25rem 0 0 1.75rem; border-top: 1px solid var(--ng-line); }
.choices__item::before { content: ""; position: absolute; left: 0; top: calc(1.25rem + .35em); width: 16px; height: 15px;
  background: var(--ng-tan); -webkit-mask: url("../img/ng-star.svg") center / contain no-repeat; mask: url("../img/ng-star.svg") center / contain no-repeat; }
.choices__name { font-family: var(--ng-serif); font-weight: 400; font-size: 1.25rem; line-height: 1.25; margin: 0 0 .4rem; }
.choices__line { color: var(--ng-grey); font-size: 1rem; line-height: 1.6; margin: 0; }
/* In What We Do, a name with a case study or FAQ behind it is a link,
   underlined in tan like the FAQ links, turning the darker tan on hover. */
.choices__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--ng-tan);
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s; }
.choices__name a:hover { color: var(--ng-tan-ink); }
@media (max-width: 960px) { .choices__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .choices__list { grid-template-columns: 1fr; gap: 1.75rem; } }

/* FAQ: each question opens and closes in place under a hairline. The tan
   plus turns to a cross when open. */
.faq { max-width: var(--ng-measure); border-top: 1px solid var(--ng-line); }.faq__item { border-bottom: 1px solid var(--ng-line); }
.faq__q {
  list-style: none; cursor: pointer; position: relative;
  font-family: var(--ng-serif); font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.35;
  padding: 1.35rem 3rem 1.35rem 0; transition: color .2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: .25rem; top: 50%;
  font-family: var(--ng-font); font-size: 1.5rem; line-height: 1; color: inherit;
  translate: 0 -50%; transition: rotate .3s cubic-bezier(.2, .6, .2, 1);
}
.faq__item[open] > .faq__q::after { rotate: 45deg; }
/* The darker tan on hover, the same as the underlined links (25 October 2026). */
.faq__q:hover { color: var(--ng-tan-ink); }
.faq__a { color: var(--ng-grey); padding: 0 3rem 1.6rem 0; }
.faq__a ul { margin: 0 0 1em; padding-left: 1.25rem; }
.faq__a li { margin: 0 0 .35em; }
/* Seen only on Caroline's computer: every question shows, labelled, so she
   can read the drafts in place. Matches the Gander's Draft label. */
.faq-flag {
  display: inline-block; vertical-align: middle; margin-left: .5rem;
  font-family: var(--ng-font); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .55rem; line-height: 1.4;
}
.faq-flag--draft { background: var(--ng-black); color: var(--ng-tan-light); }
.faq-flag--live  { background: var(--ng-sage-deep); color: var(--ng-black); }
.faq__a li::marker { color: var(--ng-tan); }
.faq__a a, .faq-more a, .projects__intro a {
  color: var(--ng-black); text-decoration: underline; text-decoration-color: var(--ng-tan);
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s;
}
.faq__a a:hover, .faq-more a:hover, .projects__intro a:hover { color: var(--ng-tan-ink); }

/* The FAQ page below its title: topics down the left, staying in view as the
   questions scroll, and the questions on the right. This fills the width the
   title and picture use above, so the page no longer leans left. */
.faq-layout {
  display: grid; grid-template-columns: minmax(170px, 1fr) 3fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.faq-nav { position: sticky; top: 11rem; }
.faq-nav .eyebrow { margin-bottom: 1rem; }
.faq-nav__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--ng-line); }
.faq-nav__list a {
  display: block; padding: .45rem 0 .45rem 1rem; margin-left: -1px;
  border-left: 1px solid transparent; color: var(--ng-black); text-decoration: none;
  font-size: .9375rem; transition: color .2s, border-color .2s;
}
.faq-nav__list a:hover { color: var(--ng-tan-ink); border-left-color: var(--ng-tan); }
.faq-body .faq { max-width: none; }
.faq-section + .faq-section { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* The topic titles are in the page-title font and clearly bigger, so they
   read as headings over the questions rather than as one more question
   (Caroline, 25 October 2026: too alike in the same font). */
.faq-section__title {
  font-family: var(--ng-display); font-weight: 400;
  font-size: clamp(1.875rem, 2.8vw, 2.375rem); letter-spacing: -.005em;
  margin: 0 0 1.25rem;
}
.faq-more { color: var(--ng-grey); margin: clamp(2rem, 4vw, 3rem) 0 0; }
@media (max-width: 760px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-nav { position: static; }
  .faq-nav__list { border-left: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .faq-nav__list a { padding: .25rem 0; border-left: 0; border-bottom: 1px solid var(--ng-tan); }
}
.ng-motion .faq__item[open] .faq__a { animation: faq-open .5s cubic-bezier(.2, .6, .2, 1); }
@keyframes faq-open { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* --------------------------------------------------------------------------
   Case study pages
   -------------------------------------------------------------------------- */
.case-hero { background: var(--ng-black); color: var(--ng-off-white); padding: var(--ng-band) 0; }
.case-hero__inner { max-width: calc(720px + var(--ng-gutter) * 2); margin: 0 auto; padding: 0 var(--ng-gutter); }
.case-hero__title { color: var(--ng-off-white); font-weight: 300; font-size: clamp(1.875rem, 3vw, 2.625rem); letter-spacing: -.005em; text-wrap: balance; margin: 0 0 .5em; }
@media (max-width: 700px) { .case-hero__title { font-weight: 400; } }
.case-hero__subline { color: color-mix(in srgb, var(--ng-off-white) 82%, transparent); font-size: clamp(1.0625rem, 2vw, 1.25rem); margin: 0; max-width: 44ch; }
/* The "managed by our founder" line. Small and quiet, under the sub-line. */
.case-hero__provenance { color: color-mix(in srgb, var(--ng-off-white) 65%, transparent); font-size: .9375rem; line-height: 1.6; margin: 1.5rem 0 0; max-width: 52ch; }
/* With the project photograph on the right: wider, two columns. */
.case-hero__inner--split {
  max-width: calc(1120px + var(--ng-gutter) * 2);
  display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.case-hero__media { margin: 0; }
@media (max-width: 760px) {
  .case-hero__inner--split { grid-template-columns: 1fr; }
}
.case-hero__quote { margin: 2.5rem 0 0; padding-top: 2.5rem; border-top: 1px solid color-mix(in srgb, var(--ng-tan-light) 45%, transparent); }
.case-hero__quote .testimonial__quote { text-align: left; margin-bottom: 1.25rem; }

.case-section { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.case-section__title { font-size: 1.65rem; font-weight: 400; border-top: 1px solid var(--ng-tan); padding-top: 1.25rem; margin: 0 0 1rem; }
/* The short label that opens some paragraphs ("The Ideas:"). Set in italic
   so a reader skimming can find their place. */
.case-lead { font-style: italic; color: var(--ng-black); }
/* The photograph that opens a case study page, above The Brief. */
.case-opening { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.case-opening img { width: 100%; height: auto; display: block; border: 1px solid var(--ng-line); }
.case-figure { margin: 2.5rem 0; }
.case-figure figcaption { font-size: .875rem; color: var(--ng-grey); margin-top: .75rem; }

.case-more { display: flex; flex-wrap: wrap; gap: 1.75rem; padding-top: 2rem; border-top: 1px solid var(--ng-line); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
/* The Contact page opening, centred above the two columns. */
/* The gap below matches the space under the opening on Corporate. The intro
   line is allowed wider here so it sits on one line rather than two. */
.contact-head { text-align: center; margin: 0 0 clamp(3rem, 6vw, 5rem); }
.contact-head .intro__lede { max-width: 60ch; margin-bottom: 0; }
.contact-head .page-title, .contact-head .intro__lede { margin-left: auto; margin-right: auto; }
.contact-head .rule-short { margin-left: auto; margin-right: auto; }
/* The short line draws out from the middle here, not from the left. */
.ng-motion .contact-head .rule-short { transform-origin: center; }
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
/* The illustration under the email addresses, framed like the homepage one. */
.contact__art { margin: 3rem 0 0; }
.contact__art img { width: 100%; height: auto; display: block; border: 1px solid var(--ng-line); }
.contact-detail { margin: 0 0 2.5rem; }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail__label { font-size: .75rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ng-tan-ink); margin: 0 0 .5rem; }
.contact-detail__value { font-family: var(--ng-serif); font-weight: 400; font-size: 1.4rem; margin: 0; word-break: break-word; }
.contact-detail__hours { font-size: 1rem; }

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .5rem; }
/* Labels in the same small tracked capitals as the labels beside the form. */
.field label { font-size: .75rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ng-tan-ink); }
.field__hint { color: var(--ng-grey); letter-spacing: .06em; text-transform: none; }
/* Off-white fill so the boxes are easy to find on the white page. */
.field input, .field textarea {
  font: inherit; font-size: 1rem; padding: 13px 16px;
  border: 1px solid var(--ng-line); background: var(--ng-off-white);
  color: var(--ng-black); border-radius: 2px; width: 100%;
}
/* The field keeps its own ring rather than the global outline, so it has to
   clear 3:1 on its own: the brand tan does not, the ink variant does. */
.field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--ng-plum); outline: none;
  box-shadow: 0 0 0 2px var(--ng-plum);
}
.field textarea { resize: vertical; min-height: 150px; }
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form__actions { margin-top: .5rem; }
/* Honeypot: a real visitor never sees or tabs to this. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1.25rem 1.5rem; border-radius: 2px; margin: 0 0 2rem; }
/* Off-white, not sage: sage and tan never touch. */
.notice--ok    { background: var(--ng-off-white); border-left: 2px solid var(--ng-tan); }
.notice--error { background: var(--ng-off-white); border-left: 2px solid #b3261e; }
.notice ul { margin: 0; padding-left: 1.25rem; }

/* The Contact thank-you strip: the top bar button's tan, full width, straight
   under the black announcement bar. "Thank you" is handwritten. */
.thanks { background: var(--ng-tan-light); color: var(--ng-black); text-align: center; padding: 1.8rem 1rem 1.6rem; }
.thanks__title { font-family: 'Homemade Apple', var(--ng-serif); font-size: clamp(1.6rem, 3vw, 1.9rem); line-height: 1.6; margin: 0 0 .3rem; }
.thanks__line { font-size: 1rem; margin: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ng-black); color: var(--ng-off-white); }
.site-footer__inner {
  max-width: var(--ng-maxw); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--ng-gutter);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
}
.site-footer__brand { display: inline-block; color: var(--ng-off-white); text-decoration: none; margin-bottom: 1.5rem; }
/* The star mark, not the wordmark — see site/inc/footer.php for why. Bigger
   than the 40px wordmark it replaced because a single shape can carry it. */
.site-footer__brand { display: inline-block; }
.site-footer__brand .site-star { height: 52px; width: auto; }
.site-footer__strapline { max-width: 34ch; color: color-mix(in srgb, var(--ng-off-white) 72%, transparent); font-size: 1rem; margin: 0 0 1.5rem; }
.site-footer__social { list-style: none; display: flex; gap: 1.5rem; font-size: .9375rem; }
.site-footer__heading { font-family: var(--ng-font); font-size: .75rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ng-tan); margin: 0 0 1.25rem; }
.site-footer__col { display: flex; flex-direction: column; gap: .8rem; font-size: .9375rem; }
.site-footer__col a { color: color-mix(in srgb, var(--ng-off-white) 82%, transparent); }
.site-footer__legal {
  border-top: 1px solid color-mix(in srgb, var(--ng-off-white) 12%, transparent);
  max-width: var(--ng-maxw); margin: 0 auto; padding: 1.5rem var(--ng-gutter);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .8125rem; color: color-mix(in srgb, var(--ng-off-white) 55%, transparent);
}

/* --------------------------------------------------------------------------
   Consent banner (only rendered when an analytics ID is configured)
   -------------------------------------------------------------------------- */
.consent {
  position: fixed; left: var(--ng-gutter); right: var(--ng-gutter); bottom: 1.25rem; z-index: 80;
  max-width: 640px; margin: 0 auto; background: var(--ng-black); color: var(--ng-off-white);
  border: 1px solid var(--ng-tan); padding: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; font-size: .9375rem; flex: 1 1 300px; }
.consent__actions { display: flex; gap: .75rem; }
.consent .btn { background: var(--ng-tan); color: var(--ng-black); }
.consent .btn--ghost { background: transparent; color: var(--ng-tan); }

/* --------------------------------------------------------------------------
   Responsive. One column throughout below 760px: nothing on this site is
   important enough to fight for a second column at 390px.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .contact__grid, .split, .founder { grid-template-columns: 1fr; }
  .split__media { aspect-ratio: 16 / 9; order: -1; }
  .founder__portrait { max-width: 280px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand-col { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* The nav row collapses into the toggle. The panel stays IN FLOW rather than
     absolutely positioned — with the bar sticky, an absolute panel would be
     clipped by it. The old rule also painted the panel black, left over from
     when the masthead was dark; on a white header it was a black slab. */
  .masthead__navrow { border-bottom: 0; }
  .masthead__navrow:has(.site-nav.is-open) { border-bottom: 1px solid var(--ng-line); }
  .site-nav {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem 0 1rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__link { padding: .9rem 0; border-bottom: 1px solid var(--ng-line); border-width: 0 0 1px; }
  .site-nav__link.is-current { color: var(--ng-tan-ink); border-bottom-color: var(--ng-tan); }
  /* Hide the enquiry button on mobile: the hero's own "Get in touch" is two
     inches below it, and two identical buttons on one screen is clutter. */
  .masthead__cta { display: none; }
}

@media (max-width: 760px) {
  .projects__grid, .intro__cols, .asked__list, .field--pair { grid-template-columns: 1fr; }
  /* Two across rather than one: these are four short items, and a single
     column would run them down the page like a menu. */
  .standards__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .hero { min-height: 0; }
  .hero__cta { gap: 1.25rem; }
  /* Stack, and put the artwork UNDER the copy: on a phone the headline has to
     be the first thing, not a picture pushing it below the fold. */
  .hero--split .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero--split .hero__media { order: 2; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .consent { left: 1rem; right: 1rem; }
}

/* --------------------------------------------------------------------------
   Movement
   --------------------------------------------------------------------------
   Calm, and only in response to the visitor: nothing moves on its own.
     1. Each block fades in and drifts up 18px the first time it scrolls into
        view, once only.
     2. Items in a row (the Standards, the project boxes, the Corporate intro
        columns, What We're Asked For) follow one after another, 90ms apart.
     3. The short tan line under a page title draws itself left to right.
   It only runs when header.php has put .ng-motion on the page, which it does
   NOT do for anyone whose computer asks for reduced motion. Without it every
   rule below is inert and the page simply appears, as it always did.
   The block list matches the one in site/js/site.js. Keep the two in step.
   Uses "translate" rather than "transform" on purpose, so it never fights the
   project boxes' own hover lift.
   Written to be lifted as it stands into the shop. */
.ng-motion :is(.hero__body, .hero__media, .hero__quote, .band__inner,
               .projects__inner, .closing__inner, .case-hero__inner) {
  opacity: 0; translate: 0 18px;
  transition: opacity .9s cubic-bezier(.2, .6, .2, 1), translate .9s cubic-bezier(.2, .6, .2, 1);
}
.ng-motion :is(.hero__body, .hero__media, .hero__quote, .band__inner,
               .projects__inner, .closing__inner, .case-hero__inner).is-in {
  opacity: 1; translate: 0 0;
}
/* The hero's picture and quote follow the words rather than arriving with them. */
.ng-motion .hero__media { transition-delay: .15s; }
.ng-motion .hero__quote { transition-delay: .3s; }

.ng-motion :is(.standards__item, .project-card, .intro__col, .asked__item, .gallery__tile) {
  opacity: 0; translate: 0 14px;
  transition: opacity .8s cubic-bezier(.2, .6, .2, 1), translate .8s cubic-bezier(.2, .6, .2, 1);
}
.ng-motion .is-in :is(.standards__item, .project-card, .intro__col, .asked__item, .gallery__tile) {
  opacity: 1; translate: 0 0;
}
.ng-motion :is(.standards__item, .project-card, .intro__col, .asked__item, .gallery__tile):nth-child(2) { transition-delay: .09s; }
.ng-motion :is(.standards__item, .project-card, .intro__col, .asked__item, .gallery__tile):nth-child(3) { transition-delay: .18s; }
.ng-motion :is(.standards__item, .project-card, .intro__col, .asked__item, .gallery__tile):nth-child(4) { transition-delay: .27s; }
.ng-motion :is(.standards__item, .project-card, .intro__col, .asked__item, .gallery__tile):nth-child(5) { transition-delay: .36s; }
.ng-motion :is(.standards__item, .project-card, .intro__col, .asked__item, .gallery__tile):nth-child(n+6) { transition-delay: .45s; }
/* Once in, the project boxes' hover lift must answer at once, not after its
   place in the queue. */
.ng-motion .project-card {
  transition: opacity .8s cubic-bezier(.2, .6, .2, 1), translate .8s cubic-bezier(.2, .6, .2, 1), transform .25s;
}
.ng-motion .is-in .project-card:hover { transition-delay: 0s; }

.ng-motion .rule-short {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1) .35s;
}
.ng-motion .is-in .rule-short { transform: scaleX(1); }