/* ==========================================================================
   King's Tree Service
   ========================================================================== */

:root{
  /* Base backgrounds, darkest to lightest. Lift or drop all four together to
     change how dark the site reads. --ink-rgb must match --ink: the
     translucent header and image overlays are built from it. */
  --ink:        #16201c;
  --ink-rgb:    22,32,28;
  --ink-2:      #1c2823;
  --ink-3:      #23302a;
  --bark:       #2c3a33;
  --line:       rgba(233,226,212,.12);
  --line-soft:  rgba(233,226,212,.07);

  --sand:       #ece6da;
  --sand-dim:   #b3b3a7;
  --muted:      #8b9189;

  --amber:      #f08a2c;
  --amber-2:    #ffa851;
  --moss:       #5a9b5f;   /* lifted with the background to keep AA contrast */

  --wrap:       1280px;
  --r:          14px;
  --r-sm:       9px;

  --shadow:     0 24px 60px rgba(0,0,0,.45);
  --shadow-sm:  0 8px 24px rgba(0,0,0,.3);

  /* Oswald is the font on a thousand real contractor signs and truck doors —
     condensed, sturdy, reads local rather than Silicon Valley. Source Sans is
     a humanist workhorse: warmer and less generic than the usual UI sans. */
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Root font size scales with the viewport, so the whole UI grows on big
   monitors instead of sitting small in the middle of the screen. Everything
   else on the page is sized in rem, so it all follows this one rule.
   ~17px on a phone, ~21px at 1440, ~25px on an ultrawide. */
html{
  font-size:clamp(17px, 15.5px + 0.42vw, 25px);
  scroll-behavior:smooth; scroll-padding-top:94px; -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--sand);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

/* Oswald has tall caps and tight default sidebearings, so headings want a
   little more leading and a hair of positive tracking, not negative. */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:.012em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.7rem, 5.9vw, 4.8rem); text-transform:uppercase; }
h2{ font-size:clamp(2rem, 4vw, 3.15rem); text-transform:uppercase; }
h3{ font-size:1.4rem; letter-spacing:.02em; }

p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap.narrow{ width:min(100% - 2.5rem, 820px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:#1a1005; padding:.75rem 1.25rem; font-weight:700;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--amber-2); outline-offset:3px; border-radius:3px; }

.ico{ width:1.05em; height:1.05em; fill:currentColor; flex:none; }

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:.72rem 1.3rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn-lg{ padding:1rem 1.85rem; font-size:1.06rem; }
.btn-block{ width:100%; }

.btn-primary{
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  color:#201405;
  box-shadow:0 10px 26px rgba(240,138,44,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(240,138,44,.36); }

.btn-ghost{ border-color:var(--line); color:var(--sand); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:rgba(236,230,218,.4); background:rgba(255,255,255,.06); transform:translateY(-2px); }

/* Solid, not a washed-out outline: translucent amber over the dark green
   background muddied into brown. Matches the mobile call bar. */
.btn-call{
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  color:#201405;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px rgba(240,138,44,.22);
}
.btn-call:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(240,138,44,.34);
}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(var(--ink-rgb),.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color .3s, border-color .3s;
}
.site-header.scrolled{ background:rgba(var(--ink-rgb),.94); border-bottom-color:var(--line-soft); }

.header-inner{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }

.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; margin-right:auto; }
.brand-mark{ width:36px; height:36px; fill:var(--amber); flex:none; }
/* Laid out on one line rather than stacked, so the name reads wide. */
.brand-text{ display:flex; align-items:baseline; gap:.5rem; line-height:1; }
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:1.95rem;
  text-transform:uppercase; letter-spacing:.015em; white-space:nowrap;
}
.brand-sub{
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); font-weight:600; white-space:nowrap;
}

.nav{ display:flex; gap:1.9rem; }
.nav a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--sand-dim);
  position:relative; padding:.3rem 0; transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--amber); transition:right .25s var(--ease);
}
.nav a:hover{ color:var(--sand); }
.nav a:hover::after{ right:0; }

