/* ===== Tokens ===== */
:root{
  --accent:#A8461F;
  --accent-text:#86361A;
  --accent-light:#D27C58;
  --bg:#F5F2EB; --bg-alt:#EBE6DB; --card:#E2D9C8; --card-2:#E6DED0;
  --bg-veil:#EDEAE3; /* --bg as it looks under the grain; the side diagram fades to this */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ink:#1C1B19; --ink-hover:#3A3833;
  --text-2:#4E4A43; --text-3:#5E5D59; --text-4:#5E5D59; --arrow:#87867F; /* muted: Anthropic slate-light */
  --line:#DCD6CA; --line-2:#CFC5B3;
  --dark-text:#FAF9F5; --dark-text-2:#B0AEA5; --dark-line:#3A3833;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --gutter:clamp(20px,5vw,48px);
}

/* ===== Base ===== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg) var(--grain);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
/* Headings and interface in sans; running text in serif (body default) */
.site-header,.site-footer,.btn,.tools,.faq summary{font-family:var(--sans)}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--ink-hover)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
.site-footer :focus-visible{outline-color:var(--accent-light)}
img,svg{display:block;max-width:100%}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}

/* ===== Layout and shared components ===== */
.wrap{max-width:1120px;margin:0 auto}
.section{padding:clamp(64px,10vw,120px) var(--gutter)}
.label{margin:0;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.h2{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(34px,5.2vw,56px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.intro{margin:0;font-size:19px;line-height:1.55;color:var(--text-2);max-width:34em;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:15px 24px;border-radius:8px;font-size:16px;font-weight:500;white-space:nowrap}
.btn--primary{background:var(--ink);color:var(--bg)}
.btn--primary:hover{background:var(--ink-hover);color:var(--bg)}
.btn--small{min-height:44px;padding:10px 16px;font-size:15px}
.pm{font-size:24px;line-height:1;color:var(--accent-text);flex-shrink:0;transition:transform .35s}
details[open] .pm{transform:rotate(45deg)}

/* ===== Nav ===== */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg) var(--grain);border-bottom:1px solid var(--line)}
.nav{max-width:calc(1120px + 2 * var(--gutter));margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{display:flex;align-items:center;color:var(--ink);font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nav__right{display:flex;align-items:center;gap:clamp(14px,3vw,32px);font-size:15px}
.nav__links{display:flex;gap:clamp(14px,3vw,32px)}
.nav__links a{color:var(--ink);min-height:44px;display:flex;align-items:center}
@media (max-width:640px){.nav__links{display:none}}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:var(--dark-text-2);padding:0 var(--gutter)}
.footer__row{max-width:1120px;margin:0 auto;padding:28px 0 40px;border-top:1px solid var(--dark-line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;font-size:14px}
.footer__brand{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dark-text)}
.footer__email{color:var(--dark-text)}
.footer__email:hover{color:var(--accent-light)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pm{transition:none}}

/* ===== Hero ===== */
.hero{padding:clamp(20px,2.5vw,32px) var(--gutter) clamp(32px,4vw,56px)}
/* "Processes," top-left, the knotted lines in the middle, "streamlined." bottom-right over the lines' lower edge */
.hero h1{margin:0;display:flex;flex-direction:column;font-family:var(--sans);font-weight:600;font-size:clamp(40px,6.4vw,84px);line-height:.95;letter-spacing:-.045em}
.hero__l1{align-self:flex-start;margin-left:clamp(16px,8vw,120px)}
.hero__l2{align-self:flex-end;margin-right:clamp(16px,8vw,120px);margin-top:clamp(-72px,-5.5vw,-20px)}
.hero__art{width:100%;max-width:700px;height:auto;align-self:center;margin:clamp(4px,1vw,12px) 0;
  /* even fade on the left, ragged fade on the right (hero-mask.svg), soft top and bottom */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%),url(assets/hero-mask.svg),linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to right,#000 40%,transparent 60%);
  -webkit-mask-size:100% 100%,100% 100%,100% 100%,300% 100%;-webkit-mask-position:0 0;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 5%),url(assets/hero-mask.svg),linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to right,#000 40%,transparent 60%);
  mask-size:100% 100%,100% 100%,100% 100%,300% 100%;mask-position:0 0;mask-repeat:no-repeat;mask-composite:intersect;
  /* the 4th mask layer slides across once: the lines fade in from left to right */
  animation:hero-in 2.4s cubic-bezier(.3,0,.2,1) .15s backwards}
