@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/instrument-serif-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2")}
:root{--brand:#1f5f8b;--brand-d:#164464;--brand-l:#e9eff3;--on-brand:#ffffff;--link:#1f5f8b;--ink:#1d2328;--head-ink:#1d2328;--muted:#616568;--warm:#f6f9fa;--stone:#f1f2f2;--line:#dbdcdd;--accent:#1f5f8b;--paper:#ffffff;--deep:#1d2328;--on-brand-line:#5e8cab;--brand-lt:#4c7fa2;--surface-d:#060708;--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-head:"Instrument Serif",Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;--head-w:400;--head-track:-.012em;--head-lh:1.04;--btn-r:999px;--root-size:100%;--head-scale:1}
:root[data-theme="dark"]{--brand:#1f5f8b;--brand-d:#164261;--brand-l:#0d1a24;--on-brand:#ffffff;--link:#5787a8;--ink:#f0f0f0;--head-ink:#f0f0f0;--muted:#a1a1a2;--warm:#14181b;--stone:#171819;--line:#2b2b2c;--accent:#1f5f8b;--paper:#08090a;--deep:#040506;--on-brand-line:#5e8cab;--brand-lt:#4c7fa2;--surface-d:#060708}
/* TruLata site builder, theme 1. Mobile first, no framework. The two typefaces are served from the
   site's own /assets/fonts (theme/layout.py writes the @font-face rules above this file).
   Brand tokens (--brand, --ink, ...) and the type treatment (--font, --head-w, --head-track,
   --head-lh) are prepended by theme/layout.py from the client's own brand.

   Typography is three heading sizes and one body size, nothing else, and the vertical rhythm comes
   from one scale (--s1 to --s7). That restraint is what keeps a generated site looking designed
   rather than assembled. */
:root{--s1:8px;--s2:14px;--s3:22px;--s4:34px;--s5:52px;--s6:76px;--s7:96px;
  --measure:68ch;--card-r:18px;--lift:0 24px 60px -34px rgba(12,14,18,.42)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;scroll-behavior:smooth;font-size:var(--root-size,100%)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--font);padding-bottom:64px;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1}
::selection{background:var(--brand);color:var(--on-brand)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em}
a:hover{color:var(--brand-d)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--head-ink,var(--ink));line-height:var(--head-lh,1.1);margin:0 0 .5em;
  font-weight:var(--head-w,700);letter-spacing:var(--head-track,-.02em);overflow-wrap:break-word;text-wrap:balance;
  font-optical-sizing:auto}
h1{font-size:calc(clamp(2.35rem,5.6vw,4rem) * var(--head-scale,1))}
h2{font-size:calc(clamp(1.75rem,3.4vw,2.6rem) * var(--head-scale,1))}
/* The display face is for the big headings. A small heading in a fine display serif goes thin and
   spindly (a bakery's card titles, 2026-09-23), so h3 and h4 are set in the reading face. */
h3,h4{font-family:var(--font);font-weight:650;letter-spacing:-.012em;line-height:1.3}
h3{font-size:1.14rem}
h4{font-size:1.02rem}
p{margin:0 0 1.15em;text-wrap:pretty}
p,li{max-width:var(--measure)}
/* a long email or web address is one unbreakable word, and on a small phone it pushed the page sideways
   (a roofer's contact line, 2026-09-23); it may break, ordinary words never do */
p,li,dd,td,address,figcaption,.lede{overflow-wrap:anywhere}
ul{padding-left:1.2em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--deep);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
.narrow{max-width:780px}
.ic{width:1.1em;height:1.1em;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:14px 28px;
  border-radius:var(--btn-r);font-weight:650;font-size:1rem;line-height:1.2;letter-spacing:-.006em;text-decoration:none;
  border:1.5px solid transparent;text-align:center;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1px)}
