/* ==========================================================================
   ClearFrame — shared design system
   Style: Modern Proptech — deep indigo hero, electric teal + amber accents
   Type: Space Grotesk (display) · Inter (body) · IBM Plex Mono (data)
   ========================================================================== */

:root{
  --navy:#182242;
  --navy-2:#293B63;
  --navy-ink:#12151C;
  --white:#F6F7F3;
  --sand:#EAF5F2;
  --sand-line:#D6E6E1;
  --teal:#17B8A6;
  --teal-deep:#0E8F80;
  --teal-soft:#E1F7F3;
  --amber:#F2B33D;
  --muted:#5B6472;
  --muted-on-navy:#AEB9CC;
  --line:#E2E6E1;
  --radius:8px;
  --maxw:1220px;
  --shadow-card:0 10px 28px rgba(11,14,26,.10), 0 2px 6px rgba(11,14,26,.05);
  --ease-pop:cubic-bezier(.2,.8,.3,1.25);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--navy-ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}
body.has-mobile-cta{padding-bottom:74px;}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  margin:0;
  letter-spacing:-0.015em;
  font-weight:600;
  color:var(--navy-ink);
}
p{margin:0;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:100px 0;}
@media (max-width:720px){ section{padding:64px 0;} }

.eyebrow{
  font-size:12px; color:var(--teal-deep); text-transform:uppercase;
  margin-bottom:16px; display:inline-block; font-weight:600; letter-spacing:0.06em;
  font-family:'IBM Plex Mono',monospace;
}
.on-navy .eyebrow{color:var(--teal);}
.section-head{max-width:680px; margin-bottom:52px;}
.section-head p{color:var(--muted); font-size:17px; margin-top:14px; max-width:58ch;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 26px;
  font-size:14px; font-weight:600; text-decoration:none; border-radius:var(--radius);
  transition:transform .25s var(--ease-pop), box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  font-family:'Inter',sans-serif; cursor:pointer; border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{background:var(--teal); color:#06231F;}
.btn-primary:hover{background:var(--teal-deep); color:#fff; transform:translateY(-3px); box-shadow:0 14px 30px rgba(23,184,166,.28);}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:var(--teal-deep); transform:translateY(-3px); box-shadow:var(--shadow-card);}
.btn-outline{background:transparent; color:var(--navy-ink); border-color:var(--line);}
.btn-outline:hover{border-color:var(--navy-ink); background:var(--navy-ink); color:#fff; transform:translateY(-3px);}
.btn-outline.on-navy{color:#fff; border-color:#40527F;}
.btn-outline.on-navy:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn-sm{padding:10px 18px; font-size:13px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

.trust-line{
  display:flex; gap:10px 22px; flex-wrap:wrap; align-items:center;
  font-size:13px; color:var(--muted); margin-top:26px; font-family:'IBM Plex Mono',monospace;
}
.trust-line span{display:inline-flex; align-items:center; gap:8px;}
.trust-line span::before{content:""; width:6px; height:6px; background:var(--teal); border-radius:50%; display:inline-block;}

/* ---------- bracket / viewfinder signature ---------- */
.bracket-frame{position:relative; padding:20px;}
.bracket-frame::before,.bracket-frame::after,.bracket-frame .bk-tr,.bracket-frame .bk-br{
  content:""; position:absolute; width:18px; height:18px; border-color:var(--sand-line);
  transition:border-color .5s ease, width .5s ease, height .5s ease;
}
.bracket-frame::before{top:0;left:0;border-top:2px solid;border-left:2px solid;}
.bracket-frame::after{bottom:0;left:0;border-bottom:2px solid;border-left:2px solid;}
.bracket-frame .bk-tr{top:0;right:0;border-top:2px solid;border-right:2px solid;}
.bracket-frame .bk-br{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid;}
.bracket-frame.in-focus::before,.bracket-frame.in-focus::after,
.bracket-frame.in-focus .bk-tr,.bracket-frame.in-focus .bk-br{border-color:var(--teal); width:26px; height:26px;}

/* ---------- header / nav ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(246,247,243,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; text-decoration:none;}
.logo-mark{width:18px; height:18px; position:relative; flex-shrink:0;}
.logo-mark span{position:absolute; width:7px; height:7px; border-color:var(--teal);}
.logo-mark .l1{top:0;left:0;border-top:2px solid;border-left:2px solid;}
.logo-mark .l2{top:0;right:0;border-top:2px solid;border-right:2px solid;}
.logo-mark .l3{bottom:0;left:0;border-bottom:2px solid;border-left:2px solid;}
.logo-mark .l4{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid;}
.navlinks{display:flex; gap:26px; align-items:center;}
.navlinks a.navlink{font-size:14px; text-decoration:none; color:var(--muted); transition:color .2s ease;}
.navlinks a.navlink:hover, .navlinks a.navlink[aria-current="page"]{color:var(--navy-ink);}
.navlinks a.cta-nav{color:#fff; background:var(--navy); padding:10px 18px; border-radius:var(--radius); font-weight:600; font-size:13px; text-decoration:none; transition:transform .25s var(--ease-pop), background .2s ease, box-shadow .25s ease;}
.navlinks a.cta-nav:hover{background:var(--teal-deep); transform:translateY(-2px); box-shadow:0 10px 22px rgba(23,184,166,.25);}
.menu-toggle{display:none;}
@media (max-width:980px){
  .navlinks{position:fixed; top:63px; left:0; right:0; bottom:0; background:var(--white);
    flex-direction:column; align-items:flex-start; padding:30px 28px; gap:20px;
    transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;}
  .navlinks.open{transform:translateX(0);}
  .navlinks a.navlink{font-size:17px;}
  .menu-toggle{display:block; background:none; border:none; cursor:pointer; width:24px; height:18px; position:relative;}
  .menu-toggle span{display:block; height:2px; background:var(--navy-ink); margin:5px 0;}
}

/* ---------- mobile sticky CTA ---------- */
.mobile-cta{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:70;
  background:var(--navy); padding:12px 20px; border-top:1px solid #3A4C78;
}
.mobile-cta a{display:block; text-align:center; background:var(--teal); color:#06231F; padding:13px; border-radius:var(--radius); font-weight:600; font-size:14px; text-decoration:none;}
@media (max-width:720px){ .mobile-cta{display:block;} }

/* ---------- hero (homepage) — dark indigo, gradient mesh ---------- */
.hero{
  padding:64px 0 76px;
  background:
    radial-gradient(760px 440px at 10% -10%, rgba(23,184,166,.32), transparent 62%),
    radial-gradient(620px 520px at 100% 6%, rgba(242,179,61,.22), transparent 58%),
    radial-gradient(900px 700px at 50% 120%, rgba(23,184,166,.12), transparent 60%),
    var(--navy);
  color:#fff; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,.16) 1px, transparent 0),
    radial-gradient(1px 1px at 68% 62%, rgba(255,255,255,.13) 1px, transparent 0),
    radial-gradient(1px 1px at 42% 82%, rgba(255,255,255,.11) 1px, transparent 0);
  background-size:220px 220px;
  animation:drift 34s linear infinite;
}
@keyframes drift{ from{background-position:0 0,0 0,0 0;} to{background-position:220px 140px,-160px 220px,140px -180px;} }
.hero-inner{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; position:relative; z-index:1;}
@media (max-width:960px){ .hero-inner{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(32px,4.6vw,54px); line-height:1.06; margin-bottom:20px; color:#fff;}
.hero h1 .hl{color:var(--teal);}
.hero p.lede{font-size:18px; color:var(--muted-on-navy); max-width:50ch; margin-bottom:8px;}
.hero .service-line{font-size:14px; color:var(--teal); font-weight:600; margin:16px 0 26px; font-family:'IBM Plex Mono',monospace;}
.hero .trust-line{color:var(--muted-on-navy);}
.hero .trust-line span::before{background:var(--teal);}

.hero-visual{position:relative;}
.hero-photo{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--sand); border-radius:var(--radius);}
.hero-photo img{width:100%; height:100%; object-fit:cover;}

/* photo deck — cycling stack of property shots */
.deck{position:relative; aspect-ratio:4/5;}
.deck img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.4); opacity:0;
  animation:deckcycle 13s infinite;
}
.deck img:nth-child(1){animation-delay:0s;}
.deck img:nth-child(2){animation-delay:3.25s;}
.deck img:nth-child(3){animation-delay:6.5s;}
.deck img:nth-child(4){animation-delay:9.75s;}
@keyframes deckcycle{
  0%{opacity:0; transform:scale(.96) rotate(-1.4deg);}
  4%{opacity:1; transform:scale(1) rotate(0deg);}
  22%{opacity:1; transform:scale(1) rotate(0deg);}
  27%{opacity:0; transform:scale(1.04) rotate(1.4deg);}
  100%{opacity:0;}
}
.deck-tag{position:absolute; bottom:16px; left:16px; z-index:2; background:rgba(11,14,26,.72); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:6px 10px; border-radius:6px; backdrop-filter:blur(4px);}
@media (prefers-reduced-motion:reduce){ .deck img{animation:none; opacity:1; position:static;} .deck{display:flex; flex-direction:column; gap:10px;} .hero::before{animation:none;} }

/* stat counters */
.stats{display:flex; gap:34px; margin-top:8px; flex-wrap:wrap;}
.stat b{font-family:'Space Grotesk',sans-serif; font-size:29px; color:#fff; display:block; font-weight:700;}
.stat span{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted-on-navy); text-transform:uppercase; letter-spacing:.04em;}
.on-navy .stat span, .hero .stat span{color:var(--muted-on-navy);}

/* before/after compare slider */
.compare{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.4); background:var(--sand);}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none;}
.compare .after-layer{clip-path:inset(0 0 0 54%);}
.compare .handle{position:absolute; top:0; bottom:0; left:54%; width:0; z-index:3; pointer-events:none;}
.compare .handle .bar{position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#fff;}
.compare .handle .knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3);}
.compare .knob svg{width:15px; height:15px;}
.compare-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4;}
.compare-tag{position:absolute; top:14px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; background:rgba(11,14,26,.72); color:#fff; padding:6px 10px; border-radius:6px; z-index:2; backdrop-filter:blur(4px);}
.compare-tag.left{left:14px;} .compare-tag.right{right:14px;}

/* ---------- marquee ticker ---------- */
.marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0;}
.on-navy .marquee-wrap{border-color:#3A4C78;}
.marquee{display:flex; gap:48px; width:max-content; animation:scrollx 24s linear infinite; font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--muted); white-space:nowrap;}
.on-navy .marquee{color:var(--muted-on-navy);}
.marquee span{display:flex; align-items:center; gap:10px;}
.marquee span::before{content:"◆"; color:var(--teal); font-size:9px;}
@keyframes scrollx{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .marquee{animation:none;} }

/* ---------- problem / compare ---------- */
.problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:860px){ .problem-grid{grid-template-columns:1fr;} }
.problem-list{list-style:none; margin:0; padding:0;}
.problem-list li{padding:13px 0; border-top:1px solid var(--line); font-size:15px; display:flex; gap:12px; color:var(--muted);}
.problem-list li:first-child{border-top:none;}
.problem-list li::before{content:"—"; color:var(--amber); flex-shrink:0;}
.problem-close{margin-top:28px; font-size:20px; font-family:'Space Grotesk'; font-weight:600; color:var(--navy-ink);}

/* ---------- "we do it all" process visual ---------- */
.doitall-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:900px){ .doitall-grid{grid-template-columns:1fr;} }
.step-flow{list-style:none; margin:0; padding:0; counter-reset:step;}
.step-flow li{counter-increment:step; padding:18px 0 18px 46px; position:relative; border-top:1px solid var(--line); font-size:15px;}
.step-flow li:first-child{border-top:none;}
.step-flow li::before{
  content:counter(step); position:absolute; left:0; top:16px; width:28px; height:28px;
  border:1px solid var(--teal); color:var(--teal-deep); border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-size:12px; transition:background .25s ease, color .25s ease;
}
.step-flow li:hover::before{background:var(--teal); color:#06231F;}
.folder-mock{background:var(--navy); padding:30px; border-radius:14px;}
.folder-mock .cap{color:var(--muted-on-navy); font-size:12px; margin-bottom:16px; text-transform:uppercase;}
.file-row{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--navy-2); border-radius:8px; margin-bottom:8px; transition:transform .2s ease;}
.file-row:hover{transform:translateX(4px);}
.file-row:last-child{margin-bottom:0;}
.file-row .ext{font-family:'IBM Plex Mono'; font-size:10px; color:var(--navy); background:var(--teal); padding:3px 6px; border-radius:4px; font-weight:700;}
.file-row .name{color:#fff; font-size:13px; font-family:'IBM Plex Mono';}
.no-hassle{margin-top:22px; font-size:14px; color:var(--muted); font-style:normal;}

/* ---------- card grids (services, deliverables, faq entries) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
@media (max-width:900px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-grid{grid-template-columns:1fr;} }
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:700px){ .card-grid.cols-2{grid-template-columns:1fr;} }
.card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){ .card-grid.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-grid.cols-4{grid-template-columns:1fr;} }
.grid-card{background:var(--white); padding:32px 28px; position:relative; transition:transform .3s var(--ease-pop), box-shadow .3s ease, z-index 0s;}
.grid-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card); z-index:2;}
.grid-card .tag{font-size:11px; color:var(--amber); font-family:'IBM Plex Mono';}
.grid-card h4{font-size:18px; margin:10px 0 8px;}
.grid-card p{font-size:14px; color:var(--muted);}
.grid-card ul{margin:14px 0 0; padding-left:18px; font-size:13.5px; color:var(--muted);}
.grid-card ul li{margin-bottom:6px;}

/* service package card */
.service-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px; display:flex; flex-direction:column; height:100%; transition:transform .3s var(--ease-pop), box-shadow .3s ease;}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:transparent;}
.service-card h3{font-size:21px; margin-bottom:10px;}
.service-card .desc{color:var(--muted); font-size:14.5px; margin-bottom:18px;}
.service-card ul{list-style:none; margin:0 0 24px; padding:0; flex-grow:1;}
.service-card ul li{font-size:14px; padding:8px 0; border-top:1px solid var(--line); display:flex; gap:10px;}
.service-card ul li:first-child{border-top:none;}
.service-card ul li::before{content:"✓"; color:var(--teal-deep); font-weight:700; flex-shrink:0;}
.service-price{font-family:'IBM Plex Mono'; font-size:13px; color:var(--muted); margin-bottom:16px;}