.burger{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:44px; height:44px; padding:0 10px;
  background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer;
}
.burger span{ display:block; height:2px; background:var(--sand); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column;
  border-top:1px solid var(--line-soft); background:rgba(var(--ink-rgb),.98);
}
.mobile-nav a{
  padding:1rem 1.25rem; text-decoration:none; font-weight:500;
  border-bottom:1px solid var(--line-soft); color:var(--sand-dim);
}
.mobile-nav.open{ display:flex; }

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  padding:clamp(1.75rem, 3vw, 3rem) 0 clamp(2.5rem, 4.5vw, 4rem);
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(240,138,44,.13), transparent 58%),
    radial-gradient(100% 80% at 8% 100%, rgba(78,140,82,.13),  transparent 60%),
    var(--ink);
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(236,230,218,.045) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg, #000, transparent 72%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 72%);
}

.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}

.eyebrow{
  font-size:.88rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--moss); margin:0 0 1rem;
}
.eyebrow.amber{ color:var(--amber); }

.hero h1{ margin-bottom:1.4rem; }
.hero h1 .hl{
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.lede{ font-size:clamp(1.03rem,1.35vw,1.16rem); color:var(--sand-dim); max-width:53ch; }

/* Buttons and the credential row are grouped in a fit-content block so the
   block is exactly as wide as the buttons. The bullets then centre against
   the buttons rather than running past them. */
.hero-actions{ width:fit-content; margin:2rem 0 0; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; }

.hero-points{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.35rem;
  list-style:none; margin:1.15rem 0 0; padding:0; width:100%;
  font-size:.92rem; font-weight:500; color:var(--sand-dim);
}
.hero-points li{ white-space:nowrap; }
.hero-points li{ display:flex; align-items:center; gap:.5rem; }
.hero-points li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none;
}

/* Capped width keeps the tall photo from ballooning on a wide monitor, which
   stretched the hero row and left dead space above the headline. */
.hero-media{ position:relative; width:100%; max-width:470px; margin-inline-start:auto; }
.hero-photo{
  margin:0; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
  transform:rotate(1.1deg);
}
/* Anchored to the top so the climber stays in frame when the tall source
   photo is cropped to the slot. */
.hero-photo img{
  width:100%; aspect-ratio:2/3; max-height:min(74vh, 800px);
  object-fit:cover; object-position:center top;
}
.hero-photo-2{
  position:absolute; left:-3rem; bottom:-2.5rem; width:58%; z-index:2;
  margin:0; border-radius:var(--r-sm); overflow:hidden;
  border:5px solid var(--ink); box-shadow:var(--shadow);
  transform:rotate(-3deg);
}
.hero-photo-2 img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

/* --------------------------------------------------------------- section */
/* Vertical rhythm. These two clamps set the space between every section and
   between a heading and its content — the main knobs for how airy the page
   feels. Lowered from 7.5rem/3.75rem, which left big dead bands on wide
   screens where the root font size is at its largest. */
.section{ padding:clamp(2.75rem, 5vw, 4.5rem) 0; }
.section-alt{ background:var(--ink-2); }

.sec-head{ max-width:62ch; margin-bottom:clamp(1.75rem,3.2vw,2.75rem); }
.sec-head h2{ margin-bottom:.9rem; }
.sec-sub{ color:var(--sand-dim); font-size:1.05rem; }

/* -------------------------------------------------------------- services */
/* Fixed 3 / 2 / 1 columns. Six services divide evenly into all three, so no
   card is ever left stranded on a row of its own. */
.services{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
}
.svc{
  background:linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.svc:hover{ transform:translateY(-5px); border-color:rgba(240,138,44,.32); box-shadow:var(--shadow-sm); }

.svc-media{ aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--bark); }
.svc-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(var(--ink-rgb),.65));
}
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc:hover .svc-media img{ transform:scale(1.06); }

