:root, :root[data-theme="dark"]{
  --asphalt: #14161A;
  --asphalt-2: #1D2025;
  --asphalt-3: #262A31;
  --ivory: #F3EFE6;
  --ivory-dim: #C9C5BA;
  --amber: #E8A33D;
  --amber-rgb: 232,163,61;
  --amber-dim: #a67328;
  --route-green: #4C7A5C;
  --steel: #8B94A0;
  --danger: #C9573F;
  --radius: 8px;
  /* surface helpers */
  --header-bg: rgba(20,22,26,0.92);
  --overlay-bg: rgba(10,11,13,0.72);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  /* hero band — darker than the page for contrast */
  --hero-bg: radial-gradient(120% 100% at 50% 0%, #20242B 0%, #0E1013 70%);
  --hero-grid: rgba(255,255,255,0.14);
  --footer-bg: #0C0D10;
}
:root[data-theme="light"]{
  --asphalt: #F8F6F2;      /* page background */
  /* --asphalt: #F7F5F0;     */
  --asphalt-2: #FFFFFF;    /* cards */
  --asphalt-3: #ECE8E0;    /* subtle raised */
  --ivory: #1E2126;        /* main text */
  --ivory-dim: #4A4E56;    /* dim text */
  --amber: #C67E1E;        /* accent (darker for contrast on light) */
  --amber-rgb: 198,126,30;
  --amber-dim: #8f5c16;
  --route-green: #3C6A4C;
  --steel: #6B7480;
  --danger: #B34632;
  --header-bg: rgba(247,245,240,0.92);
  --overlay-bg: rgba(30,33,38,0.45);
  --border: rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.18);
  --hero-bg: radial-gradient(120% 100% at 50% 0%, #FFFFFF 0%, #EDE7DB 100%);
  --hero-grid: rgba(0,0,0,0.10);
  --footer-bg: #E4DECF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--asphalt);
  color:var(--ivory);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background 0.3s ease, color 0.3s ease;
}
a {color:inherit;text-decoration:none;transition:color 0.2s;}
/* ---------- THEME TOGGLE ---------- */
.theme-toggle{
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--ivory);
  width:32px;height:32px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.95rem;line-height:1;
  transition:border-color 0.2s, background 0.2s;
}
.theme-toggle:hover{border-color:var(--amber);}
.header-actions{display:flex;align-items:center;gap:12px;}
.theme-toggle .icon-dark{display:none;}
.theme-toggle .icon-light{display:inline;}
:root[data-theme="light"] .theme-toggle .icon-light{display:none;}
:root[data-theme="light"] .theme-toggle .icon-dark{display:inline;}
h1,h2,h3{
  font-family:'Fraunces',serif;
  margin:0;
  font-weight:600;
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:0.72rem;
}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
/* visually hidden but readable by search engines / screen readers */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  background:var(--header-bg);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;letter-spacing:0.02em;line-height:1.05;}
.logo span{color:var(--amber);}
.logo .logo-tag{
  display:block;
  color:var(--steel);
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.call-btn{
  background:var(--amber);
  border:1px solid var(--amber);
  color:var(--asphalt);
  /* color:var(--amber); */
  padding:9px 18px;
  border-radius:var(--radius);
  font-size:0.85rem;
  font-weight:600;
  transition:background 0.2s,color 0.2s;
}
.call-btn:hover{background:var(--amber);color:var(--asphalt);}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:110px 28px 48px; /* earlier- padding 110px 28px 92px */
  text-align:center;
  isolation:isolate;
  background:var(--hero-bg);
  border-bottom:1px solid rgba(var(--amber-rgb),0.45);
  box-shadow:0 1px 0 rgba(var(--amber-rgb),0.15);
}
/* amber glow + grid, sitting behind the content */
.hero::before{
  content:"";
  position:absolute;inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 50% -5%, rgba(var(--amber-rgb),0.35), transparent 50%),
    radial-gradient(circle at 12% 95%, rgba(var(--amber-rgb),0.14), transparent 42%);
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 70%);
}
.hero-inner{max-width:920px;margin:0 auto;}
.hero .mono{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:26px;
  padding:7px 15px;
  color:var(--amber);
  border:1px solid rgba(var(--amber-rgb),0.35);
  background:rgba(var(--amber-rgb),0.08);
  border-radius:100px;
}
.hero .mono::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(var(--amber-rgb),0.25);
}
.hero h1{
  font-size:clamp(2.4rem,5.6vw,4.1rem);
  line-height:1.06;
  letter-spacing:-0.02em;
}
.hero h1 em{
  font-style:normal;
  position:relative;
  background:linear-gradient(100deg, var(--amber), #f0b458);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p{
  color:var(--ivory-dim);
  max-width:580px;
  margin:24px auto 0;
  font-size:1rem;
}
.hero .scroll-hint{
  margin-top:44px;
  color:var(--steel);
  font-size:0.85rem;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(6px);}
}
@media (prefers-reduced-motion: reduce){
  .hero .scroll-hint{animation:none;}
}

