/* ==========================================================================
   In Theory Studios: styles
   1. Tokens (colours, fonts, spacing)  <- change the look of the whole site here
   2. Base
   3. Buttons
   4. Navigation + mobile menu
   5. Hero + phone-to-website mockup
   6. Sections (scaffolds, about, contact, footer)
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --paper: #fbf1de;      /* page background */
  --paper-2: #f3e4c9;    /* slightly deeper background for alternating sections */
  --card: #fffaf0;       /* "screen" white inside the mockup */
  --ink: #1b1410;        /* text + borders */
  --ink-soft: #4a3f37;   /* secondary text */
  --tomato: #ef4b2b;     /* main accent: big shapes and buttons */
  --tomato-ink: #b92d14; /* darker tomato, safe for small text on paper */
  --butter: #ffc94a;
  --peach: #f7b7a3;
  --sage: #b8c7a1;

  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --nav-clearance: 88px;
}

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

/* Belt-and-braces: components below set their own `display`, which can
   otherwise outrank the browser's default [hidden] rule and make hidden
   elements show up anyway. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-clearance);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.06;
  letter-spacing: -0.012em;
}

h2 {
  font-size: clamp(2rem, 1rem + 3.6vw, 3.75rem);
  max-width: 20ch;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

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

.section--dark :focus-visible,
.menu :focus-visible,
.footer :focus-visible {
  outline-color: var(--butter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

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

/* 3. BUTTONS --------------------------------------------------------------- */
/* Every button reads its colours from these variables, so a new style is
   just a new set of four values (see .btn--butter below). */
.btn {
  --btn-bg: var(--tomato);
  --btn-fg: var(--ink);
  --btn-border: var(--ink);
  --btn-sweep: var(--ink);
  --btn-fg-hover: var(--paper);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid var(--btn-border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s var(--ease), transform 0.2s var(--ease);
}

/* The fill that sweeps up from the bottom on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep);
  transform: translateY(101%);
  transition: transform 0.35s var(--ease);
}

@media (hover: hover) {
  .btn:hover {
    color: var(--btn-fg-hover);
  }
  .btn:hover::before {
    transform: none;
  }
}

.btn:active {
  transform: scale(0.97);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-sweep: var(--butter);
  --btn-fg-hover: var(--ink);
}

.btn--butter {
  --btn-bg: var(--butter);
  --btn-border: var(--butter);
  --btn-sweep: var(--paper);
  --btn-fg-hover: var(--ink);
}

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-border: var(--paper);
  --btn-sweep: var(--paper);
  --btn-fg-hover: var(--ink);
}

.btn--sm {
  min-height: 44px;
  padding: 0 20px;
  font-size: 0.95rem;
}

/* 4. NAVIGATION ------------------------------------------------------------ */
.nav {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
}

.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(251, 241, 222, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 3px 0 var(--ink);
  transition: padding 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.nav.is-compact .nav__pill {
  padding-block: 5px;
  box-shadow: 0 2px 0 var(--ink);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 8px;
  color: var(--ink);
  font: 400 1.2rem/1 var(--serif);
  text-decoration: none;
  white-space: nowrap;
}

/* The logo mark is the same "plate" shape used in the hero mockup */
.nav__mark {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--butter);
  border: 2px solid var(--ink);
}

.nav__mark::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: var(--tomato);
}

.nav__studios {
  display: inline-block;
  max-width: 6em;
  overflow: hidden;
  vertical-align: bottom;
  transition: max-width 0.35s var(--ease), opacity 0.25s;
}

.nav.is-compact .nav__studios {
  max-width: 0;
  opacity: 0;
}

.nav__links {
  position: relative;
  display: none;
}

.nav__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 11px 15px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}

/* The sliding highlight behind the links; JS moves it */
.nav__indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0;
  transition: transform 0.35s var(--ease), width 0.35s var(--ease), opacity 0.2s;
}

.nav__list a:hover,
.nav__list a:focus-visible {
  color: var(--paper);
}

.nav__links:not(:hover):not(:focus-within) .nav__list a.is-active {
  color: var(--paper);
}

/* The "Start a project" button folds away once you're already at the contact section */
.nav__cta {
  max-width: 14em;
  transition: color 0.3s var(--ease), transform 0.2s var(--ease), max-width 0.35s var(--ease),
    padding 0.35s var(--ease), margin 0.35s var(--ease), opacity 0.25s;
}

