/* ==========================================================================
   NoSite NoProblem, nositenoproblem.ca
   One stylesheet for the whole site. Token block first.
   Palette sampled from Mika's own photographs of the Algarve coast:
   turquoise water, gold cliffs, a coral sunset, a violet dusk sky.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts, self hosted. Never hotlinked.
   Variable woff2, latin and latin-ext subsets. The browser fetches latin-ext
   only when a page actually uses those glyphs, which keeps the English pages
   lighter than the French ones.
   -------------------------------------------------------------------------- */


@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens

   Contrast, measured, not guessed:
     night on cream     16.0:1    all body text
     night on sand      14.4:1
     violet on cream     7.6:1    headings and links
     cream on violet     8.1:1    primary button
     night on marigold  10.6:1    second button
     night on sunset     5.1:1    accent fills
     cream on sea        5.0:1    dark band UI
   Sunset and marigold never carry light text.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Tokens

   Sampled from the NoSite NoProblem logo: black linework, a vivid purple
   wordmark, an orange .ca, white sticker outlines.

   Contrast, measured, not guessed:
     ink on paper       18.6:1   all body text
     ink on lilac       16.1:1
     purple on paper     7.1:1   headings, links, primary button
     paper on purple     7.1:1
     grape on paper      5.7:1   labels and second-level UI
     ink on tangerine    6.1:1   accent fills, dark text only
     ink on sun         10.2:1   accent fills, dark text only
   Tangerine and sun never carry light text.
   -------------------------------------------------------------------------- */

:root {
  /* The token names are unchanged so every component keeps working. The
     values are the logo's. */
  --cream:    #FFFFFF;   /* paper. The logo lives on white. */
  --sand:     #F2ECFF;   /* soft lilac panel */
  --night:    #140F1F;   /* near-black ink, matching the logo's linework */
  --violet:   #6D28D9;   /* primary purple, safe for text */
  --sea:      #7C3AED;   /* brighter purple, labels and offsets */
  --sunset:   #FF5C39;   /* tangerine accent, dark text only */
  --marigold: #FFB020;   /* sun accent, dark text only */

  /* shades used only for the hard offset shadow under a coloured control */
  --violet-deep:   #4C1D95;
  --marigold-deep: #D98D0A;
  --sea-deep:      #5B21B6;

  /* the sticker outline and its shadow, straight off the logo */
  --sticker:     #FFFFFF;
  --sticker-ink: #140F1F;

  /* alphas, no new hues */
  --night-soft:  rgba(20, 15, 31, .74);
  --night-faint: rgba(20, 15, 31, .56);
  --night-edge:  rgba(20, 15, 31, .14);
  --cream-soft:  rgba(255, 255, 255, .82);
  --cream-faint: rgba(255, 255, 255, .64);

  /* type. Baloo 2 is the playful display face; the logo is heavy and round. */
  --face-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --face-body:    'Karla', 'Helvetica Neue', Arial, sans-serif;
  --face-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-mono:  .75rem;
  --fs-small: .9375rem;
  --fs-body:  1.0625rem;
  --fs-lead:  clamp(1.1875rem, 1.09rem + .42vw, 1.4375rem);
  --fs-h3:    clamp(1.1875rem, 1.06rem + .55vw, 1.5rem);
  --fs-h2:    clamp(1.75rem, 1.32rem + 1.83vw, 2.75rem);
  --fs-h1:    clamp(2.25rem, 1.42rem + 3.54vw, 4.5rem);
  --fs-price: clamp(3rem, 2.19rem + 3.47vw, 5rem);

  /* space, mobile first */
  --gap-xs: .5rem;
  --gap-s:  .875rem;
  --gap-m:  1.5rem;
  --gap-l:  2.25rem;
  --gap-xl: clamp(3.25rem, 2.44rem + 3.47vw, 5.25rem);

  --wrap:    72rem;
  --measure: 62ch;

  /* shape */
  --r-s:  14px;
  --r-m:  22px;
  --r-l:  30px;
  --r-pill: 999px;

  /* the scalloped wave divider */
  --wave-h: 22px;
  --wave-w: 44px;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--night);
  font-family: var(--face-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, p, ul, ol, dl, figure, table { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--violet); }

