/* ==========================================================
   SECTIONS — each section has its own composition,
   sharing the same 12-column grid system and design tokens.
   ========================================================== */

.grid-12{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
}

/* ==========================================================
   HERO
   Grid: text 1–6 / image 7–12
   Depth: soft radial gradient + faint architectural grid behind
   the image, partially hidden — "drawing emerging", not wallpaper.
   ========================================================== */
.hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  min-height:100svh; /* modern browsers: excludes mobile URL-bar chrome from the calc */
  display:flex;
  align-items:center;
  padding-top:114px; /* clears the fixed header with a small buffer, regardless of scroll state */
  padding-bottom:48px;
  background:radial-gradient(ellipse 80% 60% at 78% 20%, var(--blue-06) 0%, transparent 60%);
}
.hero .arch-grid{--grid-origin-x:78%;--grid-origin-y:30%;opacity:.6;}
.hero > .container{width:100%;} /* .hero is now a flex container (for vertical centering); without an explicit width the container would shrink-wrap instead of filling it */
.hero-grid{position:relative;z-index:1;align-items:center;width:100%;}
.hero-copy{grid-column:1 / 7;}
.hero-visual{grid-column:7 / 13;position:relative;}
.hero-visual .crosshair{top:-7px;right:38px;}

.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.hero-h1{
  font-size:var(--fs-hero);
  line-height:var(--lh-tight);
  margin-bottom:20px;
}
.hero-h1 .line-accent{color:var(--blueprint);}
.hero-lead{
  font-size:var(--fs-lead);
  color:var(--muted);
  max-width:48ch;
  margin-bottom:30px;
}
.hero-ctas{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}

.hero-photo{
  width:100%;
  height:min(58vh, 560px); /* fixed height instead of aspect-ratio — an aspect-ratio box gets narrower (not just shorter) once max-height kicks in, which is what was leaving a gap before the header's right edge. A fixed height lets width always fill the full column. */
  border-radius:var(--radius);
}

.hero-meta-line{
  position:relative;z-index:1;
  margin-top:clamp(32px,4vw,56px);
  padding-top:20px;
}
.hero-meta-line .measurement-line{max-width:520px;}

/* ==========================================================
   COMPANY INTRODUCTION
   "From the first blueprint to the final walkthrough."
   Statement + image, no cards.
   ========================================================== */
.introduction{
  position:relative;
  overflow:hidden;
  background:linear-gradient(165deg, var(--navy-secondary) 0%, var(--navy) 55%);
  color:var(--white);
  padding:var(--space-section) 0;
}
.introduction .arch-grid{--grid-origin-x:15%;--grid-origin-y:20%;opacity:.5;}
.introduction-grid{position:relative;z-index:1;align-items:center;}
.introduction-statement{grid-column:1 / 6;}
.introduction-statement h2{
  color:var(--white);
  font-size:var(--fs-h1);
  line-height:1.15;
  margin-bottom:32px;
}
.introduction-tag{max-width:320px;}
.introduction-body{grid-column:7 / 13;}
.introduction-body p{
  font-size:var(--fs-lead);
  color:rgba(246,247,245,.7);
  max-width:56ch;
  margin-bottom:var(--space-block);
}
.introduction-list{
  border-top:1px solid rgba(246,247,245,.18);
}
.introduction-list li{
  display:flex;align-items:center;gap:18px;
  padding:18px 0;
  border-bottom:1px solid rgba(246,247,245,.18);
  font-family:var(--font-display);
  font-size:clamp(19px,2vw,24px);
  font-weight:600;
}

/* ==========================================================
   WHAT WE BUILD
   Two large editorial service compositions — not cards.
   ========================================================== */
