/* Yard & Season. Real project photography, editorial type, quiet motion. */
:root{
  --navy:#1f3b73;--navy-deep:#172d5b;--navy-ink:#0e2147;
  --ink:#0e2147;--body:#3a4556;--muted:#5e6b7e;
  --sand:#f0f3ef;--sand-deep:#e5ebe3;--line:#d5dbe6;--line-soft:#e7ece5;
  --wrap:1280px;--radius:4px;--moss:#1f3b73;
}
*,*::before,*::after{letter-spacing:0;}
body{font-size:17px;}
/* HTML dimensions reserve space; responsive photos must not retain a fixed pixel height. */
img{height:auto;}
h1,.hero-title,h2,h3,h4,.display{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:0;line-height:1.12;}
h1,.hero-title{font-size:3.75rem;}
h2{font-size:2.8rem;}
h3{font-size:1.65rem;}
.lede{font-size:1.15rem;line-height:1.65;}
.wrap{padding-inline:40px;}
.section{padding-block:88px;}
.section-head{max-width:840px;}
.section-head .lede{margin-top:20px;}
.eyebrow{font-family:inherit;font-size:.78rem;font-weight:600;color:var(--moss);text-transform:uppercase;letter-spacing:0;margin-bottom:14px;}
.btn{font-family:inherit;min-height:48px;font-size:1rem;letter-spacing:0;font-weight:600;border-width:1px;transition:background .2s,transform .2s,border-color .2s;}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:#a8482f;color:#fff;}
.btn--lg{font-size:1rem;padding:16px 26px;}
.nav a.btn{color:#fff;padding:12px 22px;}
.topbar{display:none;}
.masthead{background:#fff;backdrop-filter:none;}
.masthead:has(.nav[data-open=true]){z-index:80;}
.masthead .wrap{min-height:96px;}
.brand img{width:32px;}
.brand-name{font-family:Georgia,'Times New Roman',serif;font-size:1.5rem;font-weight:400;line-height:1.1;letter-spacing:0;color:var(--ink);}
.brand-name span{font-family:inherit;font-size:.75rem;letter-spacing:0;color:var(--moss);font-weight:400;margin-top:7px;}
.nav{gap:28px;}
.nav a{font-size:.95rem;font-weight:400;}
.nav-toggle{width:44px;height:44px;display:none;padding:10px;align-items:center;justify-content:center;border-color:var(--line);}
.hero{isolation:isolate;}
.hero-media img{object-position:50% 40%;}
.hero-media::after{background:linear-gradient(90deg,rgba(10,18,38,.88),rgba(10,18,38,.62) 40%,rgba(10,18,38,.02) 80%);}
.hero-inner{padding:84px 0 46px;max-width:760px;min-height:560px;}
.hero+.section{padding-top:56px;}
.hero .hero-title{font-size:4rem;font-weight:400;text-wrap:initial;}
.hero-promise{font-family:Georgia,'Times New Roman',serif;color:#fff;font-size:2rem;line-height:1.2;margin-top:18px;}
.hero-promise::after{content:'';display:block;width:64px;height:2px;background:#d79772;margin-top:26px;}
.hero .lede{font-size:1.15rem;color:#f5f7f3;max-width:42ch;margin-top:26px;}
.hero-actions{margin-top:30px;gap:16px;}
.hero-actions .btn--outline-light{background:rgba(10,18,38,.22);border-color:#b9c6dd;}
.hero-points{margin-top:38px;padding-top:24px;gap:22px;border-color:#ffffff30;color:#e3e9df;font-size:.85rem;max-width:680px;margin-bottom:0;}
.hero-points svg{color:#b9c6dd;}
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.svc,.svc--wide,.svc--tall{grid-column:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;align-content:start;justify-content:stretch;padding:0;background:none;color:var(--body);overflow:visible;isolation:auto;}
.svc::after{display:none;}
.svc img{position:static;z-index:auto;aspect-ratio:1.5;object-fit:cover;border-radius:4px;width:100%;height:auto;transition:filter .35s,transform .35s;}
.svc:hover img{transform:translateY(-4px);filter:brightness(1.04);}
.svc h3{color:var(--ink);font-size:1.7rem;font-weight:400;margin-top:22px;}
.svc p{color:var(--body);font-size:1rem;margin-top:10px;max-width:35ch;}
.svc-more{font-family:inherit;color:var(--brick);font-weight:600;font-size:.9rem;text-transform:none;letter-spacing:0;margin-top:22px;}
.svc:hover .svc-more{color:var(--navy);}
.service-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--line);margin-top:38px;padding-top:28px;}
.service-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:Georgia,serif;font-size:1.25rem;text-decoration:none;}
.service-links a:hover{color:var(--brick);}
.service-links svg{flex:none;color:var(--brick);}
.split{gap:64px;}
.split-media>img,.split-media>noscript>img,.prose>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.split h2{margin-bottom:24px;}
.split p{max-width:54ch;}
.ba{border-radius:4px;aspect-ratio:4/3;}
.ba input[type=range]{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;}
.ba:focus-within{outline:3px solid var(--brick);outline-offset:4px;}
/* Once main.js has taken over pointer input, the invisible range input keeps
   only the keyboard. Covering the photo, it set the divider wherever a finger
   landed, so starting a page scroll on the photo moved it (D01 #7). main.js
   moves it only on a tap or a sideways drag. pan-y leaves vertical swipes to
   the browser; pinch-zoom keeps zooming possible over the photo (1.4.4). */
.ba[data-ba-ready] input[type=range]{pointer-events:none;}
.ba[data-ba-ready]{touch-action:pan-y pinch-zoom;}
.ba[data-ba-ready] img{pointer-events:none;-webkit-user-drag:none;}
.ba-tag{font-family:inherit;font-size:.75rem;letter-spacing:0;background:#0e2147de;}
.ba-handle::before{border-color:var(--ink);}
.trust{border:0;padding:0;gap:32px;}
.trust-item{border-top:1px solid var(--moss);padding-top:24px;}
.trust-item h3{font-size:1.4rem;font-weight:400;margin-bottom:14px;}
.trust-item p{font-size:.95rem;}
.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;}
.step-rule{display:flex;align-items:center;gap:20px;width:auto;height:auto;background:none;margin-bottom:24px;}
/* No printed numerals: the step heading is the label, and a counter here was
   the enumeration tell. A moss rule carries the sequence instead. */
.step-rule{height:3px;width:56px;background:var(--moss);border-radius:2px;margin-bottom:22px;}
.step-rule::after{content:'';height:1px;flex:1;background:var(--moss);}
.step h3{font-size:1.65rem;margin-bottom:18px;}
.step p{font-size:1rem;}
.page-head{background:var(--sand);}
.page-head .wrap{padding-block:72px;}
.page-head h1{max-width:24ch;}
.page-head .lede{max-width:62ch;}
.prose h2{font-size:2.3rem;}
.prose h3{font-size:1.7rem;}
.aside{background:var(--sand);border:0;border-top:2px solid var(--moss);padding:28px;}
.aside-list li{display:block;}
.aside-list b{display:block;overflow-wrap:anywhere;}
.comparison-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.gal{columns:3;column-gap:24px;}
.gal figure{margin-bottom:28px;}
.gal figure[hidden]{display:none;}
.gal img{height:auto;aspect-ratio:4/3;object-fit:cover;}
.filter{border-radius:0;border-width:0 0 1px;padding:10px 16px;font-family:inherit;font-size:.95rem;}
.filter[aria-pressed=true]{background:var(--navy-ink);}
.faq summary{font-family:inherit;font-weight:600;font-size:1.05rem;}
.band .wrap{padding-block:72px;}
.band h2{font-size:3rem;max-width:none;}
.band p{color:#c7d0e2;}
.band .btn--light{background:var(--brick);color:white;}
.foot{border-top:3px solid var(--moss);color:#c7d0e2;}
/* Colour is required here: the global h1-h4 rule paints ink, which on this
   dark ground rendered these four headings at 1.00:1 (invisible). */
.foot h2{font-family:inherit;font-size:.95rem;font-weight:600;color:#dfe6f4;text-transform:none;letter-spacing:0;margin:0 0 14px;}
.foot-bottom{margin-top:48px;color:#b9c6dd;}
.form{padding:0;gap:24px;}
.field label{font-family:inherit;font-weight:600;}
.field input,.field select,.field textarea{padding:14px 16px;}
.form .btn{min-width:200px;}
.reveal,.reveal.pending,.reveal.in{opacity:1;transform:none;transition:none;}
.hero-media img{opacity:1;transition:opacity 1s ease;}
.hero-media img.media-loading{opacity:1;}
.btn:active{transform:none;}
.svc:focus-visible{outline:2px solid var(--brick);outline-offset:6px;}
@media(prefers-reduced-motion:reduce){.hero-media img,.hero-media img.media-loading{opacity:1;transition:none;}}
@media(min-width:1500px){.hero-inner{padding-top:116px;min-height:660px;}.hero .hero-title{font-size:4.5rem;}}
@media(max-width:1000px){
  .brand-name{font-size:1.25rem;}.nav{gap:18px;}.wrap{padding-inline:28px;}
  .hero .hero-title{font-size:3.75rem;}.hero-inner{max-width:690px;}.split{gap:36px;}
  .svc-grid{gap:24px;}.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1100px){
  .nav-toggle{display:flex;}.nav{gap:0;inset:80px 0 0;width:100%;padding:20px 28px;box-shadow:none;}
  .nav .btn{padding:14px 20px;}
  .masthead .wrap{min-height:80px;}
}
@media(max-width:900px){
  .svc,.svc--wide,.svc--tall{grid-column:auto;min-height:0;}
  .hero-inner{padding-top:88px;min-height:580px;}
  .hero-media::after{background:linear-gradient(90deg,rgba(10,18,38,.85),rgba(10,18,38,.45));}
}
@media(max-width:760px){
  h1,.hero-title{font-size:2.7rem;}h2{font-size:2.2rem;}.section{padding-block:56px;}
  .wrap{padding-inline:22px;}.hero-inner{padding:64px 0 42px;min-height:560px;}
  .hero .hero-title{font-size:3.2rem;max-width:12ch;}.hero-promise{font-size:1.75rem;max-width:21ch;}
  .hero .lede{font-size:1.05rem;max-width:33ch;}.hero-media img{object-position:58% 50%;}
  .hero-actions{gap:12px;}.hero-actions .btn{padding:14px 18px;}
  .hero-points{gap:12px;font-size:.8rem;}.hero-points li:last-child{display:none;}
  .svc-grid{grid-template-columns:1fr;gap:36px;}.svc{grid-template-rows:auto auto auto auto;}
  .svc img{aspect-ratio:1.6;}.svc h3{font-size:1.8rem;}.svc p{max-width:none;}
  .service-links{grid-template-columns:1fr;gap:0;margin-top:28px;padding-top:0;}
  .service-links a{padding:22px 0;border-bottom:1px solid var(--line);font-size:1.2rem;}
  .section-head{margin-bottom:32px;}.section-head .lede{font-size:1.05rem;}
  .steps{grid-template-columns:1fr;gap:36px;}.step-rule{max-width:240px;}
  .trust{grid-template-columns:1fr 1fr;gap:32px 24px;}
  .comparison-grid{grid-template-columns:1fr;}.gal{columns:2;column-gap:16px;}
  .page-head .wrap{padding-block:48px;}.page-head .lede{font-size:1.05rem;}
  .band .wrap{padding-block:56px;}.band h2{font-size:2.3rem;}.band-actions .btn{flex:1 1 auto;}
  .foot{padding-block:48px 24px;}.callbar{box-shadow:none;}
  .aside{position:static;}.aside-list li{display:flex;flex-wrap:wrap;}
}
@media(max-width:380px){
  .wrap{padding-inline:18px;}.brand-name{font-size:1.1rem;}.brand img{width:26px;}
  .hero .hero-title{font-size:2.75rem;}.hero-promise{font-size:1.5rem;}.hero-actions .btn{width:100%;}
  .hero-inner{padding-top:44px;}.hero-points{gap:10px;}.trust{grid-template-columns:1fr;}
  .gal{columns:1;}.filter{font-size:.85rem;padding:10px;}
}
@media(prefers-reduced-motion:reduce){.reveal.pending{opacity:1;transform:none;}.btn:hover,.svc:hover img{transform:none;}}

/* Touch targets: footer and inline links were 22px tall, under the WCAG 2.5.8
   24px minimum. Padding lifts each to ~30px without changing the visual rhythm. */
.foot a{display:inline-block;padding-block:4px;}
.foot li{margin-block:2px;}

/* Changelog list */
.notes{list-style:none;padding:0;margin:24px 0;}
.notes li{padding:14px 0;border-bottom:1px solid rgba(14,33,71,.14);line-height:1.6;}
.fine{margin-top:28px;}

/* Fieldwork: image-led interactions with all content visible on arrival. */
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,18,38,.88),rgba(10,18,38,.62) 40%,rgba(10,18,38,.02) 80%);pointer-events:none;z-index:1;}
.hero-media::after{display:none;}
.hero .hero-inner{z-index:2;}
.hero-inner{max-width:760px;min-height:580px;padding:52px 0 56px;}
.hero .hero-title{font-size:5.5rem;line-height:1;}
.hero-promise{font-size:2rem;margin-top:24px;}
.hero-promise::after{display:none;}
.hero .lede{max-width:39ch;margin-top:20px;}
.hero-actions{margin-top:28px;}
.hero-actions .btn--outline-light{border:0;border-left:1px solid #ffffff60;border-radius:0;background:none;}
.hero-media{inset:-16px;transform:translate(var(--scene-x,0px),var(--scene-y,0px));transition:transform 1.4s ease-out;}
.hero-media img{transform:scale(1.035);}
.service-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);margin-bottom:36px;}
.service-choices a{position:relative;display:flex;align-items:center;gap:16px;text-decoration:none;padding:20px 12px;color:var(--ink);font-size:1.1rem;}
.service-choices a span{font:2.4rem/1 Georgia,serif;color:var(--brick);}
.service-choices a::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#b22234;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.service-choices a[aria-selected=true]::after,.service-choices a:hover::after{transform:scaleX(1);}
.service-choices a:focus-visible{outline:2px solid var(--brick);outline-offset:-4px;}
.service-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;margin-bottom:40px;}
.service-feature[hidden]{display:none;}
.service-explorer.is-enhanced .service-feature{margin-bottom:0;}
.feature-photo{display:block;overflow:hidden;border-radius:4px;}
.feature-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .7s ease;}
.feature-photo:hover img{transform:scale(1.04);}
.feature-copy h3{font-size:2.7rem;max-width:19ch;}
.feature-copy p{font-size:1.12rem;line-height:1.7;margin-top:24px;max-width:37ch;}
.feature-link{display:inline-flex;align-items:center;gap:22px;margin-top:30px;padding-block:8px;color:var(--brick);text-underline-offset:6px;}
.feature-link svg{transition:transform .25s ease;}
.feature-link:hover svg{transform:translateX(5px);}
.transformation{background:#15264a;color:#fff;}
.transformation .split{grid-template-columns:1fr;gap:32px;}
.transformation .split>div:first-child{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:12px 48px;}
.transformation h2{color:#fff;margin:0;font-size:3.4rem;}
.transformation h2 br{display:none;}
.transformation .split p{color:#c7d0e2;}
.transformation .split p:last-child{grid-column:2;margin-top:0!important;}
.transformation .btn--ghost{color:#fff;border-color:#9fb0cc;}
.transformation .ba{aspect-ratio:21/9;max-height:480px;}
.ba-handle::before{display:none;}
.ba-handle::after{width:48px;height:48px;background:#fff;box-shadow:0 4px 24px #0004;}
.ba-handle svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;color:#0e2147;}
.ba{isolation:isolate;}
.ba-tag{pointer-events:none;z-index:6;}
.photo-open{display:block;position:relative;border-radius:4px;overflow:hidden;cursor:zoom-in;}
.photo-open img{transition:transform .5s ease;}
.photo-open:hover img{transform:scale(1.045);}
.photo-open:focus-visible{outline:3px solid var(--brick);outline-offset:4px;}
.photo-expand{position:absolute;right:12px;bottom:12px;width:36px;height:36px;display:grid;place-items:center;color:#fff;background:#0e2147db;border-radius:50%;}
.photo-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;border:0;padding:28px;margin:0;background:#0b1222;color:#fff;}
.photo-viewer::backdrop{background:#0b1222;}
.photo-viewer[open]{display:grid;grid-template-rows:48px minmax(0,1fr) auto;gap:20px;}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.viewer-top h2{font:1rem/1.4 'Source Sans 3',sans-serif;color:#fff;margin:0;}
.viewer-button{width:48px;height:48px;display:grid;place-items:center;flex:none;padding:0;background:transparent;border:1px solid #ffffff50;border-radius:50%;color:#fff;cursor:pointer;}
.viewer-button:hover{background:#ffffff18;}
.viewer-stage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:24px;min-height:0;}
.viewer-stage img{width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain;}
.viewer-caption{max-width:720px;margin:auto;text-align:center;color:#d5dbe6;line-height:1.5;min-height:3em;}
.viewer-button:focus-visible{outline:3px solid #ffffff;outline-offset:4px;}
@media(prefers-reduced-motion:no-preference){
  .service-explorer.is-enhanced .service-feature:not([hidden]) .feature-copy{animation:feature-arrive .35s ease-out;}
  @keyframes feature-arrive{from{transform:translateY(8px)}to{transform:none}}
}
@media(max-width:1000px){.service-feature{gap:36px;}.feature-copy h3{font-size:2.2rem;}.transformation h2{font-size:2.8rem;}}
@media(max-width:760px){
  .hero::after{background:linear-gradient(90deg,rgba(10,18,38,.85),rgba(10,18,38,.45));}
  .hero-inner{padding:48px 0 68px;min-height:540px;}
  .hero .hero-title{font-size:3.75rem;}.hero-promise{font-size:1.65rem;max-width:20ch;}
  .hero .lede{max-width:30ch;}.hero-actions .btn{font-size:.95rem;}
  .service-choices{margin-bottom:24px;gap:8px;}
  .service-choices a{font-size:.9rem;gap:10px;flex-direction:column;align-items:flex-start;padding:16px 4px;}
  .service-choices a span{font-size:1.65rem;}
  .service-feature{grid-template-columns:1fr;gap:24px;}
  .feature-photo img{aspect-ratio:8/5;}.feature-copy{min-height:225px;}
  .feature-copy h3{font-size:2rem;max-width:none;}.feature-copy p{margin-top:16px;font-size:1rem;}
  .feature-link{margin-top:18px;}
  .transformation .split>div:first-child{grid-template-columns:1fr;gap:20px;}
  .transformation .split p:last-child{grid-column:1;}
  .transformation h2{font-size:2.5rem;}.transformation .ba{aspect-ratio:4/3;}
  .photo-viewer{padding:16px;gap:16px;}
  .viewer-stage{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 48px;gap:16px;}
  .viewer-stage img{grid-column:1/-1;grid-row:1;}
  .viewer-stage .viewer-next{justify-self:end;}
  .viewer-caption{font-size:.9rem;}
}
@media(max-width:380px){.hero .hero-title{font-size:3.2rem;}.hero-actions .btn--outline-light{border-left:0;padding:10px 0;justify-content:flex-start;}.hero-inner{min-height:560px;}}
@media(prefers-reduced-motion:reduce){
  .hero-media,.hero-media img,.feature-photo img,.photo-open img{animation:none!important;transform:none!important;transition:none!important;}
  .service-choices a::after{transition:none;}
}


/* ---- Service grid -------------------------------------------------------
   All six services, each with its own photograph. Replaces a tab explorer that
   showed one photo and hid five services behind an interaction. The first card
   spans two columns so the row reads as a feature plus peers, not a row of
   identical cards. */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:40px;}
a.svc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:border-color .2s ease,transform .2s ease;}
a.svc-card:hover{border-color:var(--moss);transform:translateY(-2px);}
a.svc-card:focus-visible{outline:3px solid var(--brick);outline-offset:3px;}
a.svc-card--wide{grid-column:span 2;}
.svc-shot{display:block;overflow:hidden;background:var(--sage,#f0f3ef);}
.svc-shot img{display:block;width:100%;height:230px;object-fit:cover;transition:transform .45s cubic-bezier(.23,1,.32,1);}
.svc-card--wide .svc-shot img{height:330px;}
a.svc-card:hover .svc-shot img{transform:scale(1.03);}
.svc-body{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;flex:1;}
.svc-name{display:block;font-family:Georgia,serif;font-size:1.5rem;line-height:1.22;color:var(--ink);}
.svc-card--wide .svc-name{font-size:1.95rem;}
.svc-note{display:block;color:var(--body);line-height:1.6;flex:1;}
.svc-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--brick);font-weight:600;font-size:.95rem;}
.svc-go svg{flex:none;transition:transform .25s ease;}
a.svc-card:hover .svc-go svg{transform:translateX(4px);}

/* Heading anchors the left, the supporting line sits opposite it. */
.section-head--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 56px;align-items:end;}
.section-head--split .lede{margin:0;}

@media(max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  a.svc-card--wide{grid-column:span 2;}
}
@media(max-width:760px){
  .svc-grid{grid-template-columns:1fr;gap:20px;}
  a.svc-card--wide{grid-column:span 1;}
  .svc-shot img,.svc-card--wide .svc-shot img{height:210px;}
  .svc-card--wide .svc-name{font-size:1.5rem;}
  .section-head--split{grid-template-columns:1fr;align-items:start;}
}
@media(prefers-reduced-motion:reduce){
  a.svc-card,.svc-shot img,.svc-go svg{transition:none;}
  a.svc-card:hover{transform:none;}
  a.svc-card:hover .svc-shot img{transform:none;}
}


/* ---- How we work --------------------------------------------------------
   Was four equal columns: 276x139px each on desktop, and a 21-character measure
   over five lines at 390px. That is the identical-cards shape at a width nobody
   reads, and it sat directly above a second grid of equal columns. Rebuilt as a
   heading beside a hairline list, so the band runs across instead of down and
   the four h3s finally sit under an h2 of their own.
   .trust / .trust-item are deliberately left in place: /about/ still uses them. */
.terms{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:32px 80px;align-items:start;}
.terms-head h2{font-size:2.4rem;max-width:11ch;}
.terms-list{list-style:none;margin:0;padding:0;}
.terms-row{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:8px 40px;padding:22px 0;border-bottom:1px solid var(--line);}
.terms-row:first-child{border-top:2px solid var(--moss);}
.terms-row h3{margin:0;font-size:1.3rem;font-weight:400;line-height:1.25;color:var(--ink);}
.terms-row p{font-size:1rem;line-height:1.6;color:var(--body);max-width:66ch;}
@media(max-width:1000px){
  .terms{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:28px 48px;}
  .terms-row{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:8px 28px;}
}
@media(max-width:860px){
  .terms{grid-template-columns:1fr;gap:28px;}
  .terms-head h2{max-width:20ch;}
  .terms-row{grid-template-columns:1fr;gap:6px;padding:20px 0;}
  .terms-row h3{font-size:1.2rem;}
}


/* ---- Interactive boundaries --------------------------------------------
   --line is #d5dbe6: correct for a decorative hairline, but it was also drawing
   the border on every form field, ghost button and gallery filter. Measured on
   the live site: 1.36:1 on white, 1.66:1 on sage. WCAG 1.4.11 wants 3:1 for the
   boundary of a control, and on a phone the contact form's inputs read as blank
   space. Decorative hairlines keep --line; anything clickable uses this. */
:root{--line-strong:#8a97ad;}
.field input,.field select,.field textarea,.btn--ghost,.filter{border-color:var(--line-strong);}
.btn--ghost:hover,.filter:hover{border-color:var(--ink);}

/* ---- Gallery ------------------------------------------------------------
   .gal used CSS columns, which fill top-to-bottom: figures 1 to 8 all sat in
   column one, so the visible top row was photos 1, 9 and 17 while the lightbox
   next/previous walked DOM order 1, 2, 3. "Next" from the top-left photo jumped
   to the tile underneath it. Grid makes DOM order and reading order the same,
   which fixes the lightbox without touching its JS. */
.gal{columns:auto;column-gap:normal;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;align-items:start;}
.gal figure{margin:0;break-inside:auto;}
.gal figcaption{font-size:.88rem;color:var(--muted);margin-top:10px;}

/* Two-up instead of three: 584px is the largest these 517px sources can carry
   without visible softening, and the before/after is the best asset on the site. */
.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;}

/* WCAG 2.5.8: these measured 18-21px tall on all six service pages. Same
   padding the footer links already carry. */
.aside-list a{display:inline-block;padding-block:4px;}

@media(max-width:760px){
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;}
  .comparison-grid{grid-template-columns:1fr;}
}
@media(max-width:380px){.gal{grid-template-columns:1fr;}}

/* ---------- announcement bar ---------- */
.notice{background:#0e2147;color:#e6ece4;font-size:.93rem}
.notice .wrap{display:flex;align-items:center;gap:10px;padding:10px 28px}
.notice p{margin:0}
.notice a{color:#ffffff;text-decoration:underline;text-underline-offset:2px}
.notice a:hover{color:#fff}
.notice-dot{width:8px;height:8px;border-radius:50%;background:#ffffff;flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.22)}

/* ---------- your yard this month ---------- */
.season{background:#f0f3ef}
.season-inner{max-width:720px}
.season-when{font-family:Georgia,serif;font-style:italic;color:#1f3b73;margin:0 0 2px}
.season-card h3{font-size:1.6rem;margin:0 0 10px}
.season-card p{margin:0 0 10px}
.season-foot{font-size:.93rem;color:#616A73;margin-top:18px;
  padding-top:14px;border-top:1px solid #d5dbe6}

/* ---------- photo upload ---------- */
.dropzone{position:relative;border:2px dashed #d5dbe6;border-radius:6px;
  padding:22px 20px;text-align:center;background:#fbfcfa;
  transition:border-color .15s ease-out,background .15s ease-out}
.dropzone:hover,.dropzone.is-over{border-color:#1f3b73;background:#f2f6f0}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer}
/* The file input is invisible (opacity 0), so its own outline never showed and
   the drop zone had no focus indicator at all (2.4.7). The ring goes on the
   visible box instead, like a text field's ring, which also shows on click. */
.dropzone:focus-within{outline:3px solid var(--red,#b22234);outline-offset:3px}
.dz-line{margin:0 0 4px;color:#0e2147}
.dz-line strong{color:#1f3b73}
.dropzone .hint{margin:0}
.dz-list{list-style:none;margin:10px 0 0;padding:0}
.dz-item{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid #e3e9df;border-radius:4px;margin-bottom:6px;font-size:.92rem;background:#fff}
.dz-item span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-state{color:#616A73;font-size:.85rem}
.dz-item.is-done .dz-state{color:#1f3b73;font-weight:700}
.dz-item.is-failed{border-color:#e0bdb4}
.dz-item.is-failed .dz-state{color:#a8482f;font-weight:700}
.dz-remove{background:none;border:0;color:#a8482f;cursor:pointer;font:inherit;
  font-size:.85rem;text-decoration:underline;padding:2px 4px}
.or-text a{color:#a8482f}
@media print{.notice,.dropzone,.dz-list{display:none}}