/* Fonts: Space Grotesk and Inter come from the brand kit; Cairo is the Arabic website extension. */
@font-face {
  font-family:'Space Grotesk';
  src:url('./assets/fonts/SpaceGrotesk-Variable.ttf') format('truetype');
  font-weight:300 700;
  font-display:swap;
}

@font-face {
  font-family:Inter;
  src:url('./assets/fonts/Inter-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:Inter;
  src:url('./assets/fonts/Inter-Semibold.ttf') format('truetype');
  font-weight:600;
  font-display:swap;
}

@font-face {
  font-family:Cairo;
  src:url('./assets/fonts/Cairo-Variable.ttf') format('truetype');
  font-weight:200 1000;
  font-display:swap;
}

:root {
  color-scheme:light;
  /* Semantic roles over the brand palette in brand-tokens.css. */
  --ink:var(--kapio-aubergine);
  --muted:var(--kapio-muted-plum);
  --accent:var(--kapio-signal-coral);
  --paper:var(--kapio-pure-white);
  --ivory:var(--kapio-warm-ivory);
  --line:var(--kapio-soft-line);
  --ink-soft:color-mix(in srgb, var(--kapio-aubergine) 22%, transparent);
  --on-dark:var(--kapio-warm-ivory);
  --on-dark-muted:color-mix(in srgb, var(--kapio-warm-ivory) 74%, var(--kapio-aubergine));

  --font-body:Inter, Cairo, Arial, sans-serif;
  --font-heading:'Space Grotesk', Cairo, Arial, sans-serif;

  /* Type scale (roughly a perfect fourth from 17px). */
  --step--1:.875rem;
  --step-0:1.0625rem;
  --step-1:clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --step-2:clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --step-3:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --step-4:clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --step-5:clamp(2.625rem, 1.5rem + 4.6vw, 4.75rem);
  --poster:clamp(2.5rem, 1.2rem + 4.4vw, 5rem);

  --gutter:clamp(20px, 5vw, 72px);
  --section:clamp(72px, 9vw, 136px);
  --header:72px;

  --ease-out:cubic-bezier(.23, 1, .32, 1);

  font-family:var(--font-body);
  font-size:100%;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--header) + 16px);
}

