/* ============================================================
   SKLAWN — Blue Hour
   Light is the material and the structure. There is a ground,
   and there are sources. What matters is lit; what rests is in
   shadow. Falloff is real. See DESIGN.md.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('font/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('font/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  /* Sky — the dusk ground */
  --sky-0:#0A0F17; --sky-1:#101823; --sky-2:#18222F; --sky-3:#22303F;
  /* Lamp — 2700K tungsten ramp */
  --lamp-core:#FFE9C4; --lamp:#F3C878; --lamp-deep:#C98A3C;
  /* Shell — bleached limestone, the day ground */
  --shell-0:#F5F1E8; --shell-1:#EBE5D8; --shell-2:#DBD3C2;
  /* Frond — structural green */
  --frond:#1F4034; --frond-lit:#3E7A5E;
  /* Flame — the one color that cannot be mistaken for a light */
  --flame:#C43C1B; --flame-hot:#9E2F12;
  /* Text */
  --text-lit:#F2EEE6; --text-dim:#A8B4C4;
  --ink:#16211B; --ink-dim:#5A6B5F;

  /* Photometric falloff — a real inverse-square ramp, not a blur.
     Used everywhere a surface catches light from a source. */
  --wash-top:radial-gradient(125% 95% at 50% -22%,
      rgba(255,233,196,.60) 0%,
      rgba(255,233,196,.26) 26%,
      rgba(243,200,120,.10) 48%,
      rgba(201,138,60,.03) 66%,
      transparent 78%);

  --gut:clamp(1.25rem,4vw,3rem);
  --pad:clamp(4.5rem,9vw,8rem);
  --max:1280px;
  --ease:cubic-bezier(.16,1,.3,1);

  color-scheme:dark;
  scrollbar-color:var(--lamp-deep) var(--sky-0);
}

/* Luminance states. Same tokens, inverted. */
.dusk{ --bg:var(--sky-1); --bg-deep:var(--sky-0); --fg:var(--text-lit); --fg-dim:var(--text-dim);
       --surface:var(--sky-2); --edge:var(--sky-3); }
.day { --bg:var(--shell-0); --bg-deep:var(--shell-1); --fg:var(--ink); --fg-dim:var(--ink-dim);
       --surface:var(--shell-1); --edge:var(--shell-2); }

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sky-0); color:var(--text-lit);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}

::selection{background:var(--lamp);color:var(--sky-0)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px;border-radius:2px}