.svc-body{ padding:1.6rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.svc-body h3{ color:var(--sand); }
.svc-body p{ color:var(--sand-dim); font-size:.95rem; }

.ticks{ list-style:none; margin:.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.ticks li{
  position:relative; padding-left:1.5rem; font-size:.88rem; color:var(--muted); line-height:1.45;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:9px; height:5px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber);
  transform:rotate(-45deg);
}

/* ----------------------------------------------------------------- storm */
.storm{
  background:
    linear-gradient(100deg, rgba(var(--ink-rgb),.97) 38%, rgba(var(--ink-rgb),.55)),
    var(--ink-3);
  border-block:1px solid var(--line-soft);
  padding:clamp(2.75rem,5vw,4.5rem) 0;
}
.storm-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.storm-copy{ max-width:52ch; }
.storm-copy h2{ margin-bottom:1rem; }
.storm-copy p{ color:var(--sand-dim); margin-bottom:1.85rem; }
.storm-media{
  margin:0; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.storm-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* --------------------------------------------------------------- process */
.steps{
  list-style:none; margin:2rem 0 0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem;
}
/* Rail linking the three numbered badges, so the section reads as a sequence
   rather than three unrelated boxes. Sits behind them at badge centre. */
.steps::before{
  content:""; position:absolute; left:14%; right:14%; top:0; height:2px; z-index:0;
  background:linear-gradient(90deg,
    transparent, rgba(240,138,44,.45) 12%, rgba(240,138,44,.45) 88%, transparent);
}

.step{
  position:relative; z-index:1; padding:3.25rem 1.75rem 2rem;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:border-color .3s, transform .3s var(--ease);
}
.step:hover{ border-color:rgba(240,138,44,.32); transform:translateY(-4px); }

.step-n{
  position:absolute; top:-1.45rem; left:1.75rem;
  width:2.9rem; height:2.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.3rem; font-weight:700; line-height:1;
  background:linear-gradient(180deg, var(--amber-2), var(--amber));
  color:#201405;
  box-shadow:0 8px 20px rgba(240,138,44,.32);
}
.step h3{ margin-bottom:.6rem; }
.step p{ color:var(--sand-dim); font-size:.94rem; }

/* --------------------------------------------------------------- gallery */
/* Uniform square tiles so every row lines up and the block ends flat.
   12 photos divides evenly by 4, 3 and 2, so no orphan tile at any width.
   Cropping is only in the grid — the lightbox shows the whole photo. */
.gallery{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.gal{
  display:block; width:100%; margin:0; padding:0; aspect-ratio:1;
  border:0; background:none; cursor:zoom-in;
  border-radius:var(--r-sm); overflow:hidden; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.gal img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .35s, transform .5s var(--ease);
}
.gal::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line-soft); pointer-events:none; transition:box-shadow .3s;
}
.gal:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.gal:hover img{ transform:scale(1.05); filter:brightness(1.08); }
.gal:hover::after{ box-shadow:inset 0 0 0 2px rgba(240,138,44,.55); }

/* --------------------------------------------------------------- reviews */
/* Fixed 3 / 2 / 1 columns so the six reviews always split into full rows.
   Cards stretch to match the tallest in their row; the name is pushed to the
   bottom with margin-top:auto so the captions line up too. */
.reviews{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;
}
.review{
  margin:0; padding:1.75rem;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line-soft); border-radius:var(--r);
  display:flex; flex-direction:column; gap:.9rem;
  transition:border-color .3s, transform .3s var(--ease);
}
.review:hover{ border-color:rgba(240,138,44,.3); transform:translateY(-3px); }

.stars{ color:var(--amber); font-size:1.02rem; letter-spacing:.16em; line-height:1; }

.review blockquote{
  margin:0; font-size:.97rem; line-height:1.6; color:var(--sand-dim);
}
.review blockquote::before{ content:"\201C"; }
.review blockquote::after{ content:"\201D"; }