[dir=rtl] {
  line-height:1.8;
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

body {
  margin:0;
  font-size:var(--step-0);
  background:var(--paper);
  overflow-x:clip;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
address {
  margin:0;
}

ul,
ol {
  padding:0;
  list-style:none;
}

address {
  font-style:normal;
}

img,
svg {
  display:block;
  max-width:100%;
}

h1,
h2,
h3 {
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}

/* Arabic script joins letters: never track it, and give diacritics room. */
[dir=rtl] h1,
[dir=rtl] h2,
[dir=rtl] h3 {
  letter-spacing:0;
  line-height:1.35;
}

p {
  text-wrap:pretty;
}

a {
  color:inherit;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}

::selection {
  background:var(--accent);
  color:var(--ink);
}

/* Browser surfaces carry the palette too. */
html {
  scrollbar-color:var(--muted) var(--paper);
  accent-color:var(--accent);
}

input,
textarea {
  caret-color:var(--accent);
}

:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px;
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.wrap {
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.lede {
  font-size:var(--step-1);
  color:var(--muted);
  max-width:56ch;
}

.text-link {
  display:inline-block;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
  padding-block:10px;
  transition:text-decoration-color 160ms ease;
}

/* Buttons: coral with aubergine label, or an aubergine outline. Square corners throughout. */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  font-weight:600;
  font-size:var(--step-0);
  white-space:nowrap;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}

.button:active {
  transform:scale(.97);
}

.button-primary {
  background:var(--accent);
  color:var(--ink);
}

.button-quiet {
  border-color:var(--ink);
  color:var(--ink);
}

@media (hover:hover) and (pointer:fine) {
  .button-primary:hover {
    background:var(--ink);
    color:var(--on-dark);
  }

  .button-quiet:hover {
    background:var(--ink);
    color:var(--on-dark);
  }

  .text-link:hover {
    text-decoration-color:currentColor;
  }
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Crest-scale section headings. */
.poster {
  font-size:var(--poster);
  line-height:.98;
  letter-spacing:-.035em;
  max-width:14ch;
}

[dir=rtl] .poster {
  line-height:1.3;
  letter-spacing:0;
}

/* Aubergine button with an ivory label, for coral grounds. */
.button-ink {
  background:var(--ink);
  color:var(--on-dark);
}

@media (hover:hover) and (pointer:fine) {
  .button-ink:hover {
    background:var(--paper);
    color:var(--ink);
  }
}

.button[aria-busy=true] {
  opacity:.7;
  cursor:progress;
}

/* Crest strokes (src/templates/strokes.mjs): the apex sits in the top-end corner. */
.strokes {
  position:absolute;
  top:0;
  inset-inline-end:0;
  pointer-events:none;
  overflow:visible;
}

[dir=rtl] .strokes {
  transform:scaleX(-1);
}

.stroke-coral { fill:var(--accent); }
.stroke-ink { fill:var(--ink); }
.stroke-ivory { fill:var(--ivory); }

/* Photo placeholders: replaced by real photos via content/site.json (images). */
.placeholder {
  display:grid;
  place-items:center;
  width:100%;
  margin:0;
  padding:24px;
  background:var(--ivory);
  outline:1.5px dashed var(--ink);
  outline-offset:-1.5px;
  text-align:center;
}

.placeholder figcaption {
  display:grid;
  gap:6px;
  max-width:36ch;
  font-size:var(--step--1);
  color:var(--muted);
}

.placeholder-kind {
  font-weight:600;
  color:var(--ink);
}

.placeholder strong {
  font-weight:600;
  color:var(--ink);
}

.photo {
  width:100%;
  height:auto;
}

.skip {
  position:absolute;
  inset-inline-start:16px;
  top:-80px;
  z-index:30;
  padding:12px 16px;
  background:var(--ink);
  color:var(--on-dark);
  font-weight:600;
}

.skip:focus {
  top:12px;
}

main:focus {
  outline:none;
}

/* Header: sticky, single line on desktop; collapses into a disclosure menu below 1024px. */
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line);
}

.header-inner {
  position:relative;
  display:flex;
  align-items:center;
  gap:28px;
  min-height:var(--header);
}

.brand {
  display:block;
  width:164px;
  flex-shrink:0;
  /* The SVG carries its own clear space; pull it back so the mark aligns with the grid. */
  margin-inline-start:-10px;
}

.brand img {
  width:100%;
  height:auto;
}

.nav {
  margin-inline-start:auto;
}

.nav ul {
  display:flex;
  gap:4px;
}

.nav a,
.language {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:12px;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:2px;
  text-underline-offset:8px;
  transition:text-decoration-color 160ms ease;
  white-space:nowrap;
}

.nav a[aria-current=page],
.nav a[aria-current=true] {
  text-decoration-color:var(--accent);
}

.language {
  color:var(--muted);
}

.language[lang=ar] {
  font-family:Cairo, sans-serif;
}

.language[lang=en] {
  font-family:Inter, sans-serif;
}

@media (hover:hover) and (pointer:fine) {
  .nav a:hover,
  .language:hover {
    text-decoration-color:currentColor;
    color:var(--ink);
  }
}

.header-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.menu {
  display:none;
}

.menu summary {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding-inline:12px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
}

.menu summary::-webkit-details-marker {
  display:none;
}

.menu summary i {
  position:relative;
  width:18px;
  height:10px;
  border-block:2px solid var(--ink);
  transition:transform 200ms var(--ease-out);
}

.menu[open] summary i {
  transform:scaleY(.2);
}

.menu-panel {
  position:absolute;
  inset-inline:0;
  top:100%;
  padding:12px var(--gutter) 32px;
  background:var(--paper);
  box-shadow:0 1px 0 var(--line), 0 24px 40px -24px color-mix(in srgb, var(--ink) 30%, transparent);
}

.menu-panel a {
  display:block;
  padding-block:12px;
  font-family:var(--font-heading);
  font-size:var(--step-3);
  font-weight:500;
  text-decoration:none;
}

.menu-panel a[aria-current=page] {
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:3px;
}

.menu-panel .language {
  margin-block-start:12px;
  font-size:var(--step-1);
  padding:0;
}

@media (max-width:1023px) {
  .nav,
  .header-actions {
    display:none;
  }

  .menu {
    display:block;
    margin-inline-start:auto;
  }
}

/* Inner-page hero: Agreement-style headline, crest strokes in the top-end corner. */
.page-hero {
  position:relative;
  overflow:hidden;
  padding-block:clamp(56px, 8vw, 112px) clamp(56px, 7vw, 96px);
}

.page-hero .wrap {
  position:relative;
  z-index:1;
}

.page-hero h1 {
  font-size:var(--step-5);
  line-height:1.04;
  max-width:17ch;
}

.page-hero .lede {
  margin-block-start:28px;
  max-width:52ch;
}

.page-hero-text {
  margin-block-start:20px;
  max-width:62ch;
}

.page-hero-note {
  margin-block-start:20px;
  font-size:var(--step--1);
  color:var(--muted);
}

.page-hero .actions {
  margin-block-start:36px;
}

/* Tips end in open space, so they stop well clear of the hero's bottom edge. */
.strokes-page {
  width:min(30vw, 440px);
  height:calc(100% - 72px);
}

.crumb {
  margin-block-end:28px;
  font-size:var(--step--1);
}

.crumb ol {
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
}

.crumb li + li::before {
  content:"/";
  margin-inline-end:10px;
  color:var(--muted);
}

.crumb a {
  text-decoration-color:var(--ink-soft);
}

.crumb [aria-current] {
  color:var(--muted);
}

/* Closing call to action: full-bleed coral with aubergine type and strokes. */
.cta {
  position:relative;
  overflow:hidden;
  padding-block:var(--section);
  background:var(--accent);
  color:var(--ink);
}

.cta-inner {
  position:relative;
  z-index:1;
}

.cta h2 {
  font-size:var(--poster);
  line-height:.98;
  letter-spacing:-.035em;
  max-width:12ch;
}

[dir=rtl] .cta h2 {
  line-height:1.3;
  letter-spacing:0;
}

.cta-line {
  margin-block-start:24px;
  font-size:var(--step-1);
  max-width:40ch;
}

.cta-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 28px;
  margin-block-start:40px;
}