/* ---------- Type ---------- */
.display{
  font-variation-settings:'wdth' 118,'wght' 780;
  font-size:clamp(2.5rem,6.2vw,5.25rem);
  line-height:.98; letter-spacing:-.032em; text-wrap:balance;
}
.h2{
  font-variation-settings:'wdth' 112,'wght' 720;
  font-size:clamp(1.9rem,3.8vw,3.1rem);
  line-height:1.04; letter-spacing:-.026em; text-wrap:balance;
}
.h3{
  font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.16; letter-spacing:-.018em;
}
.label{
  font-variation-settings:'wdth' 100,'wght' 620;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.13em;
  line-height:1.3;
}
.lede{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.55;max-width:44ch;color:var(--fg-dim,var(--text-dim))}
.prose{max-width:68ch}
.prose p+p{margin-top:1.1em}
.prose a{color:var(--lamp-deep);text-underline-offset:.22em;text-decoration-thickness:1px}
.day .prose a{color:var(--frond)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{background:var(--bg);color:var(--fg);padding-block:var(--pad)}
.section--tight{padding-block:calc(var(--pad) * .62)}
.stack>*+*{margin-top:1.25rem}
.head{max-width:62ch;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.head .h2+p{margin-top:1rem;color:var(--fg-dim)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.5rem;border:0;border-radius:3px;
  font-variation-settings:'wdth' 104,'wght' 700;
  font-size:1rem;letter-spacing:.005em;text-decoration:none;cursor:pointer;
  transition:background-color .25s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease);
}
/* Call = the lamp. The primary action IS the light. 11.8:1 */
.btn--call{background:var(--lamp);color:var(--sky-0);box-shadow:0 10px 30px -14px rgba(243,200,120,.75)}
.btn--call:hover{background:var(--lamp-core);box-shadow:0 14px 38px -14px rgba(255,233,196,.85)}
/* The two owner buttons, sized as the pair they are. Matching each other
   matters more than matching their own text: a name is shorter than a name,
   and eleven pixels apart looks like a bug. */
.calls{display:inline-flex;flex-wrap:wrap;gap:.75rem;vertical-align:top}
.calls .btn{flex:0 1 auto;min-width:10rem}
/* On a phone, filling the row beats a floor: 10rem each plus the gap is
   wider than a 360px screen, and equal buttons that wrap to two lines are
   not an improvement on unequal ones that fit. */
@media(max-width:539px){
  .calls{display:flex}
  /* Sharing the row leaves each button narrower than the desktop padding
     allows for, and "Call Korey" broke onto a second line inside its own
     button. The label is the thing that must survive; the padding is not. */
  .calls .btn{flex:1 1 0;min-width:0;padding-inline:.9rem;white-space:nowrap}
}
/* Submit = flame. A different act, a different colour. 4.9:1 */
.btn--send{background:var(--flame);color:#fff;width:100%;box-shadow:0 10px 26px -14px rgba(196,60,27,.9)}
.btn--send:hover{background:var(--flame-hot)}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--edge)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--lamp);color:var(--lamp)}
.btn:active{transform:translateY(1px)}
/* On photography the ghost needs its own edge — --edge would vanish. */
.hero .btn--ghost{color:#F2EEE6;background:rgba(10,15,23,.42);box-shadow:inset 0 0 0 1px rgba(243,200,120,.5)}
.hero .btn--ghost:hover{background:rgba(10,15,23,.62);box-shadow:inset 0 0 0 1px var(--lamp);color:var(--lamp)}

/* ---------- Header ---------- */
/* The header is sticky, so an anchor lands underneath it. #contact put the
   form's heading 75px up behind the bar and the section arrived already cut
   off; #maintenance and the four #estimate links had the same fault.
   Applied to every id rather than to those five, because the next anchor
   somebody adds would otherwise have to remember this on its own.
   75px is .hdr__in's 74px min-height plus its 1px border. */
[id]{scroll-margin-top:calc(75px + 1rem)}

.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--sky-0) 88%,transparent);
  border-bottom:1px solid var(--sky-3);
}
@supports (backdrop-filter:blur(1px)){ .hdr{backdrop-filter:saturate(1.3) blur(14px)} }
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:74px}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text-lit);flex:0 0 auto}
.mark__w{font-variation-settings:'wdth' 125,'wght' 800;font-size:1.32rem;letter-spacing:.045em;line-height:1}
.mark__g{flex:0 0 auto}
/* The gap gives way before anything else does. Between 1100px and roughly
   1300px the owner phone numbers share this row, and a fixed 1.75rem gap left
   the links to absorb the squeeze themselves. */
.nav{display:none;gap:clamp(1rem,1.9vw,1.75rem);margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:.94rem;font-variation-settings:'wdth' 100,'wght' 560;
  color:var(--text-dim);padding-block:.5rem;transition:color .2s;
  /* A two-word label is one label. Without this "Our Work" and "Service
     Areas" break across two lines as soon as the row is tight, which reads
     as four menu items rather than two. .nav__cta already says this. */
  white-space:nowrap
}
.nav a:hover,.nav a[aria-current]{color:var(--lamp)}
/* Wide-screen route to the builder; the hamburger carries it below 900px. */
.nav__cta{display:none;align-items:center;min-height:38px;padding:.35rem .95rem;border-radius:100px;
  text-decoration:none;font-size:.88rem;white-space:nowrap;
  font-variation-settings:'wdth' 100,'wght' 600;
  color:var(--text-dim);background:transparent;
  box-shadow:inset 0 0 0 1px var(--sky-3);
  transition:color .2s,box-shadow .25s var(--ease),background-color .25s}
.nav__cta:hover{color:var(--lamp);box-shadow:inset 0 0 0 1px var(--lamp-deep);
  background:rgba(243,200,120,.07)}
@media(min-width:900px){ .nav__cta{display:inline-flex} }
@media(min-width:900px){ .nav{display:flex} }