.review figcaption{
  display:flex; flex-direction:column; gap:.15rem; margin-top:auto; padding-top:.35rem;
}
.review-who{
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; color:var(--sand);
}
.review-meta{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }

.reviews-link{ margin-top:2rem; text-align:center; }
.reviews-link a{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.92rem; font-weight:600; color:var(--amber-2); text-decoration:none;
  border-bottom:1px solid rgba(240,138,44,.35); padding-bottom:.15rem;
  transition:border-color .2s;
}
.reviews-link a::after{ content:"\2192"; transition:transform .2s var(--ease); }
.reviews-link a:hover{ border-bottom-color:var(--amber); }
.reviews-link a:hover::after{ transform:translateX(3px); }

/* ----------------------------------------------------------------- about */
.about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about-media{
  margin:0; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); position:relative;
}
.about-media img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.about-media figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1.25rem .95rem;
  font-size:.82rem; color:var(--sand-dim);
  background:linear-gradient(180deg, transparent, rgba(var(--ink-rgb),.92));
}
.about-copy h2{ margin-bottom:1.25rem; }
.about-copy p{ color:var(--sand-dim); }
.sig{
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line-soft);
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--amber);
}

/* ------------------------------------------------------------------- faq */
.faq{ display:flex; flex-direction:column; }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 3rem 1.35rem 0; position:relative;
  font-family:var(--font-display); font-size:1.32rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.01em; transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--amber-2); }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2px solid var(--amber); border-bottom:2px solid var(--amber);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq-body{ padding:0 2rem 1.5rem 0; color:var(--sand-dim); font-size:.98rem; }

