/* Homepage (2026-10) — Swiss-style layout, front page only.
   A 12-column grid, sections divided by a single black rule,
   heading in the left columns and content in the right. */

.g12{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:32px; }

/* ---- Hero ---- */
.hero{ padding:clamp(4.5rem, 12vw, 12rem) 0 clamp(5rem, 9vw, 9rem); }
.hero h1{
  font-size:clamp(2.6rem, 6.7vw, 6.25rem);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:600;
  max-width:14em;
  margin:0;
}
/* "move fast with AI." — each word lunges forward and takes the accent colour,
   one after the other, once the heading has faded in. Runs once. */
/* "move fast with AI." — each word lunges forward and takes the accent colour,
   one after the other, once the heading has faded in. Every nine seconds after
   that a soft sheen runs through the words with a smaller lunge. */
.h1-fast .w{
  display:inline-block;
  padding:.08em 0;
  margin:-.08em 0;
  background-image:
    linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, .55) 50%, transparent 58% 100%),
    linear-gradient(90deg, var(--accent) 0 47%, var(--ink) 53% 100%);
  background-size:260% 100%, 220% 100%;
  background-repeat:no-repeat;
  background-position:100% 0, 0 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--accent);
  will-change:transform, background-position;
}
.js .hero h1 .w{ background-position:100% 0, 100% 0; }
.js .hero h1.is-visible .w{
  animation:
    h1-fast .85s cubic-bezier(.16, 1, .3, 1) .55s both,
    h1-again 9s cubic-bezier(.4, 0, .2, 1) 6s infinite;
}
.js .hero h1.is-visible .w:nth-child(2){ animation-delay:.64s, 6.09s; }
.js .hero h1.is-visible .w:nth-child(3){ animation-delay:.73s, 6.18s; }
.js .hero h1.is-visible .w:nth-child(4){ animation-delay:.82s, 6.27s; }
@keyframes h1-fast{
  0%{ background-position:100% 0, 100% 0; transform:translateX(0) skewX(0); }
  30%{ transform:translateX(.07em) skewX(-11deg); }
  100%{ background-position:100% 0, 0 0; transform:translateX(0) skewX(0); }
}
@keyframes h1-again{
  0%{ background-position:100% 0, 0 0; transform:none; }
  4%{ transform:translateX(.03em) skewX(-5deg); }
  11%{ background-position:0 0, 0 0; transform:none; }
  11.01%, 100%{ background-position:100% 0, 0 0; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .js .hero h1 .w, .js .hero h1.is-visible .w{ animation:none; background-position:100% 0, 0 0; }
}

.hero-row{
  margin-top:clamp(4.5rem, 10vw, 10rem);
  border-top:1px solid var(--ink);
  padding-top:3rem;
  row-gap:4rem;
}
.hero-copy{ grid-column:7 / span 6; }
.lead-xl{ font-size:1.375rem; line-height:1.45; letter-spacing:-.01em; font-weight:400; color:var(--ink); margin:0 0 2rem; max-width:30em; }
.onramp{ font-size:1rem; line-height:1.55; color:var(--muted); margin:0 0 3rem; max-width:32em; }

/* Client logos: one quiet row */
.logos{ padding-bottom:clamp(6rem, 12vw, 12rem); }
.logos .label{ margin-bottom:2.75rem; }
.logo-row{ --logo-scale:1; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(3rem, 5vw, 4.5rem) 32px; align-items:center; }
.logo-item{ display:flex; align-items:center; min-height:76px; }
.logo-item img{
  width:calc(var(--w) * var(--logo-scale));
  max-width:100%;
  height:auto;
  filter:grayscale(100%);
  opacity:.85;
  transition:filter .3s ease, opacity .3s ease;
}
.logo-item:hover img{ filter:none; opacity:1; }

/* ---- Section band: one rule, heading left, content right ---- */
.band-inner{
  border-top:1px solid var(--ink);
  padding-top:3rem;
  padding-bottom:clamp(8rem, 16vw, 16rem);
  row-gap:3.5rem;
}
.wrap.band-inner{ padding-left:0; padding-right:0; width:calc(100% - 2 * clamp(20px, 4vw, 56px)); max-width:calc(1400px - 2 * clamp(20px, 4vw, 56px)); }
.band-head{ grid-column:1 / span 5; }
.band-body{ grid-column:7 / span 6; }
.band .label{ margin-bottom:2.5rem; }
.band h2{
  font-size:clamp(2rem, 3.6vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:600;
  margin:0 0 1.75rem;
}
.statement{ font-size:clamp(1.25rem, 1.7vw, 1.625rem); line-height:1.35; letter-spacing:-.015em; font-weight:500; margin:0 0 2rem; }
.body-copy{ font-size:1.0625rem; line-height:1.65; color:var(--muted); margin:0; max-width:34em; }

/* How it works: numbered rows */
.steps{ list-style:none; margin:0; padding:0; }
.steps li{
  display:grid;
  grid-template-columns:4.5rem minmax(0, 1fr);
  padding:3rem 0 3.25rem;
  border-top:1px solid var(--hair);
}
.steps li:first-child{ border-top:none; padding-top:0; }
.step-num{ font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em; color:var(--accent); padding-top:.45rem; }
.steps h3{ font-size:clamp(1.375rem, 1.9vw, 1.75rem); line-height:1.15; letter-spacing:-.025em; margin:0 0 .85rem; }
.steps p{ font-size:1.0625rem; line-height:1.55; color:var(--muted); margin:0; max-width:32em; }

/* Who we work with: sectors as a ruled list */
.sectors-label{ margin:2.5rem 0 1rem; }
.statement + .sectors-label{ margin-top:0; }
.sectors--minor li{ font-size:1rem; font-weight:400; color:var(--muted); padding:1rem 0; }
.sectors{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.sectors li{ padding:1.5rem 0; border-bottom:1px solid var(--hair); font-size:1.125rem; font-weight:500; letter-spacing:-.01em; }

/* Testimonial */
.quote-who{ grid-column:1 / span 3; }
.quote-body{ grid-column:5 / span 8; }
.quote-who img{ display:block; width:112px; height:112px; object-fit:cover; filter:grayscale(100%); margin-bottom:1.5rem; }
.quote-name{ font-weight:600; margin:0 0 .15rem; }
.band .quote-who .label{ margin:0; }
.quote{ font-size:clamp(2rem, 4.4vw, 4.25rem); line-height:1.05; letter-spacing:-.035em; font-weight:600; margin:0; max-width:16em; }
.quote-body .statement{ color:var(--muted); font-weight:400; max-width:30em; margin:0 0 2rem; }

/* Closing call to action: the one block of flat colour */
.cta{ background:var(--accent); color:#fff; padding:clamp(7rem, 14vw, 14rem) 0; }
.cta .g12{ align-items:end; row-gap:2rem; }
.cta-title{ grid-column:1 / span 8; color:#fff; font-size:clamp(2.6rem, 6.7vw, 6.25rem); line-height:1.03; letter-spacing:-.035em; font-weight:600; margin:0; }
.cta-side{ grid-column:9 / span 4; }
.cta-side p{ font-size:1.125rem; line-height:1.5; margin:0 0 2rem; }
.btn-white{ color:var(--accent); background:#fff; border:2px solid #fff; }
.btn-white:hover{ color:#fff; background:transparent; border:2px solid #fff; }
.home footer .site-foot-row{ border-top:none; }

@media (max-width: 991px){
  .hero-copy, .band-head, .band-body, .quote-who, .quote-body, .cta-title, .cta-side{ grid-column:1 / -1; }
  .quote-who{ display:grid; grid-template-columns:72px 1fr; column-gap:1rem; align-items:center; order:2; }
  .quote-who img{ width:72px; height:72px; margin:0; grid-row:1 / span 2; }
  .quote-name{ align-self:end; }
  .band .quote-who .label{ align-self:start; }
}
@media (max-width: 991px){
  .logo-row{ --logo-scale:.82; grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .logo-row{ --logo-scale:.7; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.5rem 24px; }
  .logo-item{ min-height:56px; }
}