/* فارس للتخليص الجمركي
   Palette from the previous site: navy #253A6F, red #D03232 (CTA only), plus a deeper navy for dark surfaces.
   Display: Hail Elastic Light (client font). Body: IBM Plex Sans Arabic. */
@font-face{font-family:"Hail Elastic"; src:url("/fonts/hail-elastic-light.v1.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap}

:root{
  /* 60-30-10: --bg is the dominant surface; --surface, white cards and the navies are structure; --accent (red) only for primary CTA and focus on light */
  --bg:#F7F8FC; --surface:#E8ECF7;
  --text:#0F1730; --text-muted:#4A5472;
  --accent:#D03232; --on-accent:#FFFFFF;
  --navy:#253A6F; --deep:#131D3F;
  --paper:#FFFFFF;
  --line:color-mix(in srgb,var(--text) 14%,transparent);
  --line-soft:color-mix(in srgb,var(--text) 8%,transparent);

  --font-display:"Hail Elastic","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Arabic",system-ui,sans-serif;

  --lh-body:1.85; --lh-head:1.25;
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4.5rem; --s-7:7rem;
  --section-y:clamp(4.5rem,11vw,9rem);
  --r-sm:12px; --r:22px; --r-lg:32px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0; padding-bottom:5.25rem; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:1.125rem; line-height:var(--lh-body); -webkit-font-smoothing:antialiased}
@media(min-width:56rem){body{padding-bottom:0}}
img,svg,video,iframe{max-width:100%}
img,svg,video{height:auto; display:block}
h1,h2,h3{font-family:var(--font-display); font-weight:400; font-synthesis:none; letter-spacing:0; margin:0 0 var(--s-2); line-height:var(--lh-head); text-wrap:balance}
h1{font-size:clamp(2.75rem,6.5vw + .25rem,5rem); line-height:1.22}
h2{font-size:clamp(2rem,3.4vw + .75rem,3.125rem); line-height:1.25}
h3{font-size:clamp(1.5rem,1vw + 1.25rem,2rem)}
p{margin:0 0 var(--s-2); max-width:65ch; text-wrap:pretty}
a{color:inherit}
.muted{color:var(--text-muted)}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.dark :focus-visible,.site-footer :focus-visible{outline-color:#fff}

.container{width:min(100% - 2rem,76rem); margin-inline:auto}
.narrow{width:min(100% - 2rem,46rem)}
.section{padding-block:var(--section-y)}
.eyebrow{display:inline-block; font-size:1rem; font-weight:600; color:var(--text-muted); margin-bottom:var(--s-2)}
.dark{background:var(--deep); color:#fff}
.dark .muted,.dark .definition{color:color-mix(in srgb,#fff 78%,var(--deep))}
.split{display:grid; gap:var(--s-5)}
@media(min-width:56rem){.split{grid-template-columns:1fr 1fr; gap:var(--s-6); align-items:start}}

.skip-link{position:absolute; inset-inline-start:1rem; top:-4rem; background:var(--navy); color:#fff; padding:.9rem 1.25rem; z-index:100; border-radius:10px}
.skip-link:focus{top:1rem}

/* ============ Buttons & links (48px minimum targets) ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px; padding:.75rem 1.75rem; border-radius:999px; font:600 1.0625rem/1.3 var(--font-body); text-decoration:none; transition:transform .25s var(--ease),background-color .2s,box-shadow .25s; text-align:center; cursor:pointer; border:0}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-2px); background:color-mix(in srgb,var(--accent) 90%,black); box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-ghost{border:1.5px solid currentColor; color:inherit; background:transparent}
.btn-ghost:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.text-link{display:inline-flex; align-items:center; gap:.4rem; min-height:48px; font-weight:600; text-underline-offset:.35em}
.cta-row{display:flex; flex-direction:column; gap:var(--s-1); align-items:stretch; margin-block:var(--s-4)}
@media(min-width:40rem){.cta-row{flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s-3)}}

/* ============ Header ============ */
.site-header{background:var(--bg); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line-soft)}
.header-row{display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:var(--s-2)}
.brand{display:inline-flex; align-items:baseline; gap:.7rem; min-height:48px; text-decoration:none}
.brand-name{font:400 2.5rem/1 var(--font-display); color:var(--navy)}
.brand-sub{font-size:.9375rem; color:var(--text-muted); white-space:nowrap}
@media(max-width:24rem){.brand-sub{display:none}}
.nav-toggle{min-height:48px; min-width:48px; padding:0 1.25rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; color:var(--text); font:600 1rem var(--font-body); cursor:pointer}
.site-nav{display:none; position:absolute; inset-inline:0; top:100%; background:var(--bg); border-bottom:1px solid var(--line); padding:var(--s-2) 1rem var(--s-3); flex-direction:column; gap:.25rem; box-shadow:0 24px 40px -28px color-mix(in srgb,var(--text) 40%,transparent)}
.site-nav.is-open{display:flex}
.site-nav a:not(.btn){display:flex; align-items:center; min-height:52px; text-decoration:none; font-weight:500; font-size:1.125rem}
.site-nav a[aria-current="page"]{font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.5em}
.site-nav .btn{margin-top:var(--s-1)}
@media(min-width:56rem){
  .nav-toggle{display:none}
  .site-nav{display:flex; position:static; flex-direction:row; align-items:center; gap:var(--s-3); border:0; padding:0; background:none; box-shadow:none}
  .site-nav a:not(.btn){font-size:1rem; min-height:48px; position:relative}
  .site-nav a:not(.btn):hover{color:var(--navy)}
  .site-nav .btn{margin:0; min-height:48px; padding-inline:1.4rem}
}

/* ============ Hero ============ */
.hero{padding-block:clamp(2.5rem,7vw,5rem) var(--section-y)}
.hero-grid{display:grid; gap:var(--s-5)}
@media(min-width:60rem){.hero-grid{grid-template-columns:1.35fr .65fr; gap:var(--s-5); align-items:stretch}}
.hero-title{margin-bottom:var(--s-3)}
.mark{background:linear-gradient(transparent 58%,color-mix(in srgb,#5574CE 30%,transparent) 58% 90%,transparent 90%); padding-inline:.12em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.lede{font-size:clamp(1.1875rem,1.2vw + 1rem,1.5rem); color:var(--text-muted); max-width:34rem; line-height:1.8}
.hero-copy .cta-row{margin-top:var(--s-4)}

.stats{list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line)}
@media(min-width:48rem){.stats{grid-template-columns:repeat(4,1fr)}}
.stats li{padding:var(--s-3) 0; display:flex; flex-direction:column; min-width:0}
.stats li:nth-child(odd){padding-inline-end:var(--s-2)}
@media(min-width:48rem){
  .stats li{padding-inline:var(--s-3); border-inline-start:1px solid var(--line-soft)}
  .stats li:first-child{padding-inline-start:0; border-inline-start:0}
}
.stats strong{font:600 clamp(1.5rem,1.4vw + 1.1rem,2.125rem)/1.2 var(--font-body); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.stats span{color:var(--text-muted); font-size:1rem}

.panel{position:relative; overflow:hidden; border-radius:var(--r-lg); color:#fff; padding:var(--s-4); display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-4); min-height:26rem;
  background:
    radial-gradient(circle at 100% 0%,rgba(85,116,206,.55),transparent 46%),
    repeating-radial-gradient(circle at 100% 0%,transparent 0 30px,rgba(255,255,255,.075) 30px 31px),
    linear-gradient(165deg,#1C2C60,#131D3F)}
.panel-num{font:400 clamp(8rem,22vw,12rem)/.85 var(--font-display); margin:0; letter-spacing:-.08em; direction:ltr; text-align:end}
.panel-label{font-size:1.375rem; margin:0; max-width:14ch; line-height:1.5}
.pins{list-style:none; margin:0; padding:var(--s-3) 0 0; border-top:1px solid rgba(255,255,255,.22); display:grid; gap:.35rem}
.pins li{display:flex; align-items:center; gap:.75rem; color:color-mix(in srgb,#fff 90%,var(--deep)); min-width:0}
.pins li::before{content:""; width:.6rem; height:.6rem; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.18); flex:none}

/* ============ Statement (who we are) ============ */
.statement{background:var(--paper); border-block:1px solid var(--line-soft)}
.lead{font:400 clamp(1.3125rem,1.1vw + 1.05rem,1.75rem)/1.8 var(--font-body); max-width:40ch; margin:0 0 var(--s-4); text-wrap:pretty}
.surface{background:var(--surface)}
.facts{margin:0; display:grid; gap:0}
.facts div{padding:var(--s-2) 0; border-top:1px solid var(--line); display:grid; gap:.1rem}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{color:var(--text-muted); font-size:1rem}
.facts dd{margin:0; font-weight:600; font-size:1.1875rem}

/* ============ Services bento ============ */
.section-head{display:grid; gap:var(--s-1); margin-bottom:var(--s-5); max-width:44rem}
.section-head p{margin:0; color:var(--text-muted); font-size:1.25rem}
.bento{display:grid; gap:var(--s-2); grid-template-columns:1fr}
@media(min-width:48rem){.bento{grid-template-columns:repeat(12,1fr); gap:var(--s-3)}}
.tile{position:relative; display:flex; flex-direction:column; gap:var(--s-2); background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--s-4) var(--s-3); min-width:0; transition:transform .35s var(--ease),border-color .2s,box-shadow .35s var(--ease)}
.tile:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:0 22px 40px -28px color-mix(in srgb,var(--text) 45%,transparent)}
.tile .n{font:400 1.375rem/1 var(--font-display); color:var(--text-muted)}
.tile h3{margin:0; font-size:clamp(1.75rem,1.2vw + 1.4rem,2.375rem)}
.tile p{margin:0; color:var(--text-muted); max-width:40ch}
.tile .more{margin-top:auto; padding-top:var(--s-2); display:inline-flex; align-items:center; min-height:48px; font-weight:600; text-decoration:none}
.tile .more::after{content:"\2190"; margin-inline-start:.5rem; transition:transform .25s var(--ease)}
.tile:hover .more::after{transform:translateX(-4px)}
.tile.dark{background:linear-gradient(165deg,#1C2C60,#131D3F); border-color:transparent}
.tile.dark .n,.tile.dark p{color:color-mix(in srgb,#fff 80%,var(--deep))}
.tile.tint{background:var(--surface); border-color:transparent}
@media(min-width:48rem){
  .tile{padding:var(--s-4); min-height:17rem}
  .t1{grid-column:span 7} .t2{grid-column:span 5} .t3{grid-column:span 5} .t4{grid-column:span 7} .t5{grid-column:span 6} .t6{grid-column:span 6}
  .t1,.t4{min-height:19rem}
}

.promise{display:grid; gap:var(--s-2); margin-top:var(--s-3)}
@media(min-width:48rem){.promise{grid-template-columns:1fr 1fr; gap:var(--s-3)}}
.promise div{border:1px solid var(--line); border-radius:var(--r); padding:var(--s-3) var(--s-4); display:grid; gap:.25rem}
.promise h3{margin:0; font-size:1.75rem}
.promise p{margin:0; color:var(--text-muted)}

/* ============ Stepper ============ */
.stepper{list-style:none; counter-reset:step; margin:var(--s-5) 0 0; padding:0; display:grid; gap:var(--s-4); position:relative}
.stepper li{counter-increment:step; position:relative; padding-inline-start:4.5rem; min-width:0}
.stepper li::before{content:counter(step); position:absolute; inset-inline-start:0; top:0; width:3.25rem; height:3.25rem; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font:400 1.625rem/1 var(--font-display)}
.stepper li::after{content:""; position:absolute; inset-inline-start:1.625rem; top:3.75rem; bottom:-1.75rem; width:1px; background:var(--line)}
.stepper li:last-child::after{display:none}
.stepper h3{font-size:1.625rem; margin-bottom:.25rem}
.stepper p{margin:0; color:var(--text-muted)}
@media(min-width:56rem){
  .stepper{grid-template-columns:repeat(4,1fr); gap:var(--s-3)}
  .stepper li{padding-inline-start:0; padding-top:5rem}
  .stepper li::after{inset-inline-start:3.75rem; inset-inline-end:-1.5rem; top:1.625rem; bottom:auto; width:auto; height:1px}
}

/* ============ Cards (blog) ============ */
.cards{display:grid; gap:var(--s-2); margin-top:var(--s-4)}
@media(min-width:48rem){.cards{grid-template-columns:repeat(3,1fr); gap:var(--s-3)}}
.cards-list{display:grid; gap:var(--s-2); margin-top:var(--s-4)}
@media(min-width:48rem){.cards-list{grid-template-columns:repeat(2,1fr); gap:var(--s-3)}}
.card{display:flex; flex-direction:column; gap:var(--s-1); background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--s-3) var(--s-3) var(--s-2); text-decoration:none; min-width:0; transition:transform .35s var(--ease),border-color .2s,box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:0 22px 40px -28px color-mix(in srgb,var(--text) 45%,transparent)}
.card .tag{align-self:flex-start; font-size:.9375rem; color:var(--navy); background:var(--surface); border-radius:999px; padding:.15rem .85rem; font-weight:600}
.card h3,.card h2{font-size:1.625rem; margin:.4rem 0 0; line-height:1.35}
.card p{margin:0; color:var(--text-muted); font-size:1rem; line-height:1.75}
.card .go{margin-top:auto; padding-top:var(--s-1); font-weight:600; min-height:48px; display:inline-flex; align-items:center}

/* ============ Calculator teaser ============ */
.teaser{position:relative; overflow:hidden; border-radius:var(--r-lg); color:#fff; padding:clamp(2rem,6vw,4.5rem);
  background:
    radial-gradient(circle at 0% 100%,rgba(85,116,206,.5),transparent 50%),
    repeating-radial-gradient(circle at 0% 100%,transparent 0 34px,rgba(255,255,255,.07) 34px 35px),
    linear-gradient(165deg,#1C2C60,#131D3F);
  display:grid; gap:var(--s-3)}
.teaser h2{margin:0; max-width:18ch}
.teaser p{margin:0; color:color-mix(in srgb,#fff 82%,var(--deep)); font-size:1.25rem; max-width:36ch}
.teaser .cta-row{margin:0}
@media(min-width:56rem){.teaser{grid-template-columns:1.3fr .7fr; align-items:end}.teaser .cta-row{justify-content:flex-end}}

/* ============ FAQ ============ */
.faq-wrap{display:grid; gap:var(--s-4)}
@media(min-width:60rem){.faq-wrap{grid-template-columns:.8fr 1.2fr; gap:var(--s-6); align-items:start} .faq-side{position:sticky; top:7rem}}
.faq{border-top:1px solid var(--text)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); min-height:64px; padding-block:.9rem; cursor:pointer; font:600 1.1875rem/1.6 var(--font-body); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; width:2.5rem; height:2.5rem; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:1.5rem; font-weight:400; line-height:1; transition:transform .3s var(--ease),background-color .2s}
.faq details[open] summary::after{content:"\2212"; background:var(--navy); color:#fff; border-color:var(--navy)}
.faq details p{padding-bottom:var(--s-3); color:var(--text-muted); max-width:62ch}
.faq details p a{color:var(--navy); font-weight:600}

/* ============ Contact ============ */
.contact-grid{display:grid; gap:var(--s-5)}
@media(min-width:56rem){.contact-grid{grid-template-columns:1fr 1fr; gap:var(--s-6); align-items:start}}
.big-phone{display:inline-flex; align-items:center; min-height:56px; font:600 clamp(2rem,4vw + 1rem,3.25rem)/1.2 var(--font-body); font-variant-numeric:tabular-nums; text-decoration:none; letter-spacing:.01em; margin-block:var(--s-1)}
.big-phone:hover{text-decoration:underline; text-underline-offset:.2em}
.contact-card{font-style:normal; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.25); margin-top:var(--s-3)}
.contact-card > *{margin:0; padding:var(--s-2) 0; border-bottom:1px solid rgba(255,255,255,.14)}
.contact-card small{display:block; font-size:.9375rem; color:color-mix(in srgb,#fff 70%,var(--deep))}
.contact-card a{display:inline-flex; align-items:center; min-height:48px; text-underline-offset:.3em}
.map-card{border-radius:var(--r); overflow:hidden; background:var(--navy); border:1px solid rgba(255,255,255,.18)}
.map-card iframe{display:block; width:100%; height:20rem; border:0; filter:saturate(.9)}
@media(min-width:56rem){.map-card iframe{height:25rem}}
.map-actions{display:flex; flex-wrap:wrap; gap:var(--s-1); padding:var(--s-2)}
.map-actions .btn{flex:1 1 11rem}

/* ============ Footer ============ */
.site-footer{position:relative; overflow:hidden; background:var(--deep); color:#fff; padding-block:var(--s-6) var(--s-4); border-top:1px solid rgba(255,255,255,.12)}
.footer-grid{display:grid; gap:var(--s-4); position:relative; z-index:1}
@media(min-width:48rem){.footer-grid{grid-template-columns:2fr 1fr 1.3fr}}
.brand-foot{font:400 2rem/1.2 var(--font-display); margin:0 0 var(--s-1)}
.site-footer .muted{color:color-mix(in srgb,#fff 72%,var(--deep))}
.site-footer nav,.site-footer address{display:flex; flex-direction:column; font-style:normal}
.site-footer a{display:flex; align-items:center; min-height:48px; text-decoration:none}
.site-footer a:hover{text-decoration:underline; text-underline-offset:.3em}
.legal{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid rgba(255,255,255,.14); position:relative; z-index:1}
.wordmark{font:400 clamp(9rem,34vw,26rem)/.78 var(--font-display); color:rgba(255,255,255,.055); margin:var(--s-4) 0 calc(var(--s-4) * -1); text-align:center; user-select:none; pointer-events:none; max-width:none}

/* ============ Mobile contact dock ============ */
.dock{position:fixed; inset-inline:0; bottom:0; z-index:60; display:flex; gap:.75rem; padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line)}
.dock .btn{flex:1}
.dock .btn-ghost{color:var(--text)}
@media(min-width:56rem){.dock{display:none}}

/* ============ Scroll reveal (CSS only, progressive) ============ */
@keyframes rise{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero .rise{animation:rise .9s var(--ease) both}
  .hero .rise:nth-child(2){animation-delay:.08s}.hero .rise:nth-child(3){animation-delay:.16s}.hero .rise:nth-child(4){animation-delay:.24s}
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 35%}
  }
}

/* ============ Inner pages: breadcrumb, article ============ */
.page-head{padding-block:clamp(2rem,6vw,4.5rem) var(--s-4)}
.crumbs{display:flex; flex-wrap:wrap; gap:.25rem .5rem; list-style:none; padding:0; margin:0 0 var(--s-3); font-size:1rem; color:var(--text-muted)}
.crumbs li+li::before{content:"\2039"; margin-inline-end:.5rem}
.crumbs a{display:inline-flex; align-items:center; min-height:48px; text-underline-offset:.3em}
.meta-line{display:flex; flex-wrap:wrap; gap:.25rem 1rem; color:var(--text-muted); font-size:1rem; margin-bottom:var(--s-2)}
.article-h1{font-size:clamp(2.375rem,5.5vw + .5rem,4.25rem); max-width:20ch; line-height:1.22}
.page-head .definition{font-size:1.3125rem; line-height:1.85}
.definition{font-size:1.25rem; max-width:46rem}
.toc{background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--s-3); margin-block:var(--s-4)}
.toc p{font:600 1.0625rem var(--font-body); margin-bottom:.5rem}
.toc ol{margin:0; padding-inline-start:1.5rem}
.toc a{display:inline-flex; align-items:center; min-height:44px; text-underline-offset:.3em}

.prose{padding-bottom:var(--s-4); font-size:1.1875rem}
.prose h2{font-size:clamp(1.875rem,2.8vw + 1rem,2.75rem); margin-top:var(--s-6); scroll-margin-top:5.5rem}
.prose h3{font-size:clamp(1.5rem,1vw + 1.2rem,1.875rem); margin-top:var(--s-4)}
.prose p,.prose li{max-width:68ch}
.prose ul,.prose ol{padding-inline-start:1.6rem; margin:0 0 var(--s-3)}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--navy); font-weight:600; text-underline-offset:.25em}
.prose .callout{background:var(--surface); border-inline-start:4px solid var(--navy); border-radius:var(--r-sm); padding:var(--s-2) var(--s-3); margin:var(--s-3) 0}
.prose .callout p{margin:0}
.table-wrap{overflow-x:auto; margin:var(--s-3) 0; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--paper)}
.prose table{border-collapse:collapse; width:100%; min-width:34rem; font-size:1.0625rem; line-height:1.65}
.prose caption{caption-side:top; text-align:start; padding:var(--s-2) var(--s-3); font-weight:600; background:var(--surface)}
.prose th,.prose td{padding:.8rem 1rem; text-align:start; vertical-align:top; border-top:1px solid var(--line-soft)}
.prose thead th{background:var(--bg); border-top:0; border-bottom:1.5px solid var(--text)}
.sources{border-top:1px solid var(--text); margin-top:var(--s-5); padding-top:var(--s-3)}
.sources h2{font-size:1.875rem; margin-top:0}
.sources ul{padding-inline-start:1.4rem}
.sources a{display:inline-flex; align-items:center; min-height:44px; text-underline-offset:.3em}
.cta-block{margin-top:var(--s-6); border-radius:var(--r-lg); padding:clamp(1.75rem,5vw,3rem); background:linear-gradient(165deg,#1C2C60,#131D3F); color:#fff}
.cta-block h2{font-size:clamp(1.875rem,3vw + .75rem,2.75rem); margin-bottom:var(--s-1)}
.cta-block .definition{color:color-mix(in srgb,#fff 80%,var(--deep))}
.related h2{font-size:1.875rem}

/* ============ Calculator ============ */
.calc{display:grid; gap:var(--s-3); margin-top:var(--s-4)}
@media(min-width:56rem){.calc{grid-template-columns:1.1fr .9fr; align-items:start; gap:var(--s-4)}}
.calc-form{background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:var(--s-4) var(--s-3); display:grid; gap:var(--s-3)}
@media(min-width:48rem){.calc-form{padding:var(--s-4)}}
.field{display:grid; gap:.4rem; min-width:0}
.field label,.field legend{font-weight:600}
.field small{color:var(--text-muted); font-size:.9375rem; line-height:1.6}
.field input,.field select{width:100%; min-height:56px; padding:.6rem 1rem; font:400 1.1875rem var(--font-body); color:var(--text); background:var(--bg); border:1.5px solid color-mix(in srgb,var(--text) 28%,transparent); border-radius:14px; transition:border-color .2s,background-color .2s}
.field input:hover{border-color:var(--text-muted)}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--navy); outline-offset:2px; background:#fff}
.field.check label{display:flex; align-items:center; gap:.75rem; min-height:48px; cursor:pointer}
.field.check input{width:24px; min-height:24px; height:24px; padding:0; accent-color:var(--navy); flex:none}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{min-height:48px; padding:0 1.25rem; border-radius:999px; border:1.5px solid color-mix(in srgb,var(--text) 28%,transparent); background:var(--paper); color:var(--text); font:600 1rem var(--font-body); cursor:pointer; transition:background-color .2s,border-color .2s,color .2s}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.results{background:linear-gradient(165deg,#1C2C60,#131D3F); color:#fff; border-radius:var(--r-lg); padding:var(--s-4) var(--s-3); position:sticky; top:6rem}
@media(min-width:48rem){.results{padding:var(--s-4)}}
.results h2{font-size:1.875rem; margin-bottom:var(--s-2)}
.results dl{margin:0}
.results .line{display:flex; justify-content:space-between; gap:var(--s-2); padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.16)}
.results dt{color:color-mix(in srgb,#fff 82%,var(--deep))}
.results dd{margin:0; font-weight:600; text-align:end; font-variant-numeric:tabular-nums}
.results .total{border-bottom:0; padding-top:var(--s-2); font-size:1.25rem}
.results .total dd{font:600 1.875rem/1.2 var(--font-body)}
.results .note{font-size:.9375rem; margin:var(--s-2) 0 0; color:color-mix(in srgb,#fff 78%,var(--deep))}