.nav.at-contact .nav__cta {
  max-width: 0;
  margin-left: -8px;
  padding-inline: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Over the tomato-coloured menu, the button switches to ink so it stays visible */
.menu-open .nav__cta {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-sweep: var(--paper);
  --btn-fg-hover: var(--ink);
}

.nav__toggle {
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 0.95rem/1 var(--sans);
  cursor: pointer;
}

.nav__toggle[aria-expanded="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Full-screen menu (phones and small tablets only) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 72px var(--gutter) 116px;
  background: var(--tomato);
  color: var(--ink);
  visibility: hidden;
  clip-path: circle(0% at 50% 100%);
  transition: clip-path 0.6s var(--ease), visibility 0s linear 0.6s;
}

.menu-open .menu {
  visibility: visible;
  clip-path: circle(150% at 50% 100%);
  transition: clip-path 0.6s var(--ease), visibility 0s;
}

.menu-open {
  overflow: hidden;
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s, transform 0.5s var(--ease);
}

.menu-open .menu__list li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.18s + var(--i) * 0.05s);
}

.menu__list a {
  display: block;
  padding: 6px 0;
  font: 400 clamp(2.1rem, 9.5vw, 3.2rem)/1.1 var(--serif);
  text-decoration: none;
}

.menu__list a.is-active {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  font-weight: 700;
}

@media (min-width: 900px) {
  .nav__links {
    display: block;
    margin-left: 6px;
  }
  .nav__toggle,
  .menu {
    display: none;
  }
}

@media (max-width: 899.98px) {
  :root {
    --nav-clearance: 16px;
  }
  .nav {
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .nav__pill {
    width: 100%;
    max-width: 440px;
    justify-content: space-between;
    padding: 8px;
  }
  .nav__word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .nav__logo {
    padding: 0 0 0 4px;
  }
  .nav__mark {
    width: 34px;
    height: 34px;
  }
  .nav__toggle {
    margin-left: auto;
  }
}

/* 5. HERO ------------------------------------------------------------------ */
/* How it works: the copy and the phone are both "sticky", so they stay on
   screen while the tall .hero__track scrolls past. JS turns scroll progress
   into the phone -> website animation. Normal scrolling is never hijacked. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1440px;
  margin-inline: auto;
}

.hero__copy {
  padding: 40px var(--gutter) 24px;
}

.hero__title {
  font-size: clamp(2.4rem, 1rem + 4.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.hero__line {
  display: block;
}

.js .hero__line--two {
  opacity: 0.28;
}

.hero__sub {
  max-width: 34rem;
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__note {
  margin-top: 20px;
  font-weight: 700;
  font-size: 0.95rem;
}

.hero__hint {
  margin-top: 32px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  transition: opacity 0.3s;
}

.hero__hint.is-hidden {
  opacity: 0;
}

.no-js .hero__track,
.no-js .hero__hint {
  display: none;
}

.js .hero__track {
  height: 230vh;
  height: 230svh;
}

.hero__stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  height: 100svh;
  padding-top: 24px;
}

.hero__deviceArea {
  position: relative;
  min-height: 0;
  overflow: hidden;     /* older browsers */
  overflow-x: clip;     /* modern browsers: clip sideways only, so shadows aren't cut off */
  overflow-y: visible;
}

.hero__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 0 104px;
  font-weight: 700;
  font-size: 0.9rem;
}

.hero__step--b {
  opacity: 0.4;
}

.hero__bar {
  width: min(200px, 30vw);
  height: 6px;
  border-radius: 99px;
  background: rgba(27, 20, 16, 0.14);
  overflow: hidden;
}

.hero__bar i {
  display: block;
  height: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: clamp(16px, 3vw, 48px);
  }
  .hero__copy {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    height: 100svh;
    padding: 88px 0 40px var(--gutter);
  }
  .hero__track {
    padding-right: var(--gutter);
  }
  .hero__stage {
    padding-top: 88px;
  }
  .hero__steps {
    padding-bottom: 32px;
  }
}

/* People who asked their device to reduce motion see the finished website
   straight away, with no pinned scrolling. */
.reduced .hero__track {
  height: auto;
}

.reduced .hero__stage {
  position: relative;
  height: min(100svh, 760px);
}

@media (min-width: 900px) {
  .reduced .hero__copy {
    position: static;
    height: auto;
    padding-block: 120px 40px;
  }
}

.reduced .hero__hint {
  display: none;
}

/* The phone-to-website mockup ---------------------------------------------
   Everything inside .device-space is drawn at a fixed "design size" (700x660)
   and scaled by JS to fit any screen. Positions live in js/main.js. */
