/* Homepage layout only. Colour, type, glass and controls live in styles.css. */

/* hero: copy beside a photo collage */
.hero{position:relative;padding-top:calc(env(safe-area-inset-top,0px) + 150px);padding-bottom:20px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{display:grid;gap:24px;justify-items:start}
.hero .t-hero{max-width:12ch;font-size:clamp(44px,6.4vw,100px)}
.hero .t-lead{font-size:clamp(18px,1.6vw,22px);max-width:30ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero-pts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.hero-pts li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.hero-pts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px rgba(143,199,164,.18)}
.hero-art{position:relative;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(420px,46vw,600px)}
.hero-art>div[class^="ha-"]:not(.ha-chip){position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--green-800);border:1px solid var(--line)}
.hero-art img{width:100%;height:100%;object-fit:cover}
.ha-main{grid-row:1/3}
.ha-chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(12,22,18,.88);box-shadow:0 20px 40px -16px rgba(0,0,0,.7);animation:float 6s ease-in-out infinite}
.ha-chip b{display:block;font-size:14px}
.ha-chip small{display:block;font-size:12.5px;color:var(--text-2)}
.ha-chip-1{left:-28px;bottom:18%}
.ha-chip-2{right:-14px;top:42%;animation-delay:-3s}
.bant-mini{display:flex;gap:3px}
.bant-mini i{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--gold-500);color:var(--green-900);font:600 11px/1 var(--f-mono);font-style:normal}
@keyframes float{50%{transform:translateY(-8px)}}

/* marquee */
.strip{padding-block:36px;border-block:1px solid var(--line);margin-top:70px}
.strip .marquee-track span{display:flex;align-items:center;gap:48px;font:500 clamp(18px,2vw,26px)/1 var(--f-display);font-stretch:112%;letter-spacing:-.02em;color:var(--text-2);white-space:nowrap}
.strip .marquee-track span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold-500)}

/* problem */
.problem-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.problem-text{font:500 clamp(28px,3.6vw,52px)/1.14 var(--f-display);font-stretch:108%;letter-spacing:-.03em;margin:24px 0 0;max-width:20ch;text-wrap:pretty}
.problem-ph{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--green-800)}
.problem-ph img{width:100%;height:100%;object-fit:cover}

/* services: photo cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--glass-1);border:1px solid var(--glass-edge);transition:border-color var(--t-fast),transform var(--t-med) var(--ease-out)}
.svc-card:hover{border-color:rgba(196,167,100,.55);transform:translateY(-4px)}
.svc-ph{aspect-ratio:4/3;overflow:hidden;background:var(--green-800)}
.svc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.svc-card:hover .svc-ph img{transform:scale(1.04)}
.svc-in{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc-in .link{margin-top:auto;padding-top:6px}
.svc-minis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:16px}
.svc-mini{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;background:var(--green-800);border:1px solid var(--line)}
.svc-mini img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.svc-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,22,18,.9))}
.svc-mini span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-weight:600;font-size:15px}
.svc-mini:hover img{transform:scale(1.06)}

/* people band */
.people-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px}
.pg-copy{grid-column:1;grid-row:1/3;display:grid;gap:22px;align-content:center;padding-right:clamp(0px,2vw,24px)}
.pg-ph{border-radius:var(--r-lg);overflow:hidden;background:var(--green-800);aspect-ratio:4/3}
.pg-ph img{width:100%;height:100%;object-fit:cover}
.pg-1{grid-column:2/4;aspect-ratio:16/8}
.pg-stats{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pg-stats li{display:flex;gap:16px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.pg-stats b{font:600 34px/1 var(--f-display);font-stretch:112%;color:var(--gold-300);min-width:3.2ch}
.pg-stats span{color:var(--text-2)}

/* locations with city photos */
.mk-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.mk-ph{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--green-800);display:flex;align-items:flex-end;padding:22px}
.mk-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.mk-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,22,18,.1),rgba(12,22,18,.85))}
.mk-ph>div,.mk-ph .code{position:relative;z-index:1}
.mk-ph .code{position:absolute;right:20px;top:16px;text-shadow:0 2px 18px rgba(0,0,0,.6);font:700 44px/1 var(--f-display);font-stretch:120%;color:var(--gold-300)}
.mk-ph .t-small{margin:6px 0 0}
.mk-ph:hover img{transform:scale(1.05)}

/* industries: photo tiles */
.ind-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ind-tile{position:relative;aspect-ratio:5/4;border-radius:var(--r-md);overflow:hidden;background:var(--green-800);display:flex;align-items:flex-end;padding:16px}
.ind-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.ind-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(12,22,18,.9))}
.ind-tile span{position:relative;z-index:1;font:600 clamp(16px,1.4vw,19px)/1.2 var(--f-display);font-stretch:106%}
.ind-tile:hover img{transform:scale(1.06)}

@media (max-width:1000px){
  .hero-grid,.problem-grid,.tool,.bant,.book{grid-template-columns:1fr}
  .hero-art{height:auto;aspect-ratio:5/4}
  .ha-chip-1{left:10px}.ha-chip-2{right:10px}
  .svc-minis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .people-grid{grid-template-columns:1fr 1fr}.pg-copy{grid-column:1/-1;grid-row:auto}.pg-1{grid-column:1/-1}
  .ind-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-in{border-right:0;border-bottom:1px solid var(--line)}
  .mk-grid,.team,.pk-grid{grid-template-columns:1fr 1fr}
  .svc{min-height:0}
}
@media (max-width:680px){
  .hero{padding-top:calc(env(safe-area-inset-top,0px) + 120px)}
  .svc-grid,.mk-grid,.mk-photos,.team,.pk-grid,.row2,.kpis{grid-template-columns:1fr}
  .svc-minis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-art{aspect-ratio:1/1;gap:8px}
  .ha-chip{padding:9px 12px}.ha-chip-1{bottom:8%}.ha-chip-2{top:auto;bottom:30%}
  .people-grid{gap:10px}
  .tz-row,.tz-scale,.tz-ctrl{grid-template-columns:86px minmax(0,1fr)}
  .tz-row .local{grid-column:2;text-align:left;margin-top:-6px}
  .tz-scale>span:last-child,.tz-ctrl>span:last-child{display:none}
  .month .day{min-height:44px;padding:5px}
  .month .m{width:7px;height:7px}
  .pk.is-rec{transform:none}
}

/* v2.3 mobile spacing */
.hero-pts li::before{box-shadow:none;outline:3px solid rgba(143,199,164,.18)}
@media (max-width:680px){
  .hero-copy{gap:20px}
  .hero-pts{gap:8px 18px}
  .hero-art{margin-top:8px}
  .svc-in{padding:20px}
  .mk-ph{padding:18px}
  .pg-copy{padding-right:0}
}