/* =========================================================
   POWER DIESEL WORKSHOP LLC — Stylesheet
   Design system: industrial / heavy-equipment service brand
   ========================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Brand colors — sampled from the Power Diesel Workshop logo mark */
  --ink:            #0B0B0C;   /* near-black */
  --surface-1:      #15171A;   /* dark surface */
  --surface-2:      #1E2124;   /* dark surface, raised */
  --line-dark:      #2B2E32;   /* hairline on dark */
  --amber:          #D9A441;   /* gear gold */
  --amber-light:    #E8C179;
  --orange:         #E96C1C;   /* bolt / CTA orange */
  --orange-dark:    #C4570F;
  --steel:          #6B7176;   /* gauge grey */
  --steel-light:    #C9CDD1;
  --off-white:      #F6F4EF;
  --paper:          #FBFAF7;
  --ink-soft:       #3A3D41;
  --success:        #3F8F5F;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --max-w: 1240px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-md: 0 10px 30px -12px rgba(11,11,12,.35);
  --shadow-lg: 0 24px 60px -20px rgba(11,11,12,.45);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.12; margin:0; letter-spacing:.2px; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

.container{
  max-width: var(--max-w);
  margin-inline:auto;
  padding-inline: 24px;
}

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

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

/* ---------- Utility ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background: var(--orange);
  display:inline-block;
}
.section{ padding: 96px 0; }
.section-tight{ padding: 64px 0; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-top:14px; color:var(--ink); }
.section-head p{ margin-top:16px; color: var(--ink-soft); font-size:1.05rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.on-dark h2{ color: var(--off-white); }
.section-head.on-dark p{ color: var(--steel-light); }
.section-head.on-dark .eyebrow{ color: var(--amber); }
.section-head.on-dark .eyebrow::before{ background: var(--amber); }

.bg-dark{ background: var(--ink); color: var(--off-white); }
.bg-surface{ background: var(--surface-1); color: var(--off-white); }

/* Hazard stripe divider — signature motif, echoes yard safety signage */
.stripe{
  height: 10px;
  background-image: repeating-linear-gradient(135deg, var(--amber) 0 22px, var(--ink) 22px 44px);
}
.stripe.thin{ height:6px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 28px;
  font-family: var(--font-display);
  font-weight:600;
  font-size: .98rem;
  letter-spacing:.03em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--orange);
  color: var(--paper);
}
.btn-primary:hover{ background: var(--orange-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost{
  background: transparent;
  color: var(--off-white);
  border-color: rgba(246,244,239,.35);
}
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }
.btn-dark{
  background: var(--ink);
  color: var(--off-white);
  border-color: var(--ink);
}
.btn-dark:hover{ background: var(--surface-2); transform: translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }
.btn-icon{ width:18px; height:18px; flex:none; display:none; }

/* ---------- Top utility bar ---------- */
.topbar{
  background: var(--ink);
  color: var(--steel-light);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:9px;
  gap:16px;
  flex-wrap:wrap;
}
.topbar-links{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.topbar-links a:hover{ color: var(--amber); }
.topbar-emergency{ color: var(--amber); font-weight:600; }
.topbar-emergency b{ color:var(--off-white); }

/* ---------- Header / Nav ---------- */
.site-header{
  background: var(--paper);
  border-bottom: 1px solid #E7E2D8;
  position: sticky;
  top:0;
  z-index: 100;
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 8px 24px -12px rgba(11,11,12,.28);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block: 14px;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{ height:56px; width:auto; }
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand-text .brand-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.18rem;
  color: var(--ink);
  letter-spacing:.01em;
}
.brand-text .brand-tag{
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--orange-dark);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a{
  font-family: var(--font-display);
  font-weight:500;
  font-size:.98rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color: var(--ink-soft);
  position:relative;
  padding-block:6px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background: var(--orange);
  transition: right .18s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color: var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none;
  background:none; border:none; padding:8px;
  flex-direction:column; gap:5px;
}
.nav-toggle span{ width:26px; height:2px; background:var(--ink); display:block; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: var(--ink);
  color: var(--off-white);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(11,11,12,.97) 0%, rgba(11,11,12,.92) 38%, rgba(11,11,12,.72) 72%, rgba(11,11,12,.5) 100%),
    url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(217,164,65,.05) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items:center;
  padding-block: 96px 76px;
}
.hero-copy .eyebrow{ color: var(--amber); }
.hero-copy .eyebrow::before{ background: var(--amber); }
.hero h1{
  font-size: clamp(2.4rem, 4.6vw, 3.85rem);
  margin-top:18px;
  color: var(--off-white);
}
.hero h1 em{
  font-style:normal;
  color: var(--amber);
}
.hero-copy p.lead{
  margin-top:22px;
  font-size:1.14rem;
  color: var(--steel-light);
  max-width: 560px;
}
.hero-actions{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-top:34px;
}
.hero-meta{
  display:flex;
  gap:34px;
  margin-top:52px;
  flex-wrap:wrap;
}
.hero-meta div{ border-left:2px solid var(--orange); padding-left:14px; }
.hero-meta strong{
  display:block;
  font-family: var(--font-display);
  font-size:1.7rem;
  color: var(--off-white);
}
.hero-meta span{
  font-family: var(--font-mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--steel-light);
}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual::before{
  content:"";
  position:absolute;
  width:70%; height:70%;
  background: radial-gradient(circle, rgba(217,164,65,.20) 0%, rgba(217,164,65,0) 70%);
  z-index:0;
  pointer-events:none;
}
.hero-photo-frame{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  aspect-ratio: 4/5;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
  background: linear-gradient(160deg, var(--surface-2), var(--ink));
  border:1px solid rgba(217,164,65,.35);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
}
.hero-photo-frame img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero-photo-frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(200deg, rgba(11,11,12,0) 45%, rgba(11,11,12,.55) 100%);
  pointer-events:none;
}
.hero-pill{
  position:absolute;
  top:26px; right:-14px;
  display:flex; align-items:center; gap:9px;
  background: var(--ink);
  border:1px solid rgba(217,164,65,.45);
  color: var(--off-white);
  padding:10px 18px 10px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size:.74rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow: var(--shadow-md);
  z-index:2;
}
.hero-pill svg{ width:16px; height:16px; flex:none; }
.hero-float-card{
  position:absolute;
  left:-22px; bottom:34px;
  background: linear-gradient(135deg, var(--orange), var(--amber));
  color: var(--ink);
  padding: 20px 26px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index:2;
  min-width:190px;
}
.hero-float-card strong{
  display:block;
  font-family: var(--font-display);
  font-size:2rem;
  line-height:1;
}
.hero-float-card span{
  display:block;
  margin-top:6px;
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}

