/* ==========================================================
   INTERNAL PAGES — About & Contact
   Extends the homepage design system. No new tokens, no new
   component language — only new compositions using what exists.
   ========================================================== */

/* ---- Shared: page hero base (both pages use a lighter hero
   than the homepage — calmer entrance for an internal page) ---- */
.page-hero{
  position:relative;
  padding-top:calc(var(--space-section) + 44px);
  padding-bottom:var(--space-section);
}

/* ==========================================================
   ABOUT — HERO
   Image 55–65% / text 35–45%, image breaks the grid edge.
   ========================================================== */
.about-hero{
  background:radial-gradient(ellipse 70% 55% at 85% 15%, var(--blue-06) 0%, transparent 60%);
}
.about-hero .arch-grid{--grid-origin-x:88%;--grid-origin-y:25%;opacity:.55;}
.about-hero-grid{position:relative;z-index:1;align-items:center;}
.about-hero-copy{grid-column:1 / 5;}
.about-hero-visual{grid-column:5 / 13;position:relative;}
.about-hero-photo{aspect-ratio:16/11;}
.about-hero-visual .crosshair{top:-7px;left:32px;}

.about-hero-copy .eyebrow{margin-bottom:26px;}
.about-hero-copy h1{
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  margin-bottom:24px;
}
.about-hero-copy .lead{
  font-size:var(--fs-lead);
  color:var(--muted);
  margin-bottom:36px;
  max-width:38ch;
}
.about-hero-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}

/* ==========================================================
   ABOUT — INTRODUCTION (philosophy statement)
   Large statement left / explanation right, asymmetrical.
   ========================================================== */
.about-intro{
  position:relative;
  padding:var(--space-section) 0;
  background:var(--bg-gray);
}
.about-intro-grid{align-items:center;}
.about-intro-statement{grid-column:1 / 6;}
.about-intro-statement h2{font-size:var(--fs-h1);max-width:11ch;margin-bottom:32px;}
.about-intro-tag{max-width:280px;}
.about-intro-body{grid-column:7 / 13;}
.about-intro-body p{font-size:var(--fs-lead);color:var(--muted);max-width:52ch;margin-bottom:var(--space-block);}
/* Restructured: this list used to live inside .about-intro-body,
   stretching the right column much taller than the left — even after
   centering the two columns vertically, a 2-line heading can't
   visually balance against ~9 lines of paragraph text plus a 4-item
   list. Moved out as its own full-width row below both columns
   instead, laid out horizontally — shortens the right column and
   gives the checklist a cleaner, more intentional treatment than a
   cramped narrow list. */
