/* ==========================================================================
   Hennis Homes
   Design register: sharp, editorial, restrained. Square corners, hairline
   rules, generous whitespace, gold used sparingly as an accent only.
   ========================================================================== */

:root{
  --navy:#16294A;
  --navy-dk:#0D1A31;
  --navy-lt:#22406E;
  --gold:#B08D57;
  --gold-lt:#C9A97A;
  --cream:#F7F5F1;
  --ink:#141A22;
  --body:#5A6672;
  --line:#E4E0D9;
  --line-dk:rgba(255,255,255,.14);
  --white:#fff;

  --serif:Georgia,"Times New Roman",Times,serif;   /* logo lockup only */
  --display:'Montserrat',-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:'Roboto Flex',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --max:1240px;
  --gut:clamp(20px,4vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font:400 16.5px/1.7 var(--sans);
  color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--navy);color:#fff}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:500;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(2.35rem,5vw,3.85rem);font-weight:400;letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,3.2vw,2.6rem);font-weight:400;letter-spacing:-.025em;line-height:1.12}
h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;line-height:1.35}
h4{font-size:.9375rem;font-weight:600}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:820px}

.eyebrow{
  display:block;font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;
}
.eyebrow.on-dark{color:var(--gold-lt)}
.rule{width:40px;height:1px;background:var(--gold);margin:1.6rem 0}
.rule.center{margin-left:auto;margin-right:auto}
.lede{font-size:1.0625rem;line-height:1.75;color:var(--body)}
.lede.on-dark{color:rgba(255,255,255,.72)}

/* --- buttons: square, quiet, confident ----------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.05rem 2.1rem;font-family:var(--sans);font-size:.6875rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;border-radius:0;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:#967541;border-color:#967541}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-dk);border-color:var(--navy-dk)}
.btn-out{border-color:rgba(255,255,255,.4);color:#fff}
.btn-out:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-out-navy{border-color:var(--ink);color:var(--ink)}
.btn-out-navy:hover{background:var(--ink);color:#fff}
.btn .arw{display:inline-block;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

/* --- sections ------------------------------------------------------------ */
section{padding:clamp(4.5rem,9vw,8rem) 0}
.sec-cream{background:var(--cream)}
.sec-navy{background:var(--navy);color:rgba(255,255,255,.72)}
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff}
.sec-head{max-width:660px;margin-bottom:clamp(2.75rem,5vw,4rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin-top:1.2rem;font-size:1.0625rem;line-height:1.75}

/* --- header -------------------------------------------------------------- */
.site-hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:1.5rem 0;
  transition:background .3s,padding .3s,border-color .3s;
  background:transparent;border-bottom:1px solid transparent;
}
.site-hdr.solid{background:var(--navy);border-bottom-color:rgba(255,255,255,.1);padding:1rem 0}
.site-hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem}

.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand-logo{height:60px;width:auto;display:block;transition:height .3s}
.site-hdr.solid .brand-logo{height:50px}
@media(max-width:520px){.brand-logo{height:46px}.site-hdr.solid .brand-logo{height:42px}}

