/* =========================================================
   MINT CUSTOMS — shared stylesheet
   Used by index.html, mobile-detailing.html, ceramic-coating.html
   ========================================================= */

/* ===================== TOKENS ===================== */
:root{
  --black:#050505;
  --charcoal:#121212;
  --charcoal-2:#181818;
  --panel:#141414;
  --mint:#78C2AC;
  --mint-deep:#4E9784;
  --mint-bright:#9AD9C4;
  --platinum:#C9CCD1;
  --off-white:#F5F5F3;
  --line: rgba(201,204,209,0.14);
  --line-strong: rgba(201,204,209,0.28);
  --serif: "Bodoni Moda", "Didot", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  background:var(--black);
  color:var(--off-white);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-0.01em;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}

.wrap{max-width:var(--container);margin:0 auto;padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--mint);
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--mint); color:var(--black);
  padding:12px 18px; z-index:1000; font-weight:600;
}
.skip-link:focus{left:12px; top:12px;}

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

/* Visually-hidden but fully accessible to screen readers and crawlers —
   used for the page's true semantic H1 on the homepage, so the styled
   "Detailing. Elevated." hero text can stay exactly as designed while a
   single, accurate, non-repeated descriptive heading remains in the DOM. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px;
  font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  border-radius:2px;
  border:1px solid transparent;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn-fill{ background:var(--mint); color:#08110e; }
.btn-fill:hover{ background:var(--mint-bright); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--off-white); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--mint); color:var(--mint); }
.btn-line{ background:transparent; color:var(--mint); border-color:var(--mint); }
.btn-line:hover{ background:var(--mint); color:#08110e; }
.btn-sm{padding:12px 22px; font-size:11.5px;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.btn[disabled]:hover{transform:none;}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(5,5,5,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:34px; width:auto;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{
  font-size:12px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--platinum); position:relative; padding:4px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--mint);
  transition:right .35s var(--ease);
}
.nav-links a:hover{color:var(--off-white);}
.nav-links a:hover::after{right:0;}
.nav-right{display:flex; align-items:center; gap:22px;}
.nav-tel{font-size:12.5px; font-weight:500; color:var(--platinum); letter-spacing:0.03em;}
.nav-tel:hover{color:var(--mint);}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
.hamburger span{width:24px; height:1.5px; background:var(--off-white); transition:transform .3s var(--ease), opacity .3s var(--ease);}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed; inset:0; z-index:490; background:var(--black);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 28px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{
  font-family:var(--serif); font-size:34px; padding:14px 0; border-bottom:1px solid var(--line); color:var(--off-white);
}
.mobile-menu .mm-cta{margin-top:26px;}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-tel{display:none;}
  .hamburger{display:flex;}
}

/* ===================== HERO (home) ===================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:min(9vw,90px);
  overflow:hidden;
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:60% 42%;
  transform:scale(1.08); animation: heroZoom 1.6s var(--ease) forwards;}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.18) 30%, rgba(5,5,5,.55) 68%, rgba(5,5,5,.96) 100%),
    linear-gradient(90deg, rgba(5,5,5,.75) 0%, rgba(5,5,5,.15) 45%, rgba(5,5,5,.35) 100%);
}
.hero-content{position:relative; z-index:2; max-width:760px;}
.hero .eyebrow{display:block; opacity:0; transform:translateY(14px); animation:riseIn .9s var(--ease) .5s forwards;}
.hero .eyebrow span{display:block; color:var(--platinum); font-weight:500; letter-spacing:0.18em;}
.hero h1, .hero .hero-headline{
  font-size:clamp(52px,9vw,108px);
  line-height:0.96;
  margin-top:18px;
  color:var(--off-white);
  font-family:var(--serif); font-weight:500; letter-spacing:-0.01em;
  opacity:0; transform:translateY(20px); animation:riseIn 1s var(--ease) .68s forwards;
}
.hero-sub{
  margin-top:26px; max-width:440px; font-size:16.5px; color:var(--platinum); font-weight:300;
  opacity:0; transform:translateY(16px); animation:riseIn .9s var(--ease) .9s forwards;
}
.hero-ctas{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; transform:translateY(16px); animation:riseIn .9s var(--ease) 1.08s forwards;}
@keyframes riseIn{ to{opacity:1; transform:translateY(0);} }

.hero-scroll{
  position:absolute; right:32px; bottom:32px; z-index:2;
  writing-mode:vertical-rl; font-size:11px; letter-spacing:0.2em; color:var(--platinum);
  display:flex; align-items:center; gap:12px; text-transform:uppercase;
  opacity:0; animation:fadeOnly 1s var(--ease) 1.4s forwards;
}
.hero-scroll .line{width:1px; height:46px; background:var(--line-strong); position:relative; overflow:hidden;}
.hero-scroll .line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--mint);animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@keyframes fadeOnly{ to{opacity:1;} }
@media (max-width:640px){ .hero-scroll{display:none;} }

/* diagonal seam, van-wrap inspired */
.seam{position:relative; height:64px; background:var(--black); overflow:hidden;}
.seam::before{
  content:""; position:absolute; left:-5%; right:-5%; top:0; height:100%;
  background:linear-gradient(100deg, transparent 0%, transparent 42%, var(--mint) 42%, var(--mint) 43.4%, rgba(201,204,209,0.35) 43.4%, rgba(201,204,209,0.35) 45%, transparent 45%);
}

