/* ==========================================================================
   Greyson's Lawn and Landscape, LLC - Simpsonville, SC

   Design notes, so a later pass does not undo deliberate choices:

   - The accent is FUCHSIA, sampled off the crew shirts in IMG_2588 (#DA2EB1).
     Every competitor in this category is green. The pink is the whole point
     of the differentiation. Green is kept only as a structural dark colour,
     because the logo mark is green.
   - Radius system: 14px on surfaces and images, pill on interactive. One
     scale. Do not introduce a third.
   - Type scale is 7 steps. Do not add ad-hoc font sizes.
   - There are no eyebrow / kicker labels on this page, on purpose. A
     section's position already categorises it, and stacked uppercase kickers
     are the strongest "AI generated this" tell in the category.
   ========================================================================== */

@font-face{font-family:Barlow;src:url(../fonts/Barlow-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/Barlow-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/Barlow-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(../fonts/Barlow-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Playfair carries the headings. Justified rather than defaulted: Greyson's own
   logo is a high-contrast serif, and the reference design he approved sets its
   headlines in a serif too. Body and UI stay on Barlow. */
@font-face{font-family:"Playfair Display";src:url(../fonts/Playfair-Display-400-900.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  /* Every colour below was contrast-checked against its real background.
     Ratios are noted so a future edit does not quietly break AA. */
  --paper:#F6F1E6;            /* cream, matching the Framer reference. Not white. */
  --surface:#FFFDF7;          /* warm card white, still reads as a lift off the cream */
  --ink:#14171A;              /* 16.0:1 on cream */
  --muted:#4A545E;            /* 6.9:1 on cream */
  --line:#E2DACA;

  --forest:#16321F;           /* dark band colour, taken from the logo green */
  --forest-soft:#1E4029;

  --fuchsia:#B01A8C;          /* UI fuchsia. 6.0:1 on paper. White on it 6.2:1 */
  --fuchsia-bright:#DA2EB1;   /* the literal shirt colour. Large fills only. */
  --fuchsia-light:#F272D0;    /* 5.4:1 on forest */
  --fuchsia-wash:#FBEEF7;

  /* Seven step type scale. */
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-base:1.0625rem;
  --t-lg:1.25rem;
  --t-xl:1.75rem;
  --t-2xl:clamp(1.9rem,3.4vw,2.85rem);
  --t-3xl:clamp(2.6rem,5.2vw,4.1rem);

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;

  --radius:14px;
  --shell:1220px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section:clamp(4rem,8vw,6.5rem);

  /* Built-in CSS easings are too weak to read as intentional. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease:cubic-bezier(.4,0,.2,1);

  --shadow:0 1px 2px rgba(20,23,26,.05),0 8px 24px -12px rgba(20,23,26,.14);
  --shadow-lift:0 2px 4px rgba(20,23,26,.06),0 18px 40px -16px rgba(20,23,26,.2);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#12140F;
    --surface:#1B1E17;
    --ink:#EFEEE6;
    --muted:#ADB3A6;
    --line:#2E322A;
    --forest:#101E15;
    --forest-soft:#172C1E;
    --fuchsia:#F272D0;        /* 7.7:1 on paper */
    --fuchsia-bright:#F272D0;
    --fuchsia-light:#F9A9E2;
    --fuchsia-wash:#241221;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift:0 2px 4px rgba(0,0,0,.45),0 18px 40px -16px rgba(0,0,0,.7);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.1;letter-spacing:-.015em}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl);line-height:1.15}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--fuchsia);text-decoration-thickness:1px;text-underline-offset:3px}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.lede{font-size:var(--t-lg);color:var(--muted);line-height:1.5;max-width:56ch}
.prose{color:var(--muted);max-width:62ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:60;background:var(--surface);color:var(--ink);
  padding:.75rem 1.25rem;border-radius:999px;border:1.5px solid var(--fuchsia);font-weight:700}

:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--fuchsia);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  border:1.5px solid transparent;
  font-size:var(--t-sm);font-weight:700;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 200ms var(--ease),
             border-color 200ms var(--ease),color 200ms var(--ease);
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--fuchsia);color:#fff;border-color:var(--fuchsia)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-onDark{background:#C2249C;color:#fff;border-color:#C2249C}  /* white label 5.22:1 */
.btn-onDark-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#961577;border-color:#961577}
  .btn-ghost:hover{border-color:var(--ink)}
  .btn-onDark:hover{background:#A81886;border-color:#A81886}
  .btn-onDark-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
}
@media (prefers-color-scheme:dark){
  /* In dark mode the fuchsia inverts to a light tint, so the label goes dark.
     The hover colours have to invert with it, or hover lands dark-on-dark. */
  .btn-primary{color:#180914}
  @media (hover:hover) and (pointer:fine){
    .btn-primary:hover{background:#F9A9E2;border-color:#F9A9E2;color:#180914}
  }
}

/* ---------- Header: dark green, so it sits ON the hero photo instead of
   cutting a hard light line across the top of it. -------------------------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--forest) 94%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-inner{
  height:74px;display:flex;align-items:center;gap:1.5rem;
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);
}

/* The header is always dark, so it always takes the white logo. The other
   colourways still ship and the full lockup is still used in the footer.

   The mark (tree + GREYSON'S) is the image; the descriptor under it is live
   text. Rasterising the original's black descriptor bar at this size puts the
   type at roughly 5px and it turns to mush, so it is set instead. Letterspacing
   is tuned so the two lines end up the same width. */
/* Greyson asked to try the normal full lockup in white here, rather than the
   mark plus live-text descriptor that was here before. Tradeoff he should see:
   the lockup is 2.42:1, so at a height that fits a 74px nav the
   "LAWN & LANDSCAPE, LLC" bar sits around 6px tall. It is pushed as large as
   the nav allows. The previous construction is one revert away if he prefers it. */
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand-logo{height:58px;width:auto;display:block}
/* Tighter on phones, but the descriptor stays at the 11px floor: shrinking the
   mark is what buys the room, not shrinking the type. */
@media (max-width:560px){.brand-logo{height:44px}}

.footer-logo{width:min(260px,72%);height:auto}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.75rem}
.nav-list{display:contents}
.nav a{color:#E7EDE8;text-decoration:none;font-size:var(--t-sm);font-weight:600;
  transition:color 180ms var(--ease)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--fuchsia-light)}}
.header-actions{display:flex;align-items:center;gap:.9rem}
.header-phone{color:#E7EDE8;text-decoration:none;font-weight:700;font-size:var(--t-sm);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.header-phone:hover{color:var(--fuchsia-light)}}
.nav-toggle{display:none;background:none;border:1.5px solid rgba(255,255,255,.35);
  border-radius:999px;padding:.55rem 1.1rem;font:inherit;font-size:var(--t-sm);font-weight:700;
  color:#E7EDE8;cursor:pointer;transition:transform 160ms var(--ease-out)}
.nav-toggle:active{transform:scale(.97)}

@media (max-width:1000px){
  .nav-toggle{display:block;order:3}
  .header-actions{margin-left:auto;order:2}
  .nav{
    position:fixed;left:0;right:0;top:74px;
    margin-left:0;
    background:var(--forest);
    border-bottom:1px solid rgba(255,255,255,.12);
    display:grid;grid-template-rows:0fr;
    /* Collapsing via grid-template-rows hides the content but NOT this
       element's own padding, so all padding lives on .nav-list instead. */
    overflow:hidden;
    transition:grid-template-rows 260ms var(--ease-out);
  }
  .nav.is-open{grid-template-rows:1fr}
  .nav-list{
    display:flex;flex-direction:column;min-height:0;overflow:hidden;
    padding-inline:var(--gutter);
  }
  .nav a{padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:var(--t-base)}
  .nav a:last-child{border-bottom:0}
  .header-phone{display:none}
}
@media (max-width:560px){
  /* At 375px the logo, the CTA and the toggle together overflowed a 375px
     viewport. The logo shrinks to 42px (above) and the gaps tighten here.
     Re-measure if any of the three changes size. */
  .header-inner{gap:.75rem}
  .header-actions{gap:.6rem}
  .header-actions .btn{padding:.7rem 1.05rem}
  .nav-toggle{padding:.55rem .9rem}
}

/* ---------- Hero: full-bleed photo, copy over it -------------------------
   Shape follows the reference Greyson approved: location pill, serif headline
   carrying the city and the service, sub-line, two CTAs, then a dark trust
   band. The band is dark on purpose so the page never drops from the photo
   straight onto a light background. */
.hero{
  position:relative;isolation:isolate;
  min-height:min(80vh,700px);
  display:flex;align-items:center;
  overflow:hidden;
}
.hero-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:50% 60%;
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,16,10,.88) 0%, rgba(6,16,10,.74) 38%, rgba(6,16,10,.30) 68%, rgba(6,16,10,.16) 100%),
    linear-gradient(to top, rgba(6,16,10,.45) 0%, rgba(6,16,10,0) 45%);
}
.hero-inner{padding-block:clamp(3.5rem,8vw,5rem);width:100%}

/* NOTE: there was a location pill above the headline here, copied from the
   reference. It is gone and it should stay gone. Ethan: "That box just screams
   AI made. every ai website has that unless told not to." The city is already
   in the H1 and in the trust band, so the pill was saying it a third time.
   This page carries no eyebrow or kicker labels anywhere, on purpose. */
/* 20ch and a slightly smaller cap lands this at three lines at desktop, which
   is what the reference does. At 17ch it broke to four. */
.hero h1{
  color:#fff;max-width:20ch;
  font-size:clamp(2.3rem,4.1vw,3.5rem);
  line-height:1.14;letter-spacing:-.01em;
}
/* Measured on the composited hero, not guessed. At the lightest pixel under
   the copy, white reads 5.7:1 and this grey 5.1:1, both clear of AA.
   Re-measure before lightening the scrim any further. */
.hero-lede{
  color:#EFF3F0;font-size:var(--t-lg);line-height:1.55;
  max-width:52ch;margin-top:1.35rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
@media (max-width:700px){
  .hero{min-height:auto}
  .hero-img{object-position:58% 62%}
  .hero-scrim{
    background:linear-gradient(180deg, rgba(6,16,10,.62) 0%, rgba(6,16,10,.80) 55%, rgba(6,16,10,.88) 100%);
  }
  .hero-inner{padding-block:3.5rem}
  .hero h1{max-width:none}
  .hero-lede{max-width:none}
}

/* ---------- Trust band ---------------------------------------------------- */
.creds{background:var(--forest);border-bottom:1px solid rgba(255,255,255,.08)}
.creds-inner{
  display:flex;flex-wrap:wrap;gap:.75rem;
  padding-block:1.1rem;
}
.cred{
  display:inline-flex;align-items:center;gap:.45rem;
  flex:1 1 auto;justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.6rem 1.15rem;
  font-size:var(--t-sm);font-weight:700;color:#EFF3F0;
  white-space:nowrap;
}
.cred-star{color:var(--fuchsia-light);font-size:1em;line-height:1}
@media (max-width:760px){
  .cred{flex:1 1 100%;justify-content:flex-start}
}

/* ---------- Section basics ---------------------------------------------- */
.section{padding-block:var(--section)}
.section-head{max-width:60ch}
.section-head p{margin-top:1rem}

/* ---------- Hardscape feature: wide photo, overlapping panel ------------- */
.feature-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:1800/1050;max-height:560px}
.feature-photo img{width:100%;height:100%;object-fit:cover}
.feature-panel{
  background:var(--forest);color:#fff;
  border-radius:var(--radius);
  padding:clamp(1.75rem,3.5vw,2.75rem);
  box-shadow:var(--shadow-lift);
  max-width:560px;
  margin:-5.5rem 0 0 clamp(0rem,3vw,3rem);
  position:relative;
}
.feature-panel h2{color:#fff}
.feature-panel p{color:#D6DED8;margin-top:1rem}
.feature-list{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.25rem;
  font-size:var(--t-sm);font-weight:600;color:#fff;
}
.feature-list li{padding-left:1rem;position:relative}
.feature-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--fuchsia-light);
}
.feature-panel .btn{margin-top:1.75rem}
@media (max-width:720px){
  .feature-panel{margin:-3rem 0 0;max-width:none}
  .feature-list{grid-template-columns:1fr}
}

/* ---------- Services: two wide rows, then a 2x2 -------------------------- */
.svc-stack{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:2.75rem}
.svc-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}

