/* self-hosted fonts: no third-party request, no render-block */
@font-face{font-family:"Young Serif";src:url("fonts/young-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("fonts/nunito-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("fonts/nunito-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("fonts/nunito-sans-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("fonts/nunito-sans-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* =========================================================================
   Autana Hardscapes - design system
   Direction: "stone yard at golden hour". Display: Young Serif. Body: Nunito Sans.
   ========================================================================= */

:root{
  /* surfaces */
  --ink:#191D14;
  --moss-900:#232A1B;
  --moss-700:#3A4430;
  --moss:#8B8A6D;
  --moss-soft:#B6B49B;
  --limestone:#F2EEE5;
  --sand:#DCD3C2;
  --cream:#F4F1E9;
  --white:#FFFDF9;
  /* action */
  --sun:#F0B429;
  --sun-deep:#D89B0C;
  /* text */
  --text:#191D14;
  --text-soft:#4A5340;
  --text-invert:#F4F1E9;
  --text-invert-soft:#C9CBB8;
  /* type */
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  /* scale */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem; --s7:4.5rem; --s8:6.5rem; --s9:9rem;
  --measure:68ch;
  --radius:4px;
  --radius-lg:10px;
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:380ms;
  /* z */
  --z-drop:100; --z-sticky:200; --z-bar:300; --z-modal:400;
  --header-h:76px;
}
@media (min-width:900px){ :root{ --header-h:88px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--limestone);color:var(--text);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;
  letter-spacing:-.015em;text-wrap:balance;margin:0 0 var(--s3)}
h1{font-size:clamp(2.35rem,6.4vw,4.4rem)}
h2{font-size:clamp(1.85rem,4.1vw,3rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
h4{font-family:var(--body);font-weight:800;font-size:1.0625rem;letter-spacing:.01em;margin:0 0 var(--s2)}
p{margin:0 0 var(--s3);text-wrap:pretty;max-width:var(--measure)}
.lede{font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.55;color:var(--text-soft)}
.dark .lede,.ink .lede{color:var(--text-invert-soft)}
.kicker{font-family:var(--body);font-weight:800;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--moss-700);margin:0 0 var(--s2)}
.dark .kicker,.ink .kicker{color:var(--sun)}
strong{font-weight:800}

/* ---------- signature motif: the coursing line ---------- */
.course{display:flex;gap:5px;align-items:center;margin:0 0 var(--s4);padding:0;border:0}
.course span{display:block;height:5px;background:var(--moss);border-radius:1px}
.course span:nth-child(1){width:22px}
.course span:nth-child(2){width:56px;transform:translateY(6px)}
.course span:nth-child(3){width:14px}
.dark .course span{background:var(--sun)}
.dark .course span:nth-child(2){background:var(--moss-soft)}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2.5rem,1180px);margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,860px);margin-inline:auto}
section{position:relative}
.band{padding:var(--s7) 0}
.band-tight{padding:var(--s6) 0}
.band-tall{padding:var(--s8) 0}
.dark{background:var(--moss-900);color:var(--text-invert)}
.dark h1,.dark h2,.dark h3,.ink h1,.ink h2,.ink h3{color:var(--cream)}
.ink{background:var(--ink);color:var(--text-invert)}
.sandband{background:var(--sand)}
.creamband{background:var(--white)}

/* paver-grid texture for dark bands */
.tex{position:relative;isolation:isolate}
.tex::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.055;pointer-events:none;
  background-image:
    linear-gradient(90deg,transparent 0 calc(100% - 1px),#F4F1E9 calc(100% - 1px)),
    linear-gradient(180deg,transparent 0 calc(100% - 1px),#F4F1E9 calc(100% - 1px));
  background-size:112px 46px;
  background-position:0 0,0 0;
}
.tex::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.055;pointer-events:none;
  background-image:linear-gradient(90deg,transparent 0 calc(100% - 1px),#F4F1E9 calc(100% - 1px));
  background-size:112px 46px;background-position:56px 23px;
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.95em 1.5em;border-radius:var(--radius);border:2px solid transparent;
  font-weight:800;font-size:1rem;letter-spacing:.005em;text-decoration:none;
  cursor:pointer;transition:transform 180ms var(--ease),background-color 180ms var(--ease),
  border-color 180ms var(--ease),color 180ms var(--ease),box-shadow 180ms var(--ease)}
.btn-primary{background:var(--sun);color:var(--ink);box-shadow:0 2px 0 var(--sun-deep)}
.btn-primary:hover{background:#FFC64A;transform:translateY(-2px);box-shadow:0 5px 0 var(--sun-deep)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 1px 0 var(--sun-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.dark .btn-ghost,.ink .btn-ghost,.hero .btn-ghost,.svchero .btn-ghost,.cityhero .btn-ghost{color:var(--cream);border-color:rgba(244,241,233,.55)}
.dark .btn-ghost:hover,.ink .btn-ghost:hover,.hero .btn-ghost:hover,.svchero .btn-ghost:hover,.cityhero .btn-ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-sm{padding:.7em 1.15em;font-size:.9375rem}
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--sun);outline-offset:3px;border-radius:2px}

/* ---------- header ---------- */
#top-sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  height:var(--header-h);display:flex;align-items:center;
  background:rgba(25,29,20,.92);
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease),backdrop-filter .25s var(--ease);
}
.site-header.scrolled{background:rgba(25,29,20,.98);box-shadow:0 8px 30px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;gap:var(--s4);width:min(100% - 2rem,1300px);margin-inline:auto}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.brand img{height:42px;width:auto}
.brand-mark{font-family:var(--display);font-size:1.5rem;color:var(--cream);line-height:1;letter-spacing:-.02em}
.brand-sub{display:block;font-family:var(--body);font-size:.625rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sun);margin-top:2px}
.brand:hover .brand-mark{color:var(--sun)}