.device-space {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 700px;
  height: 660px;
  margin: -330px 0 0 -350px;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
}

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  border-radius: 50%;
  background: var(--butter);
}

.device-wrap {
  position: relative;
  width: 300px;
  height: 600px;
}

.device {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 10px solid var(--ink);
  border-radius: 44px;
  background: var(--card);
  box-shadow: 0 24px 34px -28px rgba(27, 20, 16, 0.6);
}

.device [data-el] {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  will-change: transform;
}

.notch {
  width: 90px;
  height: 22px;
  border-radius: 12px;
  background: var(--ink);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 12px;
  background: #efe3ce;
  border-bottom: 1px solid rgba(27, 20, 16, 0.14);
}

.toolbar .dots {
  display: flex;
  gap: 5px;
}

.toolbar .dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cdbfa8;
}

.toolbar .url {
  flex: 1;
  max-width: 320px;
  margin: 0 auto;
  height: 20px;
  border-radius: 10px;
  background: var(--card);
  font: 600 10.5px/20px var(--sans);
  text-align: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 3px rgb(255, 250, 240), 0 0 0 5px rgb(239, 75, 43);
}

.avatar::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--tomato);
}

.name {
  font: 700 13px/1 var(--sans);
  white-space: nowrap;
}

.handle {
  color: #7a6b5d;
  font: 500 11px/1 var(--sans);
}

.bio {
  width: 248px;
  font: 500 12px/1.4 var(--sans);
}

.linkbio {
  font: 700 12px/1 var(--sans);
  text-decoration: underline;
}

.btn-mock {
  display: grid;
  place-items: center;
  width: 248px;
  height: 28px;
  border-radius: 8px;
  background: #efe3ce;
  font: 700 11px/1 var(--sans);
}

.btn-mock span {
  grid-area: 1 / 1;
}

.btn-mock__b {
  opacity: 0;
}

.tile {
  width: 92px;
  height: 108px;
  overflow: hidden;
  background: var(--tc);
}

/* Each photo placeholder is a flat colour with a "plate" on it.
   Swap these for real product photos later. */
.tile::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tp);
  transform: translate(-50%, -50%);
}

.tile--1 { --tc: var(--tomato); --tp: var(--butter); }
.tile--2 { --tc: var(--butter); --tp: var(--ink); }
.tile--3 { --tc: var(--peach); --tp: var(--tomato); }
.tile--4 { --tc: var(--ink); --tp: var(--paper); }
.tile--5 { --tc: var(--paper-2); --tp: var(--tomato); }
.tile--6 { --tc: var(--sage); --tp: var(--paper); }
.tile--7 { --tc: #f4866c; --tp: var(--ink); }
.tile--8 { --tc: var(--butter); --tp: var(--tomato); }
.tile--9 { --tc: var(--ink); --tp: var(--butter); }

.tile__cap {
  position: absolute;
  z-index: 1;
  left: 8px;
  bottom: 7px;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--card);
  font: 700 9px/1 var(--sans);
  opacity: 0;
}

.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 44px;
  border-top: 1px solid rgba(27, 20, 16, 0.12);
}

.tabbar i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 2px solid var(--ink);
}

.nav-links {
  display: flex;
  gap: 18px;
  font: 600 11.5px/1 var(--sans);
  white-space: nowrap;
}

.device .site-h {
  width: 310px;
  font: 400 28px/1.08 var(--serif);
  letter-spacing: -0.01em;
}

.site-p {
  font: 500 11.5px/1.35 var(--sans);
  color: #6b5d51;
}

.site-btn {
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--tomato);
  font: 700 11.5px/1 var(--sans);
}

.site-label {
  font: 700 11px/1 var(--sans);
  color: var(--ink-soft);
  white-space: nowrap;
}

.live-pill {
  position: absolute;
  top: -16px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 700 12px/1 var(--sans);
  opacity: 0;
}

.live-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--butter);
}

@media (prefers-reduced-motion: no-preference) {
  .live-pill i {
    animation: pulse 1.8s ease-out infinite;
  }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 201, 74, 0.7); }
  100% { box-shadow: 0 0 0 8px rgba(255, 201, 74, 0); }
}

/* On phones the mockup stays a phone and becomes a mobile website */
@media (max-width: 899.98px) {
  .nav-links {
    display: none;
  }
  .toolbar {
    justify-content: center;
  }
  .toolbar .dots {
    display: none;
  }
  .device .site-h {
    font-size: 22px;
  }
  .hero__actions .btn {
    padding: 0 22px;
  }
  .hero__copy {
    padding-top: 28px;
  }
}