.nav-links{display:none;align-items:center;gap:2.5rem}
.nav-links a{
  position:relative;text-decoration:none;color:rgba(255,255,255,.82);font-size:.6875rem;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;transition:color .2s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:#fff}
.hdr-cta{display:none}
@media(min-width:1040px){.nav-links{display:flex}.hdr-cta{display:inline-flex}}

.burger{display:grid;place-items:center;width:42px;height:42px;background:none;border:1px solid rgba(255,255,255,.4);cursor:pointer;border-radius:0}
.burger span{display:block;width:18px;height:1px;background:#fff;margin:3.5px 0;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}
@media(min-width:1040px){.burger{display:none}}

.mob-nav{
  position:fixed;inset:0 0 0 auto;width:min(380px,86vw);background:var(--navy);z-index:99;
  transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding:7rem 2.25rem 2rem;display:flex;flex-direction:column;
}
.mob-nav.open{transform:translateX(0)}
.mob-nav a{
  text-decoration:none;color:#fff;font-family:var(--display);font-size:1.15rem;font-weight:400;
  letter-spacing:-.01em;padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.mob-nav .btn{margin-top:2rem;border-bottom:0}
.scrim{position:fixed;inset:0;background:rgba(8,15,28,.66);z-index:98;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}

/* --- hero ---------------------------------------------------------------- */
.hero{
  position:relative;min-height:min(90vh,840px);display:flex;align-items:center;
  padding:10rem 0 8rem;overflow:hidden;background:var(--navy-dk);
}
.hero-media{position:absolute;inset:0;z-index:0}
/* Revealed only once frames are actually running (JS adds .on). */
.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;
}
.hero-media video.on{opacity:1}

/* Sits beneath the photography as a base layer. */
.hero-fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%,rgba(45,78,132,.55),transparent 58%),
    radial-gradient(100% 80% at 12% 96%,rgba(176,141,87,.13),transparent 62%),
    linear-gradient(155deg,#0D1A31 0%,#16294A 52%,#0A1526 100%);
}
.hero-fallback::after{
  content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Three stacked washes: heavy on the left so the headline stays crisp, a bottom
   vignette so the stat row reads, and a light overall tint to hold everything
   together across four different photos. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(8,15,28,.93) 0%,rgba(8,15,28,.76) 44%,rgba(8,15,28,.38) 100%),
    linear-gradient(to top,rgba(8,15,28,.78) 0%,rgba(8,15,28,0) 40%),
    linear-gradient(rgba(8,15,28,.20),rgba(8,15,28,.20));
}
/* Lift the headline off the photography without a visible box. */
.hero h1,.hero .lede{text-shadow:0 1px 24px rgba(8,15,28,.55)}
.hero .wrap{position:relative;z-index:2}
/* Restrained so more of the footage stays visible behind it. */
.hero h1{color:#fff;max-width:17ch;font-size:clamp(1.9rem,3.4vw,2.75rem)}
.hero .lede{max-width:46ch;margin-top:1.5rem;font-size:1rem}

.hero-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid rgba(255,255,255,.13)}
/* Equal columns so the row reads as a balanced band rather than a left cluster. */
.hero-bar .wrap{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;
  padding-top:2rem;padding-bottom:2rem;text-align:center;
}
.hero-bar b{
  display:block;font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.8rem);
  color:#fff;font-weight:400;letter-spacing:-.02em;line-height:1;margin-bottom:.55rem;
}
.hero-bar span{font-size:.625rem;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.5)}
/* --- mobile hero -------------------------------------------------------
   On narrow screens the stat bar comes out of absolute positioning and
   flows underneath the copy instead. Reserving fixed space for an
   absolutely positioned bar cannot work once the text wraps to more lines
   than expected, which is what caused it to collide with the buttons. */
@media(max-width:760px){
  .hero{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    min-height:min(92vh,780px);padding:8.5rem 0 0;
  }
  .hero h1{font-size:1.9rem;max-width:none}
  .hero .lede{font-size:.9375rem;line-height:1.65;margin-top:1.1rem;max-width:none}
  .hero .btn-row{flex-direction:column;align-items:stretch;gap:.7rem;margin-top:1.75rem}
  .hero .btn{width:100%}

  .hero-bar{position:static;margin-top:auto}
  .hero-bar .wrap{
    grid-template-columns:repeat(3,1fr);gap:.6rem;
    padding-top:1.35rem;padding-bottom:1.35rem;
  }
  .hero-bar b{font-size:1.0625rem;margin-bottom:.3rem}
  .hero-bar span{font-size:.5rem;letter-spacing:.1em;line-height:1.35;display:block}
}
@media(max-width:380px){
  .hero-bar .wrap{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .hero-bar b{font-size:.9375rem}
  .hero-bar span{font-size:.4375rem}
}

/* Interior page heroes: 12rem of headroom is right on a desktop and far too
   much on a phone, where it swallows a quarter of the screen. */
@media(max-width:760px){
  .phero{padding:8.5rem 0 3.25rem}
  .phero h1{font-size:1.9rem;max-width:none}
  .phero .lede{font-size:.9375rem;line-height:1.65;margin-top:1.1rem;max-width:none}
  .phero .btn-row{margin-top:1.75rem}
  .phero .btn{width:100%}
}

/* interior page hero */
.phero{position:relative;background:var(--navy);color:#fff;padding:12rem 0 clamp(4.5rem,7vw,6.5rem);overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(110% 90% at 82% 10%,rgba(45,78,132,.5),transparent 58%);
}
.phero .wrap{position:relative;z-index:1}
.phero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.1rem);max-width:19ch}
.phero .lede{max-width:58ch;margin-top:1.5rem}

/* --- grids and cards ----------------------------------------------------- */
.grid{display:grid;gap:1px;background:var(--line)}
.g2,.g3{grid-template-columns:1fr}
@media(min-width:700px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}}