.what-we-build{
  position:relative;
  padding:var(--space-section) 0;
  /* Soft blue surface: same light background, low-opacity blueprint tint */
  background:linear-gradient(180deg, var(--bg-light) 0%, #eef1ee 100%);
}
.what-we-build .eyebrow,
.what-we-build > .container > h2{max-width:var(--container-content);}
.what-we-build > .container > h2{
  font-size:var(--fs-h1);
  margin-bottom:var(--space-section);
  max-width:14ch;
}

/* Reused by the homepage's dynamic "Featured Projects" section (Phase 4) —
   same soft-blue surface, but a shorter heading margin since a project
   grid follows immediately instead of the two large service panels. */
.featured-projects > .container > h2{margin-bottom:var(--space-block);}
.what-we-build .project-grid{margin-top:var(--space-block);}
.what-we-build .featured-projects-cta{margin-top:var(--space-block);}

.service{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
  align-items:center;
  padding:var(--space-block) 0;
}
.service + .service{border-top:1px solid rgba(44,85,120,.2);}

.service--commercial .service-visual{grid-column:1 / 8;}
.service--commercial .service-copy{grid-column:9 / 13;}

.service--residential .service-copy{grid-column:1 / 5;}
.service--residential .service-visual{grid-column:6 / 13;}

.service-photo{aspect-ratio:16/10;}
.service-copy h3{font-size:var(--fs-h2);margin-bottom:18px;}
.service-copy p{color:var(--muted);max-width:38ch;margin-bottom:26px;font-size:17px;}

/* ==========================================================
   ABOUT IMPERIUM BUILDERS
   Grid: image 1–7 / content 8–12. Typographic differentiator list.
   ========================================================== */
/* ==========================================================
   TESTIMONIALS — simple editorial quote strip, no cards
   ========================================================== */
.testimonials{position:relative;padding:var(--space-section) 0;background:var(--bg-light);}
.testimonials-grid{
  margin-top:var(--space-block);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
}
.testimonial{position:relative;padding-top:8px;}
.testimonial-mark{
  display:block;
  font-family:var(--font-display);font-size:52px;line-height:1;
  color:var(--accent);
  margin-bottom:4px;
}
.testimonial blockquote{
  margin:0 0 20px;
  font-size:17px;line-height:1.6;color:var(--navy);
}
.testimonial figcaption{display:flex;flex-direction:column;gap:2px;}
.testimonial-name{font-weight:600;color:var(--navy);font-size:14.5px;}
.testimonial-role{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
}

.about{position:relative;padding:var(--space-section) 0;}
.about .corner-frame.br{opacity:.7;}
.about-grid{position:relative;align-items:start;}
.about-visual{
  grid-column:1 / 8;
  position:sticky;
  top:120px;
  align-self:start;
}
.about-photo{
  height:clamp(380px, 42vw, 560px); /* predefined, capped height instead of aspect-ratio — a wide column at 5:4 made this section far taller than the copy needed. The placeholder still fills the block exactly via .photo-media's absolute inset:0. */
}
/* Image allowed to slightly overlap the section boundary — architectural layering */
.about-visual::after{
  content:'';
  position:absolute;left:-24px;top:-24px;right:24px;bottom:24px;
  border:1px solid var(--blue-20);
  z-index:-1;
}
.about-copy{grid-column:8 / 13;position:relative;}
.about-copy h2{font-size:var(--fs-h1);margin-bottom:26px;max-width:12ch;}
.about-lead{font-size:var(--fs-lead);color:var(--muted);max-width:44ch;margin-bottom:28px;}

.about-points{border-top:1px solid rgba(44,85,120,.2);margin-bottom:32px;}
.about-point{
  padding:22px 0;
  border-bottom:1px solid rgba(44,85,120,.2);
}
.about-point-title{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.about-point h3{font-size:18px;font-weight:600;}
.about-point p{color:var(--muted);font-size:15px;max-width:40ch;}

/* ==========================================================
   CLIENT PORTAL
   Statement (left) + editorial list of capabilities (right).
   Soft blue surface — contrasts against About (plain light)
   before Process (dark navy), instead of stacking two dark sections.
   ========================================================== */
.client-portal{
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 18% 15%, var(--blue-10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 100%, var(--blue-06) 0%, transparent 55%),
    var(--bg-light);
  color:var(--text);
  padding:var(--space-section) 0;
}
.client-portal .arch-grid{--grid-origin-x:20%;--grid-origin-y:70%;opacity:.5;}

.portal-intro{position:relative;z-index:1;max-width:56ch;margin-bottom:var(--space-block);}
.portal-intro h2{color:var(--navy);font-size:var(--fs-h1);margin:16px 0 20px;}
.portal-lead{color:var(--muted);font-size:var(--fs-lead);max-width:52ch;margin-bottom:24px;}

/* ---- Showcase: real product screenshots, auto-advancing, synced caption ---- */
.portal-showcase{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gutter);
  align-items:center;
}

.browser-frame{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
  box-shadow:0 24px 60px rgba(11,31,46,.14);
  border:1px solid rgba(44,85,120,.12);
}
.browser-frame-bar{
  display:flex;align-items:center;gap:6px;
  padding:11px 14px;
  background:#eef0ee;
  border-bottom:1px solid rgba(44,85,120,.12);
}
.browser-dot{width:9px;height:9px;border-radius:50%;background:rgba(44,85,120,.25);}

.portal-slides{position:relative;width:100%;aspect-ratio:16/9.3;background:var(--bg-light);}
.portal-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease-soft);
}
.portal-slide.is-active{opacity:1;visibility:visible;z-index:1;}
.portal-slide img{width:100%;height:100%;object-fit:contain;object-position:top center;display:block;}

