/* ==========================================================================
   JJ Deleon Lawn Care
   Everything here descends from the seal: two inks, concentric rules, the
   flanking diamond, the trunk lattice, wide-tracked Cinzel caps, and centred
   symmetry. Nothing else gets invented.
   ========================================================================== */

:root{
  /* the only two colours in the mark */
  --ink:#1e3b2d;
  --field:#f5f0e3;

  /* the same ink at lower opacity -- hairlines, secondary type, hatching */
  --ink-90:rgba(30,59,45,.90);
  --ink-72:rgba(30,59,45,.72);
  --ink-45:rgba(30,59,45,.45);
  --ink-28:rgba(30,59,45,.28);
  --ink-14:rgba(30,59,45,.14);
  --field-80:rgba(245,240,227,.80);
  --field-42:rgba(245,240,227,.42);
  --field-18:rgba(245,240,227,.18);
  --veil:rgba(30,59,45,.72);

  --display:"Cinzel","Cinzel fallback","Times New Roman",Times,serif;
  --body:"EB Garamond","EB Garamond fallback",Georgia,"Times New Roman",serif;

  --heavy:3px;          /* the outer ring */
  --hair:1px;           /* the rule just inside it */
  --gutter:clamp(1.15rem,5vw,3rem);
  --shell:74rem;
  --measure:38rem;
  --band:clamp(3.5rem,9vw,6.5rem);

  /* the Sylvester trunk's cream crosshatch, flattened into a tile */
  --hatch:var(--field-18);
  --hatch-gap:21px;
}

/* Metric-matched fallbacks.
   Cinzel sets about a third wider than Times and EB Garamond about 14% narrower
   than Georgia, so a plain display=swap reflows every heading and paragraph the
   moment the webfonts land. These two faces re-scale the local stand-in to the
   real font's metrics, which keeps the swap invisible and CLS at zero.
   Ratios measured against the loaded faces at 100px. If the local() font is not
   installed the @font-face never matches and the stack simply falls through. */
@font-face{
  font-family:"Cinzel fallback";
  src:local("Times New Roman");
  size-adjust:133.6%;ascent-override:73.4%;descent-override:27.7%;line-gap-override:0%;
}
@font-face{
  font-family:"EB Garamond fallback";
  src:local("Georgia");
  size-adjust:85.7%;ascent-override:117.8%;descent-override:35%;line-gap-override:0%;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--field);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.1875rem;      /* EB Garamond runs small; this reads like 16px sans */
  line-height:1.66;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}
@media (min-width:60em){ body{font-size:1.25rem} }

img,picture,svg,video{max-width:100%}
img{height:auto}

/* ---------- type ---------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:.012em;
  margin:0 0 .55em;
  text-wrap:balance;
}
h1{font-size:clamp(1.7rem,5.9vw,3.15rem);letter-spacing:.02em}
h2{font-size:clamp(1.5rem,4.2vw,2.35rem)}
h3{font-size:clamp(1.12rem,2.6vw,1.4rem);letter-spacing:.03em}
h4{font-size:1rem;letter-spacing:.06em}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:from-font}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid currentColor;outline-offset:3px;
}

.lede{font-size:1.12em;line-height:1.6}
.measure{max-width:var(--measure)}
.center{text-align:center}
.center .measure{margin-inline:auto}

/* wide-tracked small caps -- the ring text, reused as a label.
   text-indent compensates for the trailing letter-space so centring is true. */
.eyebrow{
  font-family:var(--display);
  font-weight:400;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.3em;
  text-indent:.3em;
  margin:0 0 1em;
  color:var(--ink-72);
}
.band--ink .eyebrow{color:var(--field-80)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--field);padding:.9em 1.4em;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;
}
.skip:focus{left:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- the diamond --------------------------------------------------- */
/* M 80,273 L 87,280 L 80,287 L 73,280 Z -- a square stood on its point. */

.dia{
  display:inline-block;width:.42em;height:.42em;
  background:currentColor;transform:rotate(45deg);
  vertical-align:.08em;margin-inline:.7em;flex:none;
}
.dia--sm{width:.3em;height:.3em}

.list{list-style:none;margin:0 0 1.15em;padding:0}
.list li{position:relative;padding-left:1.5em;margin-bottom:.55em}
.list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:currentColor;transform:rotate(45deg);
}

