:root{
  --ink:#101114;
  --panel:#1a1d22;
  --slate:#232831;
  --silver:#c4cad1;
  --ivory:#f4f4f2;
  --white:#f5f5f5;
  --muted:#b4bac2;
  --ink-muted:#555c64;
  --line:rgba(196,202,209,.2);
  --line-light:rgba(16,17,20,.15);
  --serif:'Sora',Arial,sans-serif;
  --sans:'Manrope',Arial,sans-serif;
  --space:clamp(4.5rem,8vw,8rem);
  --max:1280px;
  --ease:220ms ease
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
img{
  display:block;
  max-width:100%
}
a{
  color:inherit;
  text-decoration:none
}
button,input,textarea,select{
  font:inherit
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--silver);
  outline-offset:4px
}
::selection{
  background:var(--silver);
  color:var(--ink)
}
.container{
  width:min(calc(100% - 3rem),var(--max));
  margin-inline:auto
}
.eyebrow{
  margin:0 0 1rem;
  color:var(--silver);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase
}
.eyebrow.dark{
  color:#626a73
}
.display{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.08
}
.section-title{
  font:500 clamp(2.1rem,4vw,3.55rem)/1.12 var(--serif);
  letter-spacing:-.05em;
  margin:0 0 1.35rem
}
.lede{
  max-width:680px;
  color:#d4d7da;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.8
}
.section{
  padding-block:var(--space)
}
.section-light{
  background:var(--ivory);
  color:var(--ink)
}
.section-light .lede{
  color:#555c64
}
.section-light .eyebrow{
  color:#626a73
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:2rem;
  margin-bottom:3rem
}
.section-head>div{
  max-width:720px
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:.9rem;
  font-weight:700;
  border-bottom:1px solid var(--line);
  padding:.5rem 0;
  transition:gap var(--ease),border-color var(--ease)
}
.text-link:hover{
  gap:1rem;
  border-color:var(--silver)
}
.text-link::after{
  content:'↗';
  font-size:1.1em
}
.btn{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.35rem;
  border:1px solid transparent;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.01em;
  transition:background var(--ease),color var(--ease),border-color var(--ease),transform var(--ease);
  cursor:pointer
}
.btn:hover{
  transform:translateY(-2px)
}
.btn-primary{
  background:var(--silver);
  color:var(--ink)
}
.btn-primary:hover{
  background:#fff
}
.btn-outline{
  border-color:rgba(245,245,245,.56);
  color:var(--white);
  background:transparent
}
.btn-outline:hover{
  background:rgba(245,245,245,.1);
  border-color:#fff
}
.btn-dark{
  background:var(--ink);
  color:var(--white)
}
.btn-dark:hover{
  background:#333840
}
.icon-arrow{
  font-size:1.2em;
  margin-left:.25rem
}
.site-header{
  height:84px;
  position:fixed;
  z-index:20;
  inset:0 0 auto;
  border-bottom:1px solid transparent;
  transition:background var(--ease),border-color var(--ease),height var(--ease)
}
.site-header.scrolled{
  height:72px;
  background:rgba(16,17,20,.95);
  backdrop-filter:blur(14px);
  border-color:var(--line)
}
.nav-wrap{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem
}
.brand{
  display:flex;
  align-items:center;
  width:210px;
  flex:none
}
.brand img{
  width:100%;
  height:auto
}
.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(1rem,2vw,2rem)
}
.main-nav a{
  font-size:.84rem;
  font-weight:600;
  color:#e0e2e4;
  transition:color var(--ease)
}
.main-nav a:hover,.main-nav a[aria-current=page]{
  color:#fff
}
.main-nav a[aria-current=page]{
  text-decoration:underline;
  text-decoration-color:var(--silver);
  text-underline-offset:8px
}
.header-cta{
  min-height:44px;
  padding:.65rem 1rem;
  font-size:.8rem
}
.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  color:var(--white);
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  font-size:1.35rem
}
.hero{
  min-height:min(820px,100svh);
  height:740px;
  max-height:900px;
  position:relative;
  display:flex;
  align-items:center;
  isolation:isolate;
  padding-top:84px;
  overflow:hidden;
  background:#090a0c
}
.hero::before{
  content:'';
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:linear-gradient(90deg,rgba(11,12,14,.34) 0%,rgba(11,12,14,.18) 34%,rgba(11,12,14,.02) 76%),linear-gradient(0deg,rgba(11,12,14,.16),transparent 36%),url('../assets/images/approved/hero-ceramic.png');
  background-size:cover;
  background-position:center 53%;
  transform:scale(1.015)
}
.hero-copy{
  max-width:720px;
  padding-block:5rem
}
.hero h1{
  font:500 clamp(3.2rem,6.1vw,5.5rem)/1.02 var(--serif);
  letter-spacing:-.06em;
  margin:0;
  max-width:740px
}
.hero .lede{
  max-width:570px;
  margin:1.7rem 0 2rem;
  color:#e0e1e2
}
.hero-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap
}
.hero-meta{
  position:absolute;
  bottom:2.2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
  width:min(calc(100% - 3rem),var(--max));
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d4d7da
}
.hero-meta span:last-child{
  display:flex;
  align-items:center;
  gap:.65rem
}
.hero-meta span:last-child::before{
  content:'';
  width:35px;
  height:1px;
  background:var(--silver)
}
.page-hero{
  min-height:480px;
  padding:150px 0 5rem;
  display:flex;
  align-items:end;
  position:relative;
  overflow:hidden;
  background-color:var(--panel);
  background-size:cover;
  background-position:center 54%
}
.page-hero--services{background-image:url('../assets/images/approved/hero-audi.png')}
.page-hero--gallery{background-image:url('../assets/images/approved/hero-ceramic.png')}
.page-hero--ceramic,
.page-hero--contact{background-image:url('../assets/images/approved/hero-home.png')}
.page-hero--about{background-image:url('../assets/images/approved/hero-bmw.png')}
.page-hero::before{
  content:'';
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(16,17,20,.45) 0%,rgba(16,17,20,.28) 29%,rgba(16,17,20,.08) 51%,transparent 70%)
}
.page-hero .container{
  position:relative;
  z-index:2
}
.page-hero h1{
  font:500 clamp(2.75rem,5.5vw,5rem)/1.05 var(--serif);
  letter-spacing:-.055em;
  max-width:850px;
  margin:0
}
.page-hero .lede{
  max-width:650px;
  margin:1.3rem 0 0
}
.crumb{
  font-size:.78rem;
  color:var(--silver);
  margin-bottom:1.4rem;
  letter-spacing:.08em
}
.crumb a:hover{
  text-decoration:underline
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem
}
.service-card{
  min-width:0
}
.service-card a{
  display:block
}
.service-image{
  height:290px;
  overflow:hidden;
  background:var(--slate)
}
.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 500ms ease,filter 500ms ease
}
.service-card a:hover img{
  transform:scale(1.04);
  filter:brightness(1.08)
}
.service-card h3{
  font:500 1.18rem/1.3 var(--serif);
  margin:1.2rem 0 .45rem
}
.service-card p{
  font-size:.9rem;
  line-height:1.7;
  color:var(--muted);
  margin:0
}
.service-card .text-link{
  font-size:.79rem;
  margin-top:.7rem
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(3rem,8vw,8rem)
}
.split-image{
  height:520px;
  overflow:hidden;
  background:var(--slate)
}
.split-image img{
  width:100%;
  height:100%;
  object-fit:cover
}
.split-copy{
  max-width:520px
}
.split-copy p{
  margin:0 0 1.4rem
}
.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  margin-top:3rem
}
.principle{
  border-top:1px solid var(--line);
  padding-top:1rem
}
.principle b{
  display:block;
  font:500 1.15rem var(--serif);
  margin-bottom:.5rem
}
.principle p{
  color:var(--muted);
  font-size:.9rem;
  margin:0
}
.project-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1.1rem
}
.project-card{
  position:relative;
  min-height:460px;
  overflow:hidden;
  background:var(--slate)
}
.project-card:nth-child(2){
  min-height:460px
}
.project-card img{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  transition:transform 500ms ease
}
.project-card:hover img{
  transform:scale(1.035)
}
.project-card::after{
  content:'';
  position:absolute;
  inset:35% 0 0;
  background:linear-gradient(0deg,rgba(12,13,15,.9),transparent)
}
.project-caption{
  position:absolute;
  z-index:1;
  left:1.5rem;
  right:1.5rem;
  bottom:1.4rem;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem
}
.project-caption h3{
  font:500 1.4rem var(--serif);
  margin:0
}
.project-caption p{
  font-size:.78rem;
  color:#d2d5d8;
  margin:.2rem 0 0
}
.project-caption span{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--silver)
}
.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}
.quote{
  border-top:1px solid var(--line-light);
  padding:1.5rem 1.2rem 0 0
}
.quote blockquote{
  font:400 clamp(1.05rem,1.6vw,1.3rem)/1.55 var(--serif);
  margin:0 0 1.6rem;
  letter-spacing:-.02em
}
.quote figcaption{
  font-size:.84rem;
  font-weight:700
}
.quote figcaption span{
  display:block;
  color:#6a7178;
  font-size:.75rem;
  font-weight:500
}
.cta-band{
  padding:clamp(4rem,8vw,7rem) 0;
  background:linear-gradient(90deg,rgba(13,14,16,.82),rgba(13,14,16,.36)),url('../assets/images/cta-black-car-tunnel.jpg') center 48%/cover
}
.cta-inner{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:3rem
}
.cta-inner h2{
  font:500 clamp(2rem,4.5vw,4rem)/1.08 var(--serif);
  letter-spacing:-.05em;
  max-width:740px;
  margin:0
}
.site-footer{
  background:#0b0c0e;
  padding:4rem 0 1.5rem
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2rem;
  padding-bottom:3.5rem
}
.footer-brand{
  width:210px;
  margin-bottom:1rem
}
.footer-note{
  max-width:260px;
  color:var(--muted);
  font-size:.85rem
}
.footer-col h3{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 1rem
}
.footer-col a,.footer-col p{
  display:block;
  color:#d3d6d9;
  font-size:.84rem;
  margin:.45rem 0
}
.footer-col a:hover{
  text-decoration:underline
}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:1.2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:#9fa5ad;
  font-size:.73rem
}
.footer-bottom a{
  text-decoration:underline;
  text-underline-offset:3px
}
.service-detail-list{
  display:grid;
  gap:0
}
.service-detail{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(2rem,6vw,6rem);
  padding:3rem 0;
  border-top:1px solid var(--line)
}
.service-detail:last-child{
  border-bottom:1px solid var(--line)
}
.service-detail img{
  width:100%;
  height:300px;
  object-fit:cover
}
.service-detail h2{
  font:500 clamp(1.6rem,2.6vw,2.35rem)/1.15 var(--serif);
  letter-spacing:-.04em;
  margin:.2rem 0 .8rem
}
.price{
  font-weight:700;
  color:var(--silver);
  margin:.6rem 0
}
.service-detail p{
  color:#d1d4d7;
  max-width:620px
}
.service-detail ul{
  padding-left:1.15rem;
  color:#d1d4d7;
  font-size:.92rem
}
.service-detail li{
  padding:.2rem 0
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
  margin-top:3rem
}
.process-step{
  border-top:1px solid var(--line-light);
  padding-top:1.1rem
}
.process-step span{
  font-size:.75rem;
  letter-spacing:.16em;
  color:#6c737a
}
.process-step h3{
  font:500 1.1rem var(--serif);
  margin:.7rem 0
}
.process-step p{
  font-size:.88rem;
  color:#555c64;
  margin:0
}
.benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin-top:2.5rem
}
.benefit{
  border-top:1px solid var(--line);
  padding-top:1.1rem
}
.benefit h3{
  font:500 1.12rem var(--serif);
  margin:.3rem 0
}
.benefit p{
  color:var(--muted);
  font-size:.9rem;
  margin:0
}
.package-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:2rem
}
.package{
  padding:1.6rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025)
}
.package.featured{
  border-color:rgba(196,202,209,.7);
  background:rgba(196,202,209,.07)
}
.package h3{
  font:500 1.25rem var(--serif);
  margin:.2rem 0
}
.package .price{
  font:500 1.6rem var(--serif);
  margin:.8rem 0
}
.package p,.package li{
  color:#d1d4d7;
  font-size:.9rem
}
.package ul{
  padding-left:1.1rem
}
.faq{
  max-width:880px;
  margin:2rem auto 0
}
.faq details{
  border-top:1px solid var(--line);
  padding:1.2rem 0
}
.faq details:last-child{
  border-bottom:1px solid var(--line)
}
.faq summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1rem
}
.faq summary::-webkit-details-marker{
  display:none
}
.faq summary::after{
  content:'+';
  color:var(--silver);
  font-size:1.3rem
}
.faq details[open] summary::after{
  content:'−'
}
.faq details p{
  max-width:740px;
  color:#c1c6cb;
  margin:.8rem 0 0
}
.gallery-tools{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  align-items:center;
  margin-bottom:2rem
}
.comparison-feature{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  padding:1rem 0 3rem;
  margin-bottom:2.5rem;
  border-bottom:1px solid var(--line)
}
.comparison-copy h2{
  max-width:460px;
  margin:0;
  font:500 clamp(1.85rem,3.2vw,2.8rem)/1.12 var(--serif);
  letter-spacing:-.045em;
  text-transform:uppercase
}
.comparison-copy>p:last-child{
  max-width:420px;
  margin:.9rem 0 0;
  color:#c4c8cc
}
.comparison-figure{
  margin:0
}
.comparison-figure img{
  width:100%;
  max-height:450px;
  object-fit:contain;
  background:#0b0c0e;
  border:1px solid rgba(196,202,209,.2)
}
.comparison-figure figcaption{
  margin-top:.5rem;
  color:#c4c8cc;
  font-size:.82rem
}
.filters{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap
}
.filter-btn{
  background:none;
  border:1px solid var(--line);
  color:#d7dadd;
  padding:.55rem .9rem;
  cursor:pointer;
  font-size:.8rem
}
.filter-btn[aria-pressed=true],.filter-btn:hover{
  background:var(--silver);
  color:var(--ink);
  border-color:var(--silver)
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem
}
.gallery-item{
  position:relative;
  min-height:280px;
  overflow:hidden;
  background:var(--slate);
  border:0;
  padding:0;
  color:inherit;
  text-align:left;
  cursor:zoom-in
}
.gallery-item:nth-child(3n+1){
  grid-row:span 1
}
.gallery-item img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  transition:transform 400ms ease,filter 400ms ease
}
.gallery-item:hover img{
  transform:scale(1.035);
  filter:brightness(.78)
}
.gallery-label{
  position:absolute;
  inset:auto 0 0;
  padding:3rem 1.2rem 1rem;
  background:linear-gradient(0deg,rgba(10,11,13,.86),transparent);
  pointer-events:none
}
.gallery-label b{
  display:block;
  font:500 1.05rem var(--serif)
}
.gallery-label span{
  font-size:.74rem;
  color:#d2d5d8
}
.lightbox{
  position:fixed;
  z-index:40;
  inset:0;
  background:rgba(5,6,7,.94);
  display:none;
  align-items:center;
  justify-content:center;
  padding:4rem 1rem 2rem
}
.lightbox.open{
  display:flex
}
.lightbox img{
  max-height:82vh;
  max-width:min(1100px,90vw);
  object-fit:contain
}
.lightbox-caption{
  position:absolute;
  bottom:1rem;
  left:1rem;
  right:1rem;
  text-align:center;
  font-size:.85rem;
  color:#d8dbde
}
.lightbox-close{
  position:absolute;
  right:1.5rem;
  top:1rem;
  background:transparent;
  border:1px solid var(--line);
  color:white;
  width:44px;
  height:44px;
  font-size:1.4rem;
  cursor:pointer
}
.story-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem
}
.story-columns p{
  margin:0 0 1rem;
  color:#d1d4d7
}
.contact-layout{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:clamp(3rem,8vw,8rem);
  align-items:start
}
.contact-info h2{
  font:500 1.35rem var(--serif);
  margin:0 0 .5rem
}
.contact-info section{
  padding:1.25rem 0;
  border-top:1px solid var(--line)
}
.contact-info p{
  color:#c4c8cc;
  margin:.2rem 0;
  font-size:.92rem
}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem
}
.field{
  display:flex;
  flex-direction:column;
  gap:.4rem
}
.field.full{
  grid-column:1/-1
}
.field label{
  font-size:.82rem;
  font-weight:700
}
.field input,.field textarea,.field select{
  width:100%;
  background:#17191d;
  border:1px solid #454a51;
  color:var(--white);
  padding:.85rem .9rem;
  min-height:50px;
  border-radius:0
}
.field textarea{
  min-height:130px;
  resize:vertical
}
.field input::placeholder,.field textarea::placeholder{
  color:#969da5
}
.date-picker-control{
  position:relative
}
.date-picker-control input[type="date"]{
  color-scheme:dark;
  padding-right:3.5rem
}
.date-picker-control input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0
}
.date-picker-button{
  position:absolute;
  top:50%;
  right:1px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  background:#17191d;
  color:var(--white);
  cursor:pointer
}
.date-picker-button:hover{
  background:#232831
}
.date-picker-button svg{
  width:21px;
  height:21px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.date-picker-button:focus-visible{
  outline:2px solid var(--silver);
  outline-offset:2px
}
.form-hint{
  font-size:.77rem;
  color:#aeb4ba;
  margin:0
}
.form-status{
  grid-column:1/-1;
  min-height:1.5em;
  color:#d6dbe0;
  font-size:.9rem
}
.contact-form[hidden],.pricing-summary[hidden],.request-confirmation[hidden],.field[hidden]{
  display:none!important
}
.field-optional{
  margin-left:.35rem;
  color:#b4bac2;
  font-size:.78em;
  font-weight:500
}
.pricing-summary{
  display:block;
  padding:1.35rem 1.5rem;
  border:1px solid rgba(196,202,209,.35);
  border-left:4px solid var(--silver);
  background:linear-gradient(135deg,#252a32,#1a1d22)
}
.pricing-summary .eyebrow{
  margin-bottom:.45rem;
  font-size:.78rem;
  letter-spacing:.16em
}
.pricing-summary-value{
  display:block;
  font:500 clamp(1.9rem,3vw,2.35rem)/1.12 var(--serif);
  letter-spacing:-.04em
}
.pricing-summary-note{
  margin:.65rem 0 0;
  color:#e0e2e4;
  font-size:.94rem;
  line-height:1.6
}
.request-confirmation{
  min-height:390px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(2rem,5vw,4.5rem);
  border:1px solid var(--line);
  background:linear-gradient(145deg,#1a1d22,#131518)
}
.request-confirmation h2{
  margin:0;
  font:500 clamp(2rem,4vw,3rem)/1.1 var(--serif);
  letter-spacing:-.045em
}
.confirmation-copy{
  max-width:520px;
  margin:1rem 0 2rem;
  color:#d4d7da
}
.contact-form .btn{
  justify-self:start
}
.about-hero-image{
  height:min(62vw,670px);
  min-height:360px;
  overflow:hidden
}
.about-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%
}
.hours{
  border-collapse:collapse;
  width:100%;
  font-size:.86rem
}
.hours td{
  padding:.5rem 0;
  border-bottom:1px solid var(--line)
}
.hours td:last-child{
  text-align:right;
  color:#d3d6d9
}
@media(max-width:1050px){
  .main-nav{
  gap:1rem
}
.main-nav a{
  font-size:.78rem
}
.brand{
  width:185px
}
.header-cta{
  padding:.6rem .8rem
}
.service-grid{
  grid-template-columns:repeat(2,1fr);
  row-gap:2.2rem
}
.service-image{
  height:340px
}
.footer-top{
  grid-template-columns:1.3fr 1fr 1fr
}
.footer-col:last-child{
  grid-column:2
}

}
@media(max-width:840px){
  body{
  font-size:16px
}
.container{
  width:min(calc(100% - 2.25rem),var(--max))
}
.site-header{
  height:72px
}
.site-header.scrolled{
  height:66px
}
.brand{
  width:178px
}
.menu-toggle{
  display:flex
}
.header-cta{
  display:none
}
.main-nav{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:rgba(16,17,20,.98);
  padding:1rem 1.15rem 1.4rem;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  border-bottom:1px solid var(--line);
  transform:translateY(-8px);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--ease),transform var(--ease),visibility var(--ease)
}
.main-nav.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.main-nav a{
  padding:.8rem .25rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.95rem
}
.main-nav a:last-child{
  border:0
}
.hero{
  height:760px;
  min-height:calc(100svh - 20px);
  max-height:850px;
  padding-top:70px;
  align-items:end
}
.hero::before{
  background-image:linear-gradient(0deg,rgba(11,12,14,.44) 0%,rgba(11,12,14,.20) 53%,rgba(11,12,14,.04) 100%),url('../assets/images/approved/hero-ceramic.png');
  background-position:center 58%
}
.hero-copy{
  padding:0 0 7rem
}
.hero h1{
  font-size:clamp(2.75rem,11vw,4rem)
}
.hero .lede{
  font-size:1rem;
  margin:1rem 0 1.5rem
}
.hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr
}
.hero-actions .btn{
  padding:.75rem .5rem;
  min-height:50px;
  font-size:.78rem
}
.hero-meta{
  bottom:1.35rem;
  font-size:.64rem
}
.page-hero{
  min-height:410px;
  padding:130px 0 3.2rem
}
.page-hero h1{
  font-size:clamp(2.5rem,10vw,4rem)
}
.page-hero::before{
  background:linear-gradient(0deg,rgba(16,17,20,.44) 0%,rgba(16,17,20,.18) 32%,transparent 64%)
}
.page-hero{
  background-position:center 56%
}
.section-head{
  display:block;
  margin-bottom:2rem
}
.section-head .text-link{
  margin-top:1rem
}
.service-grid{
  grid-template-columns:1fr 1fr;
  gap:1.5rem .8rem
}
.service-image{
  height:230px
}
.service-card h3{
  font-size:1rem;
  margin:.9rem 0 .35rem
}
.service-card p{
  font-size:.82rem
}
.split{
  grid-template-columns:1fr;
  gap:2rem
}
.split-image{
  height:360px;
  order:0
}
.split-copy{
  order:1
}
.principles,.testimonials,.benefit-grid,.package-grid{
  grid-template-columns:1fr;
  gap:1.3rem
}
.principles{
  margin-top:2rem
}
.project-grid{
  grid-template-columns:1fr
}
.project-card,.project-card:nth-child(2){
  min-height:350px
}
.quote{
  padding-top:1.1rem
}
.cta-inner{
  align-items:start;
  flex-direction:column;
  gap:1.5rem
}
.footer-top{
  grid-template-columns:1fr 1fr;
  gap:1.8rem 1rem
}
.footer-brand{
  width:190px
}
.footer-col:last-child{
  grid-column:auto
}
.footer-bottom{
  flex-direction:column;
  gap:.45rem
}
.service-detail{
  grid-template-columns:1fr;
  gap:1rem;
  padding:2rem 0
}
.service-detail img{
  height:260px
}
.process-grid{
  grid-template-columns:1fr 1fr;
  gap:1.2rem
}
.gallery-tools{
  display:block
}
.filters{
  margin-top:1rem
}
.comparison-feature{
  grid-template-columns:1fr;
  gap:1.1rem;
  padding:0 0 2rem;
  margin-bottom:2rem
}
.comparison-copy h2{
  max-width:580px;
  font-size:clamp(1.8rem,7vw,2.45rem)
}
.comparison-copy>p:last-child{
  margin-top:.6rem
}
.gallery-grid{
  grid-template-columns:1fr 1fr;
  gap:.5rem
}
.gallery-item,.gallery-item img{
  min-height:220px
}
.gallery-label{
  padding:2.4rem .7rem .65rem
}
.gallery-label b{
  font-size:.9rem
}
.gallery-label span{
  font-size:.68rem
}
.story-columns{
  grid-template-columns:1fr;
  gap:.5rem
}
.contact-layout{
  grid-template-columns:1fr;
  gap:2rem
}
.contact-form{
  gap:.85rem
}
.field input,.field select,.field textarea{
  font-size:16px
}
.about-hero-image{
  height:62vw;
  min-height:280px
}

}
@media(max-width:420px){
  .service-image{
  height:190px
}
.service-card .text-link{
  font-size:.72rem
}
.gallery-item,.gallery-item img{
  min-height:180px
}
.hero-actions{
  grid-template-columns:1fr
}
.hero-actions .btn{
  font-size:.9rem
}
.contact-form{
  grid-template-columns:1fr
}
.request-confirmation{
  min-height:340px;
  padding:1.6rem
}
.field.full,.form-status{
  grid-column:1
}
.process-grid{
  grid-template-columns:1fr
}
.footer-top{
  grid-template-columns:1fr 1fr
}

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

}
.mobile-book{
  display:none
}
@media(max-width:840px){
  .mobile-book{
  display:block!important;
  margin-top:.8rem;
  padding:.85rem 1rem!important;
  background:var(--silver);
  color:var(--ink)!important;
  text-align:center;
  font-weight:700;
  border:0!important
}

}
.hero h1{
  text-transform:uppercase
}