.portal-showcase-text{position:relative;}
.portal-caption{display:none;}
.portal-caption.is-active{display:block;}
.portal-caption-num{
  display:block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted);
  margin-bottom:14px;
}
.portal-caption h3{color:var(--navy);font-size:var(--fs-h3);margin-bottom:10px;}
.portal-caption p{color:var(--muted);font-size:16px;max-width:38ch;}

.portal-dots{display:flex;gap:10px;margin-top:28px;}
.portal-dot{
  width:34px;height:3px;
  background:rgba(44,85,120,.25);
  border:none;padding:0;cursor:pointer;
  transition:background-color .3s var(--ease);
}
.portal-dot.is-active{background:var(--accent);}
.portal-dot:hover{background:var(--blueprint);}
.portal-dot.is-active:hover{background:var(--accent);}

/* ---- Expand-to-lightbox trigger, overlaid on the screenshot ---- */
.portal-showcase-visual{position:relative;}
.portal-slides{cursor:zoom-in;}
.portal-slides:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.portal-expand-btn{
  position:absolute;
  top:47px;right:14px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:rgba(11,31,46,.78);
  color:var(--white);
  border:none;border-radius:var(--radius);
  cursor:pointer;
  opacity:0;
  transition:opacity .25s var(--ease), background-color .25s var(--ease);
}
.portal-showcase-visual:hover .portal-expand-btn,
.portal-expand-btn:focus-visible{opacity:1;}
.portal-expand-btn:hover,
.portal-expand-btn:focus-visible{background:var(--accent);color:var(--navy);}

/* Touch devices have no real hover state, so an opacity:0-until-hover
   button would simply never be seen — always show it there, plus a
   small persistent label so it reads as an intentional affordance
   rather than a stray icon. */
@media (hover:none){
  .portal-expand-btn{opacity:1;}
}
.portal-tap-hint{
  display:none;
  align-items:center;gap:6px;
  margin-top:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);
}
.portal-tap-hint svg{flex-shrink:0;width:13px;height:13px;}
@media (hover:none){
  .portal-tap-hint{display:flex;}
}
/* ---- Lightbox ---- */
.portal-lightbox{
  position:fixed;inset:0;z-index:300;
  display:none;
  align-items:center;justify-content:center;
  padding:64px 24px;
}
.portal-lightbox.is-open{display:flex;}
.portal-lightbox-backdrop{
  position:absolute;inset:0;
  background:rgba(11,31,46,.94);
}
.portal-lightbox-content{
  position:relative;z-index:1;
  max-width:1180px;width:100%;
  display:flex;flex-direction:column;align-items:center;
}
/* Fixed-ratio box reserved up front — the <img> itself uses
   object-fit:contain inside it, so the lightbox never collapses to a
   tiny size while a new image is still loading (which is what made
   the very first open look broken before its intrinsic size was
   known — combined with the is-open/sync ordering bug above). */
