/* ==========================================================================
   cittadino.us — design system
   Light editorial palette. Porcelain surfaces, lapis accent.
   Cormorant display + Inter UI. Self-hosted: no third-party requests.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Cormorant;src:url(fonts/cormorant-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-400-ext.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-400-italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* surfaces — light, cool porcelain */
  --paper:      #fcfcfd;
  --paper-cool: #f6f7fa;
  --mist:       #eef1f6;
  --mist-deep:  #e2e7ef;
  --white:      #ffffff;

  /* ink — cool charcoal, never black */
  --ink:        #232833;
  --ink-soft:   #4e5665;
  --ink-mute:   #828b9b;

  /* accent — lapis */
  --lapis:      #3d6ea8;
  --lapis-deep: #2b5182;
  --lapis-lt:   #93b3d6;
  --lapis-wash: #eef3fa;

  /* semantic — muted, elegant */
  --verde:      #4e7d63;
  --verde-wash: #ecf4ef;
  --ambra:      #a87e33;
  --ambra-wash: #fbf3e3;
  --clay:       #a85543;
  --clay-wash:  #f9ede9;

  /* lines & shadow (cool-tinted, never gray-black) */
  --rule:       rgba(35,40,51,.11);
  --rule-lapis: rgba(61,110,168,.26);
  --shadow-sm:  0 1px 2px rgba(37,58,88,.05), 0 2px 8px rgba(37,58,88,.04);
  --shadow-md:  0 2px 4px rgba(37,58,88,.05), 0 12px 32px rgba(37,58,88,.07);
  --shadow-lg:  0 4px 8px rgba(37,58,88,.05), 0 24px 60px rgba(37,58,88,.10);

  --measure: 68ch;
  --wrap: 1180px;
  --radius: 3px;
  --radius-lg: 6px;
  --nav-h: 72px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--lapis-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--lapis);outline-offset:3px;border-radius:2px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:Cormorant,Georgia,serif;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.9rem,6.2vw,4.6rem);line-height:1.04;font-weight:500;letter-spacing:-.022em}
h2{font-size:clamp(2.1rem,3.8vw,2.9rem);line-height:1.14;font-weight:500;letter-spacing:-.016em}
h3{font-size:clamp(1.4rem,2.2vw,1.72rem);line-height:1.24;font-weight:600}
h4{font-family:Inter,sans-serif;font-size:.94rem;font-weight:600;letter-spacing:.01em}
p{margin:0 0 1.15em}
strong{font-weight:600;color:var(--ink)}
small{font-size:.86rem}

.eyebrow{
  font-family:Inter,sans-serif;font-size:.685rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--lapis-deep);
  margin:0 0 1.1rem;display:block;
}
.lede{font-size:1.16rem;line-height:1.66;color:var(--ink-soft);font-weight:300}
.measure{max-width:var(--measure)}
.center{text-align:center}
.mt-0{margin-top:0}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.6rem,780px);margin-inline:auto}
section{padding-block:clamp(3.6rem,7vw,6.4rem)}
.band-cool{background:var(--paper-cool)}
.band-mist{background:var(--mist)}
.band-lapis{background:var(--lapis-wash)}

.rule-lapis{border:0;height:1px;background:var(--rule-lapis);margin:0}
.hr-ornament{display:flex;align-items:center;gap:.9rem;margin:2.4rem 0}
.hr-ornament::before,.hr-ornament::after{content:"";flex:1;height:1px;background:var(--rule-lapis)}
.hr-ornament span{width:5px;height:5px;border-radius:50%;background:var(--lapis-lt)}

.section-head{margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head p{color:var(--ink-soft);font-weight:300;font-size:1.06rem;margin:.7rem 0 0;max-width:60ch}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.7rem 1.2rem;font-size:.85rem;
}
.skip:focus{left:1rem;top:1rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(252,252,253,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:transform .34s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.site-header__inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.brand{
  font-family:Cormorant,serif;font-size:1.6rem;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:.16em;
}
.brand:hover{text-decoration:none}
.brand__tld{font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--lapis);text-transform:uppercase}

.nav{display:flex;align-items:center;gap:1.9rem}
/* :not(.btn) è necessario: `.nav a` (0-1-1) batterebbe `.btn--lapis` (0-1-0),
   dando testo scuro su fondo lapis — illeggibile — e azzerando il padding del bottone. */
.nav a:not(.btn){
  font-size:.845rem;font-weight:500;color:var(--ink-soft);letter-spacing:.005em;
  position:relative;padding-block:.3rem;
}
.nav a:not(.btn):hover{color:var(--ink);text-decoration:none}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--lapis);transform:scaleX(0);transform-origin:left;
  transition:transform .26s ease;
}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.nav a:not(.btn)[aria-current="page"]{color:var(--ink)}

