/* ==========================================================================
   Sections: layout specific to each block of the page
   ========================================================================== */

/* ---------- Hero ----------
   The photograph is full bleed behind the content rather than sitting in a
   panel of its own. It was shot with the subject on the right and open
   space on the left, so the copy occupies that space and no artificial
   split is needed. Three stacked scrims mute the photo, darken the reading
   side, and hand off to the page ground at the bottom edge. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:min(88svh,820px);
  padding:168px 0 176px;
}

.hero-media{
  position:absolute;inset:0;z-index:-2;
  /* The photo dissolves rather than ending on a flat fill. Painting the last
     few percent in --bg would leave a seam, because what sits behind the hero
     is the ambient wash from layout.css, not the flat ground colour. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%);
}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:18% 28%;
  /* Overscaled so hero.js can drift it on scroll without exposing an edge. */
  transform:scale(1.06) translate3d(0,0,0);
  will-change:transform;
}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    /* 1. vertical: soften the top, deepen toward the masked bottom edge */
    linear-gradient(180deg,rgba(5,25,35,.42) 0%,transparent 24%,rgba(5,25,35,.52) 74%,rgba(5,25,35,.88) 94%,rgba(5,25,35,.94) 100%),
    /* 2. horizontal: hold the reading side almost solid */
    linear-gradient(96deg,var(--bg) 0%,rgba(5,25,35,.96) 28%,rgba(5,25,35,.74) 48%,rgba(5,25,35,.34) 72%,rgba(5,25,35,.52) 100%),
    /* 3. flat tint: pull the whole frame toward Deep Space Blue */
    linear-gradient(0deg,rgba(0,53,84,.44),rgba(0,53,84,.44));
}

/* Accent bloom over the subject's side, tying the photo to the palette. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 520px at 72% 18%,var(--glow-soft),transparent 66%);
}

.hero-body{position:relative;z-index:1;width:100%}
.hero-copy{max-width:720px}
.hero h1{margin:22px 0 26px}
.hero .lede{max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* Entrance. Each child rises on load on its own beat. */
.hero-copy>*{animation:rise .9s var(--ease-soft) both;animation-delay:var(--rise-delay,0ms)}
.hero-copy>.eyebrow{--rise-delay:80ms}
.hero-copy>h1{--rise-delay:180ms}
.hero-copy>.lede{--rise-delay:300ms}
.hero-copy>.hero-cta{--rise-delay:400ms}

/* ---------- Timezone overlap panel ----------
   Lifted out of the hero and pulled back up over it, so the glass has the
   photograph behind it rather than flat ground. */
.hero-panel{padding:0 0 var(--section-y);position:relative;z-index:2}
.tz{margin-top:-140px;border-radius:var(--radius-lg);overflow:hidden}

.tz-top{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:16px 22px;border-bottom:1px solid var(--line);
}
.tz-status{font-size:.85rem;font-weight:var(--weight-strong)}
.tz-note{font-size:.78rem;color:var(--ink-3);margin-left:auto}

.tz-clocks{display:grid;grid-template-columns:repeat(4,1fr)}
.clock{padding:22px;border-right:1px solid var(--line);transition:background var(--speed-slow) var(--ease)}
.clock:last-child{border-right:0}
.clock.home{background:rgba(0,166,251,.07)}
.clock:hover{background:rgba(255,255,255,.04)}
.clock .city{
  font-family:var(--font-label);font-size:.68rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-3);
}
.clock .time{
  font-family:var(--font-sans);font-size:1.55rem;font-weight:var(--weight-strong);
  letter-spacing:-.01em;margin-top:7px;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  transition:color var(--speed-slow) var(--ease);
}
.clock .day{font-size:.76rem;color:var(--ink-3);margin-top:3px}
/* JS adds .live to the US clocks while the working windows overlap. */
.clock.live .time{color:var(--accent-ink)}

