/* ============================================================
   Geenius.space — portfolio landing page
   Tokens first, then layout, then components, then breakpoints.
   Dark mode is a token swap: nothing below re-declares colours.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  --ink:        #16193B;
  --muted:      #5A5E88;
  --hi:         #FF2E88;
  --pink:       #FF2E88;
  --pink-deep:  #E01E73;
  --teal:       #00B8A9;

  --bg:         #FFFBF0;   /* page */
  --card:       #FFFFFF;   /* raised surfaces */
  --work-bg:    #FFFFFF;   /* the work band */
  --border:     #16193B;
  --shadow:     10px 10px 0 rgba(22, 25, 59, .14);
  --shadow-sm:  6px 6px 0 rgba(22, 25, 59, .18);

  --hero:       linear-gradient(158deg, #FFE356 0%, #FFD32E 46%, #FFBF2B 100%);
  --hero-fade:  #FFFBF0;
  --hero-fade0: rgba(255, 251, 240, 0);
  --halo:       rgba(255, 255, 255, .55);
  --ground:     rgba(22, 25, 59, .13);

  --btn1-bg: #16193B;  --btn1-fg: #FFF7D6;
  --btn2-bg: #FF2E88;  --btn2-fg: #FFFFFF;

  --chip-bg: #FFF7D6;  --chip-fg: #16193B;  --chip-border: #16193B;
  --skel:    #EFEAD8;
  --tease:   rgba(22, 25, 59, .32);
  --tease-head: rgba(255, 211, 46, .38);

  --nav-pill: rgba(255, 255, 255, .60);
  --nav-pill-border: rgba(22, 25, 59, .14);
  --badge-bg: #FFFFFF;

  --band-bg: #FF2E88;  --band-fg: #FFFFFF;
  --band-btn-bg: #16193B;  --band-btn-fg: #FFF7D6;

  --foot-bg: #16193B;  --foot-fg: #FFF7D6;  --foot-muted: #A9ADD8;

  --display: 'Gabarito', 'Trebuchet MS', system-ui, sans-serif;
  --body:    'Figtree', 'Trebuchet MS', system-ui, sans-serif;
  --gutter:  clamp(20px, 4vw, 40px);
  --head-h:  84px;   /* replaced with the real height by main.js */
}

[data-theme="dark"] {
  --ink:        #FFF6D9;
  --muted:      #A7A4CC;
  --hi:         #FFD84D;
  --pink:       #FF4D97;
  --pink-deep:  #FF2E88;
  --teal:       #2FD6C4;

  --bg:         #101024;
  --card:       #1F1F3D;
  --work-bg:    #151530;
  --border:     #3B3B66;
  --shadow:     10px 10px 0 rgba(0, 0, 0, .38);
  --shadow-sm:  6px 6px 0 rgba(0, 0, 0, .40);

  --hero:       linear-gradient(158deg, #22224A 0%, #16162F 48%, #101024 100%);
  --hero-fade:  #101024;
  --hero-fade0: rgba(16, 16, 36, 0);
  --halo:       #FFD84D;
  --ground:     rgba(0, 0, 0, .42);

  --btn1-bg: #FFD84D;  --btn1-fg: #14142B;
  --btn2-bg: #FF3D8B;  --btn2-fg: #FFFFFF;

  --chip-bg: #2A2A50;  --chip-fg: #FFD84D;  --chip-border: #3B3B66;
  --skel:    #2E2E56;
  --tease:   rgba(255, 246, 217, .26);
  --tease-head: rgba(34, 34, 74, .75);

  --nav-pill: rgba(255, 255, 255, .07);
  --nav-pill-border: rgba(255, 255, 255, .14);
  --badge-bg: #1F1F3D;

  --band-bg: #FF3D8B;
  --band-btn-bg: #14142B;  --band-btn-fg: #FFD84D;

  --foot-bg: #0A0A18;  --foot-fg: #FFF6D9;  --foot-muted: #7E7BA8;

  color-scheme: dark;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behaviour: smooth; scroll-behavior: smooth;
  /* the header sticks, so jumping to #work must stop short of it */
  scroll-padding-top: calc(var(--head-h) + 14px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); letter-spacing: -.03em; line-height: 1.04; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-deep); }

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -120%;
  background: var(--ink); color: var(--btn1-fg);
  padding: 12px 22px; border-radius: 0 0 14px 14px; font-weight: 700; z-index: 60;
}
.skip-link:focus { translate: -50% 0; }

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

