/* 2026-10-22 redesign layer (loaded after site.css on every page). Black, white and metallic gold; Archivo with its
   width axis: expanded heavy headlines like a performance-car campaign, normal width for reading. */
:root{
  --bg:#0b0a09; --bg-2:#121110; --paper:#181715; --paper-2:#201e1b;
  --ink:#f6f4f0; --ink-2:#c9c4bb; --ink-3:#97918a;
  --rule:#262421; --rule-2:#3a3732;
  --gold:#cfae6c; --gold-hi:#e2c588; --on-gold:#14110b;
  --metal:linear-gradient(100deg,#f4e4b8 0%,#d4b373 34%,#9c7a40 62%,#e8d199 100%);
  --display:"Archivo",system-ui,sans-serif; --sans:"Archivo",system-ui,sans-serif;
  --r:3px; --r-lg:6px;
}
body{font-stretch:100%;font-size:17px;letter-spacing:-.003em}
h1,h2,h3{font-weight:760;font-stretch:112%;letter-spacing:-.035em}
h1 em,h2 em{font-style:normal;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-size:clamp(34px,4.4vw,64px);line-height:.98}
.h3{font-weight:700}
.body{color:var(--ink-2)}
.brand .wm{font-weight:780;font-stretch:118%;letter-spacing:-.02em}
nav.links{font-weight:500;letter-spacing:.005em}
.btn{font-weight:650;letter-spacing:.01em;border-radius:var(--r);transition:background-color .2s,color .2s,border-color .2s,transform .15s var(--ease),box-shadow .25s}
.btn-gold{background:linear-gradient(180deg,#e0c286,#c4a05f);color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px -10px rgba(207,174,108,.55)}
.btn-gold:hover{background:linear-gradient(180deg,#ecd29b,#cfae6c);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 30px -10px rgba(207,174,108,.7)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-lg{height:60px;padding:0 30px;font-size:17px}
.btn-glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)}
.more-link{color:var(--gold-hi)}
.towns li{font-weight:600;font-stretch:108%;letter-spacing:-.02em;font-size:21px}
.perks .n{font:700 15px/1.6 var(--sans);font-style:normal;color:var(--gold)}

/* ---------- home ---------- */
.home-x header.top{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;transition:background-color .3s,border-color .3s,backdrop-filter .3s}
.home-x header.top.solid{background:rgba(11,10,9,.86);border-bottom-color:var(--rule);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.home-x header.top nav.links{color:rgba(255,255,255,.82)}
.home-x .tel-btn{border-color:rgba(255,255,255,.3)}
.x-kicker{font:600 13px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi)}

.x-hero{position:relative;min-height:min(100svh,980px);display:flex;align-items:flex-end;padding:calc(var(--head) + 64px) 0 72px;overflow:hidden;isolation:isolate;background:#050505}
.x-hero-media{position:absolute;inset:0;z-index:-1}
.x-hero-media img{width:100%;height:100%;object-fit:cover;object-position:68% 45%;filter:saturate(.85) contrast(1.06) brightness(.82)}
.x-hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.78) 32%,rgba(5,5,5,.2) 62%,rgba(5,5,5,.05) 100%),
  linear-gradient(0deg,rgba(11,10,9,1) 0%,rgba(11,10,9,0) 32%),
  linear-gradient(180deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,0) 22%)}