.cta-actions p {
  font-size:var(--step--1);
  max-width:42ch;
}

.cta :focus-visible {
  outline-color:var(--ink);
}

.strokes-cta {
  width:min(44vw, 620px);
  height:100%;
}

/* On coral, the coral feathers would vanish: draw them in ivory and keep the middle aubergine. */
.strokes-cta .stroke-coral {
  fill:var(--ivory);
}

/* On phones the headlines span the full width, so these strokes would cross them. */
@media (max-width:767px) {
  .strokes-cta,
  .strokes-page {
    display:none;
  }
}

/* Footer: the signature aubergine panel. */
.site-footer {
  background:var(--ink);
  color:var(--on-dark);
  padding-block:clamp(56px, 7vw, 96px) 32px;
}

.footer-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr 1.2fr;
  gap:40px;
}

.footer-brand img {
  width:176px;
  height:auto;
  margin-inline-start:-11px;
}

.footer-brand p {
  margin-block-start:8px;
  color:var(--on-dark-muted);
}

.site-footer ul {
  display:grid;
  gap:4px;
}

.site-footer nav a {
  display:inline-block;
  padding-block:6px;
  text-decoration:none;
}

.footer-contact a {
  font-family:var(--font-heading);
  font-size:var(--step-2);
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:2px;
}

.footer-base {
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 32px;
  margin-block-start:64px;
  padding-block-start:24px;
  font-size:var(--step--1);
  color:var(--on-dark-muted);
}

/* The rule spans the content column, not the padded wrapper. */
.footer-base::before {
  content:"";
  position:absolute;
  inset-inline:var(--gutter);
  top:0;
  border-block-start:1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
}

.site-footer :focus-visible {
  outline-color:var(--on-dark);
}

@media (hover:hover) and (pointer:fine) {
  .site-footer nav a:hover {
    text-decoration:underline;
    text-decoration-color:var(--accent);
  }
}

@media (max-width:767px) {
  .footer-grid {
    grid-template-columns:1fr;
  }
}

/* Shared Crest sections: How we work, the line tiles, design partners and the FAQ. */
/* How we work: aubergine band with an angled top edge and four numbered cards. */
.how {
  --angle:clamp(32px, 6vw, 96px);
  background:var(--ink);
  color:var(--on-dark);
  padding-block:calc(var(--angle) + clamp(48px, 6vw, 80px)) var(--section);
  clip-path:polygon(0 var(--angle), 100% 0, 100% 100%, 0 100%);
}

[dir=rtl] .how {
  clip-path:polygon(0 0, 100% var(--angle), 100% 100%, 0 100%);
}

.steps {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:auto auto 1fr;
  gap:0 12px;
  margin-block:48px 36px;
  padding-block-start:28px;
}

.steps::before,
.steps::after {
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:2px;
  background:color-mix(in srgb, var(--on-dark) 22%, transparent);
}

.steps::after {
  background:var(--accent);
  transform-origin:left;
}

[dir=rtl] .steps::after {
  transform-origin:right;
}

.step {
  display:grid;
  grid-row:span 3;
  grid-template-rows:subgrid;
  align-content:start;
  min-height:clamp(260px, 24vw, 320px);
  padding:clamp(24px, 2.4vw, 32px);
  border:1.5px solid color-mix(in srgb, var(--on-dark) 28%, transparent);
}

.step:first-child {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}

.step-number {
  font-family:var(--font-heading);
  font-size:clamp(3.5rem, 2rem + 4vw, 6rem);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.04em;
  margin-block-end:clamp(40px, 5vw, 72px);
}

.steps h3 {
  font-size:var(--step-2);
  margin-block-end:8px;
}

.steps p {
  color:var(--on-dark-muted);
}

.step:first-child p {
  color:var(--ink);
}

.how .text-link {
  color:var(--on-dark);
}

.how :focus-visible {
  outline-color:var(--on-dark);
}

/* The seven lines as colour-blocked tiles: exactly seven cells. */
.lines {
  padding-block:var(--section);
}

.lines-intro {
  display:grid;
  gap:20px;
  justify-items:start;
  margin-block-end:48px;
}

.lines-intro p {
  color:var(--muted);
  max-width:60ch;
}

.tiles {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-auto-rows:minmax(220px, auto);
  gap:12px;
}

.tile a {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  height:100%;
  padding:clamp(22px, 2.2vw, 30px);
  text-decoration:none;
  transition:transform 200ms var(--ease-out);
}

.tile h3 {
  font-size:clamp(1.3rem, 1rem + .9vw, 1.85rem);
  line-height:1.1;
  letter-spacing:-.02em;
}

.tile p {
  font-size:var(--step--1);
  max-width:44ch;
}

.tile-1 { grid-column:span 2; grid-row:span 2; }
.tile-2,
.tile-6 { grid-column:span 2; }

.tile-1 a,
.tile-6 a {
  background:var(--ink);
  color:var(--on-dark);
}

.tile-1 h3 {
  font-size:clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  max-width:12ch;
}

.tile-2 a,
.tile-7 a {
  background:var(--accent);
  color:var(--ink);
}