/* ---------- ROUTE STRIP ---------- */
.route-wrap{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  padding:20px 28px 100px;
}
.route-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:60px;
  width:2px;
  background-image:repeating-linear-gradient(to bottom, var(--amber) 0 14px, transparent 14px 26px);
  transform:translateX(-50%);
}
.route-heading{
  text-align:center;
  margin-bottom:56px;
}
.route-heading .mono{color:var(--route-green);margin-bottom:10px;display:block;}
.route-heading h2{font-size:clamp(1.6rem,3vw,2.2rem);}

.exit-row{
  position:relative;
  display:flex;
  margin-bottom:70px;
}
.exit-row:last-child{margin-bottom:0;}
.exit-row:nth-child(odd) .exit-card{margin-left:auto;}
.exit-marker{
  position:absolute;
  left:50%;
  top:6px;
  transform:translateX(-50%);
  width:34px;height:34px;
  background:var(--asphalt);
  border:2px solid var(--amber);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  color:var(--amber);
  z-index:2;
}
.exit-card{
  position:relative;
  width:calc(50% - 46px);
  background:var(--asphalt-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 26px 22px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  overflow:hidden;
}
.exit-card .card-image{
  position:relative;
  margin:-26px -26px 20px;
  height:230px;
  background:var(--asphalt);
}
/* place the score badge over the image */
.exit-card .card-image .badge-row{
  position:absolute;
  top:12px;
  right:12px;
  margin:0;
  z-index:2;
}
.exit-card .card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.score-badge{
  display:inline-block;
  padding:5px 12px;
  border-radius:20px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.03em;
}
.badge-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom:14px;
}
.score-badge.score-high{background:var(--route-green);color:#F3EFE6;}
.score-badge.score-mid{background:var(--amber);color:var(--asphalt);}
.score-badge.score-low{background:var(--asphalt-3);color:var(--steel);border:1px solid var(--border-strong);}
.exit-card.visible{opacity:1;transform:translateY(0);}
.exit-card .tag-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;
}
.exit-card .sector-tag{color:var(--route-green);}
.exit-card .price-tag{color:var(--amber);font-family:'IBM Plex Mono',monospace;font-size:0.78rem;}
.exit-card h3{font-size:1.35rem;margin-bottom:6px;}
.exit-card .developer{color:var(--steel);font-size:0.85rem;margin-bottom:12px;}
.exit-card .note{color:var(--ivory-dim);font-size:0.9rem;margin-bottom:20px;}
.brochure-btn{
  width:100%;
  background:var(--amber);
  color:var(--asphalt);
  border:none;
  padding:12px 16px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:0.9rem;
  transition:background 0.2s;
}
.brochure-btn:hover{background:#f0b458;}

@media (max-width:760px){
  .route-line{left:20px;}
  .exit-row{margin-left:0;}
  .exit-row:nth-child(odd) .exit-card,
  .exit-row .exit-card{margin-left:52px;width:calc(100% - 52px);}
  .exit-marker{left:20px;}
}

/* ---------- TRUST / FOOTER ---------- */
.disclaimer-band{
  max-width:1080px;margin:0 auto;padding:0 28px 40px;
  color:var(--steel);font-size:0.78rem;line-height:1.7;
}
footer{
  position:relative;
  margin-top:60px;
  padding:56px 28px 46px;
  text-align:center;
  color:var(--steel);
  font-size:0.82rem;
  background:var(--footer-bg);
  border-top:1px solid var(--border);
  overflow:hidden;
}
/* amber accent line + soft glow at the top edge */
footer::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
}
footer::after{
  content:"";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;height:120px;
  background:radial-gradient(circle at 50% 0%, rgba(var(--amber-rgb),0.14), transparent 70%);
  pointer-events:none;
}
.footer-inner{position:relative;max-width:640px;margin:0 auto;}
footer .logo{display:inline-block;margin-bottom:14px;}
.footer-tagline{
  color:var(--ivory-dim);
  font-size:0.9rem;
  line-height:1.6;
  margin:0 auto 20px;
  max-width:460px;
}
/* ---------- HEADER PROJECTS NAV ---------- */
.nav-menu{position:relative;}
.nav-toggle{
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--ivory);
  padding:9px 14px;
  border-radius:var(--radius);
  font-size:0.85rem;
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  transition:border-color 0.2s;
}
.nav-toggle:hover{border-color:var(--amber);}
.nav-caret{font-size:0.7rem;transition:transform 0.2s;}
.nav-menu.open .nav-caret{transform:rotate(180deg);}
.nav-link{
  color:var(--ivory-dim);
  text-decoration:none;
  transition:color 0.15s, background 0.15s;
}