/* 6. SECTIONS -------------------------------------------------------------- */
.section {
  padding-block: clamp(72px, 12vw, 152px);
}

.section--tint {
  background: var(--paper-2);
}

.lead {
  max-width: 36rem;
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
}

/* About */
.about__grid {
  display: grid;
  gap: 56px;
}

.about__text {
  display: grid;
  gap: 20px;
  max-width: 34rem;
  line-height: 1.7;
}

.about__text h2 {
  margin-bottom: 8px;
}

.about__cta {
  display: grid;
  gap: 16px;
  justify-items: start;
  margin-top: 12px;
  font-weight: 700;
}

.about__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  align-content: start;
}

.portrait {
  margin: 0;
  transition: transform 0.4s var(--ease);
}

.portrait--wide {
  grid-column: 1 / -1;
}

.portrait__slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 16px;
  border: 2px dashed rgba(27, 20, 16, 0.4);
  border-radius: 28px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

.portrait--wide .portrait__slot {
  aspect-ratio: 16 / 9;
}

/* When real photos go in, this styles them */
.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  object-fit: cover;
}

.portrait--wide img {
  aspect-ratio: 16 / 9;
}

.portrait figcaption {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  font-size: 0.95rem;
}

.portrait figcaption strong {
  font: 400 1.2rem/1.2 var(--serif);
}

.portrait figcaption em {
  color: var(--tomato-ink);
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 72px;
    align-items: start;
  }
  .portrait--b {
    margin-top: 40px;
  }
}

@media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portrait--a { transform: rotate(-2deg); }
  .portrait--b { transform: rotate(2deg); }
  .portrait--a:hover,
  .portrait--b:hover { transform: rotate(0); }
}

/* Contact + footer (dark finale) */
.section--dark {
  margin-top: -1px;
  border-radius: 40px 40px 0 0;
  background: var(--ink);
  color: var(--paper);
}

.contact h2 {
  max-width: 14ch;
  font-size: clamp(2.6rem, 1rem + 7vw, 6.25rem);
  line-height: 1;
}

.contact .lead {
  color: rgba(251, 241, 222, 0.78);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.contact__list {
  max-width: 34rem;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.contact__list li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(251, 241, 222, 0.22);
}

.contact__list span {
  color: rgba(251, 241, 222, 0.6);
}

.contact__list a {
  text-underline-offset: 4px;
}

/* Marks the one remaining placeholder (the contact form isn't built yet) */
.scaffold {
  max-width: 44rem;
  margin-top: 40px;
  padding: 20px 24px;
  border: 2px dashed rgba(251, 241, 222, 0.3);
  border-radius: 16px;
  color: rgba(251, 241, 222, 0.75);
  font-size: 0.95rem;
}

.scaffold strong {
  color: var(--paper);
}

.footer {
  padding: 8px var(--gutter) 120px;
  background: var(--ink);
  color: rgba(251, 241, 222, 0.7);
  font-size: 0.9rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1200px;
  margin-inline: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 241, 222, 0.22);
}

@media (min-width: 900px) {
  .footer {
    padding-bottom: 32px;
  }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   7. SERVICES (What we do)
   ========================================================================== */
.services__body {
  margin-top: 48px;
}

.svc-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 2px solid var(--ink);
}

.svc-tab {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 16px;
  align-items: baseline;
  padding: 18px 4px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}

.svc-tab__mark {
  grid-row: 1 / 3;
  align-self: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  transition: background 0.2s;
}

.svc-tab[aria-selected="true"] .svc-tab__mark {
  background: var(--tomato);
}

.svc-tab__name {
  font: 400 1.4rem/1.15 var(--serif);
}

.svc-tab__line {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), opacity 0.25s;
}

.svc-tab[aria-selected="true"] .svc-tab__line {
  max-height: 3em;
  opacity: 1;
  margin-top: 4px;
}

.svc-panels {
  margin-top: 8px;
}

.svc-panel {
  display: grid;
  gap: 28px;
}

.svc-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper-2);
}

.svc-stage__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.svc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.svc-hint {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.svc-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 0.85rem/1 var(--sans);
  cursor: pointer;
  margin-left: auto;
}

.svc-replay::before {
  content: "↻";
}

.svc-info__lead {
  max-width: 46ch;
  font-size: 1.05rem;
}

.svc-info__list {
  display: grid;
  gap: 16px;
  margin: 20px 0 0;
}

