/* chrome-a.css - silver chrome + blue-grey. Loads LAST (after theme, pkg-b, steps-a, gal-a, logo-v4, trusted-a, est-mobile).
   Palette:  silver  #eeeeee / #dbdbdb / #c0c0c0   gunmetal #1b1b1b   blue-grey #5f7a90 (accent) / #8da4b8 (buttons) / #e7e7e7 (soft)  */

@property --tsx{syntax:"<percentage>";inherits:true;initial-value:-40%}

:root{
  --paper:#eeeeee; --white:#f8f8f8;
  --ink:#171717; --ink-soft:#585858;
  --graphite:#1b1b1b; --graphite-2:#1f1f1f;
  --on-dark:#f3f3f3; --on-dark-soft:#b6b6b6;
  --line:rgba(23,23,23,.14); --line-dark:rgba(243,243,243,.16);
  --accent:#171717; --accent-hover:#000;
  --gold:#cacaca; --gold-ink:#4f6577; --gold-soft:rgba(141,164,184,.2);
  --focus:#3e566a;
  --mint:#8da4b8; --mint-hover:#7b93a8; --mint-soft:#e7e7e7; --mint-ink:#243645;
  --bg:#5f7a90; /* blue-grey, the contrast colour */
  --chrome-light:linear-gradient(180deg,#fbfcfd 0%,#e6e6e6 48%,#d4d4d4 52%,#ececec 100%);
  --chrome-dark:linear-gradient(160deg,#1f1f1f 0%,#191919 55%,#1f1f1f 100%);
  --brushed:repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 2px,rgba(255,255,255,.22) 2px 3px,rgba(0,0,0,.015) 3px 5px);
  --glass-highlight:rgb(255 255 255 / .9);
}

/* ---------- canvas: brushed silver ---------- */
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,#f3f3f3 0%,#e7e7e7 38%,#f0f0f0 70%,#e2e2e2 100%) fixed;
  background-color:var(--paper);
}
body::before{ /* light that follows the pointer, behind the content */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,70%) var(--my,20%),rgba(255,255,255,.75),transparent 70%);
}
.section--white{background:linear-gradient(180deg,#fafbfc,#f0f0f0)}
.estimator-section,#work,.packages,.coverage,.faq-section{position:relative}
.section--dark,.section--dark.final{
  background:var(--chrome-dark);
  position:relative;
}
.section--dark::before{ /* thin chrome edge on dark bands */
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 20%,rgba(141,164,184,.9) 50%,rgba(255,255,255,.55) 80%,transparent);
}
#work.section{background:var(--chrome-dark)}
.section--dark h2,#work h2,.final h2{
  background:linear-gradient(180deg,#ffffff 0%,#e4e4e4 50%,#b8b8b8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.08em;
}
.eyebrow{color:var(--gold-ink)}
.section--dark .eyebrow,#work .eyebrow{color:#9fb3c4}

/* ---------- header: polished steel ---------- */
.header{
  background:linear-gradient(180deg,rgba(252,253,254,.9),rgba(226,226,226,.82));
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(23,23,23,.1),0 8px 26px -12px rgba(23,23,23,.28);
}
.header:before{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0) 60%)}
.nav{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(230,230,230,.7));border-color:rgba(23,23,23,.14)}
.nav .nav__link:hover,.nav .nav__link:focus-visible{background:#fff;color:var(--mint-ink)}
.nav .nav__link.is-active,.nav .nav__link[aria-current]{background:var(--chrome-dark);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.lang,.menu-btn{background:linear-gradient(180deg,#fff,#e9e9e9)}
.mobile-menu{background:linear-gradient(180deg,#f5f5f5,#e4e4e4)}

/* ---------- buttons: blue-grey glass + chrome ---------- */
.btn--book,.btn--gold{
  background:linear-gradient(180deg,#a3b8c9 0%,#7f98ad 50%,#6f879c 100%);
  color:#0f1b26;border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 rgba(36,54,69,.18),0 8px 18px -10px rgba(36,54,69,.7);
  background-size:100% 100%;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn--book:hover,.btn--gold:hover{background:linear-gradient(180deg,#b3c5d4,#8da4b8 50%,#7b93a8);border-color:rgba(255,255,255,.7);filter:saturate(1.1)}
.btn--book:active{transform:scale(.97)}
.section--dark .btn--book,.est-summary .btn--book,.est-summary__cta{
  background:linear-gradient(180deg,#ffffff 0%,#e3e3e3 48%,#cacaca 52%,#e9e9e9 100%);
  color:#171717;border-color:#fff;
  box-shadow:inset 0 1px 0 #fff,0 10px 24px -12px rgba(0,0,0,.8);
}
.section--dark .btn--book:hover,.est-summary__cta:hover{background:linear-gradient(180deg,#fff,#f0f0f0 48%,#d8d8d8 52%,#f3f3f3);border-color:#fff}
.btn--book::before{ /* sheen sweep */
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);transition:left .6s ease;
}
.btn--book:hover::before{left:130%}
.hero__ctas .btn--book:after,.final__ctas .btn--book:after,.est-summary__cta:after,.pricing__cta:after{
  background:var(--chrome-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
}
.btn--outline-dark{border:1.5px solid var(--ink);background:rgba(255,255,255,.4)}
.btn--ghost{border-color:rgba(243,243,243,.5)}
[style*="--tx"]{translate:var(--tx) var(--ty)}

/* ---------- hero ---------- */
.hero:not(.h6b) .hero__title{padding-bottom:.06em}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero:not(.h6b) .hero__title{
    background:linear-gradient(100deg,var(--ink) 0%,var(--ink) calc(var(--tsx) - 16%),#7f98ad calc(var(--tsx) - 4%),#f6f6f6 var(--tsx),#7f98ad calc(var(--tsx) + 4%),var(--ink) calc(var(--tsx) + 16%),var(--ink) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:chrome-sweep 2.2s .5s cubic-bezier(.3,.6,.2,1) both;
  }
  @keyframes chrome-sweep{from{--tsx:-40%}to{--tsx:140%}}
}
.hero:not(.h6b) .hero__frame{
  border-radius:20px;overflow:hidden;position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 2px rgba(23,23,23,.12),0 30px 60px -30px rgba(23,23,23,.55);
}
.hero:not(.h6b) .hero__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 30%,transparent 70%,rgba(255,255,255,.12))}
.hero:not(.h6b) .hero__img{transform-origin:50% 50%;will-change:transform}
@supports (animation-timeline:view()){
  .hero:not(.h6b) .hero__img{animation:hero-zoom linear both;animation-timeline:view();animation-range:entry 20% cover 70%}
  @keyframes hero-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
}
.hero__badge-icon{color:var(--bg)}
.hero__note a,.link-arrow{text-decoration-color:var(--bg)}

/* ---------- cards: chrome bevel + pointer spotlight ---------- */
.service-card,.coverage__card,.faq__item,.pkg-card:not(.pkg-card--featured){
  background-color:#fff;
  background-image:radial-gradient(260px circle at var(--sx,-200px) var(--sy,-200px),rgba(141,164,184,.22),transparent 70%);
  border:1px solid rgba(23,23,23,.1);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(23,23,23,.06),0 12px 24px -18px rgba(23,23,23,.4);
  transition:transform .25s,box-shadow .25s,border-color .25s,background-color .2s;
}
.coverage__card:hover,.pkg-card:hover{transform:translateY(-3px)}
.service-card:hover{border-color:rgba(95,122,144,.55)}
.service-card.is-selected,.service-card.is-selected:hover{background-color:var(--mint-soft);border-color:var(--bg);box-shadow:inset 0 0 0 1px var(--bg),0 12px 24px -18px rgba(36,54,69,.6)}
.service-card__check{border-color:var(--bg)}
.service-card.is-selected .service-card__check{background:var(--chrome-dark);border-color:#171717}
.service-card__price{font-variant-numeric:tabular-nums}
.faq__item{background-color:rgba(255,255,255,.75)}
.faq__item summary{cursor:pointer}
.faq__item[open]{background-color:#fff;border-color:rgba(95,122,144,.5)}
.faq__item[open]>:not(summary){animation:faq-in .35s cubic-bezier(.22,.61,.36,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq__item summary::after,.faq__item .faq__icon{transition:transform .3s}
.faq__item[open] summary::after{transform:rotate(45deg)}

/* presets */
.est-preset{transition:background .2s,color .2s,transform .15s,box-shadow .2s}
.est-preset:active{transform:scale(.96)}
.est-preset.is-active{background:var(--chrome-dark);color:#fff;border-color:#171717}

/* estimate summary: gunmetal slab */
.est-summary{
  background:var(--chrome-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 30px 60px -28px rgba(23,23,23,.7);
  border:1px solid rgba(255,255,255,.08);
}
.est-summary__amt{
  background:linear-gradient(180deg,#ffffff 0%,#d9d9d9 45%,#9d9d9d 52%,#e4e4e4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.est-summary__cur{color:#9fb3c4}
.est-summary__badge,.est-summary [class*="badge"]{background:rgba(141,164,184,.16);border-color:rgba(141,164,184,.45);color:#dedede}
.est-summary li svg,.est-summary [class*="check"] svg{color:#9fb3c4}

/* ---------- how it works: silver rail, blue-grey line ---------- */
#how-it-works{--a-line:rgba(23,23,23,.18);--a-gold:#5f7a90}
#how-it-works .step-card__num{color:var(--bg)}
#how-it-works .step-card::before{box-shadow:0 0 0 5px #f6f6f6}
#how-it-works .step-card::after{background:#f6f6f6}
#how-it-works .step-card__badge{background:var(--mint-soft);color:var(--mint-ink)}
.how-it-works__cta,.sec-foot{background:linear-gradient(180deg,#fff,#ececec);border:1px solid rgba(23,23,23,.08);box-shadow:inset 0 1px 0 #fff}
#work .sec-foot{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);color:#f3f3f3}
#work .sec-foot__text{color:#f3f3f3;-webkit-text-fill-color:currentColor}

/* ---------- gallery ---------- */
#work .gal-thumb{background:linear-gradient(90deg,#8da4b8,#e8e8e8)}
#work .gal-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
#work .gal-btn:hover{background:rgba(141,164,184,.35)}
#work .shot__frame{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 24px 40px -24px #000}
#work .shot__img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}
#work .shot:hover .shot__img{transform:scale(1.04)}
#work [role="tab"],#work .chip,#work .gallery-filter button,#work .filters button{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border-color:rgba(255,255,255,.28);color:#f1f1f1;
}
#work [aria-selected="true"],#work .is-active,#work [aria-pressed="true"]{
  background:linear-gradient(180deg,#fff,#d5d5d5)!important;color:#171717!important;border-color:#fff!important;
}

/* ---------- packages ---------- */
#vip.packages{background:linear-gradient(180deg,#f8f8f8,#ececec)}
#vip .pkg-card--featured{
  background:var(--chrome-dark);
  box-shadow:0 0 0 1.5px #9fb3c4,0 0 0 4px rgba(255,255,255,.7),0 22px 40px -18px rgba(23,23,23,.7);
}
#vip [aria-selected="true"],#vip .is-active{background:var(--chrome-dark);color:#fff}

/* ---------- trusted strip ---------- */
.trusted{background:var(--chrome-dark);border-block:1px solid rgba(255,255,255,.08)}
.trusted .eyebrow,.trusted__label,.trusted h2{color:#9fb3c4;-webkit-text-fill-color:currentColor;background:none}
.logo-marquee__item img{filter:brightness(0) invert(1) !important;opacity:.7;transition:opacity .25s,transform .25s}
.logo-marquee__item img:hover{opacity:1;transform:scale(1.06)}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#eaeaea,#dddddd)}
.footer a:hover{color:var(--bg)}

/* ---------- focus ---------- */
:focus-visible{outline-color:var(--bg)}
.section--dark :focus-visible,#work :focus-visible,.est-summary :focus-visible{outline-color:#b8c8d6}
::selection{background:#8da4b8;color:#0f1b26}

/* ---------- phone estimate bar (est-mobile) recoloured ---------- */
@media (max-width:640px){
  #estimator .estimator__presets{background:rgba(23,23,23,.07);box-shadow:inset 0 1px 2px rgba(23,23,23,.12)}
  #estimator .est-preset.is-active,#estimator .est-preset.is-active:hover{background:var(--chrome-dark);color:#fff;box-shadow:0 2px 8px rgba(23,23,23,.3)}
  #estimator .service-card.is-selected,#estimator .service-card.is-selected:hover{
    border-color:var(--bg);box-shadow:inset 0 0 0 1px var(--bg);background-color:var(--mint-soft)}
  .est-bar{
    background:linear-gradient(160deg,rgba(31,31,31,.92),rgba(25,25,25,.92));
    border-color:rgba(255,255,255,.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 34px rgba(23,23,23,.4);
  }
  .est-bar__label{color:#eaeaea}
  .est-bar__cur{color:#9fb3c4}
  .est-bar__amt{
    background:linear-gradient(180deg,#fff,#d0d0d0 55%,#acacac);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  }
  .est-bar__go{background:linear-gradient(180deg,#fff,#d5d5d5);color:#171717;box-shadow:inset 0 1px 0 #fff}
  .est-bar__go:active{background:#c1c1c1}
  .est-bar__go:focus-visible,.est-bar:focus-visible{outline-color:#b8c8d6}
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.est-bar{background:rgb(25 25 25 / .97)}}
  @media (prefers-reduced-transparency:reduce){.est-bar{background:#191919}}
}

/* ---------- interactive layer (chrome-a.js) ---------- */
.chrome-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:90;pointer-events:none;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,#8da4b8,#fff 50%,#5f7a90);
  box-shadow:0 0 10px rgba(141,164,184,.8);
}
.chrome-rail{
  position:fixed;right:18px;top:50%;translate:0 -50%;z-index:60;display:none;flex-direction:column;gap:6px;
}
@media (min-width:1180px){.chrome-rail{display:flex}}
.chrome-rail a{
  position:relative;display:block;width:26px;height:20px;
  -webkit-tap-highlight-color:transparent;
}
.chrome-rail a::before{
  content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:#fff;border:1.5px solid #5f7a90;box-shadow:0 0 0 2px rgba(255,255,255,.55);
  transition:transform .25s,background .25s;
}
.chrome-rail a:hover::before{transform:scale(1.35)}
.chrome-rail a[aria-current="true"]::before{background:#5f7a90;transform:scale(1.5)}
.chrome-rail a span{
  position:absolute;right:26px;top:50%;translate:8px -50%;opacity:0;pointer-events:none;white-space:nowrap;
  padding:.28rem .65rem;border-radius:99px;font-size:.75rem;font-weight:600;letter-spacing:.02em;
  background:var(--chrome-dark);color:#f3f3f3;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
  transition:opacity .2s,translate .2s;
}
.chrome-rail a:hover span,.chrome-rail a:focus-visible span{opacity:1;translate:0 -50%}

.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--rvd,0ms)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .hero__title{animation:none;--tsx:-40%}
  .hero__img{animation:none}
  .btn--book::before{display:none}
  .chrome-progress{transition:none}
}
@media print{.chrome-progress,.chrome-rail{display:none!important}}

/* ghost-ink buttons sit on light surfaces */
.btn--ghost-ink{color:#1b1b1b!important;border-color:rgba(27,27,27,.28)!important}
.btn--ghost-ink:hover{background:rgba(27,27,27,.06)!important}