/* ---------- concentric rules ---------------------------------------------- */
/* Heavy line plus hairline, never one generic border. The centred divider
   copies the pair of bars under the trunk (120 and 67 units, 7 apart). */

.rule{
  position:relative;height:11px;margin:1.4rem auto 0;width:100%;
  border:0;
}
.rule::before,.rule::after{
  content:"";position:absolute;left:50%;translate:-50% 0;background:currentColor;
}
.rule::before{top:0;width:132px;height:3px}
.rule::after{top:7px;width:74px;height:1px}
.rule--left::before,.rule--left::after{left:0;translate:0 0}

/* line ------ diamond ------ line, for full-width section breaks */
.rule-flank{
  display:flex;align-items:center;gap:1rem;
  color:var(--ink-45);margin:0;border:0;
}
.rule-flank::before,.rule-flank::after{content:"";flex:1;height:1px;background:currentColor}
.rule-flank i{
  width:8px;height:8px;background:currentColor;transform:rotate(45deg);flex:none;
}

/* the doubled edge used on the header, the footer and framed art */
.edge-b{border-bottom:var(--heavy) solid var(--ink);box-shadow:0 5px 0 -4px var(--ink-45)}
.edge-t{border-top:var(--heavy) solid currentColor;position:relative}
.edge-t::before{
  content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:currentColor;opacity:.45;
}

/* ---------- the trunk lattice --------------------------------------------- */
/* Two crossed rules at 45 degrees, matching the cream crosshatch on the
   Sylvester trunk. Used twice on the whole site and kept nearly invisible. */

.hatch--ink{--hatch:rgba(30,59,45,.055)}
.hatch{
  background-image:
    repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px var(--hatch-gap)),
    repeating-linear-gradient(-45deg,var(--hatch) 0 1px,transparent 1px var(--hatch-gap));
}

/* ---------- shell and bands ----------------------------------------------- */

.wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--tight{max-width:52rem}

.band{padding-block:var(--band)}
.band--ink{background:var(--ink);color:var(--field)}
.band--tint{border-top:1px solid var(--ink-14);border-bottom:1px solid var(--ink-14)}
.band--flush{padding-block:0}

.band__head{text-align:center;max-width:44rem;margin:0 auto clamp(2.2rem,5vw,3.4rem)}
.band__head p:not(.eyebrow){margin-top:1.1rem;color:var(--ink-72)}
.band--ink .band__head p:not(.eyebrow){color:var(--field-80)}

/* ---------- buttons ------------------------------------------------------- */
/* Squared, thin rule, cream field, tracked caps. Hover inverts. */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--display);font-weight:600;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.17em;text-indent:.17em;
  line-height:1;text-decoration:none;text-align:center;
  padding:1.15em 1.85em;
  border:1.5px solid var(--ink);border-radius:0;
  background:var(--field);color:var(--ink);
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--field)}

.btn--solid{background:var(--ink);color:var(--field)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--field);color:var(--ink)}

.btn--light{background:transparent;border-color:var(--field);color:var(--field)}
.btn--light:hover,.btn--light:focus-visible{background:var(--field);color:var(--ink)}

.btn--fill{background:var(--field);border-color:var(--field);color:var(--ink)}
.btn--fill:hover,.btn--fill:focus-visible{background:transparent;color:var(--field)}

/* the primary call-to-action gets the seal's second ring */
.btn--seal{outline:1px solid currentColor;outline-offset:4px}
.btn--seal.btn--solid,.btn--seal.btn--fill{outline-color:currentColor}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
.btn-row--left{justify-content:flex-start}

.link-more{
  font-family:var(--display);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.16em;
  text-decoration:none;display:inline-flex;align-items:center;
  border-bottom:1px solid currentColor;padding-bottom:.35em;
}
.link-more:hover{border-bottom-width:2px}

/* ---------- framed art ---------------------------------------------------- */
/* Heavy rule, a breath of cream, then the hairline -- the seal's ring pair. */

.frame{display:block;border:var(--heavy) solid var(--ink);padding:5px;background:var(--field)}
.frame img{display:block;width:100%;height:auto;border:1px solid var(--ink-45)}
.band--ink .frame{border-color:var(--field);background:transparent}
.band--ink .frame img{border-color:var(--field-42)}