/* ---------- 3. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 15px 30px; border-radius: 999px;
  font-family: var(--display); font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; line-height: 1.2;
  border: 3px solid transparent; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover  { transform: translate(-2px, -2px); }
.btn:active { transform: translate(2px, 2px); }
.btn-ink    { background: var(--btn1-bg); color: var(--btn1-fg); box-shadow: var(--shadow-sm); }
.btn-ink:hover { color: var(--btn1-fg); box-shadow: 8px 8px 0 rgba(22, 25, 59, .18); }
.btn-pink   { background: var(--btn2-bg); color: var(--btn2-fg); box-shadow: var(--shadow-sm); }
.btn-pink:hover { color: var(--btn2-fg); }
.btn-ghost  { border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { color: var(--ink); }
.btn-outline { border-color: currentColor; color: var(--band-fg); }
.btn-outline:hover { color: var(--band-fg); }
.contact .btn-ink { background: var(--band-btn-bg); color: var(--band-btn-fg); box-shadow: none; }

/* ---------- 4. header ---------- */
/* Sticky, so the logo, the theme switch and the menu stay reachable the whole
   way down. The background is opaque in both themes, which is what lets content
   pass underneath it cleanly. main.js keeps --head-h in step with its real
   height, and everything that needs to clear the header reads that. */
.site-head { background: var(--hero); position: sticky; top: 0; z-index: 30; }
.head-inner { display: flex; align-items: center; gap: 24px; padding-block: 20px 8px; }
.logo { color: var(--ink); display: flex; flex: none; }

.nav { margin-inline: auto; }
.nav ul { display: flex; gap: 30px; }
.nav a {
  font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink);
  padding-block: 6px; border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--pink); }

.head-actions { display: flex; align-items: center; gap: 14px; }

.theme-switch {
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--nav-pill); border: 2px solid var(--nav-pill-border);
}
.theme-switch button {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--btn1-fg); }

.badge {
  display: flex; align-items: center; gap: 9px;
  background: var(--badge-bg); border: 3px solid var(--border); border-radius: 999px;
  padding: 9px 18px; font-family: var(--display); font-size: 15px; font-weight: 700;
  box-shadow: 5px 5px 0 rgba(22, 25, 59, .14);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex: none; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; border-radius: 16px;
  background: var(--badge-bg); border: 3px solid var(--border); color: var(--ink); cursor: pointer;
}

/* ---------- 5. hero ---------- */
/* Header + hero together fill the first screen, so the portrait and the
   ribbon are visible before anyone scrolls. --head-h is measured by main.js
   (the fallback below is close enough if JavaScript never runs); the artwork
   takes whatever height is left, and the portrait is sized in % of it, so the
   whole composition scales to the device instead of being a fixed height.
   100svh, not 100vh: on phones vh includes the browser chrome that slides
   away, which pushes the portrait below the fold on first paint. */
.hero {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--head-h));
  min-height: calc(100svh - var(--head-h));
}

/* Landscape phones and short laptops: let it flow rather than squash. */
@media (max-height: 620px) { .hero { min-height: 0; } }

.hero {
  background:
    linear-gradient(180deg, var(--hero-fade0) 66%, var(--hero-fade) 93%),
    var(--hero);
  margin-top: -1px;
  padding-top: 1px;
}
.hero-copy { position: relative; z-index: 2; text-align: center; padding-top: clamp(16px, 2.4vh, 34px); flex: none; }
.hero h1 { font-size: clamp(33px, 5.9vw, 82px); font-weight: 900; letter-spacing: -.035em; }
.hero h1 span { display: inline-block; }
.hero h1 span:first-child { rotate: -2.4deg; }
.hero h1 span:last-child  { rotate: 1.4deg; margin-top: clamp(4px, 1vh, 14px); }
.lede {
  font-family: var(--display); font-weight: 600; color: var(--hi);
  font-size: clamp(15.5px, 1.7vw, 23px); line-height: 1.35;
  max-width: 760px; margin: clamp(14px, 2.2vh, 28px) auto 0;
}
.lede em { font-style: italic; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(16px, 2.6vh, 30px); }

/* hero artwork ------------------------------------------------ */
.hero-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 230px;
  margin-top: clamp(10px, 1.6vh, 26px);
}
/* Sized off the artwork's own height, so it can never grow past it and
   swallow the buttons when the viewport is short. */
