/* ============================================================
   INVENTIVE PERSPECTIVE — design tokens
   Monochrome blueprint: black, white, and every gray between.
   ============================================================ */
:root{
  --bg-deepest: #0A0A0A;         /* hero / footer / deepest black */
  --bg-dark: #131313;            /* primary dark background */
  --bg-panel: #1C1C1C;           /* card / panel surface on dark */
  --bg-panel-2: #242424;         /* lighter panel variant */
  --line-bright: #D6D5D0;        /* linework on dark (blueprint lines) */
  --line-dim: #6E6E6A;
  --paper: #DDDAD2;              /* mat / card surface (light neutral gray) */
  --paper-light: #EAE7DF;
  --ink-black: #17160F;          /* text on paper mats */
  --accent: #C9C6BB;             /* light stone accent — CTAs, highlights */
  --accent-dim: #8C897F;
  --text-light: #E4E2DA;         /* body text on dark backgrounds */
  --text-light-dim: rgba(228,226,218,0.66);
  --line-hairline: rgba(228,226,218,0.13);      /* hairlines on dark bg */

  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --maxw: 1240px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }

.section-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.section-title{
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-light);
}
.section-sub{
  max-width: 46ch;
  margin-top: 1.1rem;
  color: var(--text-light-dim);
  font-size: 1.02rem;
}
.section-sub.small{ font-size: 0.92rem; max-width: 56ch; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color .18s ease;
}
.btn-primary{
  background: var(--accent);
  color: var(--bg-deepest);
}
.btn-primary:hover{ background: var(--paper-light); transform: translateY(-1px); }
.btn-ghost{
  border-color: rgba(228,226,218,0.4);
  color: var(--text-light);
}
.btn-ghost:hover{ border-color: var(--text-light); background: rgba(228,226,218,0.08); }
.btn-outline{
  border-color: var(--text-light);
  color: var(--text-light);
}
.btn-outline:hover{ background: var(--text-light); color: var(--bg-deepest); }
.btn-wide{ width:100%; justify-content:center; }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position: sticky; top:0; z-index: 60;
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-hairline);
}
.nav-inner{
  max-width: var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.9rem 1.5rem;
}
.nav-mark{ display:flex; align-items:center; gap:0.7rem; }
.nav-mark-icon{ color: var(--accent); display:flex; }
.nav-mark-text{ font-family: 'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; font-size:1.55rem; letter-spacing:0.015em; color: var(--text-light); }
.nav-links{ display:flex; align-items:center; gap:2rem; font-family: var(--font-mono); font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; }
.nav-links a{ opacity:0.75; transition: opacity .15s; color: var(--text-light); }
.nav-links a:hover{ opacity:1; }
.nav-cta{
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent) !important;
  opacity:1 !important;
}
.nav-cta:hover{ background: var(--accent); color: var(--bg-deepest) !important; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:22px; height:1.5px; background: var(--text-light); display:block; }
.nav-links-mobile{ display:none; flex-direction:column; padding: 0 1.5rem 1.2rem; font-family: var(--font-mono); font-size:0.9rem; gap:0.9rem; }
.nav-links-mobile a{ padding: 0.3rem 0; color: var(--text-light); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  background: var(--bg-deepest);
  color: var(--paper-light);
  min-height: 92vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 6rem 1.5rem 4rem;
  overflow:hidden;
}
.hero-photo{
  position:absolute; inset:0;
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center 35%;
  background-attachment: fixed;
  filter: grayscale(55%) contrast(1.05) brightness(0.55);
}
.hero-tint{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.72) 55%, rgba(10,10,10,0.92) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.25) 60%, rgba(10,10,10,0.1) 100%);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(214,213,208,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,213,208,0.10) 1px, transparent 1px);
  background-size: 42px 42px;
}
.hero-blueprint{
  position:absolute;
  top:0; right:-4%;
  height:100%; width:64%;
  opacity:0.5;
  pointer-events:none;
}
.hero-blueprint svg{ width:100%; height:100%; }
.hero-inner{ position:relative; z-index:2; max-width: 760px; margin: 0 auto; width:100%; }
.hero-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.6rem;
}
.hero-title{
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--paper-light);
}
.hero-sub{
  margin-top: 1.8rem;
  max-width: 52ch;
  font-size: 1.08rem;
  color: rgba(234,231,223,0.82);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top: 2.4rem; }