@keyframes hero-in{from{-webkit-mask-position:0 0,0 0,0 0,100% 0;mask-position:0 0,0 0,0 0,100% 0}}
@media (prefers-reduced-motion:reduce){.hero__art{animation:none}}
.hero__sub{margin:clamp(12px,2vw,24px) 0 0;text-align:center;font-size:clamp(17px,2.1vw,22px);line-height:1.5;text-wrap:pretty}
.hero__ctas{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* Founding-clients offer: a text link beside the button */
.hero__ctas{align-items:center;column-gap:24px}
.offer-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-family:var(--sans);font-size:13px;letter-spacing:.01em;color:#FAF9F5}
.offer-link__chip{display:inline-flex;align-items:center;justify-content:center;width:36px;height:18px;box-sizing:border-box;border:1px solid #FAF9F5;border-radius:9999px;background:#FAF9F5;color:#141413;font-size:11px;line-height:1} /* Anthropic TinyMoreButton: 36x18, 1px border */
.offer-link__chip svg{fill:currentColor}
.offer-link strong{font-weight:500}
.offer-link:hover{color:#FAF9F5} /* no colour change on hover */
.offer-link:hover>span:last-child{text-decoration:underline;text-underline-offset:.2em}
/* Hero on the dusk horizon (same image and drift as Who we are): light text, ivory strands, ivory button */
/* The sky block (hero + logo strip) slides up under the sticky nav, so the image runs behind all three */
.sky{position:relative;isolation:isolate;overflow:hidden;color:var(--dark-text);background:#1E1E1D;margin-top:-73px;padding-top:73px} /* dark base while the image loads; 73px = nav height */
.sky :focus-visible,.over-sky :focus-visible{outline-color:var(--dark-text)}
.sky .tools{border-top:1px solid rgba(250,249,245,.14);border-bottom:0}
.sky .tools .label{color:var(--accent-light)}
.sky .tools__list{color:#D6D3CB}
.sky .tools__list img{filter:brightness(0) invert(1);opacity:.7}
.site-header{transition:background-color .3s,border-color .3s}
.site-header.over-sky{background:transparent;border-bottom-color:transparent}
.over-sky .wordmark,.over-sky .nav__links a{color:var(--dark-text)}
.over-sky .btn--primary{background:var(--dark-text);color:var(--ink)}
.hero__sub{color:#E8E4DC}
.hero .btn--primary{background:var(--dark-text);color:var(--ink)}
.hero .btn--primary:hover{background:#fff;color:var(--ink)}
.hero__art path:first-of-type{fill:#D1CDC3}
.hero__art{mix-blend-mode:overlay} /* strands pick up the sunset's colours instead of sitting on top of it */
img.hero__art{filter:invert(1) hue-rotate(180deg)} /* plain image (before the inline swap, or reduced motion): light lines, knot stays orange */
.lines{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ===== Tools strip ===== */
.tools{padding:36px clamp(20px,4vw,64px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tools__row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 48px}
.tools .label{line-height:28px}
.tools__marquee{flex:1 1 0;min-width:0;display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.tools__list{flex:none;margin:0;padding:0 48px 0 0;list-style:none;display:flex;align-items:center;gap:48px;font-size:18px;font-weight:500;color:var(--text-4);white-space:nowrap;animation:tools-scroll 32s linear infinite}
.tools__marquee:hover .tools__list{animation-play-state:paused}
@keyframes tools-scroll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .tools__list{animation:none;flex-wrap:wrap;gap:18px 32px;flex:1;white-space:normal}
  .tools__list[aria-hidden]{display:none}
  .tools__marquee{-webkit-mask-image:none;mask-image:none}
}
.tools__list li{display:flex;align-items:center;gap:12px}
.tools__list img{width:24px;height:24px;opacity:.62}
.tools__more{font-family:var(--sans);font-size:15px;font-weight:400;white-space:nowrap}

/* ===== Problems / Services / Results: one column with the side diagram from 900px ===== */
.split-wrap{padding:0 var(--gutter)}
.split{max-width:1120px;margin:0 auto}
.split .section{padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line)}
.split .problems{padding:clamp(48px,6vw,80px) 0;border-top:0}
.split .services .h2,.results .h2{font-size:clamp(32px,4.2vw,46px)}
/* Below 900px the same diagram sits faintly behind the three sections */
@media (max-width:899.98px){
  .split{position:relative}
  .split__main{position:relative;z-index:1}
  .flowmap{display:flex;justify-content:center;position:absolute;inset:0;opacity:.16;pointer-events:none}
  .flowmap__labels{display:none}
}
@media (min-width:900px){
  .split{display:grid;grid-template-columns:minmax(0,680px) minmax(380px,1fr);gap:0 clamp(48px,6vw,96px)}
  .split__main{min-width:0}
  .flowmap{display:flex;justify-content:center;gap:8px}
}
.flowmap__art{position:relative;flex:1;min-width:0;max-width:420px}
.flowmap__art svg{position:absolute;top:0;left:0;overflow:hidden;max-width:none}
.veil{fill:var(--bg-veil);transition:opacity .45s ease}
.flowmap .tape{position:absolute;transform:translate(-50%,-50%) rotate(var(--a));background:var(--line-2);opacity:.92;transition:opacity .45s ease;padding:5px 14px;clip-path:polygon(0 0,100% 0,calc(100% - 4px) 25%,100% 50%,calc(100% - 4px) 75%,100% 100%,0 100%,4px 75%,0 50%,4px 25%);font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.03em;line-height:1.1;white-space:nowrap;pointer-events:none}
.flowmap:not([data-zone="0"]) .tape{opacity:.3}
.flowmap__labels{width:104px;flex-shrink:0}
.flowmap__zone{box-sizing:border-box;padding-bottom:clamp(40px,5vw,64px)} /* sticky labels stop short of the zone's end (and the How we work block) */
.flowmap__zone>div{position:sticky;top:50vh;padding-top:clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:10px}
.flowmap__zone a{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#9A948A;transition:color .3s}
.flowmap__zone a::before{content:"←";font-family:var(--sans);font-size:14px;letter-spacing:0;color:var(--accent-text);opacity:0;transition:opacity .3s}
.flowmap__zone a:hover,.flowmap__zone.is-active a{color:var(--ink)}
.flowmap__zone.is-active a::before{opacity:1}

/* ===== Problems ===== */
.problems .h2{max-width:14ch}
.box{fill:none;stroke:var(--ink);stroke-width:1.5}
.fray{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.ai{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.bead{position:absolute;left:-4.5px;top:-4.5px;width:9px;height:9px;box-sizing:border-box;border:1.6px solid var(--ink);border-radius:50%;background:var(--bg);will-change:transform;pointer-events:none;opacity:0}
.bead--ai{border-color:var(--accent)}
.claims{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 40px}
.results .label{margin-bottom:14px}
.results .h2{max-width:16ch}
.results .claims{margin-top:28px}
.claim{border-top:1px solid var(--ink);padding:16px 0 20px;display:flex;flex-direction:column;gap:8px}
.claim h3{margin:0;font-family:var(--sans);font-weight:500;letter-spacing:-.015em;font-size:clamp(21px,2.4vw,25px);line-height:1.3;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.bead{display:none}}

/* ===== Services ===== */
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;align-items:start}
.card{background:#FAF9F5;border-radius:16px}
.card summary{padding:18px 20px;display:grid;grid-template-columns:1fr auto;align-items:start;gap:8px 16px;border-radius:16px}
.card h3{margin:0;min-height:2.5em;font-family:var(--sans);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.015em}
.card .pm{position:relative;width:14px;height:calc(21px * 1.25);font-size:0} /* drawn plus, centred on the title's first line */
.faq .pm{position:relative;width:14px;height:calc(18px * 1.4);font-size:0}
.card .pm::before,.card .pm::after,.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;border-radius:1px;background:currentColor}
.card .pm::after,.faq .pm::after{transform:rotate(90deg)}
.is-closing .pm{transform:none}
.card__sub{grid-column:1/-1;min-height:4.2em;font-family:var(--serif);font-size:18px;line-height:1.4;color:var(--ink)}
.card ul{margin:0;padding:14px 20px 18px 38px;border-top:1px solid var(--line-2);font-family:var(--serif);font-size:16.5px;line-height:1.45;display:grid;gap:6px}

/* ===== Example builds (wide card inside Services) ===== */
.examples{grid-column:1/-1}
.examples h3{min-height:0}
.examples__grid{padding:16px 20px 20px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px 28px}
.example{display:flex;flex-direction:column;gap:10px;min-width:0}
.example h4{margin:0;font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.example p{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.flowline{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-family:var(--sans);font-size:12px}
.flowline li+li::before{content:"→";margin-right:8px;color:var(--arrow);font-family:var(--sans);font-size:14px}
.built{padding-top:10px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-family:var(--sans);font-size:12px}
.built .label{font-size:11px}

/* ===== How we work ===== */
/* How we work + Who we are: one block on the cream page: cream > ivory, horizon > cream > black (book).
   Scrolling in, it grows from a rounded card around the column to full width (no scroll timelines = full width). */
.duo{background:#FAF9F5}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  /* Starts as a card hugging the text column (text never moves), timed off a 1px marker above the block */
  main{timeline-scope:--duo}
  .duo-start{height:1px;margin-bottom:-1px;view-timeline:--duo block}
  .duo{overflow:hidden;animation:duo-grow linear both;animation-timeline:--duo;animation-range:cover 0% cover 175%}
  @keyframes duo-grow{from{clip-path:inset(0 max(12px,calc((100% - 1120px) / 2 - 24px)) round 28px)}to{clip-path:inset(0 0 round 0)}}
}}
.how .h2{margin-bottom:clamp(32px,4vw,48px)}
/* Step tag: Anthropic-style dots chip with the number beside it */
.step .step__tag{margin:0 0 4px;display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:12px;line-height:1;letter-spacing:.02em;color:#5E5D59}
.chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:15px;box-sizing:border-box;border:1px solid #E7E5DB;border-radius:9999px;background:#E7E5DB;color:#51514F}
.chip svg{fill:currentColor;width:10px;height:auto}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.step{padding:32px;border-radius:16px;background:#F5F4EC;display:flex;flex-direction:column;gap:12px}
.step h3{margin:0;font-family:var(--sans);font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.025em}
.step p{margin:0;font-size:18px;line-height:1.55;color:var(--ink);text-wrap:pretty}

/* ===== Who we are ===== */
/* Dusk horizon behind Who we are (tests/horizon.py draws it), drifting slowly; light text on top */
.who{position:relative;isolation:isolate;overflow:hidden;color:var(--dark-text);--ink:var(--dark-text);--text-3:var(--dark-text-2)}
.who::before,.sky::before{content:"";position:absolute;inset:-4%;z-index:-1;background:url(assets/horizon.jpg?v=7) center 35%/cover;animation:horizon-drift 30s ease-in-out infinite alternate}
.who::before{background-image:url(assets/horizon-band.jpg);background-position:center} /* zoomed into the glow (drawn that way, so the grain stays fine) */
.sky::before{filter:brightness(1.05) contrast(1.08);animation:sky-in .9s ease-out both,horizon-drift 30s ease-in-out infinite alternate} /* fades in over the dark base */
@keyframes sky-in{from{opacity:0}}
@keyframes horizon-drift{to{transform:scale(1.06) translateY(-2%)}}
@media (prefers-reduced-motion:reduce){.who::before,.sky::before{animation:none}}
.who__grid{display:flex;flex-wrap:wrap;gap:48px 64px;align-items:flex-start}
.who__text{flex:3 1 420px;min-width:0;display:flex;flex-direction:column;gap:28px}
.who__text p{margin:0;font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink);max-width:30em;text-wrap:pretty}
.people{flex:2 1 340px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.person{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.person__photo{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--card);display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:clamp(48px,8vw,72px);color:var(--text-3)}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:44px}
.person__name{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:-.015em}
.person figcaption a{font-size:14px;min-height:44px;display:flex;align-items:center}

/* ===== FAQ ===== */
.faq__grid{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:start}
.faq .h2{flex:1 1 260px}
.faq__list{flex:2 1 520px;min-width:0;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 0;min-height:44px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;font-size:18px;line-height:1.4;font-weight:600}
.faq details p{margin:0;padding:0 40px 24px 0;font-size:16px;line-height:1.6;color:var(--ink)}

/* ===== Book ===== */
.book{background:#1B1B1A var(--grain);color:var(--dark-text);padding-bottom:clamp(48px,8vw,96px)}
.book .h2{max-width:16ch;font-size:clamp(40px,7vw,80px);line-height:1.02;letter-spacing:-.025em}
.book .intro{margin:24px 0 48px;color:var(--dark-text)}
.booking{background:#fff;color:var(--ink);border-radius:12px;overflow:hidden} /* white, to match Calendly's own page */
.booking__empty{margin:0;min-height:320px;display:grid;place-items:center;padding:24px;text-align:center;font-family:var(--sans);font-size:13px;color:var(--text-4);background:repeating-linear-gradient(135deg,var(--bg) 0 12px,#EDE8DE 12px 13px)}
.calendly-inline-widget{min-width:280px;height:700px;filter:hue-rotate(156deg) saturate(.5)}
/* Calendly's free plan ignores our colours and shows its blue; this turns that blue into our terracotta (whites and greys stay put).
   Remove the filter if the Calendly plan is upgraded, since the colours passed in calendlySrc() would then apply. */
@media (max-width:640px){.calendly-inline-widget{height:1050px}}
.booking__fallback{margin:0;padding:12px 16px;font-size:14px;border-top:1px solid var(--line)}
.booking :focus-visible{outline-color:var(--accent)}

/* ===== Phones ===== */
@media (max-width:640px){
  .hero__l1{margin-left:6px}
  .hero__l2{margin-right:6px}
  .tools{padding-top:24px;padding-bottom:24px}
  .tools__row{flex-direction:column;gap:10px}
  .tools__marquee{flex:none;width:100%}
  .tools__list{font-size:16px;gap:36px;padding-right:36px}
  .card h3,.card__sub{min-height:0} /* row-alignment padding only matters side by side */
  .people{max-width:300px}
}