.btn--solid{background:var(--brand);color:var(--on-brand);border-color:var(--brand);box-shadow:0 12px 26px -16px var(--brand)}
.btn--solid:hover{background:var(--brand-d);border-color:var(--brand-d);color:var(--on-brand)}
.btn--line{border-color:var(--brand);color:var(--link);background:transparent}
.btn--line:hover{background:var(--brand-l);color:var(--brand-d)}
.btn--ghost{border-color:rgba(255,255,255,.85);color:#fff;background:rgba(0,0,0,.12)}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--light{background:#fff;color:#141414;border-color:#fff}
.btn--light:hover{background:var(--stone);color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:var(--s3) 0 0}
.more{display:inline-flex;align-items:center;gap:.4em;font-weight:700;text-decoration:none;color:var(--link)}
.after{margin:28px 0 0}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);min-height:68px;flex-wrap:wrap}
.nav__logo{display:flex;align-items:center;text-decoration:none;margin-right:auto;padding:8px 0;flex:1 1 0;min-width:0;min-height:48px}   /* a tap target, like every link on a phone */
.nav__logoimg{height:48px;width:auto;max-width:200px;object-fit:contain}
.nav__name{font-family:var(--font-head);font-weight:var(--head-w,700);font-size:clamp(1.08rem,1.5vw,1.3rem);letter-spacing:var(--head-track,-.02em);color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
@media (max-width:480px){.nav__name{font-size:1.14rem}}
.nav__burger{flex:none;display:none;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.nav__bars{display:inline-grid;gap:4px}
.nav__bars span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.nav__menu{display:flex;align-items:center;gap:clamp(18px,2.5vw,36px);flex-wrap:wrap}   /* the buttons are their own group */
.nav__links{display:flex;flex-wrap:wrap;gap:4px clamp(18px,2.2vw,32px);list-style:none;margin:0;padding:0}   /* airy, not a run of words */
.nav__links>li>a{color:var(--ink);text-decoration:none;font-weight:550;padding:8px 0;display:inline-block;position:relative}
.nav__links>li>a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav__links>li>a:hover::after,.nav__links>li>a[aria-current]::after{transform:scaleX(1)}
.nav__links>li>a:hover,.nav__links>li>a[aria-current]{color:var(--link)}
.nav__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav__phone{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
@media (max-width:1079px){
  .nav.js .nav__burger{display:inline-flex}
  .nav.js .nav__menu{display:none;width:100%;padding:8px 0 18px;flex-direction:column;align-items:stretch;gap:12px}
  .nav.js.open .nav__menu{display:flex}
  .nav.js .nav__links{flex-direction:column;gap:0;align-items:stretch}
  .nav.js .nav__links>li>a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav.js .nav__actions{flex-direction:column;align-items:stretch}
  .nav.js .nav__actions .btn{width:100%}
  .nav__phone{justify-content:center;min-height:44px}
}
/* header layouts (Header settings in the builder) */
.nav--static{position:static}
.nav--centered .nav__inner{justify-content:center}
.nav--centered .nav__logo{margin:0;width:100%;justify-content:center}
.nav--centered .nav__menu{width:100%;justify-content:center;padding-bottom:10px}
.nav--minimal.js .nav__burger{display:inline-flex}
.nav--minimal.js .nav__menu{display:none;width:100%;padding:8px 0 18px;flex-direction:column;align-items:stretch;gap:12px}
.nav--minimal.js.open .nav__menu{display:flex}
.nav--minimal.js .nav__links{flex-direction:column;gap:0}
.nav--minimal.js .nav__links a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
@media (max-width:1079px){.nav--centered .nav__logo{width:auto;margin-right:auto;justify-content:flex-start}}
/* --ink is the TEXT color, and in dark mode that is near-white: the bar painted itself white and
   the word Call disappeared into it (1.14 against a 4.5 floor). --surface-d is dark in both modes,
   which is what a bar with white words on it needs. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--surface-d);box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;color:#fff;font-weight:700;text-decoration:none}
.callbar a+a{background:var(--brand);color:var(--on-brand)}
@media (min-width:760px){.callbar{display:none}body{padding-bottom:0}}
body.no-callbar{padding-bottom:0}

/* hero */
.hero{position:relative;color:#fff;background:var(--brand-d);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover}
/* Two gradients, not one: a side wash so the words read, and a floor so the photo lands in the page
   instead of being cut off by the next band. */
.hero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(8,10,14,.80),rgba(8,10,14,.52) 54%,rgba(8,10,14,.24)),
  linear-gradient(to top,rgba(8,10,14,.45),transparent 42%)}
.hero__inner{padding-top:var(--s5);padding-bottom:var(--s5)}
.hero--home .hero__inner{padding-top:var(--s6);padding-bottom:var(--s6);min-height:min(80vh,680px);display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{color:#fff;max-width:19ch;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero--home h1{font-size:calc(clamp(2.6rem,6.4vw,4.6rem) * var(--head-scale,1))}
.hero--page h1{font-size:calc(clamp(2.1rem,4.6vw,3.1rem) * var(--head-scale,1))}
.hero__lede{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:56ch;color:rgba(255,255,255,.94);margin:0;line-height:1.55}
.hero .eyebrow{color:#fff;opacity:.9}
/* No photo is not the same as no picture: light falling across the brand color, with a vignette
   on the far corner, so a hero without a photograph still has depth. */
.hero--plain{background:
  radial-gradient(120% 80% at 12% -20%,rgba(255,255,255,.22),transparent 58%),
  radial-gradient(90% 70% at 104% 118%,rgba(0,0,0,.34),transparent 60%),
  linear-gradient(135deg,var(--brand-d) 0%,var(--brand) 58%,var(--brand-d) 100%)}
/* a brand button on a brand hero is a button nobody can find: on a plain hero it turns light */
.hero--plain .btn--solid{background:#fff;color:var(--brand-d);border-color:#fff;box-shadow:0 12px 26px -16px rgba(0,0,0,.5)}
.hero--plain .btn--solid:hover{background:#eef0f4;color:var(--brand-d);border-color:#eef0f4}   /* fixed light: --brand-l is dark in dark mode */
.badges{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px}
.badges li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.97rem}
.crumbs{font-size:.9rem;margin:0 0 14px;color:rgba(255,255,255,.85)}
.crumbs a{color:#fff}

/* bands and heads */
.band{padding:var(--s6) 0}
@media (min-width:760px){.band{padding:var(--s7) 0}.wrap{padding-left:28px;padding-right:28px}}
/* two plain bands in a row are one stretch of page, not two rooms: the seam between them is a
   breath, while a band that paints its own background keeps its full height */
.band:not(.band--warm):not(.band--stone):not(.band--brand) + .band:not(.band--warm):not(.band--stone):not(.band--brand){padding-top:var(--s4)}
.band--warm{background:var(--warm)}
.band--stone{background:var(--stone)}
.band--brand{background:var(--brand);color:var(--on-brand)}
.band--brand h2,.band--brand p{color:var(--on-brand)}
.head{max-width:760px;margin:0 0 var(--s5)}
.head--c{margin-left:auto;margin-right:auto;text-align:center}
.head--c p{margin-left:auto;margin-right:auto}
/* The eyebrow carries a hairline, which is the cheapest way a section reads as designed. */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--link);margin:0 0 var(--s2)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.head--c .eyebrow::before{display:none}
.lede{font-size:1.16rem;line-height:1.6;color:var(--muted)}
.group-h{margin:34px 0 16px}

/* grids and cards */
.grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:980px){.grid{gap:28px}}
@media (min-width:640px){.g3,.g2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.g3{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--card-r);
  overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .24s,transform .24s,border-color .24s}
.card:hover{box-shadow:var(--lift);transform:translateY(-3px);color:var(--ink);border-color:var(--brand-l)}
.card__img{overflow:hidden}
.card__img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__img img{transform:scale(1.035)}
.card__body{padding:var(--s3) var(--s3) 24px;display:flex;flex-direction:column;flex:1;gap:2px}
.card__body h3{margin-bottom:.4em}
.card__body p{color:var(--muted);margin:0 0 14px}
.card__body .more{margin-top:auto}
.split{display:grid;gap:32px;align-items:center;grid-template-columns:minmax(0,1fr)}   /* one column on a phone is the screen's width, never the widest word's */
/* heading on the left, the words on the right: prose with no photo still has a shape */
.split--text{align-items:start;gap:var(--s3)}
.split--text .head{margin-bottom:0}
@media (min-width:900px){.split--text{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px}}
.prose>*:last-child{margin-bottom:0}
.split--top{align-items:start}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.split__img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.split__img img.tall{aspect-ratio:4/5;max-height:620px;object-position:50% 18%}
.ticks{list-style:none;padding:0;margin:0 0 1.2em}
.ticks li{position:relative;padding:0 0 0 30px;margin:0 0 10px}
.ticks li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:7px;border-left:3px solid var(--brand);border-bottom:3px solid var(--brand);transform:rotate(-45deg)}

/* service page */
.layout{display:grid;gap:40px}
@media (min-width:980px){.layout{grid-template-columns:minmax(0,1fr) 320px;gap:56px}}
.prose{max-width:760px}
.prose h2{margin-top:1.6em;font-size:clamp(1.35rem,3vw,1.8rem)}
.prose>h2:first-child{margin-top:0}
.aside{display:flex;flex-direction:column;gap:18px}
@media (min-width:980px){.aside{position:sticky;top:96px;align-self:start}}
.panel{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--paper)}
.panel__h{font-size:1.05rem;margin:0 0 10px}
.panel ul{list-style:none;padding:0;margin:0}
.panel li a{display:block;padding:7px 0;text-decoration:none;color:var(--ink);font-weight:600}
.panel li a[aria-current]{color:var(--link)}
.panel--brand{background:var(--brand-l);border-color:transparent}

/* faq */
.faqs{margin:0 0 8px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.5rem;color:var(--link);line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq__a{padding:0 0 18px;color:var(--ink)}
.faq__a p{margin:0}
.linklist{list-style:none;padding:0;display:grid;gap:6px;grid-template-columns:1fr}
@media (min-width:640px){.linklist{grid-template-columns:1fr 1fr}}
.linklist a{display:inline-flex;align-items:center;gap:.4em;font-weight:600;text-decoration:none}

/* about + team */
.bio{display:grid;gap:22px;padding:30px 0;border-top:1px solid var(--line)}
.bio:first-of-type{border-top:0}
@media (min-width:760px){.bio{grid-template-columns:220px 1fr;gap:36px}}
.bio__img img{width:100%;max-width:260px;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:14px}
.bio__img--none{width:120px;height:120px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:800}
.bio__role{color:var(--link);font-weight:700;margin:-.3em 0 .8em}

/* gallery */
.tiles--wall{columns:2;column-gap:14px}
@media (min-width:760px){.tiles--wall{columns:3;column-gap:18px}}
@media (min-width:1100px){.tiles--wall{columns:4}}
.tiles--wall .tile{margin:0 0 18px;break-inside:avoid}
.tiles--wall .tile img{height:auto;aspect-ratio:auto}
.tiles--row{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.tiles--row{grid-template-columns:repeat(4,1fr);gap:18px}}
.tile{margin:0}
.tile img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--stone)}
.tile img.tall{object-position:50% 22%}
.card__img img.tall{object-position:50% 22%}
.tile figcaption{font-size:.9rem;color:var(--muted);margin:8px 2px 0;line-height:1.4}

/* reviews + proof */
.quotes{display:grid;gap:20px}
@media (min-width:760px){.quotes{grid-template-columns:repeat(2,1fr)}}
.quote{margin:0;background:var(--paper);border-radius:var(--card-r);padding:30px 30px 26px;border:1px solid var(--line)}
.ic--quote{width:30px;height:30px;color:var(--brand);margin-bottom:12px;opacity:.9}
.quote p{font-family:var(--font-head);font-size:1.22rem;line-height:1.45;letter-spacing:-.01em;font-weight:500;max-width:46ch}
.quote cite{font-style:normal;font-weight:700;font-size:.95rem}
.quote__src{color:var(--muted);margin-left:8px}
.videos{display:grid;gap:20px;margin-top:28px}
@media (min-width:760px){.videos{grid-template-columns:repeat(3,1fr)}}
.video{margin:0}
.video__frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{font-weight:700;margin-top:10px}
.proof{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;text-align:center}
.proof b{display:block;font-size:1.8rem;color:var(--ink)}
.proof span{color:var(--muted)}
.certs{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
.certs li{display:flex;align-items:center;gap:6px;font-weight:600}

/* locations */
.locs{display:grid;gap:18px}
@media (min-width:640px){.locs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.locs{grid-template-columns:repeat(3,1fr)}}
.split--text .locs{grid-template-columns:1fr}     /* one place beside its heading: the card fills its column */
.loc{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--paper)}
.loc h3{display:flex;align-items:center;gap:8px;font-size:1.1rem}
.loc h3 .ic{color:var(--brand)}
.loc address{font-style:normal;color:var(--muted);margin:0 0 12px}
.loc__links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-weight:600}
.hours{border-collapse:collapse;width:100%;margin:0 0 14px;font-size:.95rem}
.hours th{text-align:left;font-weight:600;padding:4px 12px 4px 0;white-space:nowrap}
.hours td{padding:4px 0;color:var(--muted)}
.hours--none{color:var(--muted)}
.places{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.places li{background:var(--stone);border-radius:999px;padding:6px 14px;font-size:.93rem}

/* contact + form */
.cta__inner{display:flex;flex-direction:column;gap:18px}
@media (min-width:900px){.cta__inner{flex-direction:row;align-items:center;justify-content:space-between}}
.cta h2{margin:0 0 .3em}
.cta p{margin:0;max-width:60ch}
.cta .btns{margin:0}
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 22px 50px -34px rgba(0,0,0,.45)}
.formcard__h{font-size:1.4rem}
.form{display:grid;gap:14px}
.fld{display:grid;gap:6px}
.fld label{font-weight:700;font-size:.95rem}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brand);outline:2px solid var(--brand-l)}
.row2{display:grid;gap:14px}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fine{font-size:.88rem;color:var(--muted);margin:14px 0 0}
.embed{min-height:200px}
.contact__line{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem;overflow-wrap:anywhere;min-width:0}
.contact__side address{font-style:normal;margin:0 0 8px}

