/* ===========================================================================
   FONTS — self-hosted

   These used to load from Google's CDN. Three reasons they do not any more:

   1. PRIVACY. Every visitor's browser had to contact Google to fetch them,
      which meant Google saw an IP address for every page view of this site.
      That had to be disclosed in the privacy policy. Now it does not happen.
   2. SPEED. The Google stylesheet was RENDER-BLOCKING - the browser could not
      paint anything until it had downloaded it, from a different server, after
      two extra DNS lookups.
   3. RELIABILITY. One fewer thing that has to be up for the site to look right.

   The files are subset to the characters this site actually uses, which took
   them from 341KB to under 200KB. If a lot of new text is added in another
   language, or with unusual symbols, the glyphs may be missing - regenerate
   them rather than reaching back for the CDN.

   font-display:swap means text shows immediately in the fallback font and
   swaps when the real one arrives. The alternative is invisible text for the
   first second, which is worse.
   =========================================================================== */

/* ⚠ 600 and 700 were two files with identical bytes - the same weight served
   twice under different names, so anything set to 600 and anything set to 700
   rendered the same while a browser needing both downloaded 18.6KB twice.
   Declared here as one face covering the 600-700 range, which is what it
   actually is. If a genuinely heavier 700 is ever wanted, it needs a real one. */
@font-face{font-family:"Libre Franklin";src:url("/fonts/libre-franklin.woff2") format("woff2");
  font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/fonts/source-serif-4-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/fonts/source-serif-4-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* Fallback faces tuned to match the real ones' proportions. Without these the
   page visibly reflows when the webfont swaps in - text jumps, and Google
   counts that against the site as layout shift. With them the swap is almost
   invisible. */
@font-face{font-family:"LibreFranklin-fallback";src:local("Arial"),local("Helvetica Neue");
  size-adjust:97%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"SourceSerif-fallback";src:local("Georgia"),local("Times New Roman");
  size-adjust:103%;ascent-override:95%;descent-override:28%;line-gap-override:0%}

/* ===========================================================================
   North Canterbury Agrisolutions — shared stylesheet
   Mock-up. Palette and type carried over from Nathan's own build.

   Fonts are self-hosted from /fonts — see the block above this one.
   =========================================================================== */

:root{
  --dark:#3B3B3B; --dark-deep:#2C2C2C; --ink:#17150F; --ink-soft:#57544A;
  --gold:#B8912A;        /* buttons, rules, anything decorative or on dark */
  --gold-deep:#A37F22;
  /* Text-weight gold. The bright one is only 2.8:1 on paper - well under the
     4.5:1 a small uppercase label needs, and small letterspaced type is the
     hardest thing to read at low contrast. This one is 5.05:1 on paper and
     4.62:1 on the panels, and keeps the same hue.
     NEVER use --gold for text on a light background. */
  --gold-text:#84681E;
  --paper:#FAFAF8; --panel:#F1F0EA; --line:#DCD9CE; --white:#fff;

  /* Text sitting ON the dark colour, brightest first. These used to be written
     as literal hex in a dozen rules, which meant they stayed green-tinted no
     matter what --dark was set to. As tokens they move with the scheme. */
  --on-dark:#EDEDED; --on-dark-2:#E8E8E8; --on-dark-soft:#C9C9C9;
  --on-dark-nav:#B9B9B9; --on-dark-mute:#ACACAC; --on-dark-faint:#9A9A9A;

  --font-head:"Libre Franklin","LibreFranklin-fallback","Helvetica Neue",Arial,sans-serif;
  --font-body:"Source Serif 4","SourceSerif-fallback",Georgia,"Times New Roman",serif;

  --size-hero:clamp(1.95rem,4.4vw,3.05rem);
  --size-h2:clamp(1.65rem,3.6vw,2.4rem);
  --size-body:clamp(1.05rem,.4vw + 1rem,1.175rem);
  /* Sections are tighter on a phone, where every two-column grid stacks and the
     page runs about twice the scroll depth of the laptop view — and a little
     tighter on a laptop too, since the top end was more air than the content
     needed. */
  --section:clamp(2.4rem,6vw,4.4rem);
  --width:68rem; --radius:3px;
  /* The masthead is exactly this tall — set with height, not min-height, so it
     cannot grow past it. The bleed hero is pulled up by precisely this amount,
     and any mismatch shows as a strip of page background above the photo.
     If the logo size or the tagline changes, check this still fits. */
  --mast-h:6rem;
}

*{box-sizing:border-box}
/* Smooth for clicks inside a page. NOT on arrival - a page that scrolls itself
   after loading feels like it is moving under you. */
html{scroll-behavior:auto}
html.ready{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:var(--size-body);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-head);margin:0;line-height:1.12;letter-spacing:-.015em}
p{margin:0 0 1rem}
a{color:var(--dark)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--width);margin:0 auto;padding:0 1.3rem}
@media(min-width:56rem){.wrap{padding:0 2rem}}
/* Present for screen readers and for the document outline, invisible on screen.
   Used where a section needs a heading structurally but showing one would be
   repeating what the page title already said. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;background:var(--gold);color:#000;padding:.7rem 1rem;z-index:200}
.skip:focus{left:1rem;top:1rem}

/* Placeholder highlight. Every unfinished thing is visibly unfinished. */
.todo{background:#FFF3CF;color:#4A3A10;border-bottom:2px dotted #C8A032;padding:0 .2em;
  font-style:normal}