/* ----------------------------------------------------------------- quote */
.quote-sec{
  background:
    radial-gradient(90% 70% at 85% 15%, rgba(240,138,44,.1), transparent 60%),
    var(--ink-2);
  border-top:1px solid var(--line-soft);
}
.quote{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.quote-copy h2{ margin-bottom:1rem; }
.quote-copy > p{ color:var(--sand-dim); }

.contact-list{ list-style:none; margin:2.25rem 0 0; padding:0; display:flex; flex-direction:column; }
.contact-list li{
  display:grid; grid-template-columns:120px 1fr; gap:1rem; align-items:baseline;
  padding:.95rem 0; border-top:1px solid var(--line-soft);
}
.cl-label{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.contact-list a{ color:var(--amber-2); text-decoration:none; font-weight:600; }
.contact-list a:hover{ text-decoration:underline; }
.contact-list span:last-child{ color:var(--sand-dim); font-size:.94rem; }

.quote-form{
  background:var(--ink-3); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column; gap:1.05rem;
  box-shadow:var(--shadow-sm);
}
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.field label{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--sand-dim); }
.field .opt{ color:var(--muted); font-weight:400; }

.field input, .field select, .field textarea{
  font-family:inherit; font-size:.97rem; color:var(--sand);
  background:rgba(0,0,0,.28); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.72rem .9rem; width:100%;
  transition:border-color .2s, background-color .2s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--amber); background:rgba(0,0,0,.4); outline:none;
}
.field input.invalid, .field textarea.invalid{ border-color:#e05a4a; }

.err{ font-size:.78rem; color:#ff8b7a; margin:0; min-height:0; }
.err:empty{ display:none; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ font-size:.83rem; color:var(--muted); text-align:center; margin:0; }
.form-consent{
  font-size:.76rem; line-height:1.5; color:var(--muted); text-align:center;
  margin:.4rem 0 0; padding-top:.85rem; border-top:1px solid var(--line-soft);
}
.form-consent a{ color:var(--sand-dim); }
.form-note.ok{ color:var(--moss); font-weight:600; }
.form-note.bad{ color:#ff8b7a; font-weight:600; }

/* ----------------------------------------------------- legal pages ------ */
.legal{ padding:clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.legal h1{ font-size:clamp(2.1rem, 4.2vw, 3.1rem); margin-bottom:.6rem; }
.legal .updated{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 2rem;
}
.legal h2{
  font-size:1.35rem; text-transform:none; letter-spacing:.01em;
  margin:2.5rem 0 .75rem; color:var(--sand);
}
.legal p, .legal li{ color:var(--sand-dim); }
.legal ul{ margin:0 0 1rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem; }
.legal a{ color:var(--amber-2); }

.legal-note{
  border:1px solid rgba(240,138,44,.35); background:rgba(240,138,44,.07);
  border-radius:var(--r); padding:1.15rem 1.35rem; margin:0 0 2.25rem;
}
.legal-note p{ margin:0; font-size:.92rem; color:var(--sand); }
.legal-note strong{ color:var(--amber-2); }

.back-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1.75rem;
  font-size:.9rem; font-weight:600; color:var(--amber-2); text-decoration:none;
}
.back-link:hover{ text-decoration:underline; }

.foot-legal-links{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.foot-legal-links a{ color:var(--muted); text-decoration:none; }
.foot-legal-links a:hover{ color:var(--amber-2); }

/* ---------------------------------------------------------------- footer */
.site-footer{ background:var(--ink); border-top:1px solid var(--line-soft); padding-top:3.5rem; }
.foot{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.75rem;
}
.foot-brand{ display:flex; gap:.85rem; align-items:flex-start; }
.foot-brand .brand-mark{ width:34px; height:34px; }
.foot-name{
  font-family:var(--font-display); font-size:1.32rem; font-weight:700;
  text-transform:uppercase; margin:0 0 .3rem; line-height:1.05;
}
.foot-tag{ font-size:.85rem; color:var(--muted); margin:0; }

.foot-nav{ display:flex; flex-direction:column; gap:.6rem; }
.foot-nav a{ text-decoration:none; font-size:.9rem; color:var(--sand-dim); transition:color .2s; }
.foot-nav a:hover{ color:var(--amber-2); }

.foot-contact{ display:flex; flex-direction:column; gap:.5rem; font-size:.9rem; color:var(--muted); }
.foot-contact a{ color:var(--sand-dim); text-decoration:none; }
.foot-contact a:hover{ color:var(--amber-2); }
.foot-phone{
  font-family:var(--font-display); font-size:1.65rem; font-weight:700;
  color:var(--amber-2) !important; letter-spacing:.01em; font-variant-numeric:tabular-nums;
}
.foot-contact p{ margin:0; line-height:1.5; }

.verse-bar{ border-top:1px solid var(--line-soft); padding:1.5rem 0 .25rem; }
.verse{
  margin:0; text-align:center; font-size:.94rem; line-height:1.5;
  color:var(--sand-dim); font-style:italic;
}
.verse cite{
  display:block; margin-top:.4rem; font-style:normal;
  font-family:var(--font-display); font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber);
}

.foot-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  border-top:1px solid var(--line-soft); padding:1.5rem 0;
  font-size:.8rem; color:var(--muted);
}
.foot-legal p{ margin:0; }

/* -------------------------------------------------------- mobile callbar */
.callbar{ display:none; }

/* -------------------------------------------------------------- lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,15,13,.97);
  display:flex; align-items:center; justify-content:center; padding:3.5rem 1.25rem;
  opacity:0; transition:opacity .25s;
}
.lightbox.show{ opacity:1; }
.lightbox[hidden]{ display:none; }

.lb-figure{ margin:0; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; gap:.85rem; }
.lb-figure img{
  max-width:100%; max-height:calc(100vh - 9rem); width:auto; margin-inline:auto;
  object-fit:contain; border-radius:var(--r-sm); box-shadow:var(--shadow);
}
.lb-figure figcaption{ text-align:center; font-size:.9rem; color:var(--sand-dim); }

.lightbox button{
  position:absolute; background:rgba(255,255,255,.07); border:1px solid var(--line);
  color:var(--sand); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .2s, transform .2s;
}
.lightbox button:hover{ background:rgba(240,138,44,.28); transform:scale(1.08); }
.lb-close{ top:1.1rem; right:1.1rem; width:44px; height:44px; font-size:1.9rem; line-height:1; }
.lb-prev, .lb-next{ top:50%; margin-top:-26px; width:52px; height:52px; font-size:2.1rem; line-height:1; }
.lb-prev{ left:1.1rem; }
.lb-next{ right:1.1rem; }

/* ---------------------------------------------------------------- reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ======================================================= responsive ==== */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:3rem; }
  .hero-copy{ max-width:640px; }
  .hero-media{ max-width:460px; margin-inline:auto; }
  .hero-photo-2{ left:auto; right:-1.5rem; bottom:-1.75rem; width:42%; }

  .gallery{ grid-template-columns:repeat(3, 1fr); }
  .reviews{ grid-template-columns:repeat(2, 1fr); }
  .services{ grid-template-columns:repeat(2, 1fr); }
  .storm-inner, .about, .quote{ grid-template-columns:1fr; }
  .about-media{ max-width:400px; }
  .foot{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

/* The header collapses earlier than the page layout does (1120px vs 1000px).
   The wide one-line wordmark plus the nav plus the phone button stop fitting
   before the rest of the grid needs to reflow. */
@media (max-width:1120px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .btn-call{ display:none; }
  html{ scroll-padding-top:80px; }

  /* mobile call bar */
  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:99;
    display:grid; grid-template-columns:1.3fr 1fr; gap:.6rem;
    padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom));
    background:rgba(var(--ink-rgb),.95);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line-soft);
  }
  .callbar a{
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    padding:.85rem 1rem; border-radius:999px; text-decoration:none;
    font-weight:700; font-size:.98rem;
  }
  .callbar-btn{ background:linear-gradient(180deg,var(--amber-2),var(--amber)); color:#201405; }
  .callbar-alt{ border:1px solid var(--line); color:var(--sand); }

  body{ padding-bottom:5rem; }
  .lb-prev{ left:.4rem; } .lb-next{ right:.4rem; }
  .lb-prev, .lb-next{ width:44px; height:44px; }
}