/* dropdown panel (works at all screen sizes) */
.nav-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:250px;
  background:var(--asphalt-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(0,0,0,0.32);
  padding:6px;
  display:none;
  flex-direction:column;
  z-index:60;
}
.nav-menu.open .nav-dropdown{display:flex;}
.nav-dropdown .nav-link{
  font-size:0.88rem;
  padding:9px 12px;
  border-radius:6px;
}
.nav-dropdown .nav-link:hover{color:var(--ivory);background:var(--asphalt-3);}
.nav-dropdown .nav-link.active{
  color:var(--amber);
  background:rgba(var(--amber-rgb),0.1);
  font-weight:600;
}

/* inline pill bar — desktop only */
.nav-inline{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-right:6px;
  overflow:hidden;
}
.nav-inline .nav-link{
  font-size:0.8rem;
  font-weight:600;
  padding:6px 11px;
  border-radius:100px;
  white-space:nowrap;
  flex-shrink:0;
}
.nav-inline .nav-link:hover{color:var(--amber);background:rgba(var(--amber-rgb),0.1);}
.nav-inline .nav-link.active{
  /* color:var(--asphalt); */
  color:var(--ivory);
  /* background:var(--amber); */
  border-bottom: 2px solid var(--amber);
  border-radius: 0;
}

/* ===== MOBILE / TABLET: hide inline pills, keep dropdown ===== */
@media (max-width:860px){
  .nav-inline{display:none;}
}
/* hide the header call button on phones (floating call button covers it) */
@media (max-width:560px){
  .call-btn{display:none;}
  header{padding:14px 18px;}
  .logo{font-size:0.95rem;}
  .logo .logo-tag{font-size:0.52rem;letter-spacing:0.12em;}
}
.footer-meta{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:8px;
  margin-bottom:18px;
}
.footer-meta .dot{color:var(--amber);}
.footer-meta a{
  color:var(--amber);
  font-weight:600;
  text-decoration:none;
  transition:color 0.2s;
}
.footer-meta a:hover{color:var(--ivory);}
.footer-links{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:10px;
  margin-bottom:18px;
  font-size:0.82rem;
}
.footer-links a{
  color:var(--ivory-dim);
  text-decoration:none;
  transition:color 0.2s;
}
.footer-links a:hover{color:var(--amber);}
.footer-copy{
  padding-top:18px;
  border-top:1px solid var(--border);
  color:var(--steel);
  font-size:0.72rem;
}