/* ===================== INTERIOR PAGE HEADER (service pages) ===================== */
.page-hero{
  position:relative; padding:min(22vw,200px) 0 min(9vw,72px);
  overflow:hidden; border-bottom:1px solid var(--line);
}
.page-hero-media{position:absolute; inset:0; z-index:0;}
.page-hero-media img{width:100%; height:100%; object-fit:cover; object-position:60% 45%;}
.page-hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.62) 45%, rgba(5,5,5,.97) 100%);
}
.page-hero .wrap{position:relative; z-index:2;}
.breadcrumb{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--platinum); margin-bottom:22px; flex-wrap:wrap;}
.breadcrumb a{color:var(--platinum); transition:color .3s var(--ease);}
.breadcrumb a:hover{color:var(--mint);}
.breadcrumb span{color:#666a6f;}
.page-hero h1{font-size:clamp(38px,6.6vw,72px); line-height:1.04; max-width:820px;}
.page-hero .page-sub{margin-top:22px; max-width:560px; font-size:16.5px; color:var(--platinum); font-weight:300;}
.page-hero .hero-ctas{margin-top:32px;}

/* ===================== SECTION BASICS ===================== */
section{position:relative;}
.section-pad{padding:min(11vw,120px) 0;}
.section-pad-sm{padding:min(8vw,88px) 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(32px,5vw,54px); line-height:1.04; color:var(--off-white);}
.section-head .eyebrow{margin-bottom:16px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

.reveal{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

.rule{height:1px; background:var(--line); width:100%; border:none;}
.rule-mint{height:1px; width:64px; background:var(--mint); border:none; margin:22px 0;}

/* ===================== INTRO STATEMENT ===================== */
.intro{ text-align:center; }
.intro h2{font-size:clamp(30px,5.4vw,52px); max-width:760px; margin:0 auto; line-height:1.1;}
.intro p{max-width:560px; margin:26px auto 0; color:var(--platinum); font-size:16px; font-weight:300; line-height:1.75;}
.intro .tail{margin-top:18px; color:var(--off-white); font-family:var(--serif); font-style:italic; font-size:19px;}

/* ===================== PRICING CARDS ===================== */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch;}
@media (max-width:960px){ .card-grid{grid-template-columns:1fr; max-width:460px; margin:0 auto;} }

.p-card{
  background:var(--panel); border:1px solid var(--line); padding:38px 32px 32px;
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
  position:relative;
}
.p-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.p-card.featured{
  border-color:var(--mint); background:linear-gradient(180deg, rgba(120,194,172,0.07), rgba(20,20,20,0) 40%);
  transform:scale(1.02);
}
.p-card.featured:hover{transform:scale(1.02) translateY(-4px);}
.p-tag{
  position:absolute; top:-13px; left:32px; background:var(--mint); color:#08110e;
  font-size:10.5px; font-weight:700; letter-spacing:0.14em; padding:6px 12px;
}
.p-card h3{font-size:26px; color:var(--off-white); font-weight:500;}
.p-card .p-desc{color:var(--platinum); font-size:13.5px; margin-top:8px; font-weight:300;}
.p-prices{margin:24px 0; display:flex; flex-direction:column; gap:10px;}
.p-price-row{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px; border-bottom:1px solid var(--line);}
.p-price-row .label{font-size:11.5px; letter-spacing:0.1em; color:var(--platinum); text-transform:uppercase;}
.p-price-row .amt{font-family:var(--serif); font-size:22px; color:var(--off-white);}
.p-includes{margin:6px 0 28px; display:flex; flex-direction:column; gap:9px; flex-grow:1;}
.p-includes li{font-size:14px; color:var(--platinum); font-weight:300; padding-left:16px; position:relative;}
.p-includes li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--mint);}
.p-includes .p-more{color:var(--mint-bright); font-weight:400;}
.p-card .btn{width:100%;}
.fine-print{margin-top:28px; font-size:12.5px; color:#767a80; max-width:640px; font-weight:300; line-height:1.6;}

/* ===================== MARINE / RV ===================== */
.mr-wrap{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line);}
@media (max-width:900px){ .mr-wrap{grid-template-columns:1fr;} }
.mr-block{background:var(--black); padding:min(6vw,64px) min(5vw,56px);}
.mr-block h3{font-size:clamp(26px,3.4vw,36px); color:var(--off-white);}
.mr-block .mr-head{color:var(--mint); font-size:11.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;}
.mr-block .mr-line{font-family:var(--serif); font-style:italic; color:var(--platinum); margin-top:14px; font-size:17px;}
.mr-opts{margin-top:34px; display:flex; flex-direction:column;}
.mr-opt{display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:18px 0; border-top:1px solid var(--line);}
.mr-opt:last-of-type{border-bottom:1px solid var(--line);}
.mr-opt .mo-name{font-size:16px; color:var(--off-white); font-weight:500;}
.mr-opt .mo-desc{font-size:13px; color:var(--platinum); font-weight:300; margin-top:4px; max-width:340px;}
.mr-opt .mo-price{font-family:var(--serif); font-size:19px; color:var(--mint-bright); white-space:nowrap;}
.mr-min{margin-top:26px; font-size:12px; letter-spacing:0.14em; color:var(--platinum); text-transform:uppercase;}
.mr-block .btn{margin-top:30px;}