/* On the dark footer the pale highlight swallowed the pale text. Same idea,
   inverted, so it still reads as unfinished without becoming unreadable. */
.footer .todo{background:rgba(242,193,78,.16);color:#F2C14E;
  border-bottom-color:rgba(242,193,78,.55)}

/* ---------- masthead ---------- */
.masthead{background:var(--dark);color:var(--on-dark);position:sticky;top:0;z-index:60}

/* --- PHONES -------------------------------------------------------------
   Below 46rem the header has no room for a logo, nav and a call button at
   once. So on a phone the header carries the logo alone and scrolls away,
   and the call lives in a floating button in the thumb zone instead. Bigger
   target, always reachable, and the hero gets the whole screen.
   ----------------------------------------------------------------------- */
@media(max-width:45.99rem){
  .masthead{position:relative}
  .mast-in{justify-content:flex-start}
  .masthead .call-btn{display:none}
  /* Room for the floating call button goes INSIDE the footer, not on the body -
     padding on the body sits below the footer and shows as a white strip. */
  .footer{padding-bottom:6rem}
}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.75rem;height:var(--mast-h)}
/* His own logo does the naming, so there is no text wordmark beside it saying
   the same thing twice. The business name lives in the alt text, the <title>
   and the structured data, so nothing is lost to search or a screen reader.
   Generated from his Facebook logo: background lifted, recoloured to the
   palette. Swap for the vector when it arrives. */
.wordmark{display:block;text-decoration:none;color:inherit;font-family:var(--font-head)}
/* Source artwork is only 158x54 real pixels, so past about 50px tall it starts
   to soften. Sized to sit just under that until the vector arrives. */
.wordmark__logo{display:block;width:auto;height:clamp(40px,9vw,50px);margin-bottom:.3rem}
/* A TAGLINE, not navigation. Nothing here should look tappable. */
.wordmark span{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-mute);margin-top:.28rem;font-weight:600;pointer-events:none}
/* On a phone this sits a couple of centimetres above an h1 saying almost the
   same thing. Two rows of header is enough without repeating ourselves. */
@media(max-width:45.99rem){.wordmark span{display:none}}
.mast-right{display:flex;align-items:center;gap:.9rem}
.call-btn{background:var(--gold);color:#17150F;font-family:var(--font-head);font-weight:800;
  font-size:.92rem;text-decoration:none;padding:.6rem 1.05rem;border-radius:var(--radius);
  white-space:nowrap;min-height:44px;display:flex;align-items:center}
.call-btn:hover{background:var(--gold-deep)}

/* Quiet visible nav — the calm of a hamburger without the hiding.
   Never collapses into a menu. On a phone it takes its own row under the logo,
   which fits now that the call button has moved to the floating one. Five
   pages is inside what anyone can scan, so nothing needs hiding. */
.nav{display:flex;align-items:center}
.nav a{color:var(--on-dark-nav);text-decoration:none;font-family:var(--font-head);font-weight:600;
  border-bottom:2px solid transparent}
.nav a:hover{color:#fff}
/* Tells you where you are — the first question of Krug's trunk test. */
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold)}

@media(min-width:46rem){
  .nav{gap:1.35rem}
  .nav a{font-size:.85rem;padding:.4rem 0}
}