.svc-info__list dt {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--tomato-ink);
}

.svc-info__list dd {
  margin: 2px 0 0;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .svc-tabs {
    flex-direction: row;
    border-top: 0;
    gap: 0;
  }
  .svc-tab {
    flex: 1;
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 0 20px 18px 0;
    margin-right: 20px;
    border-bottom: 2px solid var(--ink);
  }
  .svc-tab:last-child {
    padding-right: 0;
    margin-right: 0;
  }
  .svc-tab:first-child {
    padding-left: 4px;
  }
  .svc-tab__mark {
    grid-row: auto;
  }
  .svc-tab__line {
    grid-column: auto;
  }
  .svc-panel {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
  }
}

/* Reusable placeholder tile (uses the same look as the hero mockup tiles) */
.pt {
  position: relative;
  background: var(--tc);
  border-radius: 10px;
}

.pt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tp);
  transform: translate(-50%, -50%);
}

/* -- Design panel: pieces fly in and snap to a grid -- */
.mini-win {
  position: absolute;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 30px -20px rgba(27, 20, 16, 0.5);
  overflow: hidden;
}

.mini-win__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  background: #efe3ce;
  border-bottom: 1px solid rgba(27, 20, 16, 0.15);
}

.mini-win__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cdbfa8;
}

.mini-win__body {
  position: relative;
  height: calc(100% - 22px);
}

.d-blk {
  --dx: 0px;
  --dy: 0px;
  --r: 0deg;
  position: absolute;
  border-radius: 5px;
  background: var(--ink);
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(0.7);
}

.d-logo { width: 26px; height: 26px; border-radius: 50%; background: var(--tomato); }
.d-bar { background: var(--ink); }
.d-pill { border-radius: 999px; background: var(--tomato); }
.d-ink { background: var(--ink); opacity-value: 1; }
.d-tile { background: var(--tc); }
.d-tile::after { content: ""; position: absolute; left: 50%; top: 50%; height: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--tp); transform: translate(-50%, -50%); }

.svc-stage--design.is-playing .d-blk {
  animation: fly-in 0.6s var(--ease) forwards;
  animation-delay: var(--d);
}

@keyframes fly-in {
  to { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* -- Development panel: window resizes from desktop to phone -- */
.svc-stage--dev .mini-win.dev-win {
  left: 50%;
  top: 50%;
  width: 480px;
  height: 300px;
  margin: -150px 0 0 -240px;
  transition: width 1.4s var(--ease), height 1.4s var(--ease), margin 1.4s var(--ease), border-radius 1.4s var(--ease);
}

.svc-stage--dev.is-phone .mini-win.dev-win {
  width: 180px;
  height: 320px;
  margin: -160px 0 0 -90px;
  border-radius: 20px;
}

.dev-body {
  position: relative;
  height: 100%;
  padding: 10px;
}

.dev-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 16px;
}

.dev-logo {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tomato);
}

