/* =========================================================
   MR. FIX BAY AREA — "WORK ORDER" DESIGN SYSTEM
   Blueprint-dossier aesthetic: ruled grids, corner tick-marks,
   ticket-style cards, mono job-codes. Built for a real handyman
   / home-repair service company.
========================================================= */

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

:root{
  /* --- color tokens --- */
  --ink:        #14181D;   /* near-black navy — text, dark sections */
  --ink-soft:   #2A323B;   /* softened ink for secondary dark surfaces */
  --paper:      #F3F4EF;   /* warm-gray page background */
  --paper-2:    #E9EBE3;   /* slightly deeper paper for alt sections */
  --card:       #FFFFFF;   /* card surfaces */
  --steel:      #2B4C59;   /* deep teal-blue — links, secondary accents */
  --steel-dark: #1D363F;
  --amber:      #F2A93B;   /* primary accent — CTAs, highlights */
  --amber-dark: #D6901F;
  --brick:      #B23A2E;   /* sparing accent — urgent / guarantee badges */
  --mist:       #C9CFC9;   /* borders, dividers, muted lines */
  --mist-2:     #DADDD3;
  --ok:         #3C8562;

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

  --radius: 4px;
  --container: 1180px;
  --header-h: 76px;
  --header-h-mobile: 62px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(20,24,29,.75) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(242,169,59,.5) 0 1px, transparent 1px);
  background-size:7px 7px, 11px 11px;
}
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
body{ animation:pageIn .38s ease both; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

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

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:900; line-height:1.05; margin:0; letter-spacing:.2px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--amber);
  display:inline-block;
}

::selection{ background:var(--amber); color:var(--ink); }

/* focus visibility (a11y) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--steel);
  outline-offset:3px;
}

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

/* =========================================================
   BLUEPRINT GRID BACKGROUND (used behind hero / dark sections)
========================================================= */
.grid-bg{
  position:relative;
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(243,244,239,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,244,239,.06) 1px, transparent 1px);
  background-size:34px 34px;
}
.grid-bg::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 15% 0%, rgba(242,169,59,.16), transparent 60%);
  pointer-events:none;
}

/* corner tick-marks — signature framing device on cards / panels */
.ticket{
  position:relative;
  background:var(--card);
  border:1px solid var(--mist);
}
.ticket::before,.ticket::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  border:2px solid var(--ink);
  opacity:.55;
}
.ticket::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.ticket::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* =========================================================
   TOP UTILITY BAR
========================================================= */
.topbar{
  background:var(--ink);
  color:var(--mist-2);
  font-family:var(--font-mono);
  font-size:12.5px;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  height:34px;
}
.topbar a{ color:var(--mist-2); }
.topbar a:hover{ color:var(--amber); }
.topbar-links{ display:flex; gap:22px; }
.topbar-badge{ color:var(--amber); font-weight:600; letter-spacing:.06em; }
.topbar-left{ display:flex; gap:22px; align-items:center; }

@media (max-width:760px){
  .topbar .container{ height:auto; padding:6px 16px; flex-wrap:wrap; gap:4px 16px; justify-content:center; }
  .topbar-badge{ display:none; }
}

/* =========================================================
   HEADER / NAV
========================================================= */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--paper);
  border-bottom:1px solid var(--mist);
  height:var(--header-h);
}
.site-header .container{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:110px; height:44px;
  background:#000;
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:900; font-size:19px;
  border:0;
  overflow:hidden;
}
.brand-mark img{ width:100%; height:auto; aspect-ratio:1972/798; object-fit:contain; padding:0; }
.footer-logo{ width:200px; height:80px; background:transparent; color:var(--paper); }
.brand-text{ display:none; font-family:var(--font-display); font-weight:900; font-size:19px; letter-spacing:.2px; color:var(--ink); }
.brand-text span{ color:var(--steel); }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  padding:10px 16px;
  font-weight:600; font-size:14.5px;
  color:var(--ink-soft);
  border-radius:var(--radius);
  transition:color .15s ease, background .15s ease;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li.active > a{ color:var(--steel); background:var(--paper-2); }