.mainnav{margin-left:auto;display:none}
@media (min-width:1080px){.mainnav{display:block}}
.mainnav>ul{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.mainnav a,.nav-trigger{
  display:inline-flex;align-items:center;gap:.35em;background:none;border:0;
  padding:.6rem .7rem;color:var(--cream);font-weight:700;font-size:.9375rem;
  text-decoration:none;cursor:pointer;position:relative}
.mainnav a::after,.nav-trigger::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.35rem;height:3px;
  background:var(--sun);transform:scaleX(0);transform-origin:left;
  transition:transform 220ms var(--ease)}
.mainnav a:hover::after,.nav-trigger:hover::after,.nav-trigger[aria-expanded=true]::after{transform:scaleX(1)}
.chev{width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform 220ms var(--ease)}
.nav-trigger[aria-expanded=true] .chev{transform:rotate(-135deg) translateY(-2px)}

.has-drop{position:relative}
.drop-menu{position:absolute;top:100%;left:0;margin:0;padding:.55rem 0 0;list-style:none;min-width:290px}
.drop-menu[hidden]{display:none}
.drop-menu>li:first-child{border-radius:var(--radius) var(--radius) 0 0}
.drop-menu>li{background:var(--white);border-bottom:1px solid var(--sand)}
.drop-menu>li:last-child{border-bottom:0;border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 20px 40px rgba(0,0,0,.22)}
.drop-menu a{display:block;color:var(--ink);padding:.7rem 1rem;font-size:.9375rem;width:100%}
.drop-menu a::after{display:none}
.drop-menu a:hover{background:var(--limestone);color:var(--moss-700)}
.drop-menu a small{display:block;font-weight:400;font-size:.8125rem;color:var(--text-soft)}
@media (hover:hover) and (pointer:fine){.has-drop:hover .drop-menu{display:block}}

/* nav hover preview (desktop only) */
.navpeek{position:absolute;top:100%;left:0;margin-top:.55rem;width:280px;
  background:var(--white);color:var(--ink);padding:1rem 1.1rem;border-radius:var(--radius);
  box-shadow:0 20px 40px rgba(0,0,0,.22);opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 200ms;
  pointer-events:none}
.navpeek strong{display:block;font-size:.95rem;margin-bottom:.25rem}
.navpeek span{display:block;font-size:.85rem;color:var(--text-soft);line-height:1.45}
.navpeek em{display:block;font-style:normal;font-weight:800;font-size:.8rem;color:var(--moss-700);margin-top:.5rem}
/* invisible strip over the margin gap so hover survives the trip from link to card */
.navpeek::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.6rem}
@media (hover:hover) and (pointer:fine) and (min-width:1080px){
  .has-peek:hover .navpeek{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;cursor:pointer}
}

.header-cta{margin-left:auto;display:flex;align-items:center;gap:.6rem}
@media (min-width:1080px){.header-cta{margin-left:var(--s3)}}
.tapcall{display:inline-flex;align-items:center;gap:.45rem;color:var(--cream);
  text-decoration:none;font-weight:800;font-size:1.0625rem;white-space:nowrap}
.tapcall svg{width:1.05em;height:1.05em;fill:var(--sun);flex:0 0 auto}
.tapcall:hover{color:var(--sun)}
.tapcall-label{display:none}
@media (min-width:620px){.tapcall-label{display:inline}}
.header-cta .btn{display:none}
@media (min-width:1080px){.header-cta .btn{display:inline-flex}}

.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:42px;padding:0 10px;background:transparent;border:1px solid rgba(244,241,233,.35);
  border-radius:var(--radius);cursor:pointer}
@media (min-width:1080px){.burger{display:none}}
.burger span{display:block;height:2px;background:var(--cream);transition:transform 220ms var(--ease),opacity 180ms}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobilenav{position:fixed;inset:var(--header-h) 0 0;z-index:var(--z-drop);
  background:var(--ink);overflow-y:auto;padding:var(--s4) 1.25rem var(--s8)}
.mobilenav[hidden]{display:none}
.mobilenav ul{list-style:none;margin:0 0 var(--s4);padding:0}
.mobilenav a{display:block;color:var(--cream);text-decoration:none;font-weight:700;
  font-size:1.15rem;padding:.85rem 0;border-bottom:1px solid rgba(244,241,233,.14)}
