/* ═══════════════════════════════════════════════════════════
   GORTON ELECTRICAL — Shared Stylesheet
   Architectural Precision design system
   ═══════════════════════════════════════════════════════════ */

/* ── Textures ── */
.topo{background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");}
.grid-bg{background-image:linear-gradient(to right,rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,0.04) 1px,transparent 1px);background-size:32px 32px;}
.grain-dark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");background-size:200px;mix-blend-mode:overlay;opacity:.03;}

/* ── Tickers ── */
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-track{animation:ticker 32s linear infinite;will-change:transform}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker-rev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.ticker-rev{animation:ticker-rev 45s linear infinite;will-change:transform}
.ticker-rev:hover{animation-play-state:paused}

/* ── Section skews ── */
.skew-down{transform:skewY(-3deg);transform-origin:top left}
.skew-up{transform:skewY(3deg);transform-origin:top left}
.unskew{transform:skewY(3deg)}
.unskew-neg{transform:skewY(-3deg)}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

/* ── Glass tile (flat 2D glassmorphism card with depth from shadows) ── */
.glass-scene{perspective:none}
.glass-tile{
  position:relative;
  background:rgba(255,255,255,.26);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.60);
  border-left:1px solid rgba(255,255,255,.48);
  border-right:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.10);
  box-shadow:
    inset 2px 3px 6px rgba(255,255,255,.55),
    inset -1px -2px 4px rgba(0,0,0,.05),
    0 28px 56px rgba(0,0,0,.30),
    0 8px 24px rgba(0,0,0,.18),
    0 2px 8px rgba(0,0,0,.08);
  transform:none;
  transition:box-shadow .2s ease;
  border-radius:4px;overflow:hidden;
}
.glass-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.12) 100%);z-index:20;pointer-events:none}
.glass-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px;mix-blend-mode:overlay}
.crack-layer{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.2s ease .4s}
.crack-layer.vis{opacity:.14}
.glass-content{position:relative;z-index:10}

/* ── Step transitions inside glass tile ── */
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.step-panel.slide-in{animation:slideIn .22s cubic-bezier(.23,1,.32,1) forwards}
.step-panel.hidden{display:none}