.hero-scroll{
  position:absolute; z-index:2; bottom: 2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--line-dim);
}
.hero-scroll-line{ width:1px; height:34px; background: linear-gradient(var(--line-dim), transparent); }

/* ============================================================
   INTRO STRIP
   ============================================================ */
.intro-strip{
  background: var(--bg-panel);
  border-top: 1px solid var(--line-hairline);
  border-bottom: 1px solid var(--line-hairline);
}
.intro-inner{
  max-width: var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 2rem 1.5rem;
}
.intro-item{
  display:flex; flex-direction:column; gap:0.35rem;
  padding: 0 1.2rem;
  border-left: 1px solid var(--line-hairline);
  text-align:center;
}
.intro-item:first-child{ border-left:none; }
.intro-num{ font-family: var(--font-display); font-size:2rem; color: var(--paper-light); font-weight:500; }
.intro-label{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--line-dim); }

.atlas-controls{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  margin-bottom: 3rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-hairline);
}
.atlas-filters{ display:flex; gap:0.7rem; flex-wrap:wrap; }
.filter-btn{
  font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  color: var(--text-light-dim);
  transition: all .15s;
}
.filter-btn:hover{ border-color: var(--accent); color: var(--text-light); }
.filter-btn.is-active{ background: var(--accent); border-color: var(--accent); color: var(--bg-deepest); }

.view-toggle{
  display:flex; gap:2px;
  background: var(--bg-panel);
  border: 1px solid var(--line-hairline);
  border-radius: 999px;
  padding: 3px;
}
.view-btn{
  display:flex; align-items:center; gap:0.4rem;
  font-family: var(--font-mono); font-size:0.76rem; letter-spacing:0.04em; text-transform:uppercase;
  padding: 0.5rem 1rem;
  background: transparent; border: none; border-radius: 999px;
  color: var(--text-light-dim);
  transition: all .15s;
}
.view-btn svg{ flex-shrink:0; }
.view-btn:hover{ color: var(--text-light); }
.view-btn.is-active{ background: var(--accent); color: var(--bg-deepest); }

/* ---------- Atlas map view ---------- */
.atlas-map{ display:flex; flex-direction:column; gap: 3rem; }
.map-panel{ }
.map-panel-head{ display:flex; align-items:baseline; gap:0.8rem; margin-bottom: 1.2rem; }
.map-panel-title{ font-family: var(--font-display); font-size:1.3rem; font-weight:600; color: var(--text-light); }
.map-panel-sub{ font-family: var(--font-mono); font-size:0.75rem; color: var(--text-light-dim); }
.map-chart{ width:100%; height:auto; max-height: 620px; background: var(--bg-panel); border: 1px solid var(--line-hairline); }
.map-bg{ fill: var(--bg-panel); }
.map-frame{ fill:none; stroke: var(--line-hairline); stroke-width:1; }
.map-grid-line{ stroke: var(--line-hairline); stroke-width:1; }
.map-land-shape{ fill: rgba(211,163,96,0.07); stroke: var(--accent); stroke-width:1.1; stroke-linejoin:round; }
.map-context-shape{ fill: none; stroke: var(--line-dim); stroke-width:0.75; stroke-linejoin:round; opacity:0.55; }
.map-country-label{
  font-family: var(--font-mono); font-size:11px; font-weight:500; letter-spacing:0.05em;
  fill: var(--accent); opacity:0.9; pointer-events:none;
}

/* ---------- Map tooltip ---------- */
.atlas-map{ position:relative; }
.map-tooltip{
  position:fixed; z-index:50;
  width:180px;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  box-shadow: 0 14px 30px rgba(0,0,0,0.5);
  opacity:0; transform: translateY(6px) scale(0.98);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}
