/* ==========================================================================
   EstateLenz Property Media: Design Tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink: #15140f;
  --ink-soft: #2a2820;
  --paper: #f6f4ee;
  --paper-dim: #ece8dd;
  --brass: #b8923e;
  --brass-bright: #d4ad5a;
  --stone: #8b8578;
  --line: rgba(21,20,15,0.12);
  --line-strong: rgba(21,20,15,0.24);
  --line-inverse: rgba(246,244,238,0.18);

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'Space Mono', monospace;

  --container: 1240px;
  --edge: clamp(24px, 5vw, 64px);

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }

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

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

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

.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display:flex;
  align-items:center;
  gap: 10px;
}
.eyebrow::before{
  content:'';
  width: 22px;
  height: 1px;
  background: var(--brass);
}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
/* paragraphs use natural left alignment (no forced justify); centered
   sections (e.g. .cta-band) still center their text via inheritance */

/* ==========================================================================
   Nav
   ========================================================================== */

.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  padding: 22px var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled{
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(246,244,238,0.86);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.site-nav.on-dark:not(.is-scrolled) .navlink{ color: var(--paper); }
.site-nav.on-dark:not(.is-scrolled) .navlink::after{ background: var(--brass-bright); }
.site-nav.on-dark:not(.is-scrolled) .brand-logo.logo-dark{ display:none; }
.site-nav.on-dark:not(.is-scrolled) .brand-logo.logo-light{ display:block; }
.site-nav.on-dark:not(.is-scrolled) .brand-sub{ color: var(--brass-bright); border-left-color: var(--line-inverse); }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:23px; width:auto; display:block; transition: opacity .3s var(--ease); }
.brand-logo.logo-light{ display:none; }
.brand-sub{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.footer-brand .brand-logo.logo-dark{ display:none; }
.footer-brand .brand-logo.logo-light{ display:block; }
.footer-brand .brand-sub{ color: var(--brass-bright); border-left-color: var(--line-inverse); }

.nav-links{
  display:flex;
  align-items:center;
  gap: 26px;
}
.navlink{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  position:relative;
  padding-bottom: 4px;
  transition: color .3s var(--ease);
}
.navlink::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background: var(--brass);
  transition: width .3s var(--ease);
}
.navlink:hover::after, .navlink.active::after{ width:100%; }
.navlink.active{ color: var(--brass); }

.nav-cta{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid currentColor;
  border-radius: 100px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.site-nav:not(.on-dark) .nav-cta,
.site-nav.is-scrolled .nav-cta{ color: var(--ink); }
.site-nav.on-dark:not(.is-scrolled) .nav-cta{ color: var(--paper); }
.nav-cta:hover{ background: var(--ink); color: var(--paper) !important; }
.site-nav.on-dark:not(.is-scrolled) .nav-cta:hover{ background: var(--paper); color: var(--ink) !important; }

.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:1px; background: var(--ink); margin:5px 0; transition: all .3s var(--ease); }
.site-nav.on-dark:not(.is-scrolled) .nav-toggle span{ background: var(--paper); }

@media (max-width: 1040px){
  .nav-links{
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links .navlink, .nav-links .nav-cta{ color: var(--paper) !important; font-size: 16px; }
  .nav-toggle{ display:block; z-index: 101; }
  .nav-links.open ~ .nav-toggle span{ background: var(--paper) !important; }
  .nav-links.open ~ .nav-toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-links.open ~ .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-links.open ~ .nav-toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 100px;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary{ background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn-primary:hover{ background: var(--brass); border-color: var(--brass); color: var(--ink); transform: translateY(-2px); }
.btn-ghost{ border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }
.btn-ghost.on-dark{ border-color: var(--line-inverse); color: var(--paper); }
.btn-ghost.on-dark:hover{ border-color: var(--paper); }
.btn svg{ width:14px; height:14px; transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

/* ==========================================================================
   Focus-pull reveal (signature scroll interaction)
   ========================================================================== */

.focus-reveal{
  opacity: 0;
  filter: blur(14px) saturate(0.4) brightness(1.08);
  transform: scale(1.035);
  transition: opacity 1.1s var(--ease), filter 1.1s var(--ease), transform 1.3s var(--ease);
}
.focus-reveal.in-focus{
  opacity: 1;
  filter: blur(0) saturate(1) brightness(1);
  transform: scale(1);
}
.rise{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.rise.in-focus{ opacity:1; transform: translateY(0); }
.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow:hidden;
  background: var(--ink);
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
  background: url('images/hero-main.jpg') center/cover no-repeat;
}
.hero-media img{
  width:100%; height:100%; object-fit: cover;
  transform: scale(1.08);
  animation: heroSettle 2.4s var(--ease) forwards;
}
@keyframes heroSettle{ to{ transform: scale(1); } }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(21,20,15,0.35) 0%, rgba(21,20,15,0.35) 40%, rgba(21,20,15,0.88) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  padding: 0 var(--edge) 56px;
  color: var(--paper);
}
.hero-eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-bright);
  display:flex; align-items:center; gap:10px;
  margin-bottom: 26px;
  opacity:0; animation: fadeUp .9s var(--ease) .5s forwards;
}
.hero-eyebrow::before{ content:''; width:22px; height:1px; background: var(--brass-bright); }
.hero h1{
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.02;
  color: var(--paper);
  max-width: 15ch;
  font-weight: 500;
  opacity:0; animation: fadeUp 1s var(--ease) .68s forwards;
}
.hero h1 em{ font-style: italic; font-weight: 300; color: var(--brass-bright); }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(22px);} to{ opacity:1; transform: translateY(0);} }

