/* Edinburgh Gardening Services · main.css
   1. Tokens (the kit contract, then this client's extensions)
   2. Base (reset, type, layout helpers, buttons, focus)
   3. Header, nav and menu panel
   4. Footer
   Homepage-only sections live in home.css. Effects live in effects.css.

   Breakpoints: the kit's four bands (767 / 768 to 1023 / 1024 to 1439 / 1440 up).
   One structural exception, 1200px, used only where the design changes structure:
   the desktop nav (full link row from 1200, menu button below it) and the services
   expanding gallery (gallery from 1200, swipe row below it). Reason: at 1024 to 1199
   the six nav links, phone icon and quote button do not fit beside the logo, and the
   five-card gallery needs about 1100px of row to keep its closed cards readable.
   Everything else sizes with clamp(). */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  /* colour, kit contract */
  --ink:#0C170B;            /* near-black: body text, text on orange (7.0:1) */
  --paper:#FFFFFF;          /* page */
  --surface:#F2F6EC;        /* very pale green: cards, tags, panels */
  --muted:#4B5A49;          /* secondary text on paper and surface (6:1+) */
  --accent:#FF7F00;         /* orange: fills only, always with --accent-ink */
  --accent-ink:#0C170B;
  --accent-hover:#FF9A33;   /* lighter orange: orange buttons on light backgrounds, on hover */
  --rule:#D3DECA;           /* hairlines */

  /* colour, client extensions */
  --brand:#004800;          /* dark green: dark sections, footer, dark buttons. White on it 10.9:1 */
  --brand-mid:#2A6F28;      /* green: links, dark-button hover. White on it 6.2:1 */
  --brand-stripe:#0E5A0C;   /* lighter dark green: step cards on --brand */
  --surface-2:#E4EDD6;      /* pale green: image backgrounds, light-button hover */
  --cream:#F7F5EF;          /* off-white band behind About */
  --on-dark:#FFFFFF;
  --on-dark-muted:rgba(255,255,255,0.82);
  --rule-on-dark:rgba(255,255,255,0.22);
  --hero-tint-top:rgba(0,30,0,0.55);
  --hero-tint-mid:rgba(0,36,0,0.40);
  --hero-tint-bottom:rgba(0,24,0,0.82);
  --nav-fade:rgba(0,30,0,0.28);
  --nav-fade-end:rgba(0,30,0,0);
  --glass-fill:rgba(255,255,255,0.08);
  --glass-fill-strong:rgba(255,255,255,0.12);
  --glass-border:rgba(255,255,255,0.26);
  --icon-border-on-dark:rgba(255,255,255,0.6);
  --glass-blur:12px;
  --shadow-glass:0 20px 50px rgba(0,30,0,0.28);
  --shadow-float:0 16px 40px rgba(0,40,0,0.16);
  --shadow-soft:0 2px 8px rgba(0,40,0,0.08);

  /* type */
  --font-display:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-utility:var(--font-body);
  --step--2:12px;
  --step--1:14px;
  --step-0:16px;
  --step-1:18px;
  --step-2:20px;
  --step-3:clamp(30px, 5.1vw - 9px, 52px);          /* h2: 30 on phones to 52 */
  --step-4:clamp(48px, 3.7vw + 34px, 72px);         /* h1 and large figures */
  --step-price:48px;                                /* plan prices */
  --step-hero:clamp(56px, 3.7vw + 43px, 88px);      /* hero heading: 56 on phones, about 72 on tablets, 88 from 1200 */
  --step-stat:clamp(20px, 1.9vw + 13px, 32px);      /* hero proof figures */
  --step-wordmark:clamp(60px, 10.5vw + 20px, 128px);
  --lh-display:0.88;
  --lh-hero:1.02;
  --lh-tight:1.05;
  --lh-snug:1.3;
  --lh-body:1.55;
  --track-display:-0.03em;
  --track-wordmark:-0.04em;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:600;

  /* space */
  --density:1;
  --space-1:calc(4px * var(--density));
  --space-2:calc(8px * var(--density));
  --space-3:calc(12px * var(--density));
  --space-4:calc(16px * var(--density));
  --space-5:calc(24px * var(--density));
  --space-6:calc(32px * var(--density));
  --space-7:calc(48px * var(--density));
  --space-8:calc(64px * var(--density));
  --space-9:calc(96px * var(--density));
  --space-10:calc(128px * var(--density));
  --gutter:clamp(24px, 4vw, 64px);                  /* edge gap, kit standard (kit-rules, Content width): 24 phone to 64 */
  --gutter-nav-wide:32px;                           /* nav and footer edge from 1024 */
  --section:clamp(104px, 6.5vw + 80px, 128px);        /* 104 phone, 128 from tablet up (was 160 on desktop, too airy) */
  --max-width:calc(1312px + 2 * var(--gutter));     /* content at most 1312px, the same box as harristaylor.co.uk */
  --measure:60ch;

  /* form */
  --radius:20px;
  --radius-sm:12px;
  --radius-pill:999px;
  --border:1px;
  --border-strong:1.5px;
  --btn-h:52px;
  --btn-h-sm:44px;
  --tap:44px;
  --icon:20px;
  --icon-sm:16px;

  /* motion */
  --ease:cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:150ms;
  --dur-base:240ms;
  --dur-slow:500ms;
  --nudge:3px;
}

