:root{
  --ink:        #0A0A0B;
  --ink-soft:   #0E0E11;
  --panel:      #141417;
  --panel-2:    #1A1A1F;
  --line:       #26262C;
  --line-soft:  #1C1C22;
  --white:      #F7F6F3;
  --text:       #E6E6EA;
  --muted:      #9EA0A8;
  --muted-2:    #6B6C75;
  --chrome-1:   #FFFFFF;
  --chrome-2:   #C9CDD6;
  --chrome-3:   #82868F;
  --wa:         #25D366;
  --focus:      #9CC2FF;
  --radius:     14px;
  --radius-lg:  22px;
  --maxw:       1180px;
  --pad:        clamp(20px, 5vw, 64px);
  --shadow:     0 20px 60px rgba(0,0,0,.55);
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--ink);
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:"Sora", sans-serif;
  font-size:clamp(1rem, 1.05rem, 1.125rem);
  line-height:1.65;
  overflow-x:hidden;
}

main,
header,
footer,
section{
  max-width:100%;
}

body::before,
.section-noise::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:4px;
}

.skip-link{
  position:fixed;
  left:16px;
  top:12px;
  z-index:100;
  transform:translateY(-140%);
  background:var(--white);
  color:var(--ink);
  padding:10px 14px;
  border-radius:999px;
}

.skip-link:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px);
  transition:border-color .25s ease, background .25s ease;
}

.site-header.is-scrolled{
  border-bottom:1px solid var(--line-soft);
  background:rgba(10,10,11,.9);
}

.nav-wrap{
  width:min(100%, calc(var(--maxw) + (var(--pad) * 2)));
  margin:0 auto;
  padding:18px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition:padding .25s ease;
}

.site-header.is-scrolled .nav-wrap{padding-block:10px}

.brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.brand img{
  width:auto;
  height:40px;
  max-width:128px;
  object-fit:contain;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2.2vw, 30px);
  font-family:"Oswald", sans-serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.site-nav a:not(.btn){
  color:var(--muted);
  transition:color .2s ease;
}

.site-nav a:not(.btn):hover{color:var(--white)}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(20,20,23,.8);
  color:var(--white);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.nav-toggle span:not(.sr-only){
  width:18px;
  height:2px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}

body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:12px 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:"Oswald", sans-serif;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  background:var(--white);
  color:var(--ink);
}

.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--white);
}

.btn-ghost:hover{border-color:var(--white)}

.btn-wa{
  background:var(--wa);
  color:#06251a;
  box-shadow:0 14px 28px rgba(37,211,102,.18);
}

.wa-icon{
  width:17px;
  height:17px;
  background:currentColor;
  display:inline-block;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.01 3.2A12.74 12.74 0 0 0 5.1 22.5L3.6 28.8l6.43-1.5A12.75 12.75 0 1 0 16.01 3.2Zm0 2.34a10.41 10.41 0 0 1 8.84 15.9 10.42 10.42 0 0 1-13.98 3.65l-.43-.25-3.82.9.9-3.72-.28-.45A10.4 10.4 0 0 1 16 5.54Zm-4.32 4.7c-.23 0-.6.08-.92.43-.32.35-1.2 1.18-1.2 2.86s1.23 3.32 1.4 3.55c.17.23 2.37 3.8 5.84 5.17 2.88 1.14 3.47.91 4.1.86.63-.06 2.03-.83 2.32-1.64.29-.8.29-1.49.2-1.64-.09-.14-.32-.23-.67-.4-.35-.18-2.04-1-2.36-1.12-.32-.12-.55-.18-.78.17-.23.35-.9 1.12-1.1 1.35-.2.23-.4.26-.75.09-.35-.18-1.47-.54-2.8-1.72-1.04-.92-1.74-2.06-1.94-2.4-.2-.35-.02-.54.15-.71.16-.16.35-.4.52-.6.18-.2.23-.35.35-.58.12-.23.06-.43-.03-.6-.09-.18-.77-1.87-1.07-2.56-.28-.67-.57-.58-.78-.59h-.48Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:hidden;
  isolation:isolate;
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:-3;
  background:url("assets/work/hero-gloss-blue-amg.jpg") center/cover no-repeat;
  transform:scale(1.02);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.68) 46%, rgba(10,10,11,.34) 100%),
    linear-gradient(180deg, rgba(10,10,11,.42) 0%, rgba(10,10,11,.14) 42%, var(--ink) 100%);
}

.hero-content{
  width:min(100%, calc(var(--maxw) + (var(--pad) * 2)));
  margin:0 auto;
  padding:150px var(--pad) 72px;
  min-width:0;
}

.eyebrow,
.micro,
.section-note{
  font-family:"Oswald", sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}

.eyebrow{
  color:var(--muted);
  margin:0 0 14px;
}