.about-intro-checks-row{
  margin-top:var(--space-block);
  padding-top:28px;
  border-top:1px solid rgba(44,85,120,.2);
}
.about-intro-checks{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.about-intro-checks.cols-3{grid-template-columns:repeat(3, 1fr);}
.about-intro-checks li{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;
  background:var(--white);
  border:1px solid rgba(44,85,120,.15);
  border-radius:var(--radius);
  font-size:15px;font-weight:500;color:var(--text);
  transition:border-color .25s var(--ease), transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.about-intro-checks li:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(11,31,46,.09);
}
.about-intro-checks li .icon-badge{flex-shrink:0;transition:border-color .25s var(--ease), color .25s var(--ease);}
.about-intro-checks li:hover .icon-badge{border-color:var(--accent);color:var(--accent);}

/* ==========================================================
   ABOUT — VALUES (vertical editorial list, hover interaction)
   ========================================================== */
.about-values{
  position:relative;
  padding:var(--space-section) 0;
  background:var(--bg-light);
}

/* ---- Project type chips (Commercial/Residential "Types of Projects") ---- */
.project-types{
  position:relative;
  padding:var(--space-section) 0;
  background:var(--bg-gray);
}
.project-types-list{
  margin-top:var(--space-block);
  display:flex;flex-wrap:wrap;gap:14px;
}
.project-type-chip{
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;
  border:1px solid rgba(44,85,120,.25);
  border-radius:var(--radius);
  font-size:15px;font-weight:600;color:var(--navy);
  background:var(--white);
}
.project-type-chip svg{flex-shrink:0;color:var(--accent);}

/* ---- Service Areas page ---- */
.service-areas-list{
  margin-top:var(--space-block);
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.service-area-item{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;
  border:1px solid rgba(44,85,120,.2);
  border-radius:var(--radius);
  font-size:15px;color:var(--navy);font-weight:500;
}
.service-area-item .icon-badge{flex-shrink:0;}
.about-values > .container > .eyebrow{max-width:var(--container-content);}
.value-list{border-top:1px solid rgba(44,85,120,.2);}
.value-row{
  position:relative;
  padding:36px 0;
  border-bottom:1px solid rgba(44,85,120,.2);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  align-items:baseline;
  transition:padding-left .4s var(--ease-soft);
}
.value-row::before{
  content:'';
  position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent);
  transition:width .45s var(--ease-soft);
}
.value-row:hover::before,
.value-row:focus-within::before{width:100%;}
.value-row:hover,
.value-row:focus-within{padding-left:16px;}
.value-title{grid-column:1 / 5;display:flex;align-items:center;gap:16px;}
.value-row:hover .value-title .icon-badge,
.value-row:focus-within .value-title .icon-badge{border-color:var(--accent);color:var(--accent);}
.value-title h3{font-size:var(--fs-h3);}
.value-copy{grid-column:5 / 13;color:var(--muted);font-size:16px;max-width:52ch;}

/* ==========================================================
   ABOUT — ARCHITECTURAL STORYTELLING BREAK
   Large image, subtle overlay + parallax, restrained statement.
   ========================================================== */
.storytelling{
  position:relative;
  overflow:hidden;
  min-height:clamp(420px, 60vw, 640px);
  background:linear-gradient(160deg, var(--navy-secondary) 0%, var(--navy) 100%);
}
.storytelling-media{
  position:absolute;inset:-6% 0;
  background:inherit;
  will-change:transform;
}
.storytelling-media.storytelling-media-image{
  width:100%;height:112%; /* the -6% inset on top/bottom needs the real image taller than 100%, matching the placeholder's background sizing */
  object-fit:cover;
}
.storytelling::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, var(--navy-70) 0%, var(--navy-40) 45%, var(--navy-70) 100%);
}
.storytelling-content{
  position:relative;z-index:1;
  min-height:clamp(420px, 60vw, 640px); /* matches .storytelling's own min-height so this centers correctly on its own, instead of depending on a percentage of the parent's height (which would be circular now that the parent uses min-height instead of a fixed height) */
  display:flex;align-items:center;
}
.storytelling-inner{max-width:620px;}
.storytelling-content .eyebrow{color:rgba(246,247,245,.6);margin-bottom:16px;}
.storytelling h2{
  color:var(--white);
  font-size:clamp(32px, 5vw, 64px);
  line-height:1.15;
}
.storytelling-lead{
  color:rgba(246,247,245,.75);
  font-size:var(--fs-lead);
  max-width:52ch;
  margin-top:20px;
}
.storytelling-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding-bottom:32px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:rgba(246,247,245,.5);
}

/* ==========================================================
   ABOUT — TRUST (typographic, no invented stats)
   ========================================================== */
.trust{padding:var(--space-section) 0;}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gutter);
  border-top:1px solid rgba(44,85,120,.2);
}
.trust-item{
  padding:32px 0;
  border-bottom:1px solid rgba(44,85,120,.2);
}
.trust-item:not(:last-child){border-right:1px solid rgba(44,85,120,.2);}
.trust-item .label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;margin-bottom:14px;display:block;
}
.trust-item .value{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--navy);}

/* ==========================================================
   ABOUT / SHARED — CTA (visually connects to homepage final CTA)
   ========================================================== */
.page-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;
}
.page-cta .arch-mesh{--grid-origin-x:75%;}
.page-cta-grid{position:relative;z-index:1;align-items:end;}
.page-cta-copy{grid-column:1 / 8;}
.page-cta h2{color:var(--white);font-size:var(--fs-h1);margin-bottom:22px;}
.page-cta p{color:rgba(246,247,245,.65);font-size:var(--fs-lead);max-width:48ch;margin-bottom:36px;}

/* ==========================================================
   CONTACT — HERO (calm, confident, not oversized)
   ========================================================== */
.contact-hero{
  background:radial-gradient(ellipse 70% 55% at 15% 20%, var(--blue-06) 0%, transparent 60%);
  padding-bottom:calc(var(--space-section) * 0.6);
}
.contact-hero .arch-grid{--grid-origin-x:20%;--grid-origin-y:25%;opacity:.5;}
.contact-hero-inner{position:relative;z-index:1;max-width:var(--container-content);margin:0 auto;padding:0 var(--outer-margin);}
.contact-hero .eyebrow{margin-bottom:24px;}
.contact-hero h1{
  font-size:clamp(38px, 5vw, 60px);
  line-height:var(--lh-tight);
  margin-bottom:22px;
}
.contact-hero p{font-size:var(--fs-lead);color:var(--muted);max-width:50ch;}