/* Focus is violet on light ground, marigold on dark, always visible. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--night :focus-visible,
.site-foot :focus-visible,
.band--violet :focus-visible { outline-color: var(--marigold); }

::selection { background: var(--marigold); color: var(--night); }

/* --------------------------------------------------------------------------
   4. Signature: the scalloped wave divider
   A row of circles punched out of the incoming band colour, so one colour
   band appears to lap over the next like water on sand. Set --wave-to to the
   colour of the band below and --wave-from to the band above.
   -------------------------------------------------------------------------- */

.wave {
  height: var(--wave-h);
  background-color: var(--wave-from, var(--cream));
  background-repeat: repeat-x;
  background-size: var(--wave-w) var(--wave-h);
  background-image:
    radial-gradient(circle at calc(var(--wave-w) / 2) var(--wave-h),
      transparent calc(var(--wave-h) - 1px), var(--wave-to, var(--sand)) var(--wave-h));
  /* nudge up so the band above and the scallop meet with no seam */
  margin-bottom: -1px;
}

/* Flip it so the scallop bites upward instead of down. */
.wave--up {
  background-image:
    radial-gradient(circle at calc(var(--wave-w) / 2) 0,
      transparent calc(var(--wave-h) - 1px), var(--wave-to, var(--sand)) var(--wave-h));
}

/* The pairings actually used, named for the band above and the band below,
   so page markup never carries an inline style. */
.wave--cream-sand  { --wave-from: var(--cream);  --wave-to: var(--sand); }
.wave--sand-cream  { --wave-from: var(--sand);   --wave-to: var(--cream); }
.wave--cream-night { --wave-from: var(--cream);  --wave-to: var(--night); }
.wave--sand-night  { --wave-from: var(--sand);   --wave-to: var(--night); }
.wave--cream-violet{ --wave-from: var(--cream);  --wave-to: var(--violet); }
.wave--violet-cream{ --wave-from: var(--violet); --wave-to: var(--cream); }
.wave--night-cream { --wave-from: var(--night);  --wave-to: var(--cream); }
.wave--sand-violet { --wave-from: var(--sand);   --wave-to: var(--violet); }

/* --------------------------------------------------------------------------
   5. Layout and bands
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 46rem) { .wrap { padding-inline: 2rem; } }

.band { padding-block: var(--gap-xl); }
.band--sand   { background: var(--sand); }
.band--night  { background: var(--night); color: var(--cream); }
.band--violet { background: var(--violet); color: var(--cream); }

.band--night p, .band--violet p { color: var(--cream-soft); }
.band--night h2, .band--night h3,
.band--violet h2, .band--violet h3 { color: var(--cream); }
.band--night a, .band--violet a { color: var(--marigold); }

.measure { max-width: var(--measure); }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--violet);
  color: var(--cream);
  padding: .8rem 1.1rem;
  border-radius: var(--r-pill);
  z-index: 60;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { position: fixed; left: .75rem; top: .75rem; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-head { position: relative; z-index: 3; padding-block: 1.125rem .5rem; }

.head-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: .75rem;
  column-gap: 1rem;
}

/* The wordmark is the logo illustration. It carries the studio name as alt
   text, so screen readers and search engines still read a name here. */
.wordmark {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.wordmark img {
  width: clamp(9.5rem, 7rem + 11vw, 15rem);
  height: auto;
  display: block;
}
.wordmark:hover img { transform: rotate(-1.2deg) scale(1.02); }
.wordmark img { transition: transform .16s ease; }
@media (prefers-reduced-motion: reduce) {
  .wordmark img { transition: none; }
  .wordmark:hover img { transform: none; }
}

.nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .25rem;
  font-size: var(--fs-small);
  font-weight: 700;
}