/* footer */
.foot{background:var(--paper);border-top:1px solid var(--line);color:var(--ink);padding:var(--s6) 0 30px;font-size:.95rem}
.foot__grid{display:grid;gap:30px}
.foot__logo img{height:56px;width:auto;max-width:220px;object-fit:contain;margin-bottom:14px}
.foot__name{font-family:var(--font-head);font-weight:var(--head-w,700);font-size:1.3rem;letter-spacing:var(--head-track,-.02em)}
.foot__h{font-family:var(--font);font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin:0 0 14px;color:var(--muted)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0 0 8px}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{color:var(--link);text-decoration:underline}
.foot__soc{display:flex;gap:10px;margin-top:10px}
.foot__soc a{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;background:var(--stone)}
.foot__notice{margin:34px 0 0;font-size:.85rem;color:var(--muted);max-width:90ch}
.foot__base{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}

.foot__grid--1,.foot__grid--2,.foot__grid--3,.foot__grid--4,.foot__grid--5{grid-template-columns:1fr}
@media (min-width:760px){
  .foot__grid--2{grid-template-columns:1.3fr 1fr}
  .foot__grid--3{grid-template-columns:1.3fr 1fr 1.2fr}
  .foot__grid--4{grid-template-columns:1.3fr 1fr 1fr 1.2fr}
  .foot__grid--5{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:1080px){.foot__grid--5{grid-template-columns:1.2fr 1fr 1fr 1.2fr 1fr}}
.foot__hours li{display:flex;gap:10px;margin:0 0 4px}
.foot__hours li>span:first-child{min-width:2.6em;font-weight:700}
.foot--simple{text-align:center}
.foot--simple .foot__grid{grid-template-columns:1fr!important;justify-items:center;gap:22px}
.foot--simple .foot__grid ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.foot--simple .foot__grid li{margin:0}
.foot--simple .foot__soc{justify-content:center}
.foot--simple .foot__notice{margin-left:auto;margin-right:auto}
.foot--simple .foot__h{margin-bottom:8px}

/* general information on a service page (T-0453): always labelled */
.general{margin:36px 0 0;padding:22px 24px;border-radius:14px;background:var(--stone)}
.general h2{font-size:1.25rem;margin-bottom:.3em}
.general__note{font-size:.85rem;color:var(--muted);margin:0 0 12px}
.general p:last-child{margin-bottom:0}

/* widgets (the Add panel's library) */
.band--tight{padding:28px 0}
.btns--c{justify-content:center;margin:0}
.txt--c{text-align:center}
.wimg{margin:0 auto;max-width:100%}
.wimg img{width:100%;border-radius:16px}
.wimg figcaption{margin:10px 0 0;font-size:.92rem;color:var(--muted);text-align:center}
.wdiv{padding-top:8px;padding-bottom:8px}
.wdiv hr{border:0;border-top:1px solid var(--line);margin:0}
.wdiv--space hr{border-color:transparent;margin:24px 0}
.ticks--cols{columns:1}
@media (min-width:760px){.ticks--cols{columns:2;column-gap:40px}.ticks--cols li{break-inside:avoid}}
.callout{text-align:center}
.callout__t{font-family:var(--font-head);font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.35;font-weight:700;color:var(--ink);margin:0 0 20px}
.cols .col h3{margin-bottom:.4em}
.cols .col p{color:var(--muted);margin:0}
@media (min-width:760px){.cols--2{grid-template-columns:repeat(2,1fr)}.cols--3{grid-template-columns:repeat(3,1fr)}.cols--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cols--4{grid-template-columns:repeat(4,1fr)}}
.wvid{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--stone)}
.wvid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wvid--empty{display:grid;place-items:center;text-align:center;padding:24px}
.wvid__cap{margin:10px 0 0;color:var(--muted);font-size:.95rem}
.wvid__src{margin:8px 0 0;font-size:.85rem;color:var(--muted);word-break:break-all}
.wmap{display:grid;gap:24px}
@media (min-width:860px){.wmap{grid-template-columns:1fr 1.6fr;align-items:center}}
.wmap address{font-style:normal;margin:0 0 8px}
.wmap__map{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--stone)}
.wmap__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:18px}
@media (min-width:860px){.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.step{display:flex;gap:14px;align-items:flex-start}
.step__n{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-weight:800}
.step h3{margin:6px 0 .3em}
.step p{margin:0;color:var(--muted)}
.prices{list-style:none;padding:0;margin:0 0 12px;max-width:820px}
.price{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.price h3{margin:0;font-size:1.05rem}
.price p{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.price__v{white-space:nowrap;font-size:1.1rem}
.wban__in{display:flex;flex-direction:column;gap:18px}
@media (min-width:860px){.wban__in{flex-direction:row;align-items:center}.wban__t{flex:1}}
.wban__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--on-brand-line);font-size:1.6rem}
.wban h2{margin:0 0 .3em}
.wban p{margin:0 0 .4em}
.wban .fine{opacity:.85;font-size:.85rem}
.announce{background:var(--surface-d);color:#ffffff;font-size:.95rem;font-weight:600;padding:10px 0;text-align:center}
.announce a{color:#ffffff;display:inline-flex;align-items:center;gap:.3em;margin-left:.6em}
.wbook{position:relative;min-height:640px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.wbook iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wsoc{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.wsoc a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--stone);color:var(--ink);text-decoration:none;font-weight:700}
.wsoc a:hover{background:var(--brand-l)}
.fine{font-size:.85rem;color:var(--muted)}
.wdocs{list-style:none;padding:0;margin:0}
.wdocs a{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700}
.wdocs a:hover{border-color:var(--brand);background:var(--brand-l)}
.wdocs .ic{transform:rotate(90deg);color:var(--link)}
.wdocs small{margin-left:auto;font-size:.75rem;color:var(--muted);font-weight:700;letter-spacing:.08em}

/* color tones for the header and footer: text colors follow the background, so contrast holds */
.tone--tint{--paper:var(--warm)}
.tone--dark{--paper:var(--deep);--ink:#ffffff;--head-ink:#ffffff;--link:#ffffff;--muted:rgba(255,255,255,.82);--line:rgba(255,255,255,.22);--stone:rgba(255,255,255,.12);--brand-l:rgba(255,255,255,.12)}
.tone--brand{--paper:var(--brand);--head-ink:var(--on-brand);--ink:var(--on-brand);--link:var(--on-brand);--muted:var(--on-brand);--line:var(--on-brand-line);--stone:var(--on-brand-line);--brand-l:var(--on-brand-line)}
.tone--tint,.tone--dark,.tone--brand{background:var(--paper);color:var(--ink)}
.tone--brand .btn--solid{background:var(--on-brand);border-color:var(--on-brand);color:var(--brand)}
.tone--brand .btn--solid:hover{background:var(--paper);color:var(--on-brand);border-color:var(--on-brand)}
.tone--dark .foot__soc a,.tone--brand .foot__soc a{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* cinema hero. The CSS below is the END state on purpose: no script, or reduced motion, and the
   visitor still gets a finished hero. .is-cinema (added by the script) rewinds it to frame zero
   and hands the motion to --d (doors), --c (copy) and --k (paths), written on scroll. */
.cin{position:relative}
.cin__stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;isolation:isolate;
  background:var(--surface-d);color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.cin__photo{position:absolute;inset:0;z-index:-2}
.cin__photo img{width:100%;height:100%;object-fit:cover}
.cin__photo--plain{background:linear-gradient(135deg,var(--brand-d),var(--brand))}
.cin__stage::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.42) 60%,rgba(0,0,0,.28)),
             linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 34%,rgba(0,0,0,.12) 62%,transparent 80%)}
.cin__leaf{position:absolute;top:0;bottom:0;width:50.5%;z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#2b2d30,#141518 62%,#0e0f11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 40px 90px rgba(255,255,255,.05)}
.cin__leaf--l{left:0;border-right:1px solid rgba(0,0,0,.6)}
.cin__leaf--r{right:0;border-left:1px solid rgba(0,0,0,.6)}
.cin__plate{position:absolute;left:8%;top:13%;max-width:78%;color:rgba(255,255,255,.5);
  font-size:clamp(.72rem,1.5vw,1rem);font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.8)}
.cin__latch{position:absolute;top:50%;width:14px;height:86px;margin-top:-43px;border-radius:7px;
  background:linear-gradient(90deg,#6b6e73,#3a3c40);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.cin__leaf--l .cin__latch{right:26px}
.cin__leaf--r .cin__latch{left:26px}
.cin__seam{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:2;opacity:0;
  background:linear-gradient(180deg,transparent,var(--brand),transparent)}
.cin__copy{position:relative;z-index:3;width:100%;padding-bottom:26px}
.cin__copy .eyebrow{color:#fff;opacity:.92}
.cin__copy h1{color:#fff;max-width:18ch;margin:0}
.cin__copy .hero__lede{margin-top:16px}
.cin__copy .btns{margin-top:26px}
.cin__paths{position:relative;z-index:3;width:100%;display:grid;gap:10px;padding-bottom:30px;
  grid-template-columns:1fr}
.cin__door{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:#fff;
  padding:14px 16px;border:1px solid rgba(255,255,255,.28);border-radius:12px;
  background:rgba(0,0,0,.34);backdrop-filter:blur(3px)}
.cin__door:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.cin__door-label{font-weight:800;font-size:1rem}
.cin__door-line{font-size:.88rem;color:rgba(255,255,255,.82);flex:1}
.cin__door:hover .cin__door-line{color:var(--on-brand)}
.cin__door-go{flex:none;opacity:.8}
@media (min-width:760px){
  .cin__paths{grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:40px}
  .cin__door{flex-direction:column;align-items:flex-start;gap:6px;padding:18px}
  .cin__copy{padding-bottom:34px}
}
/* frame zero, and the scrubbed motion */
.cin.is-cinema{height:220vh}   /* runway, not wait: timing inside is proportional */
.cin.is-cinema .cin__stage{--p:0;--d:0;--c:0;--k:0}
.cin.is-cinema .cin__photo{transform:scale(calc(1.16 - 0.16 * var(--d)))}
.cin.is-cinema .cin__leaf--l{transform:translateX(calc(var(--d) * -101%))}
.cin.is-cinema .cin__leaf--r{transform:translateX(calc(var(--d) * 101%))}
.cin.is-cinema .cin__seam{opacity:calc(var(--d) * (1 - var(--d)) * 3.2);
  transform:scaleX(calc(1 + var(--d) * 26))}
.cin.is-cinema .cin__more{opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 22px))}
.cin.is-cinema .cin__copy h1{transform:translateY(calc((1 - var(--d)) * 8px))}
.cin.is-cinema .cin__paths{opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 22px))}
@media (max-width:759px){.cin.is-cinema{height:190vh}}
/* cinema hero on a phone: a recomposition, not a squeeze. The lede and the path descriptions
   are dropped so the headline, the one button and the four paths all fit above the call bar. */
@media (max-width:759px){
  .cin__stage{min-height:0}
  .cin__copy h1{font-size:clamp(1.7rem,7.4vw,2.2rem);max-width:none}
  .cin__more .hero__lede{display:none}
  .cin__more .btns .btn--ghost{display:none}
  .cin__door-line{display:none}
  .cin__paths{grid-template-columns:1fr 1fr;gap:8px;padding-bottom:calc(56px + 18px)}
  .cin__door{padding:12px 13px;border-radius:10px;align-items:center}
  .cin__door-label{font-size:.92rem;line-height:1.25}
  .cin__plate{top:9%;letter-spacing:.16em}
  .cin__latch{height:60px;margin-top:-30px}
  .cin__leaf--l .cin__latch{right:14px}
  .cin__leaf--r .cin__latch{left:14px}
}

/* chapters. Default (no script, reduced motion) is a plain readable stack; .is-chapters turns
   the stack into one pinned stage with a scrubbed crossfade. */
.chp{position:relative;background:var(--surface-d);color:#fff}
.chp__photos{position:absolute;inset:0;z-index:0;overflow:hidden}
.chp__photo{position:absolute;inset:0;transition:opacity .45s linear}
.chp__photo img{width:100%;height:100%;object-fit:cover}
.chp__photo img{filter:contrast(1.12) saturate(1.02) brightness(1.04)}
.chp__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 36%,rgba(0,0,0,.24) 72%,rgba(0,0,0,.34) 100%),
             linear-gradient(0deg,rgba(0,0,0,.6),transparent 46%)}