/* 2. Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
:where(ul[role="list"],ol[role="list"]){list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--section)}

.skip-link{position:absolute;left:var(--space-4);top:var(--space-4);z-index:100;padding:var(--space-3) var(--space-4);background:var(--paper);color:var(--ink);border-radius:var(--radius-sm);font-weight:var(--weight-bold);transform:translateY(-200%);transition:transform var(--dur-fast) var(--ease)}
.skip-link:focus{transform:none}

.eyebrow{display:flex;align-items:center;gap:var(--space-2);font-size:var(--step--1);font-weight:var(--weight-medium);color:var(--muted);margin:0 0 var(--space-4)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--accent);flex:none}
.h1{font-size:var(--step-4);line-height:var(--lh-tight);letter-spacing:var(--track-display);font-weight:var(--weight-medium)}
.h2{font-size:var(--step-3);line-height:var(--lh-tight);letter-spacing:var(--track-display);font-weight:var(--weight-medium)}
.h3{font-size:var(--step-2);line-height:var(--lh-snug);font-weight:var(--weight-medium)}
.lead{font-size:var(--step-1);margin-top:var(--space-5)}
.muted{color:var(--muted)}
.on-dark{background:var(--brand);color:var(--on-dark)}
.on-dark .muted,.on-dark .eyebrow{color:var(--on-dark-muted)}

/* Placeholder copy. Shown as written so it is easy to spot and replace. */
.ph{overflow-wrap:anywhere}

/* Focus: ink on light, orange on dark */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.hero :focus-visible,.site-header :focus-visible{outline-color:var(--accent)}
.nav-menu :focus-visible{outline-color:var(--ink)}
.menu-panel :focus-visible{outline-color:var(--accent)}

/* Buttons. The pill carries the fill so the link's focus ring sits outside it. */
.btn{display:inline-flex;align-items:center;text-decoration:none;font-size:var(--step-0);font-weight:var(--weight-bold);white-space:nowrap;border-radius:var(--radius)}
.btn .pill{min-height:var(--btn-h);padding-inline:var(--space-6);border-radius:var(--radius);display:inline-flex;align-items:center;gap:var(--space-4);transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn-sm .pill{min-height:var(--btn-h-sm);padding-inline:var(--space-4);font-size:var(--step--1)}
.btn-arrow{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-fast) var(--ease)}
.btn:hover .btn-arrow,.btn:focus-visible .btn-arrow{transform:translateX(var(--nudge))}
/* Orange: dark green on light grounds, white on dark grounds */
.btn-quote .pill{background:var(--accent);color:var(--accent-ink)}
/* Orange buttons: on light backgrounds they lighten on hover; on dark ones (below) they turn white */
.btn-quote:hover .pill,.btn-quote:focus-visible .pill{background:var(--accent-hover);color:var(--accent-ink)}
.on-dark .btn-quote:hover .pill,.on-dark .btn-quote:focus-visible .pill,
.hero .btn-quote:hover .pill,.hero .btn-quote:focus-visible .pill,
.site-header .nav .btn-quote:hover .pill,.site-header .nav .btn-quote:focus-visible .pill{background:var(--paper);color:var(--ink)}
/* Dark green: one shade lighter */
.btn-dark .pill{background:var(--brand);color:var(--on-dark)}
.btn-dark:hover .pill,.btn-dark:focus-visible .pill{background:var(--brand-mid)}
/* White */
.btn-light .pill{background:var(--paper);color:var(--ink)}
.btn-light:hover .pill,.btn-light:focus-visible .pill{background:var(--surface-2)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5);margin-top:var(--space-6)}