.hero-foot{
  margin-top: 40px;
  display:flex;
  flex-wrap: wrap;
  align-items:flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line-inverse);
  opacity:0; animation: fadeUp 1s var(--ease) .95s forwards;
}
.hero-sub{ max-width: 40ch; color: rgba(246,244,238,0.72); font-size: 15px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-exif{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(246,244,238,0.55);
  display:flex; gap: 18px; flex-wrap:wrap;
}

.scroll-cue{
  position:absolute; right: var(--edge); bottom: 24px; z-index:1;
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform:uppercase;
  color: rgba(246,244,238,0.55);
  display:flex; align-items:center; gap:10px;
  opacity:0; animation: fadeUp 1s var(--ease) 1.2s forwards;
}
.scroll-cue::after{ content:''; width:1px; height:36px; background: rgba(246,244,238,0.4); animation: cueMove 2.2s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{ transform: scaleY(1); opacity:.5 } 50%{ transform: scaleY(0.5); opacity:1 } }

@media (max-width: 700px){
  .scroll-cue{ display:none; }
}

/* ==========================================================================
   Stat strip
   ========================================================================== */

.stat-strip{
  background: var(--ink);
  color: var(--paper);
  padding: 30px var(--edge);
}
.stat-strip .wrap{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat{ text-align:left; }
.stat-num{ font-family: var(--mono); font-size: clamp(22px,3vw,32px); color: var(--brass-bright); }
.stat-label{ font-family: var(--mono); font-size: 11px; letter-spacing:0.06em; text-transform:uppercase; color: rgba(246,244,238,0.6); margin-top: 4px; }
@media (max-width: 760px){
  .stat-strip .wrap{ grid-template-columns: repeat(2,1fr); }
}

/* ==========================================================================
   Section basics
   ========================================================================== */

section{ padding: 120px var(--edge); }
.section-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.section-head .eyebrow{
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 12px;
}
.section-head .eyebrow::before{ display:none; }
.section-head h2{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  max-width: none;
  margin-top: 0;
}
.section-head p{ max-width: 34ch; color: var(--stone); font-size: 15px; }

/* ==========================================================================
   Services
   ========================================================================== */

.services{ background: var(--paper); }
.service-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-card{
  background: var(--paper);
  padding: 40px 32px;
  position:relative;
  overflow:hidden;
}
.service-card .frame{
  aspect-ratio: 4/3;
  overflow:hidden;
  margin-bottom: 28px;
  border-radius: 2px;
  position: relative;
}
.service-card .frame img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.service-card:hover .frame img{ transform: scale(1.06); }
.service-card .frame.frame-plan{ background: #f4f2ec; }
.service-card .frame.frame-plan img{ object-fit: contain; padding: 14px; box-sizing: border-box; }
.service-card .num{ font-family: var(--mono); font-size:12px; color: var(--brass); margin-bottom: 14px; display:block; }
.service-card h3{ font-size: 22px; margin-bottom: 10px; }
.service-card p{ color: var(--stone); font-size: 14.5px; line-height:1.6; margin:0; }

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

/* ==========================================================================
   Portfolio grid
   ========================================================================== */

.portfolio-grid{
  columns: 4 220px;
  column-gap: 14px;
}
.pf-item{
  position:relative;
  overflow:hidden;
  border-radius: 4px;
  cursor:pointer;
  display:block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 14px;
}
.pf-item img, .pf-item video{
  width:100%; height:auto; display:block;
  transition: transform 1s var(--ease);
}
.pf-item:hover img, .pf-item:hover video{ transform: scale(1.05); }
.pf-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(21,20,15,0.82), transparent);
  color: var(--paper);
  opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.pf-item:hover .pf-caption{ opacity:1; transform: translateY(0); }
.pf-caption .tag{ font-family: var(--mono); font-size: 10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--brass-bright); }
.pf-caption .loc{ font-size: 13px; margin-top:2px; }

@media (max-width: 900px){
  .portfolio-grid{ columns: 3 180px; column-gap: 10px; }
  .pf-item{ margin-bottom: 10px; border-radius: 3px; }
}
@media (max-width: 600px){
  .portfolio-grid{ columns: 2; column-gap: 8px; }
  .pf-item{ margin-bottom: 8px; }
}

/* ==========================================================================
   Before / After: aperture wipe
   ========================================================================== */

.ba-wrap{
  position: relative;
  aspect-ratio: 16/10;
  overflow:hidden;
  border-radius: 3px;
  user-select:none;
  background: var(--ink);
}
.ba-wrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-after{ z-index:1; }
.ba-before{ z-index:2; clip-path: inset(0 50% 0 0); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:0; z-index:3;
  transform: translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  cursor: ew-resize;
}
.ba-handle::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:1px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.ba-grip{
  width: 46px; height:46px; border-radius:50%;
  background: var(--paper);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.ba-grip svg{ width:20px; height:20px; stroke: var(--ink); }
.ba-tag{
  position:absolute; top:16px; z-index:4;
  font-family: var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  padding: 6px 12px; border-radius:100px; background: rgba(21,20,15,0.7); color: var(--paper); backdrop-filter: blur(4px);
}
.ba-tag.before{ left:16px; }
.ba-tag.after{ right:16px; }
.ba-hint{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding: 8px 16px; border-radius:100px; background: rgba(21,20,15,0.72); color: var(--paper);
  backdrop-filter: blur(4px); pointer-events:none; animation: baHintPulse 2.4s ease-in-out infinite;
}
.ba-hint svg{ width:13px; height:13px; stroke:var(--paper); fill:none; stroke-width:2.4; }
@keyframes baHintPulse{
  0%, 100%{ transform: translateX(-50%) scale(1); opacity:1; }
  50%{ transform: translateX(-50%) scale(1.04); opacity:0.85; }
}
@media (prefers-reduced-motion: reduce){ .ba-hint{ animation:none; } }

/* ==========================================================================
   Pricing calculator
   ========================================================================== */

.calc{
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  padding: clamp(28px,4vw,56px);
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
}
.calc-step{ margin-bottom: 40px; }
.calc-step:last-child{ margin-bottom: 0; }
.calc-step-label{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--brass-bright); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.calc-step-label .n{
  width:20px; height:20px; border-radius:50%; border:1px solid var(--brass-bright);
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.calc-options{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
.calc-card{
  border:1px solid var(--line-inverse); border-radius:4px; padding:16px 18px;
  transition: all .25s var(--ease); position:relative;
}
.calc-card:hover{ border-color: rgba(246,244,238,0.4); }
.calc-card.selected{ border-color: var(--brass-bright); background: rgba(212,173,90,0.08); }
.calc-card input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.calc-card-title{ font-size:14.5px; font-weight:600; }
.calc-card-desc{ font-size:12.5px; color: rgba(246,244,238,0.55); margin-top:4px; line-height:1.5; }
.calc-card-price{ font-family: var(--mono); font-size:12px; color: var(--brass-bright); margin-top:10px; }
.calc-addons{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.calc-addon{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line-inverse); border-radius:4px; padding:13px 16px;
  font-size: 13.5px; transition: all .25s var(--ease); cursor:pointer;
}
.calc-addon:hover{ border-color: rgba(246,244,238,0.4); }
.calc-addon.selected{ border-color: var(--brass-bright); background: rgba(212,173,90,0.08); }
.calc-addon input{ accent-color: var(--brass-bright); }
.calc-addon-price{ font-family: var(--mono); color: rgba(246,244,238,0.55); font-size:12px; }

.calc-summary{
  background: rgba(246,244,238,0.04);
  border: 1px solid var(--line-inverse);
  border-radius: 6px;
  padding: 28px;
  align-self: flex-start;
  position: sticky;
  top: 100px;
}
.calc-summary-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: rgba(246,244,238,0.5); }
.calc-summary-list{ margin: 20px 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.calc-summary-list li{ display:flex; justify-content:space-between; font-size:13px; color: rgba(246,244,238,0.75); border-bottom: 1px dashed var(--line-inverse); padding-bottom:10px; }
.calc-summary-list li span:last-child{ font-family: var(--mono); }
.calc-total{ display:flex; align-items:baseline; justify-content:space-between; margin-top: 24px; padding-top:20px; border-top:1px solid var(--line-inverse); }
.calc-total-label{ font-size:14px; }
.calc-total-num{ font-family: var(--mono); font-size: 34px; color: var(--brass-bright); transition: transform .2s var(--ease); }
.calc-total-num.tick{ transform: scale(1.08); }
.calc-note{ font-size:12px; color: rgba(246,244,238,0.45); margin-top:14px; line-height:1.6; }
.calc-summary .btn{ width:100%; justify-content:center; margin-top:20px; }

@media (max-width: 940px){
  .calc{ grid-template-columns: 1fr; }
  .calc-summary{ position: static; }
  .calc-options, .calc-addons{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Cross-sell band
   ========================================================================== */

.crosssell{
  background: var(--paper-dim);
  padding: 64px var(--edge);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.crosssell .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.crosssell-text{ max-width: 46ch; }
.crosssell-text .eyebrow{ margin-bottom:12px; }
.crosssell-text h3{ font-size: 24px; margin-bottom: 8px; }
.crosssell-text p{ color: var(--stone); font-size:14.5px; margin:0; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band{
  background: var(--ink);
  color: var(--paper);
  text-align:center;
  padding: 130px var(--edge);
  position: relative;
  overflow:hidden;
}
.cta-band h2{ color: var(--paper); font-size: clamp(32px,5vw,64px); max-width: 18ch; margin: 0 auto 30px; }
.cta-band .eyebrow{ justify-content:center; margin-bottom:20px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer{
  background: var(--ink);
  color: rgba(246,244,238,0.6);
  padding: 60px var(--edge) 32px;
  border-top: 1px solid var(--line-inverse);
}
.footer-top{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding-bottom: 40px; margin-bottom: 30px; border-bottom: 1px solid var(--line-inverse);
}
.footer-brand .brand-word{ color: var(--paper); }
.footer-brand .brand-mark svg{ stroke: var(--paper); }
.footer-brand p{ max-width: 34ch; font-size:13.5px; margin-top:14px; line-height:1.6; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4{ font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: rgba(246,244,238,0.4); margin-bottom:16px; font-weight:400; }
.footer-col a{ display:block; font-size:14px; margin-bottom:10px; color: rgba(246,244,238,0.75); transition: color .25s; }
.footer-col a:hover{ color: var(--brass-bright); }
.footer-bottom{ display:flex; justify-content:space-between; font-size:12px; flex-wrap:wrap; gap:10px; color: rgba(246,244,238,0.4); font-family: var(--mono); }

/* ==========================================================================
   Inner page hero (non-home)
   ========================================================================== */

.page-hero{
  position: relative;
  padding: 176px var(--edge) 96px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.page-hero .eyebrow{ margin-bottom: 20px; }
.page-hero h1{ color: var(--paper); font-size: clamp(36px,5.5vw,68px); max-width: 18ch; }
.page-hero p{ color: rgba(246,244,238,0.65); max-width: 50ch; margin-top:20px; font-size:16px; }
.page-hero-content{ position: relative; z-index: 2; }

/* Timelapse-style rotating background */
.hero-slideshow{ position:absolute; inset:0; z-index:0; }
.hero-slideshow .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  animation: slideCycle 25s infinite;
}
.hero-slideshow .slide:nth-child(1){ animation-delay: 0s; }
.hero-slideshow .slide:nth-child(2){ animation-delay: 5s; }
.hero-slideshow .slide:nth-child(3){ animation-delay: 10s; }
.hero-slideshow .slide:nth-child(4){ animation-delay: 15s; }
.hero-slideshow .slide:nth-child(5){ animation-delay: 20s; }
@keyframes slideCycle{
  0%{ opacity:0; transform: scale(1.12); }
  4%{ opacity:1; }
  18%{ opacity:1; transform: scale(1.02); }
  22%{ opacity:0; transform: scale(1.0); }
  100%{ opacity:0; }
}
.hero-slideshow::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(21,20,15,0.72) 0%, rgba(21,20,15,0.55) 45%, rgba(21,20,15,0.88) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-slideshow .slide{ animation: none; opacity:0; }
  .hero-slideshow .slide:first-child{ opacity:1; }
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-grid{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items:center;
}
.about-grid img{ border-radius:3px; }
.about-media{ position:relative; }
.about-media img{ width:100%; display:block; }
.about-media .overlap{
  position:absolute; width:58%; bottom:-32px; right:-32px; border:6px solid var(--paper);
  box-shadow: 0 20px 40px rgba(21,20,15,0.18);
}
@media (max-width: 640px){
  .about-media{ margin-bottom:40px; }
  .about-media .overlap{ width:52%; bottom:-20px; right:-16px; border-width:4px; }
}
.about-copy p{ color: var(--stone); font-size: 16px; line-height:1.75; margin-bottom:18px; }
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:80px; }
.value-card{ background:var(--paper); padding:36px 30px; }
.value-card .n{ font-family:var(--mono); color:var(--brass); font-size:12px; }
.value-card h3{ font-size:19px; margin:14px 0 10px; }
.value-card p{ color:var(--stone); font-size:14px; margin:0; line-height:1.6; }

@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Featured case study: masonry gallery
   ========================================================================== */

.case-gallery{
  columns: 3;
  column-gap: 16px;
}
.case-gallery .gallery-item{
  break-inside: avoid;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  background: var(--paper-dim);
}
.case-gallery .gallery-item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .6s var(--ease);
}
.case-gallery .gallery-item:hover img{ transform: scale(1.045); }
@media (max-width: 900px){ .case-gallery{ columns: 2; } }
@media (max-width: 560px){ .case-gallery{ columns: 1; } }
.case-gallery-more{ columns: 3; column-gap: 16px; margin-top:16px; }
.case-gallery-more[hidden]{ display:none; }
.case-gallery-more .gallery-item{ break-inside: avoid; margin-bottom: 16px; overflow: hidden; border-radius: 10px; cursor: pointer; position: relative; background: var(--paper-dim); }
.case-gallery-more .gallery-item img{ width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.case-gallery-more .gallery-item:hover img{ transform: scale(1.045); }
@media (max-width: 900px){ .case-gallery-more{ columns: 2; } }
@media (max-width: 560px){ .case-gallery-more{ columns: 1; } }
.case-gallery-cta{ text-align:center; margin-top:36px; }

/* ==========================================================================
   Video production page
   ========================================================================== */

.video-embed{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background: var(--ink); box-shadow: 0 20px 50px rgba(21,20,15,0.18);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.case-study{ margin-bottom: 70px; }
.case-study:last-child{ margin-bottom:0; }
.case-grid{ display:grid; grid-template-columns: 45% 1fr; gap: 42px; align-items:center; }
.case-grid .video-embed{ width:100%; }
.case-study h3{ font-size:24px; margin-bottom:14px; }
.case-study p{ color:var(--stone); font-size:15.5px; line-height:1.75; margin-bottom:22px; }
.case-study .coverage-list span{ border-color: var(--line-strong); }
.case-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; }

@media (max-width: 900px){
  .case-grid{ grid-template-columns: 42% 1fr; gap: 26px; }
}
@media (max-width: 700px){
  .case-grid{ grid-template-columns: 1fr; gap: 22px; }
}

.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; }
.process-step{ background:var(--paper); padding:32px 26px; }
.process-step .n{
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:14px; margin-bottom:18px;
}
.process-step h3{ font-size:17px; margin-bottom:8px; }
.process-step p{ color:var(--stone); font-size:13.5px; margin:0; line-height:1.6; }
@media (max-width: 860px){
  .process-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .process-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items:start; }
.contact-info{ background: var(--paper-dim); border-radius:10px; padding: 30px 28px; border:1px solid var(--line); }
.contact-info h3{ font-size:18px; margin-bottom:18px; font-family:var(--display); }
.contact-line{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-bottom:1px dashed var(--line); font-size:14px; color: var(--ink-soft); }
.contact-line:last-of-type{ border-bottom:none; }
.contact-line span:first-child{ color: var(--stone); font-family: var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }

.svc-hint{ font-size:12.5px; color: var(--stone); line-height:1.5; margin: -4px 0 12px; }

@media (max-width: 860px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Trusted By: animated logo marquee (homepage)
   ========================================================================== */

.marquee-trusted{ background: var(--ink); padding: 64px 0; overflow:hidden; }
.marquee-trusted .section-head{ padding: 0 var(--edge); max-width: var(--container); margin: 0 auto 34px; }
.marquee-trusted .eyebrow{ color: var(--brass-bright); }
.marquee-trusted .eyebrow::before{ background: var(--brass-bright); }
.marquee-trusted h2{ color: var(--paper); }
.marquee-trusted .section-head p{ color: rgba(246,244,238,0.5); }

.marquee-track-wrap{
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{
  display:flex;
  align-items:center;
  gap: 22px;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee-track:hover{ animation-play-state: paused; }
.marquee-logo{
  height: 86px;
  width: 168px;
  background: var(--paper);
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding: 14px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.marquee-logo img{
  max-height: 100%;
  max-width: 100%;
  width:auto;
  object-fit: contain;
}
.marquee-logo:hover{ transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 28px rgba(0,0,0,0.24); }

@keyframes marqueeScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}
@media (max-width: 640px){
  .marquee-logo{ height: 68px; width: 130px; padding:10px 14px; }
  .marquee-track{ gap: 20px; }
}

/* ==========================================================================
   Trusted By: logo strip
   ========================================================================== */

.trusted{ background: var(--paper-dim); }
.logo-strip{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 20px;
}
.logo-cell{
  background: var(--paper);
  aspect-ratio: 3/2;
  display:flex; align-items:center; justify-content:center;
  padding: 28px 24px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.logo-cell img{
  max-width:100%; max-height:56px; width:auto; height:auto;
  object-fit:contain;
  filter: grayscale(1) opacity(0.62);
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.logo-cell:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px rgba(21,20,15,0.08); z-index: 2; }
.logo-cell:hover img{ filter: grayscale(0) opacity(1); transform: scale(1.05); }
@media (max-width: 900px){
  .logo-strip{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .logo-strip{ grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Book a Shoot: booking system
   ========================================================================== */

.svc-feature{
  position:relative; display:flex; align-items:center; gap:22px; cursor:pointer;
  border:1.5px solid var(--line-strong); border-radius:12px; background:var(--paper);
  padding:20px 22px; width:100%; text-align:left; font-family:inherit; font-size:inherit; color:inherit; appearance:none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.svc-feature:hover{ border-color: var(--brass); transform:translateY(-3px); box-shadow: 0 10px 24px rgba(21,20,15,0.10); }
.svc-feature.selected{ border-color: var(--brass); background: rgba(184,146,62,0.08); box-shadow: 0 0 0 3px rgba(184,146,62,0.14); }
.svc-feature-media{ width:84px; height:84px; border-radius:9px; overflow:hidden; flex-shrink:0; background:var(--paper-dim); }
.svc-feature-media img{ width:100%; height:100%; object-fit:cover; }
.svc-feature-body{ flex:1; min-width:0; }
.svc-feature-body h4{ font-size:16px; margin:0 0 4px; font-family:var(--display); }
.svc-feature-body p{ font-size:13px; color:var(--stone); margin:0; line-height:1.5; }
.svc-feature-tick{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.svc-feature-tick svg{ width:14px; height:14px; stroke:var(--paper); fill:none; stroke-width:3; opacity:0; }
.svc-feature.selected .svc-feature-tick{ background:var(--brass); border-color:var(--brass); }
.svc-feature.selected .svc-feature-tick svg{ opacity:1; }
.svc-perk{
  display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:12px 14px;
  background: rgba(184,146,62,0.07); border-radius:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.5;
}
.svc-perk svg{ width:15px; height:15px; stroke:var(--brass); fill:none; stroke-width:2.4; flex-shrink:0; margin-top:1px; }

.svc-grid-cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
.svc-card{
  position:relative; display:block; cursor:pointer; border:1.5px solid var(--line-strong); border-radius:10px;
  overflow:hidden; background:var(--paper); width:100%; text-align:left; padding:0; font-family:inherit; appearance:none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.svc-card:hover{ border-color: var(--brass); transform:translateY(-3px); box-shadow: 0 10px 24px rgba(21,20,15,0.10); }
.svc-card.selected{ border-color: var(--brass); box-shadow: 0 0 0 3px rgba(184,146,62,0.14); }
.svc-card.selected .svc-card-body{ background: rgba(184,146,62,0.08); }
.svc-card-media{ aspect-ratio: 16/10; overflow:hidden; background:var(--paper-dim); position:relative; }
.svc-card-media .click-catch{ position:absolute; inset:0; z-index:2; }
.svc-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-card-media.plan{ background:#f4f2ec; }
.svc-card-media.plan img{ object-fit:contain; padding:10px; box-sizing:border-box; }
.svc-card-body{ padding:13px 14px 15px; transition: background .2s var(--ease); }
.svc-card-body h4{ font-size:13.5px; margin:0 0 4px; font-family:var(--display); }
.svc-card-body p{ font-size:12px; color:var(--stone); margin:0; line-height:1.45; }
.svc-card-tick{
  position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--line-strong); z-index:3;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.svc-card-tick svg{ width:13px; height:13px; stroke:var(--paper); fill:none; stroke-width:3; opacity:0; }
.svc-card.selected .svc-card-tick{ background:var(--brass); border-color:var(--brass); }
.svc-card.selected .svc-card-tick svg{ opacity:1; }

/* Preview badges */
.media-badge{
  position:absolute; z-index:2; display:flex; align-items:center; gap:5px;
  background:rgba(21,20,15,0.65); color:var(--paper); font-family:var(--mono); font-size:10px;
  letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:100px; pointer-events:none;
}
.media-badge.play{ bottom:10px; left:10px; }
.media-badge.badge-360{ top:10px; left:10px; }
.play-dot{ width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.play-dot svg{ width:8px; height:8px; fill:var(--ink); margin-left:1px; }

/* Vertical "reel" preview */
.svc-card-media.reel-wrap{ display:flex; align-items:center; justify-content:center; background:var(--paper-dim); }
.svc-card-media.reel-wrap .reel-phone{
  position:relative; width:56%; height:88%; border-radius:14px; overflow:hidden;
  border:3px solid var(--ink); box-shadow:0 6px 16px rgba(0,0,0,0.2);
}
.svc-card-media.reel-wrap .reel-phone .yt-bg{ position:absolute; inset:0; }
.svc-card-media.reel-wrap .reel-phone iframe{ width:100% !important; height:177.78% !important; min-height:100%; transform: translate(-50%,-50%); }

/* Before / after split preview */
.svc-card-media.split{ display:flex; }
.svc-card-media.split .split-half{ position:relative; width:50%; height:100%; overflow:hidden; }
.svc-card-media.split .split-half img{ width:100%; height:100%; object-fit:cover; }
.svc-card-media.split .split-tag{
  position:absolute; bottom:6px; left:6px; z-index:2; background:rgba(21,20,15,0.65); color:var(--paper);
  font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:3px 7px; border-radius:100px;
}

/* Placeholder preview (Agent Introduction) */
.svc-card-media.placeholder{
  background: linear-gradient(150deg, var(--ink) 0%, #2c2a22 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:10px;
}
.svc-card-media.placeholder svg{ width:30px; height:30px; stroke:var(--brass-bright); fill:none; stroke-width:1.6; }
.svc-card-media.placeholder span{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:rgba(246,244,238,0.6); }

.svc-simple-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.svc-simple-row .qservice{ flex:1; min-width:160px; }

.qservice{
  display:flex; align-items:center; gap:12px; border:1.5px solid var(--line-strong); border-radius:6px;
  padding:13px 15px; cursor:pointer; font-size:13.5px; color: var(--ink-soft); background: var(--paper);
  width:100%; text-align:left; font-family:inherit; appearance:none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.qservice:hover{ border-color: var(--brass); transform:translateY(-2px); box-shadow: 0 8px 18px rgba(21,20,15,0.08); }
.qservice .qtick{
  width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.qservice .qtick svg{ width:11px; height:11px; stroke:var(--paper); fill:none; stroke-width:3; opacity:0; }
.qservice.selected{ border-color: var(--brass); background: rgba(184,146,62,0.08); color: var(--ink); font-weight:600; }
.qservice.selected .qtick{ background:var(--brass); border-color:var(--brass); }
.qservice.selected .qtick svg{ opacity:1; }

.svc-simple-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

.booking-summary-list{ list-style:none; margin:0; padding:0; }
.booking-summary-list li{
  display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line);
  font-size:13px; color:var(--ink-soft);
}
.booking-summary-list li:last-child{ border-bottom:none; }
.booking-summary-list .label{ color:var(--stone); font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.booking-summary-list .val{ text-align:right; font-weight:600; color:var(--ink); }
.booking-summary-services{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
.booking-summary-services span{ display:block; }
.booking-summary-services .empty{ color:var(--stone); font-style:italic; }

/* Success state */
.booking-success{ display:none; text-align:center; padding:70px 20px; max-width:520px; margin:0 auto; }
.booking-success.show{ display:block; }
.booking-success .tick{
  width:64px; height:64px; border-radius:50%; background:var(--brass); display:flex; align-items:center; justify-content:center;
  margin:0 auto 24px;
}
.booking-success .tick svg{ width:30px; height:30px; stroke:var(--paper); fill:none; stroke-width:3; }
.booking-success h2{ font-size:clamp(24px,3vw,32px); margin-bottom:14px; }
.booking-success p{ color:var(--stone); font-size:15px; line-height:1.65; margin-bottom:8px; }
.booking-success .response-time{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--brass); margin-bottom:30px; display:block; }
.booking-success .success-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width: 860px){
  .svc-grid-cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .svc-grid-cards, .svc-simple-grid{ grid-template-columns: 1fr; }
  .svc-feature{ flex-direction:column; align-items:flex-start; text-align:left; }
  .svc-feature-media{ width:100%; height:150px; }
  .svc-simple-row{ flex-direction:column; }
  .svc-simple-row .qservice{ min-width:0; }
}

/* ==========================================================================
   Quote / enquiry page (light theme)
   ========================================================================== */

.quote-hero{
  background: linear-gradient(180deg, var(--paper-dim) 0%, var(--paper) 100%);
  color: var(--ink);
  padding: 150px var(--edge) 50px;
  text-align:center;
}
.quote-hero .eyebrow{ justify-content:center; margin-bottom:18px; }
.quote-hero h1{ color: var(--ink); font-size: clamp(30px,4.4vw,50px); max-width: 22ch; margin: 0 auto 16px; }
.quote-hero p{ color: var(--stone); max-width: 50ch; margin: 0 auto 26px; font-size:15.5px; line-height:1.65; }
.quote-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.quote-trust span{
  display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  text-transform:uppercase; color: var(--ink-soft); background: var(--paper); border:1px solid var(--line-strong);
  padding:8px 14px; border-radius:100px;
}
.quote-trust svg{ width:13px; height:13px; stroke: var(--brass); fill:none; stroke-width:2.4; flex-shrink:0; }

.quote-section{ background: var(--paper); padding: 50px var(--edge) 90px; }
.quote-layout{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 32px; max-width: var(--container); margin: 0 auto; align-items:start; }

.quote-block{
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(21,20,15,0.04);
  border-radius: 10px;
  padding: 32px 30px;
  margin-bottom: 26px;
}
.quote-block-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.quote-block-head .n{
  width:30px; height:30px; border-radius:50%; background: var(--ink); color: var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:700; flex-shrink:0;
}
.quote-block-head h3{ color: var(--ink); font-size:16px; margin:0; letter-spacing:0.03em; text-transform:uppercase; font-family:var(--mono); font-weight:700; }

.qfield{ margin-bottom:18px; }
.qfield label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--stone); margin-bottom:8px; }
.qfield input, .qfield select, .qfield textarea{
  width:100%; background: var(--paper); border:1.5px solid var(--line-strong); border-radius:6px;
  padding: 13px 14px; font-family: var(--body); font-size:16px; color: var(--ink);
}
.qfield input::placeholder, .qfield textarea::placeholder{ color: var(--stone); opacity:0.75; }
.qfield input:focus, .qfield select:focus, .qfield textarea:focus{ outline:none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(184,146,62,0.14); }
.qfield textarea{ resize:vertical; min-height:90px; }
.qrow{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.qfield.status{ font-size:12px; font-family:var(--mono); color: var(--brass); min-height:14px; margin-top:-10px; margin-bottom:16px; }

.qtiles{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.qtile{
  position:relative; border:1.5px solid var(--line-strong); border-radius:6px; padding:16px 10px;
  text-align:center; cursor:pointer; color: var(--ink-soft); font-size:13px; background: var(--paper);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.qtile input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.qtile:hover{ border-color: var(--brass); }
.qtile.selected{ border-color: var(--brass); background: rgba(184,146,62,0.08); color: var(--ink); font-weight:600; }
.qtile svg{ width:20px; height:20px; margin:0 auto 8px; display:block; stroke: currentColor; fill:none; stroke-width:1.6; }

.qservices{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.qservice{
  display:flex; align-items:center; gap:12px; border:1.5px solid var(--line-strong); border-radius:6px;
  padding:13px 15px; cursor:pointer; font-size:13.5px; color: var(--ink-soft); background: var(--paper);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.qservice:hover{ border-color: var(--brass); }
.qservice input{ accent-color: var(--brass); width:17px; height:17px; flex-shrink:0; }
.qservice.selected{ border-color: var(--brass); background: rgba(184,146,62,0.08); color: var(--ink); font-weight:600; }
@media (max-width: 560px){ .qservices, .qtiles{ grid-template-columns: 1fr 1fr; } }

.address-autocomplete{ position:relative; }
.address-search-wrap{ position:relative; }
.address-search-wrap .search-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--stone); fill:none; stroke-width:2; pointer-events:none;
}
.address-search-wrap input{ padding-left:40px; }
.address-hint{ font-size:12px; color:var(--stone); margin:8px 2px 0; line-height:1.5; }
.address-hint .link-btn{ color:var(--brass); text-decoration:underline; background:none; border:none; padding:0; font:inherit; cursor:pointer; }
.address-hint.error{ color:#a3453b; }
.address-hint.success{ color:#3f7a4f; }

.postcode-row{ display:flex; gap:8px; position:relative; }
.postcode-row input{ flex:1; }
.address-suggestions{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:var(--paper); border:1.5px solid var(--line-strong); border-radius:8px;
  box-shadow: 0 12px 28px rgba(21,20,15,0.12);
  max-height:260px; overflow-y:auto; display:none;
}
.address-suggestions.open{ display:block; }
.address-suggestions button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:12px 14px; font-family:var(--body); font-size:13.5px; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.address-suggestions button:last-child{ border-bottom:none; }
.address-suggestions button:hover,
.address-suggestions button:focus-visible,
.address-suggestions button.active{ background: rgba(184,146,62,0.1); color:var(--ink); outline:none; }
.address-suggestions .as-empty{ padding:12px 14px; font-size:13px; color:var(--stone); }
.address-suggestions .as-loading{ padding:12px 14px; font-size:13px; color:var(--stone); }
.btn-lookup{
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase;
  padding:0 20px; border-radius:6px; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; white-space:nowrap; transition: background .2s var(--ease), border-color .2s var(--ease);
  display:flex; align-items:center; gap:7px; flex-shrink:0;
}
.btn-lookup svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.btn-lookup:hover{ background:var(--brass); border-color:var(--brass); }
.btn-lookup:disabled{ opacity:0.55; cursor:default; }
.qfield.status.success{ color:#3f7a4f; }
.qfield.status.error{ color:#a3453b; }
@media (max-width:480px){
  .postcode-row{ flex-direction:column; }
  .btn-lookup{ padding:13px; justify-content:center; }
}

.qservice-group{ margin-bottom:18px; border:none; padding:0; min-width:0; }
.qservice-group:last-child{ margin-bottom:0; }
.qservice-group-label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--brass); margin:0 0 10px; padding:0; width:100%; display:flex; align-items:center; gap:8px;
}
.qservice-group-label::after{ content:''; flex:1; height:1px; background:var(--line); }

/* Accessible keyboard focus */
.qtile input:focus-visible ~ *, .qtile:has(input:focus-visible){ outline: 2px solid var(--brass); outline-offset: 2px; }
.qservice input:focus-visible, .qtile input:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }
.faq-q:focus-visible, a:focus-visible, button:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }

/* Redesigned trust / info panel */
.info-card{
  background: var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:24px 22px; display:flex; align-items:flex-start; gap:14px; margin-bottom:10px;
}
.info-card:last-child{ margin-bottom:0; }
.info-card .ic{
  width:38px; height:38px; border-radius:8px; background: rgba(184,146,62,0.1); color: var(--brass);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-card .ic svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; }
.info-card .label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); margin-bottom:3px; }
.info-card .value{ font-size:15px; color:var(--ink); font-weight:600; }
.info-card .value a{ color:inherit; text-decoration:none; }
.info-card .value a:hover{ color: var(--brass); }
.info-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.info-grid .info-card{ margin-bottom:0; flex-direction:column; gap:10px; }
@media (max-width: 480px){ .info-grid{ grid-template-columns: 1fr; } }

.quote-summary{
  position: sticky; top: 100px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
}
.quote-summary h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--brass); margin:0 0 16px; }
.quote-summary-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.quote-summary-list li{ font-size:13.5px; color: var(--ink-soft); display:flex; gap:8px; line-height:1.4; }
.quote-summary-list li svg{ width:14px; height:14px; stroke: var(--brass); fill:none; stroke-width:2.4; flex-shrink:0; margin-top:2px; }
.quote-note{ font-size:12px; color: var(--stone); margin-top:14px; }

.quote-why{ display:grid; grid-template-columns: repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.quote-why-item{ background:var(--paper); padding:20px 14px; text-align:center; }
.quote-why-item svg{ width:22px; height:22px; stroke:var(--brass); fill:none; stroke-width:1.8; margin:0 auto 10px; display:block; }
.quote-why-item .gbp{ font-family:var(--display); font-size:22px; font-weight:600; color:var(--brass); line-height:22px; height:22px; margin:0 auto 10px; display:block; }
.quote-why-item span{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; display:block; }
@media (max-width: 860px){ .quote-why{ grid-template-columns: repeat(2,1fr); } }

.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:22px 4px; font-family:var(--display); font-size:17px; color:var(--ink); font-weight:500;
}
.faq-q svg{ width:18px; height:18px; stroke:var(--brass); fill:none; stroke-width:2; flex-shrink:0; transition: transform .3s var(--ease); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-item.open .faq-a{ max-height:320px; }
.faq-a p{ color: var(--stone); font-size:14.5px; line-height:1.65; margin:0 4px 22px; }

@media (max-width: 900px){
  .quote-layout{ grid-template-columns: 1fr; }
  .quote-summary{ position: static; }
  .qtiles{ grid-template-columns: repeat(2,1fr); }
  .quote-hero{ padding-top: 120px; }
}
@media (max-width: 640px){
  .quote-block{ padding:22px 18px; }
  .qrow{ grid-template-columns: 1fr; }
  .quote-why{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Greater Glasgow coverage map
   ========================================================================== */

.gg-map{ width:100%; height:auto; }
.gg-map .gg-ring{ fill:none; stroke: var(--line-strong); stroke-dasharray: 4 5; }
.gg-map .gg-hub{ fill: var(--ink); }
.gg-map .gg-hub-ring{ fill:none; stroke: var(--brass); stroke-width:1.5; opacity:0.5; animation: mapPulse 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.gg-map .gg-hub-label{ font-family: var(--mono); font-weight:700; font-size:15px; fill: var(--ink); letter-spacing:0.03em; }
.gg-map .town-dot{ fill: var(--brass); }
.gg-map .town-ring{ fill:none; stroke: var(--brass); stroke-width:1.2; opacity:0.45; animation: mapPulse 3s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.gg-map .town-label{ font-family: var(--mono); font-size:11px; letter-spacing:0.02em; fill: var(--ink-soft); }
.gg-map .gg-note{ font-family: var(--mono); font-size:10.5px; fill: var(--stone); letter-spacing:0.04em; }
@media (prefers-reduced-motion: reduce){
  .gg-map .town-ring, .gg-map .gg-hub-ring{ animation:none; opacity:0; }
}

/* ==========================================================================
   Misc
   ========================================================================== */

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */

.whatsapp-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 56px; height:56px;
  border-radius: 50%;
  background: #25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(21,20,15,0.28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-fab:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(21,20,15,0.34); }
.whatsapp-fab svg{ width:28px; height:28px; fill:#fff; }
@media (max-width:700px){
  .whatsapp-fab{ right:16px; bottom:16px; width:50px; height:50px; }
  .whatsapp-fab svg{ width:24px; height:24px; }
}

/* ==========================================================================
   Social row
   ========================================================================== */

.social-row{ display:flex; gap:12px; margin-top:18px; }
.social-row a{
  width:34px; height:34px; border-radius:50%;
  border: 1px solid var(--line-inverse);
  display:flex; align-items:center; justify-content:center;
  transition: all .25s var(--ease);
}
.social-row a:hover{ background: var(--brass-bright); border-color: var(--brass-bright); }
.social-row a svg{ width:15px; height:15px; fill: rgba(246,244,238,0.75); transition: fill .25s var(--ease); }
.social-row a:hover svg{ fill: var(--ink); }

/* ==========================================================================
   Video-in-card (services / portfolio)
   ========================================================================== */

.frame video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.video-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family: var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; background: rgba(21,20,15,0.65); color:var(--paper);
  display:flex; align-items:center; gap:6px; backdrop-filter: blur(3px);
}
.video-tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:#ff5b52; animation: recDot 1.6s infinite; }
@keyframes recDot{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }

/* ==========================================================================
   YouTube background embed (cover-fill)
   ========================================================================== */

.yt-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; background:var(--ink); }
.yt-bg iframe{ position:absolute; top:50%; left:50%; border:0; }
.yt-bg video{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-bg.cover-viewport iframe{
  width: 177.78vh;
  height: 100vh;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%,-50%);
}
.yt-bg.cover-box iframe{
  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%) scale(1.75);
}

/* ==========================================================================
   Scotland coverage map
   ========================================================================== */

.coverage{ background: var(--paper-dim); }
.coverage-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.coverage-copy p{ color: var(--stone); font-size:15.5px; line-height:1.75; margin-bottom:16px; }
.coverage-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.coverage-list span{
  font-family: var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  padding:7px 14px; border-radius:100px; border:1px solid var(--line-strong); color: var(--stone);
}
.scot-map{ width:100%; height:auto; }
.scot-map .landmass{ fill: var(--paper); stroke: var(--line-strong); stroke-width:1.5; }
.scot-map .city-dot{ fill: var(--brass); }
.scot-map .city-ring{ fill:none; stroke: var(--brass); stroke-width:1.5; opacity:0.5; animation: mapPulse 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.scot-map .city-label{ font-family: var(--mono); font-size:12px; letter-spacing:0.03em; fill: var(--ink); }
.scot-map .map-note{ font-family: var(--mono); font-size:10.5px; fill: var(--stone); letter-spacing:0.04em; }
@keyframes mapPulse{
  0%{ transform: scale(0.4); opacity:0.6; }
  80%{ transform: scale(2.6); opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .scot-map .city-ring{ animation:none; opacity:0; }
}
@media (max-width: 860px){
  .coverage-grid{ grid-template-columns: 1fr; gap:36px; }
}

.divider{ height:1px; background: var(--line); border:none; margin: 0; }
.pill{ display:inline-block; font-family:var(--mono); font-size:11px; padding:5px 12px; border-radius:100px; border:1px solid var(--line-strong); color: var(--stone); }

/* ==========================================================================
   Lightbox gallery viewer
   ========================================================================== */

.pf-item{ cursor: zoom-in; }
.pf-item video{ cursor: default; }

.lightbox{
  position: fixed; inset:0; z-index:300;
  background: rgba(21,20,15,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.lightbox.open{ opacity:1; visibility:visible; transition: opacity .35s var(--ease); }
.lightbox-stage{ position:relative; width:min(1100px,88vw); }
.lightbox-frame{ position:relative; width:100%; max-height:78vh; display:flex; align-items:center; justify-content:center; }
.lightbox-frame img{
  max-width:100%; max-height:78vh; display:block; margin:0 auto;
  border-radius:3px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  opacity:0; transform: scale(0.97); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.lightbox-frame img.show{ opacity:1; transform:scale(1); }
.lightbox-caption{ text-align:center; margin-top:18px; color: var(--paper); }
.lightbox-caption .tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--brass-bright); }
.lightbox-caption .loc{ font-size:14px; margin-top:4px; color: rgba(246,244,238,0.75); }

.lightbox-close{
  position:absolute; top:-56px; right:0; z-index:2;
  width:42px; height:42px; border-radius:50%;
  background: rgba(246,244,238,0.08);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s var(--ease);
}
.lightbox-close:hover{ background: rgba(246,244,238,0.16); }
.lightbox-close svg{ width:17px; height:17px; stroke: var(--paper); }

.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background: rgba(246,244,238,0.08);
  display:flex; align-items:center; justify-content:center;
  transition: background .25s var(--ease);
  z-index:2;
}
.lightbox-nav:hover{ background: rgba(246,244,238,0.18); }
.lightbox-nav.prev{ left:-64px; }
.lightbox-nav.next{ right:-64px; }
.lightbox-nav svg{ width:19px; height:19px; stroke: var(--paper); }

.lightbox-count{
  position:absolute; top:-56px; left:0; z-index:2;
  font-family: var(--mono); font-size:12px; letter-spacing:0.06em; color: rgba(246,244,238,0.5);
}

@media (max-width: 900px){
  .lightbox-nav.prev{ left:8px; }
  .lightbox-nav.next{ right:8px; }
  .lightbox-nav{ width:40px; height:40px; background: rgba(21,20,15,0.5); }
  .lightbox-close{ top:12px; right:12px; background: rgba(21,20,15,0.5); }
  .lightbox-count{ top:12px; left:12px; }
}

@media (max-width: 760px){
  section{ padding: 64px var(--edge); }
  .about-grid, .contact-grid{ gap: 40px; }
  .page-hero{ padding: 128px var(--edge) 64px; }
  .hero-inner{ padding-bottom: 40px; }
  .hero-foot{ margin-top:28px; padding-top:20px; }
  .stat-strip{ padding-top:40px !important; padding-bottom:40px !important; }
  .footer-top{ gap:32px; padding-bottom:32px; margin-bottom:24px; }
  .footer-cols{ gap:32px 40px; }
  .contact-info{ padding:28px; }
  .calc{ padding:24px; }
  .value-card, .service-card{ padding:28px 22px; }
  .cta-band{ padding: 90px var(--edge); }
  .book-controls, .coverage-list{ justify-content:center; }
}

@media (max-width: 480px){
  .hero-actions{ width:100%; }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center; }
  .cta-actions .btn{ flex:1 1 auto; justify-content:center; }
  .service-grid, .value-grid{ grid-template-columns: 1fr; }
  .footer-cols{ flex-direction:column; gap:24px; }
  .contact-line{ flex-direction:column; align-items:flex-start; gap:4px; }
  .portfolio-grid{ columns: 1; }
}