.chp__inner{position:relative;z-index:2;padding:64px 24px}
.chp__eyebrow{color:#fff;opacity:.9}
.chp__rail{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.chp__rail-item{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.chp__tick{width:26px;height:2px;background:rgba(255,255,255,.28)}
.chp__rail-item.is-on{color:#fff}
.chp__rail-item.is-on .chp__tick{background:var(--brand)}
.chp__panel{max-width:22ch}
.chp__panel+.chp__panel{margin-top:54px}
.chp__num{display:block;font-size:.8rem;font-weight:800;letter-spacing:.2em;color:var(--brand-lt);margin-bottom:14px}
.chp__num i{font-style:normal;opacity:.5}
.chp__panel h2{color:#fff;margin:0;font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.06;max-width:17ch}
.chp__panel p{color:rgba(255,255,255,.86);max-width:44ch;font-size:1.08rem;margin:16px 0 0}
.chp__go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:#fff;font-weight:800;
  text-decoration:none;border-bottom:2px solid var(--brand);padding:6px 0 8px;min-height:44px}
.chp__go:hover{color:var(--brand)}
/* pinned + scrubbed */
.chp.is-chapters{height:calc(var(--n) * 70vh + 100vh)}
.chp.is-chapters .chp__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.chp.is-chapters .chp__inner{height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:44px}
.chp.is-chapters .chp__eyebrow{position:absolute;top:96px;left:24px;margin:0}
.chp.is-chapters .chp__rail{order:2;margin:30px 0 0}
.chp.is-chapters .chp__panels{order:1}
.chp.is-chapters .chp__photo{opacity:0;will-change:transform,opacity}
.chp.is-chapters .chp__stage::after{content:"";position:absolute;left:0;bottom:0;height:3px;z-index:3;
  width:calc((var(--i,0) + var(--k,0)) / var(--n) * 100%);background:var(--brand);
  box-shadow:0 0 18px rgba(0,0,0,.5)}
.chp.is-chapters .chp__panels{position:relative}
.chp.is-chapters .chp__panel{position:absolute;left:0;bottom:0;opacity:0;
  transform:translateY(18px);transition:opacity .35s linear,transform .35s ease-out;max-width:34ch;
  pointer-events:none}
.chp.is-chapters .chp__panel.is-on{opacity:1;transform:none;pointer-events:auto}
.chp.is-chapters .chp__panels{min-height:clamp(260px,42vh,380px)}
.chp.is-chapters .chp__panel+.chp__panel{margin-top:0}
@media (max-width:759px){
  .chp.is-chapters{height:calc(var(--n) * 60vh + 100vh)}
  .chp__inner{padding:40px 16px calc(56px + 24px)}
  .chp__rail{gap:6px 12px;margin-bottom:22px}
  .chp__rail-item{font-size:.82rem;letter-spacing:.06em}
  .chp__tick{width:16px}
  .chp.is-chapters .chp__panel{max-width:none}
}

/* arcade: the small game at the foot of the page. Deliberately quiet, and it holds its height
   whether or not the canvas ever runs, so nothing below it jumps. */
.band--deep{background:var(--surface-d);color:#fff}
.arc__h{color:#fff;margin:0}
.arc__line{color:rgba(255,255,255,.8);margin:12px 0 0;max-width:52ch}
.arc__board{display:flex;gap:22px;align-items:baseline;margin:22px 0 10px;
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.arc__board b{color:#fff;font-size:1rem;margin-left:6px}
.arc__vs{margin-left:auto;color:rgba(255,255,255,.52)}
.arc__canvas{display:block;width:100%;height:190px;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  touch-action:manipulation;cursor:pointer}
@media (max-width:759px){.arc__canvas{height:160px}.arc__vs{display:none}}

/* light and dark: one attribute on <html> swaps the tokens, so every section follows without a
   per-section rule. The switcher floats bottom right on every site, never in the header, and it
   shows the mode you would GET, not the one you are in. */
.modeswitch{position:fixed;right:18px;bottom:18px;z-index:70;width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);
  box-shadow:0 6px 24px rgba(0,0,0,.22);backdrop-filter:blur(6px)}
.modeswitch:hover{border-color:var(--brand);color:var(--brand)}
.modeswitch:active{transform:translateY(1px)}
.modeswitch__moon{display:none}
:root[data-theme="dark"] .modeswitch__moon{display:none}
:root[data-theme="dark"] .modeswitch__sun{display:block}
:root:not([data-theme="dark"]) .modeswitch__sun{display:none}
:root:not([data-theme="dark"]) .modeswitch__moon{display:block}
/* above the call bar on phones, so it never covers Call or the main button */
@media (max-width:759px){.modeswitch{bottom:calc(56px + 14px);right:14px;width:42px;height:42px}}
@media print{.modeswitch{display:none}}

/* always-dark surfaces keep their own type colors in both modes */
.band--deep .eyebrow,.cin .eyebrow,.chp .eyebrow{color:var(--brand-lt)}
.band--deep p,.band--deep li{color:rgba(255,255,255,.86)}
/* a dark wordmark disappears on a dark menu, so a site may carry a light version and the theme
   picks one. Only ONE is ever visible, and the hidden one is not read out. */
.nav__logoimg--dk,.foot__logoimg--dk{display:none}
:root[data-theme="dark"] .nav__logo .nav__logoimg:not(.nav__logoimg--dk),
:root[data-theme="dark"] .foot__logo img:not(.foot__logoimg--dk){display:none}
:root[data-theme="dark"] .nav__logoimg--dk,
:root[data-theme="dark"] .foot__logoimg--dk{display:block}

/* numbered blocks on a long page, and the reveal. Both are additive: with no script every block
   is already visible, and with reduced motion the reveal is a fade with no movement. */
.blk{position:relative;padding-top:8px}
.blk+.blk{margin-top:44px}
.blk>h2{position:relative}
.blk>h2::before{content:attr(data-n);position:absolute;left:0;top:-22px;font-size:.72rem;font-weight:800;
  letter-spacing:.2em;color:var(--brand);opacity:.9}
.blk[data-n]>h2::before{content:attr(data-n)}
@media (min-width:1100px){
  .blk{padding-left:62px}
  .blk::before{content:attr(data-n);position:absolute;left:0;top:10px;font-size:.72rem;font-weight:800;
    letter-spacing:.18em;color:var(--brand)}
  .blk::after{content:"";position:absolute;left:3px;top:32px;bottom:6px;width:1px;background:var(--line)}
  .blk>h2::before{display:none}
}
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="rise"]{transform:translateY(28px);transition-duration:.7s}
[data-reveal="rise"].is-in{transform:none}
html.no-js [data-reveal],html:not(.js-reveal) [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{transform:none;transition:opacity .01s}}

/* news list and post pages */
.post-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.post-grid{grid-template-columns:repeat(3,1fr);gap:26px}}
.post-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column}
.post-card__img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--stone)}
.post-card__img img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:20px}
.post-card__meta,.post__meta{font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
.post-card h3{margin:0;font-size:1.12rem;line-height:1.3}
.post-card h3 a{color:var(--ink);text-decoration:none;display:inline-block;padding:8px 0;min-height:40px}
.post-card h3 a:hover{color:var(--brand)}
.post-card__body p{margin:10px 0 0;color:var(--muted);font-size:.98rem}
/* the contact page's own links are thumb targets on a phone, not body text */
@media (max-width:759px){
  .contact__side a,.contact__line a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
  .contact__side address a{min-height:40px}
}

/* ---- mega menu -----------------------------------------------------------------------------
   The panel is anchored to the NAV CONTAINER, never to the item, or it runs off the side of a
   narrow desktop (that bug cost us the 901 to 1366px range on trulata.com). It overlaps the
   header by 10px so the diagonal from the label to the panel never crosses dead space; a
   ::before bridge does not work once the panel scrolls. Below the nav's OWN burger breakpoint
   (1079px) the panel is not a panel at all: it stacks inside the open menu. Those two numbers
   must stay in step, or a panel floats over a menu that is not there.
   The panel sits in the CONTAINER's positioning context (so it can never run off the side) but its
   left is set per item, in script, so it hangs under its own label. */
.nav__inner{position:relative}
.nav__links{align-items:center}
.nav__item{position:relative}
.nav__item--has-menu{position:static}
.nav__top{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font:inherit;font-weight:700;color:inherit;padding:14px 0;line-height:1}
/* the open item takes the CONTRAST-DERIVED link color, never the raw brand: a brand red on the
   nav measured 1.81 against a 4.5 floor. On a dark or brand nav the same job is --brand-lt. */
.nav__top:hover,.nav__item.is-open .nav__top{color:var(--link)}
.tone--dark .nav__top:hover,.tone--dark .nav__item.is-open .nav__top,
.tone--brand .nav__top:hover,.tone--brand .nav__item.is-open .nav__top{color:var(--brand-lt)}
.nav__caret{transition:transform .18s ease}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}
.mega{display:none}
@media (min-width:1080px){
  .mega{display:block;position:absolute;left:0;top:calc(100% - 10px);z-index:60;
    width:max-content;max-width:100%;opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s}
  .nav__item.is-open .mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .mega__inner{padding:26px 28px 24px;margin-top:10px;
    background:var(--surface-d);color:#fff;border:1px solid rgba(255,255,255,.12);
    border-radius:16px;box-shadow:0 26px 60px rgba(0,0,0,.45);
    max-height:calc(100vh - 110px);overflow-y:auto;position:relative}
  /* the seam: the panel reads as the enclosure door opening, like the hero */
  .mega__inner::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--brand),transparent)}
  .mega__row{display:flex;flex-wrap:nowrap;gap:34px;align-items:flex-start}
  .mega__cols{display:flex;gap:34px;flex-wrap:nowrap}
  .mega__col{width:238px;flex:none}
  .mega__feature{width:250px;flex:none}
}
.mega__note{margin:0 0 18px;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-lt)}
.mega__h{margin:0 0 12px;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.mega__col ul,.mega__cols ul{list-style:none;margin:0;padding:0}
.mega__col li+li{margin-top:4px}
.mega__col a{display:block;padding:10px 12px;margin-left:-12px;border-radius:10px;text-decoration:none;
  color:#fff;position:relative}
.mega__col a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:transparent;
  border-radius:2px;transition:background .16s ease,top .16s ease,bottom .16s ease}
.mega__col a:hover,.mega__col a:focus-visible{background:rgba(255,255,255,.06)}
.mega__col a:hover::before,.mega__col a:focus-visible::before{background:var(--brand);top:8px;bottom:8px}
.mega__label{display:block;font-weight:700}
.mega__line{display:block;font-size:.88rem;color:rgba(255,255,255,.66);margin-top:3px;line-height:1.35}
.mega__feature{display:block;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04)}
.mega__feature:hover{border-color:var(--brand)}
.mega__feature-img{display:block;aspect-ratio:16/9;overflow:hidden}
.mega__feature-img img{width:100%;height:100%;object-fit:cover}
.mega__feature-body{display:block;padding:16px 18px 18px}
.mega__feature-h{display:block;font-weight:800;font-size:1.02rem}
.mega__feature-cta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-weight:800;
  font-size:.92rem;color:var(--brand-lt)}
