/* =========================================================
   ABOUT PAGE — layout based on the Etude "About Us" reference
   Uses the same Montserrat type system as the home page
   ========================================================= */
.page-about{background:#fbf8f3}
.page-about .section-light{background:#fbf8f3}
.page-about main h2{color:var(--blue)}
.page-about .eyebrow{color:var(--blue);opacity:.8}

/* ---------- Banner ---------- */
.page-banner{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding:170px 0 90px;text-align:center}
.page-banner-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:9vw 9vw;mask-image:linear-gradient(to bottom,transparent,#000 40%,#000 70%,transparent)}
.page-banner-inner{position:relative}
.page-banner h1{margin:0;font-size:var(--t-h2);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:#fff}
.page-banner .crumbs{margin:22px 0 0 !important;font-size:var(--t-label) !important;font-weight:500 !important;letter-spacing:.2em !important;color:rgba(255,255,255,.7)}
.page-banner .crumbs a{color:#fff}
.page-banner .crumbs span{margin:0 8px;opacity:.5}
.desktop-nav a.is-active{opacity:1;border-bottom:1px solid #fff;padding-bottom:4px}

/* ---------- Intro (text + two images) ---------- */
.ab-intro{padding:120px 0 110px}
.ab-intro-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;column-gap:7vw;row-gap:0}
.ab-intro-copy{grid-column:1;grid-row:1;max-width:560px}
.ab-img{margin:0;overflow:hidden;background:#f7f2ea}
.ab-img img{width:100%;height:100%;object-fit:cover}
.ab-img-big{grid-column:2;grid-row:1/3;aspect-ratio:4/5}
.ab-img-small{grid-column:1;grid-row:2/4;width:62%;justify-self:center;aspect-ratio:3/4;margin-top:50px}
.ab-intro-text{grid-column:2;grid-row:3;padding-top:44px;max-width:520px}
.ab-intro-text p,.ab-split-text p,.ab-what-lead>p,.ab-cta-text p{color:#111111;margin:0 0 14px}

/* ---------- Blue marquee bands ---------- */
.ab-band{background:var(--blue);overflow:hidden;white-space:nowrap;padding:22px 0}
.ab-band .mq-track span{color:#f7f2ea;font-size:var(--t-marquee) !important;line-height:1.05 !important;padding:0 !important;opacity:1}
.ab-band .mq-track .mq-star{color:#c6a75e;opacity:.9}
.ab-band-team .mq-track .mq-alt{color:#161e31}

/* ---------- Split sections (heading left, text right) ---------- */
.ab-who,.ab-team,.ab-why{padding:120px 0}
.ab-split{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.ab-split h2{margin-bottom:0 !important}
.ab-split-text{padding-top:32px;max-width:560px}

/* ---------- What we do (2x2 icons) ---------- */
.ab-what{padding:0 0 130px}
.ab-what-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:7vw;align-items:start;border-top:1px solid var(--line);padding-top:110px}
.ab-what-items{display:grid;grid-template-columns:1fr 1fr;gap:56px 48px}
.ab-icon{display:block;width:36px;height:36px;color:var(--blue);margin-bottom:20px}
.ab-icon svg{width:100%;height:100%;display:block}
.ab-what-items h3,.ab-team-card h3,.ab-why-grid h3,.ab-process-rows h3{color:var(--blue);margin:0 0 10px}
.ab-what-items p,.ab-why-grid p{color:#111111;margin:0}

/* ---------- Expertise card on blue ---------- */
.ab-expertise{padding:90px 0}
.ab-card{position:relative;overflow:hidden;background:#f7f2ea;color:var(--blue);text-align:center;padding:90px 7vw}
.ab-card-tiles{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(31,42,68,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,42,68,.06) 1px,transparent 1px);background-size:120px 120px}
.ab-card>*:not(.ab-card-tiles){position:relative}
.ab-card .eyebrow{color:var(--blue) !important}
.ab-card h2{max-width:760px;margin:0 auto 38px !important}
.ab-tags{list-style:none;margin:0 auto 42px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px}
.ab-tags li{border:1px solid rgba(31,42,68,.25);border-radius:999px;padding:12px 20px;font-size:var(--t-small);font-weight:500;background:#fbf8f3;transition:background .3s,color .3s}
.ab-tags li:hover{background:var(--blue);color:#fff}
.ab-btn{display:inline-block;background:var(--blue);color:#fff;padding:16px 30px;font-size:var(--t-label) !important;font-weight:600 !important;letter-spacing:.18em !important;transition:background .3s,color .3s,transform .3s}
.ab-btn:hover{background:#161e31}
.ab-btn-line{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.ab-btn-line:hover{background:var(--blue);color:#fff}

/* ---------- Process rows ---------- */
.ab-process{padding:130px 0}
.ab-process-grid{display:grid;grid-template-columns:.8fr 1.6fr;gap:6vw;align-items:start}
.ab-process-lead{position:sticky;top:110px}
.ab-process-rows{border-top:1px solid rgba(31,42,68,.35)}
.ab-process-rows article{display:grid;grid-template-columns:60px 200px 1fr 30px;gap:20px;align-items:center;padding:30px 0;border-bottom:1px solid rgba(31,42,68,.35);transition:padding .4s var(--ease),background .4s}
.ab-process-rows article:hover{padding-left:14px;background:rgba(31,42,68,.03)}
.ab-process-rows span{font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:var(--blue)}
.ab-process-rows h3{margin:0 !important}
.ab-process-rows p{margin:0;color:#111111}
.ab-process-rows b{color:var(--blue);font-weight:400;font-size:20px;justify-self:end;transition:transform .3s}
.ab-process-rows article:hover b{transform:translateX(6px)}

/* ---------- Team grid ---------- */
.ab-team-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px}
.ab-team-card{position:relative;aspect-ratio:1/1.1;padding:34px 30px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff;transition:transform .5s var(--ease)}
.ab-team-card.t1{background:#161e31}.ab-team-card.t2{background:#1f2a44}.ab-team-card.t3{background:#1f2a44}.ab-team-card.t4{background:#121929}
.ab-team-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.14),transparent 55%);transition:opacity .5s}
.ab-team-card:hover::before{opacity:.4}
.ab-team-card .ab-icon{color:#fff;opacity:.9}
.ab-team-card h3{color:#fff !important}
.ab-team-card p{color:rgba(255,255,255,.75);margin:0}
.ab-team-no{position:absolute;top:20px;right:26px;font-size:clamp(60px,6vw,110px);font-weight:600;letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.1)}

/* ---------- Why grid ---------- */
.ab-why{padding-top:40px}
.ab-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:80px;border-top:1px solid var(--line);padding-top:44px}
.ab-why-grid span{display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e;margin-bottom:18px}

/* ---------- CTA ---------- */
.ab-cta{padding:110px 0 120px;border-top:1px solid var(--line)}
.ab-cta-giant{margin:0 0 70px !important;font-size:clamp(64px,10.5vw,176px) !important;font-weight:600 !important;letter-spacing:-.04em !important;line-height:.95 !important;color:var(--blue) !important}
.ab-cta-grid{display:grid;grid-template-columns:1.1fr 1fr auto;gap:5vw;align-items:start}
.ab-cta-grid h2{font-size:clamp(28px,2.6vw,40px) !important;margin:0 !important}
.ab-cta-actions{display:flex;flex-direction:column;gap:12px}
.ab-cta-actions .ab-btn{text-align:center}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .ab-process-rows article{grid-template-columns:50px 1fr 24px}
  .ab-process-rows p{grid-column:2/4}
  .ab-team-grid{grid-template-columns:1fr 1fr}
  .ab-why-grid{grid-template-columns:1fr 1fr}
  .ab-cta-grid{grid-template-columns:1fr 1fr}
  .ab-cta-actions{grid-column:1/3;flex-direction:row}
}
@media (max-width:760px){
  .page-banner{padding:130px 0 64px}
  .ab-intro{padding:80px 0}
  .ab-intro-grid{display:flex;flex-direction:column}
  .ab-img-big{margin-top:36px}
  .ab-img-small{width:70%;margin-top:-80px;align-self:flex-start;border:6px solid #fff}
  .ab-intro-text{padding-top:30px}
  .ab-who,.ab-team,.ab-why{padding:80px 0}
  .ab-split,.ab-what-grid,.ab-process-grid{grid-template-columns:1fr;gap:10px}
  .ab-split-text{padding-top:20px}
  .ab-what{padding-bottom:80px}
  .ab-what-grid{padding-top:80px;gap:40px}
  .ab-what-items{grid-template-columns:1fr;gap:38px}
  .ab-expertise{padding:50px 0}
  .ab-card{padding:60px 22px}
  .ab-process{padding:80px 0}
  .ab-process-lead{position:static;margin-bottom:24px}
  .ab-team-grid{grid-template-columns:1fr;margin-top:50px}
  .ab-team-card{aspect-ratio:auto;min-height:260px}
  .ab-why-grid{grid-template-columns:1fr;gap:30px;margin-top:50px}
  .ab-cta{padding:80px 0}
  .ab-cta-giant{margin-bottom:40px !important}
  .ab-cta-grid{grid-template-columns:1fr;gap:24px}
  .ab-cta-actions{grid-column:auto;flex-direction:column}
}

/* parallax images: extra height so no gap shows while they move */
.ab-img img{position:relative;height:114% !important;top:-7%}

@media (max-width:1000px){
  .ab-process-rows article>b{grid-column:3;grid-row:1}
  .ab-process-rows article>p{grid-row:2}
}
@media (max-width:760px){
  .ab-intro-copy{order:1}.ab-img-big{order:2}.ab-img-small{order:3;margin-top:-90px !important;margin-left:auto;align-self:flex-end !important}.ab-intro-text{order:4}
}

/* =========================================================
   V22 — Expertise redesign, team photo grid, layout polish
   ========================================================= */

/* consistent vertical rhythm */
.page-about .ab-intro,.page-about .ab-who,.page-about .ab-process,.page-about .ab-team,.page-about .ab-why{padding-top:130px;padding-bottom:130px}
.page-about .ab-what{padding-bottom:130px}
.page-about .ab-why{padding-top:0}
.page-about .ab-why .ab-split{border-top:1px solid var(--line);padding-top:120px}
.page-banner{padding:190px 0 110px}

/* ---------- Expertise ---------- */
.ab-expertise{position:relative;overflow:hidden;padding:140px 0 !important}
.ab-exp-grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:120px 120px;
  mask-image:radial-gradient(circle at 20% 40%,#000,transparent 70%)}
.ab-exp{position:relative;display:grid;grid-template-columns:.9fr 1.3fr;gap:7vw;align-items:start}
.ab-exp-lead{position:sticky;top:120px}
.page-about main .ab-exp-lead h2{color:#fff !important;margin:0 0 26px !important}
.page-about .ab-exp-lead .eyebrow{color:rgba(255,255,255,.65) !important;opacity:1}
.ab-exp-lead>p:not(.eyebrow){color:rgba(255,255,255,.72) !important;max-width:420px;margin:0 0 40px !important}
.ab-btn-white{background:#fbf8f3;color:var(--blue);display:inline-flex;gap:18px;align-items:center}
.ab-btn-white:hover{background:#c6a75e;color:#fff}

.ab-skills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:1px solid rgba(255,255,255,.22)}
.ab-skills li{display:grid;grid-template-columns:44px 1fr 20px;align-items:center;gap:12px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.22);color:#fff;transition:padding .45s var(--ease)}
.ab-skills li span{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.5);transition:color .3s}
.ab-skills li b{font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em}
.ab-skills li i{font-size:16px;opacity:0;transform:translate(-8px,8px);transition:opacity .3s,transform .45s var(--ease)}
.ab-skills li:hover{padding-left:10px}
.ab-skills li:hover span{color:#c6a75e}
.ab-skills li:hover i{opacity:1;transform:none}

/* ---------- Team photo grid (like reference) ---------- */
.ab-team-grid{width:var(--shell);margin:80px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.ab-member{position:relative;overflow:hidden;background:#161e31}
.ab-member figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.ab-member img{position:relative;width:100%;height:114% !important;top:-7%;object-fit:cover;filter:grayscale(1);transition:filter .6s var(--ease)}
.ab-member:hover img{filter:grayscale(0)}
.ab-member-info{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 24px;color:#fff;
  background:linear-gradient(to top,rgba(18,25,41,.92),rgba(18,25,41,.55) 60%,transparent);transform:translateY(calc(100% - 92px));transition:transform .6s var(--ease)}
.ab-member:hover .ab-member-info{transform:none}
.ab-member-info span{display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e;margin-bottom:10px}
.page-about main .ab-member-info h3{color:#fff !important;margin:0 0 10px}
.page-about main .ab-member-info p{color:rgba(255,255,255,.78) !important;margin:0;font-size:var(--t-small) !important}

@media (max-width:1000px){
  .ab-exp{grid-template-columns:1fr;gap:50px}
  .ab-exp-lead{position:static}
  .ab-team-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .page-about .ab-intro,.page-about .ab-who,.page-about .ab-process,.page-about .ab-team{padding-top:80px;padding-bottom:80px}
  .page-about .ab-what{padding-bottom:80px}
  .page-about .ab-why{padding-bottom:80px}
  .page-about .ab-why .ab-split{padding-top:70px}
  .page-banner{padding:140px 0 70px}
  .ab-expertise{padding:80px 0 !important}
  .ab-skills{grid-template-columns:1fr}
  .ab-skills li{padding:20px 0}
  .ab-team-grid{grid-template-columns:1fr 1fr;margin-top:44px}
  .ab-member-info{padding:16px 14px;transform:none}
  .ab-member-info p{display:none}
}

/* =========================================================
   V23 — Expertise card (centred, even type) + new Get in Touch
   ========================================================= */
.ab-expertise{padding:110px 0 !important}
.ab-card{padding:100px 8vw 96px;text-align:center}
.page-about main .ab-card .eyebrow{margin:0 0 20px !important;color:var(--blue) !important;opacity:.75}
.page-about main .ab-card h2{margin:0 auto 44px !important;max-width:none;text-align:center;text-wrap:balance}
.ab-tags{gap:12px;margin:0 auto 48px;max-width:980px}
.ab-tags li{font-size:var(--t-small) !important;font-weight:500 !important;padding:13px 22px;line-height:1;letter-spacing:.01em}
.ab-card .ab-btn,.ab-cta .ab-btn{display:inline-flex;align-items:center;gap:16px;padding:18px 30px}

/* Get in touch */
.ab-cta{padding:130px 0 120px !important;border-top:0}
.ab-cta-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:56px;border-bottom:1px solid rgba(31,42,68,.2)}
.page-about main .ab-cta-giant{margin:0 !important;font-size:clamp(56px,9.2vw,158px) !important;line-height:.9 !important;letter-spacing:-.04em !important}
.ab-cta-circle{flex:none;width:clamp(90px,9vw,150px);aspect-ratio:1;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:clamp(28px,2.6vw,44px);transition:background .35s,transform .5s var(--ease)}
.ab-cta-circle:hover{background:#c6a75e;transform:rotate(45deg)}
.ab-cta-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4vw;padding-top:60px;align-items:start}
.page-about main .ab-cta-main h2{font-size:clamp(26px,2.3vw,36px) !important;line-height:1.15 !important;margin:0 0 18px !important;max-width:420px}
.page-about main .ab-cta-main>p{color:#111111;max-width:440px;margin:0 0 32px !important}
.ab-cta-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}
.page-about main .ab-cta-label{font-size:var(--t-label) !important;font-weight:600 !important;letter-spacing:.18em !important;text-transform:uppercase;color:var(--blue) !important;margin:6px 0 16px !important}
.page-about main .ab-cta-col p:not(.ab-cta-label){font-size:var(--t-small) !important;color:#111111;line-height:1.7 !important;margin:0 !important}
.ab-cta-col a{color:var(--blue);font-weight:500;border-bottom:1px solid transparent;transition:border-color .3s}
.ab-cta-col a:hover{border-color:var(--blue)}

@media (max-width:1100px){
  .ab-cta-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  .ab-cta-main{grid-column:1/3}
}
@media (max-width:760px){
  .ab-card{padding:64px 20px}
  .ab-tags li{padding:11px 16px}
  .ab-cta{padding:80px 0 !important}
  .ab-cta-top{flex-direction:column;align-items:flex-start;padding-bottom:36px}
  .page-about main .ab-cta-giant{font-size:15vw !important}
  .ab-cta-circle{width:76px;font-size:26px}
  .ab-cta-grid{grid-template-columns:1fr;padding-top:40px}
  .ab-cta-main{grid-column:auto}
}
.ab-cta-actions .ab-btn{min-width:210px;justify-content:space-between}

/* home-page CTA reused on About: keep its own light colours */
.page-about .etude-cta .eyebrow{color:rgba(255,255,255,.62) !important;opacity:1}
.page-about main .etude-cta h2{color:#fff}

/* 3D walkthrough: original video proportions, no cropping or filler */
.page-services .walkthrough-video-small,.page-services .walkthrough-video-big{aspect-ratio:16/9;overflow:hidden;}
.page-services .walkthrough-video-small video,.page-services .walkthrough-video-big video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:transparent;position:static;top:auto;transform:none;}

/* V128: service banner — this service's project image behind the title, with a navy layer for readable text */
.page-banner.pb-photo{background:#1F2A44 url("../assets/banner-bg.jpg") center 55%/cover no-repeat}
.page-banner.pb-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,25,41,.82) 0%,rgba(31,42,68,.62) 45%,rgba(18,25,41,.8) 100%);pointer-events:none}