.mobilenav a:hover{color:var(--sun)}
.mobilenav .grouplabel{font-family:var(--body);font-weight:800;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sun);margin:var(--s4) 0 .35rem}

/* ---------- mobile sticky action bar ---------- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);
  display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--ink);
  border-top:2px solid var(--sun);box-shadow:0 -6px 24px rgba(0,0,0,.3)}
@media (min-width:1080px){.actionbar{display:none}}
.actionbar a{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.7rem .3rem calc(.7rem + env(safe-area-inset-bottom));
  color:var(--cream);text-decoration:none;font-weight:800;font-size:.8125rem;
  border-right:1px solid rgba(244,241,233,.16)}
.actionbar a:last-child{border-right:0}
.actionbar a.is-primary{background:var(--sun);color:var(--ink)}
.actionbar svg{width:20px;height:20px;fill:currentColor}
body{padding-bottom:74px}
@media (min-width:1080px){body{padding-bottom:0}}

/* ---------- HOME hero: full-bleed photo, bottom-anchored slab ---------- */
.hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;
  background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(93deg,rgba(25,29,20,.90) 0%,rgba(25,29,20,.78) 32%,rgba(25,29,20,.34) 62%,rgba(25,29,20,.10) 88%),
    linear-gradient(178deg,rgba(25,29,20,.68) 0%,rgba(25,29,20,.34) 30%,rgba(25,29,20,.72) 74%,rgba(25,29,20,.93) 100%)}
@media (max-width:760px){
  .hero-media::after{background:linear-gradient(180deg,rgba(25,29,20,.86) 0%,rgba(25,29,20,.62) 26%,rgba(25,29,20,.80) 62%,rgba(25,29,20,.95) 100%)}
}
.hero-inner{position:relative;z-index:1;width:100%;padding:var(--s7) 0 var(--s6);color:var(--cream)}
@media (min-width:900px){.hero-inner{padding:var(--s8) 0 var(--s6)}}
.hero .kicker,.svchero .kicker,.cityhero .kicker{color:#F5E6BC;letter-spacing:.16em}
.hero h1{color:var(--white);max-width:16ch;margin-bottom:var(--s3)}
.hero .lede,.svchero .lede{color:#E4E2D6;max-width:52ch;margin-bottom:var(--s4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:var(--s4)}
.hero-phone{display:inline-flex;align-items:baseline;gap:.5rem;color:var(--cream);
  text-decoration:none;font-weight:800;font-size:1.35rem;margin-bottom:var(--s4)}
.hero-phone span{font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.hero-phone:hover{color:var(--sun)}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem .5rem;list-style:none;margin:0;padding:0}
.hero-chips li{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;
  background:rgba(244,241,233,.12);border:1px solid rgba(244,241,233,.24);border-radius:99px;
  font-size:.8125rem;font-weight:800;letter-spacing:.02em}
.hero-chips li::before{content:"";width:6px;height:6px;background:var(--sun);border-radius:50%}

/* ---------- trust rail ----------
   The rail always carries more claims than fit on one screen, so it runs as a marquee:
   site.js clones the list once and the pair translates -50% forever, which lands the copy
   exactly where the original started. The gap lives on li margin-right (not ul gap) so the
   seam gap matches the inner gaps and the loop is invisible. Without JS - or with reduced
   motion - no clone happens and it stays a plain swipeable strip. */
.trustrail{background:var(--ink);border-top:2px solid var(--sun);padding:var(--s3) 0;
  position:relative;overflow:hidden}
.trustrail .wrap{width:100%;max-width:none;margin:0}
.trustrail ul{display:flex;gap:0;list-style:none;margin:0;padding:0 0 0 var(--s5);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trustrail ul::-webkit-scrollbar{display:none}
.trustrail li{flex:0 0 auto;margin-right:var(--s5);
  color:var(--text-invert-soft);font-weight:800;font-size:.875rem;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5rem}
.trustrail li::before{content:"";width:8px;height:8px;background:var(--sun);
  transform:rotate(45deg);flex:0 0 auto}
/* Edge fades painted in the rail's own colour. The old mask-image faded the bar itself to
   transparent, which showed the cream page through it and read as a broken cut-off. */
.trustrail::before,.trustrail::after{content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(1.5rem,5vw,4rem);pointer-events:none}
.trustrail::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.trustrail::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent)}
.trustrail.is-marquee ul{overflow:visible;width:max-content;padding-left:0;
  animation:trustscroll var(--tr-dur,40s) linear infinite}
.trustrail.is-marquee:hover ul,
.trustrail.is-marquee:focus-within ul{animation-play-state:paused}
@keyframes trustscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- symptom picker ---------- */
.picker{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 var(--s4);padding:0;list-style:none}
.chipbtn{padding:.7em 1.15em;background:var(--white);border:2px solid var(--sand);
  border-radius:99px;font-weight:800;font-size:.9375rem;color:var(--ink);cursor:pointer;
  transition:border-color 200ms var(--ease),background-color 200ms var(--ease),transform 160ms var(--ease)}
.chipbtn:hover{border-color:var(--moss);transform:translateY(-2px)}
.chipbtn:active{transform:scale(.97)}
.chipbtn[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.answer{background:var(--white);border-left:0;border-top:4px solid var(--sun);
  padding:var(--s4);border-radius:0 0 var(--radius-lg) var(--radius-lg);max-width:64ch}
.answer[hidden]{display:none}
.answer p{margin-bottom:var(--s2)}
.arrowlink{display:inline-flex;align-items:center;gap:.4em;font-weight:800;
  color:var(--moss-700);text-decoration:none;border-bottom:2px solid var(--sun);padding-bottom:2px}
.arrowlink .arw{transition:transform 200ms var(--ease)}
.arrowlink:hover .arw{transform:translateX(5px)}
.ink .arrowlink,.dark .arrowlink{color:var(--sun);border-bottom-color:var(--moss-soft)}

/* ---------- services: asymmetric doorway grid (HOME only) ---------- */
.svc-grid{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media (min-width:760px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){
  .svc-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(210px,auto)}
  .svc-grid > .svc.feature{grid-column:span 2;grid-row:span 2}
}
.svc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:210px;padding:var(--s4);background:var(--moss-900);color:var(--cream);
  overflow:hidden;text-decoration:none;isolation:isolate;border-radius:var(--radius);
  transition:transform 450ms var(--ease),box-shadow 450ms var(--ease)}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 450ms var(--ease)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(200deg,rgba(25,29,20,.30),rgba(25,29,20,.88) 72%)}
