/* =========================================================
   ASSISAFE — shared stylesheet
   Swap the values below with your own design system.
   ========================================================= */
:root{
  /* ---- color ---- */
  --color-primary:#1F3147;      /* navy — brand mark color */
  --color-primary-hover:#2E465F;
  --color-primary-tint:#E4E9EE;
  --color-primary-tint-strong:#8EA1B4;
  --color-ink:#1C1C1C;          /* headline / cta text */
  --color-ink-hover:#000000;
  --color-text:#3A3A3A;
  --color-text-muted:#7A7A7A;
  --color-text-whisper:#D8D3C9;
  --color-bg:#F4F1EC;           /* warm canvas */
  --color-bg-lifted:#FBFAF7;
  --color-bg-bone:#F1F0ED;
  --color-surface:#FFFFFF;
  --color-footer-bg:#1C1C1C;
  --color-border:rgba(28,28,28,0.16);
  --color-border-strong:rgba(28,28,28,0.4);
  --color-border-inverse:rgba(255,255,255,0.32);
  --color-amber:#C98A2E;
  --color-amber-bg:#F6E9D3;
  --color-sage:#4C7A5E;
  --color-sage-bg:#E1EBE4;
  --color-rust:#B8432F;
  --color-rust-bg:#F5E1DC;
  --color-link:#1F3147;
  --color-link-hover:#2E465F;

  /* ---- type ---- */
  --font-display:'Sofia Sans', Arial, sans-serif;
  --font-body:'Sofia Sans', Arial, sans-serif;

  /* ---- spacing ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --space-24:96px; --space-32:128px;
  --section-pad-desktop:112px;
  --section-pad-mobile:56px;
  --card-pad-desktop:40px;
  --card-pad-mobile:24px;
  --container-max:1240px;
  --container-gutter:24px;

  /* ---- radius ---- */
  --radius-sm:6px;
  --radius-button:20px;
  --radius-card:40px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* ---- shadow ---- */
  --shadow-1:rgba(31,49,71,0.08) 0px 4px 24px 0px;
  --shadow-2:rgba(28,28,28,0.10) 0px 24px 48px 0px;
  --shadow-3:rgba(28,28,28,0.22) 0px 70px 110px 0px;
  --ease-standard:cubic-bezier(.4,0,.2,1);
}

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,400;0,450;0,500;0,600;0,700;1,400&display=swap');

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-weight:450;
  font-size:16px;
  line-height:1.5;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--color-ink); margin:0; letter-spacing:-0.02em; }
h1{ font-size:clamp(38px,6vw,64px); font-weight:500; line-height:1.03; }
h2{ font-size:clamp(28px,4.2vw,42px); font-weight:500; line-height:1.15; }
h3{ font-size:clamp(20px,2.4vw,24px); font-weight:500; line-height:1.25; }
p{ margin:0; }
a{ color:var(--color-link); text-decoration:none; }
a:hover{ color:var(--color-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2.5px solid var(--color-primary);
  outline-offset:3px;
  border-radius:4px;
}
ul{ margin:0; padding:0; list-style:none; }

.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-gutter); }
.section{ padding:var(--section-pad-mobile) 0; }
@media (min-width:900px){ .section{ padding:var(--section-pad-desktop) 0; } }
.section-alt{ background:var(--color-bg-bone); }
.section-ink{ background:var(--color-ink); color:var(--color-text-whisper); }
.section-ink h2, .section-ink h3{ color:var(--color-surface); }

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:var(--space-4);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--color-primary); }
.section-ink .eyebrow{ color:var(--color-amber); }
.section-ink .eyebrow::before{ background:var(--color-amber); }

