/* GENERATED by build.py from the <style> block in template.html. Do not edit. */
/* ============================================================
   MACAWORKS MASONRY
   Official brand palette, Bananas Creative 2026 brand kit:
   navy #001377, scarlet #FF2400, yellow #FFDD00, gold #D8B400,
   teal #00C990, white. Macaw mascot and M crest icon.
   RCLBricko display + UltraTall label fonts. Slogan: Fly above ordinary masonry.
   ============================================================ */

/* block, not swap, so the fallback never flashes. Block does not stop layout shift on its own: invisible
   text is still laid out in the fallback's metrics. The hero H1 is protected by fixed line breaks instead. */
@font-face{font-family:'Bricko';src:url(/assets/fonts/rclbricko-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'UltraTall';src:url(/assets/fonts/ultratall-bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}

:root{
  --ink:#050A24;
  --ink-2:#08103A;
  --ink-3:#0C1750;
  --navy:#001377;
  --red:#FF2400;
  --red-deep:#DE000F;
  --gold:#FFDD00;
  --gold-deep:#D8B400;
  --teal:#00C990;
  --paper:#F2F5FF;
  --muted:#9BA6D4;
  --soft:#C9D1F2;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.20);
  --r:12px;
  --shell:min(1320px, 100% - 3rem);
  --nav-h:88px;
  --display:'Bricko', 'Arial Black', sans-serif;
  --label:'UltraTall', 'Arial Narrow', sans-serif;
  --body:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto;display:block}
html,body{overflow-x:clip}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.015em}
p{margin:0}

.shell{width:var(--shell);margin-inline:auto}
.eyebrow{
  font-family:var(--label);font-size:.86rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.1rem;
}
.lede{color:var(--muted);font-size:1.06rem;max-width:62ch}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* focus */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:4px;
}

/*  cursor  */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;
  will-change:transform;mix-blend-mode:normal}
.cur-dot{width:6px;height:6px;background:var(--gold);margin:-3px 0 0 -3px}
.cur-ring{width:34px;height:34px;border:1.5px solid rgba(255,221,0,.75);margin:-17px 0 0 -17px;
  transition:width .22s cubic-bezier(.16,1,.3,1),height .22s cubic-bezier(.16,1,.3,1),
             margin .22s cubic-bezier(.16,1,.3,1),border-color .22s,background-color .22s}
.cur-ring::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border-top:1.5px solid rgba(255,36,0,.55);border-bottom:1.5px solid rgba(255,36,0,.55);
  border-left:1.5px solid transparent;border-right:1.5px solid transparent;opacity:0;transition:opacity .22s}
body.cur-hot .cur-ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--gold);background:rgba(255,221,0,.10)}
body.cur-hot .cur-ring::after{opacity:1}
@media (hover:none),(pointer:coarse){.cur-dot,.cur-ring{display:none}}

/*  preloader  */
#boot{position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:grid;place-items:center;transition:transform .55s cubic-bezier(.76,0,.24,1),opacity .35s ease .2s}
#boot.done{transform:translateY(-101%);opacity:0;pointer-events:none}
#boot::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 40%, rgba(0,19,119,.75), transparent 70%)}
.boot-in{position:relative;text-align:center;width:min(430px,80vw)}
.boot-logo{width:100%;height:auto;opacity:0;transform:scale(.92) translateY(10px);
  animation:bootLogo .9s cubic-bezier(.16,1,.3,1) .12s forwards;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
@keyframes bootLogo{to{opacity:1;transform:none}}
.boot-bar{margin-top:2rem;height:6px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;
  border:1px solid rgba(255,255,255,.08)}
.boot-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--red-deep),var(--red) 55%,var(--gold));
  transition:width .28s cubic-bezier(.16,1,.3,1)}
.boot-meta{margin-top:.85rem;display:flex;justify-content:space-between;
  font-family:var(--label);font-size:.76rem;letter-spacing:.2em;color:rgba(255,255,255,.45)}
.boot-bird{position:absolute;left:50%;bottom:-142px;width:118px;translate:-50% 0;opacity:0;
  animation:bootBird 1s cubic-bezier(.16,1,.3,1) .5s forwards}
@keyframes bootBird{from{opacity:0;transform:translateY(22px) rotate(-8deg)}to{opacity:.95;transform:none}}

/*  reveal  */
[data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity .82s cubic-bezier(.16,1,.3,1),transform .82s cubic-bezier(.16,1,.3,1)}
[data-rise].in{opacity:1;transform:none}
[data-rise="left"]{transform:translateX(-30px)}
[data-rise="right"]{transform:translateX(30px)}
[data-rise="scale"]{transform:scale(.955)}
.stagger>*{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.02s}
.stagger.in>*:nth-child(2){transition-delay:.10s}
.stagger.in>*:nth-child(3){transition-delay:.18s}
.stagger.in>*:nth-child(4){transition-delay:.26s}
.stagger.in>*:nth-child(5){transition-delay:.34s}
.stagger.in>*:nth-child(6){transition-delay:.42s}
.stagger.in>*:nth-child(7){transition-delay:.50s}
.stagger.in>*:nth-child(8){transition-delay:.58s}
.stagger.in>*:nth-child(9){transition-delay:.66s}
.stagger.in>*:nth-child(n+10){transition-delay:.72s}