.nav a {
  color: var(--night);
  text-decoration: none;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
}
.nav a:hover { background: var(--sand); color: var(--violet); }
.nav a[aria-current='page'] { background: var(--violet); color: var(--cream); }

.lang {
  /* Sit beside the wordmark on row one. Without this the nav, which spans
     both columns on row two, pushes the toggle down to a third row. */
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--cream);
  background: var(--night);
  text-decoration: none;
  border-radius: var(--r-pill);
  padding: .45rem .85rem;
  line-height: 1;
}
.lang:hover { background: var(--sea); }

@media (min-width: 50rem) {
  .head-inner { grid-template-columns: auto 1fr auto; }
  .nav { grid-column: 2; justify-content: flex-end; gap: .25rem; }
  .lang { grid-row: 1; grid-column: 3; }
  .wordmark { font-size: 1.625rem; }
}

/* --------------------------------------------------------------------------
   7. Type
   -------------------------------------------------------------------------- */

h1, .h1 {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--night);
  text-wrap: balance;
  max-width: 16ch;
}

/* The last phrase of the H1, set in the sunrise gradient. */
.sunrise {
  font-style: normal;
  background-image: linear-gradient(96deg, var(--violet) 0%, var(--sea) 42%, var(--sunset) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* if background-clip:text is unsupported the text stays violet and readable */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sunrise { color: var(--violet); -webkit-text-fill-color: currentColor; }
}

h2, .h2 {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--night);
  text-wrap: balance;
  max-width: 20ch;
}

h3, .h3 {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--night);
}

.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 44ch; }

p { max-width: var(--measure); }
p + p { margin-top: 1.05em; }
strong { font-weight: 800; }

/* Utility face: prices, tags, spec labels only. */
.spec {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sea);
  font-variant-numeric: lining-nums tabular-nums;
}
.band--night .spec, .band--violet .spec { color: var(--marigold); }

/* A mono label in a coloured pill. */
.tag {
  display: inline-block;
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--night);
  font-variant-numeric: lining-nums tabular-nums;
}
.tag--sunset   { background: var(--sunset);   color: var(--night); }
.tag--marigold { background: var(--marigold); color: var(--night); }
.tag--sea      { background: var(--sea);      color: var(--cream); }
.tag--violet   { background: var(--violet);   color: var(--cream); }

.stack > * + * { margin-top: var(--gap-m); }

.mt-xs { margin-top: .5rem; }
.mt-s  { margin-top: var(--gap-s); }
.mt-m  { margin-top: var(--gap-m); }
.mt-l  { margin-top: var(--gap-l); }