.tile-3 a,
.tile-5 a {
  background:var(--ivory);
}

.tile-4 a {
  outline:1.5px solid var(--ink);
  outline-offset:-1.5px;
}

.tile a:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:3px;
}

.tile a:active {
  transform:scale(.98);
}

@media (hover:hover) and (pointer:fine) {
  .tile a:hover {
    transform:translateY(-4px);
  }
}

.tiles-detailed {
  grid-auto-rows:minmax(260px, auto);
}

.tile-headline {
  font-family:var(--font-heading);
  font-size:var(--step-1) !important;
  font-weight:500;
  line-height:1.35;
}

/* Design partners: stands in for testimonials. */
.partners {
  background:var(--ivory);
  padding-block:var(--section);
}

.partners-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:40px clamp(32px, 4vw, 64px);
  align-items:center;
}

.partners-copy {
  grid-column:1 / span 6;
  display:grid;
  gap:20px;
  justify-items:start;
}

.partners h2 {
  font-size:var(--step-4);
  line-height:1.04;
  max-width:16ch;
  margin-block-end:8px;
}

.partners-copy p {
  max-width:56ch;
}

.partners-copy p:first-of-type {
  font-family:var(--font-heading);
  font-size:var(--step-1);
  font-weight:500;
}

.partners-copy .actions {
  margin-block-start:16px;
}

.partners-media {
  grid-column:8 / span 5;
}

.partners-media:empty {
  display:none;
}

/* FAQ: native disclosure widgets, no script needed. */
.faq {
  padding-block:var(--section);
}

.faq-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:40px clamp(32px, 4vw, 64px);
  align-items:start;
}

.faq h2 {
  grid-column:1 / span 5;
  position:sticky;
  top:calc(var(--header) + 40px);
}

.faq-list {
  grid-column:6 / span 7;
  border-block-end:1px solid var(--line);
}

.faq-item {
  border-block-start:1px solid var(--line);
}

.faq-item summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:22px;
  font-family:var(--font-heading);
  font-size:var(--step-1);
  font-weight:500;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
}

.faq-item summary::-webkit-details-marker {
  display:none;
}

.faq-icon {
  position:relative;
  flex-shrink:0;
  width:20px;
  height:20px;
}

.faq-icon::before,
.faq-icon::after {
  content:"";
  position:absolute;
  inset-inline:0;
  top:9px;
  height:2px;
  background:var(--ink);
}

.faq-icon::after {
  transform:rotate(90deg);
  transition:transform 200ms var(--ease-out);
}

.faq-item[open] .faq-icon::after {
  transform:rotate(0);
}

.faq-answer p {
  padding-block-end:24px;
  color:var(--muted);
  max-width:62ch;
}

@media (hover:hover) and (pointer:fine) {
  .faq-item summary:hover {
    text-decoration:underline;
    text-decoration-color:var(--accent);
    text-decoration-thickness:2px;
    text-underline-offset:6px;
  }
}


/* Hero (Agreement): copy on the start side, the diagram panel on the end side, crest strokes behind. */
.hero {
  position:relative;
  overflow:hidden;
  padding-block:clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px);
}

.strokes-hero {
  width:min(60vw, 900px);
  height:100%;
}

.hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:clamp(32px, 4vw, 64px);
  align-items:center;
}

.hero-copy {
  grid-column:1 / span 7;
}

.hero h1 {
  font-size:var(--step-5);
  line-height:1.02;
  letter-spacing:-.035em;
  max-width:13ch;
}

[dir=rtl] .hero h1 {
  line-height:1.3;
  letter-spacing:0;
  max-width:14ch;
}

.hero .lede {
  margin-block-start:28px;
  max-width:44ch;
}

.hero .actions {
  margin-block-start:40px;
}

.hero-panel {
  grid-column:8 / span 5;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  min-height:min(540px, 70vh);
  padding:clamp(28px, 3vw, 44px);
  background:var(--ink);
  color:var(--on-dark);
}

.hero-outcome {
  font-family:var(--font-heading);
  font-size:var(--step-2);
  font-weight:500;
  line-height:1.25;
  max-width:16ch;
}

/* The agreement diagram. Colours follow the surface it sits on. */
.agreement {
  display:grid;
  gap:12px;
  --track:color-mix(in srgb, currentColor 28%, transparent);
  --node:currentColor;
}

.agreement svg {
  width:100%;
  height:auto;
  overflow:visible;
}

[dir=rtl] .agreement svg {
  transform:scaleX(-1);
}

.agreement-label {
  font-size:var(--step--1);
  font-weight:600;
  color:color-mix(in srgb, currentColor 72%, transparent);
}

.agreement .track {
  stroke:var(--track);
  stroke-width:1;
}

.agreement .link {
  stroke:var(--track);
  stroke-width:1.5;
  stroke-dasharray:1;
}

/* Before agreement the rungs are loose: dashed, never complete. */
.agreement .link-loose {
  stroke-dasharray:4 5;
}

.agreement .link-final {
  stroke:var(--accent);
  stroke-width:2;
}

.agreement .node {
  fill:var(--node);
  transform-box:fill-box;
  transform-origin:center;
}

.agreement .node-final {
  fill:var(--accent);
}