.cat-btn{transition:transform .12s,box-shadow .12s,background .15s,border-color .15s;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer}
.cat-btn:hover{transform:translateY(1px);box-shadow:0 1px 3px rgba(0,0,0,.06);background:rgba(255,255,255,.88)}
.cat-btn:active{transform:translateY(3px) scale(.97);box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.cat-btn.sel{background:rgba(201,169,0,.14);border-color:rgba(201,169,0,.7)}

.dot{height:6px;border-radius:3px;background:rgba(0,0,0,.18);transition:width .3s cubic-bezier(.23,1,.32,1),background .3s}
.dot.active{background:#000;width:24px!important}
.dot.done{background:#c9a900;width:6px!important}

/* ── Service card hover ── */
.svc-card{position:relative;border:4px solid #000;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 0 0 0 #c9a900;cursor:pointer}
.svc-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 0 #c9a900}
.svc-card .svc-icon{transition:background .2s}
.svc-card:hover .svc-icon{background:#c9a900}

/* ── Hero owner image fade ── */
.hero-owner-wrap{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:1;overflow:hidden}
.hero-owner-img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(8%) contrast(1.05)}
.hero-owner-fade{position:absolute;inset:0;background:linear-gradient(to right,#fdf9f0 0%,#fdf9f0 12%,rgba(253,249,240,.85) 28%,rgba(253,249,240,.45) 48%,rgba(253,249,240,.18) 70%,rgba(253,249,240,0) 100%);pointer-events:none}

/* ── Before/After toggle ── */
.ba-btn{border:2px solid #000;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 28px;transition:all .15s;cursor:pointer;font-family:'Montserrat',sans-serif}
.ba-btn.active{background:#000;color:#fff}
.ba-btn:not(.active){background:transparent;color:#000}

/* ── Review card ── */
.review-card{min-width:320px;max-width:320px;background:#fff;border:1px solid rgba(0,0,0,.07);box-shadow:0 2px 16px rgba(0,0,0,.06);flex-shrink:0}

/* ── Emergency pulse ── */
@keyframes hb{0%,100%{box-shadow:0 0 0 0 rgba(186,26,26,.5)}50%{box-shadow:0 0 0 8px rgba(186,26,26,0)}}
.hb{animation:hb 2.2s ease-in-out infinite}

/* ── Owner drop shadow ── */
.drop-shadow-owner{filter:drop-shadow(0 8px 28px rgba(0,0,0,.18))}

/* ── Mobile hero scroll-reveal (ref: Gabriel Roofing pattern) ── */
.mobile-hero-scroll{
  --mobile-form-h:31rem;
  min-height:calc(100svh + var(--mobile-form-h));
}
.mobile-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.mobile-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.mobile-hero-owner{
  position:absolute;
  bottom:var(--mobile-form-h);
  left:50%;
  transform:translateX(-50%);
  width:84%;
  max-width:19rem;
  max-height:min(56svh,32rem);
  object-fit:contain;
  object-position:bottom center;
  z-index:15;
  pointer-events:none;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.28));
}
.mobile-hero-viewport{
  position:relative;
  z-index:10;
  min-height:calc(100svh - 4.25rem);
  padding:3.5rem 1.25rem 1rem;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1.25rem;
}
.mobile-hero-form-zone{
  position:relative;
  z-index:20;
  min-height:var(--mobile-form-h);
  padding:0.75rem 1rem 1.25rem;
}

/* ── Mobile nav ── */
#mobile-menu{display:none}
#mobile-menu.open{display:flex}

/* ── Photo grid hover ── */
.photo-item{overflow:hidden;position:relative}
.photo-item img{transition:transform .55s cubic-bezier(.23,1,.32,1)}
.photo-item:hover img{transform:scale(1.05)}
.photo-item .photo-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);padding:24px 18px 16px;color:#fff}

/* ── Spin ── */
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Custom focus ── */
*:focus-visible{outline:2px solid #c9a900;outline-offset:2px}

/* ── Smooth scroll ── */
html{scroll-behavior:smooth;overflow-x:hidden}

/* ── Off-White Glass Header ── */
.header-dark-glass {
  background: rgba(253, 249, 240, 0.92);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-bottom: 1px solid rgba(28, 28, 22, 0.10);
}
.header-dark-glass nav a { color: rgba(28,28,22,0.55); }
.header-dark-glass nav a:hover { color: #1c1c16; }
.header-dark-glass nav a[class*="border-\[#c9a900\]"] { color: #1c1c16; }
.header-dark-glass .hb { color: #1c1c16; border-color: rgba(28,28,22,0.28); }
.header-dark-glass .hb:hover { background: rgba(28,28,22,0.08) !important; border-color: rgba(28,28,22,0.42) !important; }
.header-dark-glass button { color: #1c1c16; border-color: rgba(28,28,22,0.25); }
.header-dark-glass #mobile-menu {
  background: rgba(253, 249, 240, 0.98);
  border-top: 1px solid rgba(28,28,22,0.10);
}
.header-dark-glass #mobile-menu a { color: #1c1c16; border-color: rgba(28,28,22,0.10); }

/* ── Stars (force Arial so ★ always renders as text, not emoji) ── */
.star-row { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }

/* ── Body base ── */
body{font-family:'Montserrat',sans-serif}

/* ── Process step ── */
.process-num{font-size:96px;font-weight:900;line-height:1;color:rgba(201,169,0,.18);letter-spacing:-.05em}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid rgba(0,0,0,.1)}
.faq-q{cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;text-align:left;background:none;border:none;font-family:inherit}
.faq-icon{transition:transform .3s ease;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.23,1,.32,1)}
.faq-item.open .faq-a{max-height:400px;padding-bottom:24px}

/* ── Service area pills ── */
.area-pill{display:inline-flex;align-items:center;gap:8px;border:2px solid #000;padding:8px 16px;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.1em;transition:all .15s}
.area-pill:hover{background:#000;color:#c9a900}

/* ── Hero Blur Overlay ── */
.hero-blur-overlay {
  position: absolute;
  inset-y: 0;
  left: 0;
  width: 50%;
  background: rgba(253, 249, 240, 0.35);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-right: 4px solid #000;
  z-index: 2;
}
@media (max-width: 1024px) {
  .hero-blur-overlay {
    width: 100%;
    border-right: none;
    border-bottom: 4px solid #000;
  }
}

/* ── Glass Tile Dark ── */
.glass-tile-dark {
  position: relative;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  overflow: hidden;
}
.glass-tile-dark.quick-book-card {
  overflow: visible;
  margin-top: 0.875rem;
}

/* Quick Book fields on dark fogged glass */
.glass-tile-dark .qb-kicker{color:rgba(255,255,255,.55)}
.glass-tile-dark .qb-heading{color:#fff}
.glass-tile-dark .qb-divider{border-color:rgba(255,255,255,.12)}
.glass-tile-dark .qb-label{color:rgba(255,255,255,.72)}
.glass-tile-dark .qb-field{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.glass-tile-dark .qb-field:focus{border-color:rgba(201,169,0,.75);background:rgba(255,255,255,.14);outline:none;box-shadow:none}
.glass-tile-dark .qb-field::placeholder{color:rgba(255,255,255,.38)}
.glass-tile-dark .qb-icon{color:rgba(255,255,255,.48)}
.glass-tile-dark .quick-book-success h3{color:#fff}
.glass-tile-dark .quick-book-success p{color:rgba(255,255,255,.68)}
.glass-tile-dark .time-chip:not(.active){background-color:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.85)!important;border-color:rgba(255,255,255,.16)!important}
.glass-tile-dark .time-chip.active{background-color:#c9a900!important;color:#000!important;border-color:#c9a900!important}
.glass-tile-dark .time-chip:not(.active):hover{background-color:rgba(255,255,255,.16)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}

/* ── Vertical Flip Tiles ── */
.flip-card {
  perspective: 1200px;
  height: 240px;
  cursor: pointer;
  position: relative;
  background: transparent;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 4px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}
.flip-card-front {
  background-color: #000000;
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  z-index: 2;
}
.flip-card-back {
  background-color: #1c1c16;
  color: #ffffff;
  border-color: #c9a900;
  transform: rotateX(180deg);
  z-index: 1;
}

/* ── Brushstroke Borders ── */
.brush-edge-bottom-black {
  position: relative;
}
.brush-edge-bottom-black::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L1000,0 L1000,8 C950,14 900,4 850,16 C800,18 750,6 700,14 C650,12 600,3 550,10 C500,16 450,12 400,6 C350,3 300,14 250,10 C200,4 150,18 100,10 C50,6 25,16 0,6 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 10;
  pointer-events: none;
}

.brush-bleed-surface {
  position: relative;
}
.brush-bleed-surface::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,24 L1000,24 L1000,12 C950,5 900,15 850,8 C800,4 750,14 700,8 C650,4 600,18 550,10 C500,5 450,15 400,8 C350,12 300,4 250,8 C200,15 150,5 100,12 C50,15 25,6 0,14 Z' fill='%23fdf9f0'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 10;
  pointer-events: none;
}

.brush-bleed-yellow {
  position: relative;
}
.brush-bleed-yellow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 24' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,24 L1000,24 L1000,12 C950,5 900,15 850,8 C800,4 750,14 700,8 C650,4 600,18 550,10 C500,5 450,15 400,8 C350,12 300,4 250,8 C200,15 150,5 100,12 C50,15 25,6 0,14 Z' fill='%23c9a900'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 10;
  pointer-events: none;
}

/* ── Diamond Map Display ── */
.diamond-map-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px;
}
.diamond-map-outer {
  width: 316px;
  height: 316px;
  background: #000;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(8px 8px 0 rgba(0,0,0,0.18));
  flex-shrink: 0;
}
.diamond-map {
  width: 300px;
  height: 300px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  overflow: hidden;
  flex-shrink: 0;
}
.diamond-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s ease;
}
.diamond-map:hover img {
  transform: scale(1.05);
}

/* ── Time selection chips inside Quick Book card ── */
.time-chip {
  transition: all 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  border-radius: 4px;
}
.time-chip.active {
  background-color: #1c1c16 !important;
  color: #ffffff !important;
  border-color: #1c1c16 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.time-chip:not(.active) {
  background-color: rgba(255, 255, 255, 0.4) !important;
  color: rgba(28, 28, 22, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.time-chip:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.65) !important;
  color: #1c1c16 !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}

/* ── Glass Pill Button ── */
.glass-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 
    inset 1px 1px 1px rgba(255, 255, 255, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.glass-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ── Button push-in effects ── */
.time-chip {
  transition: transform 0.1s ease, background-color 0.15s ease, border-color 0.15s ease !important;
}
.time-chip:hover {
  transform: translateY(1px);
}
.time-chip:active {
  transform: translateY(3px) scale(0.97);
}

.btn-push {
  transition: transform 0.12s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.12s ease-in-out, background-color 0.15s ease;
  will-change: transform, box-shadow;
}
.btn-push:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(186, 26, 26, 0.15) !important;
}
.btn-push:active {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 1px 2px rgba(186, 26, 26, 0.05) !important;
}

/* ── Interactive Before/After image slider compare widget ── */
#before-after-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
  width: 100%;
  height: 100%;
}
#before-after-slider input[type="range"]:focus {
  outline: none;
}
#before-after-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 480px;
  cursor: ew-resize;
  background: transparent;
  border: none;
}
#before-after-slider input[type="range"]::-moz-range-thumb {
  width: 44px;
  height: 480px;
  cursor: ew-resize;
  background: transparent;
  border: none;
}

/* ── Mobile Hero V2 — 2-screen static layout ── */
.mhv2 {
  position: relative;
  overflow-x: hidden; /* contains absolutely positioned owner image that bleeds right */
  /* height flows from content — no fixed height needed */
}

/* z-1: background photo spans full section */
.mhv2-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.mhv2-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  /* Heavy blur kills any watermark/branding in the source photo */
  filter: blur(14px) brightness(0.40) saturate(0.70);
  transform: scale(1.15); /* prevents blur-edge artifacts */
}

/* z-2: overlay — very dark in screen 1, opens up in screen 2, darkens at bottom for card */
.mhv2-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.86) 38%,    /* screen 1: near-opaque */
    rgba(0,0,0,0.65) 50%,    /* fold: transition begins */
    rgba(0,0,0,0.20) 62%,    /* screen 2 top: bg photo shines through */
    rgba(0,0,0,0.50) 80%,    /* mid screen 2: darkens */
    rgba(0,0,0,0.90) 100%    /* bottom: dark behind card */
  );
}

/* z-3: screen 1 content */
.mhv2-block1 {
  position: relative;
  z-index: 3;
  padding: 2.75rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mhv2-logo {
  height: 4.5rem;         /* big */
  width: auto;
  max-width: 14rem;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  display: block;
  margin: 0 auto;         /* centered */
}

.mhv2-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #c9a900;
}

.mhv2-headline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.875rem, 8.5vw, 2.375rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-transform: uppercase;
}

/* owner cutout — in normal flow, sits between review pills and booking card */
.mhv2-owner {
  display: block;
  position: relative;
  z-index: 4;
  width: 100%;
  height: 28svh;
  margin-top: 5px;
  margin-bottom: 0;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  filter: drop-shadow(-8px 0 32px rgba(0,0,0,0.65));
}

/* card starts immediately below owner image — zero gap */
.mhv2-block2 {
  position: relative;
  z-index: 5;
  padding: 0 1rem 1.75rem;
}

/* Glassmorphism card shell */
.mhv2-card-glass {
  background: rgba(6, 6, 4, 0.82);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(201,169,0,0.07),
    0 0 36px rgba(201,169,0,0.09),
    0 20px 56px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.09);
}

