/* ============================================================
   ALEXANDER JAMES GARDEN SERVICES
   ============================================================
   Design ground: the botanical plate. Paper, one ink, one printed
   spot colour — which is not a style borrowed from his logo, it is
   a description of his actual craft. He draws his gardens in pencil
   and watercolour before he builds them.

   Brand green #484f1c is SAMPLED from his crest, not eyeballed.
   See source-material/DESIGN-DIRECTION.md.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --olive:#484f1c;        /* sampled from the crest — the brand ink */
  --olive-lt:#6b7434;
  --ink:#1e2216;          /* near-black with green in it */
  --muted:#5d6350;
  --paper:#fbfaf6;        /* paper white — deliberately NOT cream */
  --stone:#e8e6dc;
  --madder:#8e3b46;       /* the single accent: a plant dye, not terracotta */
  --line:rgba(30,34,22,.14);

  --disp:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Work Sans',system-ui,-apple-system,sans-serif;

  --wrap:1180px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.16,1,.3,1);
}

html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}

/* reveals — reduced motion must show the FINISHED state, never a blank one */
.rv{opacity:0;transform:translateY(20px)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    animation-iteration-count:1!important}
}
.no-js .rv{opacity:1;transform:none}

/* eyebrow — echoes the crest's letterspaced "DESIGN • REALISATION • CARE" */
.eyebrow{font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:var(--olive)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(251,250,246,.97);
  border-bottom:1px solid var(--line);padding:calc(.55rem + var(--safe-t)) 0 .55rem}
.hd-in{display:flex;align-items:center;gap:1.3rem}
.hd .brand{display:flex;align-items:center;min-height:44px;text-decoration:none}
.hd .brand img{height:46px;width:auto}
.hd nav{margin-left:auto;display:flex;gap:1.4rem;align-items:center}
.hd nav a{text-decoration:none;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--muted);transition:color .18s}
.hd nav a:hover,.hd nav a[aria-current="page"]{color:var(--olive)}
.hd .call{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.05rem;
  border-radius:2px;background:var(--madder);color:var(--paper);text-decoration:none;
  font-weight:600;font-size:.84rem;letter-spacing:.06em;white-space:nowrap}
.hd .call:hover{background:#7a323b}
@media(max-width:900px){ .hd nav a:not(.call){display:none} .hd .brand img{height:38px} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:.85rem 1.6rem;border-radius:2px;text-decoration:none;font-weight:600;
  font-size:.95rem;letter-spacing:.04em;transition:transform .14s var(--ease),background .18s}
.btn:active{transform:scale(.98)}
.btn-pri{background:var(--madder);color:var(--paper)}
.btn-pri:hover{background:#7a323b}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--olive)}
.btn-ghost:hover{background:var(--stone)}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{padding:clamp(2.6rem,6vw,4.8rem) 0 clamp(2.4rem,5vw,3.8rem)}
.hero-grid{display:grid;gap:2rem}
@media(min-width:960px){ .hero-grid{grid-template-columns:1.02fr .98fr;gap:3.4rem;align-items:center} }
.hero h1{font-family:var(--disp);font-weight:400;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(2.3rem,5.6vw,4rem);margin:1rem 0 1.1rem;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--olive)}
.hero .lede{font-size:clamp(1.03rem,1.8vw,1.19rem);color:var(--muted);max-width:46ch;
  margin-bottom:1.7rem}
.hero .lede b{color:var(--ink);font-weight:600}

/* the drawing, framed like a plate */
.plate{background:#fff;padding:.9rem;box-shadow:0 1px 0 var(--line),0 18px 44px -28px rgba(30,34,22,.5);
  border:1px solid var(--line)}
.plate img{width:100%;height:auto}
.plate figcaption{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:.75rem;text-align:center;font-weight:600}

/* ---------- sections ---------- */
section{padding:clamp(3rem,6.2vw,5.2rem) 0}
.band{background:var(--stone)}
.sec-hd{margin-bottom:2.4rem;max-width:60ch}
.sec-hd h2{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;line-height:1.1;
  font-size:clamp(1.85rem,4.4vw,2.9rem);margin:.55rem 0 .6rem}
.sec-hd h2 em{font-style:italic;color:var(--olive)}
.sec-hd p{color:var(--muted);font-size:1.03rem}

/* ---------- the three stages ---------- */
.stages{display:grid;gap:1.6rem;counter-reset:stage}
@media(min-width:820px){ .stages{grid-template-columns:repeat(3,1fr);gap:2rem} }
.stage{border-top:2px solid var(--olive);padding-top:1.1rem}
.stage .rn{font-family:var(--disp);font-size:.9rem;letter-spacing:.2em;color:var(--olive);
  font-weight:600;display:block;margin-bottom:.5rem}
.stage h3{font-family:var(--disp);font-weight:400;font-size:1.5rem;margin-bottom:.5rem}
.stage p{color:var(--muted);font-size:.97rem}

/* ---------- plates (the project catalogue) ---------- */
.plates{display:grid;gap:1.6rem}
@media(min-width:720px){ .plates{grid-template-columns:1fr 1fr;gap:1.8rem} }
@media(min-width:1040px){ .plates{grid-template-columns:repeat(3,1fr)} }
.pl{border-top:1px solid var(--line);padding-top:1.05rem}
.pl .no{font-size:.74rem;letter-spacing:.18em;color:var(--madder);font-weight:600;
  text-transform:uppercase}
.pl h3{font-family:var(--disp);font-weight:400;font-size:1.32rem;margin:.35rem 0 .1rem}
.pl .where{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive);font-weight:600;margin-bottom:.6rem}
.pl p{color:var(--muted);font-size:.95rem}