/* ===================== CUSTOM SERVICES ===================== */
.cs-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:820px){ .cs-grid{grid-template-columns:1fr;} }
.cs-tile{
  border:1px solid var(--line); padding:44px 34px; min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
  transition:border-color .4s var(--ease), background .4s var(--ease);
  background:var(--panel);
}
.cs-tile:not(.soon):hover{ border-color:var(--mint); }
.cs-tile::before{
  content:""; position:absolute; top:-40%; right:-20%; width:60%; height:180%;
  background:linear-gradient(180deg, rgba(120,194,172,0.10), transparent 60%);
  transform:rotate(14deg); pointer-events:none;
}
.cs-num{font-family:var(--serif); font-size:13px; color:var(--mint); letter-spacing:0.06em;}
.cs-tile h3{font-size:clamp(24px,3vw,30px); margin-top:14px; color:var(--off-white);}
.cs-tile p{margin-top:12px; max-width:380px; color:var(--platinum); font-size:14.5px; font-weight:300;}
.cs-foot{margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.cs-price{font-size:11.5px; letter-spacing:0.14em; color:#8d9298; text-transform:uppercase;}
.cs-tile.soon{ opacity:0.72; }
.cs-tile.soon h3{color:#9a9d9f;}
.cs-tile.soon::before{display:none;}
.soon-badge{
  display:inline-block; border:1px solid var(--line-strong); color:var(--platinum);
  font-size:10.5px; letter-spacing:0.18em; padding:7px 14px; text-transform:uppercase;
}

/* ===================== MOBILE EXPERIENCE ===================== */
.me-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:0; align-items:stretch;}
@media (max-width:900px){ .me-grid{grid-template-columns:1fr;} }
.me-img{position:relative; overflow:hidden; min-height:420px;}
.me-img img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .8s var(--ease);}
.me-img:hover img{transform:scale(1.05);}
.me-text{padding:min(6vw,72px); display:flex; flex-direction:column; justify-content:center; background:var(--charcoal-2);}
.me-text h2{font-size:clamp(30px,4vw,44px); line-height:1.08;}
.me-text > p{margin-top:20px; color:var(--platinum); font-weight:300; font-size:15.5px; max-width:420px;}
.me-tags{margin-top:8px; display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:var(--mint-bright); font-weight:500;}
.me-feats{margin-top:38px; display:flex; flex-direction:column;}
.me-feat{padding:18px 0; border-top:1px solid var(--line); display:flex; gap:18px; align-items:flex-start;}
.me-feat:last-child{border-bottom:1px solid var(--line);}
.me-feat .mf-mark{flex-shrink:0; width:15px; height:17px; margin-top:3px;}
.me-feat h4{font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--off-white); font-weight:600; font-family:var(--sans);}
.me-feat p{font-size:13.5px; color:var(--platinum); font-weight:300; margin-top:5px;}