/* below the nav's own burger breakpoint the panel is part of the menu, not a layer over it */
@media (max-width:1079px){
  .nav.js .mega{display:none;padding:2px 0 10px}
  .nav.js .nav__item.is-open .mega{display:block}
  .nav.js .mega__inner{display:block}
  .nav.js .mega__cols{display:block}
  .nav.js .mega__col+.mega__col{margin-top:16px}
  .nav.js .mega__col a{padding:12px 10px;margin-left:-10px;min-height:44px}
  .nav.js .mega__feature{margin-top:14px;display:block}
  .nav.js .mega__feature-img{width:100%;aspect-ratio:16/9}
  .nav.js .mega__feature-body{padding:14px 16px 16px}
  /* the menu is a list on a phone, so every row starts at the same left edge */
  .nav.js .nav__links,.nav.js .nav__links li,.nav.js .nav__top{text-align:left}
  .nav.js .mega__note,.nav.js .mega__h{font-size:.82rem;letter-spacing:.12em}
  .nav.js .nav__links a{display:block}
  .nav:not(.js) .mega{display:block}
  .nav__top{width:100%;justify-content:space-between;padding:12px 0;min-height:44px}
  /* Folded into the menu, the panel sits on the MENU's background, not on the dark panel of the
     desktop layer, so its words take the menu's own ink. White on white is invisible. */
  .nav.js .mega__col a,.nav.js .mega__feature,.nav.js .mega__feature-h{color:var(--ink)}
  .nav.js .mega__line,.nav.js .mega__h,.nav.js .mega__note{color:var(--muted)}
  .nav.js .mega__feature{border-color:var(--line);background:transparent}
  .nav.js .mega__feature-cta{color:var(--link)}
  .nav.js .mega__col a:hover,.nav.js .mega__col a:focus-visible{background:var(--stone)}
  .nav.js .nav__links a,.nav.js .mega__col a{text-align:left}
  .nav.tone--dark.js .mega__col a,.nav.tone--brand.js .mega__col a,
  .nav.tone--dark.js .mega__feature-h,.nav.tone--brand.js .mega__feature-h{color:inherit}
}

