/* ============================================================
   HOME — body sections (loaded on the home page only)
   ============================================================ */

/* ---------- clients ticker (reuses .marq) ---------- */
.marq.clients{background:#fff;border-block:1px solid var(--line);padding-block:1.2em}
.marq.clients span{font-size:.95rem;font-weight:600;color:var(--navy)}
.marq.clients i{color:var(--b-sky)}

/* ---------- intro: text + capabilities beside a photo mosaic with a seal ---------- */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,84px);align-items:center}
.intro-text .h2{margin:1.05rem 0 1rem;max-width:18ch}
.intro-text .lead{max-width:56ch}
.intro-caps{list-style:none;margin:clamp(24px,3vw,34px) 0 clamp(26px,3.2vw,38px);padding:0;display:grid;gap:10px}
.intro-caps li{
  display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border-radius:var(--rad-lg);
  background:var(--card);border:1px solid var(--line);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease),border-color .35s var(--ease);
}
.intro-caps li:hover{transform:translateX(-4px);box-shadow:var(--shadow-m);border-color:transparent}
[dir="ltr"] .intro-caps li:hover{transform:translateX(4px)}
.cap-ico{
  flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  color:var(--navy);background:rgba(37,48,107,.07);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.intro-caps li:hover .cap-ico{background:var(--navy);color:#fff}
.cap-ico svg{width:22px;height:22px}
.intro-caps b{display:block;font-size:1rem;font-weight:600;line-height:1.5;color:var(--ink)}
.intro-caps div span{display:block;margin-top:.15em;font-size:.88rem;line-height:1.7;color:var(--ink-3)}
.intro-btns{display:flex;gap:12px;flex-wrap:wrap}

.intro-media{position:relative;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;gap:14px;aspect-ratio:1/1.02}
.im{margin:0;border-radius:var(--rad-xl);overflow:hidden;background:var(--navy-2);box-shadow:var(--shadow-l)}
.im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.im:hover img{transform:scale(1.06)}
.im-a{grid-row:1 / span 2}
/* the seal sits on the point where the three photos meet */
.seal{
  position:absolute;z-index:3;width:136px;height:136px;top:50%;inset-inline-start:57.5%;
  margin-top:-68px;margin-inline-start:-68px;border-radius:50%;background:#fff;
  box-shadow:0 18px 40px -16px rgba(20,28,70,.45),0 0 0 8px rgba(255,255,255,.55);
}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;direction:ltr;animation:seal-spin 26s linear infinite}
.seal-ring text{font-family:var(--f-mono);font-size:8.2px;font-weight:500;fill:var(--navy)}
.seal-mark{position:absolute;width:46px;height:46px;top:50%;left:50%;margin:-23px 0 0 -23px}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.seal-ring{animation:none}}
@media (max-width:960px){
  .intro-grid{grid-template-columns:1fr}
  .intro-media{width:100%;max-width:620px;margin-inline:auto}
}
@media (max-width:560px){
  .intro-media{gap:10px}
  .seal{width:104px;height:104px;margin-top:-52px;margin-inline-start:-52px}
  .seal-mark{width:36px;height:36px;margin:-18px 0 0 -18px}
}