/* [data-rise].in carries its own transform:none at higher specificity once revealed;
   match that specificity here (plus the .in state) so the hover lift is not silently dropped */
.svc[data-rise].in:hover,.svc[data-rise].in:focus-visible,
.svc:hover,.svc:focus-visible{transform:translateY(-4px);box-shadow:0 20px 44px rgba(25,29,20,.32)}
.svc:hover img,.svc:focus-visible img{transform:scale(1.05)}
.svc h3{color:var(--white);margin-bottom:.25rem}
.svc.feature h3{font-size:clamp(1.7rem,3vw,2.4rem)}
.svc p{font-size:.9375rem;color:#DDDCCF;margin:0;max-width:34ch}
.svc-peek{margin:var(--s3) 0 0;padding:0;list-style:none;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height 380ms var(--ease),opacity 260ms var(--ease),margin 380ms var(--ease)}
.svc-peek li{font-size:.85rem;font-weight:700;color:var(--cream);padding-left:1.1em;position:relative;line-height:1.5}
.svc-peek li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:2px;background:var(--sun)}
.svc-more{display:inline-flex;align-items:center;gap:.35em;margin-top:var(--s3);
  font-weight:800;font-size:.875rem;color:var(--sun)}
.svc-more .arw{transition:transform 220ms var(--ease)}
.svc:hover .svc-more .arw{transform:translateX(5px)}
@media (hover:hover) and (pointer:fine){
  .svc:hover .svc-peek,.svc:focus-visible .svc-peek{max-height:220px;opacity:1}
}

/* ---------- why-us alternating rows ---------- */
.whyrow{display:grid;gap:var(--s5);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){
  .whyrow{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .whyrow:nth-child(even) .whyrow-media{order:-1}
}
.whyrow + .whyrow{margin-top:var(--s7)}
.whyrow-media img{border-radius:var(--radius);width:100%}
.whyrow-body p{max-width:46ch}

/* ---------- stats ---------- */
.stats{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0;padding:0;list-style:none}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.6rem,5.5vw,3.8rem);
  line-height:1;color:var(--sun)}
.stat span{display:block;font-size:.9375rem;font-weight:700;color:var(--text-invert-soft);margin-top:.35rem}

/* ---------- process timeline (HOME: horizontal) ---------- */
.timeline{display:grid;gap:var(--s4);grid-template-columns:1fr;counter-reset:step;margin:0;padding:0;list-style:none}
@media (min-width:820px){.timeline{grid-template-columns:repeat(4,1fr);gap:var(--s3)}}
.timeline li{counter-increment:step;padding-top:var(--s4);border-top:3px solid var(--moss);position:relative}
.timeline li::before{content:counter(step);position:absolute;top:-.9rem;left:0;
  width:2rem;height:2rem;display:grid;place-items:center;background:var(--sun);color:var(--ink);
  font-family:var(--display);font-size:1.05rem;border-radius:50%}
.timeline h3{font-size:1.15rem;margin-bottom:.35rem}
.timeline p{font-size:.9375rem;margin:0}

/* ---------- gallery mosaic ---------- */
.mosaic{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;grid-auto-flow:dense}
@media (min-width:760px){.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:230px}}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius);height:100%}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 620ms var(--ease)}
.mosaic figure:hover img{transform:scale(1.07)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .7rem;
  background:linear-gradient(transparent,rgba(25,29,20,.88));color:var(--cream);
  font-size:.8rem;font-weight:700;line-height:1.35}