/* Mobile nav — native disclosure, no JS. */
.mnav{margin-left:auto;position:relative}
@media(min-width:900px){ .mnav{display:none} }
.mnav summary{list-style:none;display:grid;place-items:center;width:48px;height:48px;
  border-radius:3px;cursor:pointer;color:var(--text-lit);box-shadow:inset 0 0 0 1px var(--sky-3)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:var(--sky-2);color:var(--lamp)}
.mnav__p{position:absolute;right:0;top:calc(100% + .55rem);min-width:230px;z-index:80;
  background:var(--sky-2);border-radius:4px;padding:.45rem;
  box-shadow:0 26px 54px -20px rgba(0,0,0,.92),inset 0 0 0 1px var(--sky-3)}
.mnav__p a{display:block;padding:.85rem 1rem;border-radius:3px;text-decoration:none;
  color:var(--text-lit);font-variation-settings:'wdth' 100,'wght' 600;font-size:.98rem}
.mnav__p a:hover,.mnav__p a:focus-visible{background:var(--sky-1);color:var(--lamp)}
.mnav__p hr{border:0;border-top:1px solid var(--sky-3);margin:.45rem .5rem}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--sky-0)}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:56% 58%}
/* Night sky above, deep shadow below — the photo sits between them. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,15,23,.82) 0%,rgba(10,15,23,.26) 30%,rgba(10,15,23,.18) 58%,rgba(10,15,23,.72) 100%),
    linear-gradient(100deg,rgba(10,15,23,.88) 0%,rgba(10,15,23,.62) 26%,rgba(10,15,23,.16) 58%,transparent 74%);
}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.25rem);padding-block:clamp(2.25rem,3.6vw,3.25rem)}
.hero__in>*{min-width:0}
@media(min-width:1000px){
  .hero__in{grid-template-columns:minmax(0,1fr) 430px;align-items:center;padding-block:clamp(2.5rem,3.8vw,3.75rem)}
}
.hero__copy{max-width:min(100%,42rem);min-width:0}
.hero .display{color:var(--text-lit);text-shadow:0 2px 30px rgba(10,15,23,.65);font-size:clamp(2.15rem,4.4vw,3.85rem)}
.hero__sub{margin-top:1.1rem;font-size:clamp(1.05rem,1.45vw,1.24rem);line-height:1.5;color:#DCE3EC;max-width:40ch;text-shadow:0 1px 18px rgba(10,15,23,.7)}
.hero__acts{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.75rem}

/* Service links, in the first viewport as required. */
.chips{margin-top:1.7rem;display:flex;flex-wrap:wrap;gap:.5rem}
@media(max-width:719px){
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-snap-type:x proximity;min-width:0}
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:0 0 auto;scroll-snap-align:start}
}
.chips a{
  display:inline-flex;align-items:center;min-height:40px;padding:.4rem .85rem;
  border-radius:100px;text-decoration:none;font-size:.85rem;
  font-variation-settings:'wdth' 100,'wght' 580;
  color:#E4EAF2;background:rgba(16,24,35,.62);
  box-shadow:inset 0 0 0 1px rgba(243,200,120,.26);
  transition:color .2s,box-shadow .25s var(--ease),background-color .25s
}
.chips a:hover{color:var(--sky-0);background:var(--lamp);box-shadow:inset 0 0 0 1px var(--lamp)}

/* ---------- The lit panel ----------
   The form is the object catching the light in a dark scene.
   Shell ground keeps it legible outdoors, in sun, on a phone. */
.panel{
  background:var(--shell-0);color:var(--ink);border-radius:5px;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.85),0 3px 12px -4px rgba(0,0,0,.5);
  position:relative;
}
.panel::before{ /* the fixture edge */
  content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:5px 5px 0 0;
  background:linear-gradient(90deg,var(--lamp-deep),var(--lamp-core) 46%,var(--lamp-deep))
}
.panel__t{font-variation-settings:'wdth' 112,'wght' 740;font-size:1.42rem;line-height:1.1;letter-spacing:-.022em}
.panel__s{margin-top:.4rem;font-size:.92rem;color:var(--ink-dim)}
.panel--flat{box-shadow:inset 0 0 0 1px var(--edge);background:var(--surface);color:var(--fg)}