h1,h2{
  margin:0;
  color:var(--white);
  font-family:"Anton", sans-serif;
  font-weight:400;
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:0;
}

h1{
  max-width:950px;
  font-size:clamp(2.6rem, 7vw, 6rem);
  overflow-wrap:break-word;
}

h2{font-size:clamp(2rem, 4.5vw, 3.4rem)}

h3{
  margin:0 0 10px;
  color:var(--white);
  font-family:"Oswald", sans-serif;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

p{margin:0;color:var(--muted)}

.chrome-text{
  background:linear-gradient(180deg,var(--chrome-1),var(--chrome-2) 55%,var(--chrome-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-copy{
  max-width:60ch;
  margin-top:24px;
  color:var(--text);
  font-size:clamp(1rem, 1.35vw, 1.2rem);
  overflow-wrap:break-word;
  min-width:0;
}

.hero-actions{
  margin-top:34px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.micro{
  margin-top:18px;
  color:var(--muted);
}

.hero-reveal{
  opacity:0;
  transform:translateY(18px);
  animation:heroIn .75s ease forwards;
}

.hero-reveal:nth-child(2){animation-delay:.12s}
.hero-reveal:nth-child(3){animation-delay:.22s}
.hero-reveal:nth-child(4){animation-delay:.32s}
.hero-reveal:nth-child(5){animation-delay:.42s}

@keyframes heroIn{
  to{opacity:1;transform:translateY(0)}
}

.trust-strip{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--ink);
}

.trust-grid{
  width:min(100%, calc(var(--maxw) + (var(--pad) * 2)));
  margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.trust-item{
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:28px 22px;
  border-left:1px solid var(--line-soft);
  min-width:0;
}

.trust-item:last-child{border-right:1px solid var(--line-soft)}

.trust-item strong{
  font-family:"Anton", sans-serif;
  font-size:clamp(2rem, 3.2vw, 3.25rem);
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}

.trust-item span{
  color:var(--muted);
  font-family:"Oswald", sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.section{
  position:relative;
  padding:clamp(78px, 10vw, 128px) 0;
  background:var(--ink);
}

.section:nth-of-type(even){background:var(--ink-soft)}

.section-inner{
  width:min(100%, calc(var(--maxw) + (var(--pad) * 2)));
  margin:0 auto;
  padding:0 var(--pad);
}

.section-heading{
  max-width:760px;
  margin-bottom:38px;
}

.section-heading p:not(.eyebrow){
  margin-top:16px;
  color:var(--text);
}

.card-grid,
.process-grid,
.reviews-grid{
  display:grid;
  gap:16px;
}

.services-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}

.service-card,
.process-step,
.review-card,
.contact-card,
.quote-form{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), rgba(20,20,23,.72));
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}

.service-card{
  min-height:210px;
  padding:28px;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}

.service-card:hover{
  transform:translateY(-3px);
  background:var(--panel-2);
  border-color:var(--chrome-3);
}

.section-note{
  margin-top:24px;
  color:var(--muted);
}

.work-section{background:var(--ink)}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.gallery-item{
  position:relative;
  min-height:320px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  cursor:pointer;
  text-align:left;
}

.gallery-item img{
  width:100%;
  height:100%;
  aspect-ratio:1 / 1.08;
  object-fit:cover;
  filter:brightness(.86);
  transition:transform .35s ease, filter .35s ease;
}

.gallery-item:hover img{
  transform:scale(1.03);
  filter:brightness(1);
}

.gallery-item span{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  padding-top:42px;
  color:var(--white);
  font-family:"Oswald", sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.35;
  text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.85);
}

.gallery-item::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:45%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.88));
  pointer-events:none;
}

.section-actions{margin-top:28px}

.process-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}

.process-step{
  padding:24px;
  min-height:300px;
}

.step-num{
  display:block;
  margin-bottom:42px;
  font-family:"Anton", sans-serif;
  font-size:4rem;
  line-height:1;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:16px;
}

.why-item{
  grid-column:span 3;
  min-height:230px;
  padding:28px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
}

.why-wide{grid-column:span 6}

.line-icon{
  display:block;
  width:44px;
  height:44px;
  margin-bottom:22px;
  border:1px solid var(--line);
  border-radius:999px;
  position:relative;
}

.line-icon::before,
.line-icon::after{
  content:"";
  position:absolute;
  background:var(--chrome-2);
}

.line-icon::before{
  width:18px;
  height:1px;
  left:13px;
  top:21px;
}

.line-icon::after{
  width:1px;
  height:18px;
  left:21px;
  top:13px;
}

.reviews-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}

.review-card{
  margin:0;
  padding:28px;
}

.review-card blockquote{
  margin:0 0 22px;
  color:var(--text);
  font-size:1.05rem;
}