/* word by word headline */
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:top}
.wsplit .w i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.wsplit.in .w i{transform:none}

/* photos fade in, no curtain */
.ph{position:relative;overflow:hidden;background:var(--ink-2)}
.ph img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .75s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.ph img.ready{opacity:1}

/*  buttons  */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--label);font-size:1.02rem;letter-spacing:.055em;text-transform:uppercase;
  padding:.95rem 1.7rem;border-radius:var(--r);border:3px solid var(--gold);
  background:var(--red-deep);color:#fff;white-space:nowrap;cursor:pointer;
  transition:transform .28s cubic-bezier(.16,1,.3,1),background-color .28s,box-shadow .28s;
  box-shadow:0 10px 26px -14px rgba(255,36,0,.9);will-change:transform;
}
.btn:hover{background:var(--red);box-shadow:0 16px 34px -14px rgba(255,36,0,1)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--paper);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);background:rgba(255,221,0,.08)}
.btn svg{width:17px;height:17px;flex:none}

/*  nav  */
.nav{position:fixed;inset:0 0 auto;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;transition:height .3s ease,background-color .3s ease,box-shadow .3s ease,border-color .3s;
  border-bottom:1px solid transparent}
.nav::before{content:"";position:absolute;inset:0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(5,10,36,0);transition:background-color .3s ease;z-index:-1}
.nav.stuck{height:72px;border-bottom-color:var(--line)}
.nav.stuck::before{background:rgba(5,10,36,.88)}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:var(--shell)}
.brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.brand img{height:68px;width:auto;max-width:none;flex:none;object-fit:contain;aspect-ratio:1600/730;transition:height .3s ease}
.nav.stuck .brand img{height:54px}
.nav-links{display:flex;align-items:center;gap:1.9rem;font-family:var(--label);
  font-size:.94rem;letter-spacing:.09em;text-transform:uppercase}
.nav-links a{position:relative;padding:.3rem 0;color:rgba(242,245,255,.85);transition:color .22s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);
  transition:right .32s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:.9rem}
.nav-tel{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--label);font-size:1.5rem;letter-spacing:.04em;
  color:var(--gold);white-space:nowrap;line-height:1;transition:color .22s}
.nav-tel:hover{color:#fff}
.nav-tel svg{width:.82em;height:.82em;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.nav-cta .btn{font-size:.82rem;padding:.62rem 1.05rem;border-width:2px;gap:.45rem}
.burger{display:none;width:46px;height:40px;border:1px solid var(--line-2);border-radius:var(--r);
  background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:22px;height:2px;background:var(--paper);border-radius:2px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:880;background:var(--ink);
  padding:calc(var(--nav-h) + 2rem) 0 3rem;display:none;overflow-y:auto}
.drawer.on{display:block;animation:drawerIn .38s cubic-bezier(.16,1,.3,1)}
@keyframes drawerIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.drawer a{display:block;font-family:var(--display);font-size:2rem;padding:.55rem 0;
  border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:1.6rem;width:100%;justify-content:center}
/* .drawer a out-specifies .btn, so the CTA got the 2rem display face and a 1px line border and ran off a phone */
.drawer a.btn{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--label);font-size:1.02rem;padding:.95rem 1.7rem;border:3px solid var(--gold)}

/*  nav dropdowns (desktop). Hover binds to .dd, which wraps the label and the panel. The panel's own
    padding-top makes the visual gap, so the hover box stays contiguous and never drops mid-travel.
    Closing waits 150ms so a diagonal path to the panel does not dismiss it.  */
.dd{position:relative}
.nav-links .dd-top{display:inline-flex;align-items:center;gap:.4rem}
.dd-top svg{width:.72em;height:.72em;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;transition:transform .25s ease}
.dd-panel{position:absolute;top:100%;left:-1.1rem;padding-top:1.15rem;min-width:280px;z-index:2;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease .15s,transform .18s ease .15s,visibility 0s linear .33s}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s ease,transform .18s ease,visibility 0s}
.dd:hover .dd-top svg,.dd:focus-within .dd-top svg{transform:rotate(180deg)}
.dd.shut .dd-panel{opacity:0;visibility:hidden;transition:none}
.dd-panel ul{list-style:none;margin:0;padding:.5rem;background:var(--ink);border:1px solid var(--line-2);
  border-top:3px solid var(--gold);border-radius:var(--r);box-shadow:0 26px 50px -22px rgba(0,0,0,.85)}
.nav-links .dd-panel a{display:block;padding:.72rem .9rem;border-radius:8px;font-size:.9rem;letter-spacing:.07em;
  white-space:nowrap;color:var(--paper)}
.nav-links .dd-panel a::after{display:none}
.nav-links .dd-panel a:hover,.nav-links .dd-panel a:focus-visible{background:rgba(255,221,0,.09);color:var(--gold)}
.nav-links .dd-panel a[aria-current="page"]{color:var(--gold)}
.dd-panel li.dd-last{margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--line)}
.dd-all strong{font-family:var(--display);font-weight:700;letter-spacing:.02em;font-size:1.02rem;color:var(--gold)}