.caret{ font-size:9px; opacity:.6; transform:translateY(1px); }

.has-dropdown .dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:250px;
  background:var(--card);
  border:1px solid var(--mist);
  box-shadow:0 18px 40px rgba(20,24,29,.14);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown li a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; font-size:14px; font-weight:500;
  color:var(--ink-soft); border-radius:3px;
}
.dropdown li a:hover{ background:var(--paper); color:var(--steel); }
.dropdown li a .dot{ width:5px; height:5px; background:var(--amber); flex:none; }

.nav-cta{
  margin-left:8px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper);
  font-weight:700; font-size:14px;
  padding:11px 18px;
  border:1px solid var(--ink);
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--steel); border-color:var(--steel); }
.nav-cta .num{ color:var(--amber); font-family:var(--font-mono); }

.burger{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--mist);
  background:var(--card);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.burger span{ width:20px; height:2px; background:var(--ink); display:block; transition:transform .2s ease, opacity .2s ease; }
.burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- Off-canvas mobile menu: opens from the RIGHT, slides left into view --- */
.mobile-menu{
  position:fixed; top:0; right:0; height:100%;
  width:min(84vw, 360px);
  background:var(--ink);
  color:var(--paper);
  z-index:400;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,.9,.32,1);
  display:flex; flex-direction:column;
  padding:calc(var(--header-h-mobile) + 10px) 0 24px;
  box-shadow:-20px 0 50px rgba(0,0,0,.35);
}
.mobile-menu.is-open{ transform:translateX(0); }
.menu-scrim{
  position:fixed; inset:0; background:rgba(20,24,29,.55);
  z-index:390; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.menu-scrim.is-open{ opacity:1; visibility:visible; }
.mobile-menu-inner{ overflow-y:auto; padding:6px 8px 0; flex:1; }
.mobile-menu-brand{
  display:flex; align-items:center; gap:12px;
  padding:0 18px 18px; margin-bottom:4px;
  border-bottom:1px solid rgba(243,244,239,.12);
  font-family:var(--font-display); font-weight:900;
}
.mobile-menu-brand .brand-mark{ width:150px; height:60px; }
.mobile-menu-brand > span:last-child{ display:none; }
.mobile-menu-brand em{ color:var(--amber); font-style:normal; }
.mobile-menu a{ display:block; }
.mobile-menu .mm-link{
  font-family:var(--font-display); font-weight:800; font-size:20px;
  padding:14px 18px; border-bottom:1px solid rgba(243,244,239,.1);
}
.mobile-menu .mm-sub{ padding-left:18px; }
.mobile-menu .mm-sub a{
  font-family:var(--font-body); font-weight:500; font-size:14.5px;
  padding:11px 18px; color:rgba(243,244,239,.75);
  display:flex; align-items:center; gap:8px;
}
.mobile-menu .mm-sub a::before{ content:""; width:4px; height:4px; background:var(--amber); }
.mm-toggle{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
}
.mm-toggle .caret{ transition:transform .2s ease; }
.mm-toggle.open .caret{ transform:rotate(180deg); }
.mm-sub{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.mobile-menu-foot{
  padding:16px 18px 0; margin-top:auto;
  border-top:1px solid rgba(243,244,239,.12);
}
.mobile-menu-foot .call-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--amber); color:var(--ink); font-weight:700;
  padding:14px; margin:14px 10px 6px; font-family:var(--font-mono); font-size:14.5px;
}
.mobile-menu-foot .mm-mail{ display:block; text-align:center; font-size:13px; color:rgba(243,244,239,.6); padding-bottom:6px;}