/* ==========================================================
   CONTACT — TWO-COLUMN LAYOUT
   ========================================================== */
.contact-layout{padding-bottom:var(--space-section);}
.contact-grid{align-items:start;}
.contact-info{grid-column:1 / 5;}
.contact-info-block{
  display:flex;align-items:flex-start;gap:16px;
  padding:24px 0;
  border-top:1px solid rgba(44,85,120,.2);
}
.contact-info-block:last-child{border-bottom:1px solid rgba(44,85,120,.2);}
.contact-info-text{flex:1;}
.contact-info-block .label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:block;
}
.contact-info-block .value{font-size:17px;color:var(--navy);font-weight:500;}
.contact-info-block .value a{border-bottom:1px solid var(--blue-20);}
.contact-info-block .value a:hover{border-color:var(--accent);}

.contact-reassurance{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid rgba(44,85,120,.2);
  color:var(--muted);
  font-size:14.5px;
  max-width:40ch;
}

.contact-form-col{grid-column:6 / 13;}

/* ==========================================================
   FORM — elegant, minimal, no rounded cards / heavy shadows
   ========================================================== */
.form{display:flex;flex-direction:column;gap:0;}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
}
.field{
  position:relative;
  padding:22px 0 14px;
  border-bottom:1px solid rgba(44,85,120,.28);
  transition:border-color .3s var(--ease);
}
.field::after{
  content:'';
  position:absolute;left:0;bottom:-1px;height:1.5px;width:0;
  background:var(--accent);
  transition:width .35s var(--ease-soft);
}
.field.is-focused::after,
.field.is-filled::after{width:100%;}
.field.is-focused{border-color:transparent;}

.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}
.field label .req{color:var(--accent);margin-left:4px;}

.field input,
.field select,
.field textarea{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  padding:0;
  outline:none;
}
.field textarea{resize:vertical;min-height:64px;line-height:1.6;}
.field select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:none;padding-right:24px;}
.field-select-wrap{position:relative;}
.field-select-wrap::after{
  content:'';
  position:absolute;right:2px;top:50%;
  width:8px;height:8px;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}

.field-hint{
  font-size:12.5px;color:var(--muted);margin-top:8px;
}
.field-error{
  display:none;
  font-size:12.5px;color:#b5502e;margin-top:8px;
}
.field.has-error{border-color:#b5502e;}
.field.has-error .field-error{display:block;}
.field.has-error::after{background:#b5502e;width:100%;}

.form-submit{
  margin-top:36px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.form-submit button[aria-busy="true"]{opacity:.6;cursor:progress;}

.form-success{
  display:none;
  padding:28px 0;
  border-top:1px solid rgba(44,85,120,.2);
}
.form-success.is-visible{display:block;}
.form-success .mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border:1px solid var(--accent);
  margin-bottom:16px;
}
.form-success h3{font-size:22px;margin-bottom:8px;}
.form-success p{color:var(--muted);font-size:15px;max-width:44ch;}

/* Error variant — same shape as the success banner, orange/red accent
   instead of the confirmation checkmark, rendered above the form so
   the visitor sees it before re-attempting. */
.form-error-banner{border-top-color:#b5502e;margin-bottom:8px;}
.form-error-banner h3{color:#b5502e;}

/* Honeypot: present in the DOM (so basic bots that fill every field
   get caught) but invisible and unreachable by keyboard/AT for real
   visitors — off-screen instead of display:none, which some bots
   are smart enough to skip. */
.imperium-honeypot{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* ==========================================================
   CONTACT — SUPPORTING INFORMATION STRIP (tonal contrast)
   ========================================================== */
.contact-strip{
  position:relative;
  background:var(--navy-secondary);
  color:var(--white);
  padding:var(--space-block) 0;
}
.contact-strip .arch-grid{--grid-origin-x:50%;--grid-origin-y:50%;opacity:.35;}
.contact-strip-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.contact-strip p{font-size:16px;color:rgba(246,247,245,.75);}
.contact-strip .measurement-line{max-width:280px;}

/* ==========================================================
   PROJECTS — filterable directory
   ========================================================== */
.projects-section{padding:var(--space-section) 0;}
.projects-header{margin-bottom:var(--space-block);}
.projects-header h2{font-size:var(--fs-h1);max-width:14ch;}

.project-filters{
  display:flex;flex-wrap:wrap;gap:0 28px;
  margin-bottom:var(--space-block);
  border-bottom:1px solid rgba(44,85,120,.2);
}
.project-filter{
  position:relative;
  display:inline-block;
  padding:12px 0;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
  background:none;border:none;
  transition:color .25s var(--ease);
}
.project-filter::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-soft);
}
.project-filter:hover{color:var(--navy);}
.project-filter.is-active{color:var(--navy);font-weight:600;}
.project-filter.is-active::after{transform:scaleX(1);}

.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gutter) var(--gutter);
}
.project-card.is-hidden{display:none;}
.project-card-link{display:block;}
.project-card-visual{
  position:relative;
  aspect-ratio:4/3;
  margin-bottom:16px;
  overflow:hidden;
}
.project-card-visual .photo{position:absolute;inset:0;}
.project-card:hover .photo-media{transform:scale(1.045);}
.project-card:hover .photo-overlay{opacity:.25;}
.project-card-tag{
  display:block;color:var(--accent);
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:8px;
}
.project-card-copy h3{font-size:19px;color:var(--navy);margin-bottom:4px;font-weight:600;}
.project-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-soft);}
.project-card:hover .project-card-image{transform:scale(1.045);}
.project-card-location{display:block;color:var(--muted);font-size:13.5px;}