.svc{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
}
.svc-media{aspect-ratio:1200/850;overflow:hidden;background:var(--line)}
.svc-media img{width:100%;height:100%;object-fit:cover}
.svc-body{padding:clamp(1.25rem,2.4vw,1.75rem);display:flex;flex-direction:column;gap:.7rem}
.svc-body h3{font-size:var(--t-lg)}
.svc-body p{color:var(--muted);font-size:var(--t-sm)}

/* The wide variant puts the photo beside the copy instead of above it, so
   the two lead services read differently from the four below them. */
.svc-wide{flex-direction:row;align-items:stretch}
.svc-wide .svc-media{flex:0 0 46%;aspect-ratio:auto;min-height:280px}
.svc-wide .svc-body{justify-content:center;padding:clamp(1.5rem,3vw,2.5rem)}
.svc-wide .svc-body h3{font-size:var(--t-xl)}
.svc-wide .svc-body p{font-size:var(--t-base)}
.svc-includes{list-style:none;margin:.35rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.svc-includes li{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.01em;
  background:var(--fuchsia-wash);color:var(--fuchsia);
  border-radius:999px;padding:.3rem .75rem;
}
/* The warranty chips are a real selling point, not just another tag, so they
   carry the solid fill instead of the wash. White on --fuchsia is 6.2:1. */
.svc-warranty{background:var(--fuchsia) !important;color:#fff !important}
@media (prefers-color-scheme:dark){
  .svc-warranty{color:#180914 !important}
}
@media (max-width:800px){
  .svc-pair{grid-template-columns:1fr}
  .svc-wide{flex-direction:column}
  .svc-wide .svc-media{flex:none;aspect-ratio:16/9;min-height:0}
}

/* ---------- The crew: the one split layout on the page ------------------ */
.crew-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.crew-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift);aspect-ratio:1100/1270;max-height:520px}
.crew-photo img{width:100%;height:100%;object-fit:cover}
.crew-copy h2{max-width:16ch}
.crew-copy p{margin-top:1.1rem}
.crew-copy .btn{margin-top:1.75rem}
@media (max-width:820px){
  .crew-grid{grid-template-columns:1fr}
  .crew-photo{aspect-ratio:4/3;max-height:none}
}

/* ---------- Commercial: dark band, stacked head, one wide photo ---------- */
.commercial{background:var(--forest);color:#fff;padding-block:var(--section)}
.commercial h2{color:#fff;max-width:18ch}
.commercial-top{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between}
.commercial-top .prose{color:#D6DED8;max-width:46ch}
/* A fixed height rather than aspect-ratio. With aspect-ratio plus max-height
   the box shrinks its WIDTH to keep the ratio, which left the photo stranded
   against the left edge of a full width dark band. */
.commercial-photo{
  margin-top:clamp(2rem,4vw,3rem);
  border-radius:var(--radius);overflow:hidden;
  height:clamp(260px,34vw,460px);
}
.commercial-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- The one-stop line, in Greyson's own words -------------------- */
/* No side rule and no tinted card here on purpose. A thick coloured border on
   one edge is the single most recognisable generated-UI tell, and this line is
   Greyson's own words, so it carries itself at size. */
/* Bottom padding is trimmed because the gallery sits directly under this line
   and Greyson wanted the photo closer to the text. The gallery itself has no
   top padding, so this value IS the gap. */
.oneStop{padding-block:var(--section) clamp(2rem,4vw,3rem)}
.oneStop-inner{max-width:46ch}
.oneStop-line{
  font-size:var(--t-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.12;
}
.oneStop-line .dot{color:var(--fuchsia-bright)}
.oneStop p{margin-top:1.25rem;color:var(--muted)}

/* ---------- Reviews ------------------------------------------------------ */
.rating-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.5rem;margin-top:2rem;
}
.rating-score{font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em;line-height:1}
.stars{color:var(--fuchsia-bright);letter-spacing:.12em;font-size:var(--t-lg);line-height:1}
.rating-meta{color:var(--muted);font-size:var(--t-sm);font-weight:600}
.rating-bar .btn{margin-left:auto}

/* Reviews scroll continuously.
   Motivation, since motion needs one: there are more reviews than fit across a
   row, and a moving strip says "there are plenty of these" without a carousel's
   controls. Constant motion, so the easing is linear.

   Base state is a plain swipeable row. JS clones the cards once and only then
   turns the animation on, so no-JS and reduced-motion both land on something
   usable instead of a broken loop. */
.reviews-marquee{
  margin-top:1.25rem;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* fade the edges so cards enter and leave instead of being chopped */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
}
.reviews-marquee::-webkit-scrollbar{display:none}
.reviews-track{display:flex;gap:clamp(1rem,2vw,1.5rem);width:max-content;padding-block:.25rem}

.reviews-marquee.is-animating{overflow:hidden}
.reviews-marquee.is-animating .reviews-track{animation:reviews-scroll 64s linear infinite}
@keyframes reviews-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* Let people stop it to actually read one. */
@media (hover:hover) and (pointer:fine){
  .reviews-marquee.is-animating:hover .reviews-track{animation-play-state:paused}
}
.reviews-marquee.is-animating:focus-within .reviews-track{animation-play-state:paused}

.review{
  flex:0 0 min(360px,78vw);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.25rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.85rem;margin:0;
}
.review .stars{font-size:var(--t-base)}
.review blockquote{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--ink)}
.review figcaption{font-size:var(--t-xs);font-weight:700;color:var(--muted);letter-spacing:.02em}

/* The reduced-motion override that used to stop this is gone on purpose.
   Greyson: "i dont want manual control i just want it to infinetily slide."
   It was iOS Reduce Motion that made it a manual strip on his phone.
   This is the one place on the page where reduced motion is not honoured;
   everything else still collapses to static. */

/* ---------- Service areas ----------------------------------------------- */
.areas{padding-block:var(--section);border-top:1px solid var(--line)}
/* Roomier than it was. Greyson flagged that the chips read as crowded, and it
   is worse on mobile where they wrap. He is also planning to add a lot more
   cities, so this needs to stay readable at 15 or 20 of them, not just six. */
.areas-list{display:flex;flex-wrap:wrap;gap:.85rem .75rem;margin-top:1.75rem;padding:0;list-style:none}
.areas-list li{
  border:1.5px solid var(--line);border-radius:999px;
  padding:.6rem 1.35rem;font-weight:700;font-size:var(--t-sm);
  background:var(--surface);
}

/* ---------- Contact band ------------------------------------------------
   There is deliberately no form here: Greyson still takes requests through
   Jobber, so the primary CTA is an outbound link. If a form ever comes back,
   the working intake JS is in All American Fence's site.js. */
/* Back to forest. The pink Greyson asked for is in the FOOTER, not here. */
.quote{background:var(--forest);color:#fff;padding-block:var(--section)}
.quote > .shell{max-width:780px}
.quote h2{color:#fff}
.quote-lede{color:#D6DED8;margin-top:1rem;max-width:52ch}
.quote-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
/* ---------- Work gallery -------------------------------------------------
   The track is a real horizontal scroll container, not a transform. That
   gives native touch swipe and native momentum for free, and the arrows just
   drive scrollLeft. Contained rather than full bleed, matching the rest. */
/* Sits close under the line above it, per Greyson. The section above supplies
   the remaining breathing room, so this has no top padding of its own. */
.band{padding-block:0 var(--section)}

/* Arrows live OUTSIDE the photo, not on top of it. Three column flex at
   desktop; on phones the arrows drop below and flank the dots, because
   40px of chrome on each side of a 375px screen eats the picture. */
.gallery{
  display:grid;
  grid-template-columns:auto minmax(0,1000px) auto;
  grid-template-areas:
    "prev frame next"
    "dots dots  dots";
  align-items:center;justify-content:center;
  column-gap:clamp(.5rem,2vw,1.25rem);
}
.gallery-prev{grid-area:prev}
.gallery-next{grid-area:next}
.gallery-frame{grid-area:frame;position:relative;min-width:0}
.gallery-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track:focus-visible{outline:2px solid var(--fuchsia);outline-offset:4px}
.gallery-item{
  flex:0 0 100%;margin:0;
  scroll-snap-align:center;
  aspect-ratio:4/3;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}

.gallery-nav{
  flex:0 0 auto;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface);
  border:1.5px solid var(--line);
  color:var(--ink);font-size:2rem;line-height:0;
  padding-bottom:.2em;                  /* optically centres the chevron glyph */
  cursor:pointer;
  transition:background-color 200ms var(--ease),border-color 200ms var(--ease),
             transform 160ms var(--ease-out);
}
.gallery-nav:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .gallery-nav:hover{border-color:var(--fuchsia);color:var(--fuchsia)}
}

/* ---------- Gallery dots ---------- */
.gallery-dots{
  grid-area:dots;
  display:flex;justify-content:center;align-items:center;
  gap:.6rem;margin-top:1.5rem;flex-wrap:wrap;
}
.gallery-dot{
  width:9px;height:9px;padding:0;
  border-radius:50%;border:0;
  background:var(--line);
  cursor:pointer;
  transition:background-color 220ms var(--ease),transform 220ms var(--ease-out);
}
.gallery-dot[aria-selected="true"]{background:var(--fuchsia);transform:scale(1.35)}
@media (hover:hover) and (pointer:fine){
  .gallery-dot:hover{background:var(--muted)}
  .gallery-dot[aria-selected="true"]:hover{background:var(--fuchsia)}
}
/* The dots are 9px, well under a comfortable tap target, so give each one an
   invisible 44px hit area rather than making the dot itself bigger. */
.gallery-dot::before{
  content:"";position:absolute;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  margin-left:4.5px;margin-top:4.5px;
}
.gallery-dot{position:relative}

@media (max-width:700px){
  /* The photo takes the full width and the arrows drop down to flank the dots,
     rather than eating 100px of a 375px screen. */
  .gallery{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "frame frame frame"
      "prev  dots  next";
  }
  .gallery-nav{width:44px;height:44px;font-size:1.75rem}
  .gallery-dots{margin-top:1.25rem}
}

/* ---------- Footer ------------------------------------------------------- */
/* PINK footer. Greyson's request, and it is the only pink surface on the page.
   #9C1179 rather than the brighter shirt pink, because white on #DA2EB1 is
   4.19:1 and fails AA, while on this it is 7.58:1. Every value below was
   checked against that background, not guessed. */
.site-footer{background:#9C1179;color:#fff;padding-block:3.5rem 2.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.footer-grid h2{margin:0 0 .9rem;font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:#F3B8DF;font-weight:700}   /* 4.9:1 */
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.footer-grid a{color:#fff;text-decoration:none;font-size:var(--t-sm);font-weight:600}
@media (hover:hover) and (pointer:fine){.footer-grid a:hover{color:#FBE3F3;text-decoration:underline}}
.footer-about p{color:#FBE3F3;font-size:var(--t-sm);margin-top:1rem;max-width:38ch}  /* 6.28:1 */
.footer-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.28);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  color:#FBE3F3;font-size:var(--t-xs);
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}}

/* ---------- Scroll reveal, opt-in and motion-safe ------------------------ */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  /* The blanket rule above is what actually stopped the review marquee on
     Greyson's phone, and it wins with !important even after the JS gate was
     removed. The marquee is the one deliberate exception, per his request. */
  .reviews-marquee.is-animating .reviews-track{animation-duration:64s !important}
}