/* ======================================================== ORCHARD =======
   Stone and British racing green alternating as full-bleed surfaces:
   green header, stone hero, green service cards, stone process and
   estimate, green contact, green footer. Roughly half the page is green,
   and the switch between the two is what gives the page its rhythm.

   Chosen 2026-08-26 from three green treatments of the Estate direction.
   The blueprint grid is retired with the blue it was drawn in — the band
   rhythm does the structural work it used to do.

   Role names only, never hue names. Shared Nikea foundation underneath.
   ==================================================================== */
:root{
  /* stone surfaces */
  --stone:#f1efe8; --stone-2:#e7e4db;
  --ink:#16241c; --ink-2:#3d4c43; --muted:#5c6a61;
  --rule:rgba(22,36,28,.16); --rule-soft:rgba(22,36,28,.08);

  /* green surfaces */
  --green:#0b3325; --green-2:#0e3e2c; --green-deep:#092a1f;
  --on-green:#edeae0; --on-green-2:#c6cfc4; --green-muted:#9db0a2;
  --rule-on-green:rgba(237,234,224,.16);

  /* marks */
  --mark:#245c43;          /* green mark on stone, contrast-safe */
  --sage:#a8c4ae;          /* pale mark on green */

  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* shared Nikea foundation */
  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --s-8:64px; --s-9:96px; --s-10:128px;
  --container:1200px; --gutter:clamp(24px,4vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1); --dur-1:150ms; --dur-2:200ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;background:var(--stone);
  display:flex;flex-direction:column;min-height:100vh;
}
::selection{background:rgba(11,51,37,.18)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

.skip{position:absolute;left:-9999px;background:var(--green);color:var(--on-green);
  padding:12px 20px;z-index:100;border-radius:2px}
.skip:focus{left:12px;top:12px}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mark);margin:0 0 var(--s-6)}

/* --- header: green band ------------------------------------------------ */
header{background:var(--green-deep);color:var(--on-green);border-bottom:0}
.top{display:flex;align-items:center;justify-content:space-between;height:74px;gap:var(--s-5)}
.brand{font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--on-green)}
.brand i{color:var(--sage);font-style:normal}
nav{display:flex;gap:var(--s-5);align-items:center}
nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-muted);transition:color var(--dur-1) var(--ease)}

main{flex:1}
section{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--rule-soft)}
section:first-child{padding-top:clamp(64px,10vw,128px)}

h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.6vw,80px);line-height:1.02;
  letter-spacing:-.02em;margin:0;max-width:15ch;text-wrap:balance}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,46px);letter-spacing:-.016em;
  line-height:1.12;margin:0;max-width:19ch;text-wrap:balance}
.lede{margin:var(--s-7) 0 0;max-width:52ch;font-size:clamp(17px,1.7vw,20px);line-height:1.56;
  color:var(--ink-2)}
.hero-meta{margin:var(--s-7) 0 0;display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--rule);padding-top:var(--s-4)}
.body{margin:var(--s-5) 0 0;max-width:60ch;font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.body p{margin:0 0 var(--s-4)}
.body p:last-child{margin:0}

/* --- services: green cards on stone ------------------------------------ */
.svcs{margin-top:var(--s-7);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule-on-green);border:1px solid var(--green)}
/* The card was one padded box. It is now a full-bleed picture above a padded
   body, so the photograph reaches the card edges instead of floating inside a
   margin — which is what made the mockup read as a brochure rather than a page. */
.svc{padding:0;background:var(--green);color:var(--on-green)}
.svc-body{padding:clamp(26px,3vw,34px) clamp(22px,2.4vw,28px)}
.svc-pic{line-height:0;background:var(--green-deep)}
.svc-pic img{width:100%;height:auto;display:block;object-fit:cover}
.svc-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sage);
  display:block;margin-bottom:var(--s-4)}
.svc h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;margin:0 0 var(--s-3)}
.svc p{margin:0;font-size:15px;line-height:1.62;color:var(--on-green-2)}
.svc ul{margin:var(--s-5) 0 0;padding:var(--s-4) 0 0;list-style:none;display:grid;gap:var(--s-2);
  border-top:1px solid var(--rule-on-green)}
.svc li{font-size:14px;color:var(--green-muted);padding-left:15px;position:relative}
.svc li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--sage)}

/* --- process: stone ----------------------------------------------------- */
.steps{margin-top:var(--s-7);display:grid;gap:0;border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:80px minmax(0,1fr) minmax(0,1.3fr);gap:var(--s-5);
  padding:var(--s-5) 0;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.step-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--mark)}
.step h3{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-.012em;margin:0}
.step p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2)}

/* --- estimate panel: stone, outlined in green --------------------------- */
.panel{margin-top:var(--s-7);border:1px solid var(--green);background:var(--stone-2);
  display:grid;grid-template-columns:1.2fr 1fr}
.panel-body{padding:clamp(24px,3.4vw,38px)}
.panel-body h3{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.014em;
  margin:var(--s-3) 0 0}