.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--rule);background:transparent;
  border-radius:var(--radius);cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:11px;width:18px;height:1.5px;background:var(--ink);transition:.24s ease;
}
.nav-toggle span{top:20px}
.nav-toggle span::before{left:0;top:-6px}
.nav-toggle span::after{left:0;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:Inter,sans-serif;font-size:.87rem;font-weight:500;letter-spacing:.008em;
  padding:.82rem 1.6rem;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:all .22s ease;text-align:center;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--primary:hover{background:var(--lapis-deep);border-color:var(--lapis-deep);color:#fff}
.btn--lapis{background:var(--lapis-deep);color:#fff;border-color:var(--lapis-deep)}
.btn--lapis:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-lapis)}
.btn--ghost:hover{border-color:var(--lapis);background:var(--lapis-wash);color:var(--lapis-deep)}
.btn--sm{padding:.6rem 1.15rem;font-size:.82rem}
.btn--lg{padding:1rem 2rem;font-size:.93rem}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.8rem,9vw,7.4rem);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto -10% -55% 55%;height:70%;
  background:radial-gradient(ellipse at center,var(--lapis-wash) 0%,transparent 68%);
  pointer-events:none;z-index:-1;
}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.4rem,5vw,4.6rem);align-items:start}
.hero__lede{font-size:clamp(1.12rem,1.6vw,1.26rem);line-height:1.62;color:var(--ink-soft);font-weight:300;margin:1.6rem 0 0;max-width:54ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.3rem}
.hero__note{font-size:.86rem;color:var(--ink-mute);margin:1.5rem 0 0;line-height:1.6}

/* hero side panel — key facts */
.factbox{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:1.7rem 1.8rem;box-shadow:var(--shadow-md);
}
.factbox h4{color:var(--lapis-deep);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.15rem}
.factbox__row{display:flex;justify-content:space-between;gap:1.2rem;padding:.78rem 0;border-top:1px solid var(--rule)}
.factbox__row:first-of-type{border-top:0;padding-top:0}
.factbox__k{font-size:.87rem;color:var(--ink-soft);line-height:1.45}
.factbox__v{font-family:Cormorant,serif;font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1;white-space:nowrap}
.factbox__foot{font-size:.76rem;color:var(--ink-mute);margin:1.2rem 0 0;line-height:1.55;padding-top:1rem;border-top:1px solid var(--rule)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:1.85rem 1.75rem;transition:border-color .24s ease,box-shadow .24s ease,transform .24s ease;
}
.card h3{margin-bottom:.6rem}
.card p{color:var(--ink-soft);font-size:.94rem;line-height:1.66;margin:0}
.card__num{
  font-family:Cormorant,serif;font-size:1.05rem;font-weight:600;color:var(--lapis);
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--rule-lapis);border-radius:50%;
  margin-bottom:1.1rem;
}
.card--link{display:flex;flex-direction:column}
.card--link:hover{border-color:var(--rule-lapis);box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.card__more{
  margin-top:auto;padding-top:1.2rem;font-size:.83rem;font-weight:500;color:var(--lapis-deep);
  display:inline-flex;align-items:center;gap:.4rem;
}
.card--link:hover .card__more{gap:.65rem}
.card__more span{transition:transform .24s ease}

/* ---------- callouts ---------- */
.callout{
  border-left:2px solid var(--lapis);background:var(--lapis-wash);
  padding:1.35rem 1.6rem;border-radius:0 var(--radius) var(--radius) 0;margin:2rem 0;
}
.callout p:last-child{margin-bottom:0}
.callout__title{
  font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lapis-deep);display:block;margin-bottom:.55rem;
}
.callout--note{border-left-color:var(--verde);background:var(--verde-wash)}
.callout--note .callout__title{color:var(--verde)}
.callout--warn{border-left-color:var(--ambra);background:var(--ambra-wash)}
.callout--warn .callout__title{color:var(--ambra)}
.callout--stop{border-left-color:var(--clay);background:var(--clay-wash)}
.callout--stop .callout__title{color:var(--clay)}