/* ---------- Form ---------- */
.form{margin-top:1.25rem;display:grid;gap:.85rem}
.f2{display:grid;gap:.85rem}
@media(min-width:520px){.f2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.34rem;min-width:0}
.field>span{
  font-variation-settings:'wdth' 100,'wght' 640;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-dim)
}
.field .req{color:var(--flame)}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:.7rem .85rem;
  background:#fff;color:var(--ink);
  border:1px solid var(--shell-2);border-radius:3px;
  caret-color:var(--flame);
  transition:border-color .2s,box-shadow .2s
}
.field textarea{min-height:84px;resize:vertical;line-height:1.5}
.field input::placeholder{color:#7E8B80}
.field :is(input,select,textarea):focus{
  outline:none;border-color:var(--flame);box-shadow:0 0 0 3px rgba(196,60,27,.16)
}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235A6B5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.hp{position:absolute;left:-9999px}
.form__fine{font-size:.78rem;color:var(--ink-dim);line-height:1.45}
.form__fine a{color:var(--frond)}

/* ---------- Services ---------- */
.svcs{display:grid;gap:clamp(1rem,1.6vw,1.4rem);grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.svc{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:inset 0 0 0 1px var(--edge);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)
}
.svc:hover,.svc:focus-within{box-shadow:inset 0 0 0 1px var(--lamp-deep),0 20px 44px -26px rgba(0,0,0,.9);transform:translateY(-2px)}
.svc__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sky-0)}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);filter:brightness(.82) saturate(.96)}
/* State is light: a wash falls from above onto the surface. */
.svc__media::after{content:"";position:absolute;inset:0;background:var(--wash-top);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.svc:hover .svc__media img,.svc:focus-within .svc__media img{transform:scale(1.035);filter:brightness(1) saturate(1.02)}
.svc:hover .svc__media::after,.svc:focus-within .svc__media::after{opacity:1}
.svc__body{padding:1.15rem 1.2rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.svc__ico{color:var(--lamp);opacity:.85}
.day .svc__ico{color:var(--frond)}
.svc__n{font-variation-settings:'wdth' 108,'wght' 720;font-size:1.09rem;line-height:1.18;letter-spacing:-.015em}
.svc__d{font-size:.93rem;color:var(--fg-dim);line-height:1.5}
.svc__go{margin-top:auto;padding-top:.5rem;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 640;color:var(--lamp);display:flex;align-items:center;gap:.4rem}
.day .svc__go{color:var(--frond)}
.svc:hover .svc__go svg{transform:translateX(3px)}
.svc__go svg{transition:transform .3s var(--ease)}

/* ---------- The crossing ----------
   One authored moment. Dusk becomes day between the built work
   and the living work. --lum runs 0 (dusk) to 1 (day). */
.cross{--lum:0;position:relative;min-height:clamp(300px,32vw,440px);
  background:linear-gradient(180deg,var(--sky-1) 0%,#1C2536 8%,#414455 17%,#8C7C67 27%,#C4BAA6 37%,var(--shell-0) 50%,var(--shell-0) 100%);
  display:grid;align-items:end;justify-items:center;text-align:center;overflow:hidden;
  padding:clamp(3rem,6vw,5rem) var(--gut) clamp(2.25rem,3.5vw,3rem)}
.cross::before{ /* the source rising through the band */
  content:"";position:absolute;left:50%;bottom:-42%;width:min(140vw,1500px);aspect-ratio:2/1;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(255,233,196,.55),rgba(243,200,120,.18) 45%,transparent 72%);
  opacity:.9}
.cross__in{position:relative;max-width:34ch}
.cross .h2{color:#1C1408}
.cross p{margin-top:.9rem;color:#3A2E1C;font-size:1.05rem}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cross::before{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 70%}
    @keyframes rise{from{transform:translateY(28%) scale(.86);opacity:.35}to{transform:translateY(-6%) scale(1);opacity:.95}}
  }
}

/* ---------- Year row ---------- */
.year{overflow-x:auto;padding-bottom:.5rem}
.year table{border-collapse:collapse;width:100%;min-width:700px}
.year th,.year td{padding:0;text-align:left}
.year thead th{
  font-variation-settings:'wdth' 100,'wght' 640;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-dim);padding:0 0 .6rem;text-align:center;width:calc(64% / 12)
}
.year thead th:first-child{text-align:left;width:36%;padding-left:0}
.year tbody th{
  font-variation-settings:'wdth' 100,'wght' 600;font-size:.9rem;color:var(--fg);
  padding:.5rem 1rem .5rem 0;line-height:1.3
}
.year .cell{padding:.28rem .16rem}
.year .dot{height:26px;border-radius:2px;background:var(--shell-2)}
.year .dot.on{background:var(--frond-lit)}
.year .dot.season{background:repeating-linear-gradient(135deg,var(--frond-lit),var(--frond-lit) 3px,transparent 3px,transparent 6px);box-shadow:inset 0 0 0 1px var(--frond-lit)}
.year th.now{color:var(--flame)}
.year td.now .dot{box-shadow:0 0 0 2px var(--flame)}
.year__key{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.8rem;color:var(--fg-dim)}
.year__key span{display:inline-flex;align-items:center;gap:.45rem}
.year__key i{width:15px;height:15px;border-radius:2px;display:inline-block}

/* ---------- Gallery (whole-unit; slots snap to modules) ---------- */
/* Inputs must stay siblings of .grid for the CSS filter, so .gal is the row. */
.gal{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.gal>.grid{flex:1 0 100%;margin-top:1.25rem}
.gal>input{position:absolute;opacity:0;width:1px;height:1px}
.gal>label{
  display:inline-flex;align-items:center;min-height:42px;padding:.45rem 1rem;border-radius:100px;cursor:pointer;
  font-size:.85rem;font-variation-settings:'wdth' 100,'wght' 600;
  color:var(--fg-dim);box-shadow:inset 0 0 0 1px var(--edge);
  transition:color .2s,background-color .25s,box-shadow .25s
}
.gal>label:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--lamp-deep)}
.gal>input:checked+label{background:var(--lamp);color:var(--sky-0);box-shadow:inset 0 0 0 1px var(--lamp)}
.gal>input:focus-visible+label{outline:2px solid var(--lamp);outline-offset:2px}
.grid{display:grid;gap:clamp(.6rem,1.1vw,1rem);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.plate{position:relative;overflow:hidden;border-radius:3px;background:var(--sky-2);aspect-ratio:4/3}
.plate img{width:100%;height:100%;object-fit:cover;filter:brightness(.88);transition:transform .8s var(--ease),filter .5s var(--ease)}
.plate:hover img,.plate:focus-within img{transform:scale(1.04);filter:brightness(1)}
.plate figcaption{
  position:absolute;inset:auto 0 0;padding:3rem .9rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(10,15,23,.55) 42%,rgba(10,15,23,.93));
  font-size:.85rem;font-variation-settings:'wdth' 100,'wght' 580;color:#EAF0F7;
  display:flex;flex-direction:column;gap:.2rem
}
.plate figcaption b{font-variation-settings:'wdth' 100,'wght' 640}
.plate figcaption em{font-style:normal;color:var(--lamp);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;order:-1;font-variation-settings:'wght' 640}
.plate--wide{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:640px){.plate--wide{grid-column:span 1}}
/* An empty module is a designed state, never a stretched fragment. */
.plate--empty{background:var(--sky-1);box-shadow:inset 0 0 0 1px var(--sky-3)}
.plate--empty>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem;gap:.55rem}
.plate--empty p{font-size:.84rem;color:var(--text-dim);max-width:24ch}
.plate--empty .label{color:var(--lamp-deep)}
.plate--empty svg{color:var(--sky-3)}