.project-empty{padding:48px 0;color:var(--muted);text-align:center;font-size:13px;letter-spacing:.04em;}

/* Server-side pagination (WP paginate_links() output, type=list) */
.project-pagination{margin-top:var(--space-block);}
.project-pagination ul{
  display:flex;flex-wrap:wrap;gap:6px;
  list-style:none;margin:0;padding:0;
}
.project-pagination li{display:flex;}
.project-pagination a,
.project-pagination span{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;
  font-family:var(--font-mono);font-size:13px;
  color:var(--navy);
  border:1px solid rgba(44,85,120,.25);
  border-radius:var(--radius);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.project-pagination a:hover{border-color:var(--accent);}
.project-pagination span.current{
  background:var(--navy);color:var(--white);border-color:var(--navy);
}
.project-pagination span.dots{border-color:transparent;color:var(--muted);}

/* ==========================================================
   SINGLE PROJECT
   ========================================================== */
.project-single-hero{
  position:relative;
  padding:calc(var(--space-section) * 0.6) 0 var(--space-block);
  background:radial-gradient(ellipse 70% 55% at 85% 15%, var(--blue-06) 0%, transparent 60%);
}
.project-single-hero .arch-grid{--grid-origin-x:85%;--grid-origin-y:20%;opacity:.5;}
.project-single-crumb{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--muted);
  margin-bottom:22px;
}
.project-single-crumb a{border-bottom:1px solid var(--blue-20);}
.project-single-crumb a:hover{color:var(--navy);border-color:var(--accent);}
.project-single-hero h1{
  position:relative;z-index:1;
  font-size:var(--fs-h1);
  max-width:16ch;
  margin-bottom:18px;
}
.project-single-meta{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:14px;color:var(--muted);
}
.project-single-meta strong{color:var(--navy);font-weight:600;}

.project-single-cover{
  position:relative;
  aspect-ratio:16/9;
  margin-bottom:var(--space-block);
  overflow:hidden;
}
.project-single-cover img{width:100%;height:100%;object-fit:cover;display:block;}

.project-single-body{padding-bottom:var(--space-section);}
.project-single-grid{align-items:start;}
.project-single-content{grid-column:1 / 9;}
.project-single-content .entry-content{
  color:var(--muted);font-size:17px;line-height:1.75;max-width:64ch;
}
.project-single-content .entry-content p{margin-bottom:1.4em;}
.project-single-content .entry-content p:last-child{margin-bottom:0;}

.project-single-sidebar{
  grid-column:9 / 13;
  border-top:1px solid rgba(44,85,120,.2);
}
.project-single-fact{
  padding:20px 0;
  border-bottom:1px solid rgba(44,85,120,.2);
}
.project-single-fact .label{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.project-single-fact .value{font-size:16px;color:var(--navy);font-weight:600;}
.project-single-sidebar .btn{width:100%;justify-content:center;margin-top:24px;}

.project-single-gallery{
  margin-top:var(--space-section);
}
.project-single-gallery .eyebrow{margin-bottom:var(--space-block);}
.project-gallery-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--gutter);
}
.project-gallery-grid figure{aspect-ratio:4/3;overflow:hidden;margin:0;}
.project-gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-soft);}
.project-gallery-grid a:hover img{transform:scale(1.04);}