:root{
  --navy-900:#081B42;
  --navy-700:#0F2E6B;
  --blue-500:#3B6EA8;
  --signal:#E8590C;
  --paper:#FAFAF8;
  --line:#D8DCE3;
  --font-display:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--navy-900);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue-500);
  font-weight:600;
}
h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;color:var(--navy-900);letter-spacing:0.01em;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-weight:600;font-size:14px;letter-spacing:0.03em;
  padding:14px 26px;border-radius:2px;border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline:3px solid var(--signal); outline-offset:3px;
}
.btn-primary{background:var(--signal);color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(232,89,12,.35);}
.btn-ghost{background:transparent;border-color:rgba(250,250,248,.4);color:var(--paper);}
.btn-ghost:hover{border-color:var(--paper);}
.btn-ghost.dark{border-color:var(--navy-700);color:var(--navy-700);}
.btn-ghost.dark:hover{background:var(--navy-700);color:var(--paper);}
.btn-sm{padding:10px 18px;font-size:12.5px;}

/* road-lane divider — signature structural device */
.road-divider{
  height:3px;width:100%;
  background-image:repeating-linear-gradient(90deg, var(--navy-700) 0 28px, transparent 28px 46px);
  opacity:.55;
}
.road-divider.light{background-image:repeating-linear-gradient(90deg, var(--paper) 0 28px, transparent 28px 46px); opacity:.35;}

/* header */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,248,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:20px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.brand svg{width:34px;height:34px;}
.brand-text{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:0.02em;color:var(--navy-900);}
.brand-text span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;color:var(--blue-500);font-weight:600;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy-700);padding-bottom:3px;border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{border-bottom-color:var(--signal);}
.nav-phone{
  font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--navy-900);
  display:flex;align-items:center;gap:8px;
}
.nav-phone svg{width:16px;height:16px;stroke:var(--signal);}

/* hero */
.hero{
  background:var(--navy-700);
  color:var(--paper);
  padding:88px 0 72px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(180deg, rgba(8,27,66,0) 40%, var(--navy-900) 100%);
  opacity:.5;pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;position:relative;z-index:1;}
.hero h1{font-size:clamp(40px,6vw,68px);line-height:0.98;font-weight:700;}
.hero h1 .accent{color:var(--signal);}
.hero p.sub{
  font-size:18px;max-width:46ch;margin-top:20px;color:rgba(250,250,248,.85);
}
.hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero-tags{display:flex;gap:22px;margin-top:44px;flex-wrap:wrap;}
.hero-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:rgba(250,250,248,.7);display:flex;align-items:center;gap:8px;}
.hero-tag .dot{width:6px;height:6px;background:var(--signal);border-radius:50%;}

.hero-art{display:flex;justify-content:center;align-items:center;}
.hero-art svg{width:100%;max-width:380px;}
.draw-path{
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:draw 2.1s ease forwards .25s;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .draw-path{stroke-dashoffset:0;animation:none;}
}

/* short hero used on services / contact pages */
.page-hero{background:var(--navy-700);color:var(--paper);padding:64px 0 52px;}
.page-hero h1{font-size:clamp(34px,5vw,52px);margin-top:8px;}
.page-hero p{color:rgba(250,250,248,.8);margin-top:14px;max-width:56ch;}