@media (max-width:560px){
  .reviews{ grid-template-columns:1fr; }
  .services{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2, 1fr); gap:.7rem; }
  .steps::before{ display:none; }   /* nothing to link when stacked */
  .field-row{ grid-template-columns:1fr; }
  .contact-list li{ grid-template-columns:1fr; gap:.2rem; }
  .foot{ grid-template-columns:1fr; gap:2rem; }
  .foot-legal{ flex-direction:column; }
  .hero-actions{ width:100%; margin-top:1.25rem; }
  .hero-cta .btn{ width:100%; }
  /* The overlapping second photo is clutter at phone width. */
  .hero-photo-2{ display:none; }

  /* Mobile hero ran 1.6 screens tall, so a visitor had to scroll past a whole
     extra screen of photo before reaching anything else. Tighten the type and
     square off the photo to bring it near a single screen. */
  .hero{ padding:.75rem 0 1.75rem; }
  .hero-grid{ gap:1.4rem; }
  .hero h1{ font-size:2.3rem; margin-bottom:.9rem; }
  .eyebrow{ margin-bottom:.7rem; }
  .lede{ font-size:.95rem; }
  .hero-points{ margin-top:.8rem; }
  .hero-photo img{ aspect-ratio:1; }
}

/* Large monitors: let the content column widen instead of stranding the page
   in the middle of the screen. */
@media (min-width:1500px){ :root{ --wrap:1400px; } }
@media (min-width:1800px){ :root{ --wrap:1560px; } }
@media (min-width:2200px){ :root{ --wrap:1720px; } }

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

@media print{
  .site-header,.callbar,.lightbox,.quote-form,.burger{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; }
}