/* Layout, from the user's storyboard: a welcome headline over rows of thumbnails running sideways, then about,
     selected work, FAQ and book a call, the one place to get in touch. Project pages open over the page. */
  /* TeX Gyre Heros: a free Helvetica clone (GUST Font License), in place of Helvetica Neue (user, 2026-10-07).
     It has no Medium, so the regular face covers 400 to 600. The files are served unmodified. */
  @font-face { font-family: "Heros"; src: url("/assets/fonts/texgyreheros-regular.otf") format("opentype"); font-weight: 400 600; font-display: swap; }
  @font-face { font-family: "Heros"; src: url("/assets/fonts/texgyreheros-bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
  :root {
    --paper: #0B0B0C;
    --ink: #FFFFFF;
    --soft: #C9CBD0;
    --grey: #9A9DA4;
    --hair: #232529;
    --line: #36383E;
    --wash: #16171A;
    --surface: #131417;      /* the calendar, fields, FAQ rows */
    --track: #26282D;        /* the loading bar's empty track */
    --ink-hover: #DCDDE0;    /* the main button on hover */
    --muted: #4A4D54;        /* days that can't be booked */
    --placeholder: #6C7078;
    --error: #FF6B6B;
    --blue: #146CF0;         /* blue fills: chips, ticks, the chosen day and time */
    --blue-text: #4C8DFF;    /* blue words: labels and notes, lifted so they read on black */
    --face: "Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color-scheme: dark;
  }
  /* The white version the user compared it with (2026-10-07). Add the class "light" to the page to bring it back,
     and use logo-light.svg. */
  :root.light {
    --paper: #FFFFFF;
    --ink: #0A0A0B;
    --soft: #303238;
    --grey: #676A71;
    --hair: #E3E5E8;
    --line: #D5D8DD;
    --wash: #F4F5F7;
    --surface: #FFFFFF;
    --track: #E7E9EE;
    --ink-hover: #26282C;
    --muted: #BFC2C8;
    --placeholder: #9A9DA4;
    --error: #C42B2B;
    --blue-text: #146CF0;
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; } /* so a hidden button or line stays hidden whatever its display */
  html, body { margin: 0; background: var(--paper); color: var(--ink); }
  body { font-family: var(--face); font-weight: 500; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .wrap { max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
  .eyebrow { color: var(--blue-text); font-weight: 700; font-size: 15px; margin: 0 0 14px; }
  h2.big { margin: 0; font-weight: 700; font-size: clamp(40px, 4.9vw, 74px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
  .lede { margin: 20px 0 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--soft); max-width: 42ch; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 12px;
    background: var(--ink); color: var(--paper); font-weight: 700; font-size: 16px; text-decoration: none; border: 1px solid var(--ink); cursor: pointer; white-space: nowrap; }
  .btn:hover { background: var(--ink-hover); }
  .btn.light { background: var(--paper); color: var(--ink); border-color: var(--line); }
  .btn.light:hover { border-color: var(--ink); background: var(--paper); }
  .btn.wide { width: 100%; }

  /* Header */
  .top { position: fixed; z-index: 30; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top, 0px) + 18px) clamp(16px, 4vw, 48px) 16px;
    display: flex; align-items: center; justify-content: space-between; transition: background 0.3s ease, box-shadow 0.3s ease; }
  .top.solid { background: var(--paper); box-shadow: 0 1px 0 var(--hair); }
  .logo img { height: clamp(30px, 2.9vw, 42px); width: auto; }
  .nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); font-size: 16px; }
  .nav a:not(.btn) { text-decoration: none; }
  .nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 5px; }
  .nav .btn { height: 46px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
  .menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; place-items: center; }
  .menu-btn svg.i { width: 26px; height: 26px; stroke-width: 1.8; }
  .sheet { position: fixed; inset: 0; z-index: 60; background: var(--paper); padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    display: none; flex-direction: column; }
  .sheet.open { display: flex; }
  .sheet .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
  .sheet .row img { height: 30px; width: auto; }
  .sheet .row .menu-btn { display: grid; }
  .sheet a:not(.btn) { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--hair); }
  .sheet .btn { margin-top: auto; }
  @media (max-width: 760px) { .nav { display: none; } .menu-btn { display: grid; } .logo img { height: 28px; } }

  /* 01 Loading */
  .loader { position: fixed; inset: 0; z-index: 70; background: var(--paper); display: grid; place-items: center; transition: opacity 0.6s ease, visibility 0.6s; }
  .loader .in { display: grid; justify-items: center; width: min(860px, 62vw); }
  .loader img { width: 100%; height: auto; }
  .loader .meter { margin-top: clamp(40px, 8vh, 80px); width: 80%; display: flex; align-items: center; gap: 20px; padding-left: 3.6em; }
  .loader .track { flex: 1; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
  .loader .track i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--blue); transition: width 0.3s ease; }
  .loader .pct { font-size: 16px; color: var(--grey); font-variant-numeric: tabular-nums; width: 3.2em; }
  .loader .words { margin-top: 26px; font-size: 15px; color: var(--grey); }
  .loaded .loader { opacity: 0; visibility: hidden; }
  @media (max-width: 760px) { .loader .in { width: 84vw; } .loader .meter { width: 100%; } }

  /* 02 Welcome: the headline, then three rows of thumbnails running sideways in turn, faster while the page scrolls */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .welcome { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(112px, 13vh, 150px)); overflow: hidden; }
  .welcome h1 { margin: 0; font-weight: 700; font-size: clamp(44px, 6vw, 96px); line-height: 0.98; letter-spacing: -0.04em; }
  .welcome h1 span { display: block; }
  .welcome .side { margin-top: clamp(14px, 2vh, 22px); }
  .welcome .side p { margin: 0; font-size: clamp(17px, 1.5vw, 23px); }
  .welcome .ctas { margin-top: clamp(22px, 3vh, 32px); display: flex; flex-wrap: wrap; gap: 14px; }
  .welcome .ctas .btn { height: clamp(52px, 4vw, 58px); }
  .feed { --tile: clamp(240px, 21vw, 400px); --gap: clamp(10px, 1vw, 16px); margin-top: clamp(40px, 5.5vh, 64px); padding-bottom: clamp(16px, 3vh, 36px); }
  /* The rows are built by the page's script, which waits for GSAP and Lenis to download. Their space is kept from the
     start (three rows of 16:9 tiles and two gaps), so nothing below jumps when they arrive (2026-10-09). */
  .feed .rows { display: grid; gap: var(--gap); min-height: calc(3 * var(--tile) * 9 / 16 + 2 * var(--gap)); }
  .feed .row { overflow-x: auto; overflow-y: hidden; padding-block: 12px; margin-block: -12px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .feed .row::-webkit-scrollbar { display: none; }
  .feed .track { display: flex; gap: var(--gap); width: max-content; padding-inline: clamp(16px, 4vw, 48px); }
  .feed .set { display: flex; gap: var(--gap); flex: none; }
  /* moving-rows is set in the head when the rows will move, so they start in their moving layout and the script's first
     placing of them is a transform, not a jump */
  .feed.is-moving .row, .moving-rows .feed .row { overflow-x: clip; overflow-y: visible; }
  .feed.is-moving .track, .moving-rows .feed .track { padding-inline: 0; }
  .feed.is-moving .track { will-change: transform; }
  .feed.is-scrolling { pointer-events: none; }
  .tile { position: relative; display: block; flex: none; width: var(--tile); aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
    background: var(--wash); cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.2s ease, box-shadow 0.3s ease; }
  .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .7, .1, 1), filter 0.3s ease; }
  .tile .view { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
    display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 12px; background: rgba(10, 10, 11, 0.9); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
  .vc { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 3px 6px 2px; border-radius: 4px; background: rgba(0, 0, 0, 0.8);
    color: #fff; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
  .card .vc { right: 10px; bottom: 10px; font-size: 13px; padding: 4px 7px 3px; }  .tile:focus-visible { outline-color: var(--blue); box-shadow: 0 12px 34px -12px rgba(20, 108, 240, 0.55); }
  .tile:focus-visible img { transform: scale(1.03); filter: brightness(0.86) saturate(0.9); }
  .tile:focus-visible .view { opacity: 1; transform: translate(-50%, -50%); }
  @media (hover: hover) and (pointer: fine) {
    .tile:hover { outline-color: var(--blue); box-shadow: 0 12px 34px -12px rgba(20, 108, 240, 0.55); }
    .tile:hover img { transform: scale(1.03); filter: brightness(0.86) saturate(0.9); }
    .tile:hover .view { opacity: 1; transform: translate(-50%, -50%); }
  }
  @media (max-width: 760px) {
    .welcome h1 { font-size: clamp(38px, 11vw, 52px); max-width: 5.6em; }
    .welcome h1 span { display: inline; }
    .welcome .ctas .btn { flex: 1 1 auto; }
    .feed { --tile: 64vw; }
  }

  /* Silver frames (the about collage) */
  .silver { padding: 9px; border-radius: 6px; background: linear-gradient(135deg, #FBFCFD 0%, #C6CBD2 20%, #F1F3F5 44%, #B3B9C2 70%, #EDEFF2 100%);
    box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.38), 0 10px 18px -10px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
  .silver img { border-radius: 2px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

  section.page { padding-block: clamp(84px, 9vw, 140px) 0; scroll-margin-top: 70px; }

  /* 06 About */
  .about { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .about h2.big { font-size: clamp(42px, 5.4vw, 82px); }
  .about .me { margin: 14px 0 0; color: var(--grey); font-size: clamp(15px, 1.15vw, 17px); max-width: 50ch; text-wrap: pretty; }
  .services { margin-top: clamp(40px, 5vw, 70px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services div { padding-right: clamp(14px, 2vw, 30px); }
  .services div + div { padding-left: clamp(14px, 2vw, 30px); border-left: 1px solid var(--hair); }
  .services svg.i { width: 32px; height: 32px; stroke-width: 1.6; margin-bottom: 20px; }
  .services h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.22; }
  .services p { margin: 10px 0 0; color: var(--grey); font-size: 15px; }
  /* Three framed thumbnails: the big one centred across the top, the other two overlapping its lower corners */
  .collage { position: relative; aspect-ratio: 1.2; perspective: 1600px; }
  .collage > * { position: absolute; }
  .collage .c1 { left: 8%; top: 2%; width: 84%; transform: rotateY(-8deg); z-index: 2; }
  .collage .c2 { left: 0; top: 52%; width: 46%; transform: rotateY(14deg) rotateZ(-0.6deg); z-index: 3; }
  .collage .c3 { right: 0; top: 58%; width: 50%; transform: rotateY(-14deg) rotateZ(0.6deg); z-index: 4; }
  @media (max-width: 900px) { .about { grid-template-columns: minmax(0, 1fr); } .collage { order: -1; max-width: 640px; } }
  @media (max-width: 600px) { .services { grid-template-columns: minmax(0, 1fr); gap: 26px; } .services div + div { border-left: 0; padding-left: 0; } }

  /* Management: what's included, in two groups, beside the pitch */
  .manage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .manage .btn { margin-top: clamp(26px, 3vw, 36px); }
  .jobs { display: grid; gap: clamp(30px, 3.4vw, 44px); }
  .jobs h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--grey); }
  .jobs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 32px); }
  .jobs li { display: grid; gap: 6px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--hair); }
  .jobs li b { font-size: 17px; line-height: 1.25; }
  .jobs li span { color: var(--grey); font-size: 15px; }
  @media (max-width: 980px) { .manage { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 560px) { .jobs ul { grid-template-columns: minmax(0, 1fr); } }

  /* 07 Selected work */
  .work-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 32px; }
  .chips { display: flex; gap: 12px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips button { height: 46px; padding: 0 22px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; white-space: nowrap; font-size: 16px; }
  .chips button:hover { border-color: var(--ink); }
  .chips button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
  .grid { margin-top: clamp(30px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 38px) clamp(16px, 2vw, 30px); }
  .grid .card { grid-column: span 2; }
  .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; width: 100%; min-width: 0; cursor: pointer; text-align: left; background: none; border: 0; padding: 0; } /* a long title is cut short instead of widening the card */
  a.card, a.tile { color: inherit; text-decoration: none; }   /* cards and tiles are links to each project's own page */
  .card .pic { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--wash); outline: 2px solid transparent; outline-offset: 3px;
    transition: outline-color 0.2s ease, box-shadow 0.3s ease; }
  .card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .7, .1, 1), filter 0.3s ease; }
  .card .view { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
    display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 12px; background: rgba(10, 10, 11, 0.9); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
  .card:hover .pic, .card:focus-visible .pic { outline-color: var(--blue); box-shadow: 0 12px 34px -12px rgba(20, 108, 240, 0.55); }
  .card:focus-visible { outline: none; }
  .card:hover img, .card:focus-visible img { transform: scale(1.03); filter: brightness(0.86) saturate(0.9); }
  .card:hover .view, .card:focus-visible .view { opacity: 1; transform: translate(-50%, -50%); }
  .card .lab { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 17px; }
  .card .lab .tt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The multiplier, as ViewStats shows it before a title */
  .mult { flex: none; display: inline-block; padding: 2px 7px 1px; border-radius: 6px; background: var(--blue); color: #fff;
    font-size: 13px; font-weight: 700; line-height: 1.45; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .card .lab svg.i { width: 20px; height: 20px; }
  @media (max-width: 980px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .grid { grid-template-columns: minmax(0, 1fr); } .grid .card { grid-column: auto; } .work-head { display: grid; } .chips { margin-inline: -16px; padding-inline: 16px; } }

  /* 08 Project page */
  .project { position: fixed; inset: 0; z-index: 55; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; display: none; }
  .project.open { display: block; }
  .project .top { position: sticky; }
  .project .back { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; font-size: 17px; padding: 10px 0; }
  .project .body { padding-block: clamp(10px, 2vw, 28px) clamp(60px, 8vw, 110px); }
  .project .main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
  .project .shot { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--wash);
    outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.2s ease, box-shadow 0.3s ease; }
  .project .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .7, .1, 1), filter 0.3s ease; }
  /* The big thumbnail opens the video on YouTube; on hover it shows the same dark pill as the cards */
  .project .shot .view { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
    display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 12px; background: rgba(10, 10, 11, 0.9); color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap; }
  .project a.shot[href]:hover, .project a.shot[href]:focus-visible { outline-color: var(--blue); box-shadow: 0 12px 34px -12px rgba(20, 108, 240, 0.55); }
  .project a.shot[href]:hover img, .project a.shot[href]:focus-visible img { transform: scale(1.02); filter: brightness(0.86) saturate(0.9); }
  .project a.shot[href]:hover .view, .project a.shot[href]:focus-visible .view { opacity: 1; transform: translate(-50%, -50%); }
  .p-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
  .project #p-title { margin: 0; font-weight: 700; font-size: clamp(38px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -0.035em; }
  .outlier { margin: 16px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 16px; color: var(--soft); }
  .outlier .mult { font-size: 15px; padding: 3px 9px 2px; }
  .outlier small { color: var(--grey); font-size: 14px; }
  .facts { margin: clamp(26px, 3vw, 40px) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts div { padding-right: 18px; }
  .facts div + div { padding-left: 18px; border-left: 1px solid var(--hair); }
  .facts b { display: block; font-size: 16px; margin-bottom: 8px; }
  .facts span { color: var(--grey); font-size: 15px; }
  .more { margin-top: clamp(44px, 5vw, 70px); }
  .more h2 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 18px; }
  .more .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
  @media (max-width: 900px) { .project .main { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 600px) { .more .row { grid-template-columns: minmax(0, 1fr); } .facts { grid-template-columns: minmax(0, 1fr); gap: 16px; } .facts div + div { border-left: 0; padding-left: 0; } }

  /* 09 FAQ: the last section, after booking */
  .faq { display: grid; gap: 14px; }
  .faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; font-size: 18px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary svg.i { width: 22px; height: 22px; stroke-width: 1.7; transition: transform 0.25s ease; }
  .faq details[open] summary svg.i { transform: rotate(45deg); }
  .faq p { margin: -4px 0 0; padding: 0 26px 24px; color: var(--grey); max-width: 70ch; }
  .faq p a { color: var(--ink); text-underline-offset: 3px; }

  /* 10 Book a call: the one place to get in touch */
  .book { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
  .checks { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; }
  .checks li { display: flex; align-items: center; gap: 16px; font-size: 18px; }
  .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
  .tick svg.i { width: 16px; height: 16px; stroke-width: 2.6; }
  .reach { margin-top: clamp(34px, 4vw, 50px); padding-top: 26px; border-top: 1px solid var(--hair); display: grid; gap: 14px; justify-items: start; }
  .reach b { font-size: 16px; }
  .reach .line { display: flex; align-items: center; gap: 14px; font-size: 17px; text-decoration: none; }
  .reach a.line:hover { text-decoration: underline; text-underline-offset: 4px; }
  .reach svg { width: 22px; height: 22px; flex: none; }
  .reach.after { display: none; } /* on phones the message line comes after the booking form */
  .booker { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 26px 28px; }
  .cal { border-radius: 14px; padding: 20px 20px 16px; background: var(--surface); box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--hair); }
  .cal .head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
  .cal .head b { font-size: 18px; flex: 1; }
  .cal .head button { width: 36px; height: 36px; border-radius: 8px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .cal .head button:hover:not(:disabled) { background: var(--wash); }
  .cal .head button:disabled { opacity: 0.25; cursor: default; }
  .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
  .days .dow { font-size: 13px; color: var(--grey); padding: 6px 0 8px; }
  .days button { aspect-ratio: 1.1; border: 0; border-radius: 9px; background: none; cursor: pointer; font-size: 15px; font-variant-numeric: tabular-nums; }
  .days button:disabled { color: var(--muted); cursor: default; }
  .days button:not(:disabled):hover { background: var(--wash); }
  .days button[aria-pressed="true"] { background: var(--blue); color: #fff; font-weight: 700; }
  .side .lab { display: block; font-size: 16px; margin-bottom: 14px; }
  /* What the call is, beside the calendar; the times and the booking itself are on Calendly */
  .callfacts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
  .callfacts li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
  .callfacts svg.i { width: 20px; height: 20px; color: var(--grey); }
  .pick { margin: 0; padding-top: 18px; border-top: 1px solid var(--hair); color: var(--grey); font-size: 15px; }
  .booker > .btn { grid-column: 1 / -1; height: 58px; }
  @media (max-width: 1060px) { .book { grid-template-columns: minmax(0, 1fr); } .book > div > .reach { display: none; } .reach.after { display: grid; margin-top: 0; } }
  @media (max-width: 600px) { .booker { grid-template-columns: minmax(0, 1fr); } }

  footer.foot { margin-top: clamp(70px, 8vw, 110px); }
  footer.foot .wrap > div { border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px;
    padding-block: 28px calc(env(safe-area-inset-bottom, 0px) + 30px); font-size: 16px; }
  footer.foot nav { display: flex; gap: clamp(26px, 5vw, 70px); }
  footer.foot nav a { text-decoration: none; }
  footer.foot nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
  /* A second, quieter row: the pages for each service (2026-10-09), so search engines and visitors can reach them */
  footer.foot nav.svc { display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3vw, 40px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 30px); font-size: 15px; color: var(--grey); }
  footer.foot nav.svc a:hover { color: var(--ink); }
  footer.foot .wrap > div:has(+ nav.svc) { padding-bottom: 22px; }

  /* 12 Phones: the sticky booking bar */
  .dock { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: none; }
  .dock .btn { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); }
  @media (max-width: 760px) { .dock.on { display: block; } body { padding-bottom: 0; } footer.foot .wrap > div { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
    footer.foot .wrap > div:has(+ nav.svc) { padding-bottom: 22px; } footer.foot nav.svc { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); } }

  /* Phones: a mix (user, 2026-10-09: all centred, then "Actually it looked better left aligned", then "Maybe a mix bc
     it feels off"; this mix approved: "Good"). Openers sit in the middle: the welcome, each section's heading and short intro, the three
     services, the call to book, project titles and stats, and the footer. Reading text and lists stay left: the About
     paragraphs, the management list, the FAQ, the calendar and the cards' labels. Shared with the other pages
     through assets/site.css. */
  @media (max-width: 760px) {
    .welcome .head, .about .eyebrow, .about h2.big, .about .lede, .services, .manage > div:first-child, .work-head > div:first-child,
    .book > div:first-child > .eyebrow, .book > div:first-child > h2.big, .book > div:first-child > .lede, #faq .eyebrow,
    .project .main > div:last-child, footer.foot .wrap > div, footer.foot nav.svc { text-align: center; }
    .welcome h1, .about .lede, .manage .lede, .book .lede { margin-inline: auto; }
    .p-ctas, .outlier, .checks, footer.foot .wrap > div, footer.foot nav { justify-content: center; }
    .services div, .facts div { padding-right: 0; }
    .p-ctas .btn, .manage .btn { flex: 1 1 100%; width: 100%; }   /* full width, like the site's other phone buttons */
  }

  .grain { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0.05; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
  :root.light .grain { mix-blend-mode: multiply; opacity: 0.045; } /* on white, grain darkens instead */
  @media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; } }