/* Filter — pure CSS sibling selectors. Works with JS off. */
.gal input:checked~.grid>.plate{display:none}
#f-all:checked~.grid>.plate,
#f-lighting:checked~.grid>.c-lighting,
#f-design:checked~.grid>.c-design,
#f-hardscape:checked~.grid>.c-hardscape,
#f-beds:checked~.grid>.c-beds,
#f-walls:checked~.grid>.c-walls,
#f-sod:checked~.grid>.c-sod,
#f-tech:checked~.grid>.c-tech,
#f-palms:checked~.grid>.c-palms,
#f-maintenance:checked~.grid>.c-maintenance{display:block}

/* ---------- Areas ---------- */
.areas{display:grid;gap:clamp(.8rem,1.4vw,1.2rem);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.area{
  display:block;text-decoration:none;color:inherit;padding:1.4rem 1.35rem;border-radius:4px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--edge);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)
}
.area:hover{box-shadow:inset 0 0 0 1px var(--frond-lit),0 16px 34px -24px rgba(0,0,0,.5);transform:translateY(-2px)}
.dusk .area:hover{box-shadow:inset 0 0 0 1px var(--lamp-deep),0 16px 34px -24px rgba(0,0,0,.9)}
.area__n{font-variation-settings:'wdth' 110,'wght' 720;font-size:1.22rem;letter-spacing:-.02em}
.area__d{margin-top:.4rem;font-size:.9rem;color:var(--fg-dim)}
.area__s{margin-top:.9rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 640;color:var(--frond)}
.dusk .area__s{color:var(--lamp)}