.hero-panel .agreement {
  margin-block-start:clamp(32px, 7vh, 96px);
}

/* The problem: two observers as two colour blocks, then the diagram coming into agreement. */
.problem {
  padding-block:var(--section);
}

.observers {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-block-start:48px;
}

.observer {
  display:flex;
  align-items:flex-end;
  min-height:clamp(200px, 20vw, 280px);
  padding:clamp(24px, 3vw, 44px);
  font-family:var(--font-heading);
  font-size:var(--step-2);
  font-weight:500;
  line-height:1.3;
}

.observer-strategy {
  background:var(--ivory);
}

.observer-reality {
  background:var(--ink);
  color:var(--on-dark);
}



.problem-close {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:40px clamp(32px, 4vw, 64px);
  align-items:center;
  margin-block-start:clamp(48px, 6vw, 80px);
}

.problem-diagram {
  grid-column:1 / span 6;
  max-width:560px;
  --track:var(--ink-soft);
}

.problem-diagram .agreement {
  --track:var(--ink-soft);
}

.problem-text {
  grid-column:8 / span 5;
  display:grid;
  gap:16px;
  justify-items:start;
}

.situations {
  margin-block-start:clamp(64px, 8vw, 112px);
  padding-block-start:40px;
  border-block-start:2px solid var(--ink);
}

.situations h3 {
  font-size:var(--step-2);
  margin-block-end:32px;
}

.situations ul {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px clamp(32px, 5vw, 96px);
}

.situations li {
  position:relative;
  padding-inline-start:28px;
  font-family:var(--font-heading);
  font-size:var(--step-1);
  font-weight:500;
  line-height:1.35;
  max-width:40ch;
}

.situations li::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.5em;
  width:10px;
  height:10px;
  background:var(--accent);
}

@media (max-width:1023px) {
  .hero-copy,
  .hero-panel,
  .problem-diagram,
  .problem-text,
  .partners-copy,
  .partners-media,
  .faq h2,
  .faq-list {
    grid-column:1 / -1;
  }

  .hero-panel {
    min-height:400px;
  }

  /* Stacked, any position would cross the headline or the diagram: the panel carries the hero. */
  .strokes-hero {
    display:none;
  }

  .faq h2 {
    position:static;
  }

  .steps {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:12px;
  }

  .tiles {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .tile-1 {
    grid-row:auto;
  }

  .tile-1,
  .tile-2,
  .tile-6 {
    grid-column:span 2;
  }
}

@media (max-width:767px) {
  .observers,
  .situations ul {
    grid-template-columns:1fr;
  }

  /* Phones: the four steps become a swipeable row. */
  .steps {
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:82%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
    padding-block-end:8px;
  }

  .steps::before,
  .steps::after {
    display:none;
  }

  .steps {
    padding-block-start:0;
  }

  .step {
    scroll-snap-align:start;
  }
}

@media (max-width:559px) {
  .tiles {
    grid-template-columns:1fr;
  }

  .tile-1,
  .tile-2,
  .tile-6 {
    grid-column:auto;
  }

  .tiles {
    grid-auto-rows:auto;
  }

  .tile a {
    min-height:180px;
  }

  .hero .actions .button {
    flex:1 1 100%;
  }
}

/* What we do: the seven tiles with each line's headline. */
.line-index {
  padding-block-end:var(--section);
}

/* Line pages. */
.line-detail {
  padding-block-end:var(--section);
}

.line-detail-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:40px clamp(32px, 4vw, 64px);
  align-items:stretch;
}

.included {
  grid-column:1 / span 7;
}

.included h2 {
  font-size:var(--step-3);
  margin-block-end:24px;
}

.included ul {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:8px;
}

.included li {
  display:flex;
  align-items:flex-end;
  min-height:120px;
  padding:20px;
  background:var(--ivory);
  font-family:var(--font-heading);
  font-size:var(--step-1);
  font-weight:500;
  line-height:1.25;
}

.outcome-block {
  grid-column:8 / span 5;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:320px;
  padding:clamp(28px, 3vw, 44px);
  background:var(--ink);
  color:var(--on-dark);
}

.outcome-block p {
  position:relative;
  padding-block-start:28px;
  font-family:var(--font-heading);
  font-size:var(--step-3);
  font-weight:500;
  line-height:1.15;
  max-width:16ch;
}

.outcome-block p::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;
  width:14px;
  height:14px;
  background:var(--accent);
}

.familiar-band {
  background:var(--ivory);
  padding-block:var(--section);
}

.familiar-band h2 {
  font-size:var(--step-2);
  margin-block-end:32px;
}

.familiar-band li {
  position:relative;
  padding-inline-start:32px;
  font-family:var(--font-heading);
  font-size:var(--step-3);
  font-weight:500;
  line-height:1.2;
  max-width:28ch;
}

.familiar-band li::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.45em;
  width:12px;
  height:12px;
  background:var(--accent);
}

.familiar-band li + li {
  margin-block-start:32px;
}

.related {
  padding-block:var(--section);
}

.related h2 {
  font-size:var(--step-3);
  margin-block-end:28px;
}