.iconbtn{width:var(--tap);height:var(--tap);border-radius:var(--radius);display:grid;place-items:center;border:var(--border-strong) solid var(--icon-border-on-dark);background:transparent;color:inherit;padding:0;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.iconbtn svg{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:var(--glass-fill-strong)}
.iconbtn-menu{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.iconbtn-menu:hover,.iconbtn-menu:focus-visible,.iconbtn-menu[aria-expanded="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
/* the burger turns into a cross with a short fade and quarter turn, rather than swapping */
.iconbtn-menu path{transform-box:fill-box;transform-origin:center;transition:opacity 280ms cubic-bezier(0.45, 0, 0.2, 1),transform 360ms cubic-bezier(0.45, 0, 0.2, 1)}
.iconbtn-menu .menu-icon-close{opacity:0;transform:rotate(-90deg) scale(0.6)}
.iconbtn-menu[aria-expanded="true"] .menu-icon-open{opacity:0;transform:rotate(90deg) scale(0.6)}
.iconbtn-menu[aria-expanded="true"] .menu-icon-close{opacity:1;transform:none}

/* 3. Header, nav and menu panel -------------------------------------------- */
/* Sticky: clear over the hero, then dark green once the page has scrolled a
   little, just before the hero heading reaches it (js/modules/header.js). */
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;color:var(--on-dark);background-color:transparent;transition:background-color 360ms cubic-bezier(0.45, 0, 0.2, 1),box-shadow 360ms cubic-bezier(0.45, 0, 0.2, 1)}
.site-header .nav::before{transition:opacity 360ms cubic-bezier(0.45, 0, 0.2, 1)}
.site-header.is-solid,.site-header:has(.menu-panel:not([hidden])){background-color:var(--brand);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.site-header:has(.menu-panel:not([hidden])) .nav::before{opacity:0}
.site-header.is-solid .nav::before{opacity:0}
html{scroll-padding-top:120px}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--gutter)}
/* soft blurred fade behind the bar so the links read over any photo */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + var(--space-6));background:linear-gradient(180deg,var(--nav-fade) 0%,var(--nav-fade-end) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%);mask-image:linear-gradient(180deg,#000 35%,transparent 100%);pointer-events:none}
.nav > *{position:relative}

.logo{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);text-decoration:none;font-weight:var(--weight-bold);border-radius:var(--radius-pill)}
/* {{ LOGO }}: dashed circle stands in until Jamie's logo file arrives */
/* EGS round badge, cut from Jamie's logo with transparent corners (src/logos) */
.logo-mark{display:block;width:56px;height:56px;flex:none;border-radius:var(--radius-pill)}   /* Claude Design: 56 on phones, 64 from 1024 in the header, 96 in the footer */
.logo-mark img{width:100%;height:100%;display:block}
.logo-mark-lg{width:96px;height:96px}
@media (min-width:1024px){ .site-header .logo-mark{width:64px;height:64px} }

