/* ==========================================================================
   About: an editorial page in the site's language. Outlined wordmark, chrome
   on void, mono labels, hairlines instead of boxes, motion that carries
   meaning (words arriving, beliefs lighting up as they are read).
   ========================================================================== */

.ab-page{
  position:relative;
  overflow:clip;
  isolation:isolate;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 10% 8%, rgba(151,27,41,.10), transparent 32%),
    radial-gradient(circle at 92% 38%, rgba(0,66,37,.11), transparent 36%),
    linear-gradient(180deg, #050506 0%, #08090a 50%, #050506 100%);
}
html[data-theme='light'] .ab-page{ background:var(--void); }
.ab-page > *{ position:relative; z-index:1; }
.ab-page h1,
.ab-page h2,
.ab-page h3{ text-wrap:balance; }
.ab-page p{ text-wrap:pretty; }
.ab-atmosphere{
  position:absolute;
  inset:0 0 auto;
  z-index:0;
  height:120vh;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:128px 128px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
}
html[data-theme='light'] .ab-atmosphere{ opacity:.5; }

.ab-page .section-eyebrow{ color:var(--ink-dimmer); }
.ab-section-head{ margin-bottom:clamp(36px,5vw,56px); }
.ab-section-head h2,
.ab-aside h2{ font-size:clamp(34px,4.8vw,64px); line-height:1; letter-spacing:-.03em; }

/* ---------- hero ---------- */
.ab-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(100svh, 980px);
  padding:150px 0 clamp(56px,9vh,104px);
}
.ab-hero__inner{ position:relative; z-index:1; width:100%; }
.ab-wordmark{
  position:absolute;
  left:50%;
  bottom:-3%;
  z-index:0;
  width:min(1560px, 124vw);
  height:auto;
  transform:translateX(-50%);
  pointer-events:none;
  animation:ab-wordmark 1.8s var(--ease-luxe) .2s both;
}
.ab-wordmark text{
  font-family:'Sora',sans-serif;
  font-size:300px;
  font-weight:800;
  letter-spacing:-12px;
}
.ab-wordmark__outline{
  fill:none;
  stroke:url(#abWordmark);
  stroke-width:1.4;
}
/* A chrome fill shows only where the spotlight falls (sceneInteractions.js). */
.ab-wordmark__fill{ fill:url(#abChrome); opacity:.42; }
html[data-theme='light'] .ab-wordmark__fill{ opacity:.18; }
html[data-theme='light'] .ab-wordmark stop{ stop-color:#111316; }
@keyframes ab-wordmark{
  from{ opacity:0; transform:translate(-50%, 40px); }
  to{ opacity:1; transform:translate(-50%, 0); }
}

.ab-kicker{ display:block; margin-top:6px; }
.ab-title{
  margin-top:14px;
  font-size:clamp(56px,10.4vw,168px);
  line-height:.9;
  letter-spacing:-.045em;
}
.ab-line{ display:block; }
.ab-line--dim{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.55);
}
html[data-theme='light'] .ab-line--dim{ -webkit-text-stroke-color:rgba(17,19,22,.55); }
.ab-word{
  display:inline-block;
  animation:ab-word .95s var(--ease-luxe) both;
  animation-delay:calc(var(--i) * 70ms + 120ms);
}
@keyframes ab-word{
  from{ opacity:0; transform:translateY(.32em); filter:blur(10px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}

.ab-hero__foot{
  margin-top:clamp(36px,5vw,56px);
  animation:ab-fade 1s var(--ease-luxe) .7s both;
}
@keyframes ab-fade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.ab-lede{
  max-width:620px;
  color:var(--ink-dim);
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.6;
}
.ab-hero__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  margin-bottom:26px;
}
.ab-hero__top .svc-breadcrumb{ margin-bottom:0; }
.ab-clock{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:34px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
  animation:ab-fade 1s var(--ease-luxe) .5s both;
}
.ab-clock .mono{ color:var(--ink-dimmer); }
.ab-clock strong{
  color:var(--ink);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  min-width:8ch;
}
/* The dot marks something real: this is the studio's local time, live. */
.ab-clock__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ink);
}

/* ---------- facts band ---------- */
.ab-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ab-fact{ padding:28px 24px 30px; border-left:1px solid var(--line); }
.ab-fact:first-child{ padding-left:0; border-left:0; }
.ab-fact dt{ color:var(--ink-dimmer); margin-bottom:12px; }
.ab-fact dd{
  font-family:'Sora',sans-serif;
  font-size:clamp(18px,1.8vw,24px);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
}

/* ---------- manifesto ---------- */
.ab-manifesto,
.ab-disciplines{
  display:grid;
  grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);
  gap:32px clamp(32px,6vw,96px);
  padding-top:clamp(96px,15vh,180px);
}
.ab-aside .section-eyebrow{ margin-bottom:16px; }
.ab-aside h2{ margin-bottom:20px; font-size:clamp(30px,3.4vw,48px); }
.ab-aside__note{ max-width:300px; color:var(--ink-dim); font-size:14.5px; line-height:1.65; }
.ab-aside__note a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--ink-dimmer);
  text-underline-offset:3px;
  transition:text-decoration-color .3s var(--ease-soft);
}
.ab-aside__note a:hover{ text-decoration-color:var(--ink); }
.ab-aside--sticky{ position:sticky; top:120px; align-self:start; }