/* ---------- Trust / marquee strip ---------- */
.trust-strip{
  background: var(--surface-1);
  color: var(--steel-light);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
  padding-block:16px;
}
.marquee{
  display:flex;
  gap:56px;
  white-space:nowrap;
  animation: scroll-left 32s linear infinite;
  width:max-content;
}
.marquee span{
  font-family: var(--font-mono);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.marquee span::before{ content:"◆"; color: var(--amber); font-size:.6rem; }
@keyframes scroll-left{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Service cards (hexagon signature) ---------- */
.services-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 28px;
}
.service-card{
  background: var(--paper);
  border:1px solid #E7E2D8;
  border-radius: var(--radius-md);
  padding: 34px 26px 30px;
  position:relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--amber);
}
.hex{
  width:74px; height:84px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, var(--ink), var(--surface-2));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  position:relative;
}
.hex::before{
  content:"";
  position:absolute; inset:2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, rgba(217,164,65,.12), transparent 60%);
}
.hex svg{ width:34px; height:34px; stroke: var(--amber); position:relative; z-index:1; }
.service-card h3{
  font-size: 1.18rem;
  color: var(--ink);
  margin-bottom:10px;
}
.service-card p{
  color: var(--ink-soft);
  font-size:.96rem;
}
.service-card .card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-family: var(--font-mono);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--orange-dark);
  font-weight:600;
}
.service-card .card-link svg{ width:14px; height:14px; transition:transform .15s ease; }
.service-card:hover .card-link svg{ transform:translateX(4px); }
.service-card .tag{
  position:absolute; top:26px; right:26px;
  font-family: var(--font-mono);
  font-size:.68rem;
  color: var(--steel);
}