/* --- PHONES: nav gets its own full-width row under the logo --- */
.lbl-short{display:none}

@media(max-width:45.99rem){
  :root{--mast-h:4.6rem}   /* no tagline on phones, so the header is shorter */
  /* One row: logo left, nav right. Fits because the call button has moved to
     the floating one, "The work" shortens to "Work", and the logo comes down a
     little. Nothing is hidden behind a menu. */
  .mast-in{flex-wrap:nowrap;gap:.6rem;padding-block:.55rem}
  .wordmark__logo{height:44px}
  /* Five items now that Contact is back, so the gaps tighten to suit. */
  .nav{gap:.72rem;flex:0 0 auto}
  .nav a{font-size:.78rem;padding:.55rem 0;min-height:44px;display:flex;
    align-items:center;border-bottom-width:2px;white-space:nowrap}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  /* Contact stays. The floating button DIALS - it is not the same thing as the
     contact page, which carries the form, the email and the areas covered.
     Someone who cannot ring right now is exactly the person most likely to
     leave without getting in touch at all. */
}

/* Narrow phones: drop Home — the logo already goes there. */
@media(max-width:25.5rem){
  .nav a[href="/index.html"]{display:none}
  .nav{gap:.85rem}
}

/* ---------- shared blocks ---------- */
.band{padding:var(--section) 0}
.band--panel{background:var(--panel);border-block:1px solid var(--line)}
.eyebrow{font-family:var(--font-head);font-size:.7rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 .6rem}
h2{font-size:var(--size-h2);margin-bottom:.8rem}
.intro{max-width:54ch;margin-bottom:2.4rem;color:var(--ink-soft)}

.btn{background:var(--dark);color:#fff;font-family:var(--font-head);font-weight:800;
  font-size:1.06rem;text-decoration:none;padding:1rem 1.8rem;border-radius:var(--radius);
  display:inline-flex;align-items:center;min-height:48px;border:0;cursor:pointer}