/* ===================== ABOUT ===================== */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:min(8vw,86px); align-items:center;}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:40px;} }
.about-mark{color:var(--mint); opacity:0.9;}
.about-mark svg{width:52px; height:60px;}
.about-txt h2{font-size:clamp(32px,5vw,52px); line-height:1.06; margin-top:20px;}
.about-txt p{color:var(--platinum); font-size:16px; font-weight:300; margin-top:22px; max-width:480px; line-height:1.75;}
.about-est{margin-top:30px; display:inline-flex; gap:10px; align-items:center; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:#8d9298; border-top:1px solid var(--line); padding-top:18px;}
.about-est b{color:var(--platinum); font-weight:600;}

/* ===================== GALLERY ===================== */
.gal-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.gal-item{
  position:relative; overflow:hidden; background:var(--panel); cursor:pointer;
  border:1px solid var(--line);
}
.gal-item.g1{grid-column:span 4; grid-row:span 2; aspect-ratio:4/3.2;}
.gal-item.g2{grid-column:span 2; aspect-ratio:1/1.05;}
.gal-item.g3{grid-column:span 2; aspect-ratio:1/1.05;}
.gal-item.g4{grid-column:span 2; grid-row:span 1; aspect-ratio:4/3.4;}
.gal-item img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .7s var(--ease), filter .5s var(--ease);}
.gal-item:hover img{transform:scale(1.06);}
.gal-cap{position:absolute; left:0; right:0; bottom:0; padding:20px; z-index:2;
  background:linear-gradient(0deg, rgba(0,0,0,.72), transparent);
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--off-white); font-weight:600;
  opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.gal-item:hover .gal-cap{opacity:1; transform:translateY(0);}
.gal-placeholder{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; height:100%; color:#6a6e73; cursor:default;}
.gal-placeholder svg{width:26px; height:30px; opacity:0.6;}
.gal-placeholder span{font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;}
@media (max-width:760px){
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .gal-item.g1{grid-column:span 2; grid-row:span 1; aspect-ratio:4/3.2;}
  .gal-item.g2,.gal-item.g3,.gal-item.g4{grid-column:span 1;}
}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:800; background:rgba(3,3,3,0.95); display:none; align-items:center; justify-content:center; padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(92vw,1100px); max-height:82vh; object-fit:contain; border:1px solid var(--line);}
.lightbox-close{position:absolute; top:26px; right:26px; background:none; border:1px solid var(--line-strong); color:var(--off-white); width:44px; height:44px; font-size:20px;}
.lightbox-close:hover{border-color:var(--mint); color:var(--mint);}