/* every link a thumb has to hit is a tap target: 44px high at the least (the mobile gate, 2026-09-23) */
.linklist a,.loc__links a{display:inline-flex;align-items:center;min-height:44px}

/* a block's own look, from Site builder block settings (layout.block_style) */
.band.tone--tint,.band.tone--dark,.band.tone--brand,.band.band--photo{background:var(--paper);color:var(--ink)}
.band.band--photo{background:linear-gradient(rgba(12,14,18,.64),rgba(12,14,18,.64)),var(--band-img) var(--band-pos,center)/cover no-repeat}
.band.sp--compact{padding:var(--s4) 0}
.band.sp--roomy{padding:calc(var(--s7) * 1.45) 0}
.band.al--center .wrap{text-align:center}
.band.al--center .head,.band.al--center .lede,.band.al--center .prose,.band.al--center p{margin-left:auto;margin-right:auto}
.band.al--center .btns,.band.al--center .cta__row,.band.al--center .checks,.band.al--center .tiles{justify-content:center}
.band.al--center .eyebrow{justify-content:center}
/* a centered block is one column: a two-column split centered reads as two ragged halves */
.band.al--center .split{grid-template-columns:minmax(0,1fr);max-width:780px;margin-left:auto;margin-right:auto}
.band.al--center ul,.band.al--center ol{display:inline-block;text-align:left;margin-left:auto;margin-right:auto}
.band.al--center .faqs,.band.al--center form{text-align:left}
.band.ts--small{--head-scale:.9;font-size:.94rem}
.band.ts--large{--head-scale:1.12;font-size:1.16rem}
.band.ts--small p,.band.ts--small li,.band.ts--large p,.band.ts--large li{font-size:inherit}
.band.ts--small .lede,.band.ts--large .lede{font-size:1.16em}   /* the intro keeps its lead over the words below it */