/* --------------------------------------------------------------------------
   8. Buttons
   The house detail: a hard offset shadow, no blur, in a deeper shade of the
   button's own colour. It presses down on click.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--face-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-align: center;
  background: var(--violet);
  color: var(--cream);
  border: 3px solid var(--sticker-ink);
  box-shadow: 0 5px 0 0 var(--sticker-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 0 var(--sticker-ink); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 0 var(--sticker-ink); }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

.btn--marigold {
  background: var(--marigold);
  color: var(--night);
  box-shadow: 0 5px 0 0 var(--sticker-ink);
}
.btn--marigold:hover { box-shadow: 0 7px 0 0 var(--sticker-ink); }
.btn--marigold:active { box-shadow: 0 0 0 0 var(--sticker-ink); }

.btn--sea {
  background: var(--sea);
  color: var(--cream);
  box-shadow: 0 5px 0 0 var(--sticker-ink);
}
.btn--sea:hover { box-shadow: 0 7px 0 0 var(--sticker-ink); }
.btn--sea:active { box-shadow: 0 0 0 0 var(--sticker-ink); }

.link-quiet {
  font-weight: 800;
  color: var(--violet);
  text-decoration-thickness: 2px;
  text-underline-offset: .26em;
  text-decoration-color: var(--marigold);
}
.link-quiet:hover { text-decoration-color: var(--sunset); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
}

/* --------------------------------------------------------------------------
   9. Hero and the sunrise glow
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(1.5rem, .69rem + 3.47vw, 3.5rem) var(--gap-xl);
  overflow: clip;
}

/* The glow sits behind everything and never intercepts a click. */
.glow {
  position: absolute;
  top: clamp(-17rem, -13rem - 8vw, -9rem);
  right: clamp(-12rem, -8rem - 8vw, -5rem);
  width: clamp(21rem, 15rem + 26vw, 36rem);
  aspect-ratio: 1;
  /* closest-side so the gradient reaches full transparency exactly at the
     box edge. Anything else leaves a hard cut where the element stops. */
  background: radial-gradient(circle closest-side,
    var(--sea) 0%, var(--sunset) 58%, rgba(255, 92, 57, 0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: glow-up 1100ms ease-out 120ms forwards;
}
@keyframes glow-up { to { opacity: .30; } }

.hero > .wrap, .hero .wrap { position: relative; z-index: 1; }

.hero h1 { max-width: 15ch; }

/* The single sweep across the H1 gradient, once, on load. */
.sunrise {
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: sweep 1200ms cubic-bezier(.22, .68, .18, 1) 220ms forwards;
}
@keyframes sweep { to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glow { opacity: .30; animation: none; }
  .sunrise { background-size: 100% 100%; background-position: 0 0; animation: none; }
  .btn { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   10. Photographs
   Generous radius, hard offset shadow in an accent colour, no blur.
   -------------------------------------------------------------------------- */

.shot {
  border-radius: var(--r-l);
  overflow: hidden;
  border: 4px solid var(--sticker);
  box-shadow: 0 0 0 3px var(--sticker-ink), 8px 8px 0 0 var(--sticker-ink);
  background: var(--sand);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--sunset   { box-shadow: 0 0 0 3px var(--sticker-ink), 8px 8px 0 0 var(--sunset); }
.shot--marigold { box-shadow: 0 0 0 3px var(--sticker-ink), 8px 8px 0 0 var(--marigold); }
.shot--violet   { box-shadow: 0 0 0 3px var(--sticker-ink), 8px 8px 0 0 var(--violet); }
.shot--left     { box-shadow: 0 0 0 3px var(--sticker-ink), -8px 8px 0 0 var(--violet); }

@media (min-width: 46rem) {
  .shot { box-shadow: 0 0 0 3px var(--sticker-ink), 14px 14px 0 0 var(--sticker-ink); }
  .shot--sunset   { box-shadow: 0 0 0 3px var(--sticker-ink), 14px 14px 0 0 var(--sunset); }
  .shot--marigold { box-shadow: 0 0 0 3px var(--sticker-ink), 14px 14px 0 0 var(--marigold); }
  .shot--violet   { box-shadow: 0 0 0 3px var(--sticker-ink), 14px 14px 0 0 var(--violet); }
  .shot--left     { box-shadow: 0 0 0 3px var(--sticker-ink), -14px 14px 0 0 var(--violet); }
}

.hero-shot { margin-top: var(--gap-l); }
.hero-shot img { aspect-ratio: 16 / 10; }
@media (min-width: 46rem) { .hero-shot img { aspect-ratio: 16 / 6; } }

/* Photo beside prose */
.split { display: grid; gap: var(--gap-xl); align-items: center; }
@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split--flip > :first-child { order: 2; }
}
.split img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   11. Panels, steps, lists, cards
   -------------------------------------------------------------------------- */

.panel {
  background: var(--cream);
  border-radius: var(--r-m);
  padding: var(--gap-m);
  box-shadow: 0 3px 0 0 var(--night-edge);
}
.band--sand .panel { background: var(--cream); }
.panel .tag { margin-bottom: .75rem; }

.pair { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 46rem) { .pair { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }

.steps { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* The steps sit on a cream band, so they take sand to read as cards. */
.step {
  background: var(--sand);
  border-radius: var(--r-m);
  padding: var(--gap-m);
}
.band--sand .step { background: var(--cream); }
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-family: var(--face-mono);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .875rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.step:nth-child(1) .num { background: var(--sunset);   color: var(--night); }
.step:nth-child(2) .num { background: var(--marigold); color: var(--night); }
.step:nth-child(3) .num { background: var(--sea);      color: var(--cream); }
.step:nth-child(4) .num { background: var(--violet);   color: var(--cream); }
.step h3 { margin-bottom: .4rem; }

/* Included list. A coloured dot per item, cycling through the accents. */
.ticks { display: grid; gap: .8rem; margin-top: var(--gap-l); }
@media (min-width: 46rem) { .ticks { grid-template-columns: 1fr 1fr; column-gap: var(--gap-l); } }
.ticks li { position: relative; padding-left: 1.9rem; max-width: 42ch; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .48em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--violet);
}
.ticks li:nth-child(4n+2)::before { background: var(--sunset); }
.ticks li:nth-child(4n+3)::before { background: var(--marigold); }
.ticks li:nth-child(4n+4)::before { background: var(--sea); }

/* Sample cards */
.cards { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 46rem) { .cards { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }

.card {
  display: block;
  background: var(--cream);
  border-radius: var(--r-m);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 8px 8px 0 0 var(--violet);
  transition: transform .14s ease, box-shadow .14s ease;
}
.card--sunset   { box-shadow: 8px 8px 0 0 var(--sunset); }
.card--marigold { box-shadow: 8px 8px 0 0 var(--marigold); }
.card--sea      { box-shadow: 8px 8px 0 0 var(--sea); }
.card:hover { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 0 var(--violet); }
.card--sunset:hover   { box-shadow: 12px 12px 0 0 var(--sunset); }
.card--marigold:hover { box-shadow: 12px 12px 0 0 var(--marigold); }
.card--sea:hover      { box-shadow: 12px 12px 0 0 var(--sea); }
.card--night { box-shadow: 8px 8px 0 0 var(--night); }
.card--night:hover { box-shadow: 12px 12px 0 0 var(--night); }

/* The restaurant sample carries no photograph, so its card shows the design
   itself rather than a picture of nothing. Same 16/10 box as .card img. */
.card-type {
  aspect-ratio: 16 / 10;
  background: var(--night);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  text-align: center;
  padding: var(--gap-m);
}
.card-type span {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--marigold);
}
.card-type strong {
  font-family: var(--face-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--cream);
}
.card-type em {
  font-style: normal;
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-top: .4rem;
}

.card img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.card-body { padding: var(--gap-m); }
.card h3 { margin-top: .75rem; }
.card p { margin-top: .5rem; color: var(--night-soft); font-size: var(--fs-small); }

@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */

.price-block {
  background: var(--night);
  color: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
  margin-top: var(--gap-l);
  max-width: 36rem;
  box-shadow: 10px 10px 0 0 var(--violet);
}
@media (min-width: 46rem) { .price-block { padding: var(--gap-l); box-shadow: 16px 16px 0 0 var(--violet); } }
.price-block p { color: var(--cream-soft); }
.price-block strong { color: var(--cream); }
.price-block .spec { color: var(--marigold); }

.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .875rem; }

.price-was {
  font-family: var(--face-mono);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  color: var(--cream-faint);
  text-decoration: line-through;
  text-decoration-color: var(--sunset);
  text-decoration-thickness: 3px;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-now {
  font-family: var(--face-mono);
  font-size: var(--fs-price);
  font-weight: 700;
  line-height: 1;
  color: var(--marigold);
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-now .per { font-size: .28em; font-weight: 500; letter-spacing: .01em; color: var(--cream); }

.runon { margin-top: var(--gap-m); }

.addons { width: 100%; max-width: 36rem; margin-top: var(--gap-m); border-collapse: separate; border-spacing: 0 .5rem; }
.addons td {
  padding: .9rem 1.1rem;
  background: var(--cream);
  vertical-align: middle;
  font-weight: 600;
}
.addons tr td:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.addons tr td:last-child {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  font-family: var(--face-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--violet);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.fineprint { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 52rem) { .fineprint { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }
.fineprint > div {
  background: var(--sand);
  border-radius: var(--r-m);
  padding: var(--gap-m);
  max-width: 44ch;
}
.band--sand .fineprint > div { background: var(--cream); }
.fineprint h3 { margin-bottom: .4rem; }

/* --------------------------------------------------------------------------
   13. Prose, About and Privacy
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 1.9em; }
.prose ul { display: grid; gap: .55rem; }
.prose ul li { position: relative; padding-left: 1.7rem; }
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  background: var(--sea);
}
.prose ul li:nth-child(even)::before { background: var(--marigold); }

.updated {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--night-faint);
  margin-top: var(--gap-l);
}

/* --------------------------------------------------------------------------
   14. Contact form
   -------------------------------------------------------------------------- */

.contact-grid { display: grid; gap: var(--gap-xl); margin-top: var(--gap-l); }
@media (min-width: 52rem) {
  .contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

.form-card {
  background: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
  box-shadow: 10px 10px 0 0 var(--sea);
}
@media (min-width: 46rem) { .form-card { padding: var(--gap-l); } }

.field { display: grid; gap: .4rem; margin-bottom: var(--gap-m); }
.field label { font-size: var(--fs-small); font-weight: 800; }

.field input, .field textarea {
  font-family: var(--face-body);
  font-size: var(--fs-body);
  color: var(--night);
  background: var(--cream);
  border: 2px solid var(--night-edge);
  border-radius: var(--r-s);
  padding: .8rem .9rem;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--sea); }
.field input:focus, .field textarea:focus { border-color: var(--violet); }
.field input[aria-invalid='true'] { border-color: var(--sunset); }

.form-status {
  margin-top: var(--gap-m);
  padding: .95rem 1.1rem;
  border-radius: var(--r-m);
  background: var(--marigold);
  color: var(--night);
  font-weight: 700;
  max-width: 46ch;
}
.form-status[hidden] { display: none; }
.form-status[data-state='error'] { background: var(--sunset); }

.aside {
  background: var(--violet);
  color: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
}
@media (min-width: 46rem) { .aside { padding: var(--gap-l); } }
.aside p { color: var(--cream); }
.aside p + p { margin-top: .75rem; }
.aside a { color: var(--marigold); font-weight: 800; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cloudflare Turnstile sits inside the form card, just above the send button.
   The widget renders itself in an iframe and brings its own look, so all this
   does is give it room and stop the button jumping when it finishes loading. */
.cf-turnstile {
  margin-bottom: var(--gap-m);
  min-height: 65px;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-foot { background: var(--night); color: var(--cream); padding-block: var(--gap-xl) var(--gap-l); }
.site-foot p { color: var(--cream-soft); font-size: var(--fs-small); }
.site-foot p + p { margin-top: .45rem; }
.site-foot a { color: var(--cream); text-underline-offset: .22em; text-decoration-color: var(--marigold); }
.site-foot a:hover { color: var(--marigold); }

.foot-name {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cream) !important;
}

.foot-links { margin-top: var(--gap-m) !important; font-weight: 800; }
.foot-tag { margin-top: var(--gap-m) !important; color: var(--cream-faint) !important; }

@media (min-width: 46rem) {
  .foot-cols { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-l); align-items: end; }
  .foot-links { margin-top: 0 !important; }
}

/* A placeholder that still needs a real value stays visibly bracketed. */
.needs-value {
  font-family: var(--face-mono);
  font-size: .8125em;
  color: var(--marigold);
}
.band--sand .needs-value, .band { }


/* --------------------------------------------------------------------------
   15b. Missing piece components
   Added when the studio was renamed. Everything here reuses the existing
   tokens: no new hues, no new faces, no new radii.
   -------------------------------------------------------------------------- */

/* The price, parked in the header so it is on screen at every scroll position.
   Sand chip on cream, Night text, so it never fails contrast. */
.pricepill {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--night);
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}
.pricepill:hover { background: var(--marigold); }
.pricepill .pricepill-alt { color: var(--sea); letter-spacing: .04em; }

/* The pill rides beside the language toggle, on row one, at every width. */
.head-end {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.head-end .lang { grid-row: auto; grid-column: auto; }
@media (min-width: 50rem) { .head-end { grid-column: 3; } }
@media (max-width: 30rem) { .pricepill-alt { display: none; } }

/* ---- The gap: a listing with the website line missing, then the site ---- */

.gapvis {
  display: grid;
  gap: var(--gap-m);
  justify-items: center;
  margin-top: var(--gap-l);
}
@media (min-width: 52rem) {
  .gapvis { grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap-l); }
}

.listing, .preview {
  width: 100%;
  max-width: 22rem;
  background: var(--cream);
  border-radius: var(--r-m);
  padding: var(--gap-s);
  box-shadow: 10px 10px 0 0 var(--night);
  text-align: left;
}
.preview { box-shadow: 10px 10px 0 0 var(--sea); }

.listing-name, .preview-name {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.15;
  color: var(--night);
}
.listing-meta {
  font-size: var(--fs-small);
  color: var(--night-soft);
  margin-top: .2rem;
}
.listing-stars { color: var(--sunset); letter-spacing: .06em; }

.listing-rows { margin-top: .8rem; display: grid; gap: .35rem; }
.listing-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .65rem;
  border-radius: var(--r-s);
  background: var(--sand);
  font-size: var(--fs-small);
  color: var(--night);
}
.listing-row span:last-child { color: var(--sea); font-weight: 700; }

/* The one row that is empty. Marigold fill, Night text, never light type. */
.listing-row--missing { background: var(--marigold); }
.listing-row--missing span:last-child {
  color: var(--night);
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  align-self: center;
}

.gaparrow {
  font-family: var(--face-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
  transform: rotate(90deg);
}
@media (min-width: 52rem) { .gaparrow { transform: none; } }

.preview-bar {
  display: flex;
  gap: .3rem;
  padding-bottom: .55rem;
  margin-bottom: .6rem;
  border-bottom: 2px solid var(--night-edge);
}
.preview-bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--night-edge); }
.preview-line {
  height: .5rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  margin-top: .45rem;
}
.preview-line--short { width: 55%; }
.preview-cta {
  display: inline-block;
  margin-top: .8rem;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: var(--cream);
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
}
.gapcap {
  margin-top: var(--gap-m) !important;
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sea);
  text-align: center;
}

/* ---- The work order. Pricing as a document you have already read. ---- */

.order {
  background: var(--cream);
  border-radius: var(--r-l);
  padding: var(--gap-m);
  margin-top: var(--gap-l);
  max-width: 38rem;
  box-shadow: 12px 12px 0 0 var(--sea);
}
.band--sand .order { background: var(--cream); }
@media (min-width: 46rem) { .order { padding: var(--gap-l); box-shadow: 16px 16px 0 0 var(--sea); } }

.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-s);
  flex-wrap: wrap;
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--night);
}
.stamp {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--marigold);
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
}
.order-lines { margin-top: var(--gap-s); display: grid; gap: .1rem; }
.order-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding-block: .45rem;
  font-size: var(--fs-small);
  color: var(--night);
}
.order-line b { font-weight: 500; }
.order-line .dots {
  flex: 1;
  border-bottom: 2px dotted var(--night-edge);
  transform: translateY(-.2em);
}
.order-line .val {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sea);
}
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-s);
  flex-wrap: wrap;
  margin-top: var(--gap-s);
  padding-top: .75rem;
  border-top: 3px solid var(--night);
}
.order-total .label {
  font-family: var(--face-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--night);
}
.order-total .amount {
  font-family: var(--face-mono);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--violet);
  font-variant-numeric: lining-nums tabular-nums;
}
.order-total .amount .per {
  font-size: .3em;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--night);
}
.order-note { margin-top: var(--gap-s) !important; font-size: var(--fs-small); color: var(--night-soft); }