/* Card header strip */
.mhv2-card-header {
  padding: 1.125rem 1.25rem 0.875rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(135deg, rgba(201,169,0,0.08) 0%, transparent 55%);
}

/* Nake 04 fills the space between headline and trust badges — shifted left */
.mhv2-mid-img {
  flex: 0 0 auto;
  height: 12rem;
  /* Narrower than full-width and nudged left so figure sits off-centre */
  width: 85%;
  margin-right: auto;
  margin-left: -0.75rem;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
}

/* ── Desktop Hero: two-panel grid with interlocking chevron divider ──
   All angle/divider tuning lives here as custom properties. */
.dsk-hero {
  --notch-pct: 55%;      /* how deep the chevron cuts into each clipped element, as % of its own width */
  --notch-apex: 50%;     /* vertical position of the chevron's point */
  --seam-x: 46%;          /* divider position, as % of hero width */
  --bar-dark-w: 26px;
  --bar-accent-w: 14px;
  --bar-gap: 6px;
  min-height: 100vh;
  background: #0d0d0a;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--seam-x) 1fr;
  height: 100vh;
  width: 100%;
}

/* Text panel: plain rectangle, solid dark background */
.hero-text-panel {
  position: relative;
  z-index: 3;
  background: #0d0d0a;
  display: flex;
  align-items: flex-end;
}
.hero-text-inner {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 0 5rem;
  padding: 6rem 0 8rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Large desktop headline */
.dsk-headline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 3.8vw, 3.75rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: #ffffff;
  text-transform: uppercase;
}