/* gallery layouts (gap sheet #11): slideshow one photo at a time, carousel a row that scrolls sideways */
.gal{position:relative}
.tiles--slides,.tiles--carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tiles--slides::-webkit-scrollbar,.tiles--carousel::-webkit-scrollbar{display:none}
.tiles--slides .tile{flex:0 0 100%;scroll-snap-align:center;margin:0}
.tiles--slides .tile img{width:100%;height:min(68vh,640px);object-fit:cover;border-radius:var(--r,14px)}
.tiles--carousel .tile{flex:0 0 min(78%,380px);scroll-snap-align:start;margin:0}
.tiles--carousel .tile img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r,14px)}
.gal__nav{display:flex;justify-content:flex-end;gap:8px;margin:0 0 12px}
.gal__nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.gal__nav button:hover{background:var(--stone)}
.lbox{padding:0;border:0;background:rgba(10,12,16,.94);color:#fff;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.lbox::backdrop{background:rgba(10,12,16,.94)}
.lbox figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 64px}
.lbox img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:8px}
.lbox figcaption{color:rgba(255,255,255,.86);font-size:15px;text-align:center}
.lbox button{position:absolute;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lbox__x{top:14px;right:14px}.lbox__p{left:12px;top:50%;transform:translateY(-50%)}.lbox__n{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lbox figure{padding:56px 12px}.lbox__p,.lbox__n{top:auto;bottom:18px;transform:none}}
/* a block shown only on computers or only on phones (gap sheet #12) */
@media (max-width:759px){.only--desktop{display:none!important}}
@media (min-width:760px){.only--mobile{display:none!important}}
.wnews{margin-top:18px}
.wnews__row{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.wnews__row input{flex:1 1 240px;min-height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--btn-r,999px);font:inherit;background:var(--paper);color:var(--ink)}
.wembed{position:relative}
.wembed iframe{display:block;width:100%;height:160px;border:0;background:transparent}
.wembed__edit{display:none}
html[data-builder] .wembed__edit{display:inline-flex;position:absolute;top:8px;right:8px;z-index:2;padding:8px 14px;border-radius:999px;border:0;background:#1d2130;color:#fff;font:600 14px/1.2 system-ui,sans-serif;cursor:pointer}
html[data-builder] .wembed--empty .wembed__edit{position:static;background:none;color:inherit;text-decoration:underline;font-size:16px}
.band.band--bgvid{position:relative;overflow:hidden;background:#15171c}
.band__vid{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.band__vid iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;transform:translate(-50%,-50%)}
.band--bgvid::after{content:"";position:absolute;inset:0;z-index:0;background:rgba(12,14,18,.62);pointer-events:none}
.band--bgvid>.wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.band__vid{display:none}}
.band.wd--narrow>.wrap{max-width:780px}
.band.wd--wide>.wrap{max-width:1440px}
.band.wd--full>.wrap{max-width:none}