/* ---- The founding offer. A separate object, not a slash through the price. */

.offer {
  margin-top: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--sand);
  box-shadow: 8px 8px 0 0 var(--sunset);
  max-width: 38rem;
}
.band--sand .offer { background: var(--cream); }
.offer .price-now { color: var(--violet); font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); }
.offer .price-now .per { color: var(--night); }
.offer p { color: var(--night); }
.offer .spec { color: var(--sunset); }

/* ---- Flat FAQ. Always open, no accordion, nothing hidden behind a click. */

.faq { display: grid; gap: var(--gap-m); margin-top: var(--gap-l); }
@media (min-width: 52rem) { .faq { grid-template-columns: 1fr 1fr; gap: var(--gap-l); } }
.faq > div { max-width: 46ch; }
.faq h3 { color: var(--violet); }
.band--night .faq h3, .band--violet .faq h3 { color: var(--marigold); }
.faq p { margin-top: .4rem; }

/* ---- A quiet instruction band. Used for "look yourself up right now". ---- */

.callout {
  margin-top: var(--gap-l);
  padding: var(--gap-m);
  border-radius: var(--r-m);
  background: var(--night);
  color: var(--cream);
  max-width: 46rem;
  box-shadow: 10px 10px 0 0 var(--marigold);
}
.callout p { color: var(--cream-soft); }
.callout strong { color: var(--cream); }
.callout .spec { color: var(--marigold); }

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .skip, .glow, .wave { display: none; }
  body { background: #fff; color: #000; }
  .shot, .card, .price-block { box-shadow: none; }
}

