/* Altis Global v3 "Atlas Light". All values derive from brand/css/tokens.css. */

/* ---------- base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: light; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--surface);
  color: var(--ink-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--navy); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #FFFFFF;
  padding: 0.6rem 1rem; font-size: 0.875rem;
}
.skip-link:focus { left: 0; }

/* display voice: big navy, mixed weights */
h1, h2 {
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
}
h1 strong, h2 strong { font-weight: 700; }
h1 { font-size: clamp(2.9rem, 5.5vw, 4.7rem); }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }

/* pills and chips */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  font-size: 0.9375rem; font-weight: 600; line-height: 1;
  white-space: nowrap;
  cursor: pointer; border: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pill:active { transform: translateY(1px); }
.pill svg { stroke: var(--altis-orange-500); }
.pill-primary { background: var(--navy); color: #FFFFFF; }
.pill-primary:hover { background: var(--navy-deep); }
.pill-light { background: #FFFFFF; color: var(--navy); }
.pill-light:hover { background: var(--surface-2); }
.pill-ghost { background: #FFFFFF; color: var(--navy); border: 1px solid rgba(27, 58, 92, 0.25); }
.pill-ghost:hover { border-color: var(--navy); }
.chip {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; border-radius: var(--radius-pill);
  padding: 8px 14px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-text);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--altis-orange-500); }

/* ---------- floating header ----------------------------------------------- */
.nav {
  position: sticky; top: 16px; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 76px; width: min(1320px, calc(100% - 96px)); margin: 16px auto 0; padding: 0 28px;
  background: #FFFFFF; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-nav);
}
/* The header steps back while a full-bleed pinned section owns the frame (the
   smart-home experience on /intelligent-buildings/, marked data-veils-header).
   A white pill over a cinematic photograph reads as an obstruction, and that
   section stays pinned for the whole length of its own scroll track. It
   returns on its own the moment the section releases, and a tab into it
   reveals it at any time.

   The section's own controls live in the top strip (the residence's control
   panel, the technology wall's close button), so nothing here may bring the
   header back over them while the section is pinned. */
.nav-veiled {
  opacity: 0;
  transform: translateY(-140%);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.nav-veiled:focus-within {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .nav-veiled { transition-duration: 1ms; }
}

.nav-left { display: flex; align-items: center; gap: 1.75rem; justify-self: start; }
.nav-logo { justify-self: center; display: block; }
.nav-logo img { width: 200px; height: auto; }
.nav-right { display: flex; align-items: center; gap: 0.75rem; justify-self: end; }
.nav-link, .cap-trigger {
  font-family: var(--font-sans);
  font-size: 0.96875rem; font-weight: 500; color: var(--navy);
  background: none; border: 0; cursor: pointer;
  padding: 0.75rem 0; position: relative;
}
.nav-link::after, .cap-trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem;
  height: 2px; border-radius: 2px; background: var(--altis-orange-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-link:hover::after, .cap-trigger:hover::after, .cap-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav .pill { padding: 12px 20px; font-size: 0.875rem; }

/* dropdown */
.cap-wrap { position: relative; }
.cap-panel {
  position: absolute; top: calc(100% + 16px); left: -12px;
  width: min(720px, 90vw);
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-nav);
  padding: 1.6rem 1.8rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.cap-panel[data-open="1"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.cap-item { display: block; padding: 0.55rem 0.7rem; margin: -0.35rem -0.7rem; border-radius: 12px; }
.cap-item:hover { background: var(--surface); }
.cap-item strong { display: block; font-size: 0.9375rem; font-weight: 650; color: var(--navy); margin-bottom: 0.2rem; }
.cap-item span { display: block; font-size: 0.84375rem; color: var(--muted); line-height: 1.45; }

/* mobile nav */
.nav-burger { display: none; }
@media (max-width: 960px) {
  .nav {
    top: 12px; width: calc(100% - 24px); margin: 12px auto 0; height: 64px; padding: 0 16px;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .nav-left { display: none; }
  .nav-logo { margin-right: auto; }
  .nav-logo img { width: 140px; }
  .nav .pill { padding: 10px 14px; font-size: 0.8125rem; }
  .nav .pill svg { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
  .nav.mobile-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.mobile-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.mobile-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-panel {
    position: fixed; inset: 88px 12px 12px; z-index: 39;
    background: #FFFFFF; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-nav);
    padding: 1.25rem 20px 2rem;
    overflow-y: auto; overscroll-behavior: contain;
    display: none;
  }
  .nav.mobile-open + .mobile-panel { display: block; }
  /* Eight disciplines plus four links overflowed the panel on a 812px phone and
     cut off the Contact button. The sub-lines are the cheapest thing to lose:
     the discipline names carry the menu on their own. */
  .mobile-panel .cap-item { padding: 0.72rem 0; margin: 0; border-bottom: 1px solid rgba(27, 58, 92, 0.1); border-radius: 0; }
  .mobile-panel .cap-item:hover { background: none; }
  .mobile-panel .cap-item span { display: none; }
  .mobile-panel .cap-item strong { margin-bottom: 0; }
  .mobile-panel .m-link {
    display: block; padding: 1rem 0; border-bottom: 1px solid rgba(27, 58, 92, 0.1);
    font-size: 1rem; font-weight: 600; color: var(--navy);
  }
  .mobile-panel .pill { margin-top: 1.25rem; width: 100%; justify-content: center; }
}
@media (min-width: 961px) { .mobile-panel { display: none !important; } }

/* ---------- hero ----------------------------------------------------------- */
.hero { padding: 40px 64px 28px; }
.hero h1 { max-width: 26ch; }
.hero h1 .hb { display: none; }
@media (min-width: 961px) { .hero h1 .hb { display: inline; } }
.hero-hairline { display: block; width: 64px; height: 1px; background: var(--altis-orange-500); margin: 22px 0 30px; }

.media-wrap { position: relative; }

/* hero media: static three-card grid */
.media-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 20px; }

/* capabilities: static grid, no slider */
.cap-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1320px) { .cap-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .cap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.m-card {
  position: relative; min-width: 0;
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-2);
}
.m-img { width: 100%; height: 440px; }
.m-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.m-img:hover img { transform: scale(1.04); }
.m-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 23, 32, 0) 40%, rgba(14, 23, 32, 0.88) 100%);
}
.m-title { position: absolute; left: 26px; right: 26px; bottom: 22px; color: #FFFFFF; }
.m-t1 { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.m-t2 { display: block; font-size: 0.9375rem; margin-top: 4px; opacity: 0.85; }
/* narrower cards in a grid carry a smaller title */
.media-grid .m-card + .m-card .m-t1 { font-size: 1.25rem; }

.concept-note { font-size: 0.8125rem; color: var(--muted); margin-top: 14px; }

/* ---------- statement ------------------------------------------------------ */
.statement {
  position: relative; overflow: hidden;
  margin: 40px 24px 0; padding: 48px 64px;
  background: var(--navy);
  border-radius: var(--radius-xl);
  text-align: center;
}
.statement-logo {
  position: absolute; top: 26px; right: 30px;
  width: 150px; height: auto; opacity: 0.9;
}
.statement .orbit {
  position: absolute; right: -80px; bottom: -120px; width: 620px; height: auto;
  opacity: 0.08; pointer-events: none;
}
.statement-line {
  max-width: 24ch; margin: 0 auto 14px;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 400;
  line-height: 1.2; letter-spacing: -0.01em; color: #FFFFFF;
}
.statement-line strong { font-weight: 700; }
.statement-sub {
  max-width: 56ch; margin: 0 auto 28px;
  font-size: 1.0625rem; line-height: 1.55; color: #FFFFFF; opacity: 0.82;
}
.statement-stats {
  display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.25rem);
  margin-bottom: 26px;
}
/* Equal columns, so the numbers sit at even intervals: sized to the number they
   were 33px out of step. 11rem clears the widest label (149px) without pushing
   the three apart into separate objects. */
.statement-stats .stat { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; width: 11rem; }
.stat-n { font-size: clamp(1.9rem, 2.8vw, 2.6rem); font-weight: 700; color: #FFFFFF; line-height: 1.1; }
.stat-l { font-size: 0.8125rem; color: #FFFFFF; opacity: 0.72; }

/* ---------- capabilities --------------------------------------------------- */
.caps { padding: 56px 64px 52px; }
.sect-head { margin-bottom: 32px; }
.sect-head p { margin-top: 12px; font-size: 1.0625rem; color: var(--muted); max-width: 60ch; }

.cap-card {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  background: var(--surface-2);
}
.cap-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.cap-card:hover img { transform: scale(1.04); }
.cap-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 23, 32, 0) 40%, rgba(14, 23, 32, 0.88) 100%);
}
.cap-plus {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: #FFFFFF; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.cap-title {
  position: absolute; left: 28px; right: 28px; bottom: 24px;
  color: #FFFFFF; font-size: 2rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.1;
}
.cap-sub {
  display: block; margin-top: 6px;
  font-size: 0.875rem; font-weight: 400; letter-spacing: 0;
  opacity: 0.82; line-height: 1.35;
}

/* ---------- delivered work ------------------------------------------------- */
.proof {
  margin: 48px 24px; padding: 96px 64px;
  background: var(--surface-2);
  border-radius: var(--radius-xl);
}
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.proof-card {
  background: #FFFFFF; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-height: 240px; padding: 32px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
}
.proof-t { font-size: 1.25rem; font-weight: 700; color: var(--navy); position: relative; padding-left: 18px; }
.proof-t::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--altis-orange-500); }
.proof-s { font-size: 0.9375rem; color: var(--muted); padding-left: 18px; }

