/* oriiahq.com (Ẹwà, Design, 2026-11-12), built to the lead's final blueprint.
   The Kowrey page's look, refined for a company: Literata 800 headings, IBM Plex set large for reading,
   generous space, one card per project in the blueprint's order and weight, real screens on phones,
   store buttons. Kowrey's colours as whole flat fields; they keep their colour in dark mode, only the
   plain ground, stone and ink turn. One quiet motion: the hero phones rise once. Static, no scripts.
   /isola shares this sheet and adds isola/isola.css. The app screens live in screens.css. */
:root {
  --ground: #FFFFFF; --stone: #ECE8E1; --ink: #16120E; --soft: #5C554D;
  --coral: #FC6431; --blue: #0147FA; --aqua: #02AEC4; --teal: #0E4D5B; --peacock: #00708A;
  --m: 20px; --g: 10px; --s1: clamp(17px, 1.25vw, 19px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #16120E; --stone: #221D18; --ink: #F3EFE7; --soft: #B8B0A5; color-scheme: dark; } }
:root[data-theme="dark"] { --ground: #16120E; --stone: #221D18; --ink: #F3EFE7; --soft: #B8B0A5; color-scheme: dark; }
@media (min-width: 768px) { :root { --m: 32px; --g: 14px; } }
@media (min-width: 1200px) { :root { --m: 56px; --g: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--s1)/1.6 Plex, system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
.link { font: 600 18px/1.4 Plex; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--m); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 800 22px/1 Literata, serif; }
.brand img { width: 38px; height: 38px; }
.bar nav { display: flex; gap: 20px; font: 600 16px/1 Plex; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 768px) { .bar nav { gap: 32px; } }
@media (max-width: 480px) { .bar { gap: 10px; } .brand { font-size: 19px; gap: 8px; } .brand img { width: 32px; height: 32px; } .bar nav { gap: 14px; font-size: 14px; } }

/* Opening: the sentence, and Kowrey on three phones */
.hero { padding: 24px var(--m) 0; display: grid; gap: 40px; overflow: hidden; }
h1 { font: 800 clamp(48px, 13vw, 84px)/.98 Literata, serif; letter-spacing: -.03em; text-wrap: balance; }
.sub { margin-top: 16px; font: 500 clamp(26px, 3vw, 44px)/1.2 Literata, serif; text-wrap: balance; }
.lede { margin-top: 20px; max-width: 30em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
.fan { display: flex; justify-content: center; align-items: flex-start; height: 420px; margin: 0 calc(var(--m) * -1); }
.fan .phone { flex: none; width: 44%; max-width: 280px; }
.fan .f1 { margin-right: -14%; transform: translateY(52px) rotate(-6deg); }
.fan .f2 { position: relative; z-index: 1; width: 50%; max-width: 310px; }
.fan .f3 { margin-left: -14%; transform: translateY(52px) rotate(6deg); }
@media (min-width: 900px) {
  .hero { grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding-top: 64px; }
  .hero-words { grid-column: 1 / span 6; align-self: center; padding-bottom: 96px; }
  h1 { font-size: min(7.4vw, 124px); }
  .fan { grid-column: 7 / -1; height: 620px; margin: 0; align-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .fan .phone { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .fan .f2 { animation-delay: .08s; } .fan .f3 { animation-delay: .16s; }
  @keyframes rise { from { translate: 0 120px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
}

/* Projects: one card each, in the blueprint's order and weight */
.projects { padding: 56px var(--m) 72px; display: grid; gap: var(--g); }
.proj { border-radius: 12px; padding: 32px 24px; display: grid; gap: 32px; overflow: hidden; }
.proj h2 { display: flex; align-items: center; gap: 14px; font: 800 clamp(36px, 4vw, 60px)/1 Literata, serif; letter-spacing: -.02em; }
.proj h2 .wm { height: clamp(44px, 4.4vw, 64px); width: auto; }
.proj h2 .icon { width: clamp(44px, 4vw, 56px); height: auto; border-radius: 22%; }
.proj-words { display: grid; gap: 16px; align-content: start; max-width: 32em; }
.proj-say { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
.proj-say b { font-weight: 600; }
.try { font-size: 16px; }
.show-q { font: 400 italic clamp(22px, 2vw, 30px)/1.3 Literata, serif; }
.proj-pic img { border-radius: 8px; width: 100%; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.store { height: 54px; padding: 0 18px 0 14px; background: #000; color: #fff; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 10px; }
.store span { display: flex; flex-direction: column; font: 600 18px/1.05 Plex; }
.store small { font: 400 11px/1.2 Plex; }
.p-kowrey { background: var(--coral); color: #16120E; padding-bottom: 0; }
.p-ajoede { background: var(--aqua); color: #16120E; }
.p-sogbede { background: var(--blue); color: #fff; }
.p-kilowi { background: var(--stone); }
/* Kowrey: three of its screens rising from the foot of the card */
.trio-phones { display: flex; justify-content: center; gap: 12px; height: 380px; overflow: hidden; }
.trio-phones .phone { flex: none; width: 46%; max-width: 250px; margin: 0; }
.trio-phones .phone:nth-child(2) { margin-top: 48px; }
.trio-phones .phone:nth-child(3) { display: none; }
@media (min-width: 640px) { .trio-phones .phone { width: 30%; } .trio-phones .phone:nth-child(3) { display: block; } .trio-phones { height: 420px; } }
@media (min-width: 900px) {
  .projects { grid-template-columns: repeat(12, 1fr); padding: 96px var(--m) 112px; }
  .proj { padding: 48px 44px; }
  .p-kowrey, .p-ajoede { grid-column: 1 / -1; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); align-items: center; }
  .p-kowrey { padding-bottom: 0; align-items: end; }
  .p-kowrey .proj-words { grid-column: 1 / span 5; align-self: center; padding-bottom: 48px; }
  .p-kowrey .proj-pic { grid-column: 6 / -1; }
  .trio-phones { height: 520px; gap: 18px; }
  .trio-phones .phone { width: 240px; }
  .p-ajoede .proj-words { grid-column: 1 / span 5; }
  .p-ajoede .proj-pic { grid-column: 7 / -1; }
  .p-sogbede, .p-kilowi { grid-column: span 6; align-content: start; }
}

/* The oko word card, inside ÀjọÈdè's card */
.oko { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.oko input { position: absolute; opacity: 0; pointer-events: none; }
.oko-cards { display: grid; }
.oko-cards img { grid-area: 1 / 1; opacity: 0; transition: opacity .25s ease; border-radius: 8px; }
#oko1:checked ~ .oko-cards .c1, #oko2:checked ~ .oko-cards .c2, #oko3:checked ~ .oko-cards .c3, #oko4:checked ~ .oko-cards .c4 { opacity: 1; }
.oko-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.oko-picks label { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; background: #FFFFFF; color: #16120E; cursor: pointer; font: 400 14px/1.2 Plex; border-radius: 8px; }
.oko-picks b { font: 800 clamp(20px, 1.8vw, 26px)/1 Literata, serif; }
#oko1:checked ~ .oko-picks label[for=oko1], #oko2:checked ~ .oko-picks label[for=oko2],
#oko3:checked ~ .oko-picks label[for=oko3], #oko4:checked ~ .oko-picks label[for=oko4] { background: #16120E; color: #FFFFFF; }
#oko1:focus-visible ~ .oko-picks label[for=oko1], #oko2:focus-visible ~ .oko-picks label[for=oko2],
#oko3:focus-visible ~ .oko-picks label[for=oko3], #oko4:focus-visible ~ .oko-picks label[for=oko4] { outline: 3px solid var(--blue); outline-offset: 3px; }

/* The Ajo Foundation: its own calm band */
.foundation { background: var(--teal); color: #F3EFE7; padding: 72px var(--m); display: grid; gap: 28px; }
.foundation h2 { font: 800 clamp(40px, 6vw, 92px)/1 Literata, serif; letter-spacing: -.025em; }
.fdn-words { display: grid; gap: 16px; max-width: 34em; }
.fdn-lead { font: 500 clamp(26px, 2.6vw, 40px)/1.2 Literata, serif; }
.fdn-words p:not(.fdn-lead) { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
blockquote p { font: 400 italic clamp(26px, 3vw, 44px)/1.25 Literata, serif; text-wrap: balance; }
blockquote footer { margin-top: 14px; font: 600 17px/1.3 Plex; }
.foundation blockquote { max-width: 22em; }
@media (min-width: 900px) {
  .foundation { grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: 128px var(--m); row-gap: 40px; }
  .foundation h2 { grid-column: 1 / -1; }
  .fdn-words { grid-column: 1 / span 5; align-self: start; }
  .foundation blockquote { grid-column: 7 / -1; align-self: start; }
}

/* Also from ORIIA: one quiet line */
.also { padding: 40px var(--m); }
.also p { max-width: 50em; }
.also b { font-weight: 600; }

/* Founder */
.founder { background: var(--stone); padding: 72px var(--m); display: grid; gap: 24px; }
.founder h2, .contact h2 { font: 800 clamp(40px, 6vw, 92px)/1 Literata, serif; letter-spacing: -.025em; text-wrap: balance; }
.statement { font: 500 clamp(24px, 2.6vw, 40px)/1.3 Literata, serif; max-width: 22em; margin-bottom: 20px; }
.statement b { font-weight: 800; }
@media (min-width: 900px) { .founder { grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: 112px var(--m); align-items: start; } .founder h2 { grid-column: 1 / span 6; } .founder > div { grid-column: 7 / -1; padding-top: 12px; } }

/* Contact, on Kowrey blue */
.contact { background: var(--blue); color: #fff; padding: 72px var(--m); }
.contact-lead { margin-top: 18px; font-size: clamp(19px, 1.6vw, 23px); }
.lines { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 28px var(--g); }
.lines li { display: grid; gap: 4px; }
.lines a { font: 800 clamp(22px, 2vw, 28px)/1.15 Literata, serif; text-decoration: none; overflow-wrap: anywhere; }
.lines a:hover { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
@media (min-width: 900px) { .contact { padding: 112px var(--m); } .lines { grid-template-columns: repeat(3, 1fr); margin-top: 56px; } }

/* Footer */
.foot { padding: 40px var(--m) 48px; display: grid; gap: 16px; font-size: 15px; }
.foot-name { display: flex; align-items: center; gap: 12px; font: 800 22px/1 Literata, serif; }
.foot-name img { width: 36px; height: 36px; }
.foot-family span::before { content: ", "; }
.foot-links { display: flex; gap: 24px; font-weight: 600; }
.legal { color: var(--soft); max-width: 60em; }