.lede{ font-size:18px; color:var(--color-text); max-width:56ch; }
.section-ink .lede{ color:var(--color-text-whisper); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-size:16px; font-weight:500; letter-spacing:-0.01em;
  padding:14px 28px; border-radius:var(--radius-button);
  border:1.5px solid transparent; cursor:pointer;
  transition:background var(--ease-standard) 160ms, color var(--ease-standard) 160ms, transform 120ms var(--ease-standard), border-color 160ms;
  white-space:nowrap;
}
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--color-ink); color:var(--color-bg); }
.btn-primary:hover{ background:var(--color-ink-hover); color:var(--color-bg); }
.btn-outline{ background:transparent; color:var(--color-ink); border-color:var(--color-ink); }
.btn-outline:hover{ background:var(--color-ink); color:var(--color-bg); }
.section-ink .btn-outline{ color:var(--color-surface); border-color:var(--color-border-inverse); }
.section-ink .btn-outline:hover{ background:var(--color-surface); color:var(--color-ink); }
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn-block{ width:100%; }

/* ---- header / nav (checkbox-driven mobile menu, no JS) ---- */
.site-header{ position:sticky; top:0; z-index:50; padding:16px var(--container-gutter) 0; }
.nav-pill{
  max-width:var(--container-max); margin:0 auto;
  background:rgba(251,250,247,0.9); backdrop-filter:blur(10px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-1);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px 10px 22px;
}
.brand{ display:flex; align-items:center; }
.brand img{ height:30px; width:auto; }
.nav-links{ display:none; align-items:center; gap:var(--space-8); }
.nav-links a{ font-size:15px; font-weight:500; color:var(--color-ink); padding:8px 4px; }
.nav-links a:hover{ color:var(--color-primary); }
.nav-links a[aria-current="page"]{ color:var(--color-primary); }
.nav-actions{ display:flex; align-items:center; gap:var(--space-3); }
.nav-cta{ display:none; }
.nav-toggle-label{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--color-ink); color:var(--color-bg);
  cursor:pointer;
}
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.nav-mobile-panel{
  max-height:0; overflow:hidden; max-width:var(--container-max); margin:0 auto;
  transition:max-height 240ms var(--ease-standard);
}
.nav-toggle:checked ~ .nav-mobile-panel{ max-height:420px; }
.nav-mobile-panel-inner{
  background:var(--color-bg-lifted); border:1px solid var(--color-border); border-top:none;
  border-radius:0 0 28px 28px; margin-top:-14px; padding:24px 22px 22px;
  display:flex; flex-direction:column; gap:var(--space-4);
  box-shadow:var(--shadow-1);
}
.nav-mobile-panel-inner a{ font-size:17px; font-weight:500; color:var(--color-ink); padding:6px 0; }
.nav-mobile-panel-inner a[aria-current="page"]{ color:var(--color-primary); }
@media (min-width:960px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle-label{ display:none; }
  .nav-mobile-panel{ display:none; }
}

/* ---- hero ---- */
.hero{ padding-top:var(--space-16); }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-16); align-items:center; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.05fr 0.95fr; gap:var(--space-24); } }
.hero-media{ position:relative; justify-self:center; width:min(420px,100%); }
.hero-media .orbit{
  position:absolute; inset:-40px; border:1.5px solid var(--color-primary-tint-strong);
  border-radius:50%; opacity:0.55;
}
.hero-media .circle-img{
  width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow:var(--shadow-2);
  border:6px solid var(--color-bg-lifted);
}
.hero-media .circle-img img{ width:100%; height:100%; object-fit:cover; }
.hero-badge{
  position:absolute; bottom:6%; left:-8%; background:var(--color-surface); border-radius:var(--radius-card);
  padding:18px 22px; box-shadow:var(--shadow-2); display:flex; align-items:center; gap:14px;
  max-width:230px;
}
.hero-badge svg{ flex:none; color:var(--color-primary); }
.hero-badge strong{ display:block; font-family:var(--font-display); font-size:20px; color:var(--color-ink); }
.hero-badge span{ font-size:13px; color:var(--color-text-muted); }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8); }
.hero-trust{ display:flex; flex-wrap:wrap; gap:var(--space-8); margin-top:var(--space-12); }
.hero-trust div{ display:flex; flex-direction:column; }
.hero-trust strong{ font-family:var(--font-display); font-size:28px; color:var(--color-ink); }
.hero-trust span{ font-size:13px; color:var(--color-text-muted); }