/* lighter pair for repeating tiles */
.plate{display:block;border:1px solid var(--ink);outline:1px solid var(--ink-28);outline-offset:3px;background:var(--field)}
.plate img{display:block;width:100%;height:auto}
.band--ink .plate,.band--ink .tile{border-color:var(--field);outline-color:var(--field-42);background:transparent}

.ratio-sq img{aspect-ratio:1/1;object-fit:cover}
.ratio-32 img{aspect-ratio:3/2;object-fit:cover}
.ratio-43 img{aspect-ratio:4/3;object-fit:cover}

figure{margin:0}
.cap{
  font-family:var(--display);font-size:.7rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.5;
  margin-top:1.05rem;color:var(--ink-72);
}
.cap i{
  display:inline-block;width:6px;height:6px;background:currentColor;
  transform:rotate(45deg);margin-right:.75em;vertical-align:.1em;
}
.band--ink .cap{color:var(--field-80)}

/* ==========================================================================
   Header
   ========================================================================== */

.topbar{background:var(--ink);color:var(--field);font-size:.8rem}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:2.6rem;padding-block:.4rem;
}
.topbar__note{
  display:none;font-family:var(--display);font-size:.66rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--field-80);
}
.topbar__acts{display:flex;align-items:center;gap:.9rem;margin-inline:auto}
.topbar a{
  font-family:var(--display);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;text-decoration:none;
  display:inline-flex;align-items:center;gap:.45em;
}
.topbar a:hover{text-decoration:underline}
.topbar .dia{color:var(--field-42)}
@media (min-width:56em){
  .topbar__note{display:block}
  .topbar__acts{margin-inline:0}
}

.masthead{background:var(--field)}
.masthead .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.85rem;
}

/* the seal is square and 560 units wide -- it will not sit in a nav bar as
   drawn, so the header pairs the simplified mark with a live Cinzel wordmark.
   Tested against the seal alone at 56px: the ring text turned to mush and the
   name disappeared, so the lockup won. */
.lockup{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.lockup img{width:46px;height:46px;flex:none}
.lockup__name{
  font-family:var(--display);font-weight:600;line-height:1.08;
  text-transform:uppercase;letter-spacing:.13em;font-size:.92rem;white-space:nowrap;
}
.lockup__name span{
  display:block;font-weight:400;font-size:.62rem;letter-spacing:.3em;
  color:var(--ink-72);margin-top:.28em;
}
@media (min-width:56em){
  .lockup img{width:56px;height:56px}
  .lockup__name{font-size:1.06rem}
  .lockup__name span{font-size:.66rem}
}

.nav-toggle{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--display);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  background:var(--field);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:0;padding:.8em 1.05em;cursor:pointer;
}
.nav-toggle[aria-expanded="true"]{background:var(--ink);color:var(--field)}
.nav-toggle i{position:relative;width:15px;height:9px;flex:none}
.nav-toggle i::before,.nav-toggle i::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;
}
.nav-toggle i::before{top:0}
.nav-toggle i::after{bottom:0}

/* On phones the panel has to break out of the masthead's flex row onto a line
   of its own, or it sits beside the toggle and crushes the lockup. */
.nav{display:none;flex-basis:100%;width:100%}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{
  font-family:var(--display);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.15em;text-decoration:none;
  display:block;
}
.nav a[aria-current]{border-bottom:2px solid var(--ink)}

/* `.no-js` gets the same treatment permanently: without the script the toggle
   never appears, so the panel has to be open or the phone has no navigation. */
.nav.is-open,.no-js .nav{
  display:block;border-top:1px solid var(--ink-14);
  background:var(--field);margin-top:.4rem;
}
.nav.is-open ul,.no-js .nav ul{padding:.2rem 0 .8rem}
.nav.is-open li + li,.no-js .nav li + li{border-top:1px solid var(--ink-14)}
.nav.is-open a,.no-js .nav a{padding:1.05rem 0}
.nav.is-open .nav__cta,.no-js .nav .nav__cta{margin-top:1.2rem;border-top:0}
.nav.is-open .nav__cta a,.no-js .nav .nav__cta a{padding:1.15em 1.85em}
/* the filter bar and the lightbox both need the script to do anything */
.no-js .filters{display:none}
.no-js .tile{cursor:default}