/* Image panel: clipped with a chevron notch on its left edge instead of a straight line */
.hero-image-panel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  clip-path: polygon(
    var(--notch-pct) 0%,
    100% 0%,
    100% 100%,
    var(--notch-pct) 100%,
    0% var(--notch-apex)
  );
}
.hero-image-panel-bg {
  position: absolute;
  inset: 0;
}
.hero-image-panel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-image-panel-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 35%);
}

/* Seam: two parallel bars clipped to the identical chevron formula, sitting flush in the notch */
.hero-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--seam-x) - var(--bar-dark-w) - var(--bar-gap) - var(--bar-accent-w));
  width: calc(var(--bar-dark-w) + var(--bar-gap) + var(--bar-accent-w));
  z-index: 4;
  display: flex;
  gap: var(--bar-gap);
  pointer-events: none;
}
.hero-seam-bar {
  height: 100%;
  clip-path: polygon(
    var(--notch-pct) 0%,
    100% 0%,
    100% 100%,
    var(--notch-pct) 100%,
    0% var(--notch-apex)
  );
}
.hero-seam-bar--dark {
  width: var(--bar-dark-w);
  background: #1c1c16;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.08);
}
.hero-seam-bar--accent {
  width: var(--bar-accent-w);
  background: #c9a900;
  box-shadow: 0 0 40px rgba(201,169,0,0.30);
}