/* ---- section headers ---- */
.section-head{ max-width:640px; margin-bottom:var(--space-16); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--space-8); margin-bottom:var(--space-16); }
.section-head-row .section-head{ margin-bottom:0; }

/* ---- grids ---- */
.grid{ display:grid; gap:var(--space-8); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
@media (min-width:640px){ .grid-2{ grid-template-columns:1fr 1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } }

/* ---- cards ---- */
.card{ background:var(--color-surface); border-radius:var(--radius-card); padding:var(--card-pad-mobile); box-shadow:var(--shadow-1); }
@media (min-width:640px){ .card{ padding:var(--card-pad-desktop); } }
.card-icon{
  width:56px; height:56px; border-radius:50%; background:var(--color-primary-tint);
  display:flex; align-items:center; justify-content:center; color:var(--color-primary); margin-bottom:var(--space-6);
}
.card h3{ margin-bottom:var(--space-3); }
.card p{ color:var(--color-text-muted); font-size:15px; }
.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--space-6); font-weight:500; font-size:15px; color:var(--color-primary); }
.card-link:hover{ color:var(--color-primary-hover); }
.card-link svg{ transition:transform 160ms var(--ease-standard); }
.card-link:hover svg{ transform:translateX(3px); }

/* ---- process timeline ---- */
.timeline{ position:relative; display:flex; flex-direction:column; gap:var(--space-8); }
.timeline::before{
  content:""; position:absolute; left:23px; top:12px; bottom:12px; width:1.5px;
  background:var(--color-border-strong); opacity:0.5;
}
@media (min-width:900px){
  .timeline{ flex-direction:row; gap:0; }
  .timeline::before{ left:0; right:0; top:23px; bottom:auto; height:1.5px; width:auto; }
}
.timeline-step{ position:relative; display:flex; gap:var(--space-6); flex:1; padding-right:var(--space-8); }
@media (min-width:900px){ .timeline-step{ flex-direction:column; gap:var(--space-6); padding-right:var(--space-4); } }
.timeline-num{
  flex:none; width:48px; height:48px; border-radius:50%; background:var(--color-ink); color:var(--color-bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; font-weight:600;
  z-index:1;
}
.timeline-step h3{ font-size:19px; margin-bottom:6px; }
.timeline-step p{ font-size:14.5px; color:var(--color-text-muted); }

/* ---- stats ---- */
.stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); }
@media (min-width:640px){ .stats-row{ grid-template-columns:repeat(4,1fr); } }
.stat strong{ display:block; font-family:var(--font-display); font-size:clamp(32px,5vw,48px); font-weight:500; color:var(--color-ink); }
.section-ink .stat strong{ color:var(--color-surface); }
.stat span{ font-size:14px; color:var(--color-text-muted); }
.section-ink .stat span{ color:var(--color-text-whisper); }

/* ---- testimonials ---- */
.testimonial{ background:var(--color-surface); border-radius:var(--radius-card); padding:var(--card-pad-mobile); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:var(--space-6); height:100%; }
@media (min-width:640px){ .testimonial{ padding:var(--card-pad-desktop); } }
.testimonial p{ font-size:16.5px; color:var(--color-text); }
.testimonial-person{ display:flex; align-items:center; gap:var(--space-3); margin-top:auto; }
.testimonial-avatar{ width:48px; height:48px; border-radius:50%; overflow:hidden; flex:none; background:var(--color-primary-tint); }
.testimonial-avatar img{ width:100%; height:100%; object-fit:cover; }
.testimonial-person strong{ display:block; font-size:14.5px; color:var(--color-ink); }
.testimonial-person span{ font-size:13px; color:var(--color-text-muted); }
.stars{ color:var(--color-amber); display:flex; gap:3px; }