.map-tooltip.is-visible{ opacity:1; transform: translateY(0) scale(1); }
.map-tooltip-img-wrap{ width:100%; aspect-ratio:4/3; overflow:hidden; background:#1a1712; }
.map-tooltip-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.map-tooltip-body{ padding:0.6rem 0.7rem; }
.map-tooltip-title{ font-family: var(--font-display); font-size:0.92rem; font-weight:600; color: var(--text-light); line-height:1.25; }
@media (max-width:720px){
  .map-tooltip{ display:none; }
}
.map-tick{ font-family: var(--font-mono); font-size:10px; fill: var(--text-light-dim); }
.map-pin{ cursor:pointer; touch-action: manipulation; }
.map-pin-touch{ fill: transparent !important; pointer-events: all; }
.map-pin-leader{ stroke: var(--line-dim); stroke-width:0.75; stroke-dasharray:2,2; }
.map-pin-halo{ fill: var(--accent); opacity:0; transition: opacity .15s; }
.map-pin:hover .map-pin-halo, .map-pin:focus-visible .map-pin-halo{ opacity:0.14; }
.map-pin-dot{ fill: var(--bg-deepest); stroke: var(--accent); stroke-width:1.6; transition: fill .15s; }
.map-pin:hover .map-pin-dot, .map-pin:focus-visible .map-pin-dot{ fill: var(--accent); }
.map-pin-count{ font-family: var(--font-mono); font-size:9px; font-weight:500; fill: var(--accent); pointer-events:none; }
.map-pin:hover .map-pin-count, .map-pin:focus-visible .map-pin-count{ fill: var(--bg-deepest); }
.map-pin-label{
  font-family: var(--font-mono); font-size:10.5px; fill: var(--text-light);
  opacity:0; transition: opacity .15s; pointer-events:none;
}
.map-pin:hover .map-pin-label, .map-pin:focus-visible .map-pin-label{ opacity:1; }
.map-pin:focus-visible .map-pin-dot{ outline: 1px solid var(--accent); outline-offset:2px; }

/* ============================================================
   ATLAS
   ============================================================ */
.atlas{ max-width: var(--maxw); margin: 0 auto; padding: 6rem 1.5rem 2rem; background: var(--bg-dark); }
.atlas-header{ max-width: 640px; margin-bottom: 3rem; }

.region-block{ margin-bottom: 4.5rem; }
.region-title{
  font-family: var(--font-mono); font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--accent);
  display:flex; align-items:center; gap:1rem;
  margin-bottom: 2rem;
}
.region-title::after{ content:''; flex:1; height:1px; background: var(--line-hairline); }

.country-block{ margin-bottom: 2.6rem; }
.country-heading{
  display:flex; align-items:baseline; gap:0.8rem;
  margin-bottom: 1.2rem;
}
.country-heading h4{
  font-family: var(--font-display); font-size:1.3rem; font-weight:600; margin:0; color: var(--text-light);
}
.country-heading span{
  font-family: var(--font-mono); font-size:0.75rem; color: var(--text-light-dim);
}

.plate-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.6rem;
}
.plate-card{
  cursor:pointer;
  background: var(--paper-light);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.plate-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,0.5); }