/* ---------- Included list ---------- */
.incl{display:grid;gap:.1rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
@media(min-width:1080px){.incl{grid-template-columns:repeat(3,1fr)}}
.incl li{display:flex;gap:.85rem;padding:1rem 0;border-top:1px solid var(--edge);align-items:flex-start}
.incl svg{flex:0 0 auto;margin-top:.15rem;color:var(--frond-lit)}
.dusk .incl svg{color:var(--lamp)}
.incl b{display:block;font-variation-settings:'wdth' 104,'wght' 680;font-size:1rem}
.incl span{display:block;font-size:.9rem;color:var(--fg-dim);margin-top:.15rem}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.shot{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:var(--sky-2)}
.shot img{width:100%;height:100%;object-fit:cover}

/* ---------- Steps ---------- */
.steps{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.step{padding-top:1.1rem;border-top:2px solid var(--edge)}
.step h3{font-variation-settings:'wdth' 108,'wght' 700;font-size:1.06rem;margin-bottom:.4rem}
.step p{font-size:.93rem;color:var(--fg-dim)}
.step--on{border-top-color:var(--lamp)}
.day .step--on{border-top-color:var(--frond-lit)}

/* ---------- Footer ---------- */
.foot{background:var(--sky-0);color:var(--text-lit);padding-block:clamp(3.5rem,6vw,5rem) 2rem;border-top:1px solid var(--sky-3)}
.foot__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot h3{font-variation-settings:'wdth' 100,'wght' 640;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--lamp);margin-bottom:1rem}
.foot li+li{margin-top:.55rem}
.foot a{color:var(--text-dim);text-decoration:none;font-size:.93rem;transition:color .2s}
.foot a:hover{color:var(--lamp)}
.foot__bar{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--sky-3);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.82rem;color:#7E8B9C}

/* ---------- Mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.6rem;
  /* Even padding, no safe-area inset. The page does not set
     viewport-fit=cover, so the viewport already stops above the system bars
     and there is nothing to pad around — on Chrome and Safari the inset
     resolves to 0 and this line never did anything. Firefox on Android
     reports the gesture bar's inset regardless, so the one browser where it
     had an effect was the one where it was wrong: it lifted the buttons off
     the bottom of the screen and left a gap under them. */
  padding:.6rem var(--gut);
  background:color-mix(in srgb,var(--sky-0) 94%,transparent);
  border-top:1px solid var(--sky-3)
}
@supports (backdrop-filter:blur(1px)){.callbar{backdrop-filter:blur(12px)}}
.callbar .btn{flex:1;min-height:50px;font-size:.92rem;padding-inline:.5rem;white-space:nowrap}
@media(min-width:900px){.callbar{display:none}}
@media(max-width:899px){body{padding-bottom:80px}}

/* ---------- Breadcrumb & misc ---------- */
.crumb{font-size:.8rem;color:var(--text-dim);padding-block:1.1rem}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--lamp)}
.crumb span{opacity:.45;padding-inline:.45rem}
.note{font-size:.84rem;color:var(--fg-dim);padding:.9rem 1.1rem;border-radius:3px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--edge)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.6rem;z-index:100;background:var(--lamp);color:var(--sky-0);padding:.7rem 1.1rem;border-radius:3px}

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

/* ---------- Owner-operated identity ----------
   Two owners, two real numbers. The lockup carries the full company name;
   the strip under the header carries the promise on every page. */