@media (max-width:980px){
  .main-nav{ display:none; }
  .burger{ display:flex; }
}

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  font-weight:700; font-size:15px;
  border:2px solid transparent;
  border-radius:2px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-amber{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.btn-amber:hover{ background:var(--amber-dark); border-color:var(--amber-dark); }
.btn-outline{ background:transparent; color:var(--paper); border-color:rgba(243,244,239,.4); }
.btn-outline:hover{ border-color:var(--paper); }
.btn-ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-ink:hover{ background:var(--steel); border-color:var(--steel); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:13.5px; }

/* =========================================================
   HERO
========================================================= */
.hero{ padding:62px 0 70px; color:var(--paper); overflow:hidden; }
.hero-photo::before{
  content:""; position:absolute; inset:-8% 0;
  background:
    linear-gradient(90deg, rgba(20,24,29,.9) 0%, rgba(20,24,29,.72) 42%, rgba(20,24,29,.35) 100%),
    url("../assets/images/hero-banner.webp") center/cover no-repeat;
  transform:translate3d(0,var(--parallax-y,0),0) scale(1.04);
  will-change:transform;
}
.hero .container{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; }
.hero-copy,.hero-visual{ position:relative; z-index:1; }
.hero-eyebrow{ color:var(--amber); }
.hero-eyebrow::before{ background:var(--paper); }
.hero h1{
  font-size:clamp(34px,5vw,58px);
  margin:18px 0 22px;
}
.hero h1 em{ font-style:normal; color:var(--amber); position:relative; }
.hero-lede{ font-size:17.5px; color:rgba(243,244,239,.78); max-width:52ch; margin-bottom:30px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-trust{ display:flex; gap:26px; flex-wrap:wrap; }
.hero-trust div{ font-family:var(--font-mono); font-size:12.5px; color:rgba(243,244,239,.6); }
.hero-trust strong{ display:block; font-family:var(--font-display); font-size:22px; color:var(--paper); font-weight:800; }

/* Ticket stack — replaces a photographic hero image */
.hero-visual{ display:grid; gap:14px; }
.hero-media,.page-hero-visual,.service-photo,.panel-photo{
  display:block; overflow:hidden; background:var(--ink);
  border:1px solid rgba(243,244,239,.18);
  box-shadow:0 24px 50px rgba(0,0,0,.28);
}
.hero-media{ aspect-ratio:16/8; max-height:300px; width:100%; }
.hero-media img,.page-hero-visual img,.service-photo img,.panel-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.06);
}
.ticket-stack{ position:relative; }
.job-card{
  background:var(--paper);
  color:var(--ink);
  padding:16px 18px;
  position:relative;
  border:1px solid rgba(20,24,29,.08);
}
.job-card + .job-card{ margin-top:10px; }
.job-card:nth-child(2){ margin-left:12px; background:var(--card); }
.job-card:nth-child(3){ margin-left:24px; background:var(--amber); color:var(--ink); }
.job-card .jc-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.job-card .jc-code{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; opacity:.6; }
.job-card .jc-status{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:3px 8px; border:1px solid currentColor; opacity:.75; }
.job-card h4{ font-size:16.5px; font-weight:800; margin-bottom:4px; }
.job-card p{ margin:0; font-size:13px; opacity:.75; }

@media (max-width:980px){
  .hero .container{ grid-template-columns:1fr; gap:40px; }
  .hero-media{ max-width:760px; }
  .ticket-stack{ max-width:620px; }
}
@media (max-width:560px){
  .hero{ padding:34px 0 44px; }
  .hero .container{ gap:30px; }
  .job-card:nth-child(2){ margin-left:8px; }
  .job-card:nth-child(3){ margin-left:16px; }
  .hero-trust{ gap:18px; }
}

