/* ============================================================
   LUMA Integration — Architects & Developers page
   Distinct layout, shared brand language (tokens from luma-site.css).
   ============================================================ */

/* ---- split hero ----------------------------------------- */
.arch-hero{position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  min-height:clamp(580px,88vh,920px);background:var(--charcoal);overflow:hidden;}
.arch-hero-text{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  gap:24px;padding:clamp(48px,7vw,120px) clamp(32px,4.5vw,72px) clamp(52px,6vw,92px) max(32px,calc((100vw - var(--container))/2 + var(--gutter)));}
.arch-hero-text h1{color:#fff;max-width:13ch;}
.arch-hero-text .lead{color:rgba(255,255,255,.78);max-width:42ch;}
.arch-hero-text .gold-rule{margin-bottom:6px;}
.arch-hero-cta{margin-top:10px;}
.arch-hero-media{position:relative;overflow:hidden;}
.arch-hero-media image-slot,.arch-hero-media .media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:var(--charcoal-deep);}
.arch-hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(46,50,53,.96) 0%,rgba(46,50,53,.28) 26%,rgba(46,50,53,0) 60%);}

/* ---- centred positioning statement ---------------------- */
.arch-statement{text-align:center;}
.arch-statement .inner{max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px;}
.arch-statement .inner .gold-rule{margin:0 auto;}
.arch-lead-xl{font-size:clamp(26px,3.4vw,44px);font-weight:600;letter-spacing:-.028em;line-height:1.22;
  color:var(--ink);text-wrap:balance;}
.arch-statement .sub{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink-soft);max-width:60ch;}

/* ---- who we partner with (hairline trio) ---------------- */
.arch-who-head{display:flex;flex-direction:column;gap:16px;max-width:620px;margin-bottom:clamp(36px,4vw,56px);}
.arch-who-head .gold-rule{margin-bottom:2px;}
.arch-who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.arch-who-cell{background:var(--paper);padding:clamp(28px,3vw,46px);display:flex;flex-direction:column;gap:14px;
  transition:background .25s var(--ease);}
.arch-who-cell:hover{background:var(--porcelain);}
.arch-who-cell .ord{font-size:14px;font-weight:600;color:var(--gold-deep);letter-spacing:.04em;}
.arch-who-cell h3{font-size:clamp(20px,1.7vw,25px);font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.arch-who-cell p{font-size:16px;line-height:1.55;color:var(--ink-soft);}

/* ---- full-bleed feature image --------------------------- */
.arch-feature{margin:0;}
.arch-feature image-slot,.arch-feature .media{display:block;width:100%;height:clamp(340px,46vw,580px);object-fit:cover;border-radius:0;overflow:hidden;}

/* ---- collaboration flow (horizontal timeline, dark) ----- */
.arch-flow-head{display:flex;flex-direction:column;gap:16px;max-width:620px;margin-bottom:clamp(40px,5vw,64px);}
.arch-flow-head .gold-rule{margin-bottom:2px;}
.arch-flow-head .h2{color:#fff;}
.arch-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-dk);}
.arch-flow-step{position:relative;padding:38px clamp(20px,2vw,32px) 4px 0;}
.arch-flow-step::before{content:"";position:absolute;top:-1px;left:0;width:46px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.arch-flow-grid.in .arch-flow-step::before,.arch-flow-step.in::before{transform:scaleX(1);}
.arch-flow-step .k{display:block;font-size:14px;font-weight:600;color:var(--gold);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;margin-bottom:14px;}
.arch-flow-step h3{font-size:clamp(19px,1.5vw,22px);font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:10px;}
.arch-flow-step p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.62);}

/* ---- what we bring (sticky head + hairline list) -------- */
.arch-bring{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,5vw,84px);align-items:start;}
.arch-bring-head{display:flex;flex-direction:column;gap:18px;position:sticky;top:118px;}
.arch-bring-head .gold-rule{margin-bottom:2px;}
.arch-bring-head .lead{max-width:34ch;}
.arch-bring-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.arch-bring-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2vw,30px);align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);}
.arch-bring-item > *{transition:transform .35s var(--ease);}
.arch-bring-item:hover > *{transform:translateX(8px);}
.arch-bring-item .mk{font-size:14px;font-weight:600;color:var(--gold-deep);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;padding-top:5px;}
.arch-bring-item h3{font-size:clamp(18px,1.5vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px;}
.arch-bring-item p{font-size:15.5px;line-height:1.5;color:var(--ink-soft);max-width:52ch;}

/* ---- reassurance strip (light, inline stats) ------------ */
.arch-reassure{display:grid;grid-template-columns:1fr auto;gap:clamp(36px,6vw,80px);align-items:center;}
.arch-reassure-text{display:flex;flex-direction:column;gap:18px;max-width:30ch;}
.arch-reassure-text .gold-rule{margin-bottom:2px;}
.arch-reassure-stats{display:flex;gap:clamp(28px,3vw,52px);}
.arch-stat{display:flex;flex-direction:column;gap:8px;border-left:2px solid var(--gold);padding-left:18px;}
.arch-stat .n{font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1;color:var(--ink);}
.arch-stat .t{font-size:14.5px;color:var(--ink-soft);max-width:15ch;}

@media(max-width:980px){
  .arch-hero{grid-template-columns:1fr;}
  .arch-hero-media{order:-1;min-height:clamp(300px,52vw,440px);position:relative;}
  .arch-hero-media::after{background:linear-gradient(180deg,rgba(46,50,53,0) 40%,rgba(46,50,53,.9) 100%);}
  .arch-hero-text{padding:clamp(32px,6vw,56px) var(--gutter) clamp(44px,6vw,64px);}
  .arch-who-grid{grid-template-columns:1fr;}
  .arch-flow-grid{grid-template-columns:1fr 1fr;}
  .arch-bring{grid-template-columns:1fr;}
  .arch-bring-head{position:static;}
  .arch-reassure{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .arch-flow-grid{grid-template-columns:1fr;}
  .arch-flow-step{padding-right:0;}
  .arch-reassure-stats{flex-direction:column;gap:22px;}
}