/* V10.6 / Premium Tints & Wraps — Editorial direction and scroll cadence.
 * A deliberately limited palette of motion: image depth, typographic contrast,
 * pointer feedback. No hidden content, no scroll-hijacking, no decorative counters.
 * Fonts are loaded from Google Fonts with high-quality native fallbacks.
 */
:root {
  --elite-ink:#0a1016;
  --elite-cream:#f1f0eb;
  --elite-blue:#0756e8;
  --elite-smooth:cubic-bezier(.22,1,.36,1);
  --elite-display:'Space Grotesk','Arial Narrow',Arial,sans-serif;
  --elite-body:'Instrument Sans',Arial,sans-serif;
  --elite-accent:'Instrument Serif',Georgia,serif;
}
html {scroll-padding-top:85px;}
body,button,input,select,textarea {font-family:var(--elite-body);font-optical-sizing:auto;}
body {font-feature-settings:'ss01' on;}
h1,h2,h3,.section-title,.flow-title,.page-hero h1,.detail-copy h2,.reputation-score,.closing-quote h2,.quote-form-heading h3 {
  font-family:var(--elite-display);font-optical-sizing:auto;
}
/* Typography: open tracking without spacing out body text. */
.main-nav a,.header-cta,.mobile-menu a,.btn,.footer-links a {letter-spacing:.045em;font-weight:600;}
.main-nav a{font-size:13px;}
.header-cta {text-transform:uppercase;font-size:12px;letter-spacing:.095em;}
.page-hero h1 {font-weight:500;letter-spacing:.006em;line-height:1.01;}
.page-hero p {font-family:var(--elite-body);letter-spacing:.006em;line-height:1.68;}
.section-title,.cards-heading h2,.reputation-intro h2,.tint-guide-heading h2,.faq h2 {font-weight:500;letter-spacing:.004em;line-height:1.04;}
.detail-copy h2{font-weight:500;letter-spacing:.002em;}
/* Hero: two lines, one expressive serif accent, less copy. This fits the brief
   without sacrificing the estimate form visible on the first screen. */