.related-list {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.related-list a {
  display:flex;
  align-items:flex-end;
  min-height:120px;
  height:100%;
  padding:20px 22px;
  font-family:var(--font-heading);
  font-size:var(--step-1);
  font-weight:500;
  line-height:1.2;
  text-decoration:none;
  transition:transform 200ms var(--ease-out);
}

.related-0 a { background:var(--ink); color:var(--on-dark); }
.related-1 a { background:var(--accent); color:var(--ink); }
.related-2 a { background:var(--ivory); }

.related-list a:active {
  transform:scale(.98);
}

.related-list a:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
  .related-list a:hover {
    transform:translateY(-4px);
  }
}

/* How we work page. */
.page-hero + .how .steps {
  margin-block-start:0;
}

.principles {
  padding-block:var(--section);
}

.principles h2 {
  margin-block-end:56px;
}

.principle-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0 clamp(32px, 5vw, 96px);
}

.principle-grid li {
  padding-block:28px 32px;
  border-block-start:2px solid var(--ink);
}

.principle-grid h3 {
  font-size:var(--step-2);
  margin-block-end:10px;
}

.principle-grid p {
  color:var(--muted);
  max-width:48ch;
}

.models {
  background:var(--accent);
  padding-block:clamp(56px, 6vw, 88px);
}

.models-inner {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:24px 56px;
}

.models h2 {
  font-size:var(--step-2);
}

.models ul {
  display:flex;
  flex-wrap:wrap;
  gap:12px 40px;
}

.models li {
  position:relative;
  padding-inline-start:22px;
  font-family:var(--font-heading);
  font-size:var(--step-2);
  font-weight:500;
}

.models li::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.45em;
  width:10px;
  height:10px;
  background:var(--ink);
}

/* Thank you and privacy. */
.thanks {
  padding-block-end:var(--section);
}

.thanks .actions {
  align-items:center;
  gap:16px 28px;
}

.prose {
  padding-block-end:var(--section);
}

.prose .wrap > * {
  max-width:68ch;
}

.prose h2 {
  margin-block:40px 12px;
  font-size:var(--step-2);
}

.prose h2:first-child {
  margin-block-start:0;
}

@media (max-width:1023px) {
  .included,
  .outcome-block {
    grid-column:1 / -1;
  }

  .related-list {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:767px) {
  .principle-grid,
  .related-list {
    grid-template-columns:1fr;
  }

  .outcome-block {
    min-height:240px;
  }
}

/* About: the long-form story beside the diagram. */
.essay {
  padding-block-end:var(--section);
}

.essay-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:48px clamp(32px, 4vw, 64px);
  align-items:start;
}

.essay-figure {
  grid-column:1 / span 5;
  position:sticky;
  top:calc(var(--header) + 48px);
  padding:clamp(24px, 3vw, 40px);
  background:var(--ivory);
}

.essay-figure .agreement {
  --track:var(--ink-soft);
}

.essay-text {
  grid-column:7 / span 6;
  display:grid;
  gap:28px;
  font-size:var(--step-1);
  line-height:1.65;
}

[dir=rtl] .essay-text {
  line-height:1.9;
}

.essay-big {
  font-family:var(--font-heading);
  font-size:var(--step-3);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.02em;
  padding-block:16px;
}

[dir=rtl] .essay-big {
  letter-spacing:0;
  line-height:1.5;
}

/* White, not ivory: the coral operators need the white ground to hold 3:1 as large text. */
.name {
  padding-block:var(--section);
  border-block-start:1px solid var(--line);
}

.name h2 {
  font-size:var(--step-1);
}

.equation {
  margin-block:0 56px;
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(3rem, 1.4rem + 6vw, 6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.035em;
  text-align:start;
}

.equation span {
  color:var(--accent);
  font-weight:500;
}

.name-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 5vw, 96px);
}

.name-grid h3 {
  font-family:'Space Grotesk', sans-serif;
  font-size:var(--step-2);
  margin-block-end:12px;
}

.name-grid p {
  max-width:52ch;
}

.name-note {
  margin-block-start:48px;
  font-size:var(--step--1);
  color:var(--muted);
  max-width:70ch;
}

.hoopoe {
  background:var(--ink);
  color:var(--on-dark);
  padding-block:var(--section);
}

.hoopoe-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:48px clamp(32px, 4vw, 64px);
  align-items:center;
}

/* The symbol is shown whole and unmodified; it faces right in both languages. */
.hoopoe-symbol {
  grid-column:1 / span 4;
  width:min(100%, 300px);
  height:auto;
}

.hoopoe-copy {
  grid-column:6 / span 7;
  display:grid;
  gap:20px;
}

.hoopoe h2 {
  font-size:var(--step-4);
  max-width:16ch;
}

.hoopoe-copy > p:not(.hoopoe-tagline) {
  color:var(--on-dark-muted);
  max-width:56ch;
}

.hoopoe-tagline {
  font-family:var(--font-heading);
  font-size:var(--step-2);
  font-weight:500;
  color:var(--accent);
}

.actions-list {
  display:grid;
  gap:12px;
  margin-block-start:8px;
}

.actions-list li {
  padding-block-start:12px;
  border-block-start:1px solid color-mix(in srgb, var(--on-dark) 20%, transparent);
  color:var(--on-dark-muted);
}