/* =========================================================
   VALUE / SLIDER STRIP (replaces a photo carousel — value-prop slides)
========================================================= */
.slider-section{ padding:48px 0; background:var(--paper-2); border-bottom:1px solid var(--mist); }
.slider{ position:relative; }
.hero-slider-media .slide-inner::before{
  content:""; width:120px; aspect-ratio:16/10; display:block; grid-column:1;
  background:linear-gradient(rgba(20,24,29,.38),rgba(20,24,29,.12)), var(--slide-photo, url("../assets/images/hero-alt-1.webp")) center/cover;
  border:1px solid var(--mist);
}
.hero-slider-media .slide:nth-child(2) .slide-inner::before{ --slide-photo:url("../assets/images/hero-alt-2.webp"); }
.hero-slider-media .slide:nth-child(3) .slide-inner::before{ --slide-photo:url("../assets/images/about-team.webp"); }
.hero-slider-media .slide:nth-child(4) .slide-inner::before{ --slide-photo:url("../assets/images/svc-home-repair.webp"); }
.slide-track{ overflow:hidden; }
.slides{ display:flex; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.slide{ flex:0 0 100%; }
.slide-inner{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
  padding:8px 4px;
}
.slide-icon{
  width:76px; height:76px; flex:none;
  background:var(--ink); color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:28px; font-weight:900;
}
.slide-inner h3{ font-size:26px; margin-bottom:8px; }
.slide-inner p{ color:var(--ink-soft); max-width:60ch; margin:0; font-size:15px; }
.slider-controls{ display:flex; align-items:center; gap:16px; margin-top:28px; }
.slider-dots{ display:flex; gap:8px; }
.slider-dots button{ width:26px; height:4px; background:var(--mist); border:none; padding:0; }
.slider-dots button.is-active{ background:var(--amber); }
.slider-arrows{ display:flex; gap:8px; margin-left:auto; }
.slider-arrows button{ width:38px; height:38px; border:1px solid var(--mist); background:var(--card); font-size:16px; }
.slider-arrows button:hover{ border-color:var(--steel); color:var(--steel); }

@media (max-width:640px){
  .slide-inner{ grid-template-columns:1fr; text-align:left; }
  .slide-icon{ width:58px; height:58px; font-size:22px; }
}

/* =========================================================
   SECTION HEADERS
========================================================= */
.section{ padding:70px 0; }
.section-tight{ padding:46px 0; }
.section-head{ max-width:680px; margin-bottom:36px; }
.section-head h2{ font-size:clamp(28px,3.6vw,40px); margin:16px 0 14px; }
.section-head p{ color:var(--ink-soft); font-size:16px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.dark{ background:var(--ink); color:var(--paper); }
.dark .section-head p{ color:rgba(243,244,239,.68); }

/* =========================================================
   SERVICES GRID
========================================================= */
.services-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; grid-auto-rows:1fr; }
.services-page-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.service-card{
  padding:20px;
  display:flex; flex-direction:column; min-width:0; height:100%;
  transform-style:preserve-3d;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{ transform:translateY(-4px) rotateX(var(--tilt-x,0)) rotateY(var(--tilt-y,0)); box-shadow:0 20px 40px rgba(20,24,29,.1); border-color:var(--steel); }
.service-card .jc-code{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--steel); font-weight:600; }
.service-icon{
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; margin:0;
  background:var(--ink); color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:"Segoe UI Symbol",var(--font-mono); font-weight:700; font-size:20px;
  line-height:1; border:1px solid var(--ink); border-radius:50%;
}
.service-card .jc-code{ display:block; min-height:38px; padding:7px 48px 0 0; }
.service-photo{ aspect-ratio:16/9; margin:14px 0 16px; width:100%; box-shadow:none; border-color:var(--mist); }
.service-photo img{ transition:transform .45s ease; }
.service-card:hover .service-photo img{ transform:scale(1.055); }
.service-card h3{ font-size:18px; margin-bottom:8px; min-height:2.1em; }
.service-card p{ font-size:14px; line-height:1.55; color:var(--ink-soft); margin-bottom:14px; flex:1; }
.service-card .svc-link{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--steel); display:inline-flex; gap:6px; align-items:center; }
.service-card .svc-link:hover{ color:var(--amber-dark); }
.dark .service-card > .service-icon + h3{ min-height:42px; padding-right:52px; display:flex; align-items:center; }

.services-page-grid .service-card{
  display:grid;
  grid-template-columns:minmax(150px,.85fr) minmax(0,1.15fr);
  grid-template-rows:auto auto 1fr auto;
  column-gap:18px;
  align-items:start;
}
.services-page-grid .service-card .jc-code{ grid-column:1/-1; grid-row:1; }
.services-page-grid .service-card .service-photo{
  grid-column:1; grid-row:2/5; align-self:stretch;
  height:100%; min-height:150px; margin:0; aspect-ratio:auto;
}
.services-page-grid .service-card h3{ grid-column:2; grid-row:2; min-height:0; }
.services-page-grid .service-card p{ grid-column:2; grid-row:3; }
.services-page-grid .service-card .svc-link{ grid-column:2; grid-row:4; }