/* ---------- Brand marquee (major brands we service) ---------- */
.brands-section{
  background: var(--surface-1);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding-block: 72px;
  overflow: hidden;
}
.brands-head{
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}
.brands-head .eyebrow{ color: var(--amber); justify-content:center; }
.brands-head .eyebrow::before{ background: var(--amber); }
.brands-head h2{ color: var(--off-white); font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-top:14px; }
.brands-head p{ color: var(--steel-light); margin-top:14px; font-size:1.02rem; }

.brand-marquee{
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.brand-track{
  display:flex;
  align-items:center;
  gap: 28px;
  width: max-content;
  animation: brand-scroll 34s linear infinite;
}
.brand-marquee:hover .brand-track{ animation-play-state: paused; }
@keyframes brand-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.brand-chip{
  flex: none;
  width: 200px;
  height: 100px;
  background: var(--surface-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 20px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.brand-chip img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.6) contrast(.9) opacity(.8);
  transition: filter .2s ease;
}
.brand-chip:hover{
  border-color: var(--amber);
  background: var(--surface-1);
  transform: translateY(-3px);
}
.brand-chip:hover img{
  filter: none;
}

/* ---------- Why us / split ---------- */
.split{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 64px;
  align-items:center;
}
.split-media{ position:relative; }
.split-media img{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.split-media .stat-chip{
  position:absolute;
  bottom:-26px; right:-26px;
  background: var(--ink);
  color: var(--off-white);
  padding: 22px 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--amber);
  box-shadow: var(--shadow-lg);
}
.stat-chip strong{
  font-family: var(--font-display);
  font-size:2.1rem;
  color: var(--amber);
  display:block;
}
.stat-chip span{
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--steel-light);
}
.feature-list{
  display:grid;
  gap:22px;
  margin-top:30px;
}
.feature-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.feature-item .icon{
  flex:none;
  width:44px; height:44px;
  border-radius:50%;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.feature-item .icon svg{ width:20px; height:20px; stroke:var(--amber); }
.feature-item h4{ font-size:1.05rem; color:var(--ink); margin-bottom:4px; }
.feature-item p{ color:var(--ink-soft); font-size:.95rem; }

/* ---------- Process timeline ---------- */
.process{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
  position:relative;
}
.process::before{
  content:"";
  position:absolute;
  top:26px; left:10%; right:10%;
  height:2px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 10px, transparent 10px 20px);
  z-index:0;
}
.process-step{
  position:relative; z-index:1;
  text-align:center;
  padding-inline:12px;
}
.process-step .num{
  width:54px; height:54px;
  border-radius:50%;
  background: var(--ink);
  border:2px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-display);
  font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.process-step h4{ color: var(--off-white); font-size:1.02rem; margin-bottom:8px; }
.process-step p{ color: var(--steel-light); font-size:.88rem; }

/* ---------- Stats band ---------- */
.stats-band{
  background: linear-gradient(120deg, var(--orange) 0%, var(--amber) 100%);
  color: var(--ink);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  text-align:center;
}
.stats-grid strong{
  display:block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}