.tz-bar{padding:20px 22px;border-top:1px solid var(--line)}
.tz-track{height:8px;border-radius:var(--radius-pill);background:rgba(3,18,26,.6);position:relative;overflow:hidden;border:1px solid var(--line)}
/* JS drives the width; left stays pinned at 0. */
.tz-fill{
  position:absolute;top:0;bottom:0;left:0;width:0;
  background:var(--grad-accent);border-radius:var(--radius-pill);
  box-shadow:0 0 18px rgba(0,166,251,.45);
  transition:width 1.2s var(--ease-soft);
}
.tz-legend{display:flex;justify-content:space-between;margin-top:10px;font-size:.72rem;color:var(--ink-3)}

/* ---------- Stats ---------- */
.stats{padding:0}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:var(--radius);overflow:hidden;
}
.stat{padding:44px 28px;border-right:1px solid var(--line);transition:background var(--speed-slow) var(--ease)}
.stat:last-child{border-right:0}
.stat:hover{background:rgba(255,255,255,.04)}
.stat .n{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,4vw,3.3rem);line-height:1;letter-spacing:.01em;
  color:var(--ink);
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .stat .n{
    background:var(--grad-ink);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}
.stat .l{font-size:.86rem;color:var(--ink-2);margin-top:14px;line-height:1.5}

/* ---------- Case studies ---------- */
.cases{display:grid;gap:22px}
.case{
  display:block;text-decoration:none;border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--speed-slow) var(--ease-soft),
             border-color var(--speed-slow) var(--ease),
             box-shadow var(--speed-slow) var(--ease);
}
.case:hover{
  transform:translateY(-5px);border-color:var(--line-accent);
  box-shadow:var(--glass-specular),0 34px 80px rgba(2,10,16,.62);
}
.case-in{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
.case-txt{padding:46px 42px}
.case-txt h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:18px 0 16px}
.case-txt p{color:var(--ink-2);font-size:.98rem}
.case-figs{display:flex;flex-wrap:wrap;gap:18px 38px;margin-top:30px}

.case-more{
  display:inline-flex;align-items:center;gap:9px;margin-top:32px;
  font-weight:var(--weight-strong);font-size:.92rem;color:var(--accent-ink);
}
.case-more span{display:inline-block;transition:transform var(--speed) var(--ease-soft)}
.case:hover .case-more span{transform:translateX(6px)}
/* Non-linked variant, used on cases that are not published yet. */
.case-more.is-muted{color:var(--ink-3)}

.case-vis{
  border-left:1px solid var(--line);background:rgba(3,18,26,.35);
  display:grid;place-items:center;padding:36px;min-height:280px;
}
/* Screenshot sits inside .case-vis; scales down on whichever axis binds first. */
.case-shot{
  display:block;width:auto;max-width:100%;max-height:440px;
  border-radius:var(--radius-sm);border:1px solid var(--line);
  box-shadow:0 20px 48px rgba(2,10,16,.55);
}

/* Mirrored variant: visual on the left, copy on the right. Source order stays
   copy-first so the collapsed mobile layout and reading order are unchanged. */
.case-in.flip{grid-template-columns:.85fr 1.15fr}
.case-in.flip .case-txt{grid-column:2;grid-row:1}
.case-in.flip .case-vis{grid-column:1;grid-row:1;border-left:0;border-right:1px solid var(--line)}

.case.soon{opacity:.86}
/* Single-column variant, used on cases with no visual alongside the copy. */
.case-in.solo{grid-template-columns:1fr}
.case.soon:hover{transform:none;border-color:var(--glass-edge)}

@media(max-width:900px){
  .case-in,.case-in.flip{grid-template-columns:1fr}
  .case-in.flip .case-txt,.case-in.flip .case-vis{grid-column:1;grid-row:auto}
  .case-vis{border-left:0;border-top:1px solid var(--line);min-height:200px}
  .case-in.flip .case-vis{border-right:0}
  .case-shot{max-height:360px}
  .case-txt{padding:32px 26px}
}

/* ---------- Experience timeline ----------
   A single accent rail runs between the date column and the entries, with a
   node on each row that brightens as the row is hovered. */