.nav-links{display:none;align-items:center;gap:clamp(24px, 3.4vw - 9px, 40px);font-size:var(--step--1);font-weight:var(--weight-medium)}
.nav-links > li{display:flex}
.nav-links a,.nav-drop-btn{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--tap);text-decoration:none;border-radius:var(--radius-sm)}
/* Top-level nav links dim with colour, not opacity: an opacity change can flip text sharpness at the start and end of a hover, which reads as a flicker */
.nav-links > li > a,.nav-drop-btn{color:rgba(255,255,255,0.85);transition:color var(--dur-fast) var(--ease)}
.nav-links > li > a:hover,.nav-links > li > a[aria-current="page"],.nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{color:var(--on-dark)}
/* the current page: an orange underline under its link */
.nav-links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
.menu-panel a[aria-current="page"]{color:var(--accent)}
.nav-drop{position:relative}
.nav-drop-btn{background:none;border:0;padding:0;cursor:pointer}
.nav-drop-btn .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--dur-fast) var(--ease)}
.nav-drop:hover .chev,.nav-drop:focus-within .chev{transform:rotate(180deg)}
.nav-menu{position:absolute;top:100%;left:50%;min-width:220px;display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 360ms cubic-bezier(0.45, 0, 0.2, 1),transform 360ms cubic-bezier(0.45, 0, 0.2, 1),visibility 0s linear 360ms;flex-direction:column;gap:2px;padding:var(--space-2);margin-top:var(--space-1);background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-float);transform:translate(-50%, -6px)}
/* hover bridge so the pointer can travel from the button into the menu */
.nav-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--space-3)}
.nav-menu a{color:var(--ink);opacity:1;padding:10px 12px;border-radius:var(--radius-sm);white-space:nowrap;min-height:var(--tap)}
.nav-menu a{transition:background-color var(--dur-base) var(--ease)}
.nav-menu a:hover{background:var(--surface)}
/* Opens with a short fade and drop, like the services gallery, instead of appearing at once */
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu,.nav-drop.is-open .nav-menu{visibility:visible;opacity:1;pointer-events:auto;transform:translate(-50%, 0);transition-delay:0s}
.nav-drop.is-dismissed .nav-menu{visibility:hidden;opacity:0;pointer-events:none;transform:translate(-50%, -6px)}
@media (prefers-reduced-motion:reduce){.nav-menu{transition:none;transform:translateX(-50%)}.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu,.nav-drop.is-open .nav-menu,.nav-drop.is-dismissed .nav-menu{transform:translateX(-50%)}}
html.menu-open{overflow:hidden}

.nav-end{display:flex;align-items:center;gap:var(--space-3)}
.nav-end .btn{display:none}

/* Menu panel, below 1200px */
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--brand);color:var(--on-dark);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-float);max-height:calc(100svh - 88px);overflow-y:auto;overscroll-behavior:contain;padding:var(--space-2) var(--gutter) var(--space-5)}
/* Opens and closes smoothly: the panel fades and drops 12px with the site's easing.
   It stays rendered when hidden, but invisible and out of reach (visibility), so screen
   readers and the keyboard skip it exactly as before. */
.menu-panel{opacity:1;transform:none;visibility:visible;transition:opacity 360ms cubic-bezier(0.45, 0, 0.2, 1),transform 360ms cubic-bezier(0.45, 0, 0.2, 1),visibility 0s}
.menu-panel[hidden]{display:block;opacity:0;transform:translateY(-12px);visibility:hidden;pointer-events:none;transition:opacity 280ms cubic-bezier(0.45, 0, 0.2, 1),transform 280ms cubic-bezier(0.45, 0, 0.2, 1),visibility 0s linear 280ms}
.menu-list{display:grid}
.menu-list > li{border-bottom:var(--border) solid rgba(255,255,255,0.16)}
.menu-list a{display:flex;align-items:center;min-height:52px;text-decoration:none;font-weight:var(--weight-medium);font-size:var(--step-1)}
.menu-sub-title{display:block;padding-top:var(--space-4);font-size:var(--step--1);font-weight:var(--weight-medium);color:var(--on-dark-muted)}
.menu-sub{display:grid;padding:var(--space-1) 0 var(--space-3) var(--space-4)}
.menu-sub a{min-height:var(--tap);font-size:var(--step-0)}
.menu-call{display:flex;align-items:center;gap:var(--space-2);min-height:52px;margin-top:var(--space-2);font-weight:var(--weight-bold);text-decoration:none}
.menu-call svg{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-panel .btn{display:flex;margin-top:var(--space-3)}
.menu-panel .btn .pill{flex:1;justify-content:center}

/* tablet, laptop and desktop bands */
@media (min-width:768px) and (max-width:1023px),(min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .menu-panel{left:auto;right:var(--gutter);width:min(420px, calc(100% - 2 * var(--gutter)));border-radius:var(--radius);margin-top:var(--space-2);padding-top:var(--space-3)}
}
/* laptop and desktop bands */
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .nav{padding:var(--space-5) var(--gutter-nav-wide);display:grid;grid-template-columns:1fr auto 1fr}
  .nav .logo{justify-self:start}
  .nav-end{justify-self:end;grid-column:3}
  .nav-end .btn{display:inline-flex}
  .menu-panel{right:var(--gutter-nav-wide)}
}
/* Structural exception: the full link row needs 1200px (see the note at the top) */
@media (min-width:1200px){
  .nav-links{display:flex}
  .iconbtn-menu,.menu-panel,.menu-panel[hidden]{display:none}
}