/* ---------- services list ---------- */
.svc{display:grid;gap:0}
.svc li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.svc li:first-child{border-top:1px solid var(--line)}
.svc .n{font-family:var(--disp);font-size:.85rem;color:var(--madder);letter-spacing:.1em}
.svc h3{font-family:var(--disp);font-weight:400;font-size:1.24rem;margin-bottom:.15rem}
.svc p{color:var(--muted);font-size:.95rem}

/* ---------- pricing note ---------- */
.pricebox{background:#fff;border:1px solid var(--line);padding:1.7rem;
  border-left:3px solid var(--madder)}
.pricebox .amt{font-family:var(--disp);font-size:clamp(2.2rem,5vw,2.9rem);line-height:1;
  margin-bottom:.3rem}
.pricebox .per{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:.8rem}
.pricebox p{color:var(--muted);font-size:.96rem}

/* ---------- figures ---------- */
.figs{display:grid;gap:1.4rem}
@media(min-width:760px){ .figs{grid-template-columns:1fr 1fr} }
.fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.fig figcaption{font-size:.8rem;color:var(--muted);margin-top:.6rem}

/* ---------- contact ---------- */
.contact{background:var(--olive);color:var(--paper);padding:clamp(2rem,5vw,3.4rem)}
.contact h2{font-family:var(--disp);font-weight:400;font-size:clamp(1.8rem,4.4vw,2.8rem);
  line-height:1.1;margin-bottom:.7rem;max-width:18ch}
.contact p{color:rgba(251,250,246,.84);max-width:46ch;margin-bottom:1.6rem}
.contact .btn-pri{background:var(--paper);color:var(--olive)}
.contact .btn-pri:hover{background:#fff}
.contact .btn-ghost{color:var(--paper);box-shadow:inset 0 0 0 1px rgba(251,250,246,.45)}
.contact .btn-ghost:hover{background:rgba(251,250,246,.1)}

/* ---------- form ---------- */
.form{display:grid;gap:1rem;max-width:560px}
.form label{display:block;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--olive);margin-bottom:.4rem}
.form input,.form textarea{width:100%;font:inherit;font-size:16px;padding:.85rem .95rem;
  min-height:52px;background:#fff;border:1px solid var(--line);border-radius:2px;color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--olive)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
footer{padding:2.8rem 0 calc(2.8rem + var(--safe-b));border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted)}
.ft-in{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.ft-in a{color:var(--muted)}
.ft-in .sp{margin-left:auto}

.skip{position:absolute;left:-9999px;background:var(--olive);color:var(--paper);
  padding:.75rem 1.25rem;z-index:200;text-decoration:none}
.skip:focus{left:0;top:0;display:inline-flex;align-items:center;min-height:44px}
:focus-visible{outline:2px solid var(--madder);outline-offset:3px}

/* ============================================================
   SCROLL-THROUGH SEQUENCE — Design · Realisation · Care
   ============================================================
   His own three words, which happen to be a start-to-finish
   process. Frames cross-fade as you scroll the rail.
   ============================================================ */
.scrolly{position:relative}
.scrolly-rail{height:400vh}                    /* (frames+1) x 100vh */
.scrolly-stick{position:sticky;top:0;height:100svh;display:grid;
  grid-template-rows:1fr auto;overflow:hidden}
.frames{position:relative;width:100%;height:100%;background:var(--stone)}
.frames figure{position:absolute;inset:0;opacity:0;margin:0}
.frames img{width:100%;height:100%;object-fit:cover}
.frames .slot{width:100%;height:100%;display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(45deg,var(--stone),var(--stone) 14px,#dedbcf 14px,#dedbcf 28px);
  padding:2rem}
.frames .slot span{background:var(--paper);border:1px solid var(--olive);padding:.9rem 1.2rem;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);
  font-weight:600;max-width:32ch}
.scrolly-hud{background:var(--paper);border-top:1px solid var(--line);
  padding:1.1rem 0 calc(1.1rem + var(--safe-b))}
.hud-in{display:flex;align-items:center;gap:1.4rem}
.steps{display:flex;gap:1.4rem;flex-wrap:wrap;flex:1}
.steps li{list-style:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted);opacity:.45;transition:opacity .25s,color .25s}
.steps li.active{opacity:1;color:var(--olive)}
.counter{font-family:var(--disp);font-size:1.05rem;color:var(--olive);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* Reduced motion: the sequence collapses to a plain readable grid. */
@media (prefers-reduced-motion:reduce){
  .scrolly-rail{height:auto}
  .scrolly-stick{position:static;height:auto;display:block}
  .frames{height:auto;display:grid;gap:1rem;grid-template-columns:1fr}
  .frames figure{position:static;opacity:1!important}
  .frames img{height:auto;aspect-ratio:16/9}
}

/* Phone overrides LAST — a media query placed above the rules it overrides does
   nothing, which has bitten this workflow three times. */
@media(max-width:560px){
  .wrap{width:min(var(--wrap),100% - 2rem)}
  .scrolly-rail{height:300vh}                  /* shorter runway on a phone */
  .steps{gap:.9rem}
  .steps li{font-size:.68rem;letter-spacing:.1em}
  .hud-in{gap:.9rem}
  .counter{font-size:.92rem}
  .ft-in{gap:.3rem 1.2rem}
  .ft-in a{display:inline-flex;align-items:center;min-height:44px}
  .ft-in .sp{margin-left:0;flex-basis:100%}
}