.mark__lock{display:flex;flex-direction:column;line-height:1;gap:.16rem}
.mark__sub{
  font-variation-settings:'wdth' 100,'wght' 600;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--lamp-deep)
}
.ownerbar{
  background:var(--sky-2);border-bottom:1px solid var(--sky-3);
  color:var(--lamp);text-align:center;
  font-variation-settings:'wdth' 100,'wght' 640;
  font-size:.79rem;letter-spacing:.04em;
  padding:.55rem 0
}
/* The owners' numbers used to sit in the top row beside the menu, which
   overflowed between about 1100 and 1250px — the width at which both wanted
   the same space. On their own centred line they stop competing with it, and
   they gain the 900-1100px band where the top row had hidden them and the
   mobile call bar had not yet appeared, leaving no number anywhere. */
.ownerbar__in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.4rem 1.4rem}
.ownerbar__calls{display:inline-flex;align-items:center;gap:1.1rem}
.ownerbar__calls .ownerline+.ownerline{margin-left:0}
/* Below 900px the fixed call bar at the foot of the screen carries these, and
   two sets of the same two numbers in one viewport is one set too many. */
@media(max-width:899px){ .ownerbar__calls{display:none} }
.ownerline{
  display:inline-flex;align-items:baseline;gap:.45rem;text-decoration:none;
  padding:.3rem .1rem;white-space:nowrap
}
.ownerline+.ownerline{margin-left:1.1rem}
.ownerline b{font-variation-settings:'wdth' 100,'wght' 700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.ownerline span{font-variation-settings:'wdth' 104,'wght' 700;font-size:1.02rem}
.ownerline:hover span{text-decoration:underline;text-underline-offset:.22em}
.foot__owners{margin-top:1.25rem;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.foot__owners .ownerline+.ownerline{margin-left:0}
@media(max-width:899px){ .ownerbar{font-size:.74rem;letter-spacing:.02em;padding:.5rem var(--gut)} }

/* Two owners in the sticky bar: both get an equal, thumb-sized target. */
.callbar .btn{min-width:0}

/* The owner block on the homepage. */
.owners{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.owner{padding:1.5rem 1.4rem;border-radius:4px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--edge)}
.owner__n{font-variation-settings:'wdth' 112,'wght' 740;font-size:1.5rem;letter-spacing:-.02em}
.owner__r{margin-top:.2rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;
  font-variation-settings:'wght' 640;color:var(--fg-dim)}
.owner__d{margin-top:.8rem;font-size:.95rem;color:var(--fg-dim);line-height:1.5}
.owner .btn{margin-top:1.1rem}

/* ---------- Estimate builder ----------
   One question per screen. Every step ships in the HTML; the script hides all
   but the current one, so with JavaScript off this degrades to a single long
   form that still submits to Netlify. */
.est{max-width:44rem;margin-inline:auto}
.est__prog{margin-bottom:1.75rem}
.est__bar{height:3px;border-radius:2px;background:var(--edge);overflow:hidden}
.est__fill{display:block;height:100%;width:100%;background:var(--lamp);
  transition:width .45s var(--ease)}
.est__count{display:block;margin-top:.6rem;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;font-variation-settings:'wdth' 100,'wght' 640;color:var(--fg-dim)}
.est__step{border:0;padding:0;margin:0;min-width:0}
.est__q{
  font-variation-settings:'wdth' 112,'wght' 720;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.08;letter-spacing:-.024em;
  padding:0;margin-bottom:.5rem;text-wrap:balance;color:var(--fg)
}
.est__hint{font-size:.95rem;color:var(--fg-dim);margin-bottom:1.5rem;max-width:52ch}

/* Radio and checkbox options as tappable cards. */
.est__opts{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.est__opts input{position:absolute;opacity:0;width:1px;height:1px}
.est__opts label{
  display:flex;align-items:center;gap:.8rem;min-height:60px;padding:.9rem 1.1rem;
  border-radius:4px;cursor:pointer;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--edge);
  font-variation-settings:'wdth' 100,'wght' 620;font-size:1rem;color:var(--fg);
  transition:box-shadow .2s var(--ease),background-color .2s var(--ease)
}
.est__opts label::before{
  content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--edge);transition:box-shadow .2s
}
.est__opts .cb label::before{border-radius:3px}
.est__opts label:hover{box-shadow:inset 0 0 0 1px var(--lamp-deep)}
.est__opts input:checked+label{
  background:color-mix(in srgb,var(--lamp) 12%,var(--surface));
  box-shadow:inset 0 0 0 2px var(--lamp)
}
.est__opts input:checked+label::before{box-shadow:inset 0 0 0 6px var(--lamp)}
.est__opts input:focus-visible+label{outline:2px solid var(--lamp);outline-offset:2px}

.est__nav{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem}
.est__nav .btn{min-width:8.5rem}
.est__nav [data-back]{margin-right:auto}
.est__fine{margin-top:1.25rem;font-size:.84rem;color:var(--fg-dim);line-height:1.5}
.est__fine a{color:var(--lamp)}
.day .est__fine a{color:var(--frond)}

/* Without the script every step is visible and stacked. */
.est:not(.js) .est__step+.est__step{margin-top:2.75rem}
.est:not(.js) .est__prog,
.est:not(.js) [data-back],
.est:not(.js) [data-next]{display:none}
.est.js .est__step[hidden]{display:none}

/* ---------- Testimonials ---------- */
.quotes{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));margin-top:2rem}
.quote{margin:0;padding:1.5rem 1.6rem;background:var(--shell-0);border-radius:5px;
  border-left:3px solid var(--frond)}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.quote figcaption{margin-top:.9rem;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-dim)}