.review-card figcaption{
  color:var(--muted);
  font-family:"Oswald", sans-serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.faq-layout{
  display:grid;
  grid-template-columns:minmax(220px, .65fr) minmax(0, 1.35fr);
  gap:clamp(30px, 6vw, 80px);
  align-items:start;
}

.faq-list{
  border-top:1px solid var(--line);
}

.faq-item{
  border-bottom:1px solid var(--line);
}

.faq-item h3{margin:0}

.faq-item button{
  width:100%;
  padding:22px 42px 22px 0;
  border:0;
  background:transparent;
  color:var(--white);
  cursor:pointer;
  text-align:left;
  font-family:"Oswald", sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  position:relative;
}

.faq-item button::after{
  content:"+";
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:1.4rem;
}

.faq-item button[aria-expanded="true"]::after{content:"-"}

.faq-panel{
  padding:0 42px 22px 0;
}

.quote-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(300px, .9fr);
  gap:18px;
}

.quote-form,
.contact-card{
  padding:28px;
}

.form-field{
  margin-bottom:18px;
}

label,
dt{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-family:"Oswald", sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

input,
select,
textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
  color:var(--text);
  padding:14px 16px;
}

textarea{resize:vertical}
select{appearance:auto}

.field-error{
  min-height:18px;
  margin-top:6px;
  color:var(--white);
  font-size:.82rem;
}

.contact-card dl{
  margin:22px 0 0;
}

.contact-card div{
  padding:16px 0;
  border-top:1px solid var(--line-soft);
}

.contact-card dd{
  margin:0;
  color:var(--text);
}

.contact-card a{
  color:var(--white);
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:4px;
}

.site-footer{
  border-top:1px solid var(--line);
  background:var(--ink);
  padding:42px var(--pad) 24px;
}

.footer-inner{
  width:min(100%, var(--maxw));
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:32px;
  align-items:start;
}

.footer-brand .brand{margin-bottom:18px}

.footer-links,
.footer-social{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
  font-family:"Oswald", sans-serif;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.footer-links a:hover,
.footer-social a:hover{color:var(--white)}

.copyright{
  width:min(100%, var(--maxw));
  margin:34px auto 0;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
  color:var(--muted-2);
  font-size:.9rem;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
}

.lightbox[hidden]{display:none}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.86);
}

.lightbox-dialog{
  position:relative;
  width:min(920px, 94vw);
  max-height:90vh;
  z-index:1;
}

.lightbox-dialog img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
}

.lightbox-dialog p{
  margin-top:12px;
  color:var(--white);
  font-family:"Oswald", sans-serif;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lightbox-close{
  position:absolute;
  top:-16px;
  right:-16px;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  font-size:1.75rem;
  line-height:1;
}

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}

.reveal.in{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 980px){
  .services-grid,
  .gallery-grid,
  .reviews-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}

  .process-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .trust-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .trust-item:nth-child(odd){border-left:1px solid var(--line-soft)}
  .faq-layout,
  .quote-layout{grid-template-columns:1fr}
}

@media (max-width: 860px){
  .nav-toggle{display:inline-flex}

  .site-nav{
    position:absolute;
    left:var(--pad);
    right:var(--pad);
    top:calc(100% + 8px);
    display:grid;
    gap:0;
    padding:14px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(14,14,17,.98);
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  body.nav-open .site-nav{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .site-nav a{
    padding:14px 10px;
    border-bottom:1px solid var(--line-soft);
  }

  .site-nav .nav-cta{
    margin-top:12px;
    border-bottom:0;
  }
}

@media (max-width: 640px){
  .hero{
    min-height:92svh;
  }

  .hero-content{
    width:100%;
    max-width:100%;
    padding:130px max(20px, env(safe-area-inset-right)) 46px max(20px, env(safe-area-inset-left));
  }

  .hero-media{
    transform:none;
  }

  h1{
    font-size:clamp(2.05rem, 9.4vw, 3.2rem);
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }

  .hero-copy{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .eyebrow,
  .micro{
    font-size:.72rem;
    letter-spacing:.16em;
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .hero-actions .btn,
  .quote-form .btn{
    width:100%;
    max-width:100%;
  }

  .trust-grid,
  .services-grid,
  .gallery-grid,
  .process-grid,
  .reviews-grid,
  .why-grid{grid-template-columns:minmax(0, 1fr)}

  .why-item,
  .why-wide{grid-column:auto}

  .trust-item{
    min-height:108px;
    border-right:1px solid var(--line-soft);
  }

  .gallery-item{min-height:280px}

  .footer-inner{grid-template-columns:1fr}

  .lightbox-close{
    right:0;
    top:-54px;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }

  .reveal,
  .hero-reveal{
    opacity:1;
    transform:none;
  }
}