/* ==================================================================
   BIAGGI LIFE — concept site
   CSC Innovations. Shared stylesheet for all seven pages.

   Brand navy #203946 is sampled from his own logo file.

   TWO RULES THIS BUILD IS HELD TO:
   1. Text never sits on noise. Over photography it sits only inside a
      measured scrim, never on an unmanaged image or a pattern.
   2. Nothing is hidden behind JS, scroll position or a disclosure
      widget. Every page paints complete on first load.
   ================================================================== */

:root{
  --navy:#203946;          /* HIS navy, from Biaggi-Logo-New.png */
  --navy-d:#152833;
  --navy-dd:#0E1C24;
  --navy-2:#2B4859;

  --gold:#C8A64B;
  --gold-lt:#E3C87E;
  --gold-d:#6A5210;

  --paper:#FFFFFF;
  --paper-2:#F3F5F6;
  --rule:#D9DFE2;

  --ink:#15252E;
  --ink-2:#3A4B54;
  --on-navy:#FFFFFF;
  --on-navy-2:#CBD8DE;

  --display:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1220px;
  --gut:clamp(20px,5vw,60px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  font-variant-numeric:tabular-nums lining-nums; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2{font-family:var(--display); font-weight:800; line-height:1.02;
  letter-spacing:-.036em; margin:0}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(1.85rem,3.5vw,2.7rem)}
h3{font-family:var(--display); font-weight:700; font-size:1.1rem; line-height:1.3;
  letter-spacing:-.02em; margin:0}
p{margin:0 0 .95em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.pad{padding-block:clamp(58px,6.4vw,100px)}
.pad-s{padding-block:clamp(44px,4.6vw,70px)}

:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; background:var(--gold-lt); color:var(--navy-d);
  padding:14px 20px; z-index:400; font-weight:700}
.skip:focus{left:12px; top:12px}

.eyebrow{font-size:.875rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-d); margin:0 0 14px}
/* Any eyebrow on a dark field takes the light gold. The hero and page headers
   are dark without carrying .on-dark, so they are named explicitly — the dark
   gold on navy measured 1.82:1, which only a rendered-pixel check catches. */
.on-dark .eyebrow,.hero .eyebrow,.phead .eyebrow{color:var(--gold-lt)}
.sec-head{display:grid; gap:16px 56px; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:end}
.sec-head p{font-size:clamp(1.01rem,1.25vw,1.08rem); color:var(--ink-2); max-width:48ch; margin:0}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .sec-head p{color:var(--on-navy-2)}