/* ---------- MODAL ---------- */
.overlay{
  position:fixed;inset:0;
  background:var(--overlay-bg);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
  z-index:100;
}
.overlay.open{display:flex;}
.modal{
  background:var(--asphalt-2);
  border:1px solid var(--border);
  border-radius:6px;
  max-width:440px;
  width:100%;
  padding:28px 30px 28px;
  position:relative;
  transform:scale(0.96);
  opacity:0;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.overlay.open .modal{transform:scale(1);opacity:1;}
.modal-close{
  position:absolute;top:16px;right:16px;
  background:none;border:none;color:var(--steel);
  font-size:1.3rem;line-height:1;padding:4px;
}
.modal .mono{color:var(--route-green);display:block;margin-bottom:8px;}
.modal h3{font-size:1.4rem;margin-bottom:6px;}
.modal .sub{color:var(--ivory-dim);font-size:0.88rem;margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{
  display:block;font-size:0.78rem;color:var(--steel);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em;
}
.field label .opt{text-transform:none;opacity:0.7;font-size:0.72rem;}
.field input,
.field textarea{
  width:100%;
  background:var(--asphalt);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:11px 12px;
  color:var(--ivory);
  font-size:0.95rem;
  font-family:inherit;
  resize:vertical;
}
.field input:focus,
.field textarea:focus{outline:2px solid var(--amber);outline-offset:1px;}
.field .error{color:var(--danger);font-size:0.76rem;margin-top:5px;display:none;}
.field.invalid input,
.field.invalid textarea{border-color:var(--danger);}
.field.invalid .error{display:block;}
.submit-btn{
  width:100%;
  background:var(--amber);
  color:var(--asphalt);
  border:none;
  padding:13px 16px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:0.95rem;
  margin-top:6px;
}
.submit-btn:hover{background:#f0b458;}
.submit-btn:disabled{opacity:0.6;cursor:not-allowed;}
.form-consent{color:var(--steel);font-size:0.72rem;margin-top:14px;line-height:1.5;}

.thankyou{display:none;text-align:center;padding:10px 0;}
.thankyou.visible{display:block;}
.thankyou .tick{
  width:52px;height:52px;border-radius:50%;
  background:var(--route-green);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  font-size:1.4rem;
}
.thankyou h3{margin-bottom:10px;}
.thankyou p{color:var(--ivory-dim);font-size:0.92rem;margin-bottom:22px;}
.thankyou .close-thanks{
  background:transparent;border:1px solid var(--steel);color:var(--ivory);
  padding:10px 20px;border-radius:var(--radius);font-size:0.85rem;
}

/* ---------- FLOATING CONTACT BUTTONS ---------- */
.fab{
  position:fixed;
  bottom:24px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.fab:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.34);}
.fab svg{flex-shrink:0;}
.fab-call{left:24px;background:var(--amber);color:var(--asphalt);}
.fab-wa{right:24px;background:#25D366;}

/* pulsing ring to draw attention */
.fab::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 currentColor;
  opacity:0.45;
  animation:fab-pulse 2.4s ease-out infinite;
  pointer-events:none;
}
.fab-call::after{color:var(--amber);}
.fab-wa::after{color:#25D366;}
@keyframes fab-pulse{
  0%{box-shadow:0 0 0 0 currentColor;opacity:0.4;}
  70%{box-shadow:0 0 0 14px currentColor;opacity:0;}
  100%{box-shadow:0 0 0 0 currentColor;opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .fab::after{animation:none;}
}

@media (max-width:560px){
  .fab{width:52px;height:52px;bottom:18px;}
  .fab-call{left:18px;}
  .fab-wa{right:18px;}
}