.plate-thumb{ overflow:hidden; background:#c9c6bd; aspect-ratio: 4/5; }
.plate-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.plate-card:hover .plate-thumb img{ transform: scale(1.04); }
.plate-caption{ padding: 0.85rem 1rem 1rem; }
.plate-num{ font-family: var(--font-mono); font-size:0.68rem; color: var(--accent-dim); letter-spacing:0.06em; }
.plate-title{ font-family: var(--font-display); font-size:1rem; font-weight:600; margin-top:0.25rem; color: var(--ink-black); }
.plate-city{ font-family: var(--font-mono); font-size:0.74rem; color: rgba(23,22,15,0.55); margin-top:0.2rem; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background: var(--bg-deepest); padding: 6rem 1.5rem; }
.services-header{ max-width: var(--maxw); margin: 0 auto 3rem; }
.services-grid{
  max-width: var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.service-card{
  background: var(--bg-panel);
  border: 1px solid var(--line-hairline);
  padding: 2.4rem;
  color: var(--paper-light);
}
.service-icon{ color: var(--line-bright); margin-bottom: 1.6rem; }
.service-kicker{
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--accent);
}
.service-card h3{ font-size: 1.6rem; margin: 0.6rem 0 1rem; }
.service-card p{ color: rgba(234,231,223,0.75); font-size:0.98rem; }
.service-list{ margin: 1.4rem 0; display:flex; flex-direction:column; gap:0.55rem; }
.service-list li{
  font-family: var(--font-mono); font-size:0.82rem; color: rgba(234,231,223,0.65);
  padding-left: 1.1rem; position:relative;
}
.service-list li::before{ content:'—'; position:absolute; left:0; color: var(--line-dim); }
.service-link{
  display:inline-block; margin-top:0.6rem;
  font-family: var(--font-mono); font-size:0.85rem; color: var(--line-bright);
  border-bottom: 1px solid rgba(214,213,208,0.4);
  padding-bottom:2px;
}
.service-link:hover{ border-color: var(--line-bright); }

.price-tag{
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  background: rgba(214,213,208,0.06);
  border: 1px solid var(--line-hairline);
  border-left: 2px solid var(--accent);
  display:flex; flex-direction:column; gap:0.2rem;
}
.price-tag-label{ font-family: var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color: var(--accent); }
.price-tag-value{ font-family: var(--font-display); font-size:1.4rem; font-weight:600; color: var(--paper-light); }
.price-tag-note{ font-family: var(--font-mono); font-size:0.76rem; color: rgba(234,231,223,0.6); }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  max-width: var(--maxw); margin: 0 auto;
  padding: 6rem 1.5rem;
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem;
  align-items:center;
  background: var(--bg-dark);
}
.about-media-frame{
  border: 1px solid rgba(0,0,0,0.08);
  padding: 0.6rem;
  background: var(--paper-light);
}
.about-media-frame img{ display:block; }
.about-akas{
  font-family: var(--font-mono); font-size:0.85rem; letter-spacing:0.05em;
  color: var(--text-light-dim); margin-top: 0.5rem;
}
.about-copy p{ color: var(--text-light-dim); margin-top: 1.1rem; font-size:1.02rem; max-width:56ch; }
.about-copy .section-title{ margin-bottom: 0.2rem; }
.about-copy .btn{ margin-top: 1.8rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background: var(--bg-deepest); padding: 6rem 1.5rem; border-top: 1px solid var(--line-hairline); }
.contact-header{ max-width: 640px; margin: 0 auto 3rem; text-align:center; }
.contact-header .section-sub{ margin-left:auto; margin-right:auto; }
.contact-direct{
  display:flex; justify-content:center; gap:2.2rem; flex-wrap:wrap;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-hairline);
}
.contact-direct-link{ display:flex; flex-direction:column; gap:0.25rem; align-items:center; transition: opacity .15s; }
.contact-direct-link:hover{ opacity:0.75; }
.contact-direct-label{ font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-light-dim); }
.contact-direct-value{ font-family: var(--font-mono); font-size:0.95rem; color: var(--paper-light); border-bottom: 1px solid rgba(234,231,223,0.35); padding-bottom:2px; }
.contact-form{
  max-width: 640px; margin: 0 auto;
  display:flex; flex-direction:column; gap:1.3rem;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 2.4rem;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1.3rem; }