.panel-body p{margin:var(--s-4) 0 0;font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.spec-list{margin:0;padding:clamp(24px,3.4vw,38px);border-left:1px solid var(--rule);font-size:15px}
.spec-list div{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;
  border-bottom:1px solid var(--rule-soft)}
.spec-list div:last-child{border-bottom:0}
.spec-list dt{color:var(--ink-2);margin:0}
.spec-list dd{margin:0;color:var(--mark);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase}

/* --- contact: green band ------------------------------------------------ */
section.contact-band{background:var(--green);color:var(--on-green);border-bottom:0}
section.contact-band .label{color:var(--sage)}
section.contact-band h2{color:var(--on-green)}
section.contact-band .lede,
section.contact-band .body,
section.contact-band .body p{color:var(--on-green-2)}
section.contact-band .body{border-color:var(--rule-on-green)}
.contact{margin-top:var(--s-7);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.contact div{display:flex;flex-direction:column;gap:var(--s-2)}
.contact dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-muted);margin:0}
.contact dd{margin:0;font-size:16.5px;color:var(--on-green)}
.contact a{color:var(--sage);border-bottom:1px solid rgba(168,196,174,.4);
  transition:border-color var(--dur-1) var(--ease)}
/* Digits that sit in a column or get compared use tabular figures. */
.rc,.contact dd,.fin,.hero-meta,.label{font-variant-numeric:tabular-nums}

