/* ==========================================================================
   Armstrong Build — Design System
   Derived pixel-for-pixel from the Figma source (frame width 1440).
   Fonts: Jost (sans) + Cormorant Garamond (serif).
   ========================================================================== */

:root{
  /* Ink / dark surfaces */
  --ink:        #14130f;
  --ink-2:      #16140f;
  --ink-3:      #100f0c;
  --black:      #0d0d0d;

  /* Paper / light surfaces */
  --paper:      #fbf9f4;
  --paper-2:    #fdfbf6;
  --paper-3:    #f4f1ea;
  --paper-4:    #efebe2;
  --card:       #fffdf8;
  --hero-cream: #fdfcf9;

  /* Lines */
  --line:       #eae3d6;
  --line-2:     #e6dfd2;
  --line-3:     #e0d8c8;
  --line-4:     #d9d2c4;
  --line-grey:  #e2e2e2;

  /* Text */
  --text:        #16140f;
  --text-soft:   #54504a;
  --muted:       #8c8579;
  --muted-2:     #bdb4a3;
  --serif-num:   #b0a896;
  --quote:       #c8bfae;

  /* On-dark text */
  --on-dark:        #fdfbf6;
  --on-dark-muted:  #a39c8c;
  --on-dark-faint:  #cfc7b8;
  --footer-muted:   #9a9384;
  --footer-head:    #f6f2ea;

  /* Geometry */
  --gutter: 72px;
  --maxw: 1440px;
  --radius-btn: 4px;
  --radius-card: 18px;
  --radius-img: 14px;

  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ----------------------------------------------------------------- Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Clip any horizontal overflow site-wide. Entrance animations briefly translate
   elements sideways before they reveal; this guarantees no horizontal scrollbar
   ever appears, on any viewport, in any animation state. */
html,body{ overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:400;
  color:var(--text);
  background:var(--paper-2);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
p{ margin:0; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:inherit; }
ul{ margin:0; padding:0; list-style:none; }

/* ------------------------------------------------------------- Layout helpers */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ width:100%; }
.full-bleed{ width:100%; }

/* --------------------------------------------------------------- Typography */
.eyebrow{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:3px;
  color:var(--muted);
  text-transform:uppercase;
}
.eyebrow--dark{ color:var(--on-dark-muted); }
.serif{ font-family:var(--font-serif); }
.section-title{
  font-family:var(--font-serif);
  font-weight:300;
  color:var(--text);
  line-height:1.05;
  font-size:64px;
}
.section-title--60{ font-size:60px; }
.section-title--44{ font-size:44px; line-height:1.4; }
.section-title--light{ color:#fff; }

/* --------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-btn);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:13px;
  letter-spacing:2px;
  line-height:1;
  cursor:pointer;
  border:1px solid transparent;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
  white-space:nowrap;
  padding:18px 40px;
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:14px 32px; font-size:12px; letter-spacing:1.5px; }
.btn--xs{ padding:12px 24px; font-size:12px; letter-spacing:1.5px; }

.btn--dark{ background:var(--ink-2); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--outline-dark{ background:transparent; color:var(--black); border-color:var(--ink-2); }
.btn--outline-dark:hover{ background:var(--ink-2); color:#fff; }
.btn--white{ background:#fff; color:var(--black); }
.btn--white:hover{ background:var(--paper-3); }
.btn--outline-white{ background:transparent; color:#fff; border-color:#fff; }
.btn--outline-white:hover{ background:#fff; color:var(--black); }
.btn--outline-grey{ background:transparent; color:#fff; border-color:#555; }
.btn--outline-grey:hover{ background:#fff; color:var(--black); border-color:#fff; }

.cta-row{ display:flex; gap:16px; align-items:center; }
.cta-row--center{ justify-content:center; }

/* Inline arrow link ( VIEW ALL → ) */
.link-arrow{
  font-family:var(--font-sans);
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  white-space:nowrap;
  transition:opacity .2s ease, gap .2s ease;
}
.link-arrow:hover{ gap:.85em; opacity:.7; }
.link-arrow--light{ color:#fff; }

/* Round arrow buttons (carousels) */
.arrow-btn{
  width:54px;height:54px;border-radius:27px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;border:1px solid var(--line-3);
  background:#fff;color:var(--black);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.arrow-btn--dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.arrow-btn--ghost{ background:transparent; border-color:#cfc7b8; color:var(--ink); }
.arrow-btn:hover{ opacity:.85; }

/* ============================================================ HEADER */
.site-header{ position:relative; z-index:50; background:var(--paper); }
.site-header.is-sticky{ position:sticky; top:0; }

.utility-bar{
  background:var(--ink);
  color:var(--on-dark-faint);
  padding:10px var(--gutter);
}
.utility-bar__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.util-left{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
.util-item{ display:flex; gap:10px; align-items:center; font-size:12px; letter-spacing:.5px; color:var(--on-dark-faint); }
.util-item img{ width:14px;height:14px; }
.reviews-widget{ display:flex; gap:8px; align-items:center; font-size:12px; letter-spacing:.5px; }
.reviews-widget .stars{ display:flex; gap:2px; }
.reviews-widget .stars img{ width:13px;height:13px; }
.reviews-widget .score{ color:var(--on-dark); font-weight:500; }
.reviews-widget .count{ color:var(--on-dark-faint); }
.reviews-widget img.gicon{ width:14px;height:14px; }

.nav-bar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:20px var(--gutter);
}
.nav-bar__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{ height:58px; width:auto; display:block; flex-shrink:0; border-radius:3px; } /* refinement 2026-10-15: stop the logo being squeezed below ~500px */
.nav-logo img{ height:58px; width:auto; object-fit:contain; display:block; } /* 2026-10-22: final SVG wordmark (828.53 × 197.78 viewBox) — height-driven, width follows the intrinsic ratio */
.nav-logo:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-link{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-bottom:2px; font-size:13px; letter-spacing:1px; color:#333;
}
.nav-link .label{ font-family:var(--font-sans); font-weight:400; }
.nav-link.is-active{ color:var(--black); }
.nav-link.is-active .label{ font-weight:500; }
.nav-link .underline{ height:1.5px; border-radius:1px; background:var(--black); width:100%; opacity:0; transition:opacity .2s ease; }
.nav-link.is-active .underline,
.nav-link:hover .underline{ opacity:1; }

.nav-actions{ display:flex; gap:14px; align-items:center; }
.icon-btn{
  width:40px;height:40px;border-radius:20px;border:1px solid var(--line-3);
  background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.icon-btn img{ width:16px;height:16px; }
.icon-btn:hover{ background:#fff; border-color:var(--ink-2); }
.menu-grid-btn{
  width:44px;height:41px;border:1px solid var(--ink);border-radius:4px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background-color .2s ease;
}
.menu-grid-btn img{ width:18px;height:18px; }
.menu-grid-btn:hover{ background:var(--paper-3); }
.nav-toggle{ display:none; }

/* ============================================================ HERO */
.hero{ position:relative; height:880px; overflow:hidden; background:#f2f2f2; }
.hero__img{ position:absolute; inset:0; }
.hero__img img{ width:100%; height:100%; object-fit:cover; }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(13,13,11,0) 0%, rgba(13,13,11,.5) 100%),
    linear-gradient(90deg, rgba(13,13,11,.74) 0%, rgba(13,13,11,.3) 50%, rgba(13,13,11,.66) 100%);
}
.hero__copy{
  position:absolute; left:var(--gutter); top:396px; max-width:860px;
  display:flex; flex-direction:column; gap:24px; z-index:2;
}
.hero__kicker{ font-size:13px; letter-spacing:3px; color:rgba(232,226,214,.9); }
.hero__title{
  font-family:var(--font-serif); /* visual fallback */
  font-weight:300; color:var(--hero-cream); font-size:92px; line-height:.96; letter-spacing:-1.38px;
  font-family:var(--font-sans);
}
.hero__lede{ font-family:var(--font-sans); font-weight:300; font-size:18px; line-height:1.6; color:rgba(236,231,221,.92); max-width:560px; }

/* ============================================================ SECTION: POSITIONING */
.positioning{
  background:var(--paper-3); text-align:center;
  padding:140px var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:56px;
}
.positioning__statement{
  font-family:var(--font-serif); font-weight:300; color:var(--ink-2);
  font-size:44px; line-height:1.4; max-width:1040px;
}

/* ============================================================ SECTION HEADER (eyebrow + title row) */
.sec-pad{ padding:140px 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.sec-head__titles{ display:flex; flex-direction:column; gap:14px; }

/* ============================================================ SERVICES PREVIEW (carousel) */
.services-preview{ background:var(--paper-2); padding:140px 0; }
.services-preview__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-inline:var(--gutter); max-width:var(--maxw); margin-inline:auto; }
.head-actions{ display:flex; gap:24px; align-items:center; }
.carousel-track{
  /* 2026-10-15: the first card snaps to the same left content edge as the section heading
     (the gutter, or the centred 1440px container edge on wider screens) and the rest overflow
     to the right; scroll-padding keeps every snap stop on that edge. */
  --track-inset: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  position:relative; display:flex; gap:28px; align-items:stretch;
  padding-inline:var(--track-inset); scroll-padding-inline-start:var(--track-inset);
  margin-top:56px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
/* 2026-10-15: with the loop's lead-in clones there is always a card to the left of the current one;
   mask the gutter so nothing shows left of the content edge (the right side still overflows). */
.carousel-track{
  -webkit-mask-image:linear-gradient(to right, transparent calc(var(--track-inset) - 26px), #000 calc(var(--track-inset) - 2px));
  mask-image:linear-gradient(to right, transparent calc(var(--track-inset) - 26px), #000 calc(var(--track-inset) - 2px));
}
.service-tile{
  flex:0 0 400px; width:400px; background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--radius-card);
  box-shadow:0 12px 32px -6px rgba(26,18,8,.1);
  display:flex; flex-direction:column; overflow:hidden; scroll-snap-align:start;
  transition:transform .3s ease, box-shadow .3s ease;
}
.service-tile:hover{ transform:translateY(-6px); box-shadow:0 22px 48px -10px rgba(26,18,8,.18); }
.service-tile__img{ height:240px; overflow:hidden; }
.service-tile__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.service-tile:hover .service-tile__img img{ transform:scale(1.04); }
.service-tile__body{ padding:28px; display:flex; flex-direction:column; gap:14px; }
.service-tile__num{ font-family:var(--font-serif); font-weight:300; color:var(--muted-2); font-size:26px; }
.service-tile__name{ font-family:var(--font-serif); font-weight:500; color:var(--ink-2); font-size:27px; }
.service-tile__desc{ font-weight:300; line-height:1.55; color:var(--text-soft); font-size:13px; }
.service-tile__more{ font-size:12px; letter-spacing:1px; color:var(--ink-2); display:inline-flex; gap:.6em; }

/* ============================================================ FEATURED PROJECTS */
.featured{ background:var(--paper-2); padding:40px 0 140px; }
.featured__inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; flex-direction:column; gap:64px; }
.feature-large{ display:flex; flex-direction:column; gap:24px; }
.feature-large__img{ height:640px; border-radius:var(--radius-img); overflow:hidden; }
.feature-large__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.feature-large__img:hover img{ transform:scale(1.03); }
.feat-meta{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.feat-meta__name{ font-family:var(--font-serif); font-weight:500; color:var(--ink-2); font-size:30px; }
.feat-meta__sub{ color:var(--muted); font-size:14px; letter-spacing:.5px; margin-top:8px; }
.project-row{ display:flex; gap:40px; }
.project-card{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; color:inherit; }
.project-card:focus-visible, a.feature-large:focus-visible, .pf-card:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }
a.feature-large{ color:inherit; }
a.feature-large:hover .link-arrow{ gap:.85em; opacity:.7; }
.project-card__img{ height:440px; border-radius:var(--radius-img); overflow:hidden; }
.project-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.project-card:hover .project-card__img img{ transform:scale(1.03); }
.project-card__name{ font-family:var(--font-serif); font-weight:500; color:var(--ink-2); font-size:26px; }
.project-card__sub{ color:var(--muted); font-size:13px; letter-spacing:.5px; margin-top:6px; }

/* ============================================================ ONGOING (dark) */
.ongoing{ background:var(--ink); color:#fff; padding:120px 0; }
.ongoing__inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; flex-direction:column; gap:56px; }
.ongoing__lede{ font-weight:300; line-height:1.6; color:var(--on-dark-muted); font-size:16px; max-width:620px; }
.ongoing-row{ display:flex; gap:32px; }
.ongoing-card{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:18px; }
.ongoing-card__img{ height:460px; border-radius:var(--radius-img); overflow:hidden; }
.ongoing-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.ongoing-card:hover .ongoing-card__img img{ transform:scale(1.03); }
.tag{ display:inline-flex; align-self:flex-start; border:1px solid #333; padding:6px 12px; font-size:10px; letter-spacing:2px; color:#fff; }
.ongoing-card__name{ font-family:var(--font-serif); font-weight:500; color:#fff; font-size:24px; }
.ongoing-card__sub{ color:var(--on-dark-muted); font-size:13px; letter-spacing:.5px; margin-top:6px; }

/* ============================================================ PROCESS */
.process{ background:var(--paper-4); padding:140px 0; }
.process__inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; flex-direction:column; gap:72px; }
.process-grid{ display:flex; gap:40px; }
.process-step{ flex:1 1 0; min-width:0; border-top:1px solid var(--line-4); padding-top:24px; display:flex; flex-direction:column; gap:20px; }
.process-step__num{ font-family:var(--font-serif); font-weight:300; color:var(--serif-num); font-size:44px; }
.process-step__title{ font-family:var(--font-serif); font-weight:500; color:var(--ink-2); font-size:24px; }
.process-step__desc{ font-size:14px; line-height:1.55; color:var(--text-soft); }

/* ============================================================ CTA BAND (dark, blurred bg) */
.cta-band{ position:relative; background:var(--ink); color:#fff; padding:120px 0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center; }
.cta-band__bg{ position:absolute; inset:0; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; filter:blur(14px); transform:scale(1.1); }
.cta-band__scrim{ position:absolute; inset:0; background:rgba(20,19,15,.74); }
.cta-band__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:32px; }
.cta-band__title{ font-family:var(--font-serif); font-weight:300; font-size:62px; line-height:1.15; color:#fff; }
.cta-band__lede{ font-weight:300; line-height:1.6; font-size:17px; color:var(--on-dark-muted); max-width:560px; }

/* ============================================================ TESTIMONIALS */
.testimonials{ background:var(--paper-3); padding:130px 0; }
.testimonials__inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; flex-direction:column; gap:56px; }
.testi-card{
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:20px;
  box-shadow:0 18px 44px -8px rgba(26,18,8,.1); display:flex; min-height:540px; overflow:hidden;
}
.testi-card__img{ width:560px; flex-shrink:0; }
.testi-card__img img{ width:100%; height:100%; object-fit:cover; }
.testi-card__body{ flex:1 1 0; min-width:0; padding:72px; display:flex; flex-direction:column; justify-content:center; gap:28px; }
.testi-quote-mark{ font-family:var(--font-serif); font-weight:500; color:var(--quote); font-size:88px; line-height:.4; }
.testi-quote{ font-family:var(--font-serif); font-weight:300; color:var(--ink-2); font-size:32px; line-height:1.4; }
.testi-rule{ width:48px; height:1px; background:#d8d0c0; }
.testi-attr-name{ font-weight:500; color:var(--ink-2); font-size:15px; letter-spacing:.5px; }
.testi-attr-sub{ color:var(--muted); font-size:13px; letter-spacing:.5px; margin-top:5px; }
.carousel-controls{ display:flex; gap:20px; align-items:center; }
.carousel-controls .counter{ font-family:var(--font-serif); font-weight:300; color:var(--muted); font-size:22px; }
.carousel-controls .arrows{ display:flex; gap:12px; }

/* ============================================================ FOOTER */
.site-footer{ background:var(--ink-3); color:#fff; padding:110px var(--gutter) 48px; }
.site-footer__inner{ max-width:var(--maxw); margin-inline:auto; display:flex; flex-direction:column; gap:72px; }
.footer-statement{ display:flex; flex-direction:column; gap:32px; }
.footer-statement__eyebrow{ font-size:12px; letter-spacing:3px; color:var(--footer-muted); }
.footer-statement__title{ font-family:var(--font-serif); font-weight:300; color:var(--footer-head); font-size:84px; line-height:1.04; }
.footer-contact-link{ display:flex; flex-direction:column; gap:10px; }
.footer-contact-link a{ font-weight:300; font-size:30px; letter-spacing:.5px; color:var(--footer-head); transition:opacity .2s ease; }
.footer-contact-link a:hover{ opacity:.7; }
.footer-contact-link .rule{ height:1px; background:#544f44; width:100%; }
.footer-divider{ height:1px; background:#2a2722; }
.footer-cols{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.footer-brand__name{ font-family:var(--font-serif); font-weight:500; color:#fff; font-size:30px; letter-spacing:2px; }
.footer-brand__tag{ font-weight:300; color:var(--footer-muted); font-size:15px; line-height:1.6; margin-top:20px; }
/* 2026-10-22: footer brand = the same SVG logo as the header, linked home */
.footer-brand__logo{ display:inline-block; border-radius:3px; }
.footer-brand__logo img{ height:48px; width:auto; display:block; }
.footer-brand__logo:focus-visible{ outline:2px solid var(--on-dark); outline-offset:6px; }
.footer-nav-cols{ display:flex; gap:80px; }
.footer-col{ display:flex; flex-direction:column; gap:16px; }
.footer-col__head{ color:var(--footer-muted); font-size:11px; letter-spacing:2px; }
.footer-col a{ font-size:14px; color:#fff; transition:opacity .2s ease; }
.footer-col a:hover{ opacity:.65; }
.footer-bottom{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-top:32px; border-top:1px solid #333; color:var(--footer-muted); font-size:12px; }
.footer-bottom a:hover{ color:#fff; }

/* ============================================================ SIDE MENU (off-canvas) */
.side-menu-overlay{ position:fixed; inset:0; background:rgba(10,9,7,.5); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:998; }
.side-menu-overlay.is-open{ opacity:1; visibility:visible; }
.side-menu{ position:fixed; top:0; right:0; height:100%; width:480px; max-width:90vw; background:var(--ink); color:#fff; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); z-index:999; display:flex; flex-direction:column; padding:48px; overflow-y:auto; }
.side-menu.is-open{ transform:translateX(0); }
.side-menu__close{ align-self:flex-end; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; line-height:1; }
.side-menu__links{ display:flex; flex-direction:column; gap:8px; margin-top:32px; }
.side-menu__links a{ font-family:var(--font-serif); font-weight:300; font-size:40px; color:#fff; padding:8px 0; transition:color .2s ease, padding-left .2s ease; }
.side-menu__links a:hover{ color:var(--on-dark-muted); padding-left:8px; }
.side-menu__meta{ margin-top:auto; padding-top:40px; color:var(--on-dark-muted); font-size:14px; display:flex; flex-direction:column; gap:8px; }

/* ============================================================ MEGA MENU */
.mega-menu{ position:absolute; left:0; right:0; top:100%; background:var(--paper-2); border-top:1px solid var(--line); box-shadow:0 24px 48px -12px rgba(26,18,8,.18); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease, visibility .25s ease; z-index:60; }
.nav-has-mega:hover .mega-menu, .mega-menu:hover{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-menu__inner{ max-width:var(--maxw); margin-inline:auto; padding:48px var(--gutter); display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.mega-item{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:12px; transition:background-color .2s ease; }
.mega-item:hover{ background:var(--card); }
.mega-item__name{ font-family:var(--font-serif); font-weight:500; font-size:22px; color:var(--ink-2); }
.mega-item__desc{ font-size:13px; line-height:1.5; color:var(--text-soft); }

/* ============================================================ GENERIC PAGE HERO (interior pages) */
.page-hero{ position:relative; min-height:520px; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.page-hero--tall{ min-height:620px; }
.page-hero__img{ position:absolute; inset:0; }
.page-hero__img img{ width:100%; height:100%; object-fit:cover; }
.page-hero__overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,13,11,.85) 0%, rgba(13,13,11,.3) 100%); }
.page-hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; width:100%; padding:0 var(--gutter) 100px; display:flex; flex-direction:column; gap:24px; }
.page-hero__kicker{ font-size:13px; letter-spacing:3px; color:rgba(232,226,214,.9); }
.page-hero__title{ font-family:var(--font-serif); font-weight:300; color:var(--hero-cream); font-size:84px; line-height:1; }
.page-hero__lede{ font-weight:300; font-size:18px; line-height:1.6; color:rgba(236,231,221,.92); max-width:620px; }

/* ============================================================ ENTRANCE ANIMATIONS
   Scroll-triggered reveals. Elements get [data-reveal="<type>"]; JS adds
   .is-visible via IntersectionObserver. Each component uses a distinct motion.
   Honors prefers-reduced-motion. Stagger via --reveal-delay inline var. */
[data-reveal]{
  opacity:0;
  will-change:opacity, transform, filter, clip-path;
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1),
    filter 1.1s ease,
    clip-path 1.1s cubic-bezier(.76,0,.24,1);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal].is-visible{ opacity:1; transform:none; filter:none; clip-path:inset(0 0 0 0); }

/* fade up — default for most text blocks */
[data-reveal="fade-up"]{ transform:translateY(40px); }
/* fade down — utility/top bars */
[data-reveal="fade-down"]{ transform:translateY(-30px); }
/* fade in — overlays, scrims */
[data-reveal="fade"]{ }
/* rise — larger lift for headlines */
[data-reveal="rise"]{ transform:translateY(64px); }
/* slide from left — hero copy, side text */
[data-reveal="slide-left"]{ transform:translateX(-56px); }
/* slide from right — meta / arrows */
[data-reveal="slide-right"]{ transform:translateX(56px); }
/* zoom — imagery, photographic reveals */
[data-reveal="zoom"]{ transform:scale(1.08); filter:saturate(.85); }
[data-reveal="zoom"].is-visible{ transform:scale(1); }
/* blur-in — premium soft focus for serif statements */
[data-reveal="blur"]{ filter:blur(14px); transform:translateY(24px); opacity:0; }
/* curtain — image wipe reveal from bottom */
[data-reveal="curtain"]{ clip-path:inset(100% 0 0 0); transform:translateY(20px); }
/* unveil — clip wipe from left, for project hero images */
[data-reveal="unveil"]{ clip-path:inset(0 100% 0 0); }
/* pop — cards springing up */
[data-reveal="pop"]{ transform:translateY(48px) scale(.96); }
[data-reveal="pop"].is-visible{ transform:translateY(0) scale(1); }
/* tilt — subtle 3d settle for tiles */
[data-reveal="tilt"]{ transform:perspective(1200px) rotateX(8deg) translateY(50px); transform-origin:bottom; }
[data-reveal="tilt"].is-visible{ transform:perspective(1200px) rotateX(0) translateY(0); }
/* expand-line — horizontal rules/dividers grow from left */
[data-reveal="expand-line"]{ transform:scaleX(0); transform-origin:left; }
[data-reveal="expand-line"].is-visible{ transform:scaleX(1); }

/* Word-by-word headline reveal (JS splits into .reveal-word spans) */
.reveal-words .reveal-word{ display:inline-block; opacity:0; transform:translateY(.5em); transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal-words.is-visible .reveal-word{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .reveal-words .reveal-word{ transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
}

/* ============================================================ UTILITIES */
.mb0{ margin-bottom:0; }
.text-center{ text-align:center; }
.stack-14{ display:flex; flex-direction:column; gap:14px; }
.stack-24{ display:flex; flex-direction:column; gap:24px; }
.divider{ height:1px; background:var(--line); width:100%; }

/* ============================================================ RESPONSIVE */
@media (max-width:1200px){
  :root{ --gutter:48px; }
  .nav-logo, .nav-logo img{ height:46px; } /* 2026-10-22: wide wordmark — keep the five links + actions on one row down to 900px */
  .nav-links{ gap:28px; }
  .hero__title{ font-size:72px; }
  .section-title{ font-size:52px; }
  .footer-statement__title{ font-size:64px; }
}
@media (max-width:1024px){
  .testi-card{ flex-direction:column; }
  .testi-card__img{ width:100%; height:320px; }
  .footer-cols{ flex-direction:column; }
  .footer-nav-cols{ flex-wrap:wrap; gap:48px; }
}
@media (max-width:900px){
  :root{ --gutter:32px; }
  .nav-logo, .nav-logo img{ height:44px; } /* 2026-10-22 */
  .nav-links .nav-link, .nav-actions .icon-btn, .nav-actions .btn, .nav-actions .menu-grid-btn{ display:none; }
  .nav-actions{ display:none; } /* 2026-10-22: every child is hidden here, but the empty box still added a flex gap that pushed the row 8px wide at 320px */
  .nav-toggle{ display:inline-flex; }
  /* refinement 2026-10-15: the hidden desktop links left their .nav-item wrappers in the flex row, so six empty
     36px gaps (~260px) remained and pushed the menu toggle off-screen once the logo stopped shrinking. */
  .nav-links .nav-item{ display:none; }
  /* The Services mega menu is an absolute 3-col panel; never lay it out on mobile
     (the off-canvas side menu handles nav). Prevents horizontal overflow. */
  .mega-menu{ display:none !important; }
  .util-left{ gap:18px; }
  .reviews-widget{ display:none; }
  .hero{ height:auto; min-height:680px; }
  .hero__copy{ position:relative; left:auto; top:auto; padding:120px var(--gutter) 80px; }
  .hero__title{ font-size:54px; }
  .positioning__statement{ font-size:32px; }
  .section-title, .section-title--60{ font-size:40px; }
  .sec-head, .services-preview__head, .feat-meta, .footer-bottom{ flex-direction:column; align-items:flex-start; gap:24px; }
  .project-row, .ongoing-row, .process-grid{ flex-direction:column; }
  .feature-large__img{ height:380px; }
  .project-card__img, .ongoing-card__img{ height:300px; }
  .cta-band__title{ font-size:42px; }
  .footer-statement__title{ font-size:44px; }
  .testi-card__body{ padding:40px; }
  .testi-quote{ font-size:24px; }
  .page-hero__title{ font-size:52px; }
}
@media (max-width:560px){
  .nav-logo, .nav-logo img{ height:40px; } /* 2026-10-22: 168px wide at 320px viewports, clear of the menu button */
  .footer-brand__logo img{ height:42px; }
  .hero__title{ font-size:40px; }
  .service-tile{ flex-basis:300px; width:300px; }
  .btn{ padding:14px 28px; }
  .cta-row{ flex-wrap:wrap; }
}

/* ---- Mobile-perfect overrides: prevent any fixed-width text from overflowing
   the viewport inside flex columns (children otherwise size to their pixel
   max-width). Applied broadly so every page wraps cleanly. ---- */
@media (max-width:900px){
  html, body{ overflow-x:hidden; max-width:100%; }
  img{ height:auto; }
  /* Any element with a pixel max-width capped to the viewport on mobile. */
  .hero__copy{ align-items:stretch; max-width:100%; width:100%; }
  .hero__title, .hero__lede, .hero__kicker,
  .positioning__statement, .ongoing__lede,
  .cta-band__title, .cta-band__lede,
  .footer-statement__title, .footer-contact-link a,
  .testi-quote, .feat-meta__name, .section-title,
  .page-hero__title, .page-hero__lede{ max-width:100% !important; }
  /* Generic safety: constrain inline-width-styled blocks within sections. */
  section [style*="width:"], section [style*="width :"]{ max-width:100% !important; }
  .container, .site-footer__inner, .ongoing__inner, .featured__inner,
  .process__inner, .testimonials__inner, .services-preview__head{ max-width:100%; }
  /* Carousels keep horizontal scroll but never push the page wide. */
  .carousel-track{ max-width:100%; }
}
@media (max-width:560px){
  .hero__copy{ padding-top:100px; padding-bottom:64px; }
  .page-hero__inner{ padding-bottom:64px; }
  .side-menu{ padding:32px 24px; }
  .side-menu__links a{ font-size:32px; }
  .utility-bar{ padding:8px var(--gutter); }
  .util-left{ gap:14px; row-gap:6px; }
  .util-item{ font-size:11px; }
}

/* ---- 2026-11-10: logged-in editors only — keep the side menu's close button clear of the
   WordPress toolbar (32px, 46px on small screens), which sits above the menu. Found while checking
   the header after the utility bar was switched off; visitors never see the toolbar. ---- */
.admin-bar .side-menu{ padding-top:calc(48px + 32px); }
@media (max-width:782px){ .admin-bar .side-menu{ padding-top:calc(48px + 46px); } }
@media (max-width:560px){ .admin-bar .side-menu{ padding-top:calc(32px + 46px); } }