@media (min-width:760px){.mosaic .wide{grid-column:span 2}}

/* ---------- FAQ accordion ---------- */
.faq{border-top:2px solid var(--sand)}
.faq-item{border-bottom:2px solid var(--sand)}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
  width:100%;padding:1.15rem 0;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--display);font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.25;color:var(--ink)}
.faq-q:hover{color:var(--moss-700)}
.faq-q .plus{flex:0 0 auto;width:1.4rem;height:1.4rem;position:relative;margin-top:.2rem;
  transition:transform 300ms var(--ease)}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--sun);
  transition:transform 280ms var(--ease)}
.faq-q .plus::before{left:0;right:0;top:calc(50% - 1.5px);height:3px}
.faq-q .plus::after{top:0;bottom:0;left:calc(50% - 1.5px);width:3px}
.faq-q[aria-expanded=true] .plus::after{transform:rotate(90deg)}
.faq-q[aria-expanded=true] .plus{transform:rotate(45deg)}
.faq-a{overflow:hidden;transition:height 320ms var(--ease)}
.faq-a[hidden]{display:none}
.faq-a-inner{padding:0 0 1.3rem}
.faq-a p{margin-bottom:.7rem}
.faq-a p:first-child{font-weight:700}
.faq-a p:last-child{margin-bottom:0}

/* ---------- service area ---------- */
.arealayout{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:900px){.arealayout{grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:start}}
.arealayout iframe{width:100%;height:340px;border:0;border-radius:var(--radius);display:block}
.citylist{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 var(--s4);padding:0}
.citylist a{display:inline-block;padding:.5rem .9rem;background:var(--ink);color:var(--cream);
  text-decoration:none;font-weight:800;font-size:.9375rem;border-radius:var(--radius);
  transition:background-color 200ms var(--ease),transform 160ms var(--ease)}
.citylist a:hover{background:var(--sun);color:var(--ink);transform:translateY(-2px)}
.citylist a:active{transform:scale(.97)}
.alsoserving{font-size:.9375rem;color:var(--text-soft);max-width:52ch}
.dark .alsoserving{color:var(--text-invert-soft)}
.alsoserving b{color:var(--text);font-weight:800}
.dark .alsoserving b{color:var(--cream)}

/* ---------- lead form shell ---------- */
.formcard{background:var(--white);border-radius:var(--radius-lg);padding:var(--s4);
  box-shadow:0 24px 60px rgba(25,29,20,.16)}
.formcard h3{color:var(--ink);margin-bottom:.35rem}
.formcard p{font-size:.9375rem;color:var(--text-soft)}
.formcard iframe{width:100%;min-height:640px;border:0;border-radius:var(--radius);display:block}
.embed-note{font-size:.8125rem;color:var(--text-soft);margin:.6rem 0 0}

/* review + booking widget shells */
.widgetshell{min-height:220px}
.widgetshell iframe{width:100%;border:0;display:block}

/* ---------- where to next ---------- */
.wherenext{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:720px){.wherenext{grid-template-columns:repeat(3,1fr)}}
.wn{display:block;padding:var(--s4);background:var(--white);text-decoration:none;color:var(--ink);
  border-radius:var(--radius);border-bottom:4px solid var(--moss);
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms var(--ease)}
.wn:hover,.wn:focus-visible{transform:translateY(-4px);box-shadow:0 18px 34px rgba(25,29,20,.14);border-bottom-color:var(--sun)}
.wn em{display:block;font-style:normal;font-weight:800;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss-700);margin-bottom:.45rem}
.wn strong{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.15;margin-bottom:.3rem}
.wn span{display:block;font-size:.9rem;color:var(--text-soft);line-height:1.5}
.wn .arw{display:inline-block;margin-top:.6rem;font-weight:800;color:var(--moss-700);transition:transform 200ms var(--ease)}
.wn:hover .arw,.wn:focus-visible .arw{transform:translateX(5px)}

/* ---------- final CTA band ---------- */
.ctaband{display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:center}
@media (min-width:940px){.ctaband{grid-template-columns:1fr 1fr;gap:var(--s6)}}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--text-invert-soft);padding:var(--s7) 0 var(--s4);font-size:.9375rem}
.foot-grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:720px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer h4{color:var(--sun);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s3)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--text-invert-soft);text-decoration:none}
.site-footer a:hover{color:var(--sun)}
.site-footer address{font-style:normal;line-height:1.7;margin-bottom:var(--s3)}
.site-footer address b{color:var(--cream);font-weight:800}
.socials{display:flex;gap:.6rem;margin-top:var(--s3)}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(244,241,233,.28);
  border-radius:var(--radius);transition:background-color 200ms var(--ease),border-color 200ms}