/* --- footer: deepest green ---------------------------------------------- */
footer{border-top:1px solid var(--rule-on-green);background:var(--green-deep);color:var(--green-muted)}
.fin{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:space-between;
  padding:var(--s-5) 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.fin a{color:var(--green-muted)}

@media (max-width:860px){
  .svcs{grid-template-columns:1fr}
  .svc{border-bottom:1px solid var(--rule-on-green)}
  .svc:last-child{border-bottom:0}
  .step{grid-template-columns:56px 1fr;gap:var(--s-2) var(--s-4)}
  .step p{grid-column:2}
  .panel{grid-template-columns:1fr}
  .spec-list{border-left:0;border-top:1px solid var(--rule)}
  .contact{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .contact{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- hover --
   Every hover rule lives here, behind a pointer query, and nowhere else.
   On a touchscreen a tap synthesises hover and the state STAYS until you
   tap elsewhere; width queries do not help, because width is not input
   type. Keep new hover rules inside this block.                          */
@media (hover: hover) and (pointer: fine) {
  nav a:hover{color:var(--on-green)}
  .contact a:hover{border-bottom-color:var(--sage)}
  .fin a:hover{color:var(--on-green)}
}

/* -------------------------------------------------------- touch targets --
   44px is a fingertip figure (Apple HIG, WCAG AAA 2.5.5), not a mouse one;
   the AA minimum is 24px. Height goes to coarse pointers only, so desktop
   density is preserved, and comes from padding, never font size.         */
@media (pointer: coarse) {
  nav a{display:inline-block;padding:13px 0}
  dd a{display:inline-block;padding:11px 0}
  .fin a{display:inline-block;padding:13px 0}
}

/* --- multi-page nav ------------------------------------------------------
   Added when the one-pager became five real pages. Deliberately JavaScript-free:
   the CSP on this site is `script-src 'none'`, which is worth keeping, and a
   burger menu is exactly where the keyboard traps on the sibling sites came
   from. Four short mono links wrap onto a second line instead. */
nav{flex-wrap:wrap;row-gap:var(--s-6)}
nav a[aria-current="page"]{color:var(--on-green)}
nav a[aria-current="page"]::after{content:"";display:block;height:1px;
  background:var(--sage);margin-top:4px}
.nav-cta{color:var(--on-green)!important;border:1px solid var(--green-muted);
  padding:8px 14px!important;border-radius:2px;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.nav-cta[aria-current="page"]::after{display:none}
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{border-color:var(--sage);background:rgba(255,255,255,.06)}
}
@media (max-width:640px){
  .top{height:auto;padding:var(--s-6) 0;flex-wrap:wrap;align-items:flex-start}
}
@media (pointer:coarse){
  /* The brand was a <span> on the one-pager. Making it the link home turned it
     into a tap target, and it was measured at 32px. The nav CTA came in at 36px. */
  .brand{display:inline-block;padding:6px 0}
  .nav-cta{padding:12px 14px!important}
}

/* --- cross-page links ---------------------------------------------------
   Five pages need a way through to each other from the body, not only the nav.
   Mono and uppercase so it reads as navigation rather than as prose, and sized
   down from the running text so it never competes with the heading above it. */
.more{margin:var(--s-6) 0 0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase}
.more a{color:var(--mark);border-bottom:1px solid rgba(36,92,67,.35);
  padding-bottom:2px;transition:border-color var(--dur-1) var(--ease)}
.contact-band .more a{color:var(--sage);border-bottom-color:rgba(168,196,174,.4)}
@media (hover:hover) and (pointer:fine){
  .more a:hover{border-bottom-color:var(--mark)}
  .contact-band .more a:hover{border-bottom-color:var(--sage)}
}
@media (pointer:coarse){
  /* 44px is the fingertip figure, and these were measured at 43px — one pixel
     short is still a fail, and the audit is right to say so. */
  .more a{display:inline-block;padding:12px 0 14px}
}

/* --- image band ----------------------------------------------------------
   A full-bleed two-column band: photograph on one side, the argument on the
   other. Deliberately NOT text-over-image — Orchard sets black on stone and
   pale on green, and neither survives being laid over a photograph without a
   veil heavy enough to make the photograph pointless. Side by side keeps both
   at full strength, which is the same reason the contact band is a flat colour.

   The image column has no min-height: the picture sets the height and the copy
   centres against it, so a short paragraph cannot strand itself at the top of a
   tall photograph. */
/* padding:0 is not cosmetic. The global `section` rule sets
   padding:clamp(56px,8vw,104px) 0, and this band IS a section — so the first
   build shipped the photograph floating in a green margin instead of reaching
   the band edges. Full-bleed is the whole point of a band. */
.band-img{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:0;
  background:var(--green);color:var(--on-green);border-bottom:0}
.band-pic{line-height:0;overflow:hidden;background:var(--green-deep)}
.band-pic{display:flex}
.band-pic img{width:100%;height:100%;min-height:100%;object-fit:cover;display:block;
  aspect-ratio:auto!important}
.band-say{padding:clamp(30px,5vw,68px) clamp(24px,4vw,56px);
  display:flex;flex-direction:column;justify-content:center}
.band-say .label{color:var(--sage)}
.band-say h2{color:var(--on-green);margin-top:0}
.band-say .body,.band-say .body p{color:var(--on-green-2);border-color:var(--rule-on-green)}
.band-say .more a{color:var(--sage);border-bottom-color:rgba(168,196,174,.4)}
@media (hover:hover) and (pointer:fine){
  .band-say .more a:hover{border-bottom-color:var(--sage)}
}
@media (max-width:720px){
  .band-img{grid-template-columns:1fr}
  .band-pic img{max-height:44vh}
}

/* ==========================================================================
   MOTION — three behaviours, no JavaScript
   ==========================================================================
   This site's CSP is `script-src 'none'` and that is worth keeping: it is the
   only one of the four sites with no executable script at all, and the keyboard
   traps on the other two both came from a burger menu. So the scroll reveals
   here are CSS scroll-driven animations rather than an IntersectionObserver.

   The critical detail is the DIRECTION of the fallback. The other sites set
   .rv { opacity: 0 } and rely on JS to reveal it — with scripting off, their
   prerendered HTML contains the whole page and shows none of it, which is why
   they need a <noscript> override. Here the default state is VISIBLE and the
   animation only exists inside @supports. A browser without scroll-driven
   animations shows the finished page; it does not show a blank one. Nothing can
   hide content by failing.

   Three behaviours site-wide, not one per section:
     1. rise      — content lifts 12px and fades as it enters
     2. stagger   — siblings arrive in sequence, 70ms apart, capped at 6
     3. settle    — photographs scale 1.03 -> 1 so they land rather than pop

   Only transform and opacity are animated. Entrances are 520ms; the two
   interactive transitions on the site stay at 150-200ms, because reacting to a
   click and introducing a section are different jobs. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* 1 + 2 — rise, staggered */
    section > .wrap > *,
    .svcs > .svc,
    .steps > .step,
    .band-say > * {
      animation: rise 520ms var(--ease) both;
      animation-timeline: view();
      /* Start as the element's top passes 88% of the viewport and finish by
         62%: the movement completes well before the element is centred, so it
         reads as arriving rather than as something still moving while read. */
      animation-range: entry 12% cover 38%;
    }

    /* Stagger by RANGE, not delay. animation-delay is ignored on a
       progress-based timeline — the animation is positioned by scroll, not by
       time, so a delay has nothing to delay against. The first version of this
       used :nth-child delays and produced no stagger at all; the three cards
       moved as one block and the CSS looked correct. Each sibling now starts a
       little further into its own entry instead. */
    .svcs > .svc:nth-child(2),
    .steps > .step:nth-child(2) { animation-range: entry 19% cover 43%; }
    .svcs > .svc:nth-child(3),
    .steps > .step:nth-child(3) { animation-range: entry 26% cover 48%; }
    .steps > .step:nth-child(4) { animation-range: entry 33% cover 53%; }
    .steps > .step:nth-child(5) { animation-range: entry 40% cover 58%; }

    /* 3 — settle. Photographs only, and the scale is small on purpose: at 1.03
       the crop shifts by about 9px on a 640px band, which reads as the image
       coming to rest. Anything larger reads as a zoom effect. */
    .svc-pic img,
    .band-pic img {
      animation: settle 700ms var(--ease) both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}