/* ---------------- buttons ---------------- */
.btn-a,.btn-b{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:1.03rem; letter-spacing:-.015em;
  padding:16px 28px; min-height:54px; text-decoration:none; border:0; cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.btn-a{background:var(--gold); color:#20180A}
.btn-a:hover{background:#DBBC69}
.btn-b{border:1px solid rgba(227,200,126,.62); color:#fff; background:transparent}
.btn-b:hover{background:rgba(227,200,126,.15)}
.btn-dark{background:var(--navy); color:#fff}
.btn-dark:hover{background:var(--navy-d)}

/* ---------------- concept banner (mandatory) ---------------- */
.concept{background:#7A1A1F; color:#fff}
.concept-in{padding-block:11px; font-size:.875rem; line-height:1.55}
.concept a{color:#FCE4B6; text-decoration:underline; text-underline-offset:3px}

/* ---------------- masthead ---------------- */
.mast{background:var(--navy); position:sticky; top:0; z-index:300}
.mast-in{display:flex; align-items:center; gap:20px; min-height:82px}
.mark{flex:0 0 auto; display:block; text-decoration:none}
.mark img{width:172px; height:auto}
.nav{margin-left:auto; display:flex; align-items:center; gap:clamp(8px,1.15vw,20px)}
.nav a{font-size:.925rem; font-weight:500; text-decoration:none; color:#fff;
  padding:13px 2px; min-width:44px; text-align:center; white-space:nowrap;
  border-bottom:2px solid transparent; transition:border-color .18s,color .18s}
.nav a:hover{color:var(--gold-lt); border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold-lt); border-bottom-color:var(--gold)}
.tel{display:inline-flex; align-items:center; gap:9px; background:var(--gold); color:#20180A;
  text-decoration:none; font-family:var(--display); font-weight:700; font-size:.98rem;
  padding:13px 18px; white-space:nowrap; transition:background .18s}
.tel:hover{background:#DBBC69}
.burger{display:none; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.4);
  padding:14px; cursor:pointer; color:#fff}

.lic{background:var(--navy-dd)}
.lic-in{display:flex; flex-wrap:wrap; align-items:center; gap:0 clamp(16px,2.4vw,30px);
  padding-block:11px; font-size:.875rem; font-weight:500; color:var(--on-navy-2)}
.lic-in b{color:var(--gold-lt); font-weight:700}
.lic-in span{display:inline-flex; align-items:center; padding-block:2px}
.lic-in span+span{border-left:1px solid rgba(255,255,255,.22); padding-left:clamp(16px,2.4vw,30px)}

/* ==================================================================
   CINEMATIC HERO (home)
   The photograph carries the feeling; the scrim carries the contrast.
   Text sits only in the deep end of the gradient — never on open image.
   ================================================================== */
.hero{position:relative; background:var(--navy-dd); color:#fff; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%}
.hero-scrim{position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(14,28,36,.96) 0%, rgba(14,28,36,.93) 38%,
                            rgba(14,28,36,.72) 62%, rgba(14,28,36,.52) 100%),
    linear-gradient(to top, rgba(14,28,36,.85) 0%, rgba(14,28,36,0) 42%)}
.hero-in{position:relative; z-index:2; padding-block:clamp(72px,9vw,140px);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px,4.4vw,64px); align-items:center}
.hero h1{color:#fff; max-width:11ch; text-wrap:balance}
.hero-rule{width:92px; height:3px; background:var(--gold); margin:26px 0 22px}
.hero-lede{font-size:clamp(1.08rem,1.45vw,1.22rem); color:#DEE7EB; max-width:44ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}

/* the licence seal — the signature mark of this build */
.seal{position:relative; width:clamp(216px,18vw,260px); margin-inline:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.seal svg{width:100%; height:auto; display:block}
.seal-rot{transform-origin:50% 50%; animation:sealspin 46s linear infinite}
@keyframes sealspin{to{transform:rotate(360deg)}}

/* the schedule of record */
.sched{margin-top:clamp(28px,3vw,38px)}
.sched dl{margin:0; border-top:1px solid rgba(255,255,255,.22)}
.sched-row{display:flex; align-items:baseline; gap:16px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.22)}
.sched dt{flex:1 1 auto; font-size:1rem; color:var(--on-navy-2)}
.sched dd{flex:0 0 auto; margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(1.25rem,1.9vw,1.55rem); color:var(--gold-lt); line-height:1.1;
  letter-spacing:-.03em}
.sched-row.doc dd{font-family:var(--body); font-size:1.02rem; font-weight:600; color:#fff;
  letter-spacing:0}

/* ==================================================================
   PAGE HEADER (inner pages)
   ================================================================== */
.phead{position:relative; background:var(--navy-dd); color:#fff; overflow:hidden}
.phead-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 40%}
.phead-scrim{position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(14,28,36,.96) 0%, rgba(14,28,36,.9) 50%,
                             rgba(14,28,36,.66) 100%)}
.phead-in{position:relative; z-index:2; padding-block:clamp(56px,6.4vw,96px)}
.phead h1{color:#fff; font-size:clamp(2.3rem,4.8vw,3.7rem); max-width:16ch}
.phead p{color:#DEE7EB; max-width:50ch; margin-top:18px;
  font-size:clamp(1.03rem,1.3vw,1.14rem)}
.crumb{font-size:.875rem; color:var(--gold-lt); font-weight:600; letter-spacing:.06em;
  margin:0 0 16px}
.crumb a{text-decoration:none; border-bottom:1px solid transparent}
.crumb a:hover{border-bottom-color:var(--gold-lt)}

/* ==================================================================
   SHARED BLOCKS
   ================================================================== */
/* carrier marks */
.carriers{background:var(--paper-2); border-bottom:1px solid var(--rule)}
.carriers-in{padding-block:clamp(30px,3.2vw,44px)}
.marks{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.marks li{background:#fff; border:1px solid var(--rule); display:flex; align-items:center;
  justify-content:center; padding:20px 22px; min-height:104px}
/* His source PNGs carry heavy blank padding; trimmed on disk so the marks
   read at a comparable optical size inside the tile. */
.marks img{max-height:44px; max-width:100%; width:auto; object-fit:contain}
.marks .txt{font-family:var(--display); font-weight:700; font-size:1.06rem; color:var(--navy);
  text-align:center; letter-spacing:-.02em}
.marks .rest{background:var(--navy); border-color:var(--navy); color:var(--gold-lt);
  font-family:var(--display); font-weight:700; font-size:1.04rem; text-align:center;
  letter-spacing:-.02em}

/* ruled two-column list (coverage, FAQ) */
.plist{margin:clamp(32px,3.4vw,46px) 0 0; padding:0; list-style:none;
  border-top:1px solid var(--rule)}
.plist li{border-bottom:1px solid var(--rule); padding:clamp(20px,2.2vw,28px) 0;
  display:grid; gap:8px 56px; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:baseline}
.plist h3{font-size:clamp(1.2rem,1.7vw,1.45rem); color:var(--navy)}
.plist p{color:var(--ink-2); font-size:1.01rem; margin:0}
.plist .more{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--gold-d);
  text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.plist .more:hover{color:var(--navy)}

/* three-up cards with imagery */
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px);
  margin-top:clamp(32px,3.4vw,46px)}
.card{background:#fff; border:1px solid var(--rule); display:flex; flex-direction:column;
  text-decoration:none; transition:border-color .18s, transform .18s, box-shadow .18s}
a.card:hover{border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 20px 40px -26px rgba(14,28,36,.55)}
.card img{width:100%; height:190px; object-fit:cover}
.card-b{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1 1 auto}
.card h3{color:var(--navy); font-size:1.18rem; margin-bottom:8px}
.card p{color:var(--ink-2); font-size:.99rem; margin:0}
.card .go{margin-top:16px; font-family:var(--display); font-weight:700; font-size:.94rem;
  color:var(--gold-d)}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  border-top:2px solid var(--gold); margin-top:clamp(30px,3.2vw,44px)}
.stats div{padding:26px clamp(16px,1.8vw,26px) 26px 0}
.stats div+div{border-left:1px solid rgba(255,255,255,.22); padding-left:clamp(16px,1.8vw,26px)}
.stats b{display:block; font-family:var(--display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.9rem,3vw,2.6rem); color:var(--gold-lt); line-height:1}
.stats span{display:block; font-size:.97rem; color:var(--on-navy-2); margin-top:9px}

/* process steps */
.steps{display:grid; gap:0; grid-template-columns:repeat(4,minmax(0,1fr));
  margin:clamp(32px,3.4vw,46px) 0 0; padding:0; list-style:none; border-top:2px solid var(--gold)}
.steps li{padding:24px clamp(18px,2vw,28px) 0 0}
.steps li+li{border-left:1px solid rgba(255,255,255,.22); padding-left:clamp(18px,2vw,28px)}
.steps b{display:block; font-family:var(--display); font-size:2rem; font-weight:800;
  color:var(--gold-lt); line-height:1; margin-bottom:11px; letter-spacing:-.04em}
.steps h3{color:#fff; margin-bottom:7px}
.steps p{font-size:.97rem; color:var(--on-navy-2); margin:0}

/* register of tenure (reviews) */
.reg{margin:clamp(32px,3.4vw,46px) 0 0; padding:0; list-style:none;
  border-top:1px solid var(--rule)}
.reg li{border-bottom:1px solid var(--rule); padding:clamp(22px,2.4vw,32px) 0;
  display:grid; gap:10px 44px;
  grid-template-columns:minmax(0,.2fr) minmax(0,1fr) minmax(0,.34fr); align-items:start}
.reg .yrs{font-family:var(--display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.5rem,2.2vw,2rem); color:var(--gold-d); line-height:1; margin:0}
.reg .yrs small{display:block; font-family:var(--body); font-weight:500; font-size:.875rem;
  color:var(--ink-2); letter-spacing:0; margin-top:5px}
.reg blockquote{margin:0; font-size:clamp(1.02rem,1.3vw,1.12rem); color:var(--ink);
  line-height:1.62}
.reg .who{font-size:.97rem; font-weight:600; color:var(--ink-2); text-align:right; margin:0}

/* quote form */
.quote{background:#fff; color:var(--ink); padding:clamp(26px,2.8vw,36px);
  border-top:3px solid var(--gold); box-shadow:0 28px 58px -26px rgba(0,0,0,.6)}
.quote h2{font-size:clamp(1.4rem,1.9vw,1.7rem); color:var(--navy)}
.quote .sub{font-size:.97rem; color:var(--ink-2); margin:10px 0 24px}
.field{margin-bottom:15px}
.field label{display:block; font-size:.9rem; font-weight:600; margin-bottom:7px; color:var(--ink)}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:1rem;
  color:var(--ink); background:#fff; border:1px solid #8E9DA4; border-radius:0; padding:13px;
  min-height:48px; transition:border-color .16s,box-shadow .16s}
.field textarea{min-height:110px; resize:vertical}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233A4B54' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(32,57,70,.3); outline:none}
.btn{display:block; width:100%; font-family:var(--display); font-size:1.04rem; font-weight:700;
  background:var(--navy); color:#fff; border:0; padding:16px; min-height:54px; cursor:pointer;
  margin-top:22px; letter-spacing:-.015em; transition:background .18s,transform .12s}
.btn:hover{background:var(--navy-d)}
.btn:active{transform:translateY(1px)}
.fine{font-size:.875rem; color:var(--ink-2); margin-top:14px; line-height:1.5}

.byphone{border:1px solid rgba(255,255,255,.26); padding:20px 22px; background:var(--navy-2)}
.byphone p{font-size:.9375rem; color:var(--on-navy-2); margin:0 0 6px}
.byphone a{display:inline-flex; align-items:center; min-height:44px; font-family:var(--display);
  font-weight:800; letter-spacing:-.03em; font-size:clamp(1.5rem,2.1vw,1.8rem);
  color:var(--gold-lt); text-decoration:none; border-bottom:2px solid transparent;
  transition:border-color .18s}
.byphone a:hover{border-bottom-color:var(--gold)}
.byphone small{display:block; font-size:.875rem; color:var(--on-navy-2); margin-top:6px}

/* mounted plate */
.plate{margin:0}
.plate .mount{position:relative; display:block}
.plate .mount::before{content:""; position:absolute; left:18px; top:18px; right:-18px;
  bottom:-18px; border:1px solid var(--gold)}
.plate img{position:relative; width:100%}
.plate figcaption{font-size:.9rem; color:var(--ink-2); margin-top:34px}

/* licence panel */
.licence{margin-top:28px; border-top:1px solid var(--rule)}
.licence dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0}
.licence > dl > div{padding:15px 0; border-bottom:1px solid var(--rule)}
.licence > dl > div:nth-child(2){border-left:1px solid var(--rule);
  padding-left:clamp(20px,2.4vw,32px)}
.licence dt{font-size:.875rem; font-weight:600; color:var(--ink-2); margin-bottom:4px}
.licence dd{margin:0; font-family:var(--display); font-weight:800; font-size:1.38rem;
  color:var(--navy); letter-spacing:-.03em}
.licence .states{grid-column:1/-1; border-left:0; padding-left:0}
.licence .states dd{font-family:var(--body); font-weight:400; font-size:1rem;
  color:var(--ink-2); letter-spacing:0; line-height:1.55}

/* map + address */
.map{margin:0}
.map iframe{width:100%; height:clamp(300px,33vw,420px); border:1px solid var(--rule); display:block}
.map .open{display:inline-flex; align-items:center; min-height:44px; margin-top:10px;
  font-family:var(--display); font-weight:700; color:var(--navy); font-size:.97rem}
.addr{border-top:1px solid var(--rule); padding-top:18px; margin:0}
.addr div{padding:11px 0}
.addr div+div{border-top:1px solid var(--rule)}
.addr dt{font-size:.875rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-d); margin-bottom:4px}
.addr dd{margin:0; font-size:1rem; color:var(--ink); line-height:1.55}
.cities{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.cities li{border:1px solid var(--rule); background:var(--paper-2); padding:9px 16px;
  font-family:var(--display); font-weight:600; font-size:1rem; color:var(--navy);
  letter-spacing:-.015em}

/* video list */
.vlist{list-style:none; margin:clamp(32px,3.4vw,46px) 0 0; padding:0; display:grid;
  gap:0 clamp(24px,3vw,48px); grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--rule)}
.vlist li{border-bottom:1px solid var(--rule); padding:20px 0; display:flex;
  align-items:baseline; gap:14px}
.vlist span{flex:0 0 auto; font-family:var(--display); font-weight:800; font-size:.875rem;
  color:var(--gold-d)}
.vlist h3{color:var(--navy); font-weight:600; font-size:1.05rem}
.vlist p{font-size:.95rem; color:var(--ink-2); margin:5px 0 0}

/* closing band */
.close{background:var(--navy-d); color:var(--on-navy)}
.close-in{display:grid; gap:clamp(34px,4.6vw,64px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:start}
.close h2{color:#fff; max-width:14ch}
.close p{color:var(--on-navy-2); max-width:42ch; margin-top:16px}
.actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:26px}
.head-block{border-left:1px solid rgba(255,255,255,.24); padding-left:clamp(22px,2.8vw,38px)}
.head-block div{padding:12px 0}
.head-block div+div{border-top:1px solid rgba(255,255,255,.24)}
.head-block dt{font-size:.875rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:5px}
.head-block dd{margin:0; font-size:1rem; color:#fff; line-height:1.55}

/* ---------------- footer ---------------- */
.foot{background:var(--navy); color:var(--on-navy-2); font-size:.9375rem}
.foot-in{display:grid; gap:32px clamp(26px,3.2vw,48px);
  grid-template-columns:1.25fr .85fr .8fr .85fr; padding-block:clamp(44px,4.8vw,64px)}
.foot h3{font-family:var(--body); font-size:.875rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-lt); font-weight:700; margin-bottom:13px}
.foot a{color:#fff; text-decoration:none; border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--gold-lt)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:8px; line-height:1.5}
.foot .mark img{width:176px}
.foot-blurb{margin-top:15px; max-width:30ch; line-height:1.55}
.social{display:flex; gap:10px; margin-top:16px; list-style:none; padding:0}
.social a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid rgba(255,255,255,.3); color:#fff; transition:background .18s,border-color .18s}
.social a:hover{background:rgba(227,200,126,.16); border-color:var(--gold-lt)}
.legal{border-top:1px solid rgba(255,255,255,.24); padding-block:22px; font-size:.875rem;
  line-height:1.68}
.legal p{margin-bottom:8px}
.legal a{border-bottom:1px solid rgba(255,255,255,.34)}

/* ---------------- entrance, never load-bearing ----------------
   Content is visible by default; these only animate the first paint.
   If the animation never runs, the page is already correct. */
.rise{animation:rise .7s cubic-bezier(.22,.7,.3,1) both}
.rise-2{animation-delay:.1s}
.rise-3{animation-delay:.2s}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .nav a{font-size:.88rem} .mark img{width:156px} .nav{gap:8px}
}
@media (max-width:1040px){
  .hero-in,.close-in{grid-template-columns:1fr; gap:38px}
  .seal{margin-inline:0}
  .sec-head{grid-template-columns:1fr; gap:12px}
  .plist li{grid-template-columns:1fr; gap:6px}
  .trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(3){border-left:0; padding-left:0}
  .stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.22)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(3){border-left:0; padding-left:0}
  .steps li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.22); margin-top:8px; padding-top:22px}
  .marks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .head-block{border-left:0; border-top:1px solid rgba(255,255,255,.24); padding-left:0; padding-top:10px}
  .foot-in{grid-template-columns:1fr 1fr 1fr}
  .foot-in > div:first-child{grid-column:1/-1}
  .plate{max-width:340px}
  .plate .mount::before{left:12px; top:12px; right:-12px; bottom:-12px}
}
@media (max-width:880px){
  .nav,.tel{display:none}
  .burger{display:block}
  .mast-in{position:relative; min-height:72px}
  .nav.open{display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column;
    align-items:stretch; gap:0; background:var(--navy); padding:4px var(--gut) 16px; margin:0;
    box-shadow:0 20px 34px -18px rgba(0,0,0,.7)}
  .nav.open a{padding:15px 0; border-bottom:1px solid rgba(255,255,255,.2); text-align:left}
  .vlist{grid-template-columns:1fr; gap:0}
  .reg li{grid-template-columns:minmax(0,.3fr) minmax(0,1fr); gap:10px 26px}
  .reg .who{grid-column:2; text-align:left}
  .hero-scrim{background:linear-gradient(to bottom, rgba(14,28,36,.93) 0%,
    rgba(14,28,36,.95) 60%, rgba(14,28,36,.97) 100%)}
  .phead-scrim{background:linear-gradient(to bottom, rgba(14,28,36,.93) 0%,
    rgba(14,28,36,.96) 100%)}
}
@media (max-width:600px){
  body{font-size:16px}
  .trio,.stats,.steps{grid-template-columns:1fr}
  .stats div,.stats div+div{border-left:0; padding-left:0}
  .stats div+div{border-top:1px solid rgba(255,255,255,.22)}
  .steps li,.steps li+li{border-left:0; padding-left:0; padding-right:0}
  .steps li+li{border-top:1px solid rgba(255,255,255,.22); margin-top:0; padding-top:20px}
  .marks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .marks .rest{grid-column:1/-1}
  .foot-in{grid-template-columns:1fr}
  .foot-in > div:first-child{grid-column:1}
  .licence dl{grid-template-columns:1fr}
  .licence > dl > div:nth-child(2){border-left:0; padding-left:0}
  .btn-a,.btn-b{flex:1 1 100%}
  .lic-in{gap:0}
  .lic-in span{flex:1 1 50%; padding-block:7px}
  .lic-in span+span{padding-left:16px}
  .lic-in span:nth-child(3){flex:1 1 100%; border-left:0; padding-left:0;
    border-top:1px solid rgba(255,255,255,.22)}
  .reg li{grid-template-columns:1fr; gap:10px}
  .reg .yrs{display:flex; align-items:baseline; gap:9px}
  .reg .yrs small{margin-top:0}
  .seal{width:216px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;
    animation-iteration-count:1 !important}
  .rise{animation:none}
  .seal-rot{animation:none}
}