.socials a:hover{background:var(--sun);border-color:var(--sun)}
.socials svg{width:17px;height:17px;fill:var(--cream)}
.socials a:hover svg{fill:var(--ink)}
.legalbar{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(244,241,233,.16);
  display:flex;flex-wrap:wrap;gap:.5rem var(--s4);align-items:center;font-size:.8125rem}
.legalbar .legalname{color:var(--cream);font-weight:800}

/* =========================================================================
   PAGE TYPE: SERVICE  (split hero + sticky quick-facts rail)
   ========================================================================= */
.page-service .svchero{background:var(--moss-900);color:var(--cream);padding:var(--s7) 0 0}
.page-service .svchero h1{font-size:clamp(2.15rem,4.4vw,3.35rem)}
.page-service .svchero-grid{display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:end}
@media (min-width:940px){.page-service .svchero-grid{grid-template-columns:1.02fr .98fr;gap:var(--s6);align-items:stretch}
  .page-service .svchero-media{display:flex;align-items:flex-end}
  .page-service .svchero-media img{aspect-ratio:auto;height:100%;min-height:420px}
}
.page-service .svchero h1{color:var(--white);max-width:15ch}
.page-service .svchero-media{position:relative;margin-bottom:calc(var(--s5) * -1)}
.page-service .svchero-media img{border-radius:var(--radius) var(--radius) 0 0;width:100%;
  aspect-ratio:4/3;object-fit:cover}
.crumbs{font-size:.8125rem;font-weight:700;margin:0 0 var(--s3);color:var(--text-invert-soft)}
.crumbs a{color:var(--sun);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.6;padding:0 .4em}
.page-legal .cityhero .crumbs{color:var(--text-soft)}
.page-legal .cityhero .crumbs a{color:var(--ink);text-decoration:underline}

.article{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:980px){.article{grid-template-columns:minmax(0,1fr) 330px;gap:var(--s6);align-items:start}}
.article-main h2{margin-top:var(--s5)}
.article-main h2:first-child{margin-top:0}
.rail{position:static}
@media (min-width:980px){.rail{position:sticky;top:calc(var(--header-h) + 1.5rem)}}
.railcard{background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);padding:var(--s4);margin-bottom:1rem}
.railcard h3{color:var(--cream);font-size:1.25rem}
.railfacts{list-style:none;margin:0 0 var(--s4);padding:0}
.railfacts li{display:flex;justify-content:space-between;gap:var(--s3);padding:.6rem 0;
  border-bottom:1px solid rgba(244,241,233,.16);font-size:.9rem}
.railfacts li:last-child{border-bottom:0}
.railfacts dt,.railfacts .k{color:var(--text-invert-soft)}
.railfacts .v{font-weight:800;color:var(--cream);text-align:right}
.railcard .btn{width:100%}

.checks{display:grid;gap:.15rem var(--s5);grid-template-columns:1fr;list-style:none;margin:0 0 var(--s4);padding:0;max-width:none}
@media (min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.checks li{position:relative;padding:.45rem 0 .45rem 1.7rem;font-size:.9875rem}
.checks li::before{content:"";position:absolute;left:0;top:.85rem;width:11px;height:6px;
  border-left:3px solid var(--sun);border-bottom:3px solid var(--sun);transform:rotate(-45deg)}

.steps{list-style:none;margin:0 0 var(--s4);padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 var(--s4) var(--s5);border-left:2px solid var(--sand)}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-1.05rem;top:0;width:2.1rem;height:2.1rem;
  display:grid;place-items:center;background:var(--ink);color:var(--sun);border-radius:50%;
  font-family:var(--display);font-size:1rem}
.steps h3{font-size:1.2rem;margin-bottom:.3rem}
.steps p{font-size:.9375rem;margin:0}

.photostrip{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.photostrip figure{margin:0}
.photostrip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.photostrip figcaption{font-size:.8125rem;color:var(--text-soft);padding-top:.45rem;line-height:1.45}
.dark .photostrip figcaption{color:var(--text-invert-soft)}

/* =========================================================================
   PAGE TYPE: CITY  (typographic band + editorial prose column)
   ========================================================================= */
.page-city .cityhero{background:var(--moss-900);color:var(--cream);padding:var(--s7) 0 var(--s6)}
.page-city .cityhero h1{color:var(--white);font-size:clamp(2.6rem,9vw,6rem);line-height:.94;max-width:none}
.page-city .cityhero h1 em{display:block;font-style:normal;font-size:clamp(.75rem,1.4vw,.95rem);
  color:var(--sun);font-family:var(--body);font-weight:800;text-transform:uppercase;
  letter-spacing:.2em;margin-bottom:1.1rem;line-height:1.3}
.page-city .cityhero .lede{max-width:56ch;color:#E4E2D6}
.page-city .cityhero h1{font-size:clamp(2.4rem,7vw,5rem)}
.page-city .cityhero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s4)}
.citystrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.citystrip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:640px){.citystrip{grid-template-columns:1fr 1fr}.citystrip img:last-child{display:none}}