@media (max-width:920px){ .services-page-grid{ grid-template-columns:1fr; } }
@media (max-width:760px){ .services-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .services-page-grid .service-card{ display:flex; }
  .services-page-grid .service-card .service-photo{ height:auto; min-height:0; margin:14px 0 16px; aspect-ratio:16/9; }
}

/* =========================================================
   ABOUT / SPLIT SECTION
========================================================= */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:46px; align-items:stretch; }
.split-panel{
  background:var(--ink); color:var(--paper);
  padding:30px; position:relative; min-height:0; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  background-image:
    linear-gradient(rgba(243,244,239,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,244,239,.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.split-panel-photo{ overflow:hidden; gap:18px; justify-content:flex-start; }
.panel-photo{ aspect-ratio:16/9; margin:-8px -8px 8px; width:calc(100% + 16px); box-shadow:none; }
.split-panel .stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:10px; }
.split-panel .stat{ border-top:2px solid var(--amber); padding-top:10px; }
.split-panel .stat strong{ display:block; font-family:var(--font-display); font-size:34px; font-weight:900; }
.split-panel .stat span{ font-family:var(--font-mono); font-size:11.5px; color:rgba(243,244,239,.6); }
.split-copy p{ color:var(--ink-soft); margin:16px 0; font-size:15.5px; }
.checklist{ margin:20px 0 26px; }
.checklist li{ display:flex; gap:10px; padding:9px 0; border-bottom:1px dashed var(--mist); font-size:14.5px; }
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{ content:"✓"; color:var(--ok); font-weight:800; }

@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } }

/* =========================================================
   PROCESS STEPS
========================================================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--mist); border-left:1px solid var(--mist); }
.step{ padding:30px 26px; border-right:1px solid var(--mist); border-bottom:1px solid var(--mist); background:var(--card); }
.step .step-num{ font-family:var(--font-mono); color:var(--amber-dark); font-size:13px; font-weight:700; }
.step h4{ font-size:17px; margin:10px 0 8px; }
.step p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonial-slider{ position:relative; max-width:760px; margin:0 auto; text-align:center; }
.t-slide{ display:none; }
.t-slide.is-active{ display:block; animation:fadeIn .4s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.t-quote{ font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.4; color:var(--paper); margin-bottom:26px; }
.t-quote::before{ content:"“"; color:var(--amber); }
.t-quote::after{ content:"”"; color:var(--amber); }
.t-person{ font-family:var(--font-mono); font-size:13px; color:rgba(243,244,239,.6); }
.t-person strong{ color:var(--amber); }
.t-avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:2px solid var(--amber); box-shadow:0 0 0 7px rgba(242,169,59,.12); }
.t-dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
.t-dots button{ width:9px; height:9px; border-radius:50%; border:1px solid rgba(243,244,239,.4); background:transparent; }
.t-dots button.is-active{ background:var(--amber); border-color:var(--amber); }

/* =========================================================
   FAQ ACCORDION
========================================================= */
.faq-list{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--mist); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; font-weight:700; font-size:16px; background:none; border:none; width:100%; text-align:left; color:var(--ink);
}
.faq-q .qm{ font-family:var(--font-mono); color:var(--steel); flex:none; }
.faq-q .plus{ font-size:20px; color:var(--amber-dark); transition:transform .2s ease; flex:none; }
.faq-item.is-open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p{ padding:0 4px 22px 34px; color:var(--ink-soft); font-size:15px; margin:0; }