/* ---- comparison table ---- */
.compare-wrap{ overflow-x:auto; border-radius:var(--radius-card); box-shadow:var(--shadow-1); background:var(--color-surface); }
table.compare{ width:100%; border-collapse:collapse; min-width:640px; }
table.compare th, table.compare td{ padding:20px 24px; text-align:left; border-bottom:1px solid var(--color-border); font-size:15px; }
table.compare thead th{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--color-ink); background:var(--color-bg-bone); }
table.compare thead th:first-child{ border-top-left-radius:var(--radius-card); }
table.compare thead th:last-child{ border-top-right-radius:var(--radius-card); }
table.compare tbody th{ font-weight:500; color:var(--color-ink); white-space:nowrap; }
table.compare tbody tr:last-child td, table.compare tbody tr:last-child th{ border-bottom:none; }
table.compare td.yes{ color:var(--color-sage); font-weight:600; }
table.compare td.no{ color:var(--color-text-whisper); }
table.compare .tier-featured{ background:var(--color-primary-tint); }

/* ---- pricing / tiers ---- */
.tier{ background:var(--color-surface); border-radius:var(--radius-card); padding:var(--card-pad-desktop); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:var(--space-6); }
.tier.featured{ background:var(--color-ink); color:var(--color-bg); box-shadow:var(--shadow-2); }
.tier.featured h3, .tier.featured .tier-price{ color:var(--color-surface); }
.tier-price{ font-family:var(--font-display); font-size:36px; font-weight:500; color:var(--color-ink); }
.tier-price span{ font-size:14px; font-weight:450; color:var(--color-text-muted); }
.tier.featured .tier-price span{ color:var(--color-text-whisper); }
.tier ul{ display:flex; flex-direction:column; gap:var(--space-3); }
.tier ul li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; }
.tier ul li svg{ flex:none; color:var(--color-primary); margin-top:2px; }
.tier.featured ul li svg{ color:var(--color-amber); }

/* ---- FAQ (details/summary, CSS only) ---- */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-item:first-child{ border-top:1px solid var(--color-border); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6); padding:22px 4px; font-family:var(--font-display); font-size:18px; font-weight:500; color:var(--color-ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .faq-icon{ flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--color-border-strong); display:flex; align-items:center; justify-content:center; position:relative; }
.faq-item summary .faq-icon::before, .faq-item summary .faq-icon::after{ content:""; position:absolute; background:var(--color-ink); transition:transform 200ms var(--ease-standard); }
.faq-item summary .faq-icon::before{ width:12px; height:1.5px; }
.faq-item summary .faq-icon::after{ width:1.5px; height:12px; }
.faq-item[open] summary .faq-icon::after{ transform:scaleY(0); }
.faq-item p{ padding:0 4px 24px; max-width:70ch; color:var(--color-text-muted); font-size:15px; }

/* ---- before / after ---- */
.ba-wrap{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:760px){ .ba-wrap{ grid-template-columns:1fr 1fr; } }
.ba-col{ border-radius:var(--radius-card); padding:var(--card-pad-mobile); }
@media (min-width:640px){ .ba-col{ padding:var(--card-pad-desktop); } }
.ba-before{ background:var(--color-bg-bone); border:1.5px dashed var(--color-border-strong); }
.ba-after{ background:var(--color-surface); box-shadow:var(--shadow-1); }
.ba-label{ font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:var(--space-4); display:block; }
.ba-before .ba-label{ color:var(--color-rust); }
.ba-after .ba-label{ color:var(--color-sage); }
.ba-col ul{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-6); }
.ba-col ul li{ display:flex; gap:10px; font-size:15px; align-items:flex-start; }
.ba-col ul li svg{ flex:none; margin-top:2px; }
.ba-before ul li svg{ color:var(--color-rust); }
.ba-after ul li svg{ color:var(--color-sage); }