.hero.hero-atelier.first-screen-quote{background:#0a1118;min-height:0;padding-top:clamp(104px,10.5vh,142px);padding-bottom:clamp(44px,5vw,70px);}
.first-screen-grid{grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr);gap:clamp(26px,4.5vw,70px);}
.first-screen-quote .hero-photo{inset:0 32% 0 0;}
.first-screen-quote .hero-photo img{object-position:50% 44%;filter:saturate(.85) contrast(1.09);}
.first-screen-quote .hero-photo::after{background:linear-gradient(90deg,rgba(5,10,16,.54) 0%,rgba(5,10,16,.16) 43%,#0a1118 100%),linear-gradient(0deg,rgba(5,10,16,.76) 0%,transparent 52%,rgba(5,10,16,.23) 100%);}
.first-screen-quote h1{
  font-family:var(--elite-display);font-size:clamp(66px,7.0vw,116px);line-height:.93;letter-spacing:-.035em;
  font-weight:500;margin:0 0 29px;max-width:690px;text-wrap:nowrap;
}
.first-screen-quote h1 .line{display:block;overflow:visible!important;line-height:1.0;padding:0 .08em .01em 0!important;}
.first-screen-quote h1 .line+.line{margin-top:clamp(0px,.2vw,7px)!important;}
.first-screen-quote h1 .hero-emphasis{
  display:inline-block;font-family:var(--elite-accent);font-style:italic;font-weight:400;
  color:#b5cbf8;font-size:1.23em;line-height:.96;letter-spacing:-.032em;padding-right:.1em;
}
.first-screen-quote .hero-under{margin-top:0;max-width:445px;}
.first-screen-quote .hero-under p{font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:#d0d8e1;max-width:410px;letter-spacing:.002em;}
.hero-proof{display:inline-flex;align-items:center;gap:14px;color:#e8eef8;text-decoration:none;margin-top:23px;padding:0 0 9px;border-bottom:1px solid rgba(255,255,255,.25);transition:border-color .25s,color .25s;}
.hero-proof:hover,.hero-proof:focus-visible{color:#fff;border-color:#b5cbf8;}
.hero-proof-stars{color:#a9c5ff;letter-spacing:2px;font-size:13px;}
.hero-proof-label{font-size:13px;font-weight:600;letter-spacing:.035em;}
.first-screen-quote .quote-panel{background:rgba(13,22,31,.94);border:1px solid rgba(167,196,238,.22);box-shadow:0 28px 100px rgba(0,0,0,.37),0 0 75px rgba(8,78,198,.075);padding:clamp(24px,2.2vw,34px);}
.first-screen-quote .quote-form-heading h3{font-weight:500;letter-spacing:-.015em;font-size:clamp(24px,2.1vw,30px);}
.first-screen-quote .quote-form-heading p{letter-spacing:.025em;}
.quote-option span{font-weight:550;letter-spacing:.012em;transition:background .28s,border-color .28s,color .28s;}
.first-screen-quote .quote-panel .quote-form input:not([type="radio"]),.first-screen-quote .quote-panel .quote-form textarea {border-color:rgba(191,202,216,.27);transition:border-color .25s,box-shadow .25s;}
.first-screen-quote .quote-panel .quote-form input:not([type="radio"]):focus,.first-screen-quote .quote-panel .quote-form textarea:focus {border-color:#87affb;box-shadow:0 0 0 3px rgba(50,109,222,.12);}
.first-screen-quote .form-submit{letter-spacing:.055em;font-size:13px;font-weight:700;}
/* Section 1: real customer trust, treated as brand-level proof rather than a stack of boxes. */
.reputation{background:#edece7!important;color:var(--elite-ink);padding:clamp(88px,9vw,142px) 0 clamp(92px,9.5vw,148px)!important;}
.reputation-heading{align-items:center;}
.reputation-intro h2{font-size:clamp(57px,6.6vw,102px);max-width:710px;line-height:.98;letter-spacing:-.028em;}
.reputation-intro p{max-width:495px;font-size:17px;line-height:1.65;margin-top:25px;}
.reputation-score{font-size:clamp(105px,10.6vw,174px);font-weight:500;letter-spacing:-.08em;line-height:.94;}
.reputation-score span{font-family:var(--elite-body);font-size:.21em;letter-spacing:0;}
.reputation-cards{gap:13px;}
.reputation-card{background:#f8f8f5;border:1px solid #d9dcd9;min-height:320px;padding:clamp(30px,3vw,49px);box-shadow:none;transition:transform .55s var(--elite-smooth),border-color .55s,box-shadow .55s;}
.reputation-card blockquote{font-family:var(--elite-display);font-weight:400;letter-spacing:-.022em;font-size:clamp(19px,1.52vw,25px);line-height:1.51;}
.reputation-card:nth-child(2){background:#0e1a28;color:#f4f7fb;border-color:#0e1a28;}
.reputation-card:nth-child(2) .reputation-source{color:#a3b3ce;}
.reputation-card:nth-child(2) .reputation-author{border-color:rgba(255,255,255,.2);}
.reputation-card:nth-child(2) .reputation-quote-mark{color:#95b6ff;}
.reputation-card:hover{transform:translateY(-6px);box-shadow:0 28px 55px rgba(24,35,49,.12);}
.reputation-author{text-transform:none;font-size:14px;letter-spacing:.02em;}
/* What we do — services form a dramatic centered editorial sequence. */
.services-stage{background:#0b121a;padding-top:clamp(104px,10vw,168px);}
.services-stage .stage-head{max-width:980px;margin:0 auto clamp(53px,6vw,90px);text-align:center;display:block;}
.services-stage .stage-head .section-title{font-weight:500;font-size:clamp(68px,8.1vw,126px);letter-spacing:-.016em;line-height:1;}
.services-stage .stage-head p{max-width:590px;margin:26px auto 0;font-size:17px;line-height:1.68;color:#b6c2d0;}
.flow-row{height:clamp(153px,14vw,218px);background:transparent;border-color:rgba(255,255,255,.13);}
.flow-row-inner{justify-content:center;text-align:center;align-items:center;}
.flow-title{font-family:var(--elite-display);font-size:clamp(43px,5.9vw,88px);letter-spacing:-.028em;font-weight:500;white-space:normal;max-width:75%;line-height:1.04;}
.flow-sub{position:absolute;right:0;bottom:21%;max-width:160px;font-family:var(--elite-body);font-size:14px;letter-spacing:.01em;text-align:right;color:#bdc9d7;}
.flow-media{inset:0;opacity:.10;transform:none;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);}
.flow-row:is(:hover,:focus-visible) .flow-media{opacity:.59;}
.flow-row:is(:hover,:focus-visible) .flow-title{transform:translateY(-4px);color:#fff;letter-spacing:-.016em;}
.flow-row:hover{background:#121c29;}
.flow-foot{border-top:1px solid rgba(255,255,255,.09);}
/* Signature photographic bridge: gives scrolling an editorial pause and introduces useful tint guidance. */
.craft-bridge{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:clamp(530px,48vw,780px);overflow:hidden;background:#0b1724;isolation:isolate;color:#f3f5f9;}
.craft-bridge-photo{grid-column:1;grid-row:1;position:relative;overflow:hidden;min-width:0;}
.craft-bridge-photo img{width:100%;height:100%;object-fit:cover;object-position:51% 45%;display:block;filter:saturate(.84) contrast(1.09);transform:scale(1.03);transition:transform 1.5s var(--elite-smooth);}
.craft-bridge-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 76%,#0b1724 100%);pointer-events:none;}
.craft-bridge:hover .craft-bridge-photo img{transform:scale(1.065);}
.craft-bridge-copy{grid-column:2;grid-row:1;display:flex;align-items:center;position:relative;padding:clamp(54px,6.5vw,106px) clamp(32px,5.5vw,94px);}
.craft-bridge-copy::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 96% 11%,rgba(27,101,230,.15),transparent 63%);pointer-events:none;}
.craft-bridge-copy-inner{position:relative;z-index:1;max-width:690px;}
.craft-bridge h2{font-family:var(--elite-display);font-weight:500;letter-spacing:-.03em;line-height:.99;font-size:clamp(54px,6vw,101px);margin:0 0 32px;}
.craft-bridge h2 em{font-family:var(--elite-accent);font-style:italic;font-weight:400;color:#a9c5ff;font-size:1.14em;letter-spacing:-.015em;}
.craft-bridge p{max-width:420px;color:#becbda;font-size:clamp(16px,1.2vw,19px);line-height:1.65;margin:0 0 34px;}
.craft-bridge-link{font-size:14px;letter-spacing:.05em;font-weight:650;display:inline-flex;align-items:center;min-height:45px;padding:9px 0;color:#fff;text-decoration:none;border-bottom:1px solid #9cbeff;transition:color .3s,border-color .3s;}
.craft-bridge-link:hover,.craft-bridge-link:focus-visible{color:#9cbeff;border-color:white;}
/* Richer contrast on the informative guide, without burying the actual content. */
.tint-guide{background:#f3f2ed!important;}
.tint-guide-heading h2{font-family:var(--elite-display);font-weight:500;letter-spacing:-.02em;}
.tint-guide .film-tile{border:1px solid #d8dce0;transition:box-shadow .5s var(--elite-smooth),transform .5s var(--elite-smooth),border-color .5s;}
.tint-guide .film-tile:hover{transform:translateY(-4px);border-color:#a6b9d7;box-shadow:0 15px 34px rgba(24,48,85,.06);}
.shade-column{box-shadow:0 25px 80px rgba(26,39,55,.07);}
/* One cohesive headline language across the remainder of the site. */
.blue-inner h2{font-family:var(--elite-display);font-weight:500;letter-spacing:-.015em;}
.work-head h2,.closing-quote h2{font-family:var(--elite-display);font-weight:500;letter-spacing:-.016em;}
.work-head p{font-size:17px;line-height:1.7;}
.service-cards-section .cards-heading h2{letter-spacing:-.024em;}
.pixel-card h3{font-family:var(--elite-display);font-weight:500;letter-spacing:-.021em;}
.footer{background:#080d13;}
.footer-brand{filter:contrast(1.12);}
/* Scroll choreography: readable from the first frame; no visibility gate. */
.js .v8-enter,.js .js-reveal{opacity:1!important;transform:none!important;}
@keyframes elite-drift-in{from{transform:translate3d(0,18px,0);opacity:.8;}to{transform:translate3d(0,0,0);opacity:1;}}
@keyframes elite-image-journey{from{transform:scale(1.085) translateY(14px);}to{transform:scale(1) translateY(-5px);}}
@supports (animation-timeline:view()) {
 @media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .craft-bridge-photo img{animation:elite-image-journey 1s linear both;animation-timeline:view(block);animation-range:entry 0% exit 100%;}
  .craft-bridge h2{animation:elite-drift-in 1s linear both;animation-timeline:view(block);animation-range:entry 0% cover 42%;}
  .reputation-heading{animation:elite-drift-in 1s linear both;animation-timeline:view(block);animation-range:entry 0% cover 32%;}
  .tint-guide .shade-column{animation:elite-drift-in 1s linear both;animation-timeline:view(block);animation-range:entry 0% cover 25%;}
 }
}
/* Touch/mobile behavior: the photo is always there; nothing relies on hover. */
@media(max-width:1100px){
 .first-screen-grid{grid-template-columns:minmax(0,1fr) minmax(395px,1fr);gap:25px;}
 .first-screen-quote h1{font-size:clamp(58px,7vw,82px);}
 .flow-title{max-width:76%;}
 .craft-bridge{min-height:530px;}
 .craft-bridge h2{font-size:clamp(50px,5.75vw,79px);}
}
@media(max-width:900px){
 .hero.hero-atelier.first-screen-quote{padding:105px 0 60px;min-height:0;}
 .first-screen-grid{grid-template-columns:1fr;gap:26px;}
 .first-screen-quote .hero-photo{inset:0 0 auto;height:430px;}
 .first-screen-quote .hero-photo::after{background:linear-gradient(0deg,#0a1118 0%,rgba(10,17,24,.2) 90%),linear-gradient(90deg,rgba(10,17,24,.65),rgba(10,17,24,.14));}
 .first-screen-quote h1{font-size:clamp(58px,9vw,88px);margin-bottom:15px;}
 .first-screen-quote .hero-under p{font-size:16px;max-width:550px;}
 .first-screen-quote .hero-quote-block{max-width:760px;}
 .flow-sub{position:static;max-width:165px;text-align:right;}
 .flow-title{max-width:72%;}
 .craft-bridge{grid-template-columns:1fr 1fr;min-height:440px;}
 .craft-bridge h2{font-size:clamp(45px,6.5vw,75px);}
 .craft-bridge-copy{padding:45px 35px;}
}
@media(max-width:700px){
 .hero.hero-atelier.first-screen-quote{padding:102px 0 47px;}
 .first-screen-grid{gap:23px;}
 .first-screen-quote .hero-photo{height:390px;}
 .first-screen-quote h1{font-size:clamp(53px,11vw,74px);letter-spacing:-.039em;line-height:.95;}
 .first-screen-quote .hero-under p{font-size:15px;line-height:1.54;max-width:455px;}
 .hero-proof{gap:10px;margin-top:17px;}
 .hero-proof-label{font-size:12px;}
 .first-screen-quote .quote-panel{padding:22px 18px;}
 .reputation-intro h2{font-size:clamp(49px,11vw,72px);}
 .reputation-overall .reputation-score{font-size:clamp(86px,20vw,123px);}
 .reputation-card:nth-child(2){background:#0e1a28;}
 .services-stage .stage-head .section-title{font-size:clamp(57px,11vw,84px);}
 .services-stage .stage-head p{font-size:15.5px;max-width:340px;}
 .flow-row-inner{justify-content:center;}
 .flow-title{max-width:85%;font-size:clamp(35px,7.5vw,59px);}
 .flow-sub{display:none;}
 .flow-media{opacity:.17!important;left:10%;}
 .craft-bridge{display:flex;flex-direction:column;min-height:0;}
 .craft-bridge-photo{height:clamp(330px,85vw,530px);}
 .craft-bridge-photo::after{background:linear-gradient(0deg,#0b1724 0%,transparent 25%);}
 .craft-bridge-copy{padding:30px 8vw 78px;margin-top:-1px;}
 .craft-bridge h2{font-size:clamp(55px,11vw,82px);margin-bottom:22px;}
 .craft-bridge p{font-size:16px;max-width:340px;margin-bottom:22px;}
 .craft-bridge-photo img{object-position:50% 48%;}
 .blue-inner h2{font-size:clamp(54px,10vw,75px);}
}
@media(max-width:380px){
 .first-screen-quote h1{font-size:clamp(47px,11vw,55px);}
 .hero-proof-stars{font-size:11px;letter-spacing:1px;}
 .hero-proof-label{font-size:11px;}
 .flow-title{font-size:clamp(32px,8.5vw,40px);}
 .craft-bridge h2{font-size:clamp(50px,12vw,65px);}
}
@media(prefers-reduced-motion:reduce){
 .craft-bridge *, .reputation-card,.tint-guide .film-tile{animation:none!important;transition:none!important;transform:none!important;}
}