.page-city .prose{max-width:var(--measure)}
.page-city .prose h2{margin-top:var(--s6)}
.page-city .prose h2:first-of-type{margin-top:0}
.page-city .prose h3{margin-top:var(--s5);font-size:1.4rem}
.pull{margin:var(--s5) 0;padding:var(--s4) 0 var(--s4) var(--s4);border-left:5px solid var(--sun);
  font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.65rem);line-height:1.3;color:var(--ink);max-width:44ch}
.pull cite{display:block;font-family:var(--body);font-style:normal;font-size:.85rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--moss-700);margin-top:.9rem}

.factlist{margin:0;padding:0}
.factlist div{display:grid;gap:.2rem var(--s4);grid-template-columns:1fr;padding:1rem 0;
  border-bottom:1px solid var(--sand)}
@media (min-width:660px){.factlist div{grid-template-columns:210px 1fr;align-items:baseline}}
.factlist dt{font-weight:800;font-size:.9375rem;color:var(--moss-700)}
.factlist dd{margin:0;font-size:.9875rem;max-width:56ch}
.factlist dd cite{font-style:normal;font-size:.8rem;color:var(--text-soft);display:block;margin-top:.25rem}

.svclist{list-style:none;margin:0;padding:0}
.svclist li{padding:1.1rem 0;border-bottom:1px solid var(--sand)}
.svclist a{font-family:var(--display);font-size:1.35rem;text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;gap:.4em}
.svclist a .arw{color:var(--sun);transition:transform 200ms var(--ease)}
.svclist a:hover{color:var(--moss-700)}
.svclist a:hover .arw{transform:translateX(6px)}
.svclist p{font-size:.9375rem;color:var(--text-soft);margin:.3rem 0 0;max-width:60ch}

.hoods{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:var(--s3) 0 0;padding:0}
.hoods li{padding:.4rem .75rem;background:var(--sand);border-radius:var(--radius);
  font-size:.875rem;font-weight:700;color:var(--text-soft)}

/* ---------- legal pages ---------- */
.page-legal .legal{max-width:74ch}
.page-legal .legal h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-top:var(--s5)}
.page-legal .legal h3{font-size:1.15rem;margin-top:var(--s4)}
.page-legal .legal p,.page-legal .legal li{font-size:.9875rem}
.page-legal .legal ul{padding-left:1.2rem}
.page-legal .legal li{margin-bottom:.4rem;max-width:none}
.page-legal .clause{background:var(--white);border-top:4px solid var(--sun);padding:var(--s4);
  margin:var(--s4) 0;font-weight:700}

/* ---------- motion (JS-gated so content is visible without JS) ---------- */
.js [data-rise]{opacity:0;transform:translateY(20px)}
.js [data-rise].in{opacity:1;transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js [data-rise][data-d="1"].in{transition-delay:70ms}
.js [data-rise][data-d="2"].in{transition-delay:140ms}
.js [data-rise][data-d="3"].in{transition-delay:210ms}
.js [data-rise][data-d="4"].in{transition-delay:280ms}
.js [data-rise][data-d="5"].in{transition-delay:350ms}
/* Above-the-fold entrances (every page's first section: hero/svchero/cityhero/band-tight)
   run on CSS alone (no .js gate): the LCP element must never wait for deferred JS, and
   with no JS at all the animation still runs once and settles visible.
   site.js still adds .in later, which lands on the same end state. */
main>section:first-child [data-rise]{
  opacity:1;transform:none;
  animation:rise-in var(--dur) var(--ease) both}
main>section:first-child [data-rise][data-d="1"]{animation-delay:70ms}
main>section:first-child [data-rise][data-d="2"]{animation-delay:140ms}
main>section:first-child [data-rise][data-d="3"]{animation-delay:210ms}
main>section:first-child [data-rise][data-d="4"]{animation-delay:280ms}
main>section:first-child [data-rise][data-d="5"]{animation-delay:350ms}
/* Elements the inline pre-paint script found inside the initial viewport get the same
   CSS-only entrance — anything visible at load must never wait for deferred JS. */
[data-rise].rise-now{opacity:1;transform:none;animation:rise-in var(--dur) var(--ease) both}
@keyframes rise-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* utilities */
.skip{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--ink);
  padding:.8rem 1.2rem;font-weight:800;z-index:var(--z-modal)}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.center p,.center h2,.center .course{margin-inline:auto}
.center .course{justify-content:center}
.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}.mb0{margin-bottom:0}
.maxw{max-width:var(--measure)}

/* contact page: the form has to be reachable at the fold, not two screens down */
#contact-top{padding:2.4rem 0 1.1rem}
#contact-top h1{font-size:clamp(1.85rem,3.5vw,2.75rem);max-width:24ch}
#contact-top .course{margin-bottom:1rem}
#contact-top .lede{margin-bottom:0}
#quote-form{padding-top:var(--s4)}
#quote-form .ctaband{align-items:start}