/* ---- forms ---- */
.form-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); }
@media (min-width:640px){ .form-grid.cols-2{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:14px; font-weight:500; color:var(--color-ink); }
.field .req{ color:var(--color-rust); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-size:16px; padding:14px 16px; border-radius:var(--radius-sm);
  border:1.5px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-tint); }
.field textarea{ resize:vertical; min-height:140px; font-family:var(--font-body); }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--color-text-muted); }
.checkbox-row input{ margin-top:3px; }
fieldset{ border:none; padding:0; margin:0; }
legend{ font-family:var(--font-display); font-size:16px; font-weight:500; color:var(--color-ink); padding:0; margin-bottom:var(--space-3); }

/* ---- info / contact cards ---- */
.info-card{ display:flex; gap:var(--space-4); align-items:flex-start; }
.info-card svg{ flex:none; width:22px; height:22px; color:var(--color-primary); margin-top:3px; }
.info-card strong{ display:block; font-size:14px; color:var(--color-text-muted); margin-bottom:2px; }
.info-card a, .info-card span.value{ font-size:16px; color:var(--color-ink); font-weight:500; }

/* ---- map placeholder ---- */
.map-placeholder{
  border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-1);
  aspect-ratio:16/10; background:var(--color-bg-bone);
}
.map-placeholder img{ width:100%; height:100%; object-fit:cover; }

/* ---- cta banner ---- */
.cta-banner{
  background:var(--color-ink); border-radius:var(--radius-card); padding:var(--space-16) var(--card-pad-mobile);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-6);
}
@media (min-width:640px){ .cta-banner{ padding:var(--space-24) var(--space-24); } }
.cta-banner h2{ color:var(--color-surface); max-width:20ch; }
.cta-banner p{ color:var(--color-text-whisper); max-width:52ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; }
.cta-banner .btn-outline{ color:var(--color-surface); border-color:var(--color-border-inverse); }
.cta-banner .btn-outline:hover{ background:var(--color-surface); color:var(--color-ink); }

/* ---- footer ---- */
.site-footer{ background:var(--color-footer-bg); color:var(--color-text-whisper); padding:var(--space-24) 0 var(--space-8); }
.footer-top{ display:grid; grid-template-columns:1fr; gap:var(--space-16); padding-bottom:var(--space-16); }
@media (min-width:760px){ .footer-top{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-brand img{ height:34px; margin-bottom:var(--space-6); }
.footer-brand p{ font-size:14.5px; max-width:34ch; color:var(--color-text-whisper); opacity:0.85; }
.footer-social{ display:flex; gap:var(--space-3); margin-top:var(--space-6); }
.footer-social a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--color-border-inverse); display:flex; align-items:center; justify-content:center; color:var(--color-surface); }
.footer-social a:hover{ background:var(--color-surface); color:var(--color-ink); }
.footer-head{ font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-surface); margin-bottom:var(--space-6); }
.footer-links{ display:flex; flex-direction:column; gap:14px; }
.footer-links a{ font-size:14px; color:var(--color-text-whisper); }
.footer-links a:hover{ color:var(--color-surface); }
.footer-bottom{
  border-top:1px solid var(--color-border-inverse); padding-top:var(--space-8);
  display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:space-between; align-items:center;
  font-size:13px; color:var(--color-text-whisper); opacity:0.75;
}
.footer-legal{ display:flex; gap:var(--space-6); flex-wrap:wrap; }

/* ---- utility ---- */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--color-ink); color:var(--color-bg);
  padding:12px 18px; border-radius:var(--radius-sm); z-index:100; transition:top 160ms var(--ease-standard);
}
.skip-link:focus{ top:12px; }
.badge-tag{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill); background:var(--color-primary-tint); color:var(--color-primary); }
.mt-0{ margin-top:0 !important; }