@media (min-width:56em){
  .nav-toggle{display:none}
  .nav{display:block!important;border:0!important;background:none!important;
       flex-basis:auto;width:auto;margin-top:0}
  .nav ul{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.1rem);padding:0!important}
  .nav li + li{border:0!important}
  .nav a{padding:0!important}
  .nav__cta{margin:0!important}
  .nav__cta a{padding:1.15em 1.85em!important}
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Layered forward, not with negative z-index: a child at z-index:-1 paints
   behind the section's own background colour and the photo disappears. */
.hero{position:relative;isolation:isolate;color:var(--field);background:var(--ink);overflow:hidden}
.hero__art{position:absolute;inset:0;z-index:0}
.hero__art picture{display:block;width:100%;height:100%}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:var(--veil)}

.hero__inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-block:clamp(3rem,11vw,5.5rem);
  min-height:min(78svh,44rem);justify-content:center;
}
.hero__seal{width:clamp(148px,34vw,238px);height:auto;color:var(--field);display:block}
.hero h1{margin-top:clamp(1.6rem,4vw,2.4rem);max-width:22ch}
.hero__sub{max-width:40ch;color:var(--field-80);margin-top:.2rem}
.hero .btn-row{margin-top:1.9rem}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  margin-top:2rem;font-family:var(--display);font-size:.64rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;color:var(--field-80);
}
.hero__meta .dia{color:var(--field-42)}

/* ==========================================================================
   Content blocks
   ========================================================================== */

.grid{display:grid;gap:clamp(1.6rem,3.5vw,2.6rem)}
@media (min-width:40em){ .grid--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:34em){ .grid--3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:58em){ .grid--3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:46em){ .grid--4{grid-template-columns:repeat(2,1fr)} }

/* service cards -- doubled border, squared, no lift, no shadow */
.card{
  position:relative;display:flex;flex-direction:column;
  border:1.5px solid var(--ink);
  outline:1px solid var(--ink-28);outline-offset:4px;
  background:var(--field);
}
.card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--ink-28)}
.card__body{padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column;flex:1}
.card__body p{color:var(--ink-72)}
.card h3{margin-bottom:.7rem}
.card .link-more{margin-top:auto;align-self:flex-start;padding-top:1.1rem}
/* the heading carries the link; the overlay makes the whole card the target */
.card__link{text-decoration:none}
.card__link::after{content:"";position:absolute;inset:0}
.card:hover .link-more,.card:focus-within .link-more{border-bottom-width:2px}
.card__num{
  font-family:var(--display);font-size:.64rem;letter-spacing:.28em;text-indent:.28em;
  color:var(--ink-72);margin:0 0 .8rem;text-transform:uppercase;
}

/* before / after -- a matched pair, not a slider: the two frames were shot
   from different sides of the house, so a wipe would misrepresent them */
.ba{display:grid;gap:clamp(1.2rem,3vw,2rem)}
@media (min-width:46em){ .ba{grid-template-columns:1fr 1fr;align-items:start} }
.ba figure{display:flex;flex-direction:column}
.ba__tag{
  align-self:center;
  font-family:var(--display);font-weight:600;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.28em;text-indent:.28em;
  background:var(--ink);color:var(--field);padding:.55em 1.2em;margin-bottom:.9rem;
}
.band--ink .ba__tag{background:var(--field);color:var(--ink)}
.ba .cap{text-align:center}

/* recent work */
.work{display:grid;gap:clamp(1.6rem,3.5vw,2.4rem)}
@media (min-width:34em){ .work{grid-template-columns:repeat(2,1fr)} }
@media (min-width:58em){ .work{grid-template-columns:repeat(3,1fr)} }
.work figcaption{
  font-family:var(--display);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;line-height:1.55;
  margin-top:1.05rem;display:flex;gap:.55em;align-items:baseline;
}
.work figcaption i{
  width:7px;height:7px;background:currentColor;transform:rotate(45deg);
  flex:none;position:relative;top:.42em;
}
.band--ink .work figcaption{color:var(--field)}

