/* ==========================================================================
   [NAME] PHOTOGRAPHY — stylesheet
   --------------------------------------------------------------------------
   This one file controls how every page looks. Each page loads it with a
   <link> tag in its <head>, so a change here changes all five pages at once.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   "Custom properties" (also called CSS variables) — named values we set once
   here and reuse everywhere below. Change a colour on this list and it updates
   across the whole site. :root just means "the whole document".
   -------------------------------------------------------------------------- */

:root {
  /* Direction D — "Editorial", with silver in place of the original oxblood.
     Warm ivory as the page, near-white paper for the content, and a soft silver
     as the only colour. */
  --ground:  #EDE8E0;   /* the page itself — warm ivory                      */
  --bone:    #FBF9F5;   /* the paper the content sits on                     */
  --ink:     #14100E;   /* main text — warm near-black                       */
  --muted:   #6E645C;   /* secondary text: captions, dates, small print      */
  --line:    #DFD9CF;   /* hairline borders and dividers                     */

  /* Silver. Note this is a *surface* colour, not a text colour: it is light, so
     anything written on it has to be dark. White text on silver measures about
     1.5 against a required 4.5 — genuinely unreadable, not merely borderline.
     Buttons therefore fill silver and print the text in ink. */
  --accent:  #CFCBC2;   /* silver — button fills and nothing else            */

  --dark:    #1A1512;   /* dark sections and the footer                      */
  --dark-2:  #251E1A;   /* cards sitting inside a dark section               */

  /* Spacing. Using a fixed scale (rather than picking numbers at random)
     is what makes a layout feel tidy instead of slightly-off. */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* The widest the content is allowed to get on a big monitor. Without this,
     lines of text stretch across a 27" screen and become hard to read. */
  --container: 1180px;
}


/* --------------------------------------------------------------------------
   2. RESET
   Browsers apply their own default margins and sizing. These few rules wipe
   the defaults so we start from a predictable baseline on every browser.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;   /* padding counts *inside* an element's width */
}

body,
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

ul[class], ol[class] {
  list-style: none;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;   /* never let an image overflow its container */
  height: auto;
}

/* Anything marked `hidden` in the HTML must actually be hidden.
   Browsers have a built-in rule saying [hidden] { display: none }, but any rule
   we write ourselves outranks it — so `.field { display: grid }` quietly made a
   hidden field visible again. This one line puts the browser's intention back,
   and !important is genuinely the right tool here: nothing should ever beat it. */
[hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Archivo", -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;      /* 17px — a little larger than the 16px default */
  line-height: 1.7;          /* generous spacing between lines of body text */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-weight: 400;          /* this serif looks best light, not bold */
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* clamp(min, preferred, max) lets a font size scale with the width of the
   screen, but never shrink below the first value or grow past the third.
   It is how the headings stay large on a laptop and sane on a phone. */
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); }

p { max-width: 68ch; }       /* ~68 characters per line reads most comfortably */

/* The reset above stripped every default margin, so put back a deliberate
   vertical rhythm: a consistent gap under headings and between paragraphs.
   The :last-child rule stops the final paragraph in a box adding a gap that
   fights with the box's own padding. */
h1, h2, h3       { margin-bottom: var(--space-2); }
p                { margin-bottom: var(--space-2); }
p:last-child     { margin-bottom: 0; }
.lead            { margin-bottom: var(--space-3); }

/* No accent colour anywhere on the site, so links are marked by the underline
   rather than by being a different colour. On a page whose whole job is showing
   photographs, a coloured link is the one thing competing with them. */
a {
  color: inherit;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* A small, wide-spaced, uppercase label. Used above most section headings. */
.eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.lead {          /* the slightly larger opening paragraph of a section */
  font-size: 1.15rem;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   4. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;                    /* centres the block horizontally */
  padding-inline: var(--space-3);         /* keeps text off the screen edge */
}

/* The content sits on a panel of "paper" floating on the sage page. On a wide
   screen the panel is capped and centred, so the sage shows down both sides and
   frames the whole thing. On a phone there is no room for a frame, so the panel
   simply fills the width. */
main {
  background: var(--bone);
}

@media (min-width: 900px) {
  main {
    max-width: 1340px;
    margin-inline: auto;
  }
}

.section        { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }

.section--dark {
  background: var(--dark);
  color: var(--bone);
}
.section--dark .eyebrow,
.section--dark .lead,
.section--dark .muted { color: #B4ADA2; }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-4);
}

.center      { text-align: center; }
.center p    { margin-inline: auto; }
.muted       { color: var(--muted); }

/* A thin horizontal rule used between major blocks. */
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--space-5);
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);            /* dark text, because silver is a light surface */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Hovering fills it with ink. A silver button is quiet by nature, so the hover
   needs to be emphatic to confirm it is a button at all. */
.btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

/* The quieter of the two buttons — and with a silver primary it has to be much
   quieter than it looks natural to make it. A silver fill barely separates from
   the paper behind it (a contrast of 1.54), so a solid black outline next to it
   reads as the heavier of the two and the hierarchy inverts: the secondary
   action ends up looking like the main one. A thin muted border fixes that. */
.btn--outline {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}
.btn--outline:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* The outline button takes its colour from --muted, which is a dark grey chosen
   to sit on the pale page. Drop it onto a dark section and it becomes dark grey
   on near-black — measured at 3.14 to 1, where readable text needs 4.5 to 1.
   These two rules give it the light-on-dark version instead. */
.section--dark .btn--outline {
  color: var(--bone);
  border-color: #6A625A;
}
.section--dark .btn--outline:hover {
  color: var(--dark);
  background: var(--bone);
  border-color: var(--bone);
}

/* Two or more buttons side by side. Flexbox with a gap keeps them evenly
   spaced and, when the screen is too narrow, wraps them onto separate lines
   with the gap intact — which plain inline buttons do not do. */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* For use on the dark sections, where a dark button would disappear. */
.btn--light {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.btn--light:hover { background: transparent; color: var(--bone); }


/* --------------------------------------------------------------------------
   6. PHOTO PLACEHOLDERS
   Every grey box on the site is one of these. When a real photo is ready we
   delete the <div class="photo-slot"> and put an <img> in its place — the
   README explains exactly how.
   -------------------------------------------------------------------------- */

.photo-slot {
  position: relative;
  aspect-ratio: var(--ratio, 3 / 2);   /* the shape of the box */
  background:
    repeating-linear-gradient(
      45deg,
      #EDEAE3 0 12px,
      #E4E0D7 12px 24px
    );
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.photo-slot span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bone);
  padding: 0.35rem 0.7rem;
  text-align: center;
}

/* Real photos, once they replace the slots above, use this class. */
.photo {
  width: 100%;
  aspect-ratio: var(--ratio, 3 / 2);
  object-fit: cover;    /* fills the box and crops, instead of squashing */
}


/* --------------------------------------------------------------------------
   7. HEADER AND NAVIGATION
   -------------------------------------------------------------------------- */

/* The header now sits directly on the sage, above the paper panel, with no bar
   and no border — the way both reference sites do it. It no longer follows you
   down the page; that is deliberate for now and gets revisited in step 0b when
   the dropdown menu is built. */
.site-header {
  position: relative;
  z-index: 50;
  background: transparent;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

/* ---- The logo ----------------------------------------------------------
   Built from real text rather than an image file. Three advantages: it stays
   selectable and readable by search engines, it stays sharp at any size, and it
   takes its colour from wherever it sits — so the same markup works on the ivory
   header and on the dark footer with no second version.

   The two corners are drawn with ::before and ::after — "pseudo-elements",
   which are boxes CSS invents that do not exist in the HTML. Each is given a
   border on two sides only, which is what makes an L shape. */
/* The oval. Her name sits inside a thin ellipse — chosen because a name is
   wider than it is tall, so nothing has to be stacked or squeezed the way it
   would be in a circle.

   `border-radius: 50%` on a box that is wider than it is tall gives an ellipse,
   not a circle — the percentage is read against each axis separately. That one
   line is the whole shape; there is no image anywhere.

   The border uses `currentColor` so it takes whatever colour the text is. That
   is why the same markup works as dark ink in the header and pale cream in the
   footer, with no second version. */
.brand {
  position: relative;
  display: grid;
  place-content: center;
  /* The header is a flex row, and flex items are allowed to shrink below their
     stated width by default. Without this the oval got squashed from 158px to
     108px and turned into a circle. `flex: 0 0 auto` means: do not grow, do not
     shrink, use the size I asked for. */
  flex: 0 0 auto;
  width: 158px;
  height: 84px;
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}

/* The two corner marks that used to sit at the top-left and bottom-right are
   gone — the oval replaced them. Nothing else referred to them. */

.brand .name {
  display: block;
  font-family: "Italiana", Georgia, serif;
  font-size: 1.3rem;
  /* Italiana is a narrow, tall face, and it was drawn to be spaced out a
     little. Set tight it looks cramped; this is the gap it wants. */
  letter-spacing: 0.05em;
  padding-left: 0.05em;           /* re-centres it against that letter-spacing */
}

.brand small {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 0.44rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: 0.38rem;
  padding-left: 0.34em;           /* re-centres it: letter-spacing adds a gap
                                     after the final letter, which pushes the
                                     whole word very slightly left */
  opacity: 0.72;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One rule covers both the plain links and the dropdown buttons, so a button
   that opens a menu looks identical to a link that goes somewhere. A <button>
   is used for the ones that open menus because that is what they do — they act
   on this page rather than going to another one, and screen-reader software
   announces the two differently. */
.nav a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Archivo", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.5rem;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
}
.nav a:hover,
.nav-trigger:hover          { border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* A visible ring when something is reached by keyboard. :focus-visible fires
   for keyboard users but not for mouse clicks, so this helps the people who
   need it without putting a box around everything anybody clicks. */
.nav a:focus-visible,
.nav-trigger:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* The little arrow, which turns over when its menu is open. */
.nav-chevron { transition: transform 0.18s ease; }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* ---- The dropdown panel ---- */
.has-menu { position: relative; }

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--bone);
  border: 1px solid var(--line);
  z-index: 60;
}
.has-menu.is-open > .nav-menu { display: block; }

