/* Jaryah Studios: the layer over base.css (the jaryahbooks.com system, copied in by build.sh), turned to milk (19 Oct 2026).
   Books is night, Studios is milk: day and night sisters, same type, same honey, same rivers.
   Home: Confluence (four liquid pools melt into the honey shamsa; WebGL in studio.js), lots of air (Cuberto),
   large rounded work cards, services as stacked cards, book design with a turning book (Red Antler), every project
   as a square tile (Counter-Print), the honey close. The footer stays night. */

:root {
  --ground: #F6F1E6; --paper: #EDE6D8; --ink: #101A2D;
  --bg: var(--ground); --bg-2: var(--paper); --fg: var(--ink); --fg-2: rgba(16, 26, 45, .68);
  --rule: rgba(16, 26, 45, .13); --line: rgba(16, 26, 45, .5); --field: rgba(16, 26, 45, .32);
  --accent: var(--wine); --accent-2: var(--amber, #B5690E);
  color-scheme: light;
}
::selection { background: var(--honey); color: var(--night); }
.display em, .big em { color: #B5690E; }
html[lang="ar"] em { color: #B5690E; }

/* ---------- header mark */
.brand .mk { width: 42px; height: 42px; display: block; flex: none; }
.mk svg, .ft-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.btn.dark { background: var(--night); color: var(--milk); }
.btn.dark:hover { background: var(--wine); }

/* ---------- the Books button in the navigation: an outlined pill with the Ruby cusped frame */
.books-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border: 1px solid var(--ink); border-radius: 999px; font: 500 14px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background .3s, color .3s; }
.books-btn i { width: 16px; height: 16px; flex: none; background: var(--ruby); border-radius: 4px; clip-path: path('M0 4.8A1 1 0 0 1 .8 3.9 4 4 0 0 0 3.9.8 1 1 0 0 1 4.8 0H11.2A1 1 0 0 1 12.1.8 4 4 0 0 0 15.2 3.9 1 1 0 0 1 16 4.8V11.2A1 1 0 0 1 15.2 12.1 4 4 0 0 0 12.1 15.2 1 1 0 0 1 11.2 16H4.8A1 1 0 0 1 3.9 15.2 4 4 0 0 0 .8 12.1 1 1 0 0 1 0 11.2Z'); }
.books-btn:hover { background: var(--ink); color: var(--milk); }
.menu a.m.books-m { color: var(--wine); }
@media (max-width: 860px) { .hd .books-btn { display: none; } }

/* ---------- home: Confluence, then the line beneath it on the milk */
.cf { position: relative; height: min(calc(100svh - 76px), 940px); min-height: 560px; overflow: hidden; }
.cf-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cf-fallback { display: none; position: absolute; left: 50%; top: 10%; width: min(44vh, 60vw); translate: -50% 0; }
.no-gl .cf-fallback { display: block; }
.no-gl .cf-gl { display: none; }
.cf-txt { position: absolute; left: 0; right: 0; bottom: clamp(56px, 9vh, 96px); text-align: center; pointer-events: none; }
.cf .display { font-size: clamp(44px, 6.6vw, 108px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; animation: fade 1.4s 3.2s var(--ease) both; }
html[lang="ar"] .cf .display { font-size: clamp(48px, 7vw, 116px); line-height: 1.25; }
.cf-sub { margin-top: 18px; font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); animation: fade 1.4s 3.5s var(--ease) both; }
[lang="ar"] .cf-sub { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cf-scroll { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; font-size: 13px; color: var(--fg-2); text-decoration: none; }

/* ---------- the statement, lit word by word, centred with lots of air */
.intro-s { padding-block: clamp(110px, 15vw, 220px) clamp(60px, 8vw, 110px); }
.intro-s .lit { margin-inline: auto; text-align: center; max-width: 24ch; font: 300 clamp(32px, 4.4vw, 68px)/1.12 var(--serif); letter-spacing: -.02em; }
html[lang="ar"] .intro-s .lit { font-weight: 400; line-height: 1.6; }
.js .lit .wd { color: rgba(16, 26, 45, .14); }
.js .lit .wd.on { color: var(--fg); }

/* client logos: the files are white, so they're set in ink here */
.logos { border-block-color: var(--rule); }
.logos img { filter: brightness(0); opacity: .5; }
.logos img:hover { opacity: .85; }

/* ---------- selected work: large rounded cards, two by two, staggered */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(20px, 3vw, 40px); }
.cards > li:nth-child(even) { margin-top: clamp(0px, 9vw, 150px); }
.card a { display: block; text-decoration: none; }
.card figure { aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--paper); }
.card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card figure.whole { background: var(--pbg); }
.card figure.whole img { object-fit: contain; padding: 8%; }
.card a:hover figure img { transform: scale(1.035); }
.card-txt { padding: 20px 4px 0; }
.card-txt .label { color: var(--fg-2); }
.card-txt h3 { margin-top: 8px; font: 300 clamp(30px, 3vw, 46px)/1.02 var(--serif); letter-spacing: -.02em; }
html[lang="ar"] .card-txt h3 { font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.card-txt > p:not(.label) { margin-top: 8px; color: var(--fg-2); }
.sel-all { margin-top: clamp(48px, 6vw, 88px); text-align: center; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags li { font: 500 12px/1 var(--sans); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-2); }
[lang="ar"] .tags li { font-size: 13px; }

/* ---------- services: big stacked rounded cards; two in night with a slow river glow */
.svc-cards { display: grid; gap: 12px; }
.svc-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--paper); padding: clamp(26px, 3.4vw, 52px); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.svc-top { grid-column: 1 / span 6; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.svc-top h3 { font: 300 clamp(32px, 3.6vw, 58px)/1 var(--serif); letter-spacing: -.02em; }
html[lang="ar"] .svc-top h3 { font-weight: 500; line-height: 1.3; letter-spacing: 0; }
.svc-top .n { font-size: 14px; color: var(--fg-2); }
.svc-body { grid-column: 8 / -1; }
.svc-body p { color: var(--fg-2); }
.svc-body ul { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-body li { font-size: 13.5px; padding: 6px 11px; border-radius: 999px; background: rgba(16, 26, 45, .06); }
.svc-more { margin-top: 16px; }
.svc-card.night { background: var(--night); color: var(--milk); --fg-2: rgba(248, 243, 232, .7); }
.svc-card.night .svc-body li { background: rgba(248, 243, 232, .1); }
.svc-card.night::before { content: ''; position: absolute; inset: -40%; z-index: -1; opacity: .55; filter: blur(50px);
  background: radial-gradient(30% 40% at 30% 40%, var(--water), transparent 70%), radial-gradient(25% 35% at 70% 60%, var(--honey), transparent 70%), radial-gradient(28% 30% at 55% 30%, var(--wine), transparent 70%);
  animation: glow 18s ease-in-out infinite alternate; }
@keyframes glow { to { transform: translate(8%, -6%) rotate(25deg) scale(1.1); } }
.svc-card.night .tlink { color: var(--honey); }

/* ---------- book design: a turning book in front of the line (Red Antler) */
.bookd { position: relative; overflow: hidden; isolation: isolate; background: #E6E3EF; color: var(--ink); text-align: center; padding-block: clamp(80px, 10vw, 140px); display: flex; flex-direction: column; align-items: center; }
.bookd-kick { font: 400 19px/1.3 var(--serif); color: var(--fg-2); }
.bookd-h { margin-top: 10px; font: 300 clamp(40px, 6vw, 96px)/.98 var(--serif); letter-spacing: -.035em; max-width: 19ch; padding-inline: var(--pad); position: relative; z-index: 1; }
html[lang="ar"] .bookd-h { font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.bookd-glow { position: absolute; left: 50%; top: 56%; width: min(70vw, 900px); aspect-ratio: 1.3; translate: -50% -50%; border-radius: 50%; filter: blur(70px); opacity: .8; z-index: -1; background: #8FB4E6; transition: background 1.2s; }
.bookd-stage { position: relative; z-index: 2; margin-top: -0.22em; width: clamp(170px, 19vw, 250px); aspect-ratio: 2 / 3; perspective: 1400px; font-size: clamp(40px, 6vw, 96px); }
.bookd-p { margin-top: clamp(40px, 5vw, 64px); max-width: 44ch; color: var(--fg-2); padding-inline: var(--pad); }
.bookd-link { margin-top: 22px; }
.b3 { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.65,0,.25,1); --t: 26px; }
.b3 .f { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.b3 .front, .b3 .back { inset: 0; box-shadow: 0 34px 56px -24px rgba(16,26,45,.55); }
.b3 .front { transform: translateZ(calc(var(--t) / 2)); }
.b3 .back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.b3 .front, .b3 .back { background: #DDD center / cover no-repeat; }
.b3 .spine { top: 0; bottom: 0; left: calc(var(--t) / -2); width: var(--t); background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.08) 45%, rgba(0,0,0,.2)), var(--sp, #1A4C96); transform: rotateY(-90deg); }
.b3 .pages { top: 3px; bottom: 3px; right: calc(var(--t) / -2); width: var(--t); background: repeating-linear-gradient(90deg, #F4EFE4 0 1px, #DCD3C1 1px 2px); transform: rotateY(90deg); }

/* ---------- every project as stacking cards: the next slides up over the last */
.stackc { padding-bottom: 6vh; }
.scard { position: sticky; top: calc(96px + var(--i) * 10px); height: min(76vh, 760px); margin-bottom: 9vh; border-radius: 28px; overflow: hidden; background: var(--pbg, var(--paper)); box-shadow: 0 -30px 60px -40px rgba(16, 26, 45, .45); transform-origin: 50% 0; transition: transform .6s var(--ease), filter .6s var(--ease); }
.scard.under { transform: scale(.96); filter: brightness(.7); }
.scard a { display: block; height: 100%; color: var(--milk); text-decoration: none; position: relative; }
.scard figure { height: 100%; }
.scard figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.scard figure.whole img { object-fit: contain; padding: 6% 6% 22%; }
.scard a:hover figure img { transform: scale(1.03); }
.scard-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(80px, 12vh, 140px) clamp(22px, 3.4vw, 48px) clamp(22px, 3vw, 40px); background: linear-gradient(transparent, rgba(16, 26, 45, .82)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; }
.scard-cap .label { grid-column: 1 / -1; color: rgba(248, 243, 232, .78); }
.scard-cap h3 { font: 300 clamp(36px, 5vw, 80px)/.98 var(--serif); letter-spacing: -.03em; }
html[lang="ar"] .scard-cap h3 { font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.scard-go { font-size: 15px; white-space: nowrap; padding-bottom: 8px; }
.scard-books { background: #E6E3EF; }
.scard-books figure.whole img { padding: 8% 30% 26%; filter: drop-shadow(0 30px 30px rgba(16, 26, 45, .35)); }
@media (max-width: 860px) { .scard { top: calc(84px + var(--i) * 6px); height: 70svh; } .scard-cap { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .scard { transition: none; } .scard.under { transform: none; filter: none; } }

/* ---------- every project as a square tile (Counter-Print) */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(12px, 1.4vw, 20px); }
.wfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.wfilter button { font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule); background: none; color: inherit; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.wfilter button:hover { border-color: currentColor; }
.wfilter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.tiles > li[hidden] { display: none; }
.tile-link { display: block; text-decoration: none; }
.tile { aspect-ratio: 1; background: #EAE3D5; overflow: hidden; display: grid; place-items: center; border-radius: 4px; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile.whole img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(16,26,45,.28)); }
.tile.books-tile img { width: 50%; }
.tile-link:hover .tile img { transform: scale(1.04); }
.tile-link p { margin-top: 12px; font-size: 14.5px; line-height: 1.4; }
.tile-link p b { display: block; font-weight: 500; }
.tile-link p span { color: var(--fg-2); font-size: 13.5px; }
.work-sec { padding-top: clamp(48px, 6vw, 88px); }

/* ---------- the close: honey */
.close-s { background: var(--honey); color: var(--night); padding-block: clamp(110px, 14vw, 200px); --fg-2: rgba(16, 26, 45, .72); }
.close-in { text-align: center; display: flex; flex-direction: column; align-items: center; }
.close-in .display { max-width: 12ch; text-wrap: balance; }
.close-in > p { margin-top: 22px; max-width: 46ch; color: var(--fg-2); }
.close-in .ctas { justify-content: center; margin-top: 34px; }
.cta { background: var(--honey); color: var(--night); }
.cta-in p { color: rgba(16, 26, 45, .8); }
.cta .btn.light { background: var(--night); color: var(--milk); }
.cta .btn.light:hover { background: var(--wine); }

/* ---------- footer: night, with the two clocks */
.ft { background: var(--night); color: var(--milk); }
.ft-mark { display: block; width: clamp(96px, 10vw, 140px); aspect-ratio: 1; }
.ft-top .ft-mark { grid-column: 1 / span 4; }
.ft-clocks { display: flex; gap: 28px; margin-top: clamp(40px, 5vw, 64px); font-size: 14px; color: var(--fg-2); }
.ft-clocks b { font-weight: 500; color: var(--milk); margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.ft-clocks + .ft-legal { margin-top: 18px; }

/* ---------- a project */
.cs-hd .display { max-width: 14ch; }
.cs-hd .lede { max-width: 54ch; }
.cs-hd .tags { margin-top: 22px; }
.cs-video { margin-top: 26px; }
.cs-hero { margin-top: clamp(40px, 5vw, 72px); }
.cs-hero img { width: 100%; height: min(80vh, 900px); object-fit: cover; }
.cs-hero.whole { background: var(--pbg); }
.cs-hero.whole img { object-fit: contain; padding-block: clamp(24px, 4vw, 64px); }
.cs-body { padding-block: clamp(40px, 6vw, 96px) clamp(80px, 10vw, 150px); }
.cs-text { margin-top: clamp(80px, 10vw, 150px); }
.cs-text .sec-hd { margin-bottom: clamp(36px, 4.5vw, 64px); }
.cs-full { margin-block: clamp(16px, 2.4vw, 32px); }
.cs-full img { width: 100%; border-radius: 6px; }
.cs-full.round { overflow: hidden; }
.cs-full.round img { width: min(100%, 760px); margin-inline: auto; border-radius: 50%; transform: rotate(var(--spin, 0deg)); }
.cs-full figcaption, .cs-grid figcaption { margin-top: 14px; font-size: 15px; color: var(--fg-2); max-width: 60ch; }
.cs-full.round figcaption { text-align: center; margin-inline: auto; }
.pf-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); margin-block: clamp(16px, 2.4vw, 32px); }
.pf-row img { width: 100%; border-radius: 6px; }
.pf-row:has(> figure:only-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.cs-grid { margin-block: clamp(16px, 2.4vw, 32px); }
.cs-grid ul { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--gap); align-items: start; }
.cs-grid img { width: 100%; border-radius: 4px; }
.cs-reels { margin-block: clamp(16px, 2.4vw, 32px); }
.cs-reels ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cs-reels video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #101A2D; display: block; }
.cs-reels figcaption { margin-top: 14px; font-size: 15px; color: var(--fg-2); max-width: 60ch; }
.cs-video .btn + .btn { margin-inline-start: 8px; }
.cs-body .pair { margin-block: clamp(16px, 2.4vw, 32px); }
.cs-body .pair img { width: 100%; border-radius: 6px; }
.cs-body .rivers { margin-top: 0; }
.rivers li:nth-child(2) i { box-shadow: inset 0 0 0 1px var(--rule); }
.forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.forms li { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(24px, 3vw, 44px) 12px; border-radius: 18px; background: var(--paper); }
.forms svg { width: min(100%, 180px); height: auto; overflow: visible; }
.forms span { font-size: 14px; color: var(--fg-2); }
.cs-next { border-top: 1px solid var(--rule); }
.cs-next-in { display: flex; flex-direction: column; gap: 18px; padding-block: clamp(64px, 8vw, 120px); text-decoration: none; }
.cs-next-in .label { color: var(--accent); }
.cs-next-in .display { transition: color .4s var(--ease); }
.cs-next-in:hover .display { color: #B5690E; }

/* ---------- about and forms on milk */
.steps.three { grid-template-columns: repeat(3, 1fr); }
.name-marks { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); }
.name-marks .band-wm { max-width: 300px; color: var(--wine); }
.band { background: var(--paper); }
.nf-mark { width: 88px; }
.form ::placeholder { color: rgba(16, 26, 45, .38); }
.form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101A2D' stroke-width='1.4'/%3E%3C/svg%3E"); }
.form select option { background: var(--ground); color: var(--ink); }
.form input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px var(--ground) inset; caret-color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: #B5690E; box-shadow: 0 1px 0 #B5690E; }
.checks label:has(input:checked) { background: var(--night); color: var(--milk); border-color: var(--night); }

/* ---------- responsive */
@media (max-width: 1080px) {
  .cs-reels ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .cards > li:nth-child(even) { margin-top: 0; }
  .svc-card { grid-template-columns: 1fr; row-gap: 16px; }
  .svc-top, .svc-body { grid-column: 1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-grid ul { grid-template-columns: repeat(2, 1fr); }
  .pf-row:not(:has(> figure:only-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps.three { grid-template-columns: 1fr; }
  .ft-top .ft-mark { grid-column: 1 / -1; }
  .cf { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .b3 { transition: none; }
  .svc-card.night::before { animation: none; }
}

@media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- home: the Reels strip, edge to edge, scrolls sideways when it doesn't fit */
.reels-strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 17vw, 250px); gap: clamp(10px, 1.2vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); scroll-padding-inline: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); margin-top: clamp(28px, 3.4vw, 48px); justify-content: start; }
.reels-strip::-webkit-scrollbar { display: none; }
.reels-strip li { scroll-snap-align: start; }
.reels-strip .reel-v { display: block; }
.reels-strip video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #101A2D; display: block; }
.reels-strip p { margin-top: 10px; font-size: 14px; line-height: 1.35; }
.reels-strip p a { text-decoration: none; color: inherit; }
.reels-strip p b { display: block; font-weight: 500; }
.reels-strip p span { color: var(--fg-2); font-size: 13px; }
.reels-more { margin-top: clamp(20px, 2.4vw, 32px); }

/* ---------- nav: the extended wordmark, and a thin frosted milk so the hero (and the ruby drop) shows through */
.hd .brand .wm.wm-x { width: 100px; height: 40px; }
.hd { background: color-mix(in srgb, var(--bg) 42%, transparent); -webkit-backdrop-filter: saturate(1.15) blur(5px); backdrop-filter: saturate(1.15) blur(5px); }
.hd.solid { background: color-mix(in srgb, var(--bg) 62%, transparent); }
/* the Confluence runs up under the nav */
.p-home .cf { margin-top: -76px; height: min(100svh, 1016px); }

/* an s with a dot below (ṣ) drawn in CSS: the Newsreader italic files have no ṣ, and the fallback letter looks bold */
.ud { position: relative; }
.ud::after { content: ''; position: absolute; left: 50%; bottom: -.1em; width: .09em; height: .09em; border-radius: 50%; background: currentColor; transform: translateX(-50%); }

/* About: the founders as two illustrated cards */
.founders.fav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); border-top: 0; }
.founders.fav li { border-bottom: 0; }
.founders.fav a { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.founders.fav figure { margin: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; transition: transform .6s var(--ease); }
.founders.fav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founders.fav a:hover figure { transform: rotate(-3deg) scale(1.03); }
.founders.fav b { display: block; font: 400 clamp(20px, 2vw, 26px)/1.2 var(--serif); }
.founders.fav small { font-size: 14px; color: var(--fg-2); }

/* About: How we work as a timeline */
.tl { --n: 3; margin-top: clamp(8px, 2vw, 24px); }
.tl-line { position: relative; height: 3px; margin-inline: calc(50% / var(--n)); background: var(--rule); border-radius: 3px; }
.tl-line i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--at, 0) * 50%); background: var(--ink); border-radius: 3px; transition: width .9s var(--ease); }
.tl-line i::after { content: ''; position: absolute; inset-inline-end: -11px; top: -9.5px; width: 22px; height: 22px; border-radius: 50%; background: var(--honey, #E9A21F); box-shadow: 0 0 0 7px color-mix(in srgb, var(--honey, #E9A21F) 25%, transparent); }
.tl-stops { display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: 22px; text-align: center; }
.tl-stops button { font: 300 clamp(30px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -.02em; background: none; border: 0; padding: 6px 10px; color: color-mix(in srgb, var(--fg) 32%, transparent); cursor: pointer; transition: color .35s; }
.tl-stops button:hover, .tl-stops button[aria-selected="true"] { color: var(--fg); }
.tl-stops .num { display: block; font: 600 12px/1 var(--sans); letter-spacing: .16em; color: var(--accent); margin-bottom: 10px; }
.tl-panels { margin: clamp(22px, 3vw, 36px) auto 0; max-width: 46ch; text-align: center; min-height: 3.3em; font-size: clamp(17px, 1.5vw, 20px); }
.tl-panels p { animation: fade .6s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .tl-line i { transition: none; } .tl-panels p { animation: none; } }

/* About: the four rivers garden (from the brand film) on a night panel; the channels flow out when it comes into view */
.garden { margin: clamp(28px, 3.4vw, 48px) auto 0; max-width: 760px; background: var(--night, #101A2D); color: #F8F3E8; border-radius: 28px; padding: clamp(18px, 4vw, 48px) clamp(12px, 3vw, 40px) clamp(22px, 3vw, 36px); text-align: center; }
.garden-svg { display: block; width: 100%; height: auto; overflow: visible; }
.garden figcaption { margin-top: 6px; font-size: 15px; color: rgba(248, 243, 232, .72); }
.g-ar { font: 500 19px 'Markazi Text', serif; fill: #F8F3E8; }
.g-en { font: 600 7.5px 'Hanken Grotesk', sans-serif; letter-spacing: 1px; fill: rgba(248, 243, 232, .7); }
.g-ch { transform-box: fill-box; transition: transform 1.1s cubic-bezier(.6, 0, .25, 1) calc(.5s + var(--d) * .45s); }
.g-ch.up { transform-origin: 50% 100%; } .g-ch.down { transform-origin: 50% 0; } .g-ch.right { transform-origin: 0 50%; } .g-ch.left { transform-origin: 100% 50%; }
.g-ar, .g-en { transition: opacity .6s calc(1s + var(--d) * .45s); }
.g-tile, .g-ft { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .6s .2s, scale .7s cubic-bezier(.3, 1.5, .5, 1) .2s; }
.garden:not(.on) .g-ch.up, .garden:not(.on) .g-ch.down { transform: scaleY(0); }
.garden:not(.on) .g-ch.left, .garden:not(.on) .g-ch.right { transform: scaleX(0); }
.garden:not(.on) .g-ar, .garden:not(.on) .g-en { opacity: 0; }
.garden:not(.on) .g-tile, .garden:not(.on) .g-ft { opacity: 0; scale: .6; }
@media (prefers-reduced-motion: reduce) { .g-ch, .g-ar, .g-en, .g-tile, .g-ft { transition: none; } }

/* the first tag says whose work it is: client work, self-initiated or our own */
.tags li.origin { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- mockups: Instagram posts and Stories on a phone, web pages on a laptop */
.ig-row, .igs-row, .lp-fig { margin-block: clamp(24px, 3.4vw, 48px); }
.ig-row > ul { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 340px)); justify-content: center; gap: clamp(14px, 2.4vw, 36px); align-items: start; }
.ig-row figcaption, .igs-row figcaption, .lp-fig figcaption { margin: 18px auto 0; text-align: center; font-size: 15px; color: var(--fg-2); max-width: 60ch; }
.ig-phone { background: #fff; color: #101A2D; border-radius: 30px; padding: 10px 0 14px; box-shadow: 0 0 0 8px #101A2D, 0 30px 60px -24px rgba(16, 26, 45, .5); overflow: hidden; font: 13px/1.35 system-ui, -apple-system, sans-serif; text-align: left; }
.ig-top { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; }
.ig-top b { font-weight: 600; font-size: 13px; }
.ig-more { margin-left: auto; letter-spacing: 1px; font-size: 10px; opacity: .7; }
.ig-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #E1306C; display: grid; place-items: center; }
.ig-av img { width: 100%; height: 100%; object-fit: cover; }
.ig-av i { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font: 700 13px/1 system-ui, sans-serif; font-style: normal; }
.ig-media { position: relative; }
.ig-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: var(--ar); background: #EEE; }
.ig-slides::-webkit-scrollbar { display: none; }
.ig-slides > li { flex: 0 0 100%; scroll-snap-align: start; }
.ig-slides img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-prev, .ig-next { position: absolute; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .88); color: #101A2D; font: 600 20px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .25s; }
.ig-prev { left: 8px; } .ig-next { right: 8px; }
.ig-media:hover .ig-prev, .ig-media:hover .ig-next, .ig-prev:focus-visible, .ig-next:focus-visible { opacity: 1; }
.ig-prev[disabled], .ig-next[disabled] { visibility: hidden; }
.ig-dots { position: absolute; left: 0; right: 0; bottom: -18px; display: flex; justify-content: center; gap: 4px; }
.ig-dots li { width: 6px; height: 6px; border-radius: 50%; background: #C9CDD3; transition: background .2s; }
.ig-dots li.on { background: #0095F6; }
.ig-bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px 6px; }
.ig-bar svg { width: 23px; height: 23px; fill: none; stroke: #101A2D; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ig-bar span { flex: 1; }
.ig-cap { padding: 2px 12px 0; font-size: 13px; }
.ig-cap b { font-weight: 600; }
/* stories */
.igs-row > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.4vw, 36px); }
.igs { width: min(280px, 100%); }
.igs-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #101A2D; box-shadow: 0 0 0 8px #101A2D, 0 30px 60px -24px rgba(16, 26, 45, .5); }
.igs-frames li { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.igs-frames li.on { opacity: 1; }
.igs-frames img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igs-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 3px; z-index: 2; }
.igs-bars li { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .4); overflow: hidden; }
.igs-bars i { display: block; height: 100%; width: 0; background: #fff; }
.igs-bars li.done i { width: 100%; }
.igs-bars li.now i { animation: igs-fill var(--dur, 4s) linear forwards; }
@keyframes igs-fill { to { width: 100%; } }
.igs-top { position: absolute; top: 20px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 2; color: #fff; font: 600 13px/1 system-ui, sans-serif; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.igs-tap { position: absolute; inset: 0; background: none; border: 0; cursor: pointer; z-index: 3; }
.igs-cap { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--fg-2); }
/* laptop */
.lp { max-width: 980px; margin-inline: auto; }
.lp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 18px; }
.lp-tabs button { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: none; color: inherit; cursor: pointer; }
.lp-tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.lp-screen { background: #101A2D; border-radius: 16px 16px 0 0; padding: 12px 12px 0; margin-inline: 6%; box-shadow: 0 30px 60px -30px rgba(16, 26, 45, .6); }
.lp-chrome { display: flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px; background: #EDEEF1; border-radius: 6px 6px 0 0; }
.lp-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #C9CDD3; }
.lp-chrome i:nth-child(1) { background: #FF5F57; } .lp-chrome i:nth-child(2) { background: #FEBC2E; } .lp-chrome i:nth-child(3) { background: #28C840; }
.lp-chrome span { margin-left: 10px; flex: 1; height: 16px; border-radius: 4px; background: #fff; font: 11px/16px system-ui, sans-serif; color: #6B7280; padding-inline: 8px; overflow: hidden; white-space: nowrap; }
.lp-view { aspect-ratio: 16 / 10; overflow-y: auto; background: #fff; scrollbar-width: thin; }
.lp-view img { width: 100%; display: block; }
.lp-base { height: 16px; background: linear-gradient(#D7DAE0, #AEB3BC); border-radius: 0 0 14px 14px; position: relative; }
.lp-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; translate: -50% 0; background: #C3C7CE; border-radius: 0 0 8px 8px; }
@media (max-width: 860px) {
  .ig-row > ul { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 10px 30px; scrollbar-width: none; }
  .ig-row > ul > li { scroll-snap-align: center; }
  .lp-screen { margin-inline: 0; }
}