/* Hairline-separated columns rather than floating boxes. */
.card{
  background:#fff;border:0;border-radius:0;padding:clamp(2rem,3.5vw,3rem) clamp(1.5rem,2.5vw,2.5rem);
  transition:background .25s;
}
.card:hover{background:var(--cream)}
.sec-cream .grid{background:var(--line)}
.sec-cream .card{background:var(--cream)}
.sec-cream .card:hover{background:#fff}
.card .num{
  display:block;font-family:var(--display);font-size:.75rem;font-weight:600;color:var(--gold);
  letter-spacing:.14em;margin-bottom:1.6rem;
}
.card h3{margin-bottom:.7rem}
.card p{font-size:.9375rem;line-height:1.75}
.card .rule{margin:1.5rem 0 1.35rem}
.card .btn{padding:.85rem 1.6rem}

.step{display:flex;gap:1.75rem;align-items:flex-start;padding:2rem 0;border-bottom:1px solid var(--line)}
.step:first-child{padding-top:0}
.step:last-child{border-bottom:0;padding-bottom:0}
.sec-navy .step{border-color:var(--line-dk)}
.step-n{
  flex:none;width:38px;height:38px;border:1px solid var(--gold);color:var(--gold);border-radius:0;
  display:grid;place-items:center;font-family:var(--display);font-size:.8125rem;font-weight:500;
}
.step h3{margin-bottom:.5rem}
.step p{font-size:.9375rem;line-height:1.75}

.split{display:grid;gap:3rem;align-items:center}
@media(min-width:920px){.split{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5.5rem)}}

.checks{list-style:none;display:grid;gap:1.1rem;margin-top:2.2rem}
.checks li{display:flex;gap:1.1rem;align-items:flex-start;font-size:.9375rem;line-height:1.7}
.checks .ck{
  flex:none;width:16px;height:16px;border-radius:0;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-size:.5rem;margin-top:6px;
}
.sec-navy .checks li{color:rgba(255,255,255,.76)}

/* --- forms --------------------------------------------------------------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:0;padding:clamp(1.75rem,4vw,3.25rem)}
.sec-navy .form-card{background:rgba(255,255,255,.04);border-color:var(--line-dk)}
.fgrid{display:grid;gap:1.5rem}
@media(min-width:640px){
  .fgrid.two{grid-template-columns:1fr 1fr}
  /* city / state / zip — city gets the extra width */
  .fgrid.addr{grid-template-columns:1.7fr .8fr .9fr}
}
.field{display:block}
/* Direct children only — otherwise this leaks onto the .radio-opt labels. */
.field > label,.field > span{
  display:block;font-size:.625rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.7rem;
}
.sec-navy .field > label,.sec-navy .field > span{color:rgba(255,255,255,.9)}
.field input,.field select,.field textarea{
  width:100%;padding:.95rem 1.1rem;font:inherit;font-size:.9375rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:0;transition:border-color .2s;
}
.sec-navy .field input,.sec-navy .field select,.sec-navy .field textarea{
  background:rgba(255,255,255,.05);border-color:var(--line-dk);color:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:#A3ADB8}
.sec-navy .field input::placeholder,.sec-navy .field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:130px}

/* currency-prefixed input — a div wrapper, not a span, so it does not inherit
   the uppercase label styling from `.field > span` */