.ab-beliefs{ display:grid; gap:clamp(22px,3vw,36px); }
.ab-belief{
  max-width:22ch;
  font-family:'Sora',sans-serif;
  font-size:clamp(26px,3.4vw,50px);
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.03em;
  color:var(--ink);
}

/* ---------- principles ---------- */
.ab-principles,
.ab-process{ padding-top:clamp(96px,15vh,180px); }
.ab-principle-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;
  border-top:1px solid var(--line);
}
.ab-principle{
  position:relative;
  padding:34px 32px 8px;
  border-left:1px solid var(--line);
}
.ab-principle:first-child{ padding-left:0; border-left:0; }
.ab-principle::before{
  content:'';
  position:absolute;
  top:-1px;
  left:0;
  width:100%;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s var(--ease-luxe);
}
.ab-principle:hover::before{ transform:scaleX(1); }
.ab-numeral{
  display:block;
  font-family:'Sora',sans-serif;
  font-size:clamp(64px,7vw,112px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.3);
  transition:color .6s var(--ease-soft), -webkit-text-stroke-color .6s var(--ease-soft);
}
.ab-principle:hover .ab-numeral{ color:var(--ink); -webkit-text-stroke-color:var(--ink); }
html[data-theme='light'] .ab-numeral{ -webkit-text-stroke-color:rgba(17,19,22,.3); }
.ab-principle h3{ margin:26px 0 12px; font-size:22px; color:var(--ink); }
.ab-principle p{ max-width:34ch; color:var(--ink-dim); font-size:15px; line-height:1.65; }

/* ---------- disciplines ---------- */
.ab-discipline-list{ list-style:none; border-top:1px solid var(--line); }
.ab-discipline{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 44px;
  align-items:center;
  gap:20px;
  padding:26px 12px 26px 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.ab-discipline::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, rgba(255,255,255,.05), transparent 80%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .6s var(--ease-luxe);
}
.ab-discipline__num{ color:var(--ink-dimmer); font-variant-numeric:tabular-nums; transition:color .3s var(--ease-soft); }
.ab-discipline__body{ display:grid; gap:6px; transition:transform .55s var(--ease-luxe); }
.ab-discipline__body strong{
  font-family:'Sora',sans-serif;
  font-size:clamp(22px,2.4vw,32px);
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--ink);
}
.ab-discipline__body span{ color:var(--ink-dim); font-size:14.5px; line-height:1.55; }
.ab-discipline__go{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-dim);
  font-size:18px;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), background-color .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.ab-discipline:hover::before{ transform:scaleX(1); }
.ab-discipline:hover .ab-discipline__num{ color:var(--ink); }
.ab-discipline:hover .ab-discipline__body{ transform:translateX(10px); }
.ab-discipline:hover .ab-discipline__go{ background:var(--ink); border-color:var(--ink); color:var(--void); transform:rotate(45deg); }
.ab-discipline:active .ab-discipline__body{ transform:translateX(4px); }
html[data-theme='light'] .ab-discipline::before{ background:linear-gradient(90deg, rgba(17,19,22,.05), transparent 80%); }

/* ---------- say hello ---------- */
.ab-hello{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-top:clamp(96px,15vh,180px);
  padding-top:clamp(64px,10vh,120px);
  padding-bottom:clamp(80px,12vh,150px);
  border-top:1px solid var(--line);
}
.ab-hello__title{
  margin:18px 0 clamp(28px,4vw,44px);
  font-size:clamp(40px,6.6vw,104px);
  line-height:.95;
  letter-spacing:-.04em;
}
.ab-email{
  display:inline-flex;
  align-items:center;
  gap:.3em;
  max-width:100%;
  padding-bottom:6px;
  font-family:'Sora',sans-serif;
  font-size:clamp(22px,3.6vw,52px);
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--ink);
  overflow-wrap:break-word;
  background:
    linear-gradient(var(--ink), var(--ink)) left bottom / 0% 2px no-repeat,
    linear-gradient(var(--line), var(--line)) left bottom / 100% 2px no-repeat;
  transition:background-size .7s var(--ease-luxe);
}
.ab-email i{ font-size:.8em; color:var(--ink-dim); transition:transform .5s var(--ease-luxe), color .3s var(--ease-soft); }
.ab-email:hover{ background-size:100% 2px, 100% 2px; }
.ab-email:hover i{ transform:translate(4px,-4px); color:var(--ink); }