/* Owner cutout: nake 04 (faces left), anchored right within the image panel, unclipped */
.dsk-owner {
  position: absolute;
  right: 0;
  bottom: 64px;
  z-index: 5;
  height: calc(100% - 64px);
  width: auto;
  max-width: 90%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  filter: drop-shadow(-16px 0 48px rgba(0,0,0,0.50));
}

/* Safety net: collapse the chevron on small screens (desktop hero is already hidden below lg via Tailwind, the separate mobile hero stacks cleanly on its own) */
@media (max-width: 767px) {
  .hero-image-panel,
  .hero-seam-bar {
    clip-path: none;
  }
}

/* Desktop card bar — brighter form labels */
.dsk-card-float .qb-label {
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.10em;
}

/* "3 STEP QUICK BOOK" gold CTA glow */
.dsk-card-title {
  text-shadow:
    0 0 12px rgba(201,169,0,0.90),
    0 0 28px rgba(201,169,0,0.55),
    0 0 56px rgba(201,169,0,0.25);
}

/* ── Floating glass tile: straddles hero bottom + next section top ── */
.dsk-card-float {
  position: relative;
  z-index: 50;
  margin-top: -64px;
  padding: 0 32px;
  pointer-events: none;
}
.dsk-card-float-inner {
  max-width: 1360px;
  margin: 0 auto;
  height: 150px;
  border-radius: 18px;
  background: rgba(10, 10, 8, 0.78);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 36px 64px -12px rgba(0, 0, 0, 0.55),
    0 12px 28px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(201, 169, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

/* ── Tarmac angled top border — Recent Projects section ── */
.brush-top-tarmac::before {
  content: "";
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 11;
  pointer-events: none;
  /* SVG: black fill with rough jagged top edge rising 3° left→right.
     feTurbulence + feDisplacementMap give the tarmac / asphalt grain. */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 48' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='t' x='-2%25' y='-15%25' width='104%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.25' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23t)' d='M0%2C48 L1000%2C48 L1000%2C4 C970%2C7 940%2C3 910%2C9 C880%2C5 850%2C2 820%2C8 C790%2C5 760%2C1 730%2C7 C700%2C4 670%2C0 640%2C6 C610%2C3 580%2C-1 550%2C5 C520%2C2 490%2C-2 460%2C4 C430%2C1 400%2C-3 370%2C3 C340%2C0 310%2C-4 280%2C3 C250%2C-1 220%2C-5 190%2C2 C160%2C-2 130%2C-6 100%2C1 C75%2C-3 50%2C-7 25%2C0 C12%2C-4 5%2C-5 0%2C-2 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* ── Floating Photo Gallery ── */
.float-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .float-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .float-gallery { grid-template-columns: repeat(3, 1fr); }
}
.float-gallery.two-col { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .float-gallery.two-col { grid-template-columns: repeat(2, 1fr); }
}
.float-photo {
  position: relative;
  border: 4px solid #1c1c16;
  box-shadow: 7px 7px 0 0 rgba(0, 0, 0, 0.85);
  overflow: hidden;
  background: #1c1c16;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.22s ease;
}
.float-photo:hover {
  transform: translate(-4px, -4px);
  box-shadow: 11px 11px 0 0 rgba(0, 0, 0, 0.85);
}
.float-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.float-photo:hover img {
  transform: scale(1.04);
}
.float-photo .fp-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  pointer-events: none;
}
.float-photo.float-photo-dark {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 7px 7px 0 0 rgba(201, 169, 0, 0.55);
}
.float-photo.float-photo-dark:hover {
  box-shadow: 11px 11px 0 0 rgba(201, 169, 0, 0.75);
}
.ba-tag {
  display: inline-block;
  padding: 4px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ba-tag-yellow { color: #c9a900; }
.ba-tag-white { color: #ffffff; }

/* ── Feature tile hover ── */
.feature-grid>div{transition:background-color 0.2s ease,box-shadow 0.2s ease;}
.feature-grid>div:hover{background-color:#1c1c16;box-shadow:inset 4px 0 0 0 #c9a900;}
.feature-grid>div:hover h3{color:#c9a900;}
.feature-grid>div:hover>div:first-child{background-color:rgba(201,169,0,0.12);}