/* Disclosure on an image that is not a straight photograph of the job. */
.plate__made{position:absolute;right:.55rem;top:.55rem;padding:.22rem .55rem;
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border-radius:2px;
  color:var(--text-lit);background:color-mix(in srgb,var(--sky-0) 78%,transparent);
  backdrop-filter:blur(4px);z-index:2}

/* ---------- Reviews ---------- */
.stars{display:inline-flex;gap:.1rem;line-height:0}

/* The headline number, the stars and the way to go and check. */
.score{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.5rem;margin-top:2rem;
  padding:1.3rem 1.5rem;background:var(--shell-0);border-radius:6px}
.score__n{font-size:3rem;line-height:1;font-weight:600;color:var(--frond)}
.score__c{margin:.4rem 0 0;font-size:.9rem;color:var(--ink-dim)}
.score .btn{margin-left:auto}
/* The panel is a light shell inside a dark section, so the ghost button's
   --fg is the page's light text and lands invisible on cream. Same fix the
   hero needs for the same reason. */
.score .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,28,38,.28)}
.score .btn--ghost:hover{color:var(--frond);box-shadow:inset 0 0 0 1px var(--frond)}
@media (max-width:40rem){.score .btn{margin-left:0;width:100%;text-align:center}}

/* Masonry-ish: reviews are wildly different lengths and a fixed grid leaves
   a short one padded out with empty card. Columns let each be its own height. */
.revs{columns:3 20rem;column-gap:1.25rem;margin-top:2rem}
.rev{break-inside:avoid;margin:0 0 1.25rem;padding:1.4rem 1.5rem;background:var(--shell-0);
  border-radius:5px;border-left:3px solid var(--frond)}
.rev blockquote{margin:.7rem 0 0;font-size:1rem;line-height:1.6;color:var(--ink)}
.rev figcaption{margin-top:1rem;font-size:.82rem}
.rev__who{display:block;font-weight:600;color:var(--ink)}
.rev__when{display:block;margin-top:.15rem;letter-spacing:.05em;text-transform:uppercase;
  font-size:.72rem;color:var(--ink-dim)}
.revs__note{margin-top:1.5rem;font-size:.88rem;color:var(--ink-dim);max-width:60ch}

/* ---------- FAQ ---------- */
.faq{margin-top:2rem;max-width:min(100%,46rem)}
.faq__q{border-bottom:1px solid var(--shell-2)}
.faq__q summary{padding:1.1rem 2rem 1.1rem 0;cursor:pointer;font-weight:600;
  font-size:1.02rem;position:relative;list-style:none;color:var(--ink)}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary::after{content:"+";position:absolute;right:.4rem;top:50%;
  transform:translateY(-50%);font-weight:400;font-size:1.5rem;color:var(--frond);
  transition:transform .2s var(--ease)}
.faq__q[open] summary::after{content:"\2212"}
.faq__q summary:hover{color:var(--frond)}
.faq__a{padding:0 2rem 1.3rem 0}
.faq__a p{margin:0;color:var(--ink-dim);line-height:1.65;font-size:.96rem}
.owner__m{margin:.7rem 0 0;font-size:.88rem}
.owner__m a{color:var(--lamp);text-underline-offset:.2em}