/* service areas */
/* Ten cities: one column, two of five, or five of two -- never three, which
   strands the tenth on a row of its own. Two columns only once the longest name
   ("Lake Clarke Shores, FL") stops wrapping and breaking the row rhythm. */
.areas{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.1rem 1.1rem;grid-template-columns:1fr;
  max-width:44rem;margin-inline:auto;
}
@media (min-width:34em){ .areas{grid-template-columns:repeat(2,1fr)} }
@media (min-width:64em){ .areas{grid-template-columns:repeat(5,1fr);max-width:100%} }
.areas li{
  display:flex;align-items:baseline;gap:.6em;
  font-family:var(--display);font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;padding-block:.62rem;
  border-bottom:1px solid var(--ink-14);
}
.band--ink .areas li{border-bottom-color:var(--field-18)}
.areas i{width:6px;height:6px;background:currentColor;opacity:.55;transform:rotate(45deg);flex:none;position:relative;top:-.12em}

/* split feature: art beside copy */
.split{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.split-stack{display:grid;gap:clamp(3rem,7vw,5rem)}
@media (min-width:52em){
  .split{grid-template-columns:1fr 1fr}
  .split--flip .split__art{order:2}
}

/* breadcrumbs */
.crumbs{font-family:var(--display);font-size:.66rem;text-transform:uppercase;letter-spacing:.17em;color:var(--ink-72)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.crumbs .dia{color:var(--ink-45);margin-inline:.75em}

.page-head{padding-block:clamp(2rem,5vw,3rem) 0}
.page-head .band__head{margin-bottom:0}
.page-head .crumbs{margin-bottom:clamp(1.6rem,4vw,2.4rem);text-align:center}
.page-head .crumbs ol{justify-content:center}

/* ==========================================================================
   Gallery
   ========================================================================== */

.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.filter{
  font-family:var(--display);font-weight:600;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.15em;text-indent:.15em;
  padding:.8em 1.25em;border:1px solid var(--ink);border-radius:0;
  background:var(--field);color:var(--ink);cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.filter:hover{background:var(--ink-14)}
.filter[aria-pressed="true"]{background:var(--ink);color:var(--field)}

.tiles{display:grid;gap:clamp(1.1rem,2.6vw,1.8rem);grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:0}
@media (min-width:52em){ .tiles{grid-template-columns:repeat(3,1fr)} }
.tiles li[hidden]{display:none}
.tile{
  display:block;width:100%;padding:0;border:1px solid var(--ink);
  outline:1px solid var(--ink-28);outline-offset:3px;
  background:var(--field);cursor:zoom-in;
}
.tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.tile figcaption{
  font-family:var(--display);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.12em;line-height:1.45;text-align:left;
  padding:.75rem .8rem .8rem;border-top:1px solid var(--ink-28);color:var(--ink-72);
}
.gallery-empty{text-align:center;color:var(--ink-72);padding-block:2rem}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(30,59,45,.95);color:var(--field);
  padding:clamp(1rem,4vw,3rem);
}
.lightbox[open],.lightbox.is-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem}
.lightbox img{max-width:100%;max-height:70svh;width:auto;object-fit:contain;border:1px solid var(--field-42)}
.lightbox__frame{border:2px solid var(--field);padding:5px;max-height:74svh;display:flex}
.lightbox__cap{
  font-family:var(--display);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.15em;text-align:center;max-width:40rem;color:var(--field-80);
}
.lightbox__bar{display:flex;gap:.7rem;align-items:center}
.lb-btn{
  font-family:var(--display);font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;text-indent:.16em;
  background:transparent;color:var(--field);border:1px solid var(--field);
  border-radius:0;padding:.75em 1.15em;cursor:pointer;
}
.lb-btn:hover{background:var(--field);color:var(--ink)}
.lightbox__count{font-family:var(--display);font-size:.68rem;letter-spacing:.16em;color:var(--field-80);min-width:5ch;text-align:center}

/* ==========================================================================
   Forms
   ========================================================================== */

.form{display:grid;gap:1.25rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field > span,.field > label{
  font-family:var(--display);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;
}
.field .hint{font-family:var(--body);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink-72);font-weight:400}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--field);border:1.5px solid var(--ink);border-radius:0;
  padding:.85em .9em;width:100%;
}
.field textarea{min-height:8.5rem;resize:vertical}
.field select{
  appearance:none;padding-right:2.7em;
  background-repeat:no-repeat;background-position:right 1em center;background-size:9px 9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%231e3b2d'/%3E%3C/svg%3E");
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-72)}
.form__note{font-size:.9rem;color:var(--ink-72)}
.hp{position:absolute;left:-9999px}