.input-money{position:relative}
.money-sym{
  position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  font-size:.9375rem;color:var(--body);pointer-events:none;
}
.sec-navy .money-sym{color:rgba(255,255,255,.55)}
.input-money input{padding-left:2.1rem}
.field-hint{
  display:block;margin-top:.6rem;font-size:.75rem;line-height:1.55;color:var(--body);
  text-transform:none;letter-spacing:0;font-weight:400;
}
.sec-navy .field-hint{color:rgba(255,255,255,.45)}
.sec-navy select option{background:var(--navy);color:#fff}

.radio-row{display:grid;gap:1px;background:var(--line)}
@media(min-width:560px){.radio-row{grid-template-columns:repeat(3,1fr)}}
.sec-navy .radio-row{background:var(--line-dk)}
.radio-opt{position:relative}
.radio-opt input{position:absolute;opacity:0;width:0;height:0}
.radio-opt span{
  display:block;text-align:center;padding:1.05rem .75rem;background:#fff;border-radius:0;
  cursor:pointer;font-size:.8125rem;font-weight:500;color:var(--body);transition:.18s;
}
.sec-navy .radio-opt span{background:var(--navy);color:rgba(255,255,255,.72)}
.radio-opt input:checked + span{background:var(--gold);color:#fff;font-weight:600}
.radio-opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:-2px}
.form-note{font-size:.75rem;color:var(--body);text-align:center;margin-top:.9rem;line-height:1.6}
.sec-navy .form-note{color:rgba(255,255,255,.45)}
.form-card .btn{width:100%}

.form-done{text-align:center;padding:3.5rem 1rem}
.form-done .mark{
  width:52px;height:52px;border:1px solid var(--gold);color:var(--gold);border-radius:0;
  display:grid;place-items:center;margin:0 auto 1.6rem;font-size:1.3rem;
}
.form-done h3{margin-bottom:.7rem;font-size:1.35rem;font-weight:400}

/* --- plans --------------------------------------------------------------- */
.plan{background:#fff;border:1px solid var(--line);border-radius:0;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s}
.plan:hover{border-color:var(--gold)}
.plan-art{border-bottom:1px solid var(--line);aspect-ratio:3/2;overflow:hidden;background:var(--navy)}
.plan-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.plan:hover .plan-art img{transform:scale(1.03)}
.plan-body{padding:1.85rem 2rem 2rem;flex:1;display:flex;flex-direction:column}
.plan-body h3{margin-bottom:.5rem;font-size:1.15rem;font-weight:500}
.plan-tag{display:block;font-size:.625rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.plan-specs{display:flex;gap:2.25rem;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--line)}
.plan-specs div{font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--body)}
.plan-specs b{display:block;font-family:var(--display);font-size:1.2rem;color:var(--ink);font-weight:400;letter-spacing:-.02em;margin-bottom:.3rem}

/* --- team ---------------------------------------------------------------- */
.person{text-align:left;position:relative;padding-top:2rem}
.person::before{content:"";position:absolute;top:0;left:0;width:32px;height:2px;background:var(--gold)}
.person h3{margin-bottom:.45rem;font-size:1.3rem;font-weight:400;letter-spacing:-.02em}
.person .role{display:block;font-size:.625rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.person p{font-size:.9063rem;line-height:1.75}

/* --- contact rows -------------------------------------------------------- */
.crow{display:flex;gap:1.35rem;align-items:flex-start;padding:1.75rem 0;border-bottom:1px solid var(--line)}
.crow:first-of-type{padding-top:0}
.crow:last-child{border-bottom:0}
.sec-navy .crow{border-color:var(--line-dk)}
.crow-ic{flex:none;width:22px;height:22px;color:var(--gold);margin-top:3px}
.crow-ic svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.4}
.crow b{display:block;font-family:var(--display);font-size:1.0625rem;color:var(--ink);margin-bottom:.3rem;font-weight:500;letter-spacing:-.01em}
.sec-navy .crow b{color:#fff}
.crow a{color:var(--gold);text-decoration:none;font-size:.9375rem;border-bottom:1px solid transparent;transition:border-color .2s}
.crow a:hover{border-bottom-color:var(--gold)}
.crow span{font-size:.9063rem;line-height:1.7}

/* --- cta band ------------------------------------------------------------ */
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:clamp(4.5rem,8vw,7rem) 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 100% at 50% 0%,rgba(45,78,132,.42),transparent 62%)}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:#fff;max-width:22ch;margin:0 auto}
.cta-band p{color:rgba(255,255,255,.68);max-width:54ch;margin:1.35rem auto 0}
.cta-band .btn-row{justify-content:center}

/* --- footer -------------------------------------------------------------- */
.site-ftr{background:var(--navy-dk);color:rgba(255,255,255,.55);padding:clamp(3.5rem,6vw,5rem) 0 2.5rem;font-size:.875rem;line-height:1.75}
.ftr-grid{display:grid;gap:2.75rem;margin-bottom:3.25rem}
@media(min-width:780px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr}}
.ftr-logo{width:170px;height:auto;display:block;margin-bottom:1.5rem}
.site-ftr h4{font-family:var(--sans);color:#fff;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.5rem;font-weight:600}
.site-ftr ul{list-style:none;display:grid;gap:.8rem}
.site-ftr a{text-decoration:none;transition:color .2s}
.site-ftr a:hover{color:var(--gold-lt)}
.ftr-legal{border-top:1px solid rgba(255,255,255,.09);padding-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.75rem;color:rgba(255,255,255,.38)}
.disclaimer{margin-top:1.75rem;font-size:.6875rem;line-height:1.8;color:rgba(255,255,255,.32);max-width:96ch}

/* --- image plate --------------------------------------------------------- */
.media-plate{
  aspect-ratio:4/5;width:100%;
  background-color:var(--navy);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  position:relative;
}
.media-plate::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(110% 85% at 76% 12%,rgba(45,78,132,.5),transparent 60%),
    linear-gradient(165deg,transparent 55%,rgba(8,15,28,.5));
  mix-blend-mode:multiply;pointer-events:none;
}

/* --- service-area list --------------------------------------------------- */
.area-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.5rem,4vw,4rem);
  max-width:980px;margin:0 auto;
}
@media(min-width:640px){.area-list{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.area-list{grid-template-columns:repeat(4,1fr)}}
.chip-area{
  display:block;padding:.95rem 0;font-size:.9375rem;color:var(--ink);
  border-bottom:1px solid var(--line);transition:color .2s,border-color .2s;
}
.chip-area:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* --- motion -------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .plan:hover .plan-art img{transform:none}
  html{scroll-behavior:auto}
  .btn:hover .arw{transform:none}
}