/* ============================================================
   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)}
/* 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 ---------- */
.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}
.nav{display:none;gap: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
}
.nav a:hover,.nav a[aria-current]{color:var(--lamp)}
.hdr__cta{margin-left:auto;display:flex;gap:.6rem;align-items:center}
/* 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} }
.hdr__tel{display:none;font-variation-settings:'wdth' 104,'wght' 700;color:var(--lamp);text-decoration:none;font-size:1.02rem}
@media(min-width:900px){ .nav{display:flex} .hdr__tel{display:inline} }
@media(max-width:1099px){ .hdr__cta{display:none} }
@media(min-width:1100px){ .hdr__cta{margin-left:auto} }


/* 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;
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  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
}
.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}

/* ---------- 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}