.stats-grid span{
  font-family: var(--font-mono);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.07em;
}

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:26px;
}
.testimonial{
  background: var(--paper);
  border:1px solid #E7E2D8;
  border-radius: var(--radius-md);
  padding: 30px 28px;
  position:relative;
}
.testimonial .stars{ color: var(--orange); letter-spacing:2px; font-size:.95rem; margin-bottom:14px; }
.testimonial p.quote{ color: var(--ink-soft); font-size:.98rem; }
.testimonial .who{
  margin-top:20px;
  display:flex; align-items:center; gap:12px;
}
.testimonial .avatar{
  width:42px; height:42px; border-radius:50%;
  background: var(--ink);
  color: var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:600;
}
.testimonial .who strong{ display:block; font-size:.92rem; color:var(--ink); }
.testimonial .who span{ font-size:.8rem; color: var(--steel); }

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;
  background: var(--ink);
  color: var(--off-white);
  overflow:hidden;
}
.cta-banner::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(11,11,12,.93), rgba(11,11,12,.8)), url('../images/cta-bg.jpg') center/cover;
}
.cta-inner{
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  padding-block:64px;
}
.cta-inner h2{ font-size:clamp(1.6rem,3vw,2.3rem); max-width:560px; color:var(--off-white); }
.cta-inner p{ color: var(--steel-light); margin-top:10px; }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.gallery-grid img{ border-radius: var(--radius-sm); aspect-ratio:4/3; object-fit:cover; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink);
  color: var(--steel-light);
  padding-top: 76px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line-dark);
}
.footer-brand .brand{ margin-bottom:18px; }
.footer-brand .brand-name{ color: var(--off-white); }
.footer-brand p{ font-size:.92rem; color: var(--steel-light); max-width:320px; }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .15s ease, background .15s ease;
}
.footer-social a:hover{ border-color: var(--amber); background: var(--surface-1); }
.footer-social svg{ width:16px; height:16px; stroke: var(--amber); }
.footer-col h5{
  font-family: var(--font-display);
  color: var(--off-white);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.95rem;
  margin-bottom:20px;
}
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ font-size:.92rem; color: var(--steel-light); }
.footer-col a:hover{ color: var(--amber); }
.footer-contact li{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; }
.footer-contact svg{ width:18px; height:18px; stroke: var(--amber); flex:none; margin-top:2px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:22px;
  font-size:.82rem;
  color: var(--steel);
  flex-wrap:wrap; gap:10px;
}
.footer-bottom a{ color: var(--steel-light); }
.footer-bottom a:hover{ color:var(--amber); }

/* ---------- Inner page hero (services/about/contact) ---------- */
.page-hero{
  position:relative;
  background: var(--ink);
  color: var(--off-white);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(11,11,12,.92), rgba(11,11,12,.72)), var(--bg-img, url('../images/services-hero-bg.jpg')) center/cover no-repeat;
}
.page-hero-inner{
  position:relative; z-index:1;
  padding-block: 68px 56px;
  max-width: 720px;
}
.page-hero h1{ font-size: clamp(2rem, 4vw, 3rem); margin-top:16px; color: var(--off-white); }
.page-hero p{ margin-top:16px; color: var(--steel-light); font-size:1.05rem; }
.breadcrumb{
  font-family: var(--font-mono);
  font-size:.78rem;
  color: var(--steel-light);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.breadcrumb a{ color: var(--amber); }
.breadcrumb span{ margin-inline:8px; color: var(--steel); }

/* ---------- Service detail rows (services.html) ---------- */
.service-detail{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:52px;
  align-items:center;
  padding-block:56px;
  border-bottom:1px solid #E7E2D8;
}
.service-detail:last-child{ border-bottom:none; }
.service-detail:nth-child(even){ direction:rtl; }
.service-detail:nth-child(even) > *{ direction:ltr; }
.service-detail .hex{ width:86px; height:98px; margin-bottom:24px; }
.service-detail .hex svg{ width:40px; height:40px; }
.service-detail h3{ font-size:1.7rem; color:var(--ink); margin-bottom:16px; }
.service-detail p{ color: var(--ink-soft); }
.service-detail .checks{ margin-top:22px; display:grid; gap:12px; }
.service-detail .checks li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color: var(--ink-soft); }
.service-detail .checks svg{ width:18px; height:18px; stroke: var(--success); flex:none; margin-top:3px; }
.service-detail .num-tag{
  font-family: var(--font-mono);
  color: var(--orange-dark);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.service-detail-media{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  aspect-ratio: 4/3;
  background: var(--surface-2);
}
.service-detail-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Values / About ---------- */
.values-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:26px;
}
.value-card{
  padding:30px 24px;
  border:1px solid #E7E2D8;
  border-radius: var(--radius-md);
}
.value-card .hex{ width:64px; height:72px; margin-bottom:18px; }
.value-card .hex svg{ width:28px; height:28px; }
.value-card h4{ color:var(--ink); font-size:1.05rem; margin-bottom:8px; }
.value-card p{ font-size:.92rem; color: var(--ink-soft); }