.dev-links {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.dev-links i,
.dev-burger i {
  display: block;
  background: var(--ink-soft);
}

.dev-links i {
  width: 20px;
  height: 5px;
  border-radius: 3px;
}

.dev-burger {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin-left: auto;
}

.dev-burger i {
  width: 16px;
  height: 2px;
}

.svc-stage--dev.is-phone .dev-links { display: none; }
.svc-stage--dev.is-phone .dev-burger { display: flex; }

.dev-hero {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.dev-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dev-text b {
  display: block;
  height: 9px;
  width: 90%;
  border-radius: 3px;
  background: var(--ink);
}

.dev-text s {
  display: block;
  height: 6px;
  width: 70%;
  border-radius: 3px;
  background: var(--ink-soft);
  text-decoration: none;
}

.dev-btn {
  display: block;
  width: 46px;
  height: 16px;
  margin-top: 4px;
  border-radius: 8px;
  background: var(--tomato);
}

.dev-img {
  width: 90px;
  height: 60px;
  flex: none;
}

.dev-cards {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.dev-cards div {
  flex: 1;
  height: 38px;
}

.svc-stage--dev.is-phone .dev-hero {
  flex-direction: column;
}

.svc-stage--dev.is-phone .dev-img {
  width: 100%;
  height: 50px;
}

.svc-stage--dev.is-phone .dev-cards {
  flex-direction: column;
}

.svc-stage--dev.is-phone .dev-cards div {
  height: 24px;
}

.dev-tag {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font: 700 0.75rem/1 var(--sans);
  gap: 4px;
}

.dev-tag__a,
.dev-tag__b {
  padding: 4px 10px;
  border-radius: 999px;
}

.svc-stage--dev:not(.is-phone) .dev-tag__a,
.svc-stage--dev.is-phone .dev-tag__b {
  background: var(--ink);
  color: var(--paper);
}

/* -- Going live panel -- */
.svc-stage--live .svc-stage__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mini-win.live-win {
  position: relative;
  flex: none;
  width: 260px;
  height: 150px;
}

.live-url {
  display: flex;
  align-items: center;
  flex: 1;
  height: 14px;
  margin-left: 6px;
  border-radius: 7px;
  background: var(--card);
  overflow: hidden;
}

.live-url__txt {
  padding: 0 8px;
  font: 600 8px/14px var(--sans);
  white-space: nowrap;
  transform: translateX(-100%);
}

.svc-stage--live.is-playing .live-url__txt {
  animation: type-in 1s steps(18) 1.1s forwards;
}

@keyframes type-in {
  to { transform: translateX(0); }
}

.live-page {
  position: relative;
  height: 100%;
}

.lp {
  position: absolute;
  border-radius: 6px;
  opacity: 0;
}

.lp-ink { background: var(--ink); }
.lp-ink:nth-of-type(3) { background: var(--ink-soft); }
.lp-pill { border-radius: 999px; background: var(--tomato); }

.svc-stage--live.is-playing .lp {
  animation: rise-in 0.6s var(--ease) forwards;
}

.svc-stage--live.is-playing .lp:nth-child(1) { animation-delay: 1.3s; }
.svc-stage--live.is-playing .lp:nth-child(2) { animation-delay: 1.5s; }
.svc-stage--live.is-playing .lp:nth-child(3) { animation-delay: 1.7s; }
.svc-stage--live.is-playing .lp:nth-child(4) { animation-delay: 1.9s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.live-card {
  width: 260px;
}

.live-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font: 700 0.82rem/1.2 var(--sans);
}

.live-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
}

.svc-stage--live.is-playing .live-list li {
  animation: rise-in 0.5s var(--ease) forwards;
  animation-delay: var(--d);
}

.tick {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--sage);
}

.live-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.live-switch__label em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
}

.live-switch__label .on { display: none; }
.live-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(27, 20, 16, 0.16);
}

.live-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}

.svc-stage--live.is-playing .live-switch__track {
  transition: background 0.3s 2.1s;
  background: var(--tomato);
}

.svc-stage--live.is-playing .live-switch__knob {
  transition: transform 0.4s var(--ease) 2.1s;
  transform: translateX(18px);
}

.svc-stage--live.is-playing .live-switch__label .off { display: none; }
.svc-stage--live.is-playing .live-switch__label .on { display: inline; }

@media (min-width: 640px) {
  .svc-stage--live .svc-stage__inner {
    flex-direction: row;
    gap: 32px;
  }
}

/* -- Redesign panel: drag-to-compare -- */
.svc-stage--redesign .svc-stage__inner {
  padding: 20px;
}

.cmp {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  touch-action: pan-y;
}

.cmp__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cmp__after {
  clip-path: inset(0 0 0 50%);
  background: var(--card);
}

.cmp__tag {
  position: absolute;
  top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 700 0.7rem/1 var(--sans);
  z-index: 2;
}

.cmp__tag--l { left: 8px; }
.cmp__tag--r { right: 8px; }

.cmp__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.cmp__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--ink);
  transform: translateX(-1px);
  pointer-events: none;
}

.cmp__grip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: grid;
  place-items: center;
}

.cmp__grip::before {
  content: "⟷";
  color: var(--paper);
  font-size: 15px;
}

/* Deliberately dated: cramped, centered, clashing */
.old {
  padding: 8px;
  background: #d7d2c4;
  font-family: Georgia, serif;
  color: #222;
}

.old__banner {
  padding: 4px;
  background: #000080;
  color: #fff200;
  font: 700 11px/1.4 Georgia, serif;
  text-align: center;
}

.old__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 6px;
  background: #c0c0c0;
  font: 700 8px/1 Georgia, serif;
}

.old__menu span {
  color: #0000ee;
  text-decoration: underline;
}

.old__h {
  margin-top: 8px;
  color: #000080;
  font: 700 15px/1 Georgia, serif;
  text-align: center;
}

.old__p {
  margin: 6px 0;
  font-size: 8.5px;
  line-height: 1.4;
  color: #333;
}

