/* Unity site v6: v5 look (soft hero, photos, pill buttons, scope cards) on the working multi-page forms.
   Brand: navy #001F3F, gold #D4AF37, light #EEEEEE. Light theme only. Gold is for marks, rules, bands and button fills, never small text on white. */
:root{--navy:#001F3F;--navy-2:#12457a;--gold:#D4AF37;--gold-soft:#faf3dc;--light:#EEEEEE;--ink:#0d1b2e;--muted:#44566a;--line:#dde1e6;--err:#a31621;--ok:#1d6b3a;--stop:#8c3a2b;
--font:'Montserrat','Segoe UI',Arial,sans-serif;--font2:'Lato','Segoe UI',Arial,sans-serif;--r:12px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font2);color:var(--ink);background:#fff;line-height:1.65;font-size:17px}
h1,h2,h3{font-family:var(--font);color:var(--navy);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--navy-2)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.muted{color:var(--muted)}
.lede{font-size:1.15rem;color:var(--muted);max-width:36em}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 14px}
.eyebrow:before{content:"";width:26px;height:3px;border-radius:2px;background:var(--gold);flex:none}
.rule{width:64px;height:4px;background:var(--gold);margin:0 0 20px}

/* header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header.site .wrap{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
header.site .brand{margin-right:auto}
header.site img{height:44px;width:auto;display:block}
nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
nav a{white-space:nowrap;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:700;font-size:.95rem}
nav a:hover{color:var(--navy);background:var(--light)}
nav a[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:999px;font-family:var(--font2);font-weight:800;font-size:1rem;text-decoration:none;border:2px solid var(--gold);background:var(--gold);color:var(--navy);cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.07)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{filter:brightness(1.2)}
.btn.line{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn.sm{min-height:40px;padding:8px 16px;font-size:.92rem}
.btn[disabled]{opacity:.6;cursor:wait}
nav a.btn{color:var(--navy);margin-left:8px}
nav a.btn:hover{background:var(--gold)}

/* sections */
section{padding:64px 0}
.band{background:var(--light)}
.navy-band{background:var(--navy);color:#e6ecf2}
.navy-band h2,.navy-band h3{color:#fff}
.navy-band .eyebrow{color:#e8d5a4}
.head{max-width:42em;margin-bottom:36px}
.head h2{margin:0}

/* hero */
.hero{padding:64px 0 56px;background:linear-gradient(180deg,var(--light),#fff 85%)}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.hero h1 span{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.09em;text-underline-offset:.14em}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.quickstart{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:14px;box-shadow:0 14px 40px -24px rgba(0,31,63,.45)}
.quickstart h3{font-size:1.25rem;margin:0}
.hero.page{padding:56px 0 40px}
.hero.page .wrap{display:block}

/* photos */
.photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.photos figure{margin:0;display:grid;gap:10px;min-width:0}
.photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.photos figcaption{font-weight:700;color:var(--navy);font-family:var(--font);font-size:.98rem}
.photos figcaption span{display:block;font-family:var(--font2);font-weight:400;color:var(--muted);font-size:.9rem;margin-top:2px}
.credit{margin:14px 0 0;font-size:.82rem;color:var(--muted)}

/* grids and cards */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.item{display:grid;gap:8px;align-content:start;min-width:0}
.item h3,.item p{margin:0}
.ico{width:44px;height:44px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start;min-width:0}
.card h3,.card p{margin:0}
.card .tag{justify-self:start;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-2);background:var(--light);padding:3px 10px;border-radius:999px}
.band .card .tag{background:#fff}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding-top:18px;border-top:2px solid var(--gold)}
.steps li:before{content:"Step " counter(s);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.steps h3,.steps p{margin:0}

.towns{display:flex;flex-wrap:wrap;gap:10px}
.towns span{padding:7px 16px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700}

.scope{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.scope ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.scope li{display:flex;gap:10px;align-items:flex-start}
.mk{flex:none;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:.78rem;font-weight:800;margin-top:3px}
.yes .mk{background:var(--navy-2);color:#fff}
.no .mk{background:var(--gold-soft);color:var(--stop)}
.notice,.note{border-left:4px solid var(--gold);background:var(--gold-soft);padding:16px 20px;border-radius:0 var(--r) var(--r) 0;color:var(--ink);font-size:.98rem;margin:0}

.facts{display:grid;gap:14px;margin:0}
.facts div{display:grid;gap:2px}
.facts dt{font-weight:800;color:var(--navy)}
.facts dd{margin:0;color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:start}
.two-col>*{min-width:0}

details{border-bottom:1px solid var(--line);padding:16px 0}
details summary{cursor:pointer;font-weight:800;color:var(--navy);font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";font-size:1.4rem;line-height:1}
details[open] summary:after{content:"\2013"}
details p{margin:10px 0 0;color:var(--muted);max-width:48em}

.why{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.why li{padding-left:18px;border-left:4px solid var(--gold)}
.reviews-empty{border:1.5px dashed var(--gold);border-radius:var(--r);padding:24px;color:var(--muted);background:#fff}

/* footer */
footer.site{background:var(--navy);color:#cfd8e2;padding:44px 0;font-size:.95rem}
footer.site a{color:#e8d5a4;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer.site h4{font-family:var(--font);font-weight:600;color:#fff;font-size:1.1rem;margin:0 0 10px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer.site p{margin:0 0 .6em}
footer.site .fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;font-size:.85rem;color:#a9b8c8;margin:0}
footer.site.slim .wrap{display:block}

/* forms (used by form.js) */
.form-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--gold);border-radius:var(--r);padding:28px;margin:28px 0 64px}
fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}
legend,label.q{font-family:var(--font);font-weight:600;font-size:1rem;color:var(--navy);display:block;margin-bottom:6px;padding:0}
.help{font-size:.9rem;color:var(--muted);margin:0 0 8px}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;min-height:48px;font:inherit;padding:10px 12px;border:1.5px solid #8a96a3;border-radius:10px;background:#fff;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--navy-2);outline:3px solid var(--gold);outline-offset:1px}
.opt{display:flex;gap:10px;align-items:flex-start;margin:6px 0;font-size:1rem}
.opt input{margin-top:5px;width:20px;height:20px;flex:none;accent-color:var(--navy-2)}
.row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
[hidden]{display:none!important}
.msg{padding:14px 18px;border-radius:var(--r);margin:12px 0;font-size:1rem}
.msg.info{background:#eef3f8;border-left:5px solid var(--navy)}
.msg.warn{background:var(--gold-soft);border-left:5px solid var(--gold)}
.msg.err{background:#fdecee;border-left:5px solid var(--err);color:var(--err)}
.msg.ok{background:#e9f6ee;border-left:5px solid var(--ok)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.fileline{font-size:.9rem;color:var(--muted);margin-top:4px}
.progress{height:6px;background:var(--light);border-radius:999px;overflow:hidden;margin:0 0 22px}
.progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}

@media(max-width:880px){
  .hero .wrap,.two-col,.scope,.grid2{grid-template-columns:1fr}
  .grid3,.steps{grid-template-columns:1fr}
  .grid4,.photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.site .wrap{grid-template-columns:1fr}
  nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
}
@media(max-width:640px){.row{grid-template-columns:1fr}header.site img{height:34px}}
@media(max-width:520px){.grid4,.photos{grid-template-columns:1fr}section{padding:44px 0}.hero{padding:40px 0}.form-card{padding:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

.tick{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.tick li{padding-left:22px;position:relative;font-size:.95rem}
.tick li:before{content:"¹3";position:absolute;left:0;color:var(--navy-2);font-weight:800}

/* ================= MOTION + GRAPHICS (calm set) =================
   Gentle by design: scroll reveals, hover lifts, drawn underline, soft hero graphics.
   Hover effects only on devices that truly hover (never "stuck" on phones).
   Everything switches off for visitors who ask for reduced motion. */
@keyframes u-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes u-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes u-underl{to{background-size:100% .09em}}
@keyframes u-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,14px)}}
@keyframes u-bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes u-shine{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(260%) skewX(-20deg)}}

html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,select,.btn{touch-action:manipulation}
img,video,iframe,svg{max-width:100%}
body{overflow-x:clip}

/* hero: staggered entrance + drawn gold underline */
.hero .wrap>div:first-child>*,.hero-text>*{animation:u-rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap>div:first-child>:nth-child(2),.hero-text>:nth-child(2){animation-delay:.08s}
.hero .wrap>div:first-child>:nth-child(3),.hero-text>:nth-child(3){animation-delay:.16s}
.hero .wrap>div:first-child>:nth-child(4),.hero-text>:nth-child(4){animation-delay:.24s}
.hero .wrap>div:first-child>:nth-child(5),.hero-text>:nth-child(5){animation-delay:.32s}
.quickstart{animation:u-rise .8s .3s cubic-bezier(.2,.7,.2,1) both}
.eyebrow::before,.eyebrow:before{transform-origin:left;animation:u-draw .8s .2s ease-out both}
.hero h1 span{text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 .09em no-repeat;padding-bottom:.06em;animation:u-underl .9s .65s ease-out forwards}

/* hero graphics: a soft gold glow and the brand teardrop, drifting slowly */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;right:-120px;top:-110px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(212,175,55,.30),rgba(212,175,55,0) 68%);pointer-events:none;animation:u-drift 18s ease-in-out infinite}
.hero::after{content:"";position:absolute;z-index:-1;left:-24px;bottom:-14px;width:110px;height:132px;opacity:.22;pointer-events:none;animation:u-bob 11s ease-in-out infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 6C50 6 14 52 14 76a36 36 0 0 0 72 0C86 52 50 6 50 6Z' fill='none' stroke='%23D4AF37' stroke-width='5'/%3E%3Cpath d='M50 34C50 34 30 60 30 76a20 20 0 0 0 40 0C70 60 50 34 50 34Z' fill='%23D4AF37' fill-opacity='.45'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:768px){
  .hero::before{width:460px;height:460px;right:-100px;top:-140px}
  .hero::after{width:150px;height:180px;left:auto;right:42%;bottom:18px}
}

/* icons gently pop, footer gets a gold edge */
.ico{transition:transform .3s cubic-bezier(.2,.9,.3,1.4),background .25s}
footer,footer.site{border-top:4px solid var(--gold)}

/* scroll reveal (hidden only while JavaScript is running) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* header shadow after scrolling, thin gold progress line at the very top */
header.top,header.site{transition:box-shadow .25s}
header.top.scrolled,header.site.scrolled{box-shadow:0 8px 24px -16px rgba(0,31,63,.5)}
#u-prog{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);z-index:30;pointer-events:none}

/* steps: gold line draws across when seen */
.steps li{position:relative;border-top-color:var(--line)}
.steps li::after{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .9s .2s ease-out}
.steps li.in::after{transform:scaleX(1)}

/* buttons: soft press everywhere, lift + shine only where hovering exists */
.btn{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,filter .18s}
.btn:active{transform:scale(.97)}
.btn-gold::after,.btn:not(.navy):not(.line):not(.btn-green):not(.btn-line)::after{content:"";position:absolute;inset:0 auto 0 0;width:40%;background:rgba(255,255,255,.4);transform:translateX(-120%) skewX(-20deg);pointer-events:none}
details summary{transition:padding-left .2s}
details[open]>p{animation:u-rise .3s ease-out both}
nav.main.open,header.site nav.open{animation:u-rise .25s ease-out both}
.card,.towns span,.photos img{transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,31,63,.55)}
  .btn-gold:hover::after,.btn:not(.navy):not(.line):not(.btn-green):not(.btn-line):hover::after{animation:u-shine .7s ease}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 32px -22px rgba(0,31,63,.5);border-color:var(--gold)}
  .towns span:hover{transform:translateY(-2px) scale(1.04)}
  .photos figure:hover img{transform:scale(1.03);box-shadow:0 16px 30px -20px rgba(0,31,63,.55)}
  .item:hover .ico{transform:scale(1.12) rotate(-4deg);background:var(--gold)}
  details summary:hover{padding-left:6px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .steps li::after{transform:scaleX(1)}
  .hero h1 span{background-size:100% .09em}
}

/* ---------- phone optimizations (public multi-page site) ---------- */
html{scroll-padding-top:76px}
.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);cursor:pointer;order:4;transition:transform .15s}
.nav-toggle:active{transform:scale(.92)}
.bars-ico,.bars-ico::before,.bars-ico::after{display:block;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.bars-ico{position:relative}
.bars-ico::before,.bars-ico::after{content:"";position:absolute;left:0}
.bars-ico::before{top:-7px}.bars-ico::after{top:7px}
.nav-toggle[aria-expanded="true"] .bars-ico{background:transparent}
.nav-toggle[aria-expanded="true"] .bars-ico::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars-ico::after{transform:translateY(-7px) rotate(-45deg)}
.u-sticky{display:none}
@media (max-width:767px){
  header.site{top:env(safe-area-inset-top,0)}
  header.site .wrap{gap:8px}
  .nav-toggle{display:inline-flex}
  header.site nav{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;gap:0;overflow:visible;border-top:1px solid var(--line);padding:4px 0 8px}
  header.site nav.open{display:flex}
  header.site nav a{display:flex;align-items:center;min-height:48px;padding:10px 12px;font-size:1.05rem}
  header.site nav a[aria-current="page"]{background:var(--gold-soft);box-shadow:inset 4px 0 0 var(--gold);color:var(--navy)}
  .btn.sm{min-height:48px}
  .ctas{flex-direction:column}
  .ctas .btn,.hero .quickstart .btn{width:100%}
  footer.site a{display:inline-flex;align-items:center;min-height:48px}
  footer.site{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
  body.has-sticky footer.site{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .u-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px max(16px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -10px 24px -18px rgba(0,31,63,.5);transform:translateY(110%);transition:transform .3s ease}
  .u-sticky.show{transform:none}
  .u-sticky .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.u-sticky{transition:none}}

/* narrow phones: keep logo, CTA and menu button on one row */
@media (max-width:480px){
  header.top .wrap,header.site .wrap{gap:6px}
  header.top .brand img,header.site .brand img{height:28px}
  header.top .btn-sm,header.site .btn.sm{padding:8px 12px;font-size:.85rem}
}