.actions-list strong {
  color:var(--on-dark);
  font-weight:600;
}

.purpose {
  padding-block:0 var(--section);
}

.purpose-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 5vw, 96px);
}

.purpose h2 {
  font-size:var(--step-3);
  margin-block-end:16px;
}

.purpose-headline {
  font-family:var(--font-heading);
  font-size:var(--step-1);
  font-weight:500;
  line-height:1.25;
  margin-block-end:16px;
}

.purpose-grid p:not(.purpose-headline) {
  color:var(--muted);
  max-width:52ch;
}

/* Why Kapio: the lead reason on a full-bleed coral band, four more below. */
.why {
  padding-block-end:var(--section);
}

.why-band {
  background:var(--accent);
  padding-block:clamp(56px, 7vw, 104px);
}

.why-lead {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:32px clamp(32px, 4vw, 64px);
  align-items:end;
}

.why-lead h2 {
  grid-column:1 / span 5;
}

.why-lead > div {
  grid-column:7 / span 6;
}

.why-lead h3 {
  font-size:var(--step-3);
  line-height:1.1;
  max-width:18ch;
}

.why-lead p {
  margin-block-start:16px;
  font-size:var(--step-1);
  max-width:48ch;
}

.why-list {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(24px, 3vw, 48px);
  margin-block-start:clamp(48px, 6vw, 80px);
}

.why-list li {
  padding-block-start:24px;
  border-block-start:4px solid var(--ink);
}

.why-list h3 {
  font-size:var(--step-1);
  margin-block-end:12px;
}

.why-list p {
  color:var(--muted);
}

@media (max-width:1023px) {
  .essay-figure,
  .essay-text,
  .hoopoe-symbol,
  .hoopoe-copy,
  .why-lead h2,
  .why-lead > div {
    grid-column:1 / -1;
  }

  .why-list {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .essay-figure {
    position:static;
  }

  .hoopoe-symbol {
    width:180px;
  }
}

@media (max-width:767px) {
  .name-grid,
  .purpose-grid,
  .why-list {
    grid-template-columns:1fr;
  }
}

/* Contact: the Zoho CRM lead form beside the direct details. */
.contact {
  padding-block:0 var(--section);
}

.contact-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:48px clamp(32px, 4vw, 64px);
  align-items:start;
}

.lead-form {
  grid-column:1 / span 7;
  display:grid;
  gap:20px;
  padding:clamp(24px, 3.2vw, 48px);
  background:var(--ivory);
}

.contact .lead-form h2 {
  font-family:var(--font-heading);
  font-size:var(--step-3);
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.02em;
  margin-block-end:4px;
}

[dir=rtl] .contact .lead-form h2 {
  letter-spacing:0;
}