/*  drawer sub-lists (mobile): tap to expand, still nested under their parent  */
.dr-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 0;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:2rem;line-height:1.62;color:var(--paper)}
.dr-toggle .pm{width:34px;height:34px;flex:none;border:1px solid var(--line-2);border-radius:var(--r);position:relative}
.dr-toggle .pm::before,.dr-toggle .pm::after{content:"";position:absolute;inset:50% 9px auto;height:2px;background:var(--gold);
  translate:0 -50%;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.dr-toggle .pm::after{transform:rotate(90deg)}
.dr-group.open .dr-toggle .pm::after{transform:rotate(0)}
/* slides open on max-height; padding and the border collapse with it so a closed list leaks nothing */
.dr-sub{max-height:0;overflow:hidden;visibility:hidden;padding:0 0 0 1rem;border-bottom:0 solid var(--line);
  transition:max-height .35s ease,padding .35s ease,visibility 0s linear .35s}
.dr-group.open .dr-sub{max-height:900px;visibility:visible;padding:.35rem 0 .8rem 1rem;border-bottom-width:1px;
  transition:max-height .35s ease,padding .35s ease,visibility 0s}
.drawer .dr-sub a{font-family:var(--label);font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.62rem 0;border-bottom:0;color:var(--muted)}
@media (hover:hover){.drawer .dr-sub a:hover{color:var(--gold)}}
.drawer a[aria-current="page"]{color:var(--gold);box-shadow:inset 3px 0 0 var(--gold);padding-left:.8rem}
.dr-group.dr-current .dr-toggle{color:var(--gold)}
.drawer .dr-sub .dd-all strong{font-size:1.35rem}

/*  hero  */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 1.6rem) 0 clamp(2.4rem,5vw,4rem);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-12% 0 -12%;z-index:-3;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.66}
.hero-scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, rgba(5,10,36,.90) 0%, rgba(5,10,36,.40) 36%, rgba(5,10,36,.82) 76%, var(--ink) 100%),
    linear-gradient(96deg, rgba(0,19,119,.80) 0%, rgba(0,19,119,.14) 60%, transparent 80%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);gap:2rem;align-items:center}
.hero h1{font-size:clamp(3rem,6.9vw,5.9rem);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--gold)}
/* Fixed line breaks make the H1 the same height in the brand face and in its fallback. With free wrapping
   the wider fallback laid the H1 out on four lines before Bricko decoded and re-wrapped it to three, and
   the centred hero jumped on every cold load (PSI CLS up to 0.28). Below 370px the lines do not fit. */
@media (min-width:370px){ .hero h1 .ln{display:block;white-space:nowrap} }
.hero-sub{margin-top:1.6rem;font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:48ch;color:#D5DCFA}
.hero-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.hero-tel{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);line-height:1;
  font-size:clamp(2rem,3.4vw,2.9rem);color:#fff;white-space:nowrap;transition:color .22s}
.hero-tel:hover{color:var(--gold)}
.hero-tel svg{width:.72em;height:.72em;flex:none;fill:none;stroke:var(--gold);stroke-width:2}
.hero-bird{width:min(430px,34vw);margin-left:auto;filter:drop-shadow(0 26px 50px rgba(0,0,0,.6));
  animation:float 7s ease-in-out infinite;transform-origin:60% 40%}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(1.6deg)}}

/*  trust strip  */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:1.9rem 1.4rem;border-right:1px solid var(--line)}
.trust-item:last-child{border-right:0}
.trust-k{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.3rem);color:#fff;display:flex;align-items:center;gap:.5rem}
.trust-v{margin-top:.35rem;font-family:var(--label);font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:17px;height:17px;fill:var(--gold)}