/* sections */
section{padding:76px 0;}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(28px,3.6vw,38px);margin-top:8px;}
.section-head p{color:#3c4a63;margin-top:12px;font-size:16px;}

/* services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.service-card{
  background:var(--paper);padding:30px 26px;
  transition:background .15s ease;
  display:flex;flex-direction:column;
}
.service-card:hover{background:#F0F3F8;}
.service-card .num{font-family:var(--font-mono);font-size:12px;color:var(--blue-500);font-weight:600;}
.service-card h3{font-size:19px;margin-top:14px;letter-spacing:0.01em;}
.service-card p{font-size:14.5px;color:#4a5670;margin-top:8px;flex-grow:1;}
.service-card .price{
  font-family:var(--font-mono);font-size:13px;color:var(--navy-700);font-weight:600;
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
}
.service-card .book-btn{margin-top:14px;align-self:flex-start;}

/* services list — icon beside description, button beside price */
.services-list{border-top:1px solid var(--line);}
.service-row{
  display:flex;align-items:center;gap:28px;
  padding:28px 0;border-bottom:1px solid var(--line);
}
.service-row:hover{background:#F5F7FA;}
.service-icon{
  width:60px;height:60px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);border-radius:50%;
}
.service-icon svg{width:32px;height:32px;stroke:var(--navy-700);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.service-body{flex-grow:1;min-width:0;}
.service-body .num{font-family:var(--font-mono);font-size:11px;color:var(--blue-500);font-weight:600;letter-spacing:.06em;}
.service-body h3{font-size:19px;margin-top:6px;letter-spacing:0.01em;}
.service-body p{font-size:14.5px;color:#4a5670;margin-top:6px;max-width:52ch;}
.service-actions{
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:12px;
  min-width:150px;align-self:stretch;
}
.service-actions .price{font-family:var(--font-mono);font-size:14px;color:var(--navy-700);font-weight:600;}
@media (max-width:700px){
  .service-row{flex-wrap:wrap;}
  .service-actions{flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin-left:88px;min-width:0;}
}
@media (max-width:520px){
  .service-row{gap:16px;}
  .service-actions{margin-left:0;}
}

/* how it works — real sequence */
.how{background:var(--navy-900);color:var(--paper);}
.how .section-head p{color:rgba(250,250,248,.7);}
.how .eyebrow{color:var(--signal);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.step{position:relative;padding:0 20px 0 0;}
.step:not(:last-child)::after{
  content:"";position:absolute;top:20px;right:-2px;width:100%;height:2px;
  background-image:repeating-linear-gradient(90deg, var(--signal) 0 10px, transparent 10px 18px);
  z-index:0;
}
.step-marker{
  width:40px;height:40px;border-radius:50%;border:2px solid var(--signal);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:600;color:var(--signal);
  background:var(--navy-900);position:relative;z-index:1;
}
.step h3{font-size:17px;margin-top:18px;}
.step p{font-size:14px;color:rgba(250,250,248,.65);margin-top:8px;}

/* service area */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.area-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:18px;}
.area-list li{
  font-family:var(--font-mono);font-size:14px;color:var(--navy-900);
  padding:10px 0;border-bottom:1px dashed var(--line);
}
.area-visual{
  aspect-ratio:1/1;border:2px solid var(--navy-700);border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at center, rgba(15,46,107,.06), transparent 70%);
}
.area-visual .ring{position:absolute;border:1px dashed rgba(15,46,107,.35);border-radius:50%;}
.area-visual .ring.r1{inset:18%;}
.area-visual .ring.r2{inset:36%;}
.area-visual .center{
  width:14px;height:14px;background:var(--signal);border-radius:50%;
  box-shadow:0 0 0 8px rgba(232,89,12,.15);
}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.trust-item{background:var(--paper);padding:34px 28px;}
.trust-item .fig{font-family:var(--font-display);font-size:30px;color:var(--navy-700);}
.trust-item p{font-size:13.5px;color:#4a5670;margin-top:6px;}

/* CTA / contact */
.cta{background:var(--navy-700);color:var(--paper);text-align:center;}
.cta h2{font-size:clamp(30px,5vw,46px);}
.cta p{color:rgba(250,250,248,.8);margin-top:14px;max-width:52ch;margin-inline:auto;}
.cta-phone{
  font-family:var(--font-mono);font-size:clamp(30px,6vw,44px);font-weight:600;
  color:var(--signal);display:block;margin-top:30px;letter-spacing:.02em;
}
.cta-buttons{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap;}

/* contact page */
.contact-info-card{
  background:var(--navy-700);color:var(--paper);padding:44px 40px;border-radius:2px;
  max-width:480px;margin:0 auto;
}
.contact-info-card h3{color:var(--paper);font-size:20px;}
.contact-line{display:flex;align-items:center;gap:14px;margin-top:20px;font-family:var(--font-mono);font-size:15px;}
.contact-line svg{width:19px;height:19px;stroke:var(--signal);flex-shrink:0;}
.contact-line a:hover{text-decoration:underline;}

footer{background:var(--navy-900);color:rgba(250,250,248,.6);padding:36px 0;}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-family:var(--font-mono);font-size:12.5px;}
.footer-row a{color:rgba(250,250,248,.8);}
.footer-row a:hover{color:var(--signal);}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px;}
  .step:not(:last-child)::after{display:none;}
  .area-grid{grid-template-columns:1fr;}
  .trust{grid-template-columns:1fr;}
  .nav-links{order:3;width:100%;justify-content:center;}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .area-list{grid-template-columns:1fr;}
  .nav-phone span{display:none;}
}