/* ---------- real client wordmark (transparent PNG, cream knockout on dark) ---------- */
.brand-lockup{display:block;width:-moz-fit-content;width:fit-content;line-height:0}
.brand-lockup img{height:24px;width:auto;display:block;transition:opacity 200ms var(--ease)}
@media (min-width:900px){.brand-lockup img{height:30px}}
.brand-lockup .brand-sub{display:block;text-align:right;margin-top:6px;line-height:1}
.brand:hover .brand-lockup img{opacity:.82}
.foot-lockup{margin-bottom:1.4rem}
.foot-lockup img{height:34px}
.foot-lockup .brand-sub{margin-top:7px}

/* GHL booking calendar shell */
.bookshell{background:var(--white);border-radius:var(--radius-lg);padding:.9rem;min-height:620px}
.bookshell iframe{min-height:600px;border-radius:var(--radius);display:block}

/* full-bleed crew band (about page) */
.crewband{margin:0;position:relative;background:var(--ink)}
.crewband img{width:100%;height:auto;display:block;max-height:460px;object-fit:cover;object-position:center 38%}
.crewband figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 0 1rem;
  background:linear-gradient(transparent,rgba(25,29,20,.9));color:var(--cream);
  font-size:.875rem;font-weight:700}
.crewband figcaption .wrap{display:block}

/* ---------- cross-section spec diagrams (drawn, never a photo) ---------- */
.spec{margin:var(--s5) 0}
.xsec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg)}
@media (max-width:700px){
  .xsec-scroll{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%);
               mask-image:linear-gradient(90deg,#000 0,#000 93%,transparent 100%)}
  .xsec{min-width:560px}
}
.xsec{width:100%;height:auto;display:block;background:var(--white);
  border:1px solid var(--sand);border-radius:var(--radius-lg)}
.spec figcaption{font-size:.8125rem;color:var(--text-soft);padding:.6rem 0 0;line-height:1.5;max-width:60ch}
.speclist{list-style:none;counter-reset:sp;margin:var(--s4) 0 0;padding:0;max-width:none}
.speclist li{counter-increment:sp;position:relative;padding:.6rem 0 .6rem 2.6rem;
  font-size:.9375rem;line-height:1.55;border-bottom:1px solid var(--sand)}
.speclist li:last-child{border-bottom:0}
.speclist li::before{content:counter(sp);position:absolute;left:0;top:.62rem;
  width:1.7rem;height:1.7rem;display:grid;place-items:center;background:var(--sun);color:var(--ink);
  border:2px solid var(--ink);border-radius:50%;font-family:var(--display);font-size:.9rem}
.speclist b{color:var(--text)}
.scrollhint{display:none}
@media (max-width:700px){.scrollhint{display:inline;font-weight:800;color:var(--moss-700)}}
/* grid items default to min-width:auto, which lets a wide diagram push the page sideways */
.article-main,.article > *,.prose{min-width:0}

/* ---------- diagram callout circles: staggered pop when the xsec drawing scrolls into view ----------
   These figures sit inside long-form article copy with no [data-rise] ancestor to key off, so
   site.js observes the .xsec svg directly (IntersectionObserver, same discipline as [data-rise])
   and toggles .in on it. The generated diagrams always emit their 8 leader-line dots (circle.ldot)
   before the 8 numbered callouts (circle.ccirc + text.cnum), so nth-of-type on that fixed pattern
   reliably targets just the callouts without needing a wrapping <g> the SVG generator doesn't emit. */
.js .xsec circle.ccirc,.js .xsec text.cnum{
  transform-box:fill-box;transform-origin:center;
  transform:scale(.5);opacity:0;
  transition:transform 420ms var(--ease),opacity 420ms var(--ease)}
.js .xsec.in circle.ccirc,.js .xsec.in text.cnum{transform:scale(1);opacity:1}
.js .xsec circle.ccirc:nth-of-type(9),.js .xsec text.cnum:nth-of-type(1){transition-delay:0ms}
.js .xsec circle.ccirc:nth-of-type(10),.js .xsec text.cnum:nth-of-type(2){transition-delay:60ms}
.js .xsec circle.ccirc:nth-of-type(11),.js .xsec text.cnum:nth-of-type(3){transition-delay:120ms}
.js .xsec circle.ccirc:nth-of-type(12),.js .xsec text.cnum:nth-of-type(4){transition-delay:180ms}
.js .xsec circle.ccirc:nth-of-type(13),.js .xsec text.cnum:nth-of-type(5){transition-delay:240ms}
.js .xsec circle.ccirc:nth-of-type(14),.js .xsec text.cnum:nth-of-type(6){transition-delay:300ms}
.js .xsec circle.ccirc:nth-of-type(15),.js .xsec text.cnum:nth-of-type(7){transition-delay:360ms}
.js .xsec circle.ccirc:nth-of-type(16),.js .xsec text.cnum:nth-of-type(8){transition-delay:420ms}
@media (prefers-reduced-motion:reduce){
  .js .xsec circle.ccirc,.js .xsec text.cnum{transform:scale(1)!important;opacity:1!important}
}
.xsec-scroll{max-width:100%}