/* ---------- article ---------- */
.crumb{font-size:.8rem;color:var(--ink-mute);margin-bottom:1.6rem}
.crumb a{color:var(--ink-mute)}
.crumb a:hover{color:var(--lapis-deep)}

.article__head{padding-block:clamp(2.6rem,5vw,4.2rem) clamp(1.8rem,3vw,2.6rem)}
.article__head h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
.article__head .lede{margin-top:1.2rem;max-width:62ch}

.article__body{max-width:var(--measure);padding-bottom:clamp(3rem,6vw,5rem)}
.article__body h2{margin:2.9rem 0 1rem;font-size:clamp(1.72rem,2.8vw,2.15rem)}
.article__body h3{margin:2.1rem 0 .7rem}
.article__body h2:first-child,.article__body h3:first-child{margin-top:0}
.article__body ul,.article__body ol{margin:0 0 1.3em;padding-left:1.35rem}
.article__body li{margin-bottom:.55em;padding-left:.2rem}
.article__body li::marker{color:var(--lapis)}
.article__body blockquote{
  margin:1.9rem 0;padding:.2rem 0 .2rem 1.5rem;border-left:2px solid var(--rule-lapis);
  font-family:Cormorant,serif;font-size:1.32rem;line-height:1.5;color:var(--ink-soft);font-style:italic;
}

/* tables */
.table-scroll{overflow-x:auto;margin:1.9rem 0;border:1px solid var(--rule);border-radius:var(--radius-lg)}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--white)}
th,td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
th{
  font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lapis-deep);background:var(--paper-cool);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}

/* ---------- FAQ / details ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.35rem 2.4rem 1.35rem 0;position:relative;
  font-family:Cormorant,serif;font-size:1.28rem;font-weight:600;color:var(--ink);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.85rem;width:9px;height:9px;
  border-right:1.5px solid var(--lapis);border-bottom:1.5px solid var(--lapis);
  transform:rotate(45deg);transition:transform .24s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.95rem}
.faq summary:hover{color:var(--lapis-deep)}
.faq__body{padding:0 2.4rem 1.5rem 0;color:var(--ink-soft);font-size:.96rem}
.faq__body p:last-child{margin-bottom:0}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:1.1rem}
.step{
  position:relative;padding:1.4rem 1.6rem 1.4rem 3.9rem;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--radius-lg);
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:1.4rem;top:1.5rem;
  font-family:Cormorant,serif;font-size:1.15rem;font-weight:600;color:var(--lapis);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-lapis);border-radius:50%;
}
.step h3{font-size:1.16rem;margin-bottom:.35rem}
.step p{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.62}

/* ---------- disclaimer band ---------- */
.disclaimer-band{background:var(--mist);border-top:1px solid var(--rule);padding-block:2.2rem}
.disclaimer-band p{
  font-size:.83rem;line-height:1.68;color:var(--ink-soft);margin:0;max-width:88ch;
}
.disclaimer-band strong{color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--paper-cool);border-top:1px solid var(--rule);padding-block:3.4rem 2rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem}
.footer__about .brand{margin-bottom:.9rem}
.footer__about p{font-size:.86rem;color:var(--ink-soft);line-height:1.66;max-width:34ch;margin:0}
.footer__col h4{
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:.95rem;
}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin-bottom:.55rem}
.footer__col a{font-size:.875rem;color:var(--ink-soft)}
.footer__col a:hover{color:var(--lapis-deep)}
.footer__bottom{
  margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  font-size:.79rem;color:var(--ink-mute);
}

