/* ============================================================
   Bhoomi Infra — premium white/red "site plan" theme
   Signature motif: survey-drafting dimension lines & crosshairs
   ============================================================ */

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

:root{
  --white:#ffffff;
  --paper:#faf8f6;
  --ink:#191715;
  --ink-soft:rgba(25,23,21,.66);
  --ink-faint:rgba(25,23,21,.42);
  --red:#c31432;
  --red-deep:#8a0e22;
  --red-bright:#e2213d;
  --red-tint:#fdeeef;
  --line:rgba(25,23,21,.12);
  --line-red:rgba(195,20,50,.35);

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

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2: clamp(2.2rem, 1.9rem + 1.4vw, 3.4rem);
  --step-3: clamp(2.8rem, 2.2rem + 3vw, 4.8rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--red-deep), var(--red-bright));
  z-index:100;
  transition:width .1s linear;
  box-shadow:0 0 10px rgba(195,20,50,.5);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* faint blueprint grid wash across the whole page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.035;
  background-image:
    repeating-linear-gradient(0deg, var(--red) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--red) 0 1px, transparent 1px 48px);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
.container{ max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; }
h2{ font-size:var(--step-2); }
h3{ font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.lead{ font-size:1.2rem; color:var(--ink-soft); max-width:46ch; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--red);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 30px;
  font-family:var(--font-body); font-weight:700; font-size:.92rem;
  letter-spacing:.02em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.btn-primary{ background:var(--red); color:var(--white); }
.btn-primary::after{
  content:"";
  position:absolute; inset:0;
  background:var(--red-deep);
  transform:translateX(-101%);
  transition:transform .4s var(--ease);
  z-index:0;
}
.btn-primary span, .btn-primary{ z-index:1; }
.btn-primary:hover::after{ transform:translateX(0); }
.btn-primary:hover{ box-shadow:0 10px 24px -8px rgba(195,20,50,.55); transform:translateY(-2px); }
.btn-primary > *{ position:relative; z-index:1; }

.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); padding:12px 24px; font-size:.85rem; }
.btn-outline:hover{ border-color:var(--red); color:var(--red); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
/* Frosted-glass effect is applied via a pseudo-element instead of directly
   on .site-header. Putting backdrop-filter (or transform/filter/perspective)
   directly on an ancestor creates a new "containing block" for any
   descendant using position:fixed — which breaks .main-nav's mobile
   fixed-position slide-in, making it render squashed inside the header
   instead of covering the screen. This keeps the same visual look without
   that side effect. */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(10px);
}
.nav-row{
  max-width:1180px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ height:32px; width:auto; }
.brand-text{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--ink);
}
.brand-text .mark{ color:var(--red); font-size:.7rem; transform:translateY(-6px); }

.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav li{ position:relative; }
.main-nav > ul > li > a, .main-nav > ul > li > button{
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 14px;
  font-size:.9rem; font-weight:600; color:var(--ink);
  background:none; border:none; cursor:pointer; font-family:var(--font-body);
  position:relative;
}
.main-nav > ul > li > a::after, .main-nav > ul > li > button::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.main-nav > ul > li:hover > a::after, .main-nav > ul > li:hover > button::after,
.main-nav li.active > a::after{ transform:scaleX(1); }
.main-nav li.active > a{ color:var(--red); }

.dropdown{
  position:absolute; top:100%; left:0; min-width:220px;
  background:var(--white); border:1px solid var(--line); box-shadow:0 18px 40px -18px rgba(0,0,0,.2);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:all .25s var(--ease);
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:9px 12px; font-size:.86rem; border-radius:2px; transition:background-color .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease); }
.dropdown a:hover{ background:var(--red-tint); color:var(--red-deep); padding-left:16px; }

.nav-cta{ background:var(--red); color:#fff !important; padding:10px 20px !important; border-radius:2px; margin-left:6px; }
.nav-cta::after{ display:none !important; }
.nav-cta:hover{ background:var(--red-deep); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.imgbox{ position:relative; width:100%; aspect-ratio:var(--ar, 16/9); overflow:hidden; background:var(--paper); }
.imgbox img{ width:100%; height:100%; object-fit:cover; }
.hero .imgbox{ position:absolute; inset:0; aspect-ratio:auto; }
.hero .imgbox img{ animation:heroZoom 16s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.08);} to{ transform:scale(1);} }