.form-field{ display:flex; flex-direction:column; gap:0.5rem; }
.form-field label{
  font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase;
  color: rgba(23,22,15,0.6);
}
.form-field input, .form-field select, .form-field textarea{
  border: 1px solid rgba(23,22,15,0.2);
  background: var(--paper-light);
  padding: 0.75rem 0.9rem;
  font-size: 0.98rem;
  color: var(--ink-black);
  border-radius: 2px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline: 2px solid var(--accent-dim); outline-offset: 1px;
}
.form-field textarea{ resize: vertical; }
.form-note{ text-align:center; font-family: var(--font-mono); font-size:0.78rem; color: rgba(23,22,15,0.5); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position: fixed; inset:0; z-index: 100;
  background: rgba(4,4,4,0.96);
  display:none;
  align-items:center; justify-content:center;
  padding: 2rem;
}
.lightbox.is-open{ display:flex; }
.lightbox-inner{
  max-width: 1100px; width:100%;
  max-height: 90vh;
  display:grid; grid-template-columns: 1.4fr 1fr;
  background: var(--paper-light);
  overflow:hidden;
}
.lightbox-image-wrap{ background:#0c0c0c; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lightbox-image-wrap img{ max-height: 90vh; width:100%; object-fit:contain; }
.lightbox-titleblock{ padding: 2.2rem; display:flex; flex-direction:column; overflow-y:auto; }
.tb-row{ display:flex; justify-content:space-between; padding: 0.55rem 0; border-bottom: 1px solid rgba(23,22,15,0.14); font-family: var(--font-mono); font-size:0.82rem; color: var(--ink-black); }
.tb-plate{ border-bottom:none; padding-top:0; }
.tb-plate .tb-value{ color: var(--ink-black); font-weight:700; }
.tb-label{ color: rgba(23,22,15,0.5); text-transform:uppercase; letter-spacing:0.06em; font-size:0.72rem; }
.tb-title{ font-size: 1.6rem; margin: 0.3rem 0 1rem; color: var(--ink-black); }
.tb-divider{ flex:1; min-height: 1.4rem; }
.lightbox-close, .lightbox-nav{
  position: fixed;
  background: transparent; border: none;
  color: var(--paper-light);
  font-size: 1.8rem;
  z-index: 101;
}
.lightbox-close{ top: 1.5rem; right: 2rem; font-size: 2.2rem; }
.lightbox-nav{ top:50%; transform: translateY(-50%); font-size: 2rem; }
.lightbox-prev{ left: 1.2rem; }
.lightbox-next{ right: 1.2rem; }
.lightbox-close:hover, .lightbox-nav:hover{ color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: var(--bg-deepest); color: rgba(234,231,223,0.55); padding: 2.5rem 1.5rem; border-top: 1px solid var(--line-hairline); }
.footer-inner{
  max-width: var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem;
}
.footer-mark{ font-family: 'Big Shoulders Display', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.015em; font-size:1.15rem; color: var(--paper-light); }
.footer-links{ display:flex; gap:1.6rem; font-family: var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; }
.footer-meta{ font-family: var(--font-mono); font-size:0.76rem; }

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.scroll-top-btn{
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--line-hairline);
  color: var(--text-light);
  display:flex; align-items:center; justify-content:center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  z-index: 70;
  cursor: pointer;
}
.scroll-top-btn.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover{
  background: var(--accent);
  color: var(--bg-deepest);
  border-color: var(--accent);
}
@media (max-width: 720px){
  .scroll-top-btn{ right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .about{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .lightbox-inner{ grid-template-columns: 1fr; overflow-y:auto; }
  .lightbox-image-wrap img{ max-height: 50vh; }
  .hero-blueprint{ width: 100%; right:0; opacity:0.3; }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links-mobile.is-open{ display:flex; }
  .intro-inner{ grid-template-columns: repeat(2,1fr); gap: 1.5rem 0; }
  .intro-item:nth-child(3){ border-left:none; }
  .form-row{ grid-template-columns: 1fr; }
  .lightbox{ padding: 0; }
  .hero-photo{ background-attachment: scroll; }
  .atlas-controls{ flex-direction:column; align-items:flex-start; }
  .map-tick{ font-size:8px; }
  .map-pin-label{ display:none; }
  .map-pin-touch{ r: 17px; }
  .map-pin-dot{ fill: rgba(211,163,96,0.35); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}