/* 4. Footer ---------------------------------------------------------------- */
/* Temporary credit line while the homepage is built section by section.
   Replaced by the full footer (section 11). */
.site-footer{background:var(--brand);color:var(--on-dark-muted);font-size:var(--step--1)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-5)}
.site-footer a{color:var(--on-dark)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}

/* Footer (replaces the temporary credit line) */
.site-footer{padding-top:var(--space-8);overflow:hidden;color:var(--on-dark)}
.site-footer .foot-wrap{display:block;padding-block:0}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-5)}
.foot-cols > :first-child{grid-column:1 / -1}
.site-footer h2{font-size:var(--step-0);font-weight:var(--weight-medium);margin:0 0 var(--space-4)}
.site-footer ul{display:grid;gap:var(--space-1);font-size:var(--step--1)}
.site-footer ul a,.site-footer ul span,.foot-blurb{color:var(--on-dark-muted);text-decoration:none}
.site-footer ul a{display:inline-flex;align-items:center;min-height:32px}
.site-footer ul span{display:inline-block;padding-block:6px}
.site-footer ul a:hover{color:var(--on-dark);text-decoration:underline}
.foot-blurb{font-size:var(--step--1);max-width:340px;margin-top:var(--space-4)}
.wordmark{font-size:var(--step-wordmark);line-height:var(--lh-display);letter-spacing:var(--track-wordmark);font-weight:var(--weight-bold);margin-top:var(--space-9);text-align:center;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--step--1);color:var(--on-dark-muted);margin-top:var(--space-6);padding-block:var(--space-5);border-top:var(--border) solid rgba(255,255,255,.2)}
.foot-base a{color:var(--on-dark)}
/* room for the sticky quote bar below 1024 */
@media (max-width:767px),(min-width:768px) and (max-width:1023px){
  .foot-base{padding-bottom:calc(var(--space-5) + 76px)}
}
/* Footer: brand, Services and Explore as before, then a 2x2 block of About and
   Contact over Hours and Legal. On phones the 2x2 stacks About beside Hours,
   with Contact and Legal full width so the email and address never squeeze. */
.foot-grid{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"about hours" "contact contact" "legal legal";gap:var(--space-7) var(--space-5)}
.fg-about{grid-area:about}.fg-contact{grid-area:contact}.fg-hours{grid-area:hours}.fg-legal{grid-area:legal}
.hours{margin:0;display:grid;gap:var(--space-3)}
.hours dt{color:var(--on-dark)}
.hours dd{margin:2px 0 0;color:var(--on-dark-muted)}
.site-footer .legal{gap:var(--space-2)}
.site-footer .legal span{padding-block:0}
@media (min-width:768px) and (max-width:1023px){
  .foot-grid{grid-template-areas:"about contact" "hours legal"}
}
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  /* From 1024: Services, Explore, About and Contact are four equal columns with
     equal gaps; Hours sits under About and Legal under Contact (the 2x2 shares the
     parent's columns through subgrid). 1024 to 1439: the brand takes its own row above. */
  .foot-cols{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-7)}
  .foot-grid{grid-column:3 / span 2;grid-template-columns:subgrid;grid-template-areas:"about contact" "hours legal";column-gap:var(--space-7);row-gap:var(--space-7)}
  .site-footer > .foot-wrap{max-width:none;padding-inline:var(--gutter-nav-wide)}
}
@media (min-width:1440px){
  .foot-cols{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}
  .foot-cols > :first-child{grid-column:auto}
  .foot-grid{grid-column:4 / span 2}
}

/* Footer social icons: a row of round buttons, icons centred */
.site-footer .socials{list-style:none;display:flex;flex-direction:row;gap:var(--space-2);margin:var(--space-5) 0 0;padding:0}
.site-footer .socials a{width:var(--tap);height:var(--tap);min-height:0;display:grid;place-items:center;padding:0;border-radius:var(--radius-pill);border:var(--border) solid rgba(255,255,255,.25);color:var(--on-dark);text-decoration:none;transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
.site-footer .socials a:hover,.site-footer .socials a:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper);text-decoration:none}
.site-footer .socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.site-footer .socials .dot{fill:currentColor;stroke:none}
/* Long contact lines (the email address) wrap instead of running off a phone screen */
.site-footer ul a,.site-footer ul span{overflow-wrap:break-word;min-width:0}