/* Items inside a dropdown are lower-case and roomier than the bar above them —
   a menu of six wide-spaced capitals is hard to read at speed. */
.nav-menu a {
  display: block;
  padding: 0.6rem 1.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: none;
  border-bottom: 0;
}
.nav-menu a:hover        { background: var(--ground); border-bottom: 0; }
.nav-menu a:focus-visible{ outline-offset: -2px; }

/* The one action she wants people to take gets to look like a button. */
.nav-cta {
  border: 1px solid var(--ink) !important;
  padding: 0.55rem 1.1rem !important;
}
.nav-cta:hover { background: var(--ink); color: var(--bone); }

/* ---- The rentals link --------------------------------------------------
   This one points at the other half of the business, so left plain it reads
   as another photography page sitting between Galleries and Editing. It is
   the only filled thing in the bar: a solid royal blue pill, in the rentals
   page's own colour, so it is obviously a different destination before the
   word is even read.

   Every selector below is written `.nav a.nav-alt` rather than `.nav-alt`.
   The reason is specificity — the rule that decides who wins when two rules
   set the same property. `.nav a` is one class name plus one element name,
   and `.nav-alt` on its own is one class name, so `.nav a` wins and the pill
   never gets its colours. Naming both — `.nav a.nav-alt` — makes it two class
   names plus an element, which wins cleanly. The alternative is !important,
   which works by overruling the cascade rather than by being more specific,
   and leaves the next rule nowhere to go.

   Three states, each visibly different: royal blue at rest, a brighter blue
   under the cursor, and the deep navy when you are already on the page.
   Measured at 7.8:1, 7.1:1 and 15.9:1 — text needs 4.5:1. */
.nav a.nav-alt {
  background: #1E3A8A;
  border: 1px solid #1E3A8A;
  border-radius: 999px;
  padding: 0.55rem 1.1rem 0.55rem 0.85rem;
  color: #FBF9F5;
}

/* .nav a is already an inline-flex row with a gap, so the dot becomes a flex
   item and spaces itself. It is the one piece of the pill that is decorative
   rather than informative — the word carries the meaning on its own — so it
   can be a soft tint without hurting anybody. */
.nav a.nav-alt::before {
  content: "";
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #A9BCEA;
}

.nav a.nav-alt:hover {
  background: #2C4FB0;
  border-color: #2C4FB0;
}

/* Already on the rentals page: darkest of the three, and the underline the
   other links get is switched off, because the pill is doing that job. */
.nav a.nav-alt[aria-current="page"] {
  background: #141E3C;
  border-color: #141E3C;
}

/* The hamburger button is hidden on desktop and only appears on narrow
   screens (see the media query at the bottom of this file). */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   8. HERO (the big opening block on the home page)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, #EDEAE3 0 12px, #E4E0D7 12px 24px);
  border-bottom: 1px solid var(--line);
  /* Extra room at the bottom so the caption underneath never overlaps. */
  padding: var(--space-5) var(--space-3) var(--space-6);
}

.hero-inner {
  background: rgba(251, 249, 245, 0.92);
  padding: var(--space-4) var(--space-4);
  max-width: 46rem;
}

.hero h1 { margin-bottom: var(--space-2); }

