/* ============================================================
   Responsive layer — mobile is art-directed, not a stacked desktop
   Verified at 320 / 360 / 375 / 390 / 414 / 768 / 820 / 1024 / 1280 / 1440 / 1920
   ============================================================ */

/* ---- 1920+ : keep the measure editorial, never edge-to-edge ---- */
@media (min-width:1700px){
  :root{--shell:1400px;--gut:80px}
  .shell--wide{max-width:1660px}
}

/* ---- 1180 and below ---- */
@media (max-width:1180px){
  .ch-split{gap:clamp(24px,3.6vw,48px)}
  .theme__inner{grid-template-columns:1fr}
  .theme__inner .sp{display:none}
}

/* ---- 1080 : desktop nav no longer fits eight items comfortably ---- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
}

/* ---- 1024 : tablets landscape ---- */
@media (max-width:1024px){
  :root{--nav-h:68px}
  .hero__grid{grid-template-columns:1fr .86fr;gap:clamp(24px,3.4vw,44px)}
  .glance{grid-template-columns:repeat(3,1fr)}
  .glance div:nth-child(3){border-right:0}
  .glance div:nth-child(4),.glance div:nth-child(5){border-top:1px solid var(--line)}
  .ch-tri{grid-template-columns:1fr 1fr}
  .ch-tri > div:nth-child(3){grid-column:1/-1;transform:none;max-width:60ch}
  .ftr__cols{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,44px)}
  .ftr__cols > div:first-child{grid-column:1/-1}
  .bio-grid{grid-template-columns:.44fr 1fr;gap:clamp(22px,3.4vw,44px)}
}

/* ---- 900 : single-column editorial from here down ---- */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .hero__fig{max-width:440px;margin-inline:auto;width:100%}
  .hero__name span{font-size:clamp(3rem,13.4vw,5.4rem)}
  .hero__role{margin-inline:auto;max-width:none}

  .about-hero{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .about-hero .fig{max-width:400px}

  .ch-split{grid-template-columns:1fr;gap:clamp(24px,4.6vw,38px)}
  .ch-split--flip .ch-split__fig{order:0}
  .ch-split__fig{max-width:480px}

  .svc-feature{grid-template-columns:1fr;gap:clamp(24px,4.6vw,38px)}
  .svc-feature .fig{max-width:460px}
  .svc-grid{grid-template-columns:1fr;gap:clamp(22px,3.4vw,34px)}

  .case__body{grid-template-columns:1fr;gap:clamp(20px,3vw,28px)}
  .statgrid{grid-template-columns:1fr;gap:clamp(18px,3vw,26px)}
  .works{grid-template-columns:1fr;gap:clamp(24px,3.4vw,34px)}

  .ct-grid{grid-template-columns:1fr;gap:clamp(34px,6vw,52px)}

  .bio-grid{grid-template-columns:1fr;gap:clamp(18px,3vw,26px)}
  .bio-grid__k{position:static}
  .bio-grid__k h3{max-width:20ch}

  .rec li{grid-template-columns:minmax(56px,auto) 1fr;gap:clamp(14px,3vw,26px) clamp(16px,3.4vw,30px)}
  .rec__d{grid-column:2/-1}

  /* journey: the pathway becomes a single organic left-hand curve */
  .stage,.stage--r,.stage--w{grid-template-columns:1fr}
  .stage__yr,.stage--r .stage__yr{grid-column:1/-1;padding-top:0;padding-left:30px}
  .stage__b,.stage--r .stage__b,.stage--w .stage__b{grid-column:1/-1;padding-left:30px}
  .stage__yr b{display:inline;margin-right:.7em}
  .stage__dot,.stage--r .stage__dot{left:0;top:calc(clamp(30px,4.4vw,58px) + .3em)}
  .path::before{
    content:"";position:absolute;left:4px;top:14px;bottom:14px;width:1px;
    background:linear-gradient(180deg,transparent,var(--terracotta) 6%,var(--terracotta) 94%,transparent);
    opacity:.42;
  }
  .path__line{display:none}
}

/* ---- 768 : tablets portrait / large phones ---- */
@media (max-width:768px){
  :root{--sec:clamp(52px,10vw,76px)}
  .glance{grid-template-columns:1fr 1fr}
  .glance div{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .glance div:nth-child(2n){border-right:0}
  .glance div:nth-child(4),.glance div:nth-child(5){border-top:0}
  .glance div:last-child{grid-column:1/-1;border-right:0;border-bottom:0}

  .ch-list li{grid-template-columns:auto 1fr;gap:12px 20px}
  .ch-list em{grid-column:2/-1;margin-top:.9rem;white-space:normal}

  .ch-tri{grid-template-columns:1fr;gap:clamp(22px,4vw,30px)}
  .ch-tri > div:nth-child(2),.ch-tri > div:nth-child(3){transform:none}

  .case__hd{grid-template-columns:1fr;gap:14px}
  .case__tag{text-align:left;white-space:normal}

  .theme__btn{grid-template-columns:1fr auto;gap:14px;padding:clamp(20px,4vw,28px) 0}
  .theme__n{grid-column:1/-1;margin-bottom:-6px}
  .theme__btn:hover .theme__w{transform:none}

  .ftr__cols{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
  .ftr__nav{columns:2}
  .ftr__base{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---- 620 ---- */
@media (max-width:620px){
  .factlist div{grid-template-columns:1fr;gap:.35rem}
  .factlist dt{padding-top:0}
  .rec li{grid-template-columns:1fr;gap:12px}
  .rec__d{grid-column:1/-1}
  .rec__yr{padding-top:0}
  .works,.svc-grid{gap:26px}
}

/* ---- 480 : phones ---- */
@media (max-width:480px){
  :root{--gut:20px;--nav-h:64px}
  body{font-size:16px;line-height:1.7}
  .hero__name span:nth-child(2){padding-left:.06em}
  .hero__name span:nth-child(3){padding-left:.12em}
  .glance{grid-template-columns:1fr}
  .glance div{border-right:0}
  .glance div:last-child{border-bottom:0}
  .brand__sub{font-size:.52rem;letter-spacing:.22em}
  .btn{width:100%;justify-content:space-between}
  .btn-row{display:grid;gap:12px}
  .fig--frame::before{display:none}
  .pull{padding-left:16px}
  .ftr__nav{columns:1}
}

/* ---- 380 : iPhone SE / small Android ---- */
@media (max-width:380px){
  :root{--gut:17px}
  .hero__name span{font-size:clamp(2.5rem,14vw,3.2rem)}
  .brand__name{font-size:1rem}
  .drawer__nav a{font-size:1.5rem;min-height:54px;padding:13px 0}
  .theme__w{font-size:1.65rem}
  .stmt__q{font-size:1.62rem}
}

/* ---- short landscape phones: keep the gate usable ---- */
@media (max-height:520px) and (orientation:landscape){
  .gate{min-height:auto;padding-block:44px}
  .gate__label{margin-bottom:26px}
}

/* ---- print ---- */
@media print{
  .hdr,.drawer,.burger,.skip,.btn,.tlink,body::before{display:none!important}
  body{background:#fff;color:#000}
  .band-forest,.band-olive,.ftr{background:#fff!important;color:#000!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}