.contact-grid{display:grid;gap:clamp(2.2rem,5vw,3.5rem)}
@media (min-width:54em){ .contact-grid{grid-template-columns:1.15fr .85fr} }

.aside-block + .aside-block{margin-top:2.2rem;padding-top:2.2rem;border-top:1px solid var(--ink-14)}
.aside-block h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:.9rem}
.big-tel{
  font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,4.4vw,1.85rem);
  letter-spacing:.05em;text-decoration:none;display:inline-block;
  border-bottom:2px solid currentColor;padding-bottom:.1em;
}

/* ==========================================================================
   Reviews -- rendered only when reviews.json says so
   ========================================================================== */

.reviews{display:grid;gap:clamp(1.4rem,3vw,2rem)}
@media (min-width:48em){ .reviews{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))} }
.review{border:1.5px solid var(--ink);outline:1px solid var(--ink-28);outline-offset:4px;padding:clamp(1.3rem,3vw,1.9rem)}
.band--ink .review{border-color:var(--field);outline-color:var(--field-42)}
.review__stars{display:flex;gap:.35em;margin-bottom:.9rem}
.review__stars i{width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.review__stars i[data-off]{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.review__who{
  font-family:var(--display);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.16em;margin:1rem 0 0;color:var(--ink-72);
}
.band--ink .review__who{color:var(--field-80)}

/* ==========================================================================
   Footer + sticky mobile call bar
   ========================================================================== */

.footer{
  background:var(--ink);color:var(--field);
  padding-block:clamp(3rem,7vw,4.5rem) 0;
  border-top:var(--heavy) solid var(--field-42);position:relative;
}
.footer::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--field-18)}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__seal{display:flex;justify-content:center}
.footer__seal svg{width:112px;height:112px;color:var(--field)}
.footer__grid{
  display:grid;gap:2.2rem;margin-top:clamp(2.4rem,5vw,3.2rem);
  padding-top:clamp(2.4rem,5vw,3.2rem);border-top:1px solid var(--field-18);
  text-align:center;
}
@media (min-width:46em){ .footer__grid{grid-template-columns:repeat(3,1fr);text-align:left} }
.footer h2{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:1.1rem;color:var(--field-80)}
.footer ul{list-style:none;margin:0;padding:0;font-size:.98rem}
.footer li{margin-bottom:.5rem}
.footer__base{
  margin-top:clamp(2.4rem,5vw,3.2rem);padding-block:1.6rem;
  border-top:1px solid var(--field-18);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--field-80);text-align:center;
}
.footer__base p{margin:0}
.footer__base .btn{padding:.9em 1.3em;font-size:.66rem}

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--ink);border-top:2px solid var(--field);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.13em;text-decoration:none;
  padding:1.05em .6em;color:var(--field);
}
.callbar a + a{border-left:1px solid var(--field-42)}
.callbar a:first-child{background:var(--field);color:var(--ink)}
@media (min-width:56em){ .callbar{display:none} }
@media (max-width:55.999em){ body{padding-bottom:3.6rem} }

/* ==========================================================================
   Utilities
   ========================================================================== */

.label{font-family:var(--display);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.inline-list{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem 2rem;justify-content:center;padding:0;margin:0}
.inline-list li{padding:0;margin:0}
.inline-list li::before{content:none}
.note{max-width:38rem;margin-inline:auto;color:var(--ink-72)}
.band--ink .note{color:var(--field-80)}
.steps{max-width:34rem;margin-inline:auto;text-align:left}
.seal-lg{color:var(--ink);display:block;margin-inline:auto}
.stack > * + *{margin-top:1.15em}
.mt-lg{margin-top:clamp(2.2rem,5vw,3.2rem)}
.mt-md{margin-top:1.6rem}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}

@media print{
  .callbar,.nav-toggle,.topbar,.filters{display:none}
  body{background:#fff}
}