/* ===================== SERVICE AREA ===================== */
.area{text-align:center; padding:min(10vw,110px) 0; background:var(--charcoal-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.area-mark{margin:0 auto 20px; width:40px; height:40px; position:relative;}
.area-mark span{position:absolute; inset:0; border:1px solid var(--mint); border-radius:50%; animation:ping 2.6s ease-out infinite;}
.area-mark span:nth-child(2){animation-delay:.9s;}
.area-mark::before{content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; background:var(--mint); border-radius:50%; transform:translate(-50%,-50%);}
@keyframes ping{ 0%{transform:scale(0.3); opacity:1;} 100%{transform:scale(1); opacity:0;} }
.area h2{font-size:clamp(26px,4vw,38px);}
.area p{margin-top:16px; color:var(--platinum); font-weight:300; font-size:15.5px; max-width:580px; margin-left:auto; margin-right:auto;}
.area .btn{margin-top:34px;}
.area-list{margin-top:22px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px;}
.area-list li{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--platinum); padding:8px 16px; border:1px solid var(--line-strong);}

/* ===================== STEPS ("how it works") ===================== */
.steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
@media (max-width:900px){ .steps-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .steps-grid{grid-template-columns:1fr;} }
.step{padding-top:22px; border-top:1px solid var(--line-strong);}
.step-num{font-family:var(--serif); font-size:15px; color:var(--mint);}
.step h3{font-size:19px; margin-top:12px; color:var(--off-white); font-weight:500;}
.step p{margin-top:10px; font-size:13.5px; color:var(--platinum); font-weight:300; line-height:1.65;}

/* ===================== FAQ ===================== */
.faq-list{display:flex; flex-direction:column; max-width:800px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:17px; color:var(--off-white); font-family:var(--serif); font-weight:500;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-ic{flex-shrink:0; width:18px; height:18px; position:relative;}
.faq-item summary .faq-ic::before, .faq-item summary .faq-ic::after{
  content:""; position:absolute; background:var(--mint); transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-item summary .faq-ic::before{left:0; top:50%; width:100%; height:1px; transform:translateY(-50%);}
.faq-item summary .faq-ic::after{top:0; left:50%; width:1px; height:100%; transform:translateX(-50%);}
.faq-item[open] summary .faq-ic::after{opacity:0; transform:translateX(-50%) rotate(90deg);}
.faq-item .faq-a{padding:0 0 26px; max-width:680px; color:var(--platinum); font-size:14.5px; font-weight:300; line-height:1.75;}

/* ===================== LONG-FORM BODY (service pages) ===================== */
.prose{max-width:720px;}
.prose p{color:var(--platinum); font-size:15.5px; font-weight:300; line-height:1.8; margin-top:18px;}
.prose p:first-child{margin-top:0;}
.prose h3{font-size:22px; color:var(--off-white); margin-top:40px;}
.limits-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:12px;}
@media (max-width:760px){ .limits-grid{grid-template-columns:1fr;} }
.limits-col h4{font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mint); font-family:var(--sans); font-weight:600;}
.limits-col ul{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.limits-col li{font-size:14px; color:var(--platinum); font-weight:300; padding-left:16px; position:relative; line-height:1.6;}
.limits-col li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--mint);}

.inline-link{color:var(--mint-bright); border-bottom:1px solid rgba(154,217,196,0.4); transition:color .3s var(--ease), border-color .3s var(--ease);}
.inline-link:hover{color:var(--mint); border-color:var(--mint);}

