/* SECTION 05 — from curiosity to execution. Calm and editorial after the eye wall: warm ivory,
   Satoshi, large tight headings, generous space, restrained accents. Motion is limited to the
   site's gentle reveal-on-scroll ([data-reveal]) and small hover states. */

.s5, .cta { background: var(--ivory); color: var(--black); font-family: var(--satoshi); }
.s5-wrap { max-width: 82rem; margin: 0 auto; padding: clamp(4.5rem, 11vw, 9rem) var(--gutter) 0; }
.s5-kicker { margin: 0 0 1.4rem; font: 700 0.74rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; color: #5E5A50; }
.s5-head { display: grid; gap: 0.2rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.s5-h2 { margin: 0; max-width: 16ch; font: 900 clamp(2.2rem, 5vw, 4.6rem)/0.92 var(--satoshi); letter-spacing: -0.05em; text-transform: uppercase; }

/* ---------- The statement ---------- */
.s5-statement { margin: 0; max-width: 14ch; font: 900 clamp(3rem, 9vw, 9.6rem)/0.86 var(--satoshi); letter-spacing: -0.058em; text-transform: uppercase; }
.s5-statement .s5-alt { display: block; color: var(--olive); }
.s5-lede {
  max-width: 32ch; margin: clamp(2rem, 5vw, 3.5rem) 0 0 auto; padding-top: 1.25rem; border-top: 1px solid rgb(17 17 17 / 0.22);
  font: 500 clamp(1.15rem, 1.8vw, 1.6rem)/1.45 var(--satoshi); color: #2F2D28;
}

/* ---------- What we do: five clear rows ---------- */
.svc-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgb(17 17 17 / 0.18); }
.svc {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.4rem clamp(1rem, 3vw, 2.5rem); align-items: baseline;
  position: relative; padding: clamp(1.4rem, 3vw, 2.1rem) 0;
}
.svc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(17 17 17 / 0.18); }
.svc-n { display: flex; align-items: center; gap: 0.55rem; font: 700 0.8rem/1 var(--satoshi); letter-spacing: 0.08em; color: #5E5A50; }
.svc-n::before { content: ""; width: 0.7rem; height: 0.7rem; flex: none; background: var(--svc); border: 1.5px solid var(--black); transition: width 300ms var(--ease); }
.svc-name {
  justify-self: start; margin: 0; font: 800 clamp(1.45rem, 2.8vw, 2.6rem)/1 var(--satoshi); letter-spacing: -0.035em; text-transform: uppercase;
  padding-bottom: 0.16em;
  background: linear-gradient(var(--hl, var(--svc)), var(--hl, var(--svc))) 0 100% / 0% 0.14em no-repeat;   /* the highlighter, swept in on hover, under the text */
  transition: background-size 520ms cubic-bezier(0.7, 0, 0.2, 1);
}
.svc-line { margin: 0; font: 500 clamp(1rem, 1.2vw, 1.12rem)/1.5 var(--satoshi); color: #2F2D28; }
.svc-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.svc-tags li { padding: 0.32rem 0.7rem; border: 1px solid rgb(17 17 17 / 0.22); border-radius: 999px; font: 600 0.78rem/1.2 var(--satoshi); color: #3A3A33; }
@media (hover: hover) { .svc:hover .svc-n::before { width: 1.8rem; } .svc:hover .svc-name { background-size: 100% 0.14em; } }

/* ---------- Selected work: placeholders until the case studies are ready ---------- */
.work-note { max-width: 46ch; margin: -1.2rem 0 clamp(2rem, 4vw, 3rem); font: 500 1.02rem/1.55 var(--satoshi); color: #3A3A33; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin: 0; padding: 0; list-style: none; }
.work-slot--wide { grid-column: 1 / -1; }
.work-media {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 1rem; overflow: hidden;
  border: 1.5px dashed rgb(17 17 17 / 0.35);
  background: repeating-linear-gradient(135deg, #EDE6D7 0 14px, #E6DECC 14px 28px);
}
.work-slot--wide .work-media { aspect-ratio: 21 / 9; }
.work-badge {
  position: absolute; left: 1rem; top: 1rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--black); color: var(--ivory);
  font: 700 0.7rem/1 var(--satoshi); letter-spacing: 0.12em; text-transform: uppercase;
}
.work-soon { font: 800 clamp(1.1rem, 2vw, 1.6rem)/1 var(--satoshi); letter-spacing: -0.02em; text-transform: uppercase; color: rgb(17 17 17 / 0.42); }
.work-meta { display: flex; gap: 0.8rem; margin: 0.8rem 0 0; font: 600 0.9rem/1.3 var(--satoshi); color: #5E5A50; }
.work-meta span { color: var(--black); font-weight: 800; }

/* ---------- The invitation ---------- */
.cta { padding: clamp(4.5rem, 11vw, 9rem) var(--gutter) clamp(3rem, 7vw, 5rem); }
.cta-panel {
  position: relative; overflow: hidden; max-width: 82rem; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5.5rem) clamp(3rem, 8vw, 6.5rem);
  border-radius: clamp(1.25rem, 3vw, 2.5rem); background: var(--forest); color: var(--ivory);
}
.cta-title { position: relative; z-index: 1; margin: 0; max-width: 13ch; font: 900 clamp(2.8rem, 8vw, 8.4rem)/0.86 var(--satoshi); letter-spacing: -0.058em; text-transform: uppercase; }
.cta-title span { display: block; color: var(--acid); }
.cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin-top: clamp(2rem, 5vw, 3.2rem); }
.cta-btn {
  display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0.8rem 1.4rem; border: 1.5px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer; text-decoration: none;
  font: 700 0.95rem/1 var(--satoshi); letter-spacing: 0.01em; transition: background 200ms, color 200ms, transform 200ms;
}
.cta-btn--primary { border-color: var(--acid); background: var(--acid); color: var(--black); }
.cta-btn:hover { transform: translateY(-2px); }
.cta-panel .cta-btn:not(.cta-btn--primary):hover { background: var(--ivory); color: var(--black); }
.cta-btn:focus-visible, .cta-copy:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.cta-copy { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: 600 0.92rem var(--satoshi); text-decoration: underline; text-underline-offset: 0.25em; }
.cta .copied { margin-left: 0.4rem; color: var(--acid); font: 700 0.85rem var(--satoshi); }
.cta-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); gap: 1.4rem; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; }
.cta-steps li { display: grid; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid rgb(244 239 229 / 0.3); font: 500 0.98rem/1.45 var(--satoshi); color: #DCD8CB; }
.cta-steps span { font: 800 0.8rem var(--satoshi); color: var(--acid); }
/* Girgit, peeking in from the corner. He stays still: only his mouth and tongue move, and only
   when "Start a project" is hovered or focused. */
.cta-girgit { position: absolute; right: -6%; bottom: -14%; width: min(44%, 34rem); height: auto; pointer-events: none; }

.cta-girgit { z-index: 0; }   /* the image itself faces left, toward the words: never flipped in CSS */
/* The open-mouth Girgit sits exactly over the closed one; it shows only while the tongue is out. */
.cta-girgit--open { visibility: hidden; }
.cta-panel.is-flicking .cta-girgit--open { visibility: visible; }
.cta-panel.is-flicking .cta-girgit:not(.cta-girgit--open) { visibility: hidden; }
.cta-tongue { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.cta-btn.is-caught { transform: translateX(5px); transition: transform 90ms; }
.cta-title, .cta-actions, .cta-steps { z-index: 1; }

/* ---------- Placeholders: a flat eye watching the pointer, blinking now and then ---------- */
.work-media { grid-auto-flow: row; align-content: center; gap: 1rem; }
.work-eye { width: clamp(5.5rem, 12vw, 8.5rem); }
.work-eye svg { display: block; width: 100%; height: auto; overflow: visible; }
.work-eye-iris { transition: transform 260ms cubic-bezier(0.3, 0.7, 0.2, 1); }
.work-eye-lid { transform: scaleY(0); transform-origin: 50% 0; transform-box: fill-box; }

/* The contact card opens in place under the panel. */
.cta .form-card {
  position: relative; left: auto; bottom: auto; translate: none; width: auto; max-width: 82rem; max-height: none; overflow: visible;
  margin: 1.5rem auto 0; padding: clamp(1.5rem, 4vw, 2.6rem); border: 1.5px solid var(--black); border-radius: 1.5rem;
  background: var(--ivory); color: var(--black); font-family: var(--satoshi); animation: s5-card 500ms var(--ease) both;
}
@keyframes s5-card { from { opacity: 0; translate: 0 1rem; } }
.cta .form-title { margin: 0 0 1.4rem; font: 900 clamp(1.8rem, 3.6vw, 3rem)/0.95 var(--satoshi); letter-spacing: -0.04em; text-transform: uppercase; }
.cta .form-close { font: 700 0.85rem var(--satoshi); }
.cta .form label { font: 700 0.72rem var(--satoshi); letter-spacing: 0.1em; }
.cta .form label span { font-family: var(--satoshi); }
.cta .form input, .cta .form select, .cta .form textarea { border: 1.5px solid var(--black); font-family: var(--satoshi); }

@media (max-width: 760px) {
  .svc { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .svc-line, .svc-tags { grid-column: 2; }
  .work-grid { grid-template-columns: 1fr; }
  .work-slot--wide .work-media { aspect-ratio: 4 / 3; }
  .s5-lede { margin-left: 0; }
  .cta-steps { grid-template-columns: 1fr; }
  .cta-girgit { width: 70%; right: -18%; bottom: -10%; opacity: 0.9; }
  .cta-panel { padding-bottom: clamp(9rem, 48vw, 14rem); }    /* room for Girgit below the words */
}

/* ---------- Section 05 motion (all off with reduced motion) ---------- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.12em 0.16em; margin: -0.14em -0.12em -0.16em;   /* room for the whole letter: tight tracking and line-height otherwise shave its edges */ }
.sw > span { display: inline-block; }
.s5-statement .sw--shift > span { color: var(--olive); }
@media (prefers-reduced-motion: no-preference) {
  /* The statement: words rise; the second line flushes through colours and settles into olive. */
  .js .s5-statement .sw > span { translate: 0 150%; transition: translate 900ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 90ms); }
  .js .s5-statement.is-in .sw > span { translate: 0 0; }
  .js .s5-statement.is-in .sw--shift > span { animation: s5-chameleon 1700ms ease-in-out calc(450ms + var(--i) * 90ms) both; }
  @keyframes s5-chameleon {
    0% { color: var(--black); } 18% { color: var(--pink); } 38% { color: var(--blue); }
    58% { color: #2BC20F; } 76% { color: #D9B800; } 100% { color: var(--olive); }
  }
  /* Services: each rule draws in from the left, then its colour square pops, row after row. */
  .js .svc::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1000ms cubic-bezier(0.6, 0, 0.2, 1) calc(var(--row, 0) * 120ms); }
  .js .svc.in-view::before { transform: scaleX(1); }
  .js .svc .svc-n::before { scale: 0; transition: scale 450ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(400ms + var(--row, 0) * 120ms), width 300ms var(--ease); }
  .js .svc.in-view .svc-n::before { scale: 1; }
  /* Placeholder eyes blink, each on its own rhythm. */
  .work-eye-lid { animation: s5-blink var(--blink, 7s) linear var(--blink-delay, 0s) infinite; }
  @keyframes s5-blink { 0%, 94% { transform: scaleY(0); } 96% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
}

/* ---------- Decor: the studio's renders and the hero's flat shapes, one or two per block ----------
   Each means something where it sits: the squiggle for "no fixed formula", the 7 for the seven-day
   website, the computer for the work, the drop for an idea about to land. They sit behind the text,
   drift a little with scroll (data-parallax, js/site.js), float, and pop in when seen. */
.s5-wrap, .cta-panel { position: relative; }
.s5-wrap > :not(.deco), .cta-panel > :not(.deco) { position: relative; z-index: 1; }
.cta-panel > .cta-girgit, .cta-panel > .cta-tongue { position: absolute; }
.deco { position: absolute; z-index: 0; pointer-events: none; display: block; height: auto; }
.deco svg { display: block; width: 100%; height: auto; overflow: visible; }

.deco--squiggle { right: -1%; top: clamp(2rem, 7vw, 5rem); width: clamp(150px, 20vw, 300px); rotate: -14deg; }
.deco--arrow { left: 46%; bottom: clamp(3.5rem, 7vw, 6rem); width: clamp(70px, 7vw, 110px); rotate: -6deg; }
.deco--pink { left: -1.2rem; top: clamp(1.5rem, 5vw, 4rem); width: clamp(34px, 3.4vw, 56px); }
.deco--seven { right: 3%; top: clamp(2rem, 6vw, 4.5rem); width: clamp(80px, 8.5vw, 140px); rotate: 9deg; }
.deco--checker { left: -2.2rem; bottom: 18%; width: clamp(40px, 4vw, 64px); rotate: 14deg; }
.deco--mac { right: 1%; top: clamp(2.5rem, 6vw, 4.5rem); width: clamp(150px, 19vw, 290px); rotate: 6deg; }
.deco--ring { left: -2rem; bottom: 10%; width: clamp(54px, 5.5vw, 90px); }
.deco--drop { right: 7%; top: 9%; width: clamp(46px, 5vw, 86px); rotate: 10deg; }
.deco--spark { left: 46%; top: clamp(1.5rem, 4vw, 3rem); width: clamp(30px, 3vw, 48px); }

@media (prefers-reduced-motion: no-preference) {
  .deco { animation: deco-float 7s ease-in-out infinite alternate; }
  .deco--arrow, .deco--checker, .deco--spark { animation-duration: 5.5s; animation-delay: -2s; }
  .deco--seven, .deco--drop { animation-name: deco-bob; animation-duration: 3.6s; }
  @keyframes deco-float { from { transform: translateY(-6px) rotate(-1.5deg); } to { transform: translateY(8px) rotate(1.5deg); } }
  @keyframes deco-bob { from { transform: translateY(-10px); } to { transform: translateY(6px); } }
  /* Pop in when seen (opacity and scale, so the float and the parallax keep their own properties). */
  .js .deco { opacity: 0; scale: 0.6; transition: opacity 500ms var(--ease), scale 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .js .deco.in-view { opacity: 1; scale: 1; }
}

@media (max-width: 760px) {
  .deco--arrow, .deco--ring, .deco--checker { display: none; }
  .deco--squiggle { width: 34vw; top: 0.5rem; right: -6%; opacity: 0.9; }
  .deco--seven { width: 18vw; top: 1rem; right: 2%; }
  .deco--mac { width: 30vw; top: 1rem; right: -2%; }
  .deco--pink { left: auto; right: 4%; top: auto; bottom: 1rem; }
  .deco--drop { width: 13vw; top: 5%; right: 6%; }
  .deco--spark { left: auto; right: 24%; }
}

/* Highlighter tints: light versions of each service colour, so the stroke never fights the black type. */
.svc:nth-child(1) { --hl: #FF7DBF; }
.svc:nth-child(2) { --hl: #8FA2FF; }
.svc:nth-child(3) { --hl: #8FB89A; }
.svc:nth-child(4) { --hl: #43FF18; }
.svc:nth-child(5) { --hl: #FFE500; }

/* ---------- A real project in the work grid ---------- */
.work-link { display: block; color: inherit; text-decoration: none; }
.work-media--real { display: block; border: 0; background: var(--tile-bg, #391E16); padding: 0; overflow: hidden; }
.work-media--real img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 800ms var(--ease); }
.work-link:hover .work-media--real img, .work-link:focus-visible .work-media--real img { scale: 1.03; }
.work-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 1rem; }
.work-slot--real .work-meta { display: block; font-size: 1rem; color: #2F2D28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* always one line */
.work-slot--real .work-meta span { margin-right: 0.6rem; font-size: 1.15rem; }
.work-tags { display: block; margin-top: 0.4rem; font: 600 0.82rem/1.3 var(--satoshi); letter-spacing: 0.06em; text-transform: uppercase; color: #5E5A50; }

/* Work cards: the image settles from a slight zoom as the card appears, and zooms a touch on hover. */
.work-media--real { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .work-slot--real .work-media img { scale: 1.12; transition: scale 1.2s var(--ease); }
  .js .work-slot--real.in-view .work-media img { scale: 1; }
  .js .work-slot--real.in-view .work-link:hover .work-media img { scale: 1.04; transition-duration: 600ms; }
}