.hero .lead { margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   8b. THE HERO SLIDESHOW
   Every slide is stacked in exactly the same place, one on top of another. All
   of them are see-through except the active one, and changing which one is
   active fades between them. Nothing slides — a cross-fade suits photographs
   far better, because sliding draws attention to the mechanism rather than to
   the picture.
   -------------------------------------------------------------------------- */

.hero { overflow: hidden; }          /* nothing escapes the hero's edges */

.hero-slides {
  position: absolute;
  inset: 0;                          /* shorthand for top/right/bottom/left: 0 */
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* The placeholder pattern, until real photographs arrive. */
  background:
    repeating-linear-gradient(45deg, #EDEAE3 0 12px, #E4E0D7 12px 24px);
  display: grid;
  place-items: center;
}
.hero-slide.is-active { opacity: 1; }

/* When real photographs replace the placeholders they go in as <img> tags, and
   this makes each one fill the space without being distorted. */
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide span {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bone);
  padding: 0.35rem 0.7rem;
}

/* The text panel has to sit above the slides, hence the z-index. */
.hero-inner { position: relative; z-index: 2; }

/* ---- The controls ---- */
.hero-controls {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(251, 249, 245, 0.88);
  padding: 0.4rem 0.6rem;
}

/* Each dot is a real <button>, not a decorated <div>, so it can be reached by
   keyboard and announced by screen-reader software with no extra work. */
.hero-dot {
  width: 28px;                       /* a generous invisible hit area … */
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero-dot::after {
  content: "";                       /* … around a small visible dot */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.4;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.hero-dot[aria-current="true"]::after { opacity: 1; background: var(--ink); }
.hero-dot:hover::after                { opacity: 0.75; }

.hero-pause {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-left: 0.2rem;
}
.hero-pause svg { display: block; }

.hero-note {
  position: absolute;
  bottom: var(--space-2);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Someone who has asked their device to reduce motion gets no fade at all — the
   photographs simply swap. The setting exists because movement on screen
   triggers nausea and migraines for some people. The script also stops the
   slideshow advancing on its own for them. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}


/* --------------------------------------------------------------------------
   9. GRIDS
   CSS Grid arranges items in rows and columns. repeat(auto-fit, minmax(X, 1fr))
   means: fit as many columns as will hold at least X wide, then share the
   leftover space equally. That single line is what makes these blocks reflow
   from three columns on a laptop down to one on a phone, with no extra rules.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-3);
}

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* The portfolio grid — slightly tighter gaps so the photos read as a set. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
}

.card h3 { margin-block: var(--space-2) var(--space-1); }
.card p  { color: var(--muted); font-size: 0.95rem; }

/* A card that is also a link to a gallery. */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-link .photo-slot { transition: opacity 0.25s ease; }
.card-link:hover .photo-slot { opacity: 0.82; }
.card-link h3 { text-decoration: underline; text-decoration-color: var(--line); }

/* Side-by-side text and image, used on the About block. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  align-items: center;
}


/* --------------------------------------------------------------------------
   10. PRICING TABLE
   -------------------------------------------------------------------------- */

.package {
  border: 1px solid var(--line);
  background: #fff;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
}

.package--featured {
  border-color: var(--ink);
  border-width: 2px;
}

.package .price {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-size: 2.5rem;
  margin-block: var(--space-2);
}
.package .price small {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.package ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
}
.package li {
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.package li:last-child { border-bottom: 0; }

.package .btn { margin-top: auto; text-align: center; }

.tag {
  align-self: flex-start;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bone);
  padding: 0.3rem 0.6rem;
  margin-bottom: var(--space-2);
}


/* --------------------------------------------------------------------------
   11. FORM
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
}

.field { display: grid; gap: var(--space-1); }

.field label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.field textarea { min-height: 10rem; resize: vertical; }

/* A <legend> is the heading of a group of related fields. It is styled to match
   the ordinary labels so the group reads as part of the same form. */
.field-legend {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}

/* The message shown when the form is pressed before it has been connected. */
.form-fallback {
  border: 1px solid var(--ink);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
.form-fallback strong { display: block; margin-bottom: 0.3rem; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.form-note { font-size: 0.85rem; color: var(--muted); }


/* --------------------------------------------------------------------------
   12. PLACEHOLDER WARNING BOX
   Deliberately ugly so it cannot be missed. Every one of these must be gone
   before the site goes live.
   -------------------------------------------------------------------------- */

.todo {
  background: #FFF6D6;
  border: 1px dashed #C9A227;
  color: #6B5310;
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  margin-block: var(--space-3);
}
.todo strong { letter-spacing: 0.04em; }


/* --------------------------------------------------------------------------
   12b. TICKED LISTS, PROPS AND LOCATIONS
   -------------------------------------------------------------------------- */

/* A list where every item is ticked — used for what a session includes. */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.ticks li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;   /* a column for the tick, one for the text */
  gap: 0.6rem;
  align-items: start;
}
.ticks li::before {
  content: "✓";
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.section--dark .ticks li::before { color: #C3B49B; }

/* The prop chips on the seniors page. */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0; list-style: none; }
.chips li {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}
.section--dark .chips li { background: var(--dark-2); border-color: #4A463D; }

/* ---- The prop picker ----------------------------------------------------
   Tick-boxes that look like the chips above them. The real checkbox is made
   invisible but is NOT removed from the page — `display: none` would take it
   out of the keyboard's reach entirely, so somebody tabbing through could never
   select a prop. Instead it is made zero-sized and see-through, which keeps it
   focusable, and the <span> next to it is what you actually see.
   -------------------------------------------------------------------------- */

.chips--pick label { display: block; cursor: pointer; }

.chips--pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The default is the light version, used on ordinary pages. */
.chips--pick span {
  display: block;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* The `+` means "the span immediately after a checked checkbox". */
.chips--pick input:checked + span {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}

/* Because the checkbox itself is invisible, the focus ring has to be drawn on
   the span instead — otherwise a keyboard user cannot see where they are. */
.chips--pick input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Inside a dark section the whole thing inverts. */
.section--dark .chips--pick span {
  border-color: #4A463D;
  background: var(--dark-2);
  color: var(--bone);
}
.section--dark .chips--pick input:checked + span {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.section--dark .chips--pick input:focus-visible + span {
  outline-color: var(--bone);
}

.pick-count { margin-block: var(--space-3) var(--space-2); font-size: 0.9rem; }

/* A note on the contact page confirming what was carried across. */
.carried {
  border-left: 2px solid var(--ink);
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  background: var(--ground);
}

/* A fact stated large — turnaround time, number of images, and so on. */
.stat { display: grid; gap: 0.2rem; }
.stat b {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
}
.stat span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--dark .stat span { color: #B4ADA2; }


/* --------------------------------------------------------------------------
   12d. THE PORTFOLIO FILTER

   A row of buttons above the portfolio grid. Visually close to the jump bar on
   the seniors page, deliberately — they do different jobs but a visitor should
   recognise the shape and know it is something to press.
   -------------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}

.filter-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* On a phone the buttons run wider than the screen, so this strip scrolls
   sideways on its own rather than making the whole page scroll. */
.filter-buttons {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block: 2px;          /* room for the focus ring, which would clip */
}

.filter-btn {
  flex: 0 0 auto;
  min-height: 44px;            /* a finger needs this much */
  padding-inline: 1rem;
  font-family: "Archivo", sans-serif;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.filter-btn:hover { color: var(--ink); border-color: var(--ink); }

.filter-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* The one currently on. Filled rather than outlined, because a pressed button
   needs to differ by more than a slightly darker border — that alone is too
   subtle, and it disappears entirely for anyone who cannot distinguish the two
   greys. */
.filter-btn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.filter-count { font-size: 0.85rem; margin-bottom: 1.5rem; }

.filter-empty { padding-block: 3rem; text-align: center; }

/* A button that has to read as a link, inside the "nothing here yet" message. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   12a. THE JUMP BAR

   A row of links to sections further down a long page. It sticks to the top as
   you scroll, so the way out of a twenty-screen page is always one tap away.

   `position: sticky` means: behave normally until you reach the top of the
   screen, then stay there. It is one line of CSS and needs no JavaScript.
   -------------------------------------------------------------------------- */

.jumpbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bone);
  border-block: 1px solid var(--line);
  padding-block: 0.5rem;
  /* On a phone the links run wider than the screen, so the bar scrolls
     sideways on its own rather than making the whole page do it. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.jumpbar .chips {
  flex-wrap: nowrap;
  margin: 0;
  width: max-content;
  min-width: 100%;
}

.jumpbar .chips li { flex: 0 0 auto; }

.jumpbar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.jumpbar a:hover,
.jumpbar a:focus-visible { color: var(--ink); border-color: var(--ink); }

/* When a link sends you down the page, the browser puts that section exactly at
   the top of the screen — underneath the sticky bar, which then covers it. This
   reserves space so the section lands below the bar instead.

   Measured, not guessed: the bar is 81 pixels tall on a phone, so this is set
   to 5.5rem (88 pixels) to clear it with a little room to spare. */
:target { scroll-margin-top: 5.5rem; }

/* Someone who has asked their device to reduce motion gets an instant jump
   rather than a long smooth scroll, which can cause nausea. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* --------------------------------------------------------------------------
   12c. SMALL ICONS BESIDE TEXT

   Used for the Instagram mark next to her profile links. Three things make an
   inline icon sit properly rather than looking dropped in:

   - `1em` sizes it to whatever text it sits beside, so it shrinks and grows
     with the surrounding type instead of being a fixed 16px everywhere.
   - `currentColor` on the stroke means it takes the colour of the text around
     it. The same icon then works on the pale page and inside a dark section
     without a second version.
   - the small negative `translateY` lifts it onto the text's optical centre.
     Letters sit on a baseline and a square does not, so an icon aligned by the
     numbers looks a pixel or two low to the eye.
   -------------------------------------------------------------------------- */

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: middle;
  transform: translateY(-0.06em);
}

/* A link that is an icon plus a word. The gap keeps them from touching, and
   inline-flex stops the pair splitting across two lines. */
.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}


/* --------------------------------------------------------------------------
   12b. THINGS A FINGER HAS TO HIT

   A fingertip covers roughly nine millimetres of screen. The accepted minimum
   for anything tappable is 44 pixels square — below that, people miss, and a
   missed tap on a photographer's website is a phone call that never happened.

   These rules give real height to the controls that were too small, without
   changing how any of them look on a desktop with a mouse.
   -------------------------------------------------------------------------- */

/* The expanding questions in every FAQ. The whole line is the button, so it
   needs the height even though the text is one line tall. */
details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.4rem;
}

/* The little arrow browsers draw. Kept, because it is the only thing telling
   people the question opens — but given room so it does not crowd the text. */
details > summary::marker { font-size: 0.8em; }

details > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Phone number, email and Instagram in the contact sidebar. Each sits on its
   own line, so it can be given height without disturbing a sentence. */
.contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Sidebar headings. They are <h2> so the page outline does not skip a level,
   but they label short notes rather than sections, so they stay small. */
.aside-head {
  font-size: 1.05rem;
  margin-top: var(--space-3);
  margin-bottom: 0.4rem;
}


/* --------------------------------------------------------------------------
   12e. THE EVENT RENTALS PAGE

   The rentals side is a different business wearing the same surname, so it gets
   a different look — but not a second stylesheet. The theme class below
   redefines the colour tokens from section 1, and every component already on
   the site (buttons, cards, grids, photo slots) picks the new values up on
   its own.

   Two reasons that matters. A second stylesheet would double the work of every
   future change, and it would let the two halves drift apart until they stopped
   looking related. This way they can only ever differ by the handful of values
   named below.

   Where the photography side is warm ivory with silver, the rentals side is a
   clean off-white with royal blue — brighter than the photography half rather
   than darker, so the two read as relatives rather than opposites.
   -------------------------------------------------------------------------- */

.theme-rentals {
  --ground:  #F4F2ED;   /* behind the panel                                  */
  --bone:    #FCFBF8;   /* the panel the content sits on — cooler off-white  */
  --ink:     #141A28;   /* near-black with a blue bias, not a neutral grey   */
  --muted:   #5A6072;   /* 6.6:1 on the panel, against a 4.5 requirement     */
  --line:    #DEDCD5;
  --accent:  #1E3A8A;   /* royal blue, in place of silver                    */
  --dark:    #141E3C;   /* the deeper bands — navy, not near-black           */
  --dark-2:  #1C2949;

  /* Redefining --ink above is not enough on its own. body already said
     `color: var(--ink)`, and that was worked out against the photography
     palette before this element existed. Changing what --ink *means* here
     does not reach back and redo that sum: rules that call var(--ink) from
     this point down do pick up the new value, but an inherited colour that
     was already settled does not. So it has to be stated again. */
  color: var(--ink);
}

/* `main` already says `background: var(--bone)`. Because the theme class sits
   on that same element, that one line now resolves to the off-white panel,
   with nothing further to change. */

/* What follows is every place a rule written for the photography palette would
   fail on this one. Nearly all of it is the navy bands, and for one reason:
   royal blue is doing double duty here. It is a surface (the button fill) and
   it is also text (the stock badges, the step numerals, the fee amounts). A
   blue dark enough to read as text on off-white is too dark to be seen
   against navy — on that band it measures 1.6 to 1, where 4.5 is readable.
   So each of those uses needs a pale-blue counterpart for the dark bands. */

/* Royal blue is a dark surface, so the button's own text goes light — the
   reverse of what --ink now means. Measures 7.8:1.

   :not(.btn--outline) matters more than it looks. The secondary button carries
   both classes — class="btn btn--outline" — so a rule written as
   `.theme-rentals .btn` also hits it. That rule is two class names where
   `.btn--outline` is one, and the more specific selector wins, so the
   outlined button lost its own text colour and was painted in the primary
   button's instead: off-white lettering on the off-white panel, invisible.
   Excluding it here is what keeps the two buttons separate. */
.theme-rentals .btn:not(.btn--outline) { color: #FCFBF8; }

/* And its own two colours, stated rather than inherited. The site-wide edge
   is --line, a hairline meant for dividing rules, which measures 1.3:1 on this
   panel — an edge a person has to find wants 3:1, and the edge is the only
   thing that makes this read as a button at all. This one is 3.0. */
.theme-rentals .btn--outline {
  color: var(--muted);
  border-color: #8A90A4;
}

/* .section--dark prints its text in --bone, which here is the off-white — the
   right colour for a navy band. But the theme's own `color` line above would
   hand the band near-black text by inheritance first, so it is restated.

   Both forms are needed. A space between two class names means "inside", so
   `.theme-rentals .section--dark` only matches a dark section nested within
   the theme — which is the rentals page. On the home page the theme sits on
   one single band, so the two classes are on the SAME element, written with
   no space. Without that second selector the home page band renders its text
   in near-black on navy and the whole block goes unreadable. */
.theme-rentals .section--dark,
.theme-rentals.section--dark { color: #FCFBF8; }

/* Secondary text on the navy bands. The site-wide rule sets these to a warm
   grey chosen for a warm near-black; on navy that reads as dusty. Same
   lightness, cooled to match. 8.9:1. */
.theme-rentals .section--dark .eyebrow,
.theme-rentals .section--dark .lead,
.theme-rentals .section--dark .muted,
.theme-rentals .section--dark .steps p,
.theme-rentals.section--dark .eyebrow,
.theme-rentals.section--dark .lead,
.theme-rentals.section--dark .muted { color: #AEB8CF; }

/* The accent as text, on a dark band: swapped for a pale blue, which is the
   same hue read from the other end. 9.3:1. */
.theme-rentals .section--dark .stock,
.theme-rentals .section--dark .steps li::before,
.theme-rentals .section--dark .fee .amount,
.theme-rentals .section--dark .lockup small,
.theme-rentals.section--dark .lockup small { color: #A9BCEA; }

/* The accent as a surface, on a dark band. A royal blue button sitting on a
   navy band is 1.6:1 against the band behind it — the shape of the button
   disappears even though its text is fine. So on the dark bands the primary
   button inverts: off-white fill, navy text. */
.theme-rentals .section--dark .btn:not(.btn--outline),
.theme-rentals.section--dark .btn:not(.btn--outline) {
  background: #FCFBF8;
  border-color: #FCFBF8;
  color: #141E3C;
}
.theme-rentals .section--dark .btn:not(.btn--outline):hover,
.theme-rentals.section--dark .btn:not(.btn--outline):hover {
  background: #A9BCEA;
  border-color: #A9BCEA;
  color: #141E3C;
}

/* Edges on the navy bands. The site-wide outline is warm, and --line is far
   too bright to use as a hairline against navy. */
.theme-rentals .section--dark .btn--outline,
.theme-rentals.section--dark .btn--outline { border-color: #5C6780; }
.theme-rentals .section--dark .steps li::before { border-bottom-color: #35405E; }

/* The lockup draws its ring in currentColor, so on a navy band the ring and
   the name both need the light treatment. */
.theme-rentals .section--dark .lockup,
.theme-rentals.section--dark .lockup { color: #FCFBF8; }

/* The empty-photo boxes are drawn from two hard-coded greys picked for a dark
   page. Here they go very pale, so that a real photograph dropped in later is
   the strongest thing in the grid rather than the weakest. */
.theme-rentals .photo-slot {
  background: repeating-linear-gradient(45deg, #EDEBE4 0 12px, #E3E0D7 12px 24px);
}
.theme-rentals .photo-slot span { background: #FCFBF8; color: #5A6072; }


/* ---- The hero lockup ----------------------------------------------------
   The same oval as the header logo, enlarged, with the lower line changed.
   "Mad n Meb" is the parent name; the line under it says which half of the
   business you are looking at. */

.lockup {
  display: grid;
  place-content: center;
  flex: 0 0 auto;             /* see .brand — flex items shrink without this */
  width: 290px;
  height: 154px;
  margin-inline: auto;
  padding: 14px 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  text-align: center;
  color: var(--ink);
  line-height: 1;
}

.lockup .name {
  display: block;
  font-family: "Italiana", Georgia, serif;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  padding-left: 0.05em;
}

.lockup small {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 0.75rem;
  padding-left: 0.3em;
  color: var(--accent);       /* the one royal blue detail in the hero */
}


/* ---- How many of a thing there are --------------------------------------
   Sits under each item heading. Rental enquiries live or die on the number:
   "candelabras" tells somebody laying twelve tables nothing at all. */

/* Scoped to the theme so it outranks `.card p` in section 9, which sets every
   paragraph inside a card to --muted and would otherwise win: one class plus one
   element name beats a lone class name. */
.theme-rentals .stock {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  margin-bottom: var(--space-1);
}


/* ---- The numbered steps -------------------------------------------------
   A real <ol>, so the order is carried by the markup rather than by the styling
   alone. The browser's own numerals are switched off and redrawn in the
   accent colour. */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--space-2);
  align-items: start;
}

.steps li::before {
  content: counter(step);
  font-family: "Italiana", Georgia, serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.3rem;
}

.steps h3 { margin: 0 0 0.3rem; }
.steps p  { margin: 0; color: var(--muted); }


/* ---- The fee rows -------------------------------------------------------- */

.fee {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.fee:last-child { border-bottom: 0; }
.fee .amount {
  font-family: "Archivo", sans-serif;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
}


@media (max-width: 560px) {
  .lockup { width: 236px; height: 126px; padding: 10px 16px; }
  .lockup .name  { font-size: 1.9rem; }
  .lockup small  { font-size: 0.58rem; margin-top: 0.6rem; }
}


/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--dark);
  color: #B4ADA2;
  padding-block: var(--space-5) var(--space-3);
  font-size: 0.9rem;
}

.site-footer a { color: var(--bone); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* These are <h2> rather than <h4>. The footer is its own section of the page,
   so its headings sit at the top level — and jumping from an <h2> in the page
   straight to an <h4> in the footer made the outline that screen readers read
   aloud skip a level, like a book going from chapter to sub-sub-section.
   They are still styled small; the tag is about structure, not size. */
.footer-grid h2 {
  font-family: "Archivo", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: var(--space-2);
}

.footer-grid ul { display: grid; gap: 0.4rem; }

.footer-bottom {
  border-top: 1px solid #423E37;
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: 0.8rem;
}


/* --------------------------------------------------------------------------
   14. NARROW SCREENS
   A "media query" applies the rules inside it only when the condition is true.
   Here: only when the screen is 760px wide or less, i.e. phones and small
   tablets. Most local visitors will arrive on a phone, so this matters.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

  :root {
    --space-5: 3rem;
    --space-6: 3.5rem;
  }

  .nav-toggle { display: block; }

  /* Hidden by default on a phone; the button toggles the .is-open class. */
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .nav.is-open { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav a,
  .nav-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line);
  }

  /* On a phone the dropdown is not a floating panel — there is nowhere for it
     to float to. It becomes an indented list that pushes the rest of the menu
     down, which is how every phone menu behaves and therefore needs no
     explaining. */
  .nav-menu {
    position: static;
    min-width: 0;
    border: 0;
    padding: 0;
    background: var(--ground);
  }
  .nav-menu a {
    padding: 0.8rem 0 0.8rem 1.25rem;
    font-size: 0.82rem;
  }
  .nav-menu a:hover { background: none; }

  /* Both of these are written `.nav a.nav-…` rather than `.nav-…` on purpose.
     A few rules above, `.nav a` spreads each row's contents apart with
     space-between — and `.nav a` is a class plus an element name, which
     outranks a class on its own. Written the short way these two lose, and
     silently: the booking button's text stays jammed left, and the rentals
     pill throws its dot against the far edge with the word at the other end. */
  .nav a.nav-cta {
    justify-content: center;
    margin-top: var(--space-2);
    border-bottom: 1px solid var(--ink) !important;
    /* The "Book a session" button. It inherits the small padding of a desktop
       button, which left it 41px tall in the phone menu — under the 44px a
       thumb needs, and it is the most important link on the site. */
    min-height: 48px;
    align-items: center;
  }

  /* Same treatment for the rentals pill: in the phone menu every row is full
     width, and it needs the same 48px a thumb does. */
  .nav a.nav-alt {
    justify-content: center;
    min-height: 48px;
    align-items: center;
  }

  .site-header .container { position: relative; }

  .hero-inner { padding: var(--space-3) var(--space-2); }

  /* Touch targets. A footer link is only as tall as its own text — about 17px —
     which is genuinely hard to hit with a thumb, and the phone number is the
     most-tapped link on the whole site. Apple and Google both recommend roughly
     44px. Padding adds the height without changing how the link looks; the gap
     on the list is removed so the spacing stays the same as before. */
  .footer-grid ul { gap: 0; }
  .footer-grid a {
    display: inline-block;
    padding-block: 0.8rem;
  }

  /* Any link that dials a phone number, wherever it appears. On a phone this is
     the single most-tapped thing on the site, and at the height of its own text
     it is only 21px — half what a thumb needs. */
  a[href^="tel:"] {
    display: inline-block;
    padding-block: 0.7rem;
  }

  /* The slideshow dots. 28px is comfortable with a mouse and awkward with a
     thumb, and there are six of them in a row — the exact case the 44px
     guidance exists for. The visible dot stays the same size; only the
     invisible area around it grows. Six at 44px plus the gaps still fits
     across a 375px screen with room to spare. */
  .hero-dot,
  .hero-pause {
    width: 44px;
    height: 44px;
  }

  /* On a phone, stacked buttons read better full-width than centred and ragged. */
  .btn-group .btn { width: 100%; text-align: center; }

  .footer-bottom { flex-direction: column; }
}


/* Respect the setting some people turn on to reduce motion on screen. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}