.timeline{
  display:grid;
  gap:0;
  margin-top:16px;
}
.timeline-row{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:24px;
  padding-block:26px;
  border-top:1px solid #E7E2D8;
}
.timeline-row:last-child{ border-bottom:1px solid #E7E2D8; }
.timeline-row .yr{ font-family:var(--font-display); font-size:1.3rem; color: var(--orange-dark); }
.timeline-row h4{ color:var(--ink); font-size:1.05rem; margin-bottom:6px; }
.timeline-row p{ color: var(--ink-soft); font-size:.94rem; }

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:52px;
}
.contact-card{
  background: var(--surface-1);
  color: var(--off-white);
  border-radius: var(--radius-md);
  padding: 38px 32px;
}
.contact-card h3{ color: var(--off-white); font-size:1.3rem; margin-bottom:22px; }
.contact-info-list{ display:grid; gap:22px; }
.contact-info-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-list .icon{
  width:44px; height:44px; border-radius:50%;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info-list .icon svg{ width:20px; height:20px; stroke: var(--amber); }
.contact-info-list strong{ display:block; font-size:.92rem; color: var(--off-white); margin-bottom:3px; }
.contact-info-list span, .contact-info-list a{ font-size:.92rem; color: var(--steel-light); }
.contact-info-list a:hover{ color: var(--amber); }
.hours-table{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line-dark); }
.hours-table div{ display:flex; justify-content:space-between; font-size:.88rem; padding-block:6px; color: var(--steel-light); font-family: var(--font-mono); }
.hours-table div b{ color: var(--off-white); font-weight:500; }

.form-card{
  background: var(--paper);
  border:1px solid #E7E2D8;
  border-radius: var(--radius-md);
  padding: 38px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-family: var(--font-mono);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--ink-soft);
  margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;
  padding: 13px 14px;
  border:1px solid #D9D3C6;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size:.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--orange);
  outline:none;
}
.field textarea{ resize:vertical; min-height:130px; }
.form-note{ font-size:.82rem; color: var(--steel); margin-top:14px; }

.map-embed{
  border-radius: var(--radius-md);
  overflow:hidden;
  border:1px solid #E7E2D8;
  margin-top:40px;
}
.map-embed iframe{ width:100%; height:380px; border:0; display:block; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:14px; max-width:820px; }
.faq-item{ border:1px solid #E7E2D8; border-radius: var(--radius-md); overflow:hidden; background: var(--paper); }
.faq-item summary{
  padding:20px 24px;
  font-family: var(--font-display);
  font-weight:500;
  font-size:1.02rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--ink);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:1.4rem;
  color: var(--orange);
  transition: transform .2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-body{ padding:0 24px 22px; color: var(--ink-soft); font-size:.95rem; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;
  right:24px; bottom:24px;
  width:48px; height:48px;
  border-radius:50%;
  background: var(--orange);
  color: var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:90;
  border:none;
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform: translateY(-3px); }
.to-top svg{ width:20px; height:20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:36px; }
}
@media (max-width: 960px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ max-width:360px; margin:32px auto 8px; }
  .hero-pill{ right:6px; }
  .hero-float-card{ left:6px; }
  .split{ grid-template-columns:1fr; }
  .split-media{ max-width:420px; margin-inline:auto; }
  .process{ grid-template-columns: repeat(2,1fr); gap:36px 0; }
  .process::before{ display:none; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .service-detail{ grid-template-columns:1fr; }
  .service-detail:nth-child(even){ direction:ltr; }
  .service-detail-media{ order:-1; }
  .contact-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 780px){
  .nav-links{
    position:fixed; inset: 0 0 0 30%;
    background: var(--ink);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding: 40px;
    gap:26px;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color: var(--off-white); font-size:1.2rem; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn span{ display:none; }
  .nav-cta .btn-icon{ display:block; }
  .nav-cta .btn-primary{ padding:12px; border-radius:50%; }
  .brand{ min-width:0; flex:1 1 auto; }
  .brand-text{ min-width:0; overflow:hidden; }
  .brand-text .brand-tag{ display:none; }
  .brand-text .brand-name{ font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .brand img{ height:40px; flex:none; }
  .topbar .container{ justify-content:center; }
  .topbar-links{ display:none; }
  .hero-inner{ gap:44px; }
  .hero-visual{ margin-top:8px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .values-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .section{ padding:64px 0; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .hero-meta{ gap:22px; }
}