/* ---------- forms & calculator ---------- */
.calc{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;margin:2.2rem 0;
}
.calc__head{padding:1.7rem 1.9rem 1.4rem;border-bottom:1px solid var(--rule);background:var(--paper-cool)}
.calc__head h2{margin:0;font-size:clamp(1.5rem,2.4vw,1.9rem)}
.calc__head p{margin:.5rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.calc__body{padding:1.9rem}
.calc__foot{padding:1.3rem 1.9rem;border-top:1px solid var(--rule);background:var(--paper-cool)}
.calc__foot p{margin:0;font-size:.79rem;color:var(--ink-mute);line-height:1.6}

.field{margin-bottom:1.5rem}
.field__label{
  display:block;font-family:Inter,sans-serif;font-size:.82rem;font-weight:600;
  color:var(--ink);margin-bottom:.45rem;letter-spacing:.005em;
}
.field__hint{display:block;font-size:.79rem;color:var(--ink-mute);margin-top:.4rem;line-height:1.55}
.input{
  width:100%;font-family:Inter,sans-serif;font-size:.95rem;color:var(--ink);
  padding:.72rem .9rem;background:var(--white);
  border:1px solid var(--mist-deep);border-radius:var(--radius);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.input:focus{outline:none;border-color:var(--lapis);box-shadow:0 0 0 3px var(--lapis-wash)}
.input:user-invalid{border-color:var(--clay)}

.choice{display:grid;gap:.7rem}
.choice label{
  display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;
  padding:.95rem 1.1rem;border:1px solid var(--mist-deep);border-radius:var(--radius);
  transition:border-color .2s ease,background .2s ease;
}
.choice label:hover{border-color:var(--lapis-lt);background:var(--lapis-wash)}
.choice input{margin-top:.28rem;accent-color:var(--lapis);flex-shrink:0}
.choice input:checked ~ .choice__t{color:var(--lapis-deep)}
.choice__t{display:block;font-size:.92rem;font-weight:500;line-height:1.4}
.choice__d{display:block;font-size:.82rem;color:var(--ink-mute);margin-top:.2rem;line-height:1.5}

.trips{display:grid;gap:.7rem;margin-bottom:.9rem}
.trip{
  display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;align-items:center;
}
.trip__x{
  width:36px;height:36px;flex-shrink:0;border:1px solid var(--mist-deep);background:transparent;
  border-radius:var(--radius);cursor:pointer;color:var(--ink-mute);font-size:1.1rem;line-height:1;
  transition:all .2s ease;
}
.trip__x:hover{border-color:var(--clay);color:var(--clay);background:var(--clay-wash)}

.result{margin-top:1.9rem;border-top:1px solid var(--rule);padding-top:1.7rem}
.result__badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:.4rem .85rem;border-radius:100px;margin-bottom:1.1rem;
}
.result--ok .result__badge{background:var(--verde-wash);color:var(--verde)}
.result--warn .result__badge{background:var(--ambra-wash);color:var(--ambra)}
.result--stop .result__badge{background:var(--clay-wash);color:var(--clay)}
.result h3{margin-bottom:.9rem}

.estimate{border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;margin:1.3rem 0}
.estimate__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.85rem 1.15rem;border-bottom:1px solid var(--rule);
}
.estimate__row:last-child{border-bottom:0}
.estimate__row--total{background:var(--lapis-wash)}
.estimate__k{font-size:.88rem;color:var(--ink-soft);line-height:1.45}
.estimate__v{
  font-family:Cormorant,serif;font-size:1.35rem;font-weight:600;color:var(--ink);
  line-height:1;white-space:nowrap;text-align:right;
}
.estimate__row--total .estimate__v{color:var(--lapis-deep);font-size:1.55rem}
.estimate__v--neg{color:var(--clay)}

.flags{display:grid;gap:.7rem;margin-top:1.3rem}
.flag{
  display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1.05rem;
  border-radius:var(--radius);font-size:.87rem;line-height:1.55;
}
.flag--warn{background:var(--ambra-wash);color:var(--ink-soft);border-left:2px solid var(--ambra)}
.flag--stop{background:var(--clay-wash);color:var(--ink-soft);border-left:2px solid var(--clay)}
.flag strong{white-space:nowrap}

@media (max-width:520px){
  .trip{grid-template-columns:1fr 1fr;gap:.5rem}
  .trip__x{grid-column:2;justify-self:end}
  .calc__body,.calc__head,.calc__foot{padding-inline:1.25rem}
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:2.6rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer__about{grid-column:1/-1}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:.6rem 1.3rem 1.4rem;box-shadow:var(--shadow-md);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a:not(.btn){padding:.85rem 0;border-bottom:1px solid var(--rule)}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:1rem;border-bottom:0}
}
@media (max-width:680px){
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .wrap,.wrap-narrow{width:min(100% - 1.9rem,var(--wrap))}
  .card{padding:1.5rem 1.35rem}
  .hero__cta .btn{width:100%}
  .footer__grid{grid-template-columns:1fr}
  .factbox{padding:1.4rem 1.35rem}
}

/* ---------- print ---------- */
@media print{
  .site-header,.nav,.site-footer,.hero__cta,.nav-toggle{display:none}
  body{background:#fff;font-size:11pt}
  .reveal{opacity:1;transform:none}
}