.ab-hello__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 28px;
  margin-top:30px;
}
.ab-phone{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  color:var(--ink-dim);
  font-size:12px;
  letter-spacing:.12em;
  transition:color .3s var(--ease-soft);
}
.ab-phone i{ font-size:17px; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.ab-phone:hover{ color:var(--ink); }
.ab-phone:hover i{ transform:rotate(-14deg) scale(1.1); }
.ab-socials{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.ab-social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 16px 0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-dim);
  font-size:13px;
  transition:color .3s var(--ease-soft), border-color .3s var(--ease-soft), background-color .3s var(--ease-soft), transform .2s var(--ease-soft);
}
.ab-social .social-icon{ width:16px; height:16px; flex-basis:16px; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.ab-social:hover{ color:var(--ink); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.05); }
.ab-social:hover .social-icon{ transform:rotate(-8deg) scale(1.1); }
.ab-social:active{ transform:scale(.96); }
html[data-theme='light'] .ab-social:hover{ border-color:rgba(17,19,22,.24); background:rgba(17,19,22,.04); }
.ab-start{ margin-top:clamp(36px,5vw,52px); }

.ab-page a:focus-visible,
.ab-page button:focus-visible{ outline:2px solid var(--ink-dim); outline-offset:4px; border-radius:10px; }

/* ---------- scroll-driven reveals ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Each belief lights up as it reaches the reading line, and stays lit. */
    .ab-belief{
      animation:ab-lit linear both;
      animation-timeline:view();
      animation-range:entry 30% cover 45%;
    }
    .ab-fact,
    .ab-principle,
    .ab-discipline,
    .ab-process .svc-timeline,
    .ab-hello > *{
      animation:ab-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 20%;
    }
  }
}
@keyframes ab-lit{
  from{ color:var(--ink-dimmer); opacity:.55; }
  to{ color:var(--ink); opacity:1; }
}
@keyframes ab-rise{
  from{ opacity:0; transform:translateY(28px); filter:blur(6px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .ab-hero{ min-height:auto; padding-top:130px; }
  .ab-facts{ grid-template-columns:1fr 1fr; }
  .ab-fact:nth-child(3){ padding-left:0; border-left:0; }
  .ab-fact:nth-child(n+3){ border-top:1px solid var(--line); }
  .ab-manifesto,
  .ab-disciplines{ grid-template-columns:1fr; }
  .ab-aside--sticky{ position:static; }
  .ab-principle-list{ grid-template-columns:1fr; }
  .ab-principle{ padding:30px 0 34px; border-left:0; border-bottom:1px solid var(--line); }
  .ab-principle::before{ display:none; }
}
@media (max-width:640px){
  .ab-title{ font-size:clamp(48px,15vw,84px); }
  .ab-line--dim{ -webkit-text-stroke-width:1px; }
  .ab-wordmark{ bottom:auto; top:150px; width:150vw; opacity:.4; }
  .ab-clock{ gap:8px; padding:0 11px; }
  .ab-clock .mono{ letter-spacing:.08em; }
  .ab-fact{ padding:22px 14px 24px; }
  .ab-fact:nth-child(odd){ padding-left:0; border-left:0; }
  .ab-fact dd{ font-size:17px; }
  /* Phone rhythm: shorter gaps between chapters, type sized to the column. */
  .ab-manifesto,
  .ab-disciplines,
  .ab-principles,
  .ab-process{ padding-top:76px; }
  .ab-hero{ padding-bottom:44px; }
  .ab-wordmark{ opacity:.22; }
  .ab-lede{ font-size:16px; }
  .ab-section-head h2,
  .ab-aside h2{ font-size:clamp(30px, 9vw, 40px); }
  .ab-aside .section-eyebrow{ margin-bottom:12px; }
  .ab-beliefs{ gap:18px; }
  .ab-belief{ max-width:none; font-size:clamp(21px, 6.2vw, 26px); line-height:1.22; }
  .ab-principle{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; padding:26px 0 28px; }
  .ab-numeral{ grid-row:1 / span 2; font-size:52px; }
  .ab-principle h3{ margin:4px 0 8px; font-size:20px; }
  .ab-principle p{ font-size:14.5px; }
  /* The index sits above the name, so the copy gets the full width. */
  .ab-discipline{
    grid-template-columns:minmax(0,1fr) 40px;
    grid-template-rows:auto auto;
    gap:8px 14px;
    padding:20px 0;
  }
  .ab-discipline__num{ grid-column:1; grid-row:1; font-size:11px; }
  .ab-discipline__body{ grid-column:1; grid-row:2; }
  .ab-discipline__go{ grid-column:2; grid-row:1 / span 2; align-self:center; width:40px; height:40px; }
  .ab-hello{ margin-top:76px; padding-top:56px; padding-bottom:72px; }
  .ab-hello__title{ font-size:clamp(38px, 12vw, 52px); }
  .ab-email{ font-size:min(5.2vw, 26px); }
  .ab-hello__row{ gap:12px 20px; margin-top:24px; }
}

@media (prefers-reduced-motion: reduce){
  .ab-word,
  .ab-wordmark,
  .ab-hero__foot,
  .ab-clock{ animation:none; }
}
@media (hover:none), (pointer:coarse){
  .ab-discipline:hover .ab-discipline__body{ transform:none; }
  .ab-principle:hover .ab-numeral{ color:transparent; -webkit-text-stroke-color:rgba(255,255,255,.3); }
}