.cross-link{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:30px 0; border-top:1px solid var(--line);
}
.cross-link .cl-label{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#8d9298;}
.cross-link .cl-title{font-family:var(--serif); font-size:22px; color:var(--off-white); margin-top:6px;}

/* ===================== FINAL CTA ===================== */
.final-cta{background:#000; text-align:center; padding:min(13vw,150px) 0; position:relative; overflow:hidden;}
.final-cta::before{
  content:""; position:absolute; left:-10%; right:-10%; top:0; height:2px;
  background:linear-gradient(100deg, transparent 0%, transparent 30%, var(--mint) 30%, var(--mint) 31.4%, rgba(201,204,209,0.35) 31.4%, rgba(201,204,209,0.35) 33%, transparent 33%);
}
.final-cta h2{font-size:clamp(38px,7vw,76px); line-height:1.02;}
.final-cta p{margin-top:20px; color:var(--platinum); font-weight:300; font-size:16px;}
.final-cta .fc-actions{margin-top:42px; display:flex; flex-direction:column; align-items:center; gap:20px;}
.final-cta .fc-tel{font-family:var(--serif); font-size:26px; color:var(--mint-bright); letter-spacing:0.02em;}
.final-cta .fc-tel:hover{color:var(--mint);}

/* ===================== FOOTER ===================== */
footer{background:var(--black); border-top:1px solid var(--line); padding:min(7vw,72px) 0 28px;}
.f-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
@media (max-width:820px){ .f-top{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media (max-width:520px){ .f-top{grid-template-columns:1fr;} }
.f-brand img{height:30px;}
.f-brand p{margin-top:16px; color:#8d9298; font-size:13.5px; font-weight:300; max-width:220px;}
.f-col h5{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum); margin-bottom:18px; font-weight:600;}
.f-col a, .f-col p{display:block; font-size:13.5px; color:#8d9298; font-weight:300; margin-bottom:11px; transition:color .3s var(--ease);}
.f-col a:hover{color:var(--mint);}
.f-bottom{margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:#65686d;}

/* ===================== STICKY MOBILE BOOK BAR ===================== */
.sticky-book{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:rgba(5,5,5,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:12px 20px;
  display:none; align-items:center; justify-content:center;
  transform:translateY(100%); transition:transform .4s var(--ease);
}
.sticky-book.show{transform:translateY(0);}
@media (max-width:900px){ .sticky-book{display:flex;} }
.sticky-book{gap:10px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));}
.sticky-book .btn{flex:1 1 0; width:auto; max-width:240px;}
@media (max-width:900px){ footer{padding-bottom:96px;} }

/* Utility */
.mono-note{font-size:12px;color:#6a6e73;}


/* ===================== CALL / TEXT JEFF ===================== */
.btn svg{width:15px; height:15px; flex-shrink:0;}
.cta-contact{display:flex; gap:12px;}
.hero-more{flex-basis:100%; margin-top:4px; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum); transition:color .3s var(--ease);}
.hero-more:hover{color:var(--mint);}
@media (max-width:640px){
  .hero-ctas{flex-direction:column; align-items:stretch; gap:12px;}
  .hero-ctas .cta-contact .btn{flex:1 1 0;}
  .hero-ctas > .btn{width:100%;}
}

/* nav: compact Call / Text on phones, full "Request an Appointment" on desktop */
.nav-right .nav-call, .nav-right .nav-text{display:none;}
@media (max-width:900px){
  .nav-right{gap:10px;}
  .nav-right .nav-req{display:none;}
  .nav-right .nav-call, .nav-right .nav-text{display:inline-flex; padding:10px 14px; font-size:11px; letter-spacing:0.12em;}
}
.nav-links a{white-space:nowrap;}
/* mid-width laptops/tablets: keep the full link row, swap phone number + Request button for compact Call / Text */
@media (min-width:901px) and (max-width:1240px){
  .nav-tel, .nav-right .nav-req{display:none;}
  .nav-links{gap:24px;}
  .nav-right{gap:10px;}
  .nav-right .nav-call, .nav-right .nav-text{display:inline-flex; padding:10px 16px; font-size:11px; letter-spacing:0.12em;}
}

/* mobile menu: Call / Text / Request */
.mobile-menu{overflow-y:auto; justify-content:flex-start; padding:92px 28px 32px;}
.mobile-menu > :first-child{margin-top:auto;}
.mobile-menu > :last-child{margin-bottom:auto;}
.mobile-menu .mm-contact{display:flex; gap:12px; margin-top:26px;}
.mobile-menu a.btn{font-family:var(--sans); font-size:12.5px; padding:15px 12px; border:1px solid transparent; color:#08110e;}
.mobile-menu .mm-contact .btn{flex:1 1 0;}
.mobile-menu .mm-cta{margin-top:12px; width:100%;}

/* final CTA contact row */
.final-cta .fc-actions .cta-contact{width:100%; max-width:420px;}
.final-cta .fc-actions .cta-contact .btn{flex:1 1 0;}

/* ===================== QUOTE REQUEST (ceramic page) ===================== */
.quote-wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:min(7vw,72px); align-items:start;}
@media (max-width:900px){ .quote-wrap{grid-template-columns:1fr;} }
.quote-intro h2{font-size:clamp(30px,4.6vw,48px); line-height:1.06; margin-top:16px;}
.quote-intro p{margin-top:20px; color:var(--platinum); font-weight:300; font-size:15.5px; line-height:1.75; max-width:440px;}
.quote-direct{margin-top:30px; display:flex; flex-direction:column; gap:14px; max-width:440px;}
.quote-direct .cta-contact .btn{flex:1 1 0;}
.quote-direct .q-email{font-size:13.5px; color:#8d9298; font-weight:300;}
.quote-direct .q-email a{color:var(--mint-bright); border-bottom:1px solid rgba(154,217,196,0.4);}
.qform{display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; background:var(--panel); border:1px solid var(--line); padding:min(6vw,40px);}
@media (max-width:560px){ .qform{grid-template-columns:1fr;} }
.qform .full{grid-column:1 / -1;}
.qform label{display:block; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum); font-weight:600; margin-bottom:8px;}
.qform input, .qform textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line-strong); color:var(--off-white);
  font-family:var(--sans); font-size:16px; font-weight:300; padding:14px 16px; border-radius:2px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.qform input::placeholder, .qform textarea::placeholder{color:#6a6e73;}
.qform input:focus, .qform textarea:focus{outline:none; border-color:var(--mint); background:rgba(120,194,172,0.05);}
.qform textarea{min-height:120px; resize:vertical;}
.qform .btn{width:100%;}
.qform .q-note{font-size:12.5px; color:#8d9298; font-weight:300; line-height:1.6;}

/* ===================== FIT FIXES (longer button labels / small phones) ===================== */
.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:960px){ .card-grid{grid-template-columns:1fr;} }
.p-card .btn{white-space:normal; text-align:center; line-height:1.35; padding:15px 18px;}
@media (max-width:420px){
  .cta-contact .btn, .sticky-book .btn, .mm-contact .btn{padding-left:14px; padding-right:14px; font-size:12px; letter-spacing:0.12em;}
}
@media (max-width:350px){
  .cta-contact .btn, .sticky-book .btn, .mm-contact .btn{padding-left:10px; padding-right:10px; font-size:11px; letter-spacing:0.08em; gap:6px;}
  .btn svg{width:13px; height:13px;}
}

@media (min-width:901px) and (max-width:1000px){
  .nav-links{gap:16px;}
  .nav-links a{letter-spacing:0.09em; font-size:11.5px;}
}

/* short phones: tighten the menu so Call / Text / Request fit without scrolling */
@media (max-height:700px){
  .mobile-menu{padding-top:80px;}
  .mobile-menu a.mm-link{font-size:28px; padding:10px 0;}
  .mobile-menu .mm-contact{margin-top:18px;}
}

/* ===================== GALLERY (2 real photos) + REQUEST NOTES ===================== */
.gal-grid.two .gal-item.g1{grid-row:span 1;}
.gal-grid.two .gal-item.g2{aspect-ratio:auto;}
@media (max-width:760px){ .gal-grid.two .gal-item.g2{grid-column:span 2; aspect-ratio:4/3;} }
.mr-note{margin-top:14px; font-size:12px; color:#767a80; font-weight:300; line-height:1.6;}
.cs-grid + .fine-print{margin-top:24px;}