/* Text for screen readers only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Footer content one step quieter than the headings, so the headings stand out.
   Links brighten to white on hover. */
.site-footer{--foot-text:rgba(255,255,255,0.6)}
.site-footer ul a,.site-footer ul span,.foot-blurb,.hours dt,.hours dd,.foot-base,.foot-base a{color:var(--foot-text)}
.site-footer ul a:hover,.foot-base a:hover{color:var(--on-dark)}

/* Shared components used on more than one page ------------------------------ */
/* Glass panel (hero proof bar, FAQs search bar) */
.glass{background:var(--glass-fill);border:var(--border) solid var(--glass-border);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);backdrop-filter:blur(var(--glass-blur)) saturate(140%);box-shadow:var(--shadow-glass);color:var(--on-dark)}
/* Accordion (homepage FAQ and the FAQs page) */
.faq-list{border-top:var(--border) solid var(--rule)}
.faq-item{border-bottom:var(--border) solid var(--rule);padding:var(--space-5) 0}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:var(--tap);font-weight:var(--weight-medium);font-size:var(--step-1);cursor:pointer;border-radius:var(--radius-sm)}
.faq-item summary::-webkit-details-marker{display:none}
/* Plus and minus drawn as two 2px bars, centred exactly in the 32px circle (a typed + sits off-centre).
   Opening shrinks the upright bar away, which turns the plus into a minus. */
.faq-item summary::after{content:"";width:32px;height:32px;flex:none;border-radius:var(--radius-pill);background:linear-gradient(currentColor,currentColor) center / 12px 2px no-repeat,linear-gradient(currentColor,currentColor) center / 2px 12px no-repeat,var(--surface);transition:background-size var(--dur-base) var(--ease)}
.faq-item[open] summary::after{background-size:12px 2px,2px 0,auto}
.faq-item p{margin-top:var(--space-3);color:var(--muted)}

/* Steady hovers: blurred glass and the moving arrow each get their own layer, so a button
   changing colour inside or beside them does not make the blur repaint and shimmer. */
.glass,.nav::before{transform:translateZ(0)}
.btn-arrow,.faq-chips .dn{will-change:transform}

/* Hero content width, every page with a hero: from 1024px it steps in from the page edge
   halfway between the nav edge and the content box edge, so heroes are wider than the box. */
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .hero{--hero-gutter:calc((var(--gutter-nav-wide) + max(var(--gutter), (100vw - var(--max-width)) / 2 + var(--gutter))) / 2)}
  .hero > .hero-body.wrap,.hero > .hero-bar-wrap.wrap{max-width:none;padding-inline:var(--hero-gutter)}
}

/* Sticky quote bar, phone and tablet ------------------------------------- */
/* Dark green pill, 12px from the screen edges, so it reads as part of the site, not a white card */
.sticky{position:fixed;z-index:15;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);display:flex;gap:var(--space-3);align-items:center;background:var(--brand);padding:var(--space-3);border-radius:var(--radius-pill);box-shadow:var(--shadow-float);transform:translateY(calc(100% + var(--space-4)));visibility:hidden;transition:transform var(--dur-base) var(--ease),visibility 0s linear var(--dur-base)}
.sticky.is-shown{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease),visibility 0s}
.sticky .btn{flex:1}
.sticky .btn .pill{flex:1;justify-content:center;min-height:var(--btn-h-sm)}
.sticky .iconbtn{border-color:rgba(255,255,255,0.6);color:var(--on-dark)}
.sticky .btn-quote:hover .pill,.sticky .btn-quote:focus-visible .pill,.menu-panel .btn-quote:hover .pill,.menu-panel .btn-quote:focus-visible .pill{background:var(--paper);color:var(--ink)}
@media (min-width:768px) and (max-width:1023px){
  .sticky{left:auto;width:360px}
}
@media (min-width:1024px) and (max-width:1439px),(min-width:1440px){
  .sticky{display:none}
}

@media (prefers-reduced-motion:reduce){
  .menu-panel,.menu-panel[hidden],.iconbtn-menu path{transition:none}
}

/* Photo crop focus (Claude Design's placement guide). In the stylesheet, not inline:
   the site's security policy blocks inline styles, so inline positions are ignored live. */
.fp-hero-house-lawn{object-position:50% 30%}