.old__img {
  display: grid;
  place-items: center;
  height: 46px;
  border: 2px inset #999;
  background: #e8e4d8;
  color: #777;
  font-size: 9px;
}

.old__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 6px;
}

.old__grid span {
  display: grid;
  place-items: center;
  height: 26px;
  border: 1px solid #999;
  background: #fff;
  font-size: 7px;
  color: #555;
}

.old__new {
  position: absolute;
  top: 46px;
  right: 8px;
  color: #cc0000;
  font: 700 11px/1 Georgia, serif;
  transform: rotate(-8deg);
}

.old__foot {
  margin-top: 8px;
  color: #555;
  font-size: 7px;
  text-align: center;
}

.nw-mark { position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--butter); border: 1.5px solid var(--ink); }
.nw-name { position: absolute; left: 42px; top: 14px; font: 700 12px/1 var(--sans); }
.nw-links { position: absolute; right: 78px; top: 16px; display: flex; gap: 12px; font: 600 9px/1 var(--sans); color: var(--ink-soft); }
.nw-order { position: absolute; right: 14px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--tomato); font: 700 9px/1 var(--sans); }
.nw-h { position: absolute; left: 14px; top: 62px; width: 210px; font: 400 20px/1.1 var(--serif); }
.nw-p { position: absolute; left: 14px; top: 108px; font: 500 9px/1.3 var(--sans); color: var(--ink-soft); }
.nw-btn { position: absolute; left: 14px; top: 130px; padding: 6px 14px; border-radius: 999px; background: var(--tomato); font: 700 9px/1 var(--sans); }

/* -- Words & search panel -- */
.svc-stage--words .svc-stage__inner {
  display: flex;
  align-items: flex-start;
  padding: 24px;
  gap: 20px;
  flex-direction: column;
}

.w-page {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.w-photo {
  width: 96px;
  height: 72px;
  float: left;
  margin: 0 12px 8px 0;
}

.w-line {
  display: grid;
  margin-bottom: 10px;
}

.w-line .skel,
.w-line .txt {
  grid-area: 1 / 1;
  align-self: start;
}

.w-line .txt {
  opacity: 0;
  font: 500 12px/1.3 var(--sans);
}

.w-line--h .txt { font: 400 18px/1.15 var(--serif); }
.w-line--b .txt { justify-self: start; }

.skel {
  display: block;
  border-radius: 4px;
  background: rgba(27, 20, 16, 0.14);
}

.skel--h { height: 20px; width: 90%; }
.skel--p { height: 34px; width: 100%; }
.skel--b { height: 26px; width: 96px; border-radius: 999px; }

.w-btn {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--tomato);
  font: 700 11px/1 var(--sans);
}

.svc-stage--words.is-playing .w-line .skel {
  animation: fade-out 0.01s var(--d) forwards;
}

.svc-stage--words.is-playing .w-line .txt {
  animation: rise-in 0.5s var(--ease) var(--d) forwards;
}

@keyframes fade-out {
  to { display: none; }
}

.w-search {
  width: 100%;
  max-width: 320px;
  padding-top: 14px;
  border-top: 1px dashed rgba(27, 20, 16, 0.3);
}

.w-search__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-soft);
  opacity: 0;
}

.w-search > div {
  opacity: 0;
  margin-bottom: 6px;
}

.svc-stage--words.is-playing .w-search__title,
.svc-stage--words.is-playing .w-search > div {
  animation: rise-in 0.5s var(--ease) var(--d) forwards;
}

