/* ======================================================== 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)}
.svc{padding:clamp(26px,3vw,34px) clamp(22px,2.4vw,28px);background:var(--green);color:var(--on-green)}
.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}
}