/*  marquee  */
.mq{background:var(--red-deep);border-block:3px solid var(--gold);overflow:hidden;padding:.85rem 0}
.mq-track{display:flex;width:max-content;animation:mqRun 34s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-half{display:flex;align-items:center;flex:none}
.mq-half span{font-family:var(--label);font-size:clamp(1.1rem,2.2vw,1.7rem);letter-spacing:.09em;
  text-transform:uppercase;color:#fff;padding:0 1.15rem;white-space:nowrap}
.mq-half b{width:9px;height:9px;background:var(--gold);rotate:45deg;flex:none}
@keyframes mqRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/*  sections  */
.sec{padding:clamp(4.5rem,9vw,8.5rem) 0;position:relative}
.sec-head{max-width:100%}
.sec-head h2{font-size:clamp(2.05rem,4vw,3.35rem);max-width:21ch}
.sec-head p{margin-top:1.15rem;max-width:62ch}

/*  services bento  */
.bento{margin-top:3.2rem;display:grid;gap:14px;
  grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(210px,auto)}
.card{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s}
.card:hover{transform:translateY(-6px);border-color:rgba(255,221,0,.5)}
.card .ph{position:absolute;inset:0;z-index:-2}
.card .ph img{transition:opacity .75s ease, transform 1.1s cubic-bezier(.16,1,.3,1)}
.card:hover .ph img{transform:scale(1.06)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(178deg, rgba(5,10,36,.18) 0%, rgba(5,10,36,.72) 52%, rgba(5,10,36,.94) 100%)}
.card-in{padding:1.5rem 1.5rem 1.45rem}
.card h3{font-size:clamp(1.35rem,2vw,1.85rem)}
.card p{margin-top:.55rem;color:#C3CBEF;font-size:.96rem;max-width:44ch}
.card .tag{position:absolute;top:1.1rem;left:1.5rem;font-family:var(--label);font-size:.76rem;
  letter-spacing:.18em;color:var(--ink);background:var(--teal);border-radius:99px;padding:.34rem .8rem}
.c-lg{grid-column:span 2;grid-row:span 2;min-height:480px}
.c-lg h3{font-size:clamp(1.9rem,3.2vw,2.9rem)}

.chips{margin-top:2.4rem;display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.6rem;
  scroll-snap-type:x proximity;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.chips::-webkit-scrollbar{display:none}
.chips li{scroll-snap-align:start;flex:none;list-style:none;
  border:1px solid var(--line-2);border-radius:var(--r);padding:.6rem 1.05rem;
  font-family:var(--label);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
  color:#CBD3F4;transition:border-color .3s,color .3s,transform .3s}
.chips li:hover{border-color:var(--gold);color:#fff;transform:translateY(-3px)}

/*  craft split  */
.craft{background:var(--ink-2);border-block:1px solid var(--line)}
.craft-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.craft-reel{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:9/16;border-radius:calc(var(--r) + 6px);
  overflow:hidden;background:var(--ink) center/cover no-repeat;border:1px solid var(--line-2);box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
.craft-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel-tag{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem;border-radius:999px;background:rgba(5,10,36,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--body);font-weight:600;font-size:.84rem;color:#fff;border:1px solid rgba(255,255,255,.18);transition:background-color .3s}
.reel-tag:hover{background:rgba(5,10,36,.85)}
.reel-play{position:absolute;inset:0;margin:auto;z-index:2;width:78px;height:78px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(5,10,36,.55);border:2px solid var(--gold);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.reel-play[hidden]{display:none}
.reel-play svg{width:34px;height:34px;fill:var(--gold);margin-left:4px}
.reel-tag svg,.ig-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.pts{margin-top:2rem;display:grid;gap:1.35rem}
.pt{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.pt-i{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;flex:none;
  background:rgba(255,36,0,.14);border:1px solid rgba(255,36,0,.4)}
.pt-i svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.8}
.pt h4{font-family:var(--body);font-weight:700;text-transform:none;font-size:1.06rem;letter-spacing:0;line-height:1.4}
.pt p{color:var(--muted);font-size:.97rem;margin-top:.18rem}

/*  process  */
.proc{position:relative;overflow:hidden}
.proc-bg{position:absolute;inset:0;z-index:-2}
.proc-bg img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.proc-bg img.ready{opacity:.18}
.proc::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(0,19,119,.5) 50%,var(--ink) 100%)}
.steps{margin-top:3.2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--gold)}
.step{padding:2.1rem 1.6rem 1.6rem;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step::before{content:"";position:absolute;top:-2px;left:0;width:11px;height:11px;background:var(--gold);
  transform:translateY(-50%) rotate(45deg)}
.step-n{font-family:var(--label);font-size:3.1rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,221,0,.55);display:block;margin-bottom:.9rem}
.step h3{font-size:1.4rem}
.step p{margin-top:.6rem;color:var(--muted);font-size:.95rem}

/*  instagram  */
.ig .sec-head{text-align:center;margin-inline:auto}
.ig .sec-head h2{margin-inline:auto}
.ig .sec-head p{margin-inline:auto}
.ig-profile{display:flex;align-items:center;gap:20px;max-width:580px;margin:2.4rem auto 0;padding:20px 24px;
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:20px;box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
.ig-profile .ava{width:72px;height:72px;border-radius:50%;flex:none;padding:3px;background:linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045)}
.ig-profile .ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--ink-2);background:var(--ink-2)}
.ig-profile .meta{flex:1;min-width:0}
.ig-profile .handle{font-family:var(--body);font-weight:700;font-size:1.12rem;color:var(--paper);display:flex;align-items:center;gap:7px}
.ig-profile .handle .ig-ico{width:18px;height:18px;color:var(--gold)}
.ig-profile .bio{color:var(--muted);font-size:.92rem;margin-top:3px}
/* no border: .btn's transparent 3px border let the gradient tile inside it, a square panel framed by a pill */
.btn-ig{border-radius:999px;border:0;padding:calc(.95rem + 3px) calc(1.7rem + 3px);background:linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045) border-box;color:#fff;box-shadow:0 10px 26px -14px rgba(225,48,108,.9)}
.btn-ig:hover{background:linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045) border-box;filter:brightness(1.06);box-shadow:0 16px 34px -12px rgba(225,48,108,.7)}
.btn-ig .ig-ico{width:18px;height:18px}
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:2.75rem}
.ig-grid a{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;border:1px solid var(--line)}
.ig-grid .ph{position:absolute;inset:0;border-radius:inherit}
.ig-grid .ph img{transition:opacity .75s ease, transform .6s ease}
.ig-grid a:hover .ph img{transform:scale(1.08)}
.ig-grid a::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(131,58,180,0),rgba(225,48,108,0));transition:background .3s}
.ig-grid a:hover::after{background:linear-gradient(135deg,rgba(131,58,180,.55),rgba(225,48,108,.55))}
.ig-grid .ig-hov{position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:2;color:#fff;transition:.3s}
.ig-grid a:hover .ig-hov{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ig-grid .ig-reel{position:absolute;top:10px;right:10px;width:20px;height:20px;z-index:2;color:#fff;fill:none;stroke:currentColor;stroke-width:2;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ig-more{text-align:center;margin-top:2.6rem}

/*  reviews  */
.rev-car{margin-top:3rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"prev view next" ". dots .";align-items:center;gap:1.4rem 18px}
#revPrev{grid-area:prev}#revNext{grid-area:next}
.rev-view{grid-area:view;overflow:hidden;padding:8px 2px;margin:-8px -2px;touch-action:pan-y}
.rev-track{--per:3;display:flex;gap:14px;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.rev-track>.rev{flex:0 0 calc((100% - (var(--per) - 1) * 14px) / var(--per));min-width:0}
.rev-arrow{width:54px;height:54px;border-radius:var(--r);border:1px solid var(--line-2);background:transparent;
  cursor:pointer;display:grid;place-items:center;transition:border-color .3s,background-color .3s,transform .3s}
.rev-arrow:hover{border-color:var(--gold);background:rgba(255,221,0,.08)}
.rev-arrow:active{transform:scale(.94)}
.rev-arrow svg{width:22px;height:22px;stroke:var(--paper);fill:none;stroke-width:2}
.rev-dots{grid-area:dots;display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem}
.rev-dots button{width:34px;height:4px;padding:0;border:0;border-radius:2px;background:var(--line-2);cursor:pointer;
  position:relative;transition:background-color .3s,width .3s}
.rev-dots button::before{content:"";position:absolute;inset:-10px 0}
.rev-dots button[aria-current="true"]{background:var(--gold);width:54px}
.rev-count{grid-area:dots;display:none;justify-self:center;margin:0;font-family:var(--label);font-size:.95rem;
  letter-spacing:.16em;color:var(--muted)}
.rev-count b{color:var(--gold);font-weight:400}
.rev{border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.7rem;background:var(--ink-2);
  display:flex;flex-direction:column;gap:1.1rem;transition:border-color .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.rev:hover{border-color:rgba(255,221,0,.45);transform:translateY(-5px)}
.rev q{quotes:"\201C" "\201D";font-size:1.02rem;line-height:1.62;color:#E4E9FF;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.rev.open q{display:block;-webkit-line-clamp:unset}
.rev-more{align-self:flex-start;margin-top:-.4rem;padding:0;border:0;background:none;cursor:pointer;color:var(--gold);
  font-family:var(--label);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.rev-more:hover{color:#fff}
.rev-by{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:.4rem;border-top:1px solid var(--line)}
.avi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--navy);border:2px solid var(--gold);font-family:var(--label);font-size:1rem;color:var(--gold)}
.rev-by span{display:block;font-weight:600;font-size:.98rem}
.rev-by small{color:var(--muted);font-size:.85rem}

/*  areas  */
.areas{background:var(--ink-2);border-block:1px solid var(--line)}
.area-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:center}
/* The My Maps embed has a 58px title bar that cannot be switched off. The iframe is pulled up under the
   clip to hide it, and the Terms strip at the bottom stays visible. Zoom 9 on ll= is the whole-step zoom
   that still fits every pin (fractional z rounds down to 8). Every pin needs about 560px of height at that
   zoom, so the box is square beside the copy and has a 560px floor once it stacks. */
.area-map{position:relative;border-radius:var(--r);border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden;background:var(--ink)}
.area-map iframe{position:absolute;left:0;top:-58px;display:block;width:100%;height:calc(100% + 58px);border:0}
.area-top{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.area-core{padding:1.5rem 1.6rem;border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(150deg, rgba(0,19,119,.62), rgba(5,10,36,.30));
  border-top:3px solid var(--teal)}
.area-core{display:flex;flex-direction:column}
.area-core b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);
  text-transform:uppercase;line-height:.95;letter-spacing:-.015em;min-height:2lh}
.area-core span{display:block;margin-top:.5rem;color:#C3CBEF;font-size:.95rem}
.area-more{margin-top:2.6rem;font-family:var(--label);font-size:.86rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.area-cols{margin-top:1.2rem}
.area-cols ul{margin:0;padding:0;list-style:none;columns:3;column-gap:2.5rem}
.area-cols li{padding:.72rem 0;border-bottom:1px solid var(--line);font-family:var(--label);break-inside:avoid;
  font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;color:#CBD3F4;
  display:flex;align-items:center;gap:.6rem;transition:color .25s,padding-left .25s}
.area-cols li::before{content:"";width:6px;height:6px;background:var(--red);rotate:45deg;flex:none;
  transition:background-color .25s}
.area-cols li:hover{color:#fff;padding-left:.35rem}
.area-cols li:hover::before{background:var(--gold)}
.area-note{margin-top:2.4rem;padding:1.5rem 1.7rem;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--r);background:rgba(0,19,119,.32);color:#D3DAFB;max-width:80ch}

/*  faq  */
.faq-list{margin-top:2.8rem;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.55rem 0;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(1.05rem,1.8vw,1.42rem);
  color:var(--paper);transition:color .25s}
.qa button:hover{color:var(--gold)}
.qa .pm{width:34px;height:34px;flex:none;border:1px solid var(--line-2);border-radius:var(--r);position:relative;
  transition:border-color .3s,background-color .3s}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;inset:50% 9px auto;height:2px;background:var(--gold);
  translate:0 -50%;transition:transform .34s cubic-bezier(.16,1,.3,1)}
.qa .pm::after{transform:rotate(90deg)}
.qa[open] .pm{background:rgba(255,221,0,.12);border-color:var(--gold)}
.qa[open] .pm::after{transform:rotate(0)}
.qa .ans{overflow:hidden;height:0;transition:height .42s cubic-bezier(.16,1,.3,1)}
.qa .ans p{padding-bottom:1.65rem;color:var(--muted);max-width:78ch}

/*  quote  */
.quote{position:relative;overflow:hidden}
.q-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.2rem,5vw,4.5rem)}
.q-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);padding:clamp(1.6rem,3vw,2.4rem)}
.field{display:grid;gap:.45rem;margin-bottom:1.05rem}
.field label{font-family:var(--label);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#C6CEF2}
.field input,.field select,.field textarea{
  background:#050B2C;border:1px solid var(--line-2);border-radius:var(--r);padding:.85rem 1rem;
  color:#fff;font-size:1rem;transition:border-color .25s,background-color .25s}
.field textarea{min-height:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7C87B8}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none;background:#071036}
.field .hint{font-size:.84rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.q-panel .btn{width:100%;justify-content:center;margin-top:.5rem}
#quote{scroll-margin-top:calc(var(--nav-h) + 20px)}
.q-err{margin-top:1rem;color:#FFB4A8;font-size:.95rem}
.q-err a{color:var(--gold)}
.q-done{min-height:420px;display:grid;place-content:center;justify-items:center;gap:1.3rem;text-align:center}
.q-done[hidden]{display:none}
.q-done p{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--paper)}
.q-check{width:84px;height:84px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.q-check circle{stroke:var(--teal);stroke-dasharray:151;stroke-dashoffset:151;animation:qDraw .6s cubic-bezier(.65,0,.45,1) forwards}
.q-check path{stroke:var(--gold);stroke-dasharray:36;stroke-dashoffset:36;animation:qDraw .35s cubic-bezier(.65,0,.45,1) .55s forwards}
@keyframes qDraw{to{stroke-dashoffset:0}}
.nap{display:grid;gap:1.5rem;margin-top:2.4rem}
.nap-row{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  padding-top:1.5rem;border-top:1px solid var(--line)}
.nap-row:first-child{border-top:0;padding-top:0}
.nap-row .pt-i svg{stroke:var(--gold)}
.nap-row b{display:block;font-family:var(--label);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:.2rem}
.nap-row a,.nap-row span{font-size:1.12rem;color:#fff}
.nap-row a:hover{color:var(--gold)}

/*  footer  */
.foot{background:var(--ink-2);border-top:1px solid var(--line);padding:clamp(3.5rem,6vw,5rem) 0 2rem;position:relative;overflow:hidden}
.foot-brick{position:absolute;right:-3%;bottom:-4%;width:min(240px,26vw);opacity:.12;pointer-events:none;
  filter:saturate(.65)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.8fr));gap:2.5rem;position:relative}
.foot-logo{height:74px;width:auto;max-width:none;flex:none;object-fit:contain;aspect-ratio:1600/730}
.foot p{margin-top:1.2rem;color:var(--muted);font-size:.97rem;max-width:38ch}
.foot h4{font-family:var(--label);font-size:.86rem;letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase;margin-bottom:1.1rem}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.foot ul a,.foot ul li{color:var(--muted);font-size:.96rem;transition:color .22s}
.foot ul a:hover{color:#fff}
.foot-btm{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);z-index:2;
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  color:#7C87B8;font-size:.88rem;position:relative}

/*  responsive  */
/* Header fit between the burger breakpoint and full desktop: with the Services and Locations dropdowns the
   row is wider than the shell at 901px, and html overflow-x:clip hides the overflow instead of scrolling. */
@media (max-width:1180px){
  .nav .shell{gap:1rem}
  .nav-links{gap:1.2rem;font-size:.88rem}
  .nav-tel{font-size:1.2rem}
  .nav-cta{gap:.7rem}
}
@media (max-width:1040px){
  .nav-cta .btn{display:none}
}
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-bird{width:min(300px,44vw);margin:0 0 0 auto}
  .craft-grid{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .q-grid{grid-template-columns:1fr}
  .area-cols ul{columns:3}
  .area-head{grid-template-columns:1fr}
  .area-map{aspect-ratio:auto;height:clamp(560px,68vw,720px)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2.2rem}
}
@media (max-width:900px){
  :root{--shell:min(1320px, 100% - 2.2rem)}
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .nav-tel{font-size:1.3rem}
  .burger{display:block}
  .bento{grid-template-columns:1fr 1fr}
  .area-top{grid-template-columns:1fr}
  .c-lg{grid-column:span 2;grid-row:span 1;min-height:340px}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid var(--line)}
  .step:nth-child(2n){border-right:0}
  .rev-track{--per:1}
  .rev-dots button{width:18px}
  .rev-dots button[aria-current="true"]{width:36px}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(2n){border-right:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav-cta{gap:.5rem}
  .nav-tel{font-size:1.12rem;gap:.4rem}
  .burger{width:42px;height:38px}
  .brand img{height:48px}
  .nav.stuck .brand img{height:42px}
  :root{--shell:min(1320px, 100% - 1.7rem);--nav-h:72px}
  /* the hero fills exactly one small viewport (URL bar showing), so nothing below it peeks in on first view.
     The shell stretches to that height and the estimate button is pushed to its bottom (margin-top:auto),
     so it always lands just above the fold and the spare height opens up between the phone and the button. */
  .hero{align-items:stretch;min-height:100vh;min-height:100svh;padding-top:calc(var(--nav-h) + .9rem);padding-bottom:1.1rem}
  .hero>.shell{display:flex;flex-direction:column}
  .hero-grid{flex:1 1 auto}
  .hero h1{font-size:clamp(2.5rem,10.5vw,3.6rem)}
  .hero-grid{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .hero-grid>div{display:contents}
  .hero-grid .eyebrow{order:1}
  .hero-grid h1{order:2}
  .hero-grid .hero-sub{order:3}
  .hero-grid .hero-bird{order:4}
  .hero-grid .hero-cta{order:5;width:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:flex-start}
  .hero-bird{width:min(230px,58vw,25svh);height:auto;margin:.9rem 0 0 0}
  .hero-sub{margin-top:1.1rem}
  .hero-cta{margin-top:.7rem;gap:.7rem 2rem}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero .hero-cta .btn{flex:0 0 auto;align-self:stretch;margin-top:auto}
  .hero .hero-cta{gap:1.2rem}
  .hero .hero-tel{font-size:1.7rem}
  .hero .hero-cta .btn{font-size:.95rem;padding:.78rem 1.4rem}
  .bento{grid-template-columns:1fr}
  .c-lg{grid-column:span 1;min-height:440px}
  .c-lg .card-in{padding:2rem 1.6rem 1.9rem}
  .area-cols ul{columns:2;column-gap:1.4rem}
  .rev-car{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"view view view" "prev dots next";gap:1.1rem 12px}
  .rev-dots{display:none}
  .rev-count{display:block}
  .rev{padding:1.6rem 1.35rem}
  .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .craft-reel{width:min(100%,360px)}
  .ig-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ig-grid a{border-radius:10px}
  .ig-grid .ig-reel{top:7px;right:7px;width:16px;height:16px}
  .ig-profile{flex-direction:column;text-align:center}
  .ig-profile .handle{justify-content:center}
  .steps{grid-template-columns:1fr}
  .step{border-right:0}
}

/* under 370px the H1 wraps freely onto more lines, so the macaw gives the height back */
@media (max-width:369px){ .hero-bird{width:min(200px,50vw,calc(100svh - 545px))} }
/* short phones (iPhone SE in Safari is about 375x550): keep the estimate button above the fold */
@media (max-width:640px) and (max-height:620px){
  .hero-bird{width:min(110px,calc(100svh - 470px));margin-top:.6rem}
  .hero h1{font-size:2.4rem}
  .hero-sub{font-size:.98rem}
}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-rise],.stagger>*{opacity:1 !important;transform:none !important}
  .wsplit .w i{transform:none !important}
  .ph img,.hero-bg img,.proc-bg img{opacity:1}
  .hero-bg img{opacity:.55}
  .proc-bg img{opacity:.18}
  .cur-dot,.cur-ring{display:none}
}
/*  links on the home page cards: the heading link stretches over the whole card  */
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-link:focus-visible{outline:none}
.card:has(.card-link:focus-visible),.opt:has(.card-link:focus-visible){outline:3px solid var(--gold);outline-offset:3px}
.card-go{display:inline-flex;align-items:center;gap:.55rem;margin-top:.95rem;font-family:var(--label);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.card-go::after{content:"";width:18px;height:2px;background:currentColor;transition:width .32s cubic-bezier(.16,1,.3,1)}
.card:hover .card-go::after{width:32px}
a.area-core{transition:border-color .3s,transform .45s cubic-bezier(.16,1,.3,1)}
a.area-core:hover{border-color:var(--gold);transform:translateY(-4px)}
.area-go{display:block;margin-top:auto;padding-top:1.1rem;font-style:normal;font-family:var(--label);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.foot ul a.foot-all{color:var(--gold)}

/* ============================================================
   INTERIOR PAGES (service and location pages generated by build.py)
   Same tokens, fonts, buttons, cards and section rhythm as the home page.
   Nothing here waits on JavaScript to become visible.
   ============================================================ */
.pg-hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + 2rem) 0 clamp(3rem,6vw,5rem);
  background:radial-gradient(80% 90% at 0% 0%, rgba(0,19,119,.78), transparent 64%), var(--ink)}
.pg-hero::after{content:"";position:absolute;right:-12%;bottom:-40%;width:70%;height:90%;z-index:-1;
  background:radial-gradient(closest-side, rgba(255,36,0,.13), transparent)}
.crumbs{margin-bottom:clamp(1.5rem,3vw,2.3rem)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem .55rem;margin:0;padding:0;list-style:none;
  font-family:var(--label);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.55rem;color:var(--muted)}
.crumbs a{color:var(--paper);transition:color .2s}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--gold)}
.pg-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pg-hero h1{font-size:clamp(2.5rem,5.2vw,4.5rem);max-width:15ch}
.pg-hero .hero-sub{max-width:58ch}
.fr{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--ink-2)}
.fr img{width:100%;height:100%;object-fit:cover}
.pg-hero-media{aspect-ratio:5/4}

.sec.tight{padding:clamp(3.8rem,7vw,6.5rem) 0}
.band{background:var(--ink-2);border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.6rem,5vw,4.5rem);align-items:start}
.split h2{font-size:clamp(2rem,3.5vw,2.95rem)}
.copy p{color:var(--soft);font-size:1.04rem;max-width:68ch}
.copy p+p,.copy ul+p,.copy p+ul{margin-top:1.1rem}
.copy a{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.copy a:hover{color:var(--paper)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.ticks li{position:relative;padding-left:1.6rem;color:var(--soft);max-width:66ch}
.ticks li::before{content:"";position:absolute;left:.1rem;top:.62em;width:8px;height:8px;background:var(--red);rotate:45deg}
.ticks b{color:var(--paper);font-weight:600}

.opts{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.opt{position:relative;border:1px solid var(--line);border-top:3px solid var(--red-deep);border-radius:var(--r);
  background:var(--ink-2);padding:1.6rem 1.5rem;transition:border-color .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.band .opt{background:var(--ink)}
.opt:hover{border-color:rgba(255,221,0,.5);transform:translateY(-4px)}
.opt h3{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1}
.opt p{margin-top:.7rem;color:var(--muted);font-size:.97rem}
.opt .card-go{margin-top:1rem}
.opt p a,.lede a.inline{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;position:relative;z-index:2}
.opt p a:hover,.lede a.inline:hover{color:var(--paper)}

.locs{margin-top:2.8rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.loc{display:flex;flex-direction:column;padding:1.6rem;border:1px solid var(--line-2);border-top:3px solid var(--teal);
  border-radius:var(--r);background:linear-gradient(150deg, rgba(0,19,119,.62), rgba(5,10,36,.30))}
.loc h3{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.loc p{margin-top:.75rem;color:var(--soft);font-size:.97rem}
.loc .go{margin-top:auto;padding-top:1.15rem;font-family:var(--label);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);transition:color .2s}
.loc .go:hover{color:var(--paper)}
.towns-label{margin-top:2.6rem;font-family:var(--label);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.towns{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.55rem}
.towns li{border:1px solid var(--line-2);border-radius:var(--r);padding:.5rem .95rem;font-family:var(--label);
  font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}

.pulls{margin-top:2.4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.pulls.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pull{margin:0;display:flex;flex-direction:column;gap:1rem;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--r);background:var(--ink-2);padding:clamp(1.5rem,3vw,2rem)}
.band .pull{background:var(--ink)}
.pull q{display:block;quotes:"\201C" "\201D";font-size:1.02rem;line-height:1.62;color:var(--paper)}
.pull figcaption{display:flex;align-items:center;gap:.85rem;padding-top:.9rem;border-top:1px solid var(--line)}
.pull figcaption b{display:block;font-weight:600;font-size:.98rem}
.pull figcaption small{color:var(--muted);font-size:.85rem}

.rel{margin-top:2.2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rel a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 1.2rem;
  border:1px solid var(--line-2);border-radius:var(--r);font-family:var(--label);font-size:.98rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--paper);transition:border-color .3s,background-color .3s,color .3s}
.rel a::after{content:"";width:8px;height:8px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);rotate:45deg;flex:none}
.rel a:hover{border-color:var(--gold);background:rgba(255,221,0,.07);color:var(--gold)}

.cta-band{padding:clamp(3.5rem,7vw,6rem) 0}
.cta-box{display:grid;grid-template-columns:minmax(0,1.25fr) auto;gap:2rem 3rem;align-items:center;
  padding:clamp(1.6rem,4vw,3.2rem);border-radius:var(--r);border:3px solid var(--gold);
  background:linear-gradient(120deg,var(--navy),var(--ink-3) 60%,var(--ink-2))}
.cta-box h2{font-size:clamp(1.9rem,3.5vw,2.9rem)}
.cta-box p{margin-top:.9rem;color:var(--soft);max-width:56ch}
.cta-box .hero-cta{margin-top:0;justify-content:flex-end}
.cta-box .hero-tel{font-size:clamp(1.55rem,2.8vw,2.4rem)}

@media (max-width:1100px){
  .pg-hero-grid{grid-template-columns:1fr}
  .pg-hero-media{aspect-ratio:16/9}
  .split{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
  .cta-box .hero-cta{justify-content:flex-start}
  .pulls.three{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .opts,.locs{grid-template-columns:1fr 1fr}
  .pulls,.pulls.three{grid-template-columns:1fr}
}
@media (max-width:640px){
  .opts,.locs{grid-template-columns:1fr}
  .pg-hero{padding-top:calc(var(--nav-h) + 1.3rem)}
  .pg-hero h1{font-size:clamp(2.15rem,9.4vw,3.2rem)}
  .pg-hero-media{aspect-ratio:4/3}
  .cta-box .hero-cta .btn{flex:1 1 100%;justify-content:center}
}