/* ---------- services index: list + sticky preview ---------- */
.sx{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,70px);align-items:start}
.sx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.sx-list li{border-bottom:1px solid var(--line-2)}
.sx-list a{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(14px,2vw,28px);padding:clamp(16px,1.9vw,23px) 6px;
  transition:padding-inline-start .45s var(--ease-out);
}
.sx-list a::before{
  content:"";position:absolute;inset-inline-start:0;top:-1px;bottom:-1px;width:3px;
  background:linear-gradient(var(--b-sky),var(--navy));
  transform:scaleY(0);transition:transform .4s var(--ease-out);
}
.sx-list .n{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);min-width:2.2em;direction:ltr;unicode-bidi:isolate;transition:color .3s var(--ease)}
.sx-list .t{font-size:clamp(1.05rem,1.75vw,1.4rem);font-weight:600;line-height:1.4;color:var(--ink-2);transition:color .3s var(--ease)}
.sx-list .go{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-2);color:var(--ink-3);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.sx-list .go svg{width:16px;height:16px}
.sx-list li.on a{padding-inline-start:18px}
.sx-list li.on a::before{transform:scaleY(1)}
.sx-list li.on .n{color:var(--b-bright)}
.sx-list li.on .t{color:var(--navy)}
.sx-list li.on .go{background:var(--navy);border-color:var(--navy);color:#fff}
.sx-media{
  position:sticky;top:118px;aspect-ratio:4/4.5;border-radius:var(--rad-xl);overflow:hidden;
  background:var(--navy-2);box-shadow:var(--shadow-xl);
}
.sx-media figure{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s linear .6s}
.sx-media figure.on{opacity:1;visibility:visible;transition-delay:0s}
.sx-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease-out)}
.sx-media figure.on img{transform:none}
.sx-media figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,16,40,.92),rgba(10,16,40,.08) 58%)}
.sx-media figcaption{position:absolute;z-index:2;inset-inline:0;bottom:0;padding:clamp(22px,2.6vw,34px);color:#fff}
.sx-media .num{
  display:block;margin-bottom:.15em;font-weight:300;font-size:clamp(3rem,5.6vw,4.8rem);line-height:.9;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);
}
.sx-media h3{font-size:clamp(1.15rem,1.8vw,1.45rem);margin-bottom:.4em;color:#fff}
.sx-media p{font-size:.92rem;line-height:1.8;color:rgba(255,255,255,.8);margin:0 0 1.2em;max-width:46ch}
.sx-media .cta-pill{background:#fff;color:var(--navy)}
.sx-media .cta-pill::before{background:var(--b-sky)}

/* ---------- projects: bento mosaic ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(200px,19vw,262px);gap:clamp(12px,1.4vw,18px)}
.bento .proj{aspect-ratio:auto;height:100%}
.bento .proj:nth-child(1){grid-column:span 2;grid-row:span 2}
.bento .proj:nth-child(2),.bento .proj:nth-child(5),.bento .proj:nth-child(6){grid-column:span 2}
.bento .proj:nth-child(1) .proj-in h3{font-size:clamp(1.3rem,2.3vw,2rem)}
.bento .proj:nth-child(1) .proj-in p{max-height:none;opacity:1;margin-top:.35em;max-width:52ch}

/* ---------- numbers band ---------- */
.nums{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:linear-gradient(160deg,var(--navy),var(--navy-2));padding-block:clamp(66px,8vw,112px)}
.nums .waves{position:absolute;z-index:-1;inset-inline:0;bottom:0;width:100%;height:46%;opacity:.55}
.nums .eyebrow{color:var(--b-sky)}
.nums .eyebrow::before{background:var(--b-sky);box-shadow:0 0 0 4px rgba(106,170,222,.2)}
.nums .h2{color:#fff}
.nums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(34px,4.4vw,58px)}
.num-cell{border-top:1px solid rgba(255,255,255,.22);padding-top:clamp(18px,2vw,26px)}
.num-cell b{
  display:block;font-family:var(--f-mono);font-weight:500;line-height:1;letter-spacing:-.04em;
  font-size:clamp(2.4rem,5.2vw,4.5rem);direction:ltr;unicode-bidi:isolate;
}
[dir="rtl"] .num-cell b{text-align:right}
.num-cell b em{font-style:normal;color:var(--b-sky)}
.num-cell > span{display:block;margin-top:.75em;font-size:.9rem;color:rgba(255,255,255,.74)}

/* ---------- process: timeline ---------- */
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);position:relative}
.tl::before,.tl::after{content:"";position:absolute;top:27px;inset-inline:16.66%;height:2px;border-radius:2px}
.tl::before{background:var(--line-2)}
.tl::after{
  background:linear-gradient(270deg,var(--navy),var(--b-bright),var(--b-sky));
  transform:scaleX(0);transform-origin:right;transition:transform 1.4s var(--ease-out) .25s;
}
[dir="ltr"] .tl::after{background:linear-gradient(90deg,var(--navy),var(--b-bright),var(--b-sky));transform-origin:left}
.tl.in::after{transform:scaleX(1)}
.tl li{text-align:center}
.tl-dot{
  position:relative;z-index:1;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--line-2);
  font-family:var(--f-mono);font-weight:600;color:var(--navy);direction:ltr;
  transition:border-color .5s var(--ease) .7s,background .35s var(--ease),color .35s var(--ease);
}
.tl.in .tl-dot{border-color:var(--b-bright)}
.tl li:hover .tl-dot{background:var(--navy);border-color:var(--navy);color:#fff;transition-delay:0s}
.tl h3{font-size:clamp(1.1rem,1.7vw,1.32rem);margin-bottom:.5em}
.tl p{font-size:.93rem;line-height:1.8;color:var(--ink-3);max-width:34ch;margin-inline:auto}

/* ---------- Albatros albums teaser ---------- */
.alb{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,18px)}
.alb a{
  position:relative;display:block;aspect-ratio:3/4;border-radius:var(--rad-lg);overflow:hidden;
  background:var(--navy-2);isolation:isolate;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease);
}
.alb a:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.alb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.alb a:hover img{transform:scale(1.08)}
.alb a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,16,40,.9),rgba(10,16,40,0) 56%)}
.alb-t{position:absolute;z-index:2;inset-inline:0;bottom:0;padding:18px;color:#fff}
.alb-t b{display:block;font-size:1rem;font-weight:600;line-height:1.4}
.alb-t span{display:block;margin-top:.3em;font-family:var(--f-mono);font-size:.72rem;color:var(--b-sky)}
[dir="rtl"] .alb-t span{font-family:var(--f-ar);font-size:.8rem}

/* ---------- where we work: outlined ticker ---------- */
.omarq{overflow:hidden;padding-block:clamp(26px,4vw,48px);border-block:1px solid var(--line)}
.omarq-in{display:inline-flex;align-items:center;white-space:nowrap;animation:marq 70s linear infinite;will-change:transform}
.omarq:hover .omarq-in{animation-play-state:paused}
.omarq span{
  padding-inline:.4em;font-size:clamp(2.2rem,5.6vw,4.8rem);font-weight:600;line-height:1.15;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.2px rgba(37,48,107,.34);transition:color .3s var(--ease);
}
.omarq span:hover{color:var(--navy);-webkit-text-stroke-color:transparent}
.omarq i{font-style:normal;color:var(--b-sky);font-size:clamp(1rem,2vw,1.6rem)}

/* ---------- watch + talk ---------- */
.wt{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,60px);align-items:center}
.wt-card{border-radius:var(--rad-xl);padding:clamp(26px,3.2vw,44px);background:var(--paper-2);border:1px solid var(--line)}
.wt-card .h2{margin:1rem 0 .8rem}
.wt-tel{
  display:inline-flex;align-items:center;gap:.6em;margin:.7rem 0 1.5rem;
  font-family:var(--f-mono);font-size:clamp(1.3rem,2.3vw,1.8rem);font-weight:600;color:var(--navy);
  direction:ltr;unicode-bidi:isolate;transition:color .3s var(--ease);
}
.wt-tel:hover{color:var(--b-bright)}
.wt-tel svg{width:.9em;height:.9em}
.wt-btns{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .alb{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:38%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .alb a{scroll-snap-align:start}
}
@media (max-width:880px){
  .sx{grid-template-columns:1fr}
  .sx-media{display:none}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px}
  .bento .proj:nth-child(n){grid-column:auto;grid-row:auto}
  .bento .proj:nth-child(1){grid-column:span 2}
  .nums-grid{grid-template-columns:repeat(2,1fr)}
  .wt{grid-template-columns:1fr}
}
@media (max-width:720px){
  /* the timeline turns vertical: the dot keeps its own column (title and text
     both sit beside it), and each step draws a connector down to the next */
  .tl{grid-template-columns:1fr;gap:0}
  .tl::before,.tl::after{display:none}
  .tl li{position:relative;display:grid;grid-template-columns:56px 1fr;column-gap:18px;text-align:start;padding-bottom:26px}
  .tl li:last-child{padding-bottom:0}
  .tl li:not(:last-child)::before,
  .tl li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:27px;top:62px;bottom:6px;width:2px;border-radius:2px}
  .tl li:not(:last-child)::before{background:var(--line-2)}
  .tl li:not(:last-child)::after{background:linear-gradient(var(--b-bright),var(--b-sky));transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-out)}
  .tl.in li::after{transform:scaleY(1)}
  .tl.in li:nth-child(1)::after{transition-delay:.35s}
  .tl.in li:nth-child(2)::after{transition-delay:.8s}
  .tl-dot{grid-row:span 2;margin:0}
  .tl h3{grid-column:2;display:flex;align-items:center;min-height:56px;margin:0}
  .tl p{grid-column:2;max-width:none;margin:0}
  .alb{grid-auto-columns:62%}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:240px}
  .bento .proj:nth-child(1){grid-column:auto}
  /* the lead card keeps its summary, cut to two lines so the photo still shows */
  .bento .proj:nth-child(1) .proj-in p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}