.tl{border-top:1px solid var(--line)}
.tl-row{
  position:relative;
  display:grid;grid-template-columns:190px 1fr;gap:38px;
  padding:32px 0;border-bottom:1px solid var(--line);
  transition:background var(--speed-slow) var(--ease);
}
.tl-row::before{
  content:'';position:absolute;left:209px;top:0;bottom:0;width:1px;
  background:var(--line);
}
.tl-row::after{
  content:'';position:absolute;left:205px;top:42px;width:9px;height:9px;
  border-radius:50%;background:var(--baltic);
  box-shadow:0 0 0 4px rgba(5,25,35,1);
  transition:background var(--speed) var(--ease),transform var(--speed) var(--ease-soft),box-shadow var(--speed) var(--ease);
}
.tl-row:hover{background:linear-gradient(90deg,rgba(0,166,251,.06),transparent 62%)}
.tl-row:hover::after{
  background:var(--fresh-sky);transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(5,25,35,1),0 0 16px rgba(0,166,251,.7);
}

.tl-when{font-family:var(--font-label);letter-spacing:.06em;font-size:.75rem;color:var(--ink-3);padding-top:4px}
.tl-when b{display:block;color:var(--accent-ink);font-weight:700;margin-bottom:4px}
.tl-what h3{font-size:1.14rem}
.tl-org{font-size:.88rem;color:var(--ink-2);margin:5px 0 12px}
.tl-what p{font-size:.94rem;color:var(--ink-2);max-width:66ch}

@media(max-width:760px){
  .tl-row{grid-template-columns:1fr;gap:12px;padding-left:28px}
  .tl-row::before{left:4px}
  .tl-row::after{left:0;top:36px}
  .tl-row:hover{background:none}
}

/* ---------- Toolkit ---------- */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kit-col{border-radius:var(--radius);padding:28px}
.kit-col h3{font-size:.98rem;margin-bottom:18px}

@media(max-width:900px){.kit{grid-template-columns:1fr}}

/* ---------- Testimonials ---------- */
/* Cards are uneven in length, so each one is a column that pushes its
   attribution to the bottom edge and keeps the three baselines aligned. */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{
  border-radius:var(--radius);padding:30px;margin:0;
  display:flex;flex-direction:column;
}
.quote blockquote{margin:0;flex:1}
.quote p{color:var(--ink-2);font-size:.94rem;line-height:1.7}
.quote .who{font-size:.8rem;color:var(--ink-3);margin-top:22px;font-family:var(--font-label);letter-spacing:.06em}

@media(max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.contact-side h2{margin:18px 0 20px}
.contact-side a{color:var(--accent-ink);text-decoration:none;font-weight:var(--weight-strong)}
.contact-side a:hover{text-decoration:underline}
.contact-list{list-style:none;margin-top:28px;display:grid;gap:14px}
.contact-list li{display:flex;gap:12px;align-items:center;font-size:.94rem;color:var(--ink-2)}

@media(max-width:900px){.contact-in{grid-template-columns:1fr;gap:36px}}

/* ---------- Narrow screens ----------
   The photo stops being a backdrop and becomes a band at the top of the
   hero, with the copy sitting on the ground below it. There is not enough
   width to hold a readable column beside the subject. */
@media(max-width:860px){
  .hero{display:block;min-height:0;padding:104px 0 170px}
  .hero-media{
    position:relative;inset:auto;aspect-ratio:16/11;margin-bottom:-16%;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  }
  .hero-media img{object-position:66% 26%;transform:scale(1.04)}
  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(5,25,35,.30) 0%,rgba(5,25,35,.28) 34%,rgba(5,25,35,.78) 72%,rgba(5,25,35,.92) 100%),
      linear-gradient(0deg,rgba(0,53,84,.44),rgba(0,53,84,.44));
  }
  .hero-copy{max-width:none}
  .tz{margin-top:-110px}
}

@media(max-width:760px){
  .tz-clocks{grid-template-columns:repeat(2,1fr)}
  .clock:nth-child(2){border-right:0}
  .clock:nth-child(1),.clock:nth-child(2){border-bottom:1px solid var(--line)}
  .tz-note{margin-left:0;width:100%}
  .tz{margin-top:-70px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
}

@media(max-width:820px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:460px){
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
}