/* =========================================================
   CTA BANNER
========================================================= */
.cta-banner{
  background:var(--amber);
  color:var(--ink);
  padding:56px 0;
  text-align:center;
}
.cta-banner h2{ font-size:clamp(24px,4vw,36px); margin-bottom:14px; }
.cta-banner p{ font-family:var(--font-mono); font-size:13.5px; letter-spacing:.03em; margin-bottom:26px; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background:var(--ink); color:rgba(243,244,239,.7); padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(243,244,239,.12); }
.footer-grid h5{ font-family:var(--font-mono); color:var(--paper); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.footer-grid li{ padding:6px 0; font-size:14.5px; }
.footer-grid a:hover{ color:var(--amber); }
.footer-brand p{ font-size:14px; max-width:34ch; margin:14px 0 20px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border:1px solid rgba(243,244,239,.25); display:flex; align-items:center; justify-content:center; font-size:13px; }
.footer-social a:hover{ border-color:var(--amber); color:var(--amber); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:12.5px; font-family:var(--font-mono); flex-wrap:wrap; gap:10px; }

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* =========================================================
   PAGE HEADER (inner pages)
========================================================= */
.page-hero{ padding:40px 0 36px; color:var(--paper); overflow:hidden; }
.page-hero .container{ position:relative; z-index:1; }
.page-hero .breadcrumb{ font-family:var(--font-mono); font-size:12.5px; color:rgba(243,244,239,.55); margin-bottom:16px; }
.page-hero .breadcrumb a:hover{ color:var(--amber); }
.page-hero h1{ font-size:clamp(30px,4.6vw,48px); margin-bottom:12px; }
.page-hero p{ color:rgba(243,244,239,.7); max-width:60ch; font-size:16px; }
.page-hero-visual{ aspect-ratio:3/1; margin-top:22px; width:100%; max-height:280px; box-shadow:0 18px 42px rgba(0,0,0,.24); }

/* =========================================================
   FORMS (contact / booking)
========================================================= */
.form-card{ background:var(--card); border:1px solid var(--mist); padding:36px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--steel); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--mist); background:var(--paper); font-size:15px; color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--steel); background:var(--card); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--brick); }
.field-error{ display:none; color:var(--brick); font-size:12.5px; margin-top:6px; font-family:var(--font-mono); }
.field.invalid .field-error{ display:block; }
.form-note{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; }
.form-success{
  display:none; align-items:center; gap:12px;
  background:#EAF4EE; border:1px solid var(--ok); color:#245C40;
  padding:16px 18px; margin-bottom:22px; font-size:14.5px;
}
.form-success.is-visible{ display:flex; }

@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } .form-card{ padding:24px; } }

/* contact info tiles */
.info-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; grid-auto-rows:1fr; margin-bottom:40px; }
.info-tile{ padding:24px; height:100%; }
.info-tile .eyebrow{ margin-bottom:10px; }
.info-tile div.value{ font-family:var(--font-display); font-weight:800; font-size:19px; margin-bottom:4px; }
.info-tile p{ margin:0; font-size:13.5px; color:var(--ink-soft); }
@media (max-width:900px){ .info-tiles{ grid-template-columns:1fr; } }

/* map placeholder block (no external image dependency) */
.map-block{
  height:320px; background:var(--ink); position:relative; overflow:hidden;
  background-image:
    linear-gradient(rgba(243,244,239,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,244,239,.06) 1px, transparent 1px);
  background-size:30px 30px;
  display:flex; align-items:center; justify-content:center;
}
.map-block iframe{ width:100%; height:100%; border:0; filter:saturate(.75) contrast(1.05); }
.map-block .pin{ text-align:center; color:var(--paper); }
.map-block .pin .dot{ width:16px; height:16px; background:var(--amber); border-radius:50%; margin:0 auto 12px; box-shadow:0 0 0 8px rgba(242,169,59,.2); }
.map-block .pin span{ font-family:var(--font-mono); font-size:13px; color:rgba(243,244,239,.7); }

/* =========================================================
   BOOKING STEP INDICATOR
========================================================= */
.book-summary{ position:sticky; top:calc(var(--header-h) + 24px); }
.summary-line{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--mist); font-size:14px; }
.summary-line:last-child{ border-bottom:none; }
.summary-line span:first-child{ color:var(--ink-soft); }
.summary-total{ display:flex; justify-content:space-between; padding-top:16px; margin-top:6px; border-top:2px solid var(--ink); font-family:var(--font-display); font-weight:900; font-size:18px; }