/* ---------- dark / navy sections ---------- */
.on-navy{background:var(--navy); color:#fff;}
.on-navy h2, .on-navy h3, .on-navy h4{color:#fff;}
.on-navy p{color:var(--muted-on-navy);}
.on-navy .section-head p{color:var(--muted-on-navy);}
.on-navy .grid-card{background:var(--navy);}
.on-navy .grid-card:hover{background:var(--navy-2);}
.on-navy .card-grid{background:#293B63; border-color:#293B63;}

.on-sand{background:var(--sand);}

/* bento gallery grid */
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:16px;}
@media (max-width:900px){ .bento{grid-template-columns:repeat(2,1fr);} }
.bento .card{position:relative; overflow:hidden; border-radius:12px; background:#fff; border:1px solid var(--line); transition:transform .3s var(--ease-pop), box-shadow .3s ease;}
.bento .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-card);}
.bento .card.wide{grid-column:span 2;}
.bento .card.tall{grid-row:span 2;}
.bento .card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.bento .card:hover img{transform:scale(1.06);}
.bento .card .lbl{position:absolute; bottom:0; left:0; right:0; padding:11px 13px; background:linear-gradient(0deg, rgba(11,14,26,.75), transparent); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:10.5px;}
.bento .card.text{display:flex; flex-direction:column; justify-content:center; padding:22px; background:var(--sand);}
.bento .card.text h4{font-family:'Space Grotesk',sans-serif; font-size:16.5px; margin-bottom:6px;}
.bento .card.text p{font-size:13.5px; color:var(--muted);}

/* ---------- timeline (how it works) ---------- */
.timeline{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
@media (max-width:980px){ .timeline{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .timeline{grid-template-columns:1fr;} }
.timeline-step{background:#fff; padding:28px 24px; position:relative; overflow:hidden; transition:background .25s ease;}
.timeline-step::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;}
.timeline-step:hover::before{transform:scaleX(1);}
.timeline-step:hover{background:var(--sand);}
.timeline-step .num{font-family:'IBM Plex Mono'; color:var(--teal-deep); font-size:13px; display:block; margin-bottom:14px;}
.timeline-step h4{font-size:16.5px; margin-bottom:8px;}
.timeline-step p{font-size:13.5px; color:var(--muted);}

/* ---------- sample report slider ---------- */
.report-slider{position:relative; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; box-shadow:var(--shadow-card);}
.report-track{display:flex; transition:transform .45s var(--ease-pop);}
.report-page{min-width:100%; padding:40px; min-height:420px;}
.report-page .rp-eyebrow{font-family:'IBM Plex Mono'; font-size:11px; color:var(--amber); text-transform:uppercase;}
.report-page h3{font-size:22px; margin:10px 0 16px;}
.report-photo-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px;}
@media (max-width:640px){ .report-photo-row{grid-template-columns:1fr;} }
.report-photo{background:var(--sand); aspect-ratio:4/3; position:relative; overflow:hidden; border-radius:10px;}
.report-photo img{width:100%; height:100%; object-fit:cover;}
.report-caption{
  position:absolute; left:0; right:0; bottom:0; background:rgba(11,14,26,0.85); color:#fff;
  font-family:'IBM Plex Mono'; font-size:10.5px; padding:8px 10px; line-height:1.5;
}
.report-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid var(--line);
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px; z-index:5; transition:transform .2s var(--ease-pop), background .2s ease, color .2s ease;
}
.report-nav:hover{background:var(--teal); color:#06231F; transform:translateY(-50%) scale(1.08);}
.report-nav.prev{left:14px;} .report-nav.next{right:14px;}
.report-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px;}
.report-dots button{width:7px; height:7px; border-radius:50%; border:none; background:var(--line); padding:0; cursor:pointer; transition:background .2s ease, transform .2s ease;}
.report-dots button.active{background:var(--teal); transform:scale(1.3);}
.demo-badge{display:inline-block; background:var(--sand); color:var(--navy-ink); font-family:'IBM Plex Mono'; font-size:11px; padding:6px 12px; border-radius:20px; margin-bottom:18px;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:20px 4px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:16px; font-weight:600;
  font-family:'Space Grotesk'; color:var(--navy-ink); transition:color .2s ease;
}
.faq-q:hover{color:var(--teal-deep);}
.faq-q::after{content:"+"; font-size:20px; color:var(--teal); flex-shrink:0; transition:transform .25s var(--ease-pop);}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{padding:0 4px 22px; font-size:14.5px; color:var(--muted); max-width:70ch;}

/* ---------- legal notice block ---------- */
.legal-box{background:var(--sand); border-left:3px solid var(--amber); border-radius:0 10px 10px 0; padding:26px 28px;}
.legal-box p{font-size:14px; color:var(--navy-ink); line-height:1.65;}
.legal-box p + p{margin-top:12px;}

/* ---------- form ---------- */
form.styled{max-width:820px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
@media (max-width:600px){ .form-row{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono';}
input,select,textarea{
  background:#fff; border:1px solid var(--line); color:var(--navy-ink); padding:12px 14px;
  font-family:'Inter'; font-size:15px; border-radius:var(--radius); outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.on-navy input, .on-navy select, .on-navy textarea{background:var(--navy-2); border-color:#3D5080; color:#fff;}
input:focus, select:focus, textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(23,184,166,.15);}
textarea{resize:vertical; min-height:96px;}
.honeypot{position:absolute; left:-9999px; opacity:0;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted);}
.checkbox-row input{width:auto; margin-top:3px;}
.submit-row{display:flex; align-items:center; gap:18px; margin-top:6px; flex-wrap:wrap;}
.form-status{font-size:13.5px;}
.form-status.ok{color:var(--teal-deep);}
.form-status.err{color:#B0522F;}
fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:0;}
.on-navy fieldset{border-color:#3D5080;}
legend{font-size:12.5px; color:var(--muted); font-family:'IBM Plex Mono'; padding:0 6px;}
.on-navy legend{color:var(--muted-on-navy);}
.radio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px;}
.radio-opt{display:flex; align-items:center; gap:8px; font-size:14px;}
.radio-opt input{width:auto;}

/* ---------- contact strip ---------- */
.contact-strip{display:flex; flex-wrap:wrap; gap:28px; font-family:'IBM Plex Mono'; font-size:13.5px;}
.contact-strip a{text-decoration:none; border-bottom:1px solid transparent;}
.contact-strip a:hover{border-bottom-color:currentColor; color:var(--teal-deep);}

/* ---------- final CTA ---------- */
.final-cta{text-align:center; position:relative; overflow:hidden;}
.final-cta.on-navy::before{content:""; position:absolute; inset:0; background:radial-gradient(640px 320px at 50% 0%, rgba(23,184,166,.26), transparent 60%); pointer-events:none;}
.final-cta .wrap{position:relative;}
.final-cta h2{font-size:clamp(28px,3.6vw,42px); max-width:16ch; margin:0 auto 18px;}
.final-cta p.lede{max-width:52ch; margin:0 auto 34px; color:var(--muted-on-navy); font-size:17px;}
.final-cta .btn-row{justify-content:center;}
.final-cta .service-line{margin-top:24px; font-size:13px; color:var(--muted-on-navy); font-family:'IBM Plex Mono';}

/* ---------- footer ---------- */
footer{padding:56px 0 90px; border-top:1px solid var(--line); background:var(--navy);}
@media (min-width:721px){ footer{padding-bottom:56px; } }
footer, footer a{color:#fff;}
.footer-inner{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start;}
.footer-inner .mono{font-size:12px; color:var(--muted-on-navy); line-height:1.8;}
.fcol h5{font-size:12px; text-transform:uppercase; color:var(--muted-on-navy); margin:0 0 12px; font-family:'IBM Plex Mono'; font-weight:500;}
.fcol p, .fcol a{font-size:13.5px; color:#EDEEF0; display:block; text-decoration:none; margin-bottom:8px; transition:color .2s ease;}
.fcol a:hover{color:var(--teal);}
.footer-bottom{margin-top:36px; padding-top:24px; border-top:1px solid #3A4C78;}
.footer-bottom p{font-size:11.5px; color:var(--muted-on-navy); line-height:1.7; max-width:90ch;}

/* ---------- generic page header (interior pages) ---------- */
.page-header{padding:64px 0 20px; position:relative; overflow:hidden;}
.page-header::before{
  content:""; position:absolute; top:-140px; right:-100px; width:440px; height:440px; pointer-events:none;
  background:radial-gradient(circle, rgba(23,184,166,.20), transparent 70%);
}
.page-header::after{
  content:""; position:absolute; bottom:-160px; left:-120px; width:360px; height:360px; pointer-events:none;
  background:radial-gradient(circle, rgba(242,179,61,.16), transparent 70%);
}
.page-header .wrap{position:relative;}
.page-header .eyebrow{margin-bottom:14px;}
.page-header h1{font-size:clamp(28px,4vw,44px);}
.page-header p.lede{color:var(--muted); font-size:17px; max-width:60ch; margin-top:16px;}

/* ---------- misc ---------- */
.divider{height:1px; background:var(--line); margin:0;}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal, .bracket-frame::before, .bracket-frame::after, .bracket-frame .bk-tr, .bracket-frame .bk-br{transition:none !important;}
  html{scroll-behavior:auto;}
}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

.confirm-box{max-width:640px; margin:0 auto; text-align:center; padding:60px 0;}
.confirm-box .mark{width:56px; height:56px; border:2px solid var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:var(--teal-deep); font-size:24px;}
.note-box{background:var(--teal-soft); border-left:3px solid var(--teal); border-radius:0 10px 10px 0; padding:18px 20px; font-size:14px; color:var(--navy-ink); margin-top:20px; text-align:left;}