.btn:hover{background:var(--dark-deep)}
.btn--ghost{background:none;color:var(--dark);border:2px solid var(--line)}
.btn--ghost:hover{background:none;border-color:var(--dark)}
.btn--gold{background:var(--gold);color:#17150F}
.btn--gold:hover{background:var(--gold-deep)}

/* "more over here" link — the multi-page glue */
.more{font-family:var(--font-head);font-weight:700;font-size:1rem;display:inline-block;
  margin-top:1.4rem;border-bottom:2px solid var(--gold);text-decoration:none;padding-bottom:2px}
.more:hover{border-bottom-color:var(--dark)}

/* ---------- photo slots ---------- */
/* Every slot reserves its own space via aspect-ratio, so nothing jumps when a
   real photo replaces it. Real <img> tags must carry width and height for the
   same reason — see image-pipeline.md. */
.shot{background:var(--panel);border:1px dashed #C2BDAC;border-radius:var(--radius);
  padding:1.2rem;color:var(--ink-soft);display:flex;flex-direction:column;justify-content:flex-end}
.shot--hero{aspect-ratio:3/2;padding:1.6rem}
.shot--tile{aspect-ratio:4/3}
.shot--portrait{aspect-ratio:4/5}
.shot__label{font-family:var(--font-head);font-weight:800;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 .35rem}
.shot__what{font-family:var(--font-head);font-weight:700;color:var(--ink);margin:0 0 .25rem;
  font-size:1rem;line-height:1.25}
.shot__why{margin:0;font-size:.9rem;line-height:1.45}

/* ===========================================================================
   HERO DESIGNS - see HERO-STYLES.md

   The top of the home page can be laid out five different ways. Which one is in
   use is set by a single attribute on the section:

       <section class="hero" data-hero="stack">

   Every design lives in its own block below and they do not interact: the
   selectors are all prefixed [data-hero="..."]. Switching is a one-word change
   in index.html, and switching back costs nothing because none of this is
   deleted when another design is chosen.

   THE MARKUP IS THE SAME FOR ALL OF THEM. Only the CSS differs.
   =========================================================================== */

/* ---------- shared by every hero design ---------- */
.hero h1{font-size:var(--size-hero);margin-bottom:1.1rem;text-wrap:balance}
.hero .lede{font-size:clamp(1.12rem,2vw,1.35rem);color:var(--ink-soft);margin-bottom:1.8rem}
.hero-acts{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.hero-acts .btn{flex:0 1 auto}
/* On a phone these wrapped onto two lines, which reads as a list rather than a
   choice and costs vertical space the hero cannot spare. Equal widths, slightly
   tighter type, so they sit side by side. Each is still ~150x48px, well over
   the 44px minimum for a tap target. */
@media(max-width:30rem){
  .hero-acts{gap:.6rem;flex-wrap:nowrap}
  .hero-acts .btn{flex:1 1 0;justify-content:center;text-align:center;
    font-size:.97rem;padding-inline:.7rem;white-space:nowrap}
}
.hero-blurb{margin-top:1.7rem;font-size:1.06rem;padding-left:1rem;
  border-left:3px solid var(--gold)}
.hero-note{margin-top:1rem;color:var(--ink-soft);font-size:.98rem}
.hero-shot{margin:2.4rem 0 0}
.hero-shot img{aspect-ratio:3/2;height:auto}

/* =====================================================================
   A - stack: heading and buttons left, photo right, introduction under.
   Conventional. Words never sit on the photo, so they are always readable.
   ===================================================================== */
.hero[data-hero="stack"]{padding:var(--section) 0 0}
[data-hero="stack"] h1{max-width:17ch}
[data-hero="stack"] .lede{max-width:46ch}

@media(max-width:59.99rem){
  [data-hero="stack"] .wrap{display:flex;flex-direction:column}
  [data-hero="stack"] .hero-text{order:1}
  [data-hero="stack"] .hero-intro{order:2}
  [data-hero="stack"] .hero-shot{order:3;margin-top:2rem}
}
@media(min-width:60rem){
  [data-hero="stack"] .wrap{display:grid;grid-template-columns:.86fr 1.14fr;
    gap:1.9rem 3rem;align-items:start}
  [data-hero="stack"] .hero-text{grid-column:1;grid-row:1;align-self:center}
  [data-hero="stack"] .hero-shot{grid-column:2;grid-row:1;margin:0;align-self:center}
  [data-hero="stack"] .hero-intro{grid-column:1 / -1;grid-row:2;margin-top:0}
  [data-hero="stack"] h1{max-width:none}
  [data-hero="stack"] .lede{max-width:none}
  [data-hero="stack"] .hero-blurb{font-size:1.14rem;margin:0}
}

/* =====================================================================
   B - bleed: the photo fills the screen behind the words.

   Three things have to be true for this to work, and each of them was a bug
   the first time round:

   - The SECTION is the positioning context, not .wrap. If .wrap is relative,
     an absolutely positioned photo fills the centred column instead of the
     screen, and you get letterboxing.
   - The words need a stacking context ABOVE the photo. The photo comes after
     them in the markup, so without this it paints straight over them.
   - The masthead has a known height, and the hero is pulled up by exactly that
     amount. Absolutely positioning the header instead lands it at the top of
     the PAGE, which collides with anything above it - such as the
     in-development notice.

   USE A DARK, SIMPLE PHOTO. A busy one needs a heavier overlay, which wastes
   the picture.
   ===================================================================== */
.hero[data-hero="bleed"]{position:relative;min-height:min(88vh,700px);display:flex;
  align-items:flex-end;background:#1a1410;padding:0;
  margin-top:calc(-1 * var(--mast-h))}

/* .wrap must NOT be positioned here — see the note above. */
/* The hero is bottom-aligned (align-items:flex-end), so SHORTER content sits
   LOWER, not higher - which is why putting the buttons on one line pushed the
   heading down. Less bottom padding on a phone brings the block back up. */
[data-hero="bleed"] .wrap{position:static;width:100%;
  padding-block:4rem calc(4rem + env(safe-area-inset-bottom,0px));
  padding-top:calc(var(--mast-h) + 3rem)}
@media(max-width:52rem){
  [data-hero="bleed"] .wrap{padding-block:2rem calc(2.2rem + env(safe-area-inset-bottom,0px))}
  .hero[data-hero="bleed"]{min-height:min(84vh,660px)}
}

[data-hero="bleed"] .hero-shot{position:absolute;inset:0;margin:0;z-index:0}
[data-hero="bleed"] .hero-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:auto;border-radius:0;outline:0}

/* Two overlays, both between photo and words.
   ::before darkens the strip behind the header, so the cream logo and the nav
   read no matter how bright the sky is at that point in the picture.
   ::after darkens the left where the words sit, clearing to the right so the
   photograph still does its job. */
.hero[data-hero="bleed"]::before{content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--mast-h) + 3.5rem);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,6,.62) 0%,rgba(10,8,6,.28) 55%,
    rgba(10,8,6,0) 100%)}