/* ---- The two of us: role cards and the photo strip on the About page ---- */

/* A soft colour blob in the corner of each role card, so the two read as a
   pair. It used to be a jigsaw tab; the puzzle motif is gone with the old
   name. */
.role { position: relative; overflow: hidden; }
.role::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  opacity: .18;
  background: var(--violet);
  pointer-events: none;
}
.role--dad::after { background: var(--sunset); }

/* Three square photographs, each with the house offset shadow in a
   different accent so the strip does not read as a contact sheet. */
.crew {
  display: grid;
  gap: var(--gap-m);
  grid-template-columns: 1fr;
  margin-top: var(--gap-l);
}
@media (min-width: 34rem) { .crew { grid-template-columns: repeat(3, 1fr); gap: var(--gap-s); } }
@media (min-width: 52rem) { .crew { gap: var(--gap-m); } }

.crew figure { margin: 0; border-radius: var(--r-m); overflow: hidden; border: 4px solid var(--sticker); }
.crew img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.crew figure:nth-child(1) { box-shadow: 0 0 0 3px var(--sticker-ink), 8px 8px 0 0 var(--violet); }
.crew figure:nth-child(2) { box-shadow: 0 0 0 3px var(--sticker-ink), 8px 8px 0 0 var(--sunset); }
.crew figure:nth-child(3) { box-shadow: 0 0 0 3px var(--sticker-ink), 8px 8px 0 0 var(--sea); }
@media (min-width: 52rem) {
  .crew figure:nth-child(1) { box-shadow: 0 0 0 3px var(--sticker-ink), 12px 12px 0 0 var(--violet); }
  .crew figure:nth-child(2) { box-shadow: 0 0 0 3px var(--sticker-ink), 12px 12px 0 0 var(--sunset); }
  .crew figure:nth-child(3) { box-shadow: 0 0 0 3px var(--sticker-ink), 12px 12px 0 0 var(--sea); }
}

.crew-note {
  margin-top: var(--gap-m);
  font-size: var(--fs-small);
  color: var(--night-faint);
}

/* When a section is removed, two bands of the same colour can end up adjacent
   with no wave between them. Without this they stack two sets of padding and
   leave a dead gap. Collapse the join so they read as one continuous band. */
.band + .band { padding-top: 0; }