/* ---------- contact -------------------------------------------------------- */
.contact-sect { padding: 40px 64px 72px; }
.contact-card {
  background: #FFFFFF; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 48px 56px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
}
.contact-card p { margin-top: 12px; color: var(--muted); max-width: 46ch; }
.contact-actions { display: flex; flex-direction: column; gap: 12px; max-width: 340px; width: 100%; justify-self: end; }
.contact-actions .pill { justify-content: center; }

/* Lead form */
.contact-card.has-form { grid-template-columns: 1.5fr 1fr; align-items: start; gap: 56px; }
/* Specificity must beat `.contact-card p`, which would otherwise mute this. */
.contact-card .lead-eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--altis-orange-500); margin: 0 0 10px;
}
.lead-col h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
/* 44ch left this line 6px short of fitting, orphaning the last word. */
.lead-col .lead-sub { margin-top: 10px; color: var(--muted); max-width: 54ch; font-size: 0.9375rem; }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 20px; }
.lead-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lead-field.full { grid-column: 1 / -1; }
.lead-field label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--navy);
}
.lead-field label .req { color: var(--altis-orange-500); margin-left: 3px; }
.lead-field label .opt { font-weight: 500; letter-spacing: 0.02em; color: var(--muted); }
.lead-field input,
.lead-field textarea {
  font: inherit; font-size: 0.9375rem; color: var(--ink-text);
  background: #FFFFFF; border: 1px solid rgba(27, 58, 92, 0.18);
  border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.lead-field textarea { resize: vertical; min-height: 106px; }
.lead-field input::placeholder,
.lead-field textarea::placeholder { color: #98A4B4; }
.lead-field input:focus,
.lead-field textarea:focus {
  outline: none; border-color: var(--altis-orange-500);
  box-shadow: 0 0 0 3px rgba(234, 91, 22, 0.16);
}
.lead-consent { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; }
.lead-consent input { width: 16px; height: 16px; flex: none; accent-color: var(--altis-orange-500); }
.lead-consent span { font-size: 0.8125rem; color: var(--muted); }
.lead-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.lead-actions .pill { cursor: pointer; font: inherit; font-weight: 600; font-size: 0.9375rem; }
.lead-actions .pill[disabled] { opacity: 0.6; cursor: progress; }
.lead-note { font-size: 0.8125rem; color: var(--muted); }
.lead-status { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.5; }
.lead-status[data-state="ok"] { color: #1B7A4B; }
.lead-status[data-state="err"] { color: #B3261E; }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* `.pill svg` strokes arrow icons orange. On the filled WhatsApp glyph that 1px
   stroke swamps a 17px icon and turns the green yellow. */
.pill .wa-ico { flex: none; stroke: none; }

/* Mobile: contact stays one thumb away however far down the page you are. It
   steps aside once the contact section is on screen, while the menu is open,
   and while the smart-home section owns the frame. */
.mcta { display: none; }
@media (max-width: 960px) {
  .mcta {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 38;
    display: flex; align-items: center; gap: 10px;
    transition: transform var(--dur-reveal) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .mcta.is-away { transform: translateY(160%); opacity: 0; pointer-events: none; }
  .mcta .pill {
    flex: 1 1 auto; justify-content: center; padding: 15px 18px;
    box-shadow: 0 10px 30px rgba(10, 31, 74, 0.34);
  }
  .mcta-wa {
    flex: none; width: 54px; height: 54px; border-radius: 50%;
    background: #FFFFFF; display: grid; place-items: center;
    box-shadow: 0 10px 30px rgba(10, 31, 74, 0.34);
  }
  .nav.mobile-open ~ .mcta { transform: translateY(160%); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .mcta { transition-duration: 1ms; } }
.contact-aside { border-left: 2px solid var(--altis-orange-500); padding-left: 22px; }
.contact-aside .pill { justify-content: center; width: 100%; }
.contact-aside .pill + .pill { margin-top: 10px; }

@media (max-width: 960px) {
  .contact-card.has-form { grid-template-columns: 1fr; gap: 32px; }
  .lead-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-aside { border-left: 0; border-top: 2px solid var(--altis-orange-500); padding-left: 0; padding-top: 24px; }
}
}
.contact-note { font-size: 0.8125rem; color: var(--muted); text-align: center; margin-top: 4px; }
.contact-direct {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(27, 58, 92, 0.12);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline;
}
.contact-direct dt {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.contact-direct dd { font-size: 0.9375rem; color: var(--ink-text); line-height: 1.45; }
.contact-direct dd a { color: var(--navy); font-weight: 600; transition: color var(--dur-fast) var(--ease-out); }
.contact-direct dd a:hover { color: var(--altis-orange-500); }

/* ---------- footer ---------------------------------------------------------- */
footer {
  margin: 0 24px 24px; padding: 52px 48px 24px;
  background: var(--surface-2);
  border-radius: var(--radius-xl);
}
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
.foot-grid .foot-logo { grid-column: 1; grid-row: 1 / 3; }
.foot-col, .foot-logo { min-width: 0; }
.foot-logo img { width: 180px; height: auto; }
.foot-links { margin-top: 1rem; }
.foot-links a { display: block; padding: 0.28rem 0; font-size: 0.9375rem; font-weight: 500; color: var(--navy); }
.foot-links a:hover { color: var(--altis-orange-500); }
.foot-contact { margin-top: 1rem; font-style: normal; }
.foot-contact a, .foot-contact span { display: block; font-size: 0.875rem; color: var(--muted); padding: 0.26rem 0; line-height: 1.5; }
.foot-contact a { transition: color var(--dur-fast) var(--ease-out); }
.foot-contact a:hover { color: var(--navy); }
.foot-col h3 { font-size: 1rem; font-weight: 650; letter-spacing: 0; line-height: 1.3; color: var(--navy); margin-bottom: 0.9rem; }
.foot-col a { display: block; font-size: 0.875rem; color: var(--muted); padding: 0.26rem 0; transition: color var(--dur-fast) var(--ease-out); }
.foot-col a:hover { color: var(--navy); }
.foot-base {
  margin-top: 2.25rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(27, 58, 92, 0.12);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--muted);
}
/* footer collapse: 3 link columns, logo block becomes one compact inline row */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2rem; }
  .foot-grid .foot-logo {
    grid-column: 1 / -1; grid-row: auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.8rem 2.4rem;
  }
  .foot-logo .foot-links { margin-top: 0; display: flex; gap: 1.4rem; }
  .foot-logo .foot-contact { margin-top: 0; display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
  .foot-logo .foot-contact span { flex-basis: 100%; }
}
@media (max-width: 700px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid .foot-logo { justify-content: flex-start; }
}

/* ---------- assembly reveals ----------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- route (stub) pages --------------------------------------------- */
.stub-hero { padding: 36px 64px 0; }
.stub-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.stub-copy { min-width: 0; }
.stub-hero .eyebrow {
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0; text-transform: none;
  margin-bottom: 0.9rem;
}
.stub-hero .eyebrow-brand { color: var(--altis-orange-500); }
.stub-hero h1 { max-width: 16ch; font-size: clamp(2.3rem, 3.8vw, 3.5rem); }
.stub-hero .stub-intro { margin-top: 1.2rem; max-width: 52ch; color: var(--muted); }
.stub-cta-link { margin-top: 1.8rem; }
.stub-banner { margin: 0; position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.stub-banner img { width: 100%; height: clamp(320px, 44vh, 460px); object-fit: cover; }
.stub-banner .concept-tag {
  position: absolute; left: 18px; bottom: 14px; z-index: 1;
  font-size: 0.75rem; font-weight: 600; color: #FFFFFF; opacity: 0.85;
}
.stub-list { max-width: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.stub-list li {
  list-style: none; padding: 1.1rem 0.2rem;
  border-bottom: 1px solid rgba(27, 58, 92, 0.12);
  display: flex; gap: 1.4rem; align-items: baseline;
}
@media (max-width: 760px) { .stub-list { grid-template-columns: 1fr; } }
.stub-list .n { font-size: 0.8125rem; font-weight: 600; color: var(--altis-orange-500); font-variant-numeric: tabular-nums; }
.stub-note { margin-top: 2rem; font-size: 0.8125rem; color: var(--muted); }
section.section { padding: 40px 64px 72px; }
section.section .btn-primary, .stub-cta { margin-top: 2rem; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-pill); border: 0; cursor: pointer;
  padding: 14px 22px; font-size: 0.9375rem; font-weight: 600;
  background: var(--navy); color: #FFFFFF;
}
.btn-primary:hover { background: var(--navy-deep); }
.proof-grid .slot {
  background: #FFFFFF; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  min-height: 220px; padding: 32px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;
}
.slot .t1 { font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.slot .t2 { font-size: 0.875rem; color: var(--muted); }

/* projects: conceptual work cards */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.work-grid .m-img { height: auto; aspect-ratio: 16 / 9; }
.work-grid .m-t1 { font-size: 1.25rem; }
.work-grid .m-title { left: 20px; right: 20px; bottom: 18px; }
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } }

/* ---------- responsive ------------------------------------------------------ */
@media (max-width: 960px) {
  .hero { padding: 28px 20px 20px; }
  .hero-hairline { margin: 16px 0 22px; }
  .m-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .m-t1 { font-size: 1.375rem; }
  /* hero media: a two-up swipe rail, the third card peeking to invite the swipe */
  .media-grid {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .media-grid::-webkit-scrollbar { display: none; }
  .media-grid .m-card { flex: 0 0 46%; scroll-snap-align: start; }
  .media-grid .m-img { aspect-ratio: 3 / 4; }
  /* titles wrap to two lines at this width, so the veil has to start higher */
  .media-grid .m-grad { background: linear-gradient(180deg, rgba(14, 23, 32, 0) 18%, rgba(14, 23, 32, 0.9) 100%); }
  .media-grid .m-title { left: 14px; right: 14px; bottom: 14px; }
  .media-grid .m-t1,
  .media-grid .m-card + .m-card .m-t1 { font-size: 1.0625rem; }
  .media-grid .m-t2 { font-size: 0.8125rem; }
  .statement { margin: 28px 12px 0; padding: 44px 24px; }
  .statement-logo { display: none; }
  .statement .orbit { width: 420px; right: -120px; bottom: -140px; }
  /* The fixed 15.5rem columns that even up the numbers on desktop would be
     744px of stats inside a 375px screen. Share the row instead. */
  .statement-stats { gap: 12px; }
  .statement-stats .stat { flex: 1 1 0; width: auto; min-width: 0; }
  .statement-stats .stat-l { font-size: 0.75rem; }
  .caps { padding: 52px 20px 36px; }
  .cap-title { font-size: 1.5rem; left: 22px; right: 22px; bottom: 20px; }
  .proof { margin: 36px 12px; padding: 64px 24px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { min-height: 170px; }
  .contact-sect { padding: 28px 20px 48px; }
  .contact-card { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .contact-actions { justify-self: stretch; max-width: none; }
  .contact-direct { align-items: center; gap: 2px 16px; }
  .contact-direct dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-contact a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  footer { margin: 0 12px 12px; padding: 36px 24px 20px; }
  .stub-hero { padding: 24px 20px 0; }
  .stub-grid { grid-template-columns: 1fr; gap: 28px; }
  .stub-banner img { height: max(240px, 46vw); }
  section.section { padding: 28px 20px 52px; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-left { gap: 1.1rem; }
  .nav-logo img { width: 168px; }
  .hero, .caps { padding-left: 40px; padding-right: 40px; }
}

/* capability grid on small screens (after the 960px block so it wins the cascade) */
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(1.95rem, 8.2vw, 2.9rem); text-wrap: balance; }
  .cap-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cap-card { border-radius: var(--radius-lg); }
  .cap-title { font-size: 0.9375rem; line-height: 1.2; left: 12px; right: 12px; bottom: 12px; }
  .cap-sub { display: none; }
  .cap-plus { width: 32px; height: 32px; top: 12px; right: 12px; }
}

/* capability page: services heading */
.svc-h { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1.8rem; }

/* real project photography */
.site-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.site-photos figure { margin: 0; }
.site-photos img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.site-photos figcaption { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.photo-note { margin-top: 1.6rem; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 760px) { .site-photos { grid-template-columns: 1fr; gap: 16px; } .site-photos img { aspect-ratio: 4 / 3; } }

/* mobile touch targets: every tappable thing reaches 44px */
@media (max-width: 960px) {
  .nav .pill { padding: 16px 18px; }
  .nav-logo { display: flex; align-items: center; min-height: 44px; }
  .mobile-panel .m-link { display: flex; align-items: center; min-height: 48px; padding: 0.5rem 0; }
  .foot-links a,
  .foot-col a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .foot-col h3 { margin-bottom: 0.4rem; }
  .contact-direct dt { font-size: 0.8125rem; }
  .mobile-panel .pill { min-height: 48px; }
}

/* Straight answers. Sits AFTER the contact section on purpose: eight questions
   must never stand between a reader and the form. Two columns so the list does
   not leave half the page empty. <details> keeps every answer in the DOM whether
   open or not, so crawlers and AI engines read all of them, the disclosure needs
   no JavaScript, and none of it depends on requestAnimationFrame. */
.faq { padding: 0 64px 72px; }
.faq-grid {
  display: grid; gap: 56px; align-items: start;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
}
.faq-intro p { margin-top: 14px; font-size: 1.0625rem; color: var(--muted); }
.faq-intro a { color: var(--altis-orange-500); text-decoration: none; border-bottom: 1px solid currentColor; }
.faq-intro a:hover { color: var(--altis-orange-600); }
.faq-list { max-width: none; }
.faq-item { border-top: 1px solid rgba(27, 58, 92, 0.1); }
.faq-item:last-child { border-bottom: 1px solid rgba(27, 58, 92, 0.1); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 16px;
  padding: 1.15rem 0;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.0625rem; color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--altis-orange-500);
  border-bottom: 2px solid var(--altis-orange-500);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(1px); }
.faq-item summary:focus-visible { outline: 2px solid var(--altis-orange-500); outline-offset: 3px; }
.faq-item p { margin: 0 0 1.35rem; max-width: 64ch; color: var(--muted); line-height: var(--leading-body); }
@media (max-width: 960px) {
  .faq { padding: 0 20px 48px; }
  .faq-grid { grid-template-columns: 1fr; gap: 22px; }
  .faq-item summary { font-size: 1rem; gap: 12px; }
}