.hero[data-hero="bleed"]::after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(12,10,8,.88) 0%,rgba(12,10,8,.66) 44%,
    rgba(12,10,8,.18) 76%)}
@media(max-width:52rem){
  .hero[data-hero="bleed"]::after{background:linear-gradient(180deg,rgba(12,10,8,.62) 0%,
    rgba(12,10,8,.34) 35%,rgba(12,10,8,.84) 78%,rgba(12,10,8,.93) 100%)}
}

/* the words, lifted clear of both */
[data-hero="bleed"] .hero-text{position:relative;z-index:2}
[data-hero="bleed"] h1{color:#fff;max-width:17ch;text-shadow:0 2px 22px rgba(0,0,0,.5)}
[data-hero="bleed"] .lede{color:#E7E1D6;max-width:44ch}
[data-hero="bleed"] .btn--ghost{background:none;color:#fff;border-color:rgba(255,255,255,.6)}
[data-hero="bleed"] .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* the introduction moves onto paper below the hero instead */
[data-hero="bleed"] .hero-intro{display:none}

/* =====================================================================
   D - split: half words, half photo, photo running off the window edge.
   The photo gets presence without the words ever sitting on it.
   ===================================================================== */
.hero[data-hero="split"]{display:grid;grid-template-columns:1fr;background:var(--paper);
  padding:0}
@media(min-width:60rem){
  .hero[data-hero="split"]{grid-template-columns:1fr 1fr;min-height:min(80vh,620px)}
}
[data-hero="split"] .wrap{max-width:none;margin:0;padding:0;display:contents}
[data-hero="split"] .hero-text{display:flex;flex-direction:column;justify-content:center;
  padding:3.5rem 1.3rem}
@media(min-width:60rem){
  [data-hero="split"] .hero-text{padding:4rem 3rem 4rem max(2rem,calc((100vw - 68rem)/2 + 2rem))}
}
[data-hero="split"] .hero-shot{position:relative;min-height:320px;margin:0}
[data-hero="split"] .hero-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:auto;border-radius:0}
[data-hero="split"] .hero-intro{grid-column:1/-1;padding:0 1.3rem 2.4rem}
@media(min-width:60rem){
  [data-hero="split"] .hero-intro{padding:2.4rem max(2rem,calc((100vw - 68rem)/2 + 2rem))}
}

/* =====================================================================
   E - band: a strip of photo across the top, words full width beneath.
   The simplest, and it gives the text the whole page width.
   ===================================================================== */
.hero[data-hero="band"]{padding:0 0 var(--section)}
[data-hero="band"] .wrap{display:block;max-width:none;padding:0}
[data-hero="band"] .hero-shot{margin:0 0 var(--section);height:clamp(240px,38vw,420px);
  position:relative}
[data-hero="band"] .hero-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:auto;border-radius:0}
[data-hero="band"] .hero-text,[data-hero="band"] .hero-intro{max-width:68rem;margin:0 auto;
  padding-inline:1.3rem}
@media(min-width:56rem){
  [data-hero="band"] .hero-text,[data-hero="band"] .hero-intro{padding-inline:2rem}
}
[data-hero="band"] h1{max-width:20ch}

/* =====================================================================
   F - panel: photo fills the band, words sit on a solid card over it.
   Always readable, because the text never touches the photograph.
   ===================================================================== */
.hero[data-hero="panel"]{position:relative;padding:5rem 0;background:#20281f}
[data-hero="panel"] .hero-shot{position:absolute;inset:0;margin:0}
[data-hero="panel"] .hero-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;aspect-ratio:auto;border-radius:0;opacity:.58;outline:0}
[data-hero="panel"] .wrap{position:relative;z-index:2}
[data-hero="panel"] .hero-text{background:var(--paper);padding:2.6rem;
  border-radius:var(--radius);max-width:42rem;box-shadow:0 18px 50px rgba(0,0,0,.32)}
@media(max-width:48rem){[data-hero="panel"] .hero-text{padding:1.8rem}}
[data-hero="panel"] .hero-intro{display:none}

/* ---------- the introduction, when a design pushes it out of the hero ----------
   bleed and panel cover the screen, so Nathan's introduction goes on paper
   underneath instead. The block is in the markup on every design and simply
   hidden when the hero itself is carrying it. */
/* WHO YOU ARE DEALING WITH — the merged block under the hero.
   Was 2.6rem of padding plus the blurb's own margins, which read as roughly
   double the height the content needed. */
.hero-after{background:var(--paper);padding:2.2rem 0 2.4rem;display:none}
.meet{display:grid;gap:1.6rem;align-items:center}
@media(min-width:52rem){.meet{grid-template-columns:1fr minmax(0,15rem);gap:3rem}}
.meet .hero-blurb{margin:0}
.meet .hero-note{margin-top:.9rem}
.meet .more{margin-top:1.1rem}
.meet__shot{margin:0}
.meet__shot img{aspect-ratio:4/5;height:auto}
@media(max-width:51.99rem){.meet__shot{max-width:14rem}}
body[data-hero-page="bleed"] .hero-after,
body[data-hero-page="panel"] .hero-after{display:block}

/* ---------- transparent masthead, for the designs that need it ---------- */
/* Sticky AND transparent. Sticky stays in flow, so the hero can be pulled up
   behind it with a negative margin - which is why --mast-h must be a fixed
   value. Once you scroll past the photo the header would be transparent over
   white, so a small script adds .is-stuck and it goes solid. Without the
   script it simply stays transparent, which is the old behaviour. */
body[data-hero-page="bleed"] .masthead,
body[data-hero-page="panel"] .masthead{position:sticky;top:0;z-index:60;
  background:transparent;transition:background .25s ease}
body[data-hero-page="bleed"] .masthead.is-stuck,
body[data-hero-page="panel"] .masthead.is-stuck{background:var(--dark)}
body[data-hero-page="bleed"] .masthead.is-stuck .nav a,
body[data-hero-page="panel"] .masthead.is-stuck .nav a{text-shadow:none}
body[data-hero-page="bleed"] .masthead.is-stuck .wordmark__logo,
body[data-hero-page="panel"] .masthead.is-stuck .wordmark__logo{filter:none}
@media(prefers-reduced-motion:reduce){
  body[data-hero-page="bleed"] .masthead{transition:none}
}
@media(max-width:52rem){
  body[data-hero-page="bleed"] .hero[data-hero="bleed"]{min-height:min(92vh,720px)}
}
body[data-hero-page="bleed"] .nav a,
body[data-hero-page="panel"] .nav a{color:var(--on-dark-2);text-shadow:0 1px 4px rgba(0,0,0,.55)}
body[data-hero-page="bleed"] .nav a:hover,
body[data-hero-page="panel"] .nav a:hover{color:#fff}
body[data-hero-page="bleed"] .wordmark__logo,
body[data-hero-page="panel"] .wordmark__logo{filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}

/* ---------- the conversation offer ---------- */
.offer{background:var(--dark);color:var(--on-dark);margin-top:var(--section)}
.offer .wrap{padding-block:clamp(2rem,5vw,3rem);display:grid;gap:1.4rem;align-items:center}
@media(min-width:52rem){.offer .wrap{grid-template-columns:1fr auto;gap:2.5rem}}
.offer h2{font-size:clamp(1.4rem,3vw,1.95rem);margin-bottom:.6rem;color:#fff}
.offer p{margin:0;color:var(--on-dark-soft);max-width:52ch}

/* ---------- work: recognition, not a catalogue ---------- */
.work{display:grid;gap:2rem}
@media(min-width:52rem){.work{grid-template-columns:1fr 1fr;gap:2.6rem 3rem}}
.work > div{border-top:2px solid var(--gold);padding-top:1.1rem}
.work h3{font-size:1.25rem;margin-bottom:.5rem}
.work p{margin:0;color:var(--ink-soft);font-size:1.02rem}
.work-tail{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:1.05rem}
/* Enough of an answer to "do you come to where I am?" to stop someone leaving,
   and enough place names for search to see. The full list is on About. */
/* Place-name chips. This rule was lost once already in a stylesheet rewrite,
   and without it the spans run together into one unreadable word - so if the
   areas list ever looks like "OhokaRangioraKaiapoi", this is what is missing. */
.areas{display:flex;flex-wrap:wrap;gap:.5rem}
.areas span{background:var(--white);border:1px solid var(--line);border-radius:99px;
  padding:.42rem 1rem;font-size:.95rem;color:var(--ink);line-height:1.3}
.band--panel .areas span{background:var(--paper)}

.areas-line{margin:.9rem 0 0;color:var(--ink-soft);font-size:1rem;max-width:70ch}
.areas-line a{font-family:var(--font-head);font-weight:700;white-space:nowrap}

/* ---------- galleries ---------- */
.gallery{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:40rem){.gallery{grid-template-columns:1fr 1fr}}
@media(min-width:60rem){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery .tile img{aspect-ratio:4/3}
.gallery--full{grid-template-columns:1fr}
@media(min-width:40rem){.gallery--full{grid-template-columns:1fr 1fr}}
@media(min-width:60rem){.gallery--full{grid-template-columns:repeat(3,1fr)}}

/* ---------- cost explainer ---------- */
.price-list{list-style:none;margin:0;padding:0}
.price-list li{padding:1rem 0 1rem 1.8rem;border-bottom:1px solid var(--line);position:relative}
.price-list li::before{content:"";position:absolute;left:0;top:1.55rem;width:9px;height:9px;
  background:var(--gold);border-radius:1px}
.price-list b{font-family:var(--font-head);display:block;font-size:1.02rem}
.price-list span{color:var(--ink-soft);font-size:.97rem}

/* ---------- questions ---------- */
.qa{display:grid;gap:1.6rem}
@media(min-width:52rem){.qa{grid-template-columns:1fr 1fr;gap:2rem 3rem}}
.qa h3{font-size:1.1rem;margin-bottom:.45rem}
.qa p{margin:0;color:var(--ink-soft);font-size:1rem}

/* ---------- about ---------- */
.about{display:grid;gap:2rem}
@media(min-width:52rem){.about{grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start}}

/* ---------- contact ---------- */
/* The form sits level with the heading and the phone number rather than below
   them, so someone who has already decided can start typing without scrolling. */
.contact{display:grid;gap:2.4rem}
@media(min-width:56rem){.contact{grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}}
.contact__lead h1{max-width:14ch}
.direct dt{font-family:var(--font-head);font-weight:800;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.direct dd{margin:.2rem 0 1.3rem;font-size:1.1rem}
.direct dd a{font-weight:600}
.elsewhere{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.elsewhere a{font-size:1rem}
.big-num{font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,4vw,2.2rem);
  text-decoration:none;letter-spacing:-.02em;display:inline-block;margin-bottom:.3rem}
.form .field{margin-bottom:1.05rem}
label{display:block;font-family:var(--font-head);font-weight:700;font-size:.92rem;margin-bottom:.32rem}
.hint{font-weight:400;color:var(--ink-soft);font-size:.86rem}
input,select,textarea{width:100%;padding:.8rem .9rem;font:inherit;font-size:1rem;
  border:1px solid #C6C1B2;border-radius:var(--radius);background:#fff;color:var(--ink);min-height:48px}
textarea{min-height:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;
  border-color:var(--dark)}
.honey{position:absolute;left:-9999px}
.req{color:var(--gold-text);font-weight:800}
.form-req{font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}
.form small{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:.9rem}
.form-lead{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
@media(min-width:40rem){.form-lead{padding:1.9rem}}

/* ---------- long-form pages: privacy and anything like it ---------- */
.prose{max-width:60ch}
.prose h2{font-size:1.28rem;margin:2.2rem 0 .7rem}
.prose ul{margin:0 0 1rem;padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.prose .intro{margin-bottom:1.4rem}
.last-updated{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:.92rem}
/* The note to Nathan. Deliberately ugly so it cannot be mistaken for the policy
   or left on the live site by accident. */
.policy-note{margin-top:2.4rem;background:#FFF6E0;border:2px dashed #D9A441;border-radius:4px;
  padding:1.2rem 1.4rem;font-size:.94rem;color:#5C4718}
.policy-note p:last-child{margin-bottom:0}


/* ===========================================================================
   FOCUS — where the keyboard is

   Anyone navigating by keyboard, and anyone using a screen reader, needs to see
   which thing is currently selected. Browsers draw a default outline; designers
   routinely remove it because it is ugly, and that is the single most common way
   a site becomes unusable without a mouse.

   :focus-visible is the modern answer - it shows the ring for keyboard users
   and not for mouse clicks, so nobody has to choose between the two.
   =========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:2px;
}
/* On the dark green the gold ring can vanish into the background, so it gets a
   light halo behind it. */
.masthead :focus-visible,.footer :focus-visible,.offer :focus-visible,
[data-hero="bleed"] :focus-visible{
  outline-color:#FFF;
  box-shadow:0 0 0 5px rgba(184,145,42,.85);
}
/* Never remove the outline without putting something else in its place. */

/* The skip link is the first thing a keyboard user meets. It must be visible
   the moment it is focused, not merely present in the markup. */
.skip:focus-visible{outline:3px solid var(--dark);outline-offset:2px}

/* ---------- footer ---------- */
.footer{background:var(--dark);color:var(--on-dark-soft);padding:2.6rem 0 3rem;font-size:.96rem}
.footer-grid{display:grid;gap:1.7rem}
@media(min-width:46rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
/* These were <h3> elements, which put an h3 straight after the h1 on short
   pages - a broken document outline. They are paragraphs now: they look
   identical and no longer claim to be headings. */
.footer .footer-head{font-family:var(--font-head);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark-faint);margin:0 0 .5rem;font-weight:700}
.footer a{color:var(--on-dark);text-decoration:none;display:block;padding:.16rem 0}
.footer a:hover{color:var(--gold)}
.footer-base{border-top:1px solid #3C4A3D;margin-top:1.8rem;padding-top:1.2rem;font-size:.85rem;
  color:var(--on-dark-faint)}

/* ---------- floating call, phones only ---------- */
.floatcall{position:fixed;right:14px;bottom:14px;z-index:80;background:var(--gold);
  color:#17150F;font-family:var(--font-head);font-weight:800;font-size:1.02rem;
  text-decoration:none;padding:.95rem 1.4rem;border-radius:999px;
  box-shadow:0 4px 18px rgba(23,21,15,.35);display:none;align-items:center;gap:.5rem;
  min-height:54px}
.floatcall:hover,.floatcall:focus{background:var(--gold-deep)}
.floatcall svg{width:19px;height:19px;flex:0 0 auto}
@media(max-width:45.99rem){.floatcall{display:inline-flex}}

/* ---------- motion: a lift, not a show ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}

/* ---------- mock-up marker. Remove when this stops being a mock-up. ---------- */
.concept-tag{position:fixed;left:10px;bottom:10px;z-index:150;background:rgba(23,21,15,.9);
  color:#F2DFB4;border:1px solid rgba(184,145,42,.5);border-radius:4px;padding:5px 9px;
  font-family:var(--font-head);font-size:10px;font-weight:700;pointer-events:none}

/* ===========================================================================
   PHOTOS
   .ph carries the low-res stand-in marker. When the real originals go in,
   delete the .ph::after rule below — that is the whole reminder system.
   =========================================================================== */
.ph{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius);
  background:#D9D6CC}
.ph--hero{aspect-ratio:3/2}
.hero-shot{margin:2.4rem 0 0;position:relative}
.hero-shot img{aspect-ratio:3/2;height:auto}

.tile{margin:0;display:flex;flex-direction:column}
.tile img{aspect-ratio:4/3;height:auto}
.tile figcaption{font-size:.88rem;color:var(--ink-soft);padding-top:.5rem;line-height:1.4}

/* full-bleed breather */
.feature{position:relative;margin-block:var(--section)}
.ph--feature{aspect-ratio:21/9;border-radius:0}
@media(max-width:40rem){.ph--feature{aspect-ratio:4/3}}
.feature__cap{position:absolute;left:0;bottom:0;margin:0;background:var(--dark);color:var(--on-dark);
  font-family:var(--font-head);font-weight:700;font-size:.9rem;padding:.6rem 1.1rem}

/* --- LOW-RES STAND-IN MARKER --------------------------------------------
   Every image still outlined is a 206px Facebook thumbnail standing in.
   Add .ph--real as each genuine photo goes in; delete both rules when the
   last stand-in is gone. --------------------------------------------------- */
.ph{outline:2px dashed rgba(184,145,42,.55);outline-offset:-2px}
.ph--real{outline:0}

/* The line at the foot of the photo gallery pointing at Facebook.
   Centred and quiet - it is a way out of the page, not a call to action. */
.more-photos {
  margin: 2.5rem auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: .97rem;
}