/* =========================================================
   MOBILE APP-STYLE BOTTOM NAV (mobile only)
========================================================= */
.app-tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--card);
  border-top:1px solid var(--mist);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(20,24,29,.08);
}
.app-tabbar ul{ display:grid; grid-template-columns:repeat(5,1fr); }
.app-tabbar li a{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; font-size:10.5px; font-weight:600; color:var(--ink-soft); }
.app-tabbar li a .tb-ic{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-family:"Segoe UI Symbol",var(--font-mono); font-size:16px; line-height:1;
}
.app-tabbar li a.active{ color:var(--steel); }
.app-tabbar li a.active .tb-ic{ color:var(--amber-dark); }
.app-tabbar li.call a{ color:var(--card); }
.app-tabbar li.call .tb-ic{ background:var(--amber); color:var(--ink); width:34px; height:34px; border-radius:50%; margin-top:-14px; box-shadow:0 6px 14px rgba(242,169,59,.5); font-size:16px; }
.quick-call{
  position:fixed; right:18px; bottom:86px; z-index:151;
  display:none; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%;
  background:var(--amber); color:var(--ink);
  box-shadow:0 16px 28px rgba(20,24,29,.24), 0 0 0 8px rgba(242,169,59,.18);
  font-family:var(--font-mono); font-weight:700; font-size:12px;
  transform:translateY(10px); opacity:0;
  transition:opacity .2s ease, transform .2s ease;
}
.quick-call.is-visible{ opacity:1; transform:translateY(0); }

@media (max-width:760px){
  .app-tabbar{ display:block; }
  .quick-call{ display:flex; }
  body{ padding-bottom:64px; }
  .section{ padding:54px 0; }
  .section-tight{ padding:38px 0; }
  .section-head{ margin-bottom:28px; }
  .page-hero{ padding:32px 0 30px; }
}

.portfolio-section{ padding-block:56px; background:var(--paper-2); border-block:1px solid var(--mist); }
.portfolio-section .section-head{ margin:0 auto 26px; text-align:center; }
.portfolio-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,360px)); justify-content:center; gap:18px; align-items:stretch; grid-auto-rows:1fr; }
.portfolio-item{ padding:20px; border:1px solid var(--mist); background:var(--card); cursor:pointer; overflow:hidden; text-align:left; color:var(--ink); display:grid; grid-template-rows:auto 34px; gap:12px; min-width:0; }
.portfolio-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; border:1px solid var(--mist); transition:transform .45s ease, filter .45s ease; }
.portfolio-item:hover img{ transform:scale(1.055); }
.portfolio-item span{ display:flex; align-items:center; background:transparent; color:var(--steel); padding:8px 0 0; border-top:1px solid var(--mist); font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.04em; }
.lightbox{
  position:fixed; inset:0; z-index:600; display:none; place-items:center;
  background:rgba(20,24,29,.86); padding:24px;
}
.lightbox.is-open{ display:grid; }
.lightbox img{ max-width:min(1100px,92vw); max-height:82vh; object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.lightbox button{ position:absolute; top:18px; right:18px; width:42px; height:42px; border:1px solid rgba(243,244,239,.35); background:var(--ink); color:var(--paper); font-size:24px; }

@media (max-width:760px){ .portfolio-grid{ grid-template-columns:minmax(0,360px); } }
@media (max-width:560px){
  .portfolio-section{ padding-block:38px; }
  .portfolio-section .section-head{ margin-bottom:20px; }
  .portfolio-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .portfolio-item{ padding:16px; }
  .portfolio-item img{ aspect-ratio:16/9; }
  .hero-slider-media .slide-inner::before{ width:100%; }
  .page-hero-visual{ aspect-ratio:16/9; }
  .service-card h3{ min-height:0; }
  .split-copy .btn[href^="tel:"]{ margin-left:0 !important; }
}

/* utility */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.hide-mobile{ }
@media (max-width:760px){ .hide-mobile{ display:none !important; } }
.show-mobile{ display:none !important; }
@media (max-width:760px){ .show-mobile{ display:block !important; } }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  body{ animation:none; }
  .hero-photo::before{ transform:none; }
  .service-card:hover{ transform:none; }
}