@media (prefers-reduced-motion:no-preference){.x-hero-media img{animation:xpush 9s var(--ease) both}}
@keyframes xpush{from{transform:scale(1.12)}to{transform:scale(1)}}
.x-hero-in{position:relative}
.x-hero h1{margin-top:18px;font-size:clamp(52px,8.4vw,128px);line-height:.9;letter-spacing:-.045em;font-weight:800;font-stretch:118%;max-width:12ch}
.x-hero h1 .l{display:block}
.x-lede{margin-top:26px;max-width:46ch;font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:rgba(255,255,255,.82)}
.x-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.x-prices{list-style:none;display:flex;gap:0;margin-top:44px;border-top:1px solid rgba(255,255,255,.18);max-width:640px}
.x-prices li{flex:1;padding:16px 18px 0 0}
.x-prices li+li{padding-left:18px;border-left:1px solid rgba(255,255,255,.14)}
.x-prices span{display:block;font-size:13.5px;color:rgba(255,255,255,.62)}
.x-prices b{display:block;margin-top:4px;font-size:26px;font-weight:760;font-stretch:112%;letter-spacing:-.03em}
.x-prices small{font-size:14px;font-weight:500;font-stretch:100%;color:rgba(255,255,255,.62);letter-spacing:0}
.x-clip{position:absolute;right:max(32px,calc((100% - 1240px)/2));bottom:118px;width:min(300px,26vw);border-radius:var(--r-lg);overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.x-clip video{display:block;width:100%;aspect-ratio:540/380;object-fit:cover}
.x-clip figcaption{padding:10px 14px;font-size:13px;color:rgba(255,255,255,.7);background:rgba(10,10,10,.9)}
.x-clip figcaption b{color:#fff;font-weight:650}
@media (prefers-reduced-motion:no-preference){
  .x-hero h1 .l,.x-hero .x-lede,.x-hero .x-ctas,.x-hero .x-prices,.x-hero .x-kicker{animation:xin .9s var(--ease) both;animation-delay:calc(.12s + var(--i,0) * .1s)}
  .x-hero .x-kicker{--i:0}.x-hero .x-lede{--i:2}.x-hero .x-ctas{--i:3}.x-hero .x-prices{--i:4}
  .x-clip{animation:xin 1s .7s var(--ease) both}
}
@keyframes xin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.x-trust{padding:0;border-bottom:1px solid var(--rule)}
.x-trust ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.x-trust li{padding:26px 24px 28px 0}
.x-trust li+li{padding-left:24px;border-left:1px solid var(--rule)}
.x-trust li>a{text-decoration:none;display:block}
.x-trust b{display:block;font-weight:700;font-stretch:108%;font-size:17px;letter-spacing:-.01em}
.x-trust span{display:block;font-size:14.5px;color:var(--ink-3);margin-top:2px}
.x-stars{display:flex!important;gap:2px;color:var(--gold);margin-bottom:8px}
.x-stars svg{width:15px;height:15px}

.x-head{margin-bottom:48px}
.x-head.split{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.x-head .body{margin-top:0}

.x-pick{padding:112px 0 96px}
.x-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:220px;gap:12px}
.x-tile{position:relative;grid-column:span 3;grid-row:span 1;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;background:var(--paper);isolation:isolate;display:flex;align-items:flex-end}
.x-tile.big{grid-column:span 8;grid-row:span 2}
.x-tile.tall{grid-column:span 4;grid-row:span 2}
.x-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease),filter .5s;filter:saturate(.9) brightness(.85)}
.x-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.35) 45%,rgba(8,8,8,0) 75%)}
.x-tile:hover img{transform:scale(1.045);filter:saturate(1) brightness(.95)}
.x-tile-in{display:grid;gap:4px;padding:22px 24px;width:100%}
.x-tile-n{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--gold-hi)}
.x-tile-t{font-weight:760;font-stretch:112%;font-size:clamp(20px,1.8vw,26px);line-height:1.05;letter-spacing:-.03em;max-width:16ch}
.x-tile.big .x-tile-t{font-size:clamp(28px,3.2vw,44px)}
.x-tile-p{font-size:15px;color:rgba(255,255,255,.75)}
.x-tile-go{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background-color .25s,color .25s,transform .35s var(--ease)}
.x-tile-go svg{width:18px;height:18px}
.x-tile:hover .x-tile-go{background:var(--gold);border-color:var(--gold);color:var(--on-gold);transform:rotate(-45deg)}
.x-tile.type{background:radial-gradient(120% 90% at 100% 0%,#2a241a 0%,#16140f 55%,#121110 100%);border:1px solid var(--rule-2)}
.x-tile.type::before{display:none}
.x-tile.type .x-tile-p{color:var(--gold-hi);font-weight:600}

.x-packages{padding:104px 0;background:var(--bg-2);border-block:1px solid var(--rule)}
.x-pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.x-pkg{position:relative;display:flex;flex-direction:column;padding:28px 24px 24px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--rule)}
.x-pkg.feat{background:linear-gradient(180deg,#221d14,#181715 60%);border-color:rgba(207,174,108,.55);box-shadow:0 24px 60px -30px rgba(207,174,108,.35)}
.x-flag{position:absolute;top:-1px;right:20px;transform:translateY(-50%);padding:5px 10px;border-radius:var(--r);background:var(--gold);color:var(--on-gold);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.x-pkg h3{font-size:24px;line-height:1.05}
.x-pkg-sum{margin-top:10px;font-size:15px;color:var(--ink-2);min-height:4.8em}
.x-pkg-price{display:flex;align-items:baseline;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.x-pkg-price span{font-size:13.5px;color:var(--ink-3)}
.x-pkg-price b{font-size:38px;font-weight:780;font-stretch:112%;letter-spacing:-.04em}
.x-pkg-time{font-size:14px;color:var(--ink-3);margin-top:2px}
.x-inc{list-style:none;display:grid;gap:9px;margin:20px 0 26px;font-size:15px;color:var(--ink-2)}
.x-inc li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;line-height:1.4}
.x-inc svg{width:18px;height:18px;color:var(--gold);margin-top:1px}
.x-pkg .btn,.x-coat .btn{margin-top:auto;width:100%}
.x-addons{margin-top:24px;font-size:15px;color:var(--ink-3)}
.x-addons b{color:var(--ink);font-weight:600}

.x-ceramic{padding:120px 0;background:radial-gradient(80% 60% at 85% 20%,rgba(207,174,108,.10),transparent 60%),var(--bg)}
.x-ceramic .wrap{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.x-ceramic .h2{margin-top:14px}
.x-steps{list-style:none;counter-reset:s;margin-top:32px;border-top:1px solid var(--rule-2)}
.x-steps li{counter-increment:s;display:grid;grid-template-columns:42px 1fr;column-gap:8px;padding:16px 0;border-bottom:1px solid var(--rule)}
.x-steps li::before{content:"0" counter(s);grid-row:span 2;font-size:13px;font-weight:650;letter-spacing:.1em;color:var(--gold);padding-top:3px}
.x-steps b{font-weight:700;font-stretch:108%;font-size:17px}
.x-steps span{color:var(--ink-2);font-size:15.5px}
.x-coats{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:sticky;top:calc(var(--head) + 24px)}
.x-coat{display:flex;flex-direction:column;padding:30px 26px 26px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--rule)}
.x-coat.feat{background:linear-gradient(160deg,#2a2317 0%,#1a1813 55%);border-color:rgba(207,174,108,.6)}
.x-coat-tag{font-size:12.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.x-coat h3{margin-top:10px;font-size:26px;line-height:1.05}
.x-note{grid-column:1/-1;font-size:14px;color:var(--ink-3);margin-top:4px}

.x-work{padding-top:104px;border-top:1px solid var(--rule)}

.x-rims{padding:112px 0;background:var(--bg-2);border-block:1px solid var(--rule)}
.x-rims .wrap{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.x-rims .h2{margin-top:14px}
.x-rim-tiers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.x-rim-tiers div{padding:24px;border-radius:var(--r-lg);border:1px solid var(--rule-2);background:var(--paper)}
.x-rim-tiers b{display:block;font-size:56px;line-height:1;font-weight:800;font-stretch:115%;letter-spacing:-.05em;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-rim-tiers .t{display:block;margin-top:12px;font-weight:700;color:var(--ink)}
.x-rim-tiers span{display:block;font-size:15px;color:var(--ink-2);margin-top:4px}
.x-rim-quote{padding:34px 30px;border-radius:var(--r-lg);background:linear-gradient(180deg,#1d1a15,#151412);border:1px solid rgba(207,174,108,.4);display:grid;gap:12px}
.x-rim-quote h3{font-size:28px;margin-bottom:6px}
.x-mini{list-style:none;display:grid;gap:12px;margin-bottom:12px;color:var(--ink-2);font-size:16px}
.x-mini li{display:grid;grid-template-columns:30px 1fr;align-items:center}
.x-mini span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:rgba(207,174,108,.16);color:var(--gold-hi)}
.x-rim-quote .btn{width:100%}

.x-reviews{padding:112px 0}
.x-wall{columns:3;column-gap:12px}
.x-wall figure{break-inside:avoid;margin-bottom:12px;padding:26px 24px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--rule)}
.x-wall figure.lead{background:linear-gradient(160deg,#241f16,#181715 60%);border-color:rgba(207,174,108,.45)}
.x-wall blockquote{font-size:17.5px;line-height:1.5;color:var(--ink)}
.x-wall .lead blockquote{font-size:22px;line-height:1.35;font-weight:600;font-stretch:104%;letter-spacing:-.015em}
.x-wall figcaption{margin-top:16px;font-size:14px;color:var(--ink-3)}
.x-wall figcaption b{color:var(--ink);font-weight:650}

.x-club{position:relative;padding:0;overflow:hidden;isolation:isolate;border-top:1px solid var(--rule)}
.x-club-pic{position:absolute;inset:0 0 0 46%;z-index:-1}
.x-club-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(.7) saturate(.85)}
.x-club-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(11,10,9,.6) 35%,rgba(11,10,9,.1) 100%)}
.x-club-in{max-width:600px;padding:120px 0}
.x-club .h2{margin-top:14px}
.x-sizes{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.x-sizes li{padding:16px 18px;border-radius:var(--r-lg);background:rgba(24,23,21,.85);border:1px solid var(--rule-2)}
.x-sizes span{display:block;font-size:14px;color:var(--ink-3)}
.x-sizes b{display:block;margin-top:4px;font-size:30px;font-weight:780;font-stretch:112%;letter-spacing:-.04em}
.x-sizes small{font-size:13px;font-weight:500;font-stretch:100%;color:var(--ink-3);letter-spacing:0}

.x-area{padding:112px 0;background:var(--bg-2);border-block:1px solid var(--rule)}
.x-area .wrap{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.x-area .towns{margin-top:6px}
.x-area .note{margin-top:22px;color:var(--ink-3);font-size:15px}

@media (max-width:1060px){
  .x-head.split,.x-ceramic .wrap,.x-rims .wrap,.x-area .wrap{grid-template-columns:1fr;gap:28px}
  .x-pkgs{grid-template-columns:1fr 1fr}
  .x-coats{position:static}
  .x-clip{display:none}
  .x-trust ul{grid-template-columns:1fr 1fr}
  .x-trust li:nth-child(3){padding-left:0;border-left:0}
  .x-trust li:nth-child(n+3){border-top:1px solid var(--rule)}
  .x-wall{columns:2}
  .x-club-pic{inset:0}
  .x-club-pic::after{background:linear-gradient(0deg,var(--bg) 10%,rgba(11,10,9,.82) 60%,rgba(11,10,9,.55) 100%)}
}
@media (max-width:760px){
  section.x-pick,.x-packages,.x-ceramic,.x-rims,.x-reviews,.x-area,.x-work{padding:72px 0}
  .x-hero{min-height:min(100svh,860px);padding:calc(var(--head) + 40px) 0 40px}
  .x-hero-media img{object-position:72% 40%}
  .x-hero-media::after{background:linear-gradient(0deg,rgba(11,10,9,1) 4%,rgba(8,8,8,.8) 46%,rgba(8,8,8,.25) 75%,rgba(8,8,8,.55) 100%)}
  .x-hero h1{font-size:clamp(46px,13vw,64px);font-stretch:112%}
  .x-ctas .btn{flex:1 1 100%}
  .x-prices{margin-top:32px}
  .x-prices li{padding-right:10px}.x-prices li+li{padding-left:12px}
  .x-prices b{font-size:21px}
  .x-bento{grid-template-columns:1fr 1fr;grid-auto-rows:190px;gap:8px}
  .x-tile,.x-tile.tall{grid-column:span 1;grid-row:span 1}
  .x-tile.big{grid-column:span 2;grid-row:span 1}
  .x-tile-in{padding:16px}
  .x-tile-go{width:34px;height:34px;top:12px;right:12px}
  .x-pkgs,.x-coats,.x-rim-tiers{grid-template-columns:1fr}
  .x-pkg-sum{min-height:0}
  .x-wall{columns:1}
  .x-sizes{grid-template-columns:repeat(3,1fr);gap:6px}
  .x-sizes li{padding:12px}
  .x-sizes b{font-size:22px}
  .x-club-in{padding:80px 0}
  .x-trust li{padding:18px 12px 18px 0}.x-trust li+li{padding-left:12px}
}
.x-preview{position:relative;z-index:40;padding:8px 16px;text-align:center;font-size:13.5px;font-weight:600;background:var(--gold);color:var(--on-gold)}
.home-x .x-preview{position:fixed;left:0;right:0;top:0}
.home-x .x-preview~header.top{top:35px}
.x-lede a{color:#fff;text-decoration-color:rgba(207,174,108,.7)}
@media (max-width:760px){
  .x-preview{font-size:12.5px;padding:7px 12px}
  .home-x .x-preview~header.top{top:32px}
  .x-bento .x-tile:last-child:nth-child(even){grid-column:span 2}
  .x-sizes small{display:block;font-size:12px}
  .x-prices span{font-size:12px}
  .x-hero{padding-bottom:96px}
}