.w-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--tomato-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.w-url { margin: 1px 0; color: #1a0dab; font-size: 0.78rem; }
.w-ptitle { margin: 1px 0; color: #1a0dab; font-size: 0.95rem; text-decoration: underline; }
.w-desc { margin: 1px 0; color: var(--ink-soft); font-size: 0.82rem; }

.services__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}

.services__foot p {
  flex: 1;
  min-width: 220px;
  color: var(--ink-soft);
}

/* ==========================================================================
   8. HOW WE THINK
   ========================================================================== */
.think__head h2 {
  max-width: 22ch;
}

.think__list {
  display: grid;
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.think__item {
  padding: 28px 0;
  border-bottom: 2px solid var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.think__item.is-in {
  opacity: 1;
  transform: none;
}

.think__item h3 {
  font: 400 1.5rem/1.2 var(--serif);
  margin-bottom: 8px;
}

.think__item p {
  max-width: 48ch;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .think__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .think__item {
    padding: 32px 40px 32px 0;
  }
  .think__item:nth-child(odd) {
    border-right: 2px solid var(--ink);
    padding-right: 40px;
  }
  .think__item:nth-child(even) {
    padding-left: 40px;
  }
}

/* ==========================================================================
   9. WORK
   ========================================================================== */
.tag {
  display: inline-flex;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 700 0.78rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tag--own {
  background: var(--butter);
}

.case {
  display: grid;
  gap: 28px;
  margin-top: 48px;
}

.case__visual {
  display: grid;
  gap: 16px;
}

.seg-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  width: fit-content;
  border: 2px solid var(--ink);
  border-radius: 999px;
}

.seg {
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 0.85rem/1 var(--sans);
  cursor: pointer;
}

.seg[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.case__stage {
  display: grid;
  place-items: center;
  padding: 32px 16px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper-2);
  min-height: 320px;
}

.case__device {
  width: 100%;
  max-width: 560px;
  border: 10px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 24px 40px -26px rgba(27, 20, 16, 0.5);
  transition: max-width 0.5s var(--ease), border-radius 0.5s var(--ease);
}

.case__device[data-view="phone"] {
  max-width: 240px;
  border-radius: 34px;
}

.case__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  background: #efe3ce;
}

.case__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cdbfa8;
}

.case__url {
  flex: 1;
  max-width: 220px;
  margin: 0 auto;
  height: 15px;
  border-radius: 8px;
  background: var(--card);
}

.case__screen {
  position: relative;
  aspect-ratio: 16 / 10;
}

.case__device[data-view="phone"] .case__screen {
  aspect-ratio: 9 / 17;
}

.case__shot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

.case__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case__shot--phone {
  display: none;
}

.case__device[data-view="phone"] .case__shot--desktop { display: none; }
.case__device[data-view="phone"] .case__shot--phone { display: grid; }

.case__info h3 {
  margin-top: 6px;
  font-size: clamp(1.8rem, 1rem + 2vw, 2.6rem);
}

.case__desc {
  max-width: 42ch;
  margin-top: 14px;
  color: var(--ink-soft);
}

.case__list {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
}

.case__list dt {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--tomato-ink);
}

.case__list dd {
  margin: 2px 0 0;
}

.case__info .btn {
  margin-top: 24px;
}

@media (min-width: 900px) {
  .case {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
    align-items: start;
  }
}

.more {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.more__card {
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper-2);
}

.more__art {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.more__art .pt {
  width: 48px;
  height: 48px;
}

.more__card h3 {
  margin-top: 10px;
  font: 400 1.4rem/1.2 var(--serif);
}

.more__card p {
  margin-top: 8px;
  color: var(--ink-soft);
}

.more__card--next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  border-style: dashed;
}

.more__card--next .btn {
  margin-top: 16px;
}

@media (min-width: 700px) {
  .more {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   10. HOW WE WORK (process)
   ========================================================================== */
.process__head .lead {
  margin-top: 16px;
}

.process__cta {
  margin-top: 28px;
}

.steps {
  position: relative;
  margin: 56px 0 0;
  padding: 0 0 0 32px;
  list-style: none;
}

.steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(27, 20, 16, 0.18);
}

.steps__fill {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 2px;
  background: var(--ink);
  transform-origin: top;
  transform: scaleY(0);
}

.step {
  position: relative;
  padding-bottom: 40px;
}

.step:last-child {
  padding-bottom: 0;
}

.step__dot {
  position: absolute;
  left: -32px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  transition: background 0.3s, border-color 0.3s;
}

.step.is-in .step__dot {
  background: var(--tomato);
}

.step__who {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 0.72rem/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.step__who--you {
  background: var(--butter);
}

.step__who--us {
  background: var(--peach);
}

.step h3 {
  font: 400 1.45rem/1.2 var(--serif);
  margin-bottom: 6px;
}

.step p {
  max-width: 48ch;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .steps {
    padding-left: 0;
    margin-top: 64px;
  }
  .steps::before,
  .steps__fill {
    left: 50%;
    transform-origin: top;
  }
  .step {
    width: 46%;
    padding-bottom: 64px;
  }
  .step:nth-child(odd) {
    padding-right: 48px;
    text-align: right;
  }
  .step:nth-child(even) {
    margin-left: 54%;
    padding-left: 48px;
  }
  .step:nth-child(odd) .step__dot {
    left: auto;
    right: -6.2%;
  }
  .step:nth-child(even) .step__dot {
    left: -6.6%;
  }
  .step:nth-child(odd) p {
    margin-left: auto;
  }
}