.field-row {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

.field {
  display:grid;
  gap:8px;
  align-content:start;
}

.field label {
  font-size:var(--step--1);
  font-weight:600;
}

.field input,
.field textarea {
  width:100%;
  min-height:48px;
  padding:12px 14px;
  font:inherit;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:0;
}

.field textarea {
  resize:vertical;
  min-height:140px;
}

/* Aubergine ring offset from the border: holds contrast on the ivory panel. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:2px;
}

/* Errors: a darker red that holds 4.5:1 on ivory and white. */
.field [aria-invalid=true] {
  border-color:#A3241B;
  border-width:2px;
}

.field-error {
  font-size:var(--step--1);
  font-weight:600;
  color:#A3241B;
}

.field-consent {
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:6px 12px;
}

.field-consent input {
  width:22px;
  height:22px;
  min-height:0;
  margin:2px 0 0;
  padding:0;
}

.field-consent label {
  font-weight:400;
}

.field-consent .field-error {
  grid-column:2;
}

.form-status:empty {
  display:none;
}

.form-status {
  padding:14px 16px;
  font-size:var(--step--1);
  font-weight:600;
  background:var(--paper);
  border:1.5px solid var(--ink);
}

.lead-form .button {
  justify-self:start;
  border:0;
  cursor:pointer;
  font-family:inherit;
}

/* Spam trap Zoho checks: visually removed, kept in the form. */
.honeypot {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

.contact-aside {
  grid-column:9 / span 4;
  display:grid;
  gap:12px;
  align-content:start;
}

.contact-aside h2 {
  font-size:var(--step-2);
  margin-block-end:0;
}

.contact-aside h2:not(:first-child) {
  margin-block-start:24px;
}

.contact-email {
  font-family:var(--font-heading);
  font-size:var(--step-2);
  font-weight:700;
  letter-spacing:-.02em;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:3px;
  overflow-wrap:anywhere;
  justify-self:start;
}

.contact-aside p {
  color:var(--muted);
}

/* Without a connected form (release fallback), the email takes the stage. */
.contact-grid-email .contact-aside {
  grid-column:1 / span 8;
}

.contact-grid-email .contact-email {
  font-size:var(--step-4);
}

@media (max-width:1023px) {
  .lead-form,
  .contact-aside,
  .contact-grid-email .contact-aside {
    grid-column:1 / -1;
  }
}

@media (max-width:767px) {
  .field-row {
    grid-template-columns:1fr;
  }

  .lead-form .button {
    justify-self:stretch;
  }
}

/* Loaded after every section stylesheet so these collapses win the cascade. */
/* Below 1024px every 12-column grid becomes one column, so empty column gaps never squeeze the gutter. */
@media (max-width:1023px) {
  .hero-grid,
  .problem-close,
  .partners-grid,
  .faq-grid,
  .line-detail-grid,
  .essay-grid,
  .hoopoe-grid,
  .why-lead,
  .contact-grid {
    grid-template-columns:minmax(0, 1fr);
  }
}

/*
  Motion: subtle and fast. Every animation is 300 ms or less with a strong ease-out.
  1. Hero, once on load: strokes slide in, copy rises, the panel opens, the reality nodes
     settle under strategy and the connectors draw. Done within about one second.
  2. Entering the viewport (site.js adds .motion to <html> and .is-in once per element):
     tiles and steps clip in from the bottom, the story diagram settles, the steps line grows.
     Without the script, or with reduced motion, everything is simply visible.
  3. Interaction and page changes: press feedback, FAQ disclosure, a 200 ms page fade.
*/

@keyframes rise {
  from {
    opacity:0;
    transform:translateY(8px);
  }
}

@keyframes sweep {
  from {
    opacity:0;
    transform:translate(4%, -4%);
  }
}

@keyframes open-panel {
  from {
    clip-path:inset(0 0 100% 0);
  }
  to {
    clip-path:inset(0);
  }
}

@keyframes settle {
  from {
    transform:translateX(var(--dx));
  }
  to {
    transform:none;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset:1;
  }
  to {
    stroke-dashoffset:0;
  }
}

@keyframes fade {
  from {
    opacity:0;
  }
}

@keyframes header-edge {
  from {
    box-shadow:0 1px 0 transparent;
  }
  to {
    box-shadow:0 1px 0 var(--line);
  }
}

@keyframes drop {
  from {
    opacity:0;
    transform:translateY(-6px);
  }
}

/* Reduced motion keeps colour feedback and drops every movement. */
@media (prefers-reduced-motion:reduce) {
  .button {
    transition-property:background-color, color, border-color;
  }

  .button:active,
  .tile a:active,
  .related-list a:active,
  .tile a:hover,
  .related-list a:hover {
    transform:none;
  }

  .tile a,
  .related-list a,
  .faq-icon::after,
  .menu summary i {
    transition:none;
  }
}

@media (prefers-reduced-motion:no-preference) {
  /* 1. Hero sequence. */
  .strokes-hero .stroke {
    transform-box:fill-box;
    animation:sweep 300ms var(--ease-out) both;
    animation-delay:calc(var(--i) * 60ms);
  }

  .hero-copy > * {
    animation:rise 300ms var(--ease-out) both;
  }

  .hero-copy > :nth-child(2) { animation-delay:50ms; }
  .hero-copy > :nth-child(3) { animation-delay:100ms; }

  .hero-panel {
    animation:open-panel 300ms var(--ease-out) 80ms both;
  }

  .agreement-intro .nodes-reality .node {
    animation:settle 300ms var(--ease-out) both;
    animation-delay:calc(340ms + var(--i) * 40ms);
  }

  .agreement-intro .link {
    animation:draw 240ms var(--ease-out) both;
    animation-delay:calc(560ms + var(--i) * 40ms);
  }

  .hero-outcome {
    animation:fade 240ms var(--ease-out) 780ms both;
  }

  /* 2. Entering the viewport. Hidden only while the script is running the reveal. */
  .agreement-reveal .nodes-reality .node {
    transition:transform 300ms var(--ease-out);
    transition-delay:calc(var(--i) * 40ms);
  }

  .agreement-reveal .link {
    transition:stroke-dashoffset 240ms var(--ease-out);
    transition-delay:calc(220ms + var(--i) * 40ms);
  }

  .motion [data-reveal]:not(.is-in) .agreement-reveal .nodes-reality .node {
    transform:translateX(var(--dx));
  }

  .motion [data-reveal]:not(.is-in) .agreement-reveal .link {
    stroke-dashoffset:1;
  }

  .tile,
  .step,
  .included li {
    transition:clip-path 300ms var(--ease-out), opacity 300ms var(--ease-out);
    transition-delay:calc(var(--i) * 40ms);
  }

  .motion .tiles:not(.is-in) .tile,
  .motion .steps:not(.is-in) .step,
  .motion .included ul:not(.is-in) li {
    clip-path:inset(0 0 100% 0);
    opacity:0;
  }

  .steps::after {
    transition:transform 300ms var(--ease-out) 120ms;
  }

  .motion .steps:not(.is-in)::after {
    transform:scaleX(0);
  }

  /* 3. Interaction and page changes. */
  .faq-item[open] .faq-answer {
    animation:drop 200ms var(--ease-out);
  }

  .menu[open] .menu-panel {
    animation:drop 200ms var(--ease-out);
  }

  @supports (animation-timeline:scroll()) {
    .site-header {
      box-shadow:none;
      animation:header-edge linear both;
      animation-timeline:scroll(root);
      animation-range:0 64px;
    }
  }

  @view-transition {
    navigation:auto;
  }

  .site-header {
    view-transition-name:site-header;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration:200ms;
    animation-timing-function:var(--ease-out);
  }
}