.portal-lightbox-image-frame{
  position:relative;
  width:100%;max-width:1100px;
  aspect-ratio:16/9.3;max-height:70vh;
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  overflow:hidden;
}
.portal-lightbox-image{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .3s var(--ease-soft);
}
.portal-lightbox-image.is-loaded{opacity:1;}
.portal-lightbox-close{
  position:absolute;top:-52px;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  background:transparent;
  border:1px solid rgba(246,247,245,.3);
  border-radius:var(--radius);
  color:var(--white);
  cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.portal-lightbox-close:hover,
.portal-lightbox-close:focus-visible{border-color:var(--accent);color:var(--accent);}
.portal-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  background:rgba(11,31,46,.7);
  border:1px solid rgba(246,247,245,.3);
  border-radius:50%;
  color:var(--white);
  cursor:pointer;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.portal-lightbox-nav:hover,
.portal-lightbox-nav:focus-visible{border-color:var(--accent);background:var(--accent);color:var(--navy);}
.portal-lightbox-prev{left:16px;}
.portal-lightbox-next{right:16px;}
.portal-lightbox-caption{margin-top:26px;text-align:center;max-width:56ch;}
.portal-lightbox-caption .portal-caption-num{color:rgba(246,247,245,.55);margin-bottom:10px;display:block;}
.portal-lightbox-caption h3{color:var(--white);font-size:var(--fs-h3);}

body.portal-lightbox-open{overflow:hidden;}
/* ==========================================================
   OUR PROCESS
   Grid: intro 1–4 / steps 6–12. Functional numbering (real sequence).
   ========================================================== */
.process{
  position:relative;
  background:linear-gradient(175deg, var(--navy-secondary) 0%, #0f2a3d 100%);
  color:var(--white);
  padding:var(--space-section) 0;
}
.process .arch-grid{--grid-origin-x:85%;--grid-origin-y:60%;opacity:.4;}
.process-grid{position:relative;z-index:1;align-items:start;}
.process-intro{grid-column:1 / 5;position:sticky;top:120px;align-self:start;}
.process-intro h2{color:var(--white);font-size:var(--fs-h1);margin-bottom:20px;}
.process-intro p{color:rgba(246,247,245,.65);font-size:var(--fs-lead);max-width:32ch;}

/* Interactive vertical progression: one step at a time gains contrast
   as it enters view (JS toggles .is-active). Progress line fills to match. */
.process-steps{
  grid-column:6 / 13;
  position:relative;
  display:flex;
  flex-direction:column;
  padding-left:32px;
}
.process-progress-line{
  position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:rgba(246,247,245,.18);
}
.process-progress-fill{
  position:absolute;left:0;top:6px;width:1px;height:0%;
  background:var(--accent);
  transition:height .4s var(--ease-soft);
}
.process-steps-list{display:contents;}
.process-step{
  position:relative;
  padding:36px 0;
  border-bottom:1px solid rgba(246,247,245,.14);
  opacity:.45;
  transition:opacity .5s var(--ease-soft);
}
.process-step:last-child{border-bottom:none;}
.process-step::before{
  content:'';
  position:absolute;left:-32.5px;top:44px;width:6px;height:6px;border-radius:50%;
  background:rgba(246,247,245,.3);
  transition:background-color .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.process-step.is-active{opacity:1;}
.process-step.is-active::before{background:var(--accent);transform:scale(1.5);}

.process-num{
  display:block;color:var(--accent);
  font-family:var(--font-mono);font-size:15px;letter-spacing:.04em;
  margin-bottom:16px;
}
.process-step h3{color:var(--white);font-size:var(--fs-h3);margin-bottom:10px;}
.process-step p{
  color:rgba(246,247,245,.6);font-size:15px;max-width:36ch;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease-soft), opacity .4s var(--ease-soft);
}
.process-step.is-active p{max-height:80px;opacity:1;}

/* ==========================================================
   AREAS WE SERVE
   Simple, restrained. No decorative map unless it earns its place.
   ========================================================== */
.areas{
  position:relative;
  padding:var(--space-section) 0;
  background:radial-gradient(ellipse 70% 60% at 15% 30%, var(--blue-06) 0%, transparent 65%), var(--bg-light);
}
.areas-grid{position:relative;align-items:center;}
.areas-copy{grid-column:1 / 6;}
.areas-copy h2{font-size:var(--fs-h1);margin-bottom:20px;max-width:11ch;}
.areas-copy p{color:var(--muted);font-size:var(--fs-lead);max-width:40ch;margin-bottom:32px;}
.areas-visual{grid-column:7 / 13;}
.areas-photo{aspect-ratio:16/9;}

/* ==========================================================
   FAQ
   ========================================================== */
/* ==========================================================
   FAQ
   Two-column editorial composition (matches Process/Portal/Areas):
   sticky heading + supporting statement on the left, accordion on
   the right. Soft blue surface so it reads as its own environment
   instead of blending flat into the sections beside it.
   ========================================================== */
.faq{
  position:relative;
  padding:var(--space-section) 0;
  background:
    radial-gradient(ellipse 75% 65% at 88% 15%, var(--blue-10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 5% 100%, var(--blue-06) 0%, transparent 55%),
    var(--bg-light);
}
.faq .arch-grid{--grid-origin-x:88%;--grid-origin-y:20%;opacity:.5;}
.faq .corner-frame.tl{opacity:.6;}
.faq-grid{position:relative;z-index:1;align-items:start;}
.faq-intro{grid-column:1 / 5;position:sticky;top:120px;align-self:start;}
.faq-intro h2{font-size:var(--fs-h1);margin:16px 0 20px;}
.faq-lead{color:var(--muted);font-size:16px;max-width:34ch;}
.faq-list{grid-column:6 / 13;}
.accordion{border-top:1px solid rgba(44,85,120,.2);}

/* ==========================================================
   FINAL CTA — visual climax
   Radial gradient depth + architectural mesh + noise.
   Restrained: still one CTA, no giant orange block.
   ========================================================== */
.final-cta{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 70% at 80% 15%, var(--orange-15) 0%, transparent 45%),
    radial-gradient(ellipse 100% 80% at 20% 100%, var(--blue-10) 0%, transparent 55%),
    linear-gradient(165deg, #0f2a3d 0%, var(--navy) 65%);
  color:var(--white);
  padding:var(--space-section) 0;
}
.final-cta .arch-mesh{--grid-origin-x:75%;}
.final-cta .corner-frame.on-dark{opacity:.6;}
.final-cta-grid{position:relative;z-index:1;align-items:end;}
.final-cta-copy{grid-column:1 / 8;}
.final-cta h2{color:var(--white);font-size:var(--fs-h1);margin-bottom:22px;}
.final-cta p{color:rgba(246,247,245,.65);font-size:var(--fs-lead);max-width:48ch;margin-bottom:36px;}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{background:var(--navy);color:var(--white);padding-top:var(--space-block);padding-bottom:32px;}
.footer-grid{padding-bottom:var(--space-block);border-bottom:1px solid rgba(246,247,245,.15);align-items:start;}
.footer-brand{grid-column:1 / 5;}
.footer-brand .logo-word{color:var(--white);}
.footer-brand .logo-sub{color:rgba(246,247,245,.5);}
.footer-tagline{color:rgba(246,247,245,.6);font-size:15px;margin:18px 0 24px;max-width:32ch;}

.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border:1px solid rgba(246,247,245,.2);
  color:rgba(246,247,245,.75);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.footer-social a:hover{border-color:var(--accent);color:var(--accent);}

.footer-services{grid-column:5 / 7;}
.footer-company{grid-column:7 / 9;}
.footer-contact{grid-column:9 / 13;}
.footer-col h4{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(246,247,245,.45);margin-bottom:18px;font-weight:500;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{color:rgba(246,247,245,.8);font-size:14.5px;}
.footer-col a:hover{color:var(--accent);}

.footer-contact-list{display:flex;flex-direction:column;gap:18px;}
.footer-contact-list li{display:flex;align-items:flex-start;gap:12px;}
.fc-text{display:flex;flex-direction:column;gap:4px;}
.fc-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(246,247,245,.4);
}
.fc-value{color:rgba(246,247,245,.8);font-size:14.5px;line-height:1.4;}
a.fc-value{transition:color .25s var(--ease);}
a.fc-value:hover{color:var(--accent);}

.footer-bottom{
  padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:12px;letter-spacing:.02em;color:rgba(246,247,245,.4);
}