.halo {
  position: absolute; left: 50%; bottom: 13%;
  height: 88%; width: auto; aspect-ratio: 1.12 / 1; max-width: 92%;
  translate: -50% 0; border-radius: 50%; background: var(--halo);
}
.portrait {
  position: absolute; left: 50%; bottom: 12.5%;
  height: 83%; width: auto; translate: -50% 0;
}
.ribbon-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.rb-narrow { display: none; }   /* swapped in at the phone breakpoint */
.ribbon-front { pointer-events: none; }
.ribbon { stroke: var(--pink); stroke-width: 92; }
.ground  { fill: var(--ground); }

.tile {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--border); box-shadow: var(--shadow);
}
.tile-bolt  { left: 4.5%;  top: 26%; width: 112px; height: 112px; border-radius: 30px; background: #00B8A9; rotate: -9deg; }
.tile-brush { right: 4.5%; top: 19%; width: 112px; height: 112px; border-radius: 30px; background: #4B7BFF; rotate: 11deg; }
.tile-code  { right: 14%; bottom: 11%; width: 84px; height: 84px; border-radius: 24px; background: var(--pink); rotate: -6deg; }

/* The ribbon unwinds with SCROLL POSITION, not on a timer.
   Browsers without scroll-driven animations get the same effect from main.js. */
.ribbon { stroke-dasharray: 100 220; stroke-dashoffset: 0; }
@keyframes ribbon-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -106; } }
@supports (animation-timeline: scroll()) {
  .ribbon {
    animation: ribbon-flow linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 560px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ---------- 6. sections ---------- */
section h2 { font-size: clamp(27px, 4.2vw, 56px); font-weight: 900; }

.services { padding-block: clamp(56px, 7vw, 96px) clamp(52px, 6vw, 88px); }
.services h2 { margin-bottom: 44px; }

.card-grid { display: grid; gap: 24px; }
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--card); border: 3px solid var(--border); border-radius: 26px;
  padding: 28px 26px 30px; box-shadow: var(--shadow);
}
.card .ic {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 18px; background: var(--ic);
}
.card h3 { font-size: clamp(20px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.card p  { font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.55; color: var(--muted); }

.center-cta { display: flex; justify-content: center; margin-top: 48px; }

/* work -------------------------------------------------------- */
.work {
  background: var(--work-bg);
  border-block: 4px solid var(--border);
  padding-block: clamp(52px, 6vw, 92px) clamp(56px, 6.5vw, 96px);
}
.chip {
  display: inline-block; margin-bottom: 16px;
  background: var(--chip-bg); color: var(--chip-fg); border: 2px solid var(--chip-border);
  border-radius: 999px; padding: 8px 18px;
  font-family: var(--display); font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.chip-ink { background: var(--ink); color: var(--btn1-fg); border-color: var(--ink); }
.work h2 { margin-bottom: 44px; }
.work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; }

.project {
  display: flex; flex-direction: column;
  background: var(--card); border: 3px solid var(--border); border-radius: 30px;
  overflow: hidden; box-shadow: var(--shadow);
}
.project-head {
  position: relative; min-height: 168px; padding: 24px 18px;
  background: var(--hero); border-bottom: 3px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.project-head h3 { font-size: clamp(22px, 2.3vw, 28px); font-weight: 900; text-align: center; }
[data-theme="dark"] .project-head h3 { color: #FFF6D9; }
.status {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; gap: 7px;
  background: var(--card); color: var(--ink); border: 3px solid var(--border);
  border-radius: 999px; padding: 6px 13px;
  font-family: var(--display); font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.status .dot { width: 8px; height: 8px; }

.project-body { display: flex; flex-direction: column; gap: 13px; padding: 24px 22px 26px; flex-grow: 1; }
.kicker {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--hi);
}
.project-body > p:not(.kicker) { font-size: clamp(14.5px, 1.25vw, 16px); line-height: 1.58; color: var(--muted); }

/* tags and the visit link share one bottom-anchored block, so they line up
   across cards however long the descriptions are */
.project-foot { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 14px; }
/* Deliberately not pills: a bordered rounded shape reads as a button and
   people try to click it. Dotted caps say "label" instead. */
.tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tags span { white-space: nowrap; }
.tags span + span::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--pink);
}
.visit {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.visit:hover { color: var(--pink); }
.visit.is-muted { color: var(--muted); font-size: 16.5px; }

.project-teaser { background: transparent; border-style: dashed; border-color: var(--tease); box-shadow: none; }
.project-teaser .project-head {
  background: var(--tease-head); border-bottom-style: dashed; border-bottom-color: var(--tease); color: var(--muted);
}
.project-teaser h3 { font-size: 19px; font-weight: 800; color: var(--muted); }
.project-teaser .status { background: transparent; border: 2px dashed var(--tease); color: var(--muted); }
.project-teaser .kicker { color: var(--muted); }
.skeleton { display: flex; flex-direction: column; gap: 9px; }
.skeleton span { display: block; height: 11px; border-radius: 6px; background: var(--skel); }
.skeleton span:nth-child(2) { width: 92%; }
.skeleton span:nth-child(3) { width: 68%; }
.skeleton.pills { flex-direction: row; gap: 14px; align-items: center; }
.skeleton.pills span { height: 9px; width: 86px; border-radius: 5px; }
.skeleton.pills span:last-child { width: 62px; }

/* free tool --------------------------------------------------- */
.tools {
  background: var(--hero); border-bottom: 4px solid var(--border);
  padding-block: clamp(52px, 6vw, 88px) clamp(56px, 6.5vw, 92px);
}
.tools-inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.tools h2 { margin-bottom: 18px; font-size: clamp(27px, 4vw, 54px); }
.tools-lede { max-width: 440px; font-size: clamp(16px, 1.6vw, 18.5px); opacity: .86; }
.flags { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.flags span {
  font-family: var(--display); font-size: clamp(11px, 1.2vw, 13.5px); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.flags span + span::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 13px; border-radius: 50%; background: var(--pink);
}

/* the tool list: one row per tool, so a third one just slots in */
.tool-list { display: flex; flex-direction: column; gap: 16px; }
.tool-row {
  display: flex; align-items: center; gap: 20px;
  background: var(--card); border: 3px solid var(--border); border-radius: 22px;
  padding: 20px 24px; box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tool-row:hover { color: var(--ink); transform: translate(-2px, -2px); }
.tool-row:active { transform: translate(2px, 2px); }
.tool-row .ic {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: 15px; background: var(--ic);
}
.tool-text { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.tool-text strong {
  font-family: var(--display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.02em;
}
.tool-text span { font-size: clamp(14px, 1.25vw, 15.5px); line-height: 1.45; color: var(--muted); }
.tool-row .go {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; background: var(--btn2-bg); color: var(--btn2-fg);
}
.tool-soon {
  display: flex; align-items: center; gap: 20px;
  border: 3px dashed var(--tease); border-radius: 22px; padding: 18px 24px; color: var(--muted);
  font-family: var(--display); font-size: clamp(15px, 1.5vw, 20px); font-weight: 700;
}
.tool-soon .ic-soon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: 15px; border: 2px dashed var(--tease);
}

/* contact ----------------------------------------------------- */
.contact { background: var(--band-bg); color: var(--band-fg); padding-block: clamp(54px, 6vw, 84px); text-align: center; }
.contact h2 { font-size: clamp(30px, 4.8vw, 64px); font-weight: 900; }
.contact > .wrap > p { max-width: 560px; margin: 20px auto 0; font-size: clamp(15px, 1.6vw, 19px); opacity: .92; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 34px; }
.contact-actions .btn { font-size: clamp(15px, 1.6vw, 19px); }

/* footer ------------------------------------------------------ */
.site-foot { background: var(--foot-bg); color: var(--foot-fg); padding-block: 30px; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.logo-line { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 18px; font-weight: 700; }
.foot-note { font-size: 15px; color: var(--foot-muted); }

/* ---------- 6b. scroll-opened cards (phones) ----------
   Cards arrive collapsed to their title and open as they reach the middle of
   the screen, closing again on the way back up. grid-template-rows 0fr -> 1fr
   animates to the content's real height, which max-height cannot do without
   guessing a number.

   Enabled by a class main.js puts on <body>, so a visitor without JavaScript
   gets every card open rather than permanently shut. Reduced-motion visitors
   are never collapsed at all. */
.collapse { display: grid; grid-template-rows: 1fr; }
.collapse-inner { display: flex; flex-direction: column; min-height: 0; }
.project > .collapse { flex-grow: 1; }
.project-body { flex-grow: 1; }

@media (max-width: 760px) {
  .has-collapse .card > .collapse,
  .has-collapse .project > .collapse {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
  }
  .has-collapse .card > .collapse > .collapse-inner,
  .has-collapse .project > .collapse > .collapse-inner { overflow: hidden; }

  .has-collapse .is-open > .collapse { grid-template-rows: 1fr; opacity: 1; }

  /* main.js hangs this on <body> for the first two frames only */
  .no-collapse-anim .collapse,
  .no-collapse-anim .card,
  .no-collapse-anim .project-head,
  .no-collapse-anim .services-grid,
  .no-collapse-anim .work-grid { transition: none !important; }

  /* Shut, the cards are a tidy stack of titles, so the 24px grid gap is too
     airy. Tighten it and pull the padding in with it. */
  .has-collapse .services-grid,
  .has-collapse .work-grid { gap: 14px; transition: gap .5s cubic-bezier(.4, 0, .2, 1); }

  /* A collapsed services card is just its icon and its title. */
  .has-collapse .card { transition: padding .5s cubic-bezier(.4, 0, .2, 1); }
  .has-collapse .card:not(.is-open) { padding: 20px 20px 22px; gap: 13px; }
  .has-collapse .card:not(.is-open) .ic { width: 52px; height: 52px; border-radius: 16px; }
  .has-collapse .card:not(.is-open) h3 { font-size: 20px; }

  /* Selected work collapses to the same shape. The tall gradient head shrinks
     to a single title row, so the two sections read as one rhythm instead of
     six neat cards followed by four billboards. */
  .has-collapse .project-head {
    transition: min-height .5s cubic-bezier(.4, 0, .2, 1), padding .5s cubic-bezier(.4, 0, .2, 1);
  }
  .has-collapse .project:not(.is-open) .project-head {
    min-height: 0; padding: 20px 84px 22px 20px;
    align-items: flex-start; justify-content: flex-start; gap: 0;
  }
  .has-collapse .project:not(.is-open) .project-head h3 { font-size: 19px; text-align: left; }
  .has-collapse .project:not(.is-open) .project-head > svg { display: none; }
  .has-collapse .project:not(.is-open) .status {
    top: 50%; right: 16px; transform: translateY(-50%);
    padding: 5px 10px; font-size: 11px; border-width: 2px;
  }
}

/* ---------- 7. breakpoints ---------- */
@media (max-width: 1080px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge { display: none; }
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-inner { grid-template-columns: 1fr; gap: 30px; }
  .tools h2 br { display: none; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px);
    background: var(--card); border: 3px solid var(--border); border-radius: 22px;
    box-shadow: var(--shadow); padding: 8px; display: none; z-index: 40;
  }
  .nav[data-open="true"] { display: block; }
  .head-actions { margin-left: auto; }
  .nav ul { flex-direction: column; gap: 0; }
  /* 16px type with 11px padding still clears a 44px tap target */
  .nav a { display: block; padding: 11px 14px; font-size: 16px; border-bottom: 0; border-radius: 12px; }
  .nav a:hover { background: var(--chip-bg); }
  .head-inner { position: relative; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero h1 span:last-child { margin-top: 8px; }

  .services-grid, .work-grid { grid-template-columns: 1fr; }
  .card { padding: 22px 20px 24px; }
  .center-cta .btn, .contact-actions .btn { width: 100%; }
  .contact-actions { flex-direction: column; }
  .contact h2 br { display: none; }

  /* On a phone the row is too narrow for icon, title, description and arrow
     side by side, so the description drops to its own full-width line. */
  .tool-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; column-gap: 14px; row-gap: 9px; padding: 16px 18px;
  }
  .tool-text { display: contents; }
  .tool-row .ic { grid-column: 1; grid-row: 1; width: 48px; height: 48px; border-radius: 14px; }
  .tool-text strong { grid-column: 2 / -1; grid-row: 1; font-size: 18px; }
  .tool-text span { grid-column: 1 / 3; grid-row: 2; }
  .tool-row .go { grid-column: 3; grid-row: 2; align-self: end; width: 40px; height: 40px; }

  .tool-soon { gap: 15px; padding: 16px 18px; }
  .tool-soon .ic-soon { width: 48px; height: 48px; border-radius: 14px; }

  .rb-wide   { display: none; }
  .rb-narrow { display: block; }
  .ribbon    { stroke-width: 62; }

  .portrait  { height: 86%; bottom: 8%; }
  .halo      { height: 84%; aspect-ratio: .95 / 1; bottom: 8%; }

  .hero-art  { height: auto; min-height: 250px; }
  .tile-bolt  { left: 8px;  top: 20%;   width: 74px; height: 74px; border-radius: 22px; }
  .tile-brush { right: 6px; top: 14%;   width: 74px; height: 74px; border-radius: 22px; }
  .tile-code  { display: none; }
  .tile svg   { width: 28px; height: 28px; }

  .foot-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 420px) {
  .contact-actions .btn-ink { font-size: 14px; padding-inline: 18px; }
}