.placeholder-label{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:20px;
  background:
    repeating-linear-gradient(45deg, var(--red-tint) 0 10px, #fff 10px 20px);
  color:var(--red-deep);
}
.placeholder-label .tag{ font-family:var(--font-mono); font-size:.72rem; background:#fff; border:1px dashed var(--line-red); padding:4px 10px; }
.placeholder-label .hint{ font-size:.8rem; color:var(--ink-faint); max-width:32ch; }

.hero-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,8,.86) 5%, rgba(10,8,8,.35) 55%, rgba(10,8,8,.15) 100%); z-index:1; }

/* signature: corner crosshairs, like a site-plan registration mark */
.hero-crosshairs{ z-index:2; }
.hero-crosshairs::before, .hero-crosshairs::after{
  content:""; position:absolute; width:34px; height:34px;
  border:1px solid rgba(255,255,255,.55);
  opacity:0;
  animation:crossIn 1s var(--ease) .3s forwards, crossPulse 3.4s ease-in-out 1.4s infinite;
}
.hero-crosshairs::before{ top:28px; left:28px; border-right:none; border-bottom:none; }
.hero-crosshairs::after{ bottom:28px; right:28px; border-left:none; border-top:none; animation-delay:.5s, 2.1s; }
@keyframes crossIn{ from{ opacity:0; transform:scale(.7);} to{ opacity:1; transform:scale(1);} }
@keyframes crossPulse{ 0%,100%{ opacity:1; border-color:rgba(255,255,255,.55);} 50%{ opacity:.5; border-color:var(--red-bright);} }

/* extra roaming tick marks along hero edges, subtle construction-plan detail */
.hero-crosshairs span{
  position:absolute; background:rgba(255,255,255,.4); pointer-events:none;
}
.hero-crosshairs .tick-top{ top:0; left:50%; width:1px; height:16px; animation:tickFade 4s ease-in-out infinite; }
.hero-crosshairs .tick-bottom{ bottom:0; left:50%; width:1px; height:16px; animation:tickFade 4s ease-in-out 2s infinite; }
@keyframes tickFade{ 0%,100%{ opacity:.15;} 50%{ opacity:.7;} }

.hero-inner{ position:relative; z-index:2; max-width:820px; padding:0 28px clamp(56px,8vw,96px); color:#fff; }
.hero-inner .eyebrow{ color:#ffd7dc; }
.hero-inner .eyebrow::before{ background:#ffd7dc; }
.hero-inner h1{ color:#fff; font-size:var(--step-3); }
.hero-inner .lead{ color:rgba(255,255,255,.86); max-width:56ch; }

.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in-view{ animation:riseIn .8s var(--ease) forwards; }
.reveal-d1.in-view{ animation-delay:.08s; }
.reveal-d2.in-view{ animation-delay:.18s; }
.reveal-d3.in-view{ animation-delay:.28s; }
@keyframes riseIn{ to{ opacity:1; transform:translateY(0);} }

.hero-cta-row .btn{ opacity:0; animation:riseIn .7s var(--ease) forwards; }
.hero-inner .eyebrow{ opacity:0; animation:riseIn .7s var(--ease) .1s forwards; }
.hero-inner h1{ opacity:0; animation:riseIn .8s var(--ease) .22s forwards; }
.hero-inner .lead{ opacity:0; animation:riseIn .8s var(--ease) .36s forwards; }
.hero-cta-row a:nth-child(1){ animation-delay:.5s; }
.hero-cta-row a:nth-child(2){ animation-delay:.6s; }

/* ---------- Sections ---------- */
section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.section-paper{ background:var(--paper); }
.section-dark{ background:var(--ink); color:var(--paper); }

.grid{ display:grid; gap:32px; }
.grid-2{ grid-template-columns:1fr 1fr; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* Who we are image */
.section-paper .imgbox{ border:1px solid var(--line); }

/* ---------- Differentiators (red band, ruler list) ---------- */
.diff-band{
  background:var(--red);
  color:#fff;
  overflow:hidden;
}
.diff-band .eyebrow{ color:#ffd7dc; }
.diff-band .eyebrow::before{ background:#ffd7dc; }
.diff-band h2{ color:#fff; max-width:20ch; }
.diff-list{ margin-top:44px; border-top:1px solid rgba(255,255,255,.28); }
.diff-item{
  display:flex; align-items:flex-start; gap:22px;
  padding:24px 0;
  border-bottom:1px solid rgba(255,255,255,.28);
  position:relative;
  transition:padding-left .4s var(--ease);
}
.diff-item::before{
  content:"";
  position:absolute; inset:0 -28px;
  background:rgba(255,255,255,.06);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
  z-index:0;
}
.diff-item:hover::before{ transform:scaleX(1); }
.diff-item:hover{ padding-left:14px; }
.diff-item .mark{
  flex:none; width:20px; height:20px; margin-top:4px;
  position:relative;
  z-index:1;
  transition:transform .5s var(--ease);
}
.diff-item:hover .mark{ transform:rotate(90deg) scale(1.15); }
.diff-item .mark::before, .diff-item .mark::after{
  content:""; position:absolute; background:#fff;
  transition:box-shadow .4s var(--ease);
}
.diff-item .mark::before{ top:9px; left:0; width:20px; height:1px; }
.diff-item .mark::after{ top:0; left:9px; width:1px; height:20px; }
.diff-item:hover .mark::before, .diff-item:hover .mark::after{ box-shadow:0 0 8px rgba(255,255,255,.7); }
.diff-item > div{ position:relative; z-index:1; }
.diff-item h3{ color:#fff; font-size:1.08rem; margin-bottom:4px; transition:letter-spacing .4s var(--ease); }
.diff-item:hover h3{ letter-spacing:.01em; }
.diff-item p{ color:rgba(255,255,255,.8); margin:0; max-width:52ch; }
.diff-item{ opacity:0; transform:translateX(-14px); }
.diff-item.in-view{ opacity:1; transform:translateX(0); transition:opacity .6s var(--ease), transform .6s var(--ease), padding-left .4s var(--ease); }

/* ---------- Service cards ---------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  padding:30px 26px;
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red-deep), var(--red-bright));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.card::after{
  content:"";
  position:absolute; top:-60%; left:-20%; width:40%; height:220%;
  background:linear-gradient(120deg, transparent, rgba(195,20,50,.08), transparent);
  transform:translateX(-260%) rotate(8deg);
  transition:transform .7s var(--ease);
  pointer-events:none;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 26px 48px -22px rgba(25,23,21,.28); border-color:var(--line-red); }
.card:hover::before{ transform:scaleX(1); }
.card:hover::after{ transform:translateX(260%) rotate(8deg); }
.card .num{
  font-family:var(--font-mono); color:var(--red); font-size:.78rem; letter-spacing:.1em;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  transition:gap .35s var(--ease);
}
.card .num::after{ content:""; width:26px; height:1px; background:var(--red); transition:width .35s var(--ease); }
.card:hover .num{ gap:12px; }
.card:hover .num::after{ width:38px; }
.card h3{ font-size:1.08rem; margin:0; }

/* ---------- Vision block ---------- */
.vision-section{ padding-top:clamp(72px,10vw,128px); }
.vision-block{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:36px;
  align-items:start;
}
.vision-rule{
  position:relative;
  height:100%;
  min-height:180px;
  display:flex; flex-direction:column; align-items:center;
}
.vision-rule::before{
  content:"";
  position:absolute; top:6px; bottom:6px; left:50%;
  width:1px; background:var(--line-red);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1s var(--ease) .15s;
}
.reveal.in-view .vision-rule::before{ transform:scaleY(1); }
.vision-rule-tick{
  width:16px; height:1px; background:var(--red);
  position:relative; z-index:1;
}
.vision-rule-tick:first-child{ margin-bottom:auto; }
.vision-rule-tick:last-child{ margin-top:auto; }
.vision-copy{ max-width:52ch; }
.vision-quote{
  font-size:clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  font-weight:500;
  color:var(--ink);
}

/* ---------- Core values ---------- */
.values-head{ max-width:60ch; margin-bottom:48px; }
.values-head .lead{ margin-top:6px; }
.grid-values{
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.value-card{ text-align:left; }
.value-icon{
  width:42px; height:42px;
  border:1px solid var(--line-red);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  position:relative;
  transition:transform .5s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
}
.value-icon span{
  width:10px; height:10px;
  background:var(--red);
  border-radius:50%;
  transition:transform .5s var(--ease), background-color .4s var(--ease);
}
.value-card:hover .value-icon{ transform:rotate(45deg); background:var(--red); border-color:var(--red); }
.value-card:hover .value-icon span{ background:#fff; transform:rotate(-45deg) scale(1.2); }

/* ---------- Stats / track record ---------- */
.stat{ position:relative; padding-top:6px; }
.stat .figure{
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  position:relative; display:inline-block; padding-bottom:14px;
}
.stat .figure::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; background:var(--red);
  width:0; transition:width 1s var(--ease) .1s;
}
.stat.in-view .figure::after{ width:64px; }
.stat .label{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px; }

/* ---------- Closing CTA ---------- */
.closing{ min-height:auto; }
.closing .hero-inner{ max-width:700px; text-align:left; }
.closing h2{ color:#fff; }

.content-note{
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint);
  text-align:center; padding:14px 20px; background:var(--paper); border-top:1px dashed var(--line); border-bottom:1px dashed var(--line);
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--white); border-top:1px solid var(--line); padding:64px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.site-footer h4{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0 0 14px; }
.site-footer ul li{ margin-bottom:10px; }
.site-footer ul a{ font-size:.92rem; color:var(--ink-soft); transition:color .25s var(--ease), padding-left .25s var(--ease); display:inline-block; }
.site-footer ul a:hover{ color:var(--red); padding-left:4px; }
.footer-bottom{
  margin-top:48px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .vision-block{ grid-template-columns:32px 1fr; }
  .main-nav{ position:fixed; top:65px; left:0; right:0; bottom:0; background:#fff; transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; }
  .main-nav.open{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; padding:20px; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; border:none; padding-left:14px; }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-toggle{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================
   WHY CHOOSE US PAGE — premium animated reasons list
   ============================================================ */

.why-section{ position:relative; overflow:hidden; }
.why-section::after{
  content:"";
  position:absolute; top:0; right:0; width:1px; height:100%;
  background:linear-gradient(180deg, transparent, var(--line-red) 20%, var(--line-red) 80%, transparent);
  opacity:.5;
}

.why-head{ max-width:64ch; margin-bottom:56px; }
.why-head h2{ margin-bottom:.35em; }

.why-list{
  border-top:1px solid var(--line);
  position:relative;
}

.why-item{
  --stagger:0ms;
  display:grid;
  grid-template-columns:56px 56px 1fr;
  align-items:center;
  gap:26px;
  padding:30px 8px;
  border-bottom:1px solid var(--line);
  position:relative;
  isolation:isolate;
  cursor:default;
  transition:padding-left .45s var(--ease), background-color .45s var(--ease);
}

/* base reveal state driven by JS adding .in-view, but respect the transition-delay stagger set inline */
.why-item.reveal{ opacity:0; transform:translateY(22px); }
.why-item.reveal.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity .7s var(--ease), transform .7s var(--ease), padding-left .45s var(--ease), background-color .45s var(--ease);
}

/* sweep-in highlight background on hover, same construction-plan language as .diff-item */
.why-item::before{
  content:"";
  position:absolute; inset:0 -8px;
  background:var(--red-tint);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
  z-index:-1;
}
.why-item:hover::before{ transform:scaleX(1); }
.why-item:hover{ padding-left:18px; }

.why-index{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--ink-faint);
  letter-spacing:.06em;
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.why-item:hover .why-index{ color:var(--red); transform:translateX(2px); }

.why-icon{
  width:52px; height:52px;
  border:1px solid var(--line-red);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  flex:none;
  position:relative;
  transition:transform .55s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.why-icon svg{ width:22px; height:22px; }
.why-item:hover .why-icon{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  transform:rotate(360deg) scale(1.08);
  box-shadow:0 10px 24px -10px rgba(195,20,50,.55);
}

.why-copy h3{
  font-size:1.14rem;
  margin-bottom:6px;
  transition:letter-spacing .4s var(--ease), color .4s var(--ease);
}
.why-item:hover .why-copy h3{ letter-spacing:.01em; color:var(--red-deep); }
.why-copy p{ margin:0; max-width:58ch; }

.why-line{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg, var(--red-deep), var(--red-bright));
  transition:width .5s var(--ease);
}
.why-item:hover .why-line{ width:100%; }

@media (max-width: 640px){
  .why-item{ grid-template-columns:40px 44px 1fr; gap:16px; padding:22px 4px; }
  .why-icon{ width:44px; height:44px; }
  .why-icon svg{ width:18px; height:18px; }
}


/* ============================================================
   OUR SERVICES PAGE — alternating rows, premium hover motion
   ============================================================ */

.services-section{ position:relative; }
.services-list{ display:flex; flex-direction:column; gap:0; }

.service-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:52px 0;
  border-bottom:1px solid var(--line);
}
.service-row:first-child{ padding-top:0; }
.service-row.reverse .service-media{ order:2; }
.service-row.reverse .service-copy{ order:1; }

.service-row.reveal{ opacity:0; transform:translateY(28px); }
.service-row.reveal.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}

/* media: image zoom + red scan-line sweep on hover */
.service-media{ position:relative; }
.service-media .imgbox{
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
}
.service-media .imgbox img{
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.service-media::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid transparent;
  box-shadow:0 0 0 0 rgba(195,20,50,0);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease);
  pointer-events:none;
}
.service-row:hover .service-media .imgbox img{ transform:scale(1.06); filter:saturate(1.08); }
.service-row:hover .service-media::after{
  border-color:var(--line-red);
  box-shadow:0 22px 46px -22px rgba(195,20,50,.35);
}

/* corner crosshair accent that draws in on hover, echoing the hero motif */
.service-media .imgbox::before,
.service-media .imgbox::after{
  content:"";
  position:absolute; z-index:2;
  width:18px; height:18px;
  border:1.5px solid var(--red-bright);
  opacity:0;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.service-media .imgbox::before{ top:10px; left:10px; border-right:none; border-bottom:none; transform:translate(-6px,-6px); }
.service-media .imgbox::after{ bottom:10px; right:10px; border-left:none; border-top:none; transform:translate(6px,6px); }
.service-row:hover .service-media .imgbox::before,
.service-row:hover .service-media .imgbox::after{ opacity:1; transform:translate(0,0); }

/* copy column */
.service-copy{ max-width:52ch; }
.service-index{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--red);
  margin-bottom:10px;
  position:relative;
  padding-left:34px;
}
.service-index::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:24px; height:1px;
  background:var(--red);
  transform:translateY(-50%) scaleX(1);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.service-row:hover .service-index::before{ transform:translateY(-50%) scaleX(1.4); }

.service-copy h3{
  font-size:1.5rem;
  margin-bottom:12px;
  transition:color .4s var(--ease);
}
.service-row:hover .service-copy h3{ color:var(--red-deep); }

.service-bullets{ margin:14px 0 18px; display:flex; flex-direction:column; gap:10px; }
.service-bullets li{
  display:flex; align-items:center; gap:12px;
  font-weight:500; color:var(--ink);
  opacity:0; transform:translateX(-10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.service-row.in-view .service-bullets li{ opacity:1; transform:translateX(0); }
.service-bullets .tick{
  flex:none; width:9px; height:9px;
  border:1.5px solid var(--red);
  transform:rotate(45deg);
  transition:background-color .35s var(--ease), transform .35s var(--ease);
}
.service-bullets li:hover .tick{ background:var(--red); transform:rotate(225deg) scale(1.15); }

@media (max-width: 860px){
  .service-row, .service-row.reverse{ grid-template-columns:1fr; gap:22px; }
  .service-row.reverse .service-media, .service-row.reverse .service-copy{ order:initial; }
  .service-copy{ max-width:none; }
}

/* ============================================================
   LEASING & INVESTMENT PAGE — process timeline connector +
   extra premium polish for the "How It Works" numbered list
   ============================================================ */

/* vertical connector line threading through the step icons,
   like a surveyor's plumb line running down the page */
.why-list{
  position:relative;
}
.why-list::before{
  content:"";
  position:absolute;
  top:58px; bottom:58px; left:28px;
  width:1px;
  background:repeating-linear-gradient(
    180deg,
    var(--line-red) 0 6px,
    transparent 6px 12px
  );
  opacity:0;
  transition:opacity .6s var(--ease) .3s;
  z-index:0;
}
.why-list:hover::before,
.why-list.in-view::before{ opacity:.7; }

.why-item{ z-index:1; }

/* idle micro-pulse on the icon rings so the process feels "alive"
   even before the visitor hovers, reduced-motion users are exempt
   via the existing global media query */
.why-icon{
  animation:iconIdlePulse 4.6s ease-in-out infinite;
}
.why-item:nth-child(2) .why-icon{ animation-delay:.4s; }
.why-item:nth-child(3) .why-icon{ animation-delay:.8s; }
.why-item:nth-child(4) .why-icon{ animation-delay:1.2s; }
.why-item:nth-child(5) .why-icon{ animation-delay:1.6s; }
@keyframes iconIdlePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(195,20,50,0); }
  50%{ box-shadow:0 0 0 6px rgba(195,20,50,.06); }
}
.why-item:hover .why-icon{ animation-play-state:paused; }

/* number chip gets a subtle lift + color pop on hover, echoing the
   card .num treatment used for "Who This Is For" */
.card .num{ position:relative; }
.card:hover .num{ color:var(--red-deep); transform:translateX(2px); transition:color .35s var(--ease), transform .35s var(--ease); }

/* diff-item mark: a touch more presence for the "Why This Model
   Works" band so the crosses feel more like drafting instruments */
.diff-item .mark::before, .diff-item .mark::after{ border-radius:1px; }

/* closing CTA section sits directly after a red band; give it a
   touch more separation and depth */
.closing.hero{ box-shadow: inset 0 12px 24px -12px rgba(0,0,0,.35); }

@media (max-width: 640px){
  .why-list::before{ left:20px; }
}

/* ============================================================
   PROJECTS PAGE — gallery thumbnails with crosshair hover accent
   + track-record stat callout
   ============================================================ */

.project-thumb{
  position:relative;
}
.project-thumb .imgbox{
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
}
.project-thumb .imgbox img{
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.project-thumb:hover .imgbox img{ transform:scale(1.08); filter:saturate(1.1); }

.project-thumb .imgbox::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid transparent;
  box-shadow:0 0 0 0 rgba(195,20,50,0);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease);
  pointer-events:none;
}
.project-thumb:hover .imgbox::after{
  border-color:var(--line-red);
  box-shadow:0 22px 46px -22px rgba(195,20,50,.4);
}

/* corner crosshair draw-in, same registration-mark language as the hero */
.project-thumb .imgbox::before{ content:none; }
.project-thumb .imgbox span.corner{
  position:absolute; z-index:2;
  width:16px; height:16px;
  border:1.5px solid var(--red-bright);
  opacity:0;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events:none;
}

/* implemented purely in CSS using pseudo-elements since markup has no extra spans */
.project-thumb .imgbox{ isolation:isolate; }
.project-thumb .imgbox::before{
  content:"";
  position:absolute; top:10px; left:10px; z-index:2;
  width:16px; height:16px;
  border:1.5px solid var(--red-bright);
  border-right:none; border-bottom:none;
  opacity:0;
  transform:translate(-6px,-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.project-thumb:hover .imgbox::before{ opacity:1; transform:translate(0,0); }

.project-thumb .placeholder-label{ transition:opacity .4s var(--ease); }
.project-thumb:hover .placeholder-label{ opacity:.85; }

/* subtle scale + shadow lift on the whole thumbnail so it feels tactile */
.project-thumb{ transition:transform .4s var(--ease); }
.project-thumb:hover{ transform:translateY(-4px); }

/* stat callout figure sizing consistency with the rest of the site's
   numeric emphasis (see .stat / .card .num) */
.stat .figure{ line-height:1; }

@media (max-width: 640px){
  .project-thumb .imgbox::before{ width:12px; height:12px; }
}

/* ============================================================
   CONTACT PAGE — animated form fields + icon contact list
   ============================================================ */

form{ max-width:480px; }

.form-field{
  position:relative;
  margin-bottom:26px;
}
.form-field label{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
  transition:color .3s var(--ease);
}
.form-field:focus-within label{ color:var(--red); }

.form-field input,
.form-field textarea{
  width:100%;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:10px 2px;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  transition:border-color .3s var(--ease);
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--ink-faint); }
.form-field input:focus,
.form-field textarea:focus{ outline:none; }
.form-field textarea{ resize:vertical; min-height:120px; line-height:1.5; }

/* animated underline that draws in on focus, echoing the nav-link
   and eyebrow underline language used elsewhere on the site */
.form-field::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px;
  background:linear-gradient(90deg, var(--red-deep), var(--red-bright));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.form-field:focus-within::after{ transform:scaleX(1); }

form .btn-primary{ margin-top:6px; }

/* contact details list — icon circle + label, same idle-pulse and
   hover-fill language as .why-icon elsewhere on the site */
.contact-info{ display:flex; flex-direction:column; gap:20px; }
.contact-info li{
  display:flex; align-items:center; gap:16px;
}
.contact-icon{
  width:44px; height:44px; flex:none;
  border:1px solid var(--line-red);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  position:relative;
  transition:transform .5s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.contact-icon svg{ width:19px; height:19px; }
.contact-info li:hover .contact-icon{
  background:var(--red); border-color:var(--red); color:#fff;
  transform:rotate(360deg) scale(1.08);
  box-shadow:0 10px 20px -10px rgba(195,20,50,.55);
}
.contact-label{
  display:block;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:2px;
}
.contact-info a{
  color:var(--ink);
  font-weight:600;
  transition:color .3s var(--ease);
}
.contact-info li:hover a{ color:var(--red-deep); }

@media (max-width: 640px){
  .contact-icon{ width:38px; height:38px; }
  .contact-icon svg{ width:16px; height:16px; }
}