/* =========================================================================
   Amber's Paws & Pastures
   Colours sampled from the supplied artwork; do not invent new ones.
   Single light theme by design — the brand is a cream and olive world.
   ========================================================================= */

:root{
  /* brand */
  --cream:      #FDF8ED;
  --cream-warm: #F7F0DE;
  --cream-deep: #F1E8D1;
  --olive:      #474E29;
  --olive-deep: #525B2F;
  --olive-mid:  #6B7742;
  --sage:       #8A9A6B;
  --sage-pale:  #C3CDAC;
  --brown:      #3C2612;
  --brown-mid:  #6B563F;
  --brown-pale: #917D64;
  --white:      #FFFDF8;

  /* roles */
  --bg:         var(--cream);
  --bg-alt:     var(--cream-warm);
  --surface:    var(--white);
  --ink:        var(--brown);
  --ink-soft:   var(--brown-mid);
  --ink-faint:  var(--brown-pale);
  --accent:     var(--olive);
  --line:       #E2D8C0;
  --line-soft:  #EDE5D2;
  --focus:      #8A5A12;
  --flag-bg:    #FBEFD9;
  --flag-ink:   #8A5A12;
  --flag-line:  #E3C489;

  /* type */
  --f-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --f-body:    "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-script:  "Yellowtail", "Brush Script MT", cursive;

  /* spacing */
  --gutter: clamp(1.125rem, 4vw, 2rem);
  --section: clamp(3.25rem, 8vw, 6rem);
  --measure: 62ch;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 4px rgba(60,38,18,.05), 0 8px 24px rgba(60,38,18,.07);
  --shadow-lift: 0 4px 10px rgba(60,38,18,.09), 0 16px 40px rgba(60,38,18,.11);

  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;      /* 17px — this audience is not 22 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden. Both stop sideways overflow, but "hidden" makes the
     body a scroll container, and every position:sticky on the site then
     sticks to the body's scrollport instead of the window - which means
     it silently never engages. "clip" does the same job without that. */
  overflow-x: clip;
}

h1, h2, h3, h4{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--ink);
}
h1{ font-size: clamp(2.125rem, 5.4vw, 3.4rem); letter-spacing: -.01em; }
h2{ font-size: clamp(1.625rem, 3.6vw, 2.35rem); }
h3{ font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h4{ font-size: 1.125rem; }

p, ul, ol{ margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child{ margin-bottom: 0; }
img{ max-width: 100%; height: auto; display: block; }
strong, b{ font-weight: 700; }

a{ color: var(--olive-deep); text-underline-offset: .18em; }
a:hover{ color: var(--ink); }

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

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--olive); color: var(--cream);
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus{ left: 0; }

/* ---------- layout ---------- */
.wrap{
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow{ max-width: 48rem; }

.section{ padding-block: var(--section); }
.section-alt{ background: var(--bg-alt); }
.section-head{ max-width: var(--measure); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head p{ color: var(--ink-soft); font-size: 1.125rem; margin-top: .7rem; }

.eyebrow{
  font-family: var(--f-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive-mid);
  margin: 0 0 .65rem;
}

/* ---------- buttons ---------- */
/* Buttons have a side to them rather than being tinted rectangles: a
   face with a little light across the top, sitting on a thin edge in the
   same hue. The edge is a box-shadow so it never touches layout, and it
   does the whole job on its own - a blurred drop shadow underneath as
   well just reads as a second, misaligned button. */
.btn{
  --btn-face: var(--olive);
  --btn-face-lit: #566031;          /* the top of the face catches light */
  --btn-edge: #2F3419;              /* the side, one step down in the same hue */
  --btn-ink:  var(--cream);
  --btn-ring: transparent;          /* ghosts draw their outline here */
  --btn-drop: 3px;

  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .8rem 1.4rem;
  min-height: 48px;                 /* thumb-sized, deliberately */
  border: 0;
  border-radius: 8px;
  background: linear-gradient(to bottom, var(--btn-face-lit), var(--btn-face));
  color: var(--btn-ink);
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  box-shadow:
    inset 0 0 0 1.5px var(--btn-ring),
    0 var(--btn-drop) 0 var(--btn-edge);
  transition: transform .12s cubic-bezier(.2,.7,.3,1),
              box-shadow .12s cubic-bezier(.2,.7,.3,1),
              background .16s ease, color .16s ease;
}
.btn:hover{ --btn-drop: 5px; transform: translateY(-2px); }
/* pressed: the face comes down onto its edge and the edge all but goes */
.btn:active{ --btn-drop: 1px; transform: translateY(2px); transition-duration: .05s; }

.btn-ghost{
  --btn-face: var(--cream);
  --btn-face-lit: var(--white);
  --btn-edge: var(--olive-mid);
  --btn-ink:  var(--olive-deep);
  --btn-ring: var(--olive-mid);
}
.btn-ghost:hover{
  --btn-face: var(--olive); --btn-face-lit: #566031;
  --btn-ink: var(--cream); --btn-edge: #2F3419; --btn-ring: transparent;
}

/* on the olive band the cream outline reads better than an olive one */
.cta-band .btn-ghost{
  --btn-face: transparent; --btn-face-lit: transparent;
  --btn-ink: var(--cream);
  --btn-ring: var(--sage-pale);
  --btn-edge: #2F3419;
}
.cta-band .btn-ghost:hover{
  --btn-face: var(--cream); --btn-face-lit: var(--white);
  --btn-ink: var(--olive); --btn-ring: transparent; --btn-edge: var(--olive-mid);
}

/* a bigger one, for the single button that is the point of the page */
.btn-lg{ font-size: 1.0625rem; padding: 1rem 1.9rem; min-height: 56px; --btn-drop: 4px; }
.btn-lg:hover{ --btn-drop: 6px; }
.btn-lg:active{ --btn-drop: 1px; }

@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{ transform: none; transition: background .16s ease; }
}

.btn-row{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* ---------- header ---------- */
.site-head{
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}
.head-in{
  display: flex; align-items: center; gap: 1rem;
  padding-block: .85rem;
}
.wordmark{
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit; min-width: 0;
}
.wordmark img{ width: 48px; height: 48px; flex: none; }
.wordmark-text{ display: flex; flex-direction: column; min-width: 0; }
.wordmark-name{
  font-family: var(--f-script);
  /* nowrap below, so this has to be small enough to fit rather than
     relying on the line breaking */
  font-size: clamp(1.05rem, 4.2vw, 1.75rem);
  line-height: 1.05;
  color: var(--olive);
  white-space: nowrap;
}
.wordmark-sub{
  font-family: var(--f-display);
  font-style: italic;
  font-size: .8125rem;
  color: var(--ink-faint);
  margin-top: .15rem;
  white-space: nowrap;
}
@media (max-width: 26em){
  .wordmark-sub{ display: none; }
}

/* The name does not wrap - it is a script face and breaking "Amber's
   Paws & Pastures" across two lines looks like a mistake - so on a
   narrow screen it overflowed its box and painted straight over the
   menu button. The room comes from around it instead: a smaller mark,
   a tighter gap, and the button reduced to its bars. The word Menu is
   still there for a screen reader. */
@media (max-width: 30em){
  .wordmark{ gap: .55rem; }
  .wordmark img{ width: 40px; height: 40px; }
  .nav-toggle{ gap: 0; padding: .6rem .7rem; }
  .nav-toggle-label{
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

.nav-toggle{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .55rem;
  background: transparent; border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .6rem .85rem; min-height: 46px;
  font-family: var(--f-body); font-size: .95rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.nav-toggle-bars{ display: grid; gap: 4px; }
.nav-toggle-bars i{
  display: block; width: 20px; height: 2px;
  background: var(--olive); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.nav{ display: none; }
.nav ul{ list-style: none; margin: 0; padding: 0; }
/* :not(.nav-cta) throughout, because the button is an <a> in here too
   and .nav a outranks .btn - it was taking the button's display, colour
   and padding, which left the label brown, hard against the left edge
   and not centred at all. */
.nav a:not(.nav-cta){
  display: block;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  padding: .8rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.nav a:not(.nav-cta):hover{ color: var(--olive-deep); }
.nav a:not(.nav-cta)[aria-current="page"]{ color: var(--olive-deep); }

.nav.is-open{
  display: block;
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: .5rem var(--gutter) 1.5rem;
}
.nav.is-open .nav-cta{ margin-top: 1.1rem; width: 100%; }

@media (min-width: 80em) and (max-width: 88em){
  /* at the tight end of the wide layout the strapline is the first
     thing to go - the name alone still identifies the business */
  .wordmark-sub{ display: none; }
}
@media (min-width: 80em){
  .nav-toggle{ display: none; }
  .nav{
    display: flex; align-items: center; gap: 1.75rem;
    margin-left: auto;
  }
  /* The gap gives way before the bar does. Seven links, a wordmark and
     a button is a lot to fit at 80em, and body has overflow-x: clip, so
     anything that does not fit is silently cut off rather than showing
     up as a scrollbar - it has to fit by construction. */
  .nav ul{
    display: flex; align-items: center;
    gap: clamp(.6rem, 1.4vw, 1.4rem);
    /* body has overflow-x: clip, so anything that does not fit is cut
       off silently rather than showing a scrollbar. Wrapping to a
       second line is ugly; a link disappearing is worse. */
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .nav a:not(.nav-cta){
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
    font-size: 1rem;
  }
  .nav a:not(.nav-cta):hover,
  .nav a:not(.nav-cta)[aria-current="page"]{ border-bottom-color: var(--sage); }
  /* Compact in the header. It is the same button, but a bar with seven
     links beside it has no room for page-CTA padding - at full size the
     nav runs past the edge of the window. */
  .nav .nav-cta{
    padding: .5rem 1rem;
    min-height: 0;
    font-size: .9375rem;
    --btn-drop: 3px;
  }
  .nav .nav-cta:hover{ --btn-drop: 4px; }
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  background: var(--cream);
  overflow: hidden;
}
.hero-art{
  width: 100%; height: auto; display: block;
  object-fit: cover;
}
.hero-in{
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem);
}
.hero h1{ max-width: 16ch; }

/* --- the hero line types itself ----------------------------------- */
/* Built by JS, so with no script the h1 is an ordinary heading with the
   whole line in it. Each character gets its own span and is hidden with
   visibility rather than display: a hidden character still takes up its
   space, so the heading is its finished size and shape from the first
   frame and nothing on the page moves while the line arrives. */
.hero h1.type{
  /* deterministic wrapping: balance re-breaks the line as characters
     appear, which reads as the heading twitching */
  text-wrap: wrap;
}
.hero h1.type .ch{
  position: relative;
  visibility: hidden;
}
.hero h1.type .ch.on{ visibility: visible; }

/* the caret hangs off the last letter showing, and is absolutely
   positioned so that it too costs the layout nothing */
.hero h1.type .ch.caret::after{
  content: "";
  position: absolute;
  top: .14em; right: -.12em;
  width: .07em; height: .76em;
  background: currentColor;
  opacity: .75;
  animation: caret-blink 1.05s steps(1, end) infinite;
}
.hero h1.type.done .ch.caret::after{ animation: caret-fade .5s ease forwards; }

@keyframes caret-blink{ 50%{ opacity: 0; } }
@keyframes caret-fade{ to{ opacity: 0; } }
.hero .lede{
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-top: 1.1rem;
}

/* On wide screens the artwork sits behind the text — it was drawn with
   the animals on the right and open cream on the left for exactly this. */
@media (min-width: 60em){
  .hero{ display: grid; }
  .hero-art{
    grid-area: 1/1;
    width: 100%;
    max-height: 30rem;
    object-fit: cover;
    object-position: right center;
  }
  .hero-in{
    grid-area: 1/1;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(3rem, 5vw, 5rem);
  }
  /* Between roughly 960px and 1200px the artwork is cropped from the left,
     which walks the animals in under the headline. This keeps the text on
     cream at every width instead of relying on where the crop lands. */
  .hero-in::before{
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
      to right,
      var(--cream) 0%,
      var(--cream) 30%,
      rgba(253, 248, 237, .92) 44%,
      rgba(253, 248, 237, 0) 64%);
    z-index: 0;
    pointer-events: none;
  }
  .hero-copy{ position: relative; z-index: 1; max-width: 34rem; }
}
@media (max-width: 59.99em){
  .hero-art{ max-height: 14rem; object-position: right center; }
  .hero-in{ padding-bottom: clamp(2rem, 6vw, 3rem); }
}

/* ---------- trust strip ---------- */
/* Four claims that are the reason somebody hands over their keys and an
   animal they love. They are not a footnote, so the band is the loudest
   quiet thing on the page and it ticks itself off in front of you: each
   item stamps a ring, draws a tick inside it, and settles.

   All of it is opt-in behind [data-motion="on"], the flag JS sets only
   when reduced motion has not been asked for. Without it every item is
   simply here, already ticked. */
.trust{
  background: var(--olive);
  color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
              inset 0 -1px 0 rgba(0,0,0,.14);
}
.trust ul{
  list-style: none; margin: 0;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .85rem clamp(1.4rem, 4.5vw, 3.25rem);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}
.trust li{ display: flex; align-items: center; gap: .6rem; }

.trust .tick{ width: 30px; height: 30px; flex: none; overflow: visible; }
.trust .tick-ring{
  fill: none;
  stroke: var(--sage-pale);
  stroke-width: 1.7;
  opacity: .8;
  stroke-dasharray: 66;
  stroke-dashoffset: 0;            /* drawn, unless motion says otherwise */
}
.trust .tick-mark{
  fill: none;
  stroke: var(--cream);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 0;
}

/* --- the sequence ------------------------------------------------- */
/* Held back until the band is seen, then released in order. The timing
   lives here and nowhere else - JS only says when to start - so there
   is one place to change the pace rather than two that drift apart.
   Unhurried on purpose: the point is that somebody watches it happen. */
.trust li:nth-child(1){ --tick-delay: .40s; }
.trust li:nth-child(2){ --tick-delay: .70s; }
.trust li:nth-child(3){ --tick-delay: 1.00s; }
.trust li:nth-child(4){ --tick-delay: 1.30s; }

[data-motion="on"] .trust li{ opacity: 0; }
[data-motion="on"] .trust .tick-ring{ stroke-dashoffset: 66; }
[data-motion="on"] .trust .tick-mark{ stroke-dashoffset: 18; }

[data-motion="on"] .trust.ticking li{
  animation: trust-in .62s cubic-bezier(.2,.8,.3,1) var(--tick-delay, 0s) both;
}
[data-motion="on"] .trust.ticking .tick-ring{
  animation: ring-draw .62s ease-out var(--tick-delay, 0s) forwards;
}
/* the tick lands just after its own ring closes */
[data-motion="on"] .trust.ticking .tick-mark{
  animation: tick-draw .42s cubic-bezier(.3,.7,.3,1)
             calc(var(--tick-delay, 0s) + .34s) forwards;
}
/* and the whole mark gives a short nod as it lands */
[data-motion="on"] .trust.ticking .tick{
  animation: tick-pop .55s cubic-bezier(.2,.9,.3,1.5)
             calc(var(--tick-delay, 0s) + .34s) both;
}

/* The safety net. These four claims are the reason somebody hands over
   their keys, so they must never be invisible - and they are opacity:0
   until an animation reveals them, which means anything that stops that
   animation finishing would leave the band blank. A background tab
   freezes CSS animations at their first frame, and that is exactly what
   it looks like. So once the sequence has had its time, the animations
   come off and the finished state is simply declared. */
[data-motion="on"] .trust.ticked li,
[data-motion="on"] .trust.ticked .tick,
[data-motion="on"] .trust.ticked .tick-ring,
[data-motion="on"] .trust.ticked .tick-mark{ animation: none; }
[data-motion="on"] .trust.ticked li{ opacity: 1; transform: none; }
[data-motion="on"] .trust.ticked .tick-ring,
[data-motion="on"] .trust.ticked .tick-mark{ stroke-dashoffset: 0; }

@keyframes trust-in{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}
@keyframes ring-draw{ to{ stroke-dashoffset: 0; } }
@keyframes tick-draw{ to{ stroke-dashoffset: 0; } }
@keyframes tick-pop{
  0%  { transform: scale(.8); }
  55% { transform: scale(1.14); }
  100%{ transform: scale(1); }
}

/* ---------- service cards ---------- */
.pillars{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.pillar{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pillar:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pillar img{
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  background: var(--cream-warm);
  max-width: 100%;
}
.pillar-body{ padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pillar h3{ margin-bottom: .5rem; }
.pillar p{ color: var(--ink-soft); font-size: 1rem; }
.pillar .more{
  margin-top: auto; padding-top: 1rem;
  font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.pillar .more::after{ content: "\2192"; transition: transform .16s ease; }
.pillar:hover .more::after{ transform: translateX(3px); }

/* secondary services — text only, no invented artwork */
.more-services{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.more-services a{
  background: var(--surface);
  padding: 1.15rem 1.3rem;
  text-decoration: none;
  display: flex; flex-direction: column; gap: .3rem;
  transition: background .16s ease;
}
.more-services a:hover{ background: var(--cream-warm); }
.more-services strong{ font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.more-services span{ font-size: .95rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- reasons list ---------- */
.reasons{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.reasons li{ border-top: 2px solid var(--sage); padding-top: 1rem; }
.reasons h3{ font-size: 1.2rem; margin-bottom: .4rem; }
.reasons p{ color: var(--ink-soft); font-size: 1rem; margin: 0; }

/* ---------- numbered steps ---------- */
.steps{
  list-style: none; counter-reset: step; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.steps li{ counter-increment: step; position: relative; padding-top: 3.4rem; }
.steps li::before{
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: var(--olive); color: var(--cream);
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 600;
  border-radius: 50%;
}
.steps h3{ font-size: 1.2rem; margin-bottom: .4rem; }
.steps p{ color: var(--ink-soft); font-size: 1rem; margin: 0; }

/* ---------- prose (service page bodies) ---------- */
.prose{ max-width: var(--measure); }
.prose h2{ margin-top: 2.4em; margin-bottom: .55em; }
.prose h2:first-child{ margin-top: 0; }
.prose h3{ margin-top: 1.8em; margin-bottom: .4em; }
.prose p{ font-size: 1.0625rem; }
.prose ul, .prose ol{ padding-left: 1.3rem; }
.prose li{ margin-bottom: .55rem; }
.prose li::marker{ color: var(--sage); }
.prose .lede{
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 1.6em;
}

/* pull-out box for the reassuring bits */
.aside-note{
  background: var(--cream-warm);
  border-left: 4px solid var(--sage);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.25rem 1.4rem;
  margin-block: 1.8em;
}
.aside-note h3{ margin: 0 0 .45rem; font-size: 1.15rem; }
.aside-note p{ margin: 0; color: var(--ink-soft); }

/* two-column page shell for service pages */
.page-head{ padding-block: clamp(2.25rem, 5vw, 3.5rem) 0; }
.page-head .eyebrow a{ color: inherit; }
.layout-sidebar{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 64em){
  .layout-sidebar{ grid-template-columns: minmax(0, 1fr) 19rem; }
  .sidebar{ position: sticky; top: 2rem; }
}
.sidebar-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.45rem;
}
.sidebar-card + .sidebar-card{ margin-top: 1.25rem; }
.sidebar-card h2{ font-size: 1.25rem; margin-bottom: .7rem; }
.sidebar-card ul{ list-style: none; padding: 0; margin: 0; }
.sidebar-card li + li{ border-top: 1px solid var(--line-soft); }
.sidebar-card li a{ display: block; padding: .6rem 0; text-decoration: none; font-weight: 600; }
.sidebar-card li a[aria-current="page"]{ color: var(--ink); }
.sidebar-card p{ font-size: .98rem; color: var(--ink-soft); }

/* ---------- prices table ---------- */
.table-scroll{ overflow-x: auto; margin-block: 1.5rem; }
table.prices{
  width: 100%; border-collapse: collapse;
  font-size: 1.0625rem;
  min-width: 30rem;
}
table.prices caption{
  text-align: left; color: var(--ink-faint);
  font-size: .95rem; padding-bottom: .7rem;
}
table.prices th, table.prices td{
  text-align: left;
  padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.prices thead th{
  font-family: var(--f-body);
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
  border-bottom-width: 2px;
}
table.prices td:last-child, table.prices th:last-child{
  text-align: right; padding-right: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 600;
}
table.prices tbody tr:hover{ background: var(--cream-warm); }

/* ---------- areas ---------- */
.area-tier{ margin-bottom: 2rem; }
.area-tier h3{ margin-bottom: .5rem; }
.area-list{
  list-style: none; padding: 0; margin: .6rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.area-list li{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .95rem;
}

/* ---------- form ---------- */
.form{ max-width: 34rem; }
.field{ margin-bottom: 1.25rem; }
.field label{
  display: block; font-weight: 600; margin-bottom: .35rem;
}
.field .hint{ font-size: .9rem; color: var(--ink-faint); font-weight: 400; margin-top: .1rem; }
.field input, .field select, .field textarea{
  width: 100%;
  font-family: var(--f-body); font-size: 1.0625rem;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem .85rem;
  min-height: 50px;
}
.field textarea{ min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--sage); outline-offset: 1px;
}
.field-check{
  display: flex; gap: .7rem; align-items: flex-start;
  margin-bottom: 1.5rem;
}
.field-check input{
  width: 1.4rem; height: 1.4rem; min-height: 0;
  margin-top: .15rem; flex: none; accent-color: var(--olive);
}
.field-check label{ font-weight: 400; font-size: .98rem; color: var(--ink-soft); margin: 0; }
.required{ color: var(--focus); }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--olive);
  color: var(--cream);
  text-align: center;
}
.cta-band h2{ color: var(--cream); }
.cta-band p{
  color: var(--sage-pale);
  max-width: 44ch; margin-inline: auto; margin-top: .8rem;
  font-size: 1.125rem;
}
.cta-band .btn-row{ justify-content: center; }
/* On the olive band the solid button inverts - a cream face with olive
   on it. White on olive would be the wrong way round here: the band is
   already dark, so a dark button would barely separate from it.
   The ghost variant is handled up in the button block. */
.cta-band .btn-solid{
  --btn-face: var(--cream);
  --btn-face-lit: var(--white);
  --btn-ink: var(--olive);
  --btn-edge: #B5A98B;
}
.cta-band .btn-solid:hover{ --btn-ink: var(--brown); }

/* ---------- footer ---------- */
.site-foot{ background: var(--cream-deep); margin-top: 0; }
.foot-scene{
  width: 100%; height: clamp(6rem, 14vw, 11rem);
  object-fit: cover; object-position: center bottom;
  display: block;
}
.foot-in{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.foot-brand img{ width: 72px; height: 72px; }
.foot-name{
  font-family: var(--f-script);
  font-size: 1.5rem; color: var(--olive);
  margin: .6rem 0 .1rem; line-height: 1.1;
}
.foot-tag{ font-family: var(--f-display); font-style: italic; color: var(--ink-faint); font-size: .95rem; }
.foot-col h2{
  font-family: var(--f-body);
  font-size: .8125rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
  margin-bottom: .85rem;
}
.foot-col ul{ list-style: none; padding: 0; margin: 0; }
.foot-col li{ margin-bottom: .5rem; }
.foot-col a{ text-decoration: none; font-weight: 500; }
.foot-col a:hover{ text-decoration: underline; }
.foot-contact a{ font-weight: 600; }
.foot-trust{
  margin-top: 1rem; font-size: .9rem; color: var(--ink-faint); line-height: 1.5;
}
.foot-base{
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  padding-block: 1.1rem;
  font-size: .9rem; color: var(--ink-faint);
}
.foot-base p{ margin: 0; }
.foot-base ul{ list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.foot-base a{ color: var(--ink-faint); }

/* ---------- meet the family ---------- */
.family{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-block: 1.75rem;
}
.family-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.family-card .photo-slot{
  border: none;
  border-bottom: 1px dashed var(--flag-line);
  border-radius: 0;
  padding: 1rem;
}
.family-card .photo-slot figcaption{ font-size: .82rem; }
.family-body{ padding: .9rem 1rem 1.1rem; }
.family-name{
  font-family: var(--f-display);
  font-size: 1.3rem; font-weight: 600; line-height: 1.15;
}
/* No species label. "DOG" in small caps under a photograph of a dog was
   the loudest thing on the card and the least use; the species is still
   in the alt text, where it earns its place. */
.family-line{
  font-size: .95rem; line-height: 1.5;
  color: var(--ink-soft); margin-top: .5rem;
}

/* ---------- walk scrapbook ----------
   A scrapbook page, not a photo grid. Aged paper underneath, photographs
   at three different sizes so the eye does not read a grid, half of them
   taped and half pinned, each at its own angle. The angles and sizes are
   assigned at build time so the page is stable between deploys. */
.scrapbook{
  position: relative;
  background-color: #E9DEC4;
  background-image:
    /* paper fibre */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    /* light falling across the page */
    radial-gradient(ellipse at 24% 8%, rgba(255,252,242,.85), transparent 58%),
    radial-gradient(ellipse at 88% 92%, rgba(120,96,58,.13), transparent 52%);
  border-block: 1px solid rgba(96,74,44,.22);
  box-shadow: inset 0 14px 26px -18px rgba(76,56,30,.55),
              inset 0 -14px 26px -18px rgba(76,56,30,.55);
  padding-block: clamp(2.75rem, 7vw, 5rem);
}

.scrap-board{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  grid-auto-flow: dense;
  gap: clamp(1.4rem, 3.5vw, 2.6rem) clamp(.9rem, 2.5vw, 1.8rem);
  align-items: start;
}
@media (min-width: 40em){
  /* narrower tracks so three or four photographs sit across the page
     rather than two enormous ones */
  .scrap-board{ grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
}

.polaroid{
  --tilt: 0deg;
  position: relative;
  margin: 0;
  grid-column: span 2;
  background:
    linear-gradient(160deg, #FFFEFA 0%, #FCF8EE 58%, #F4EEDF 100%);
  padding: .5rem .5rem 0;
  border-radius: 1px;
  box-shadow:
    0 1px 1px rgba(60,38,18,.16),
    0 10px 20px -8px rgba(60,38,18,.34),
    0 22px 34px -22px rgba(60,38,18,.42);
  transform: rotate(var(--tilt));
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease;
  cursor: zoom-in;
}
.polaroid.big{ grid-column: span 3; }
.polaroid.sml{ grid-column: span 2; }

/* the horse album keeps each picture's own shape rather than squaring it */
.polaroid.tall img{ aspect-ratio: 3 / 4; }
.polaroid.wide img{ aspect-ratio: 4 / 3; }
.polaroid.sq   img{ aspect-ratio: 1; }
.polaroid.tall{ grid-column: span 2; }
.polaroid.wide{ grid-column: span 3; }
.polaroid.sq  { grid-column: span 2; }
@media (min-width: 40em){
  .polaroid{ grid-column: span 3; }
  .polaroid.big{ grid-column: span 4; }
  .polaroid.sml{ grid-column: span 2; }
  .polaroid.tall{ grid-column: span 3; }
  .polaroid.wide{ grid-column: span 4; }
  .polaroid.sq  { grid-column: span 3; }
}
.polaroid:hover,
.polaroid:focus-visible{
  transform: rotate(0deg) translateY(-7px) scale(1.035);
  box-shadow:
    0 2px 3px rgba(60,38,18,.18),
    0 18px 32px -10px rgba(60,38,18,.40),
    0 40px 56px -30px rgba(60,38,18,.45);
  z-index: 4;
}
.polaroid img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--cream-warm);
  /* photographs age a shade warmer than the paper they sit on */
  filter: saturate(.96) contrast(1.02);
}
.polaroid figcaption{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #5A4326;
  text-align: center;
  min-height: 2.5rem;
  padding: .4rem .3rem .55rem;
  overflow-wrap: anywhere;
}
.polaroid figcaption.blank{ min-height: 2.1rem; }

/* masking tape, two corners, each a slightly different angle */
.polaroid[data-mount="tape"]::before,
.polaroid[data-mount="tape"]::after{
  content: "";
  position: absolute;
  width: 3.4rem; height: 1.15rem;
  background:
    linear-gradient(105deg, rgba(228,217,186,.72), rgba(214,201,166,.86));
  box-shadow: 0 1px 2px rgba(60,38,18,.22);
  z-index: 3;
  /* torn ends */
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.polaroid[data-mount="tape"]::before{
  top: -.5rem; left: -1rem; transform: rotate(-41deg);
}
.polaroid[data-mount="tape"]::after{
  bottom: 1.1rem; right: -1.05rem; transform: rotate(-38deg);
}

/* drawing pin, for the ones that are not taped */
.pin{ display: none; }
.polaroid[data-mount="pin"] .pin{
  display: block;
  position: absolute;
  top: -.55rem; left: 50%;
  width: .9rem; height: .9rem;
  margin-left: -.45rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #9FAE7C, var(--olive) 62%, #33391C 100%);
  box-shadow: 0 3px 4px rgba(60,38,18,.45), 0 0 0 1px rgba(60,38,18,.18);
  z-index: 4;
}
.polaroid[data-mount="pin"] .pin::after{
  content: "";
  position: absolute; top: 20%; left: 24%;
  width: .24rem; height: .24rem;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
}

/* the taster on the dog walking page: a handful, evenly sized, so it reads
   as a glimpse of the album rather than a second album */
.scrap-board.teaser{
  grid-template-columns: repeat(2, 1fr);
  max-width: 54rem;
  margin-inline: auto;
}
@media (min-width: 44em){
  .scrap-board.teaser{ grid-template-columns: repeat(4, 1fr); }
}
.scrap-board.teaser .polaroid,
.scrap-board.teaser .polaroid.big,
.scrap-board.teaser .polaroid.sml{ grid-column: span 1; }

.scrap-more{
  text-align: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.scrap-more .btn{
  background: rgba(255,253,248,.72);
  border-color: rgba(76,56,30,.35);
  color: #4A3A22;
}
.scrap-more .btn:hover{
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}

.scrap-empty{
  max-width: 46ch; margin-inline: auto; text-align: center;
  color: var(--ink-soft); font-size: 1.0625rem;
}

/* ---------- horse gallery ----------
   Deliberately not the scrapbook. This page has to say she is competent
   on a yard, so the photographs are shown straight: no tape, no tilt,
   and no square crop, because these run portrait to landscape and
   squaring them loses the horse. */
.shots{
  columns: 1;
  column-gap: clamp(.9rem, 2.5vw, 1.4rem);
}
@media (min-width: 40em){ .shots{ columns: 2; } }
@media (min-width: 60em){ .shots{ columns: 3; } }
.shot{
  margin: 0 0 clamp(.9rem, 2.5vw, 1.4rem);
  break-inside: avoid;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream-warm);
  box-shadow: 0 1px 2px rgba(60,38,18,.10), 0 8px 18px -10px rgba(60,38,18,.30);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.shot:hover,
.shot:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(60,38,18,.14), 0 16px 30px -12px rgba(60,38,18,.38);
}
.shot img{ width: 100%; height: auto; display: block; }

/* ---------- the weather in Newton Abbot ----------
   A band, not a footnote. The sky behind it is whatever the sky over her
   town is doing, and the same landscape that runs through the day strip
   sits along the bottom of it. */
.now{
  --sky-a: #E8EDE4;
  --sky-b: #FDF8ED;
  --now-ink: var(--ink);
  --now-soft: var(--ink-soft);
  --now-horizon: var(--olive);
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-a), var(--sky-b));
  border-bottom: 1px solid var(--line);
  transition: background 1.2s ease;
}
.now[hidden]{ visibility: hidden; }
.now[data-failed]{ display: none; }

.now-in{
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding-block: clamp(1.5rem, 4vw, 2.4rem) clamp(3rem, 7vw, 4.5rem);
}
.now-left{ flex: 1 1 18rem; min-width: 0; }
.now-right{ text-align: right; flex: 0 0 auto; }

.now-eyebrow{
  font-family: var(--f-body);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--now-soft);
  margin: 0 0 .35rem;
}
.now-line{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  line-height: 1.25;
  color: var(--now-ink);
  margin: 0; max-width: 26ch;
  text-wrap: balance;
}
.now-temp{
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  line-height: .9; font-weight: 600;
  color: var(--now-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.now-at{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.15rem; color: var(--now-soft);
  margin: .2rem 0 0;
}

/* the skies */
.now[data-sky="clear"]{ --sky-a:#CFE0EA; --sky-b:#FBF6E9; --now-horizon:#4E5A33; }
.now[data-sky="cloud"]{ --sky-a:#D5D7D2; --sky-b:#F4F1E6; --now-horizon:#4A5130; }
.now[data-sky="rain"] { --sky-a:#AFB5B6; --sky-b:#DDDCD2; --now-horizon:#3B412A;
                        --now-ink:#2C3326; --now-soft:#5A6154; }
.now[data-sky="fog"]  { --sky-a:#D2D2CC; --sky-b:#E9E6DC; --now-horizon:#6E7360; }
.now[data-sky="snow"] { --sky-a:#DCE2E6; --sky-b:#F7F6F1; --now-horizon:#434A33; }
.now[data-sky="storm"]{ --sky-a:#7E8484; --sky-b:#BFBDB2; --now-horizon:#23281B;
                        --now-ink:#1E2318; --now-soft:#4A5043; }

.now-horizon{
  position: absolute; left: 0; right: -2%; bottom: -14px;
  width: 104%;
  will-change: transform;
  height: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--now-horizon);
  -webkit-mask: url("/img/horizon.webp") bottom center / cover no-repeat;
  mask: url("/img/horizon.webp") bottom center / cover no-repeat;
  opacity: .9; z-index: 1; pointer-events: none;
  transition: background 1.2s ease;
}

/* Rain is drawn on a canvas, because gradients are evenly spaced
   parallel lines and real rain is not. See main.js. */
.now-rain{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.now[data-sky="rain"] .now-rain,
.now[data-sky="storm"] .now-rain{ opacity: 1; }

/* the sky itself flares for a moment when it is a thunderstorm */
.now-flash{
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background: #fff; opacity: 0;
}

/* ---------- the hero takes today's light ----------
   Time of day sets the base; the weather deepens it. Light touch: it
   should read as the sky, never as a filter somebody left on. */
.hero::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: var(--hero-tint, transparent);
  mix-blend-mode: multiply;
  transition: background 1.2s ease;
  z-index: 1;
}
.hero-in{ z-index: 2; }
:root[data-daypart="dawn"]  { --hero-tint: rgba(190,183,176,.30); }
:root[data-daypart="day"]   { --hero-tint: transparent; }
:root[data-daypart="dusk"]  { --hero-tint: rgba(214,176,116,.26); }
:root[data-daypart="night"] { --hero-tint: rgba(46,54,40,.32); }
:root[data-sky="rain"]      { --hero-tint: rgba(120,131,132,.34); }
:root[data-sky="storm"]     { --hero-tint: rgba(78,86,86,.44); }
:root[data-sky="fog"]       { --hero-tint: rgba(196,196,188,.42); }
:root[data-sky="snow"]      { --hero-tint: rgba(198,210,216,.30); }
/* after dark the hour wins again, whatever the sky is doing */
:root[data-daypart="night"][data-sky]{ --hero-tint: rgba(46,54,40,.42); }

/* ---------- paper ----------
   The scrapbook sections sit on aged paper. A far fainter version of the
   same grain under everything ties the site to them, and takes the flat
   digital sheen off the cream. */
body{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)' opacity='.028'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* ---------- a day on the round ----------
   Five bands, dawn to night. Each carries its own sky and its own horizon,
   so scrolling the strip moves through the light of one day across the same
   landscape. The horizon is a single alpha silhouette recoloured per band
   with a mask, rather than five tinted copies of the same picture. */
.day{
  --sky-top: var(--cream);
  --sky-bottom: var(--cream-warm);
  --horizon: var(--sage);
  --band-ink: var(--ink);
  --band-soft: var(--ink-soft);
  --band-faint: var(--ink-faint);
  padding-block: clamp(3rem, 7vw, 5rem) 0;
  background: var(--cream);
}
.day-head{ max-width: 46rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.day-head p:last-child{ color: var(--ink-soft); font-size: 1.125rem; margin-top: .7rem; }

.day-track{ display: block; }

/* Stacked, when there is room for it. main.js measures the tallest band
   against the window and sets data-day-stack - pinned at top:0, a band
   taller than the window could never show its own bottom. Without JS,
   on a short window, or with reduced motion asked for, the strip stays
   an ordinary column and reads exactly the same. */
:root[data-day-stack="on"] .hour{
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-content: center;
}
/* the band coming over casts a shadow on the one it is covering, which
   is what sells it as one panel passing in front of another */
:root[data-day-stack="on"] .hour + .hour{
  box-shadow: 0 -22px 44px -24px rgba(20,14,6,.6);
}
/* the last one must not pin, or the section cannot be scrolled past */
:root[data-day-stack="on"] .hour:last-child{ position: relative; }

@media (prefers-reduced-motion: reduce){
  :root[data-day-stack="on"] .hour{ position: relative; min-height: 0; }
}

.hour{
  position: relative;
  --pass: 1;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  color: var(--band-ink);
  padding-block: clamp(2.75rem, 7vw, 4.5rem) clamp(4.5rem, 10vw, 7rem);
  overflow: hidden;
}

/* the light through the day, kept inside the brand rather than sunset orange */
.hour[data-time="dawn"]{
  --sky-top:#BDB6AE; --sky-bottom:#E6DBC7; --horizon:#4C4838;
}
.hour[data-time="morning"]{
  --sky-top:#E4E7D8; --sky-bottom:#F6F1E1; --horizon:#556034;
}
.hour[data-time="midday"]{
  --sky-top:#EDF1E7; --sky-bottom:#FDF8ED; --horizon:#5A6433;
}
.hour[data-time="dusk"]{
  --sky-top:#D8B77E; --sky-bottom:#EFD9AE; --horizon:#3F3A22;
}
.hour[data-time="night"]{
  --sky-top:#232A1F; --sky-bottom:#39402D; --horizon:#141810;
  --band-ink:#F2ECDC; --band-soft:#CFC6AE; --band-faint:#9C9480;
}

.hour-in{
  position: relative; z-index: 2;
  filter: brightness(calc(.97 + var(--pass, 1) * .03));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 52em){
  .hour-in{ grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
  /* alternate which side the photograph sits, so the strip has a rhythm */
  .hour:nth-child(even) .hour-copy{ order: 2; }
  .hour:nth-child(even) .hour-shot{ order: 1; }
}

.hour-clock{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1;
  color: var(--band-soft);
  margin: 0 0 .35rem;
}
.hour h3{
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  color: var(--band-ink);
  margin-bottom: .6rem;
}
.hour-body{
  color: var(--band-soft);
  font-size: 1.0625rem;
  max-width: 44ch;
  margin: 0;
}
.hour-link{
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: 700;
  color: var(--band-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--horizon);
  padding-bottom: 1px;
}
.hour-link::after{ content: " \2192"; }
.hour-link:hover{ border-bottom-color: var(--band-ink); }

.hour-shot{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(20,14,8,.16), 0 18px 34px -16px rgba(20,14,8,.42);
}
.hour-shot img{ width: 100%; height: auto; display: block; }

/* the land, same shapes in every band, lit differently */
.hour-horizon{
  position: absolute;
  left: -2%; right: -2%; bottom: -14px;
  width: 104%;
  will-change: transform;
  height: clamp(3.5rem, 9vw, 7rem);
  background: var(--horizon);
  -webkit-mask: url("/img/horizon.webp") bottom center / cover no-repeat;
  mask: url("/img/horizon.webp") bottom center / cover no-repeat;
  opacity: .92;
  z-index: 1;
  pointer-events: none;
}

/* Anything that should rise into place as it arrives. Opt-in in exactly
   the same way as the day bands: without the flag it is all simply here. */
[data-motion="on"] .rise{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--rise-delay, 0s);
}
[data-motion="on"] .rise.seen{ opacity: 1; transform: none; }

/* Motion is opt-in: the flag is only set by JS, and only when the visitor
   has not asked for reduced motion. Without it every band is simply here. */
[data-motion="on"] .hour .hour-copy,
[data-motion="on"] .hour .hour-shot{
  opacity: 0;
  transform: translateY(10px);
  /* short, and the observer fires before the band is on screen: a slow
     reveal plus a fast scroll leaves people looking at nothing */
  transition: opacity .42s ease, transform .42s cubic-bezier(.2,.7,.3,1);
}
[data-motion="on"] .hour.seen .hour-copy,
[data-motion="on"] .hour.seen .hour-shot{
  opacity: 1;
  transform: none;
}

/* ---------- lightbox ---------- */
/* display:grid below beats the hidden attribute's own display:none, so it
   has to be turned off explicitly or the lightbox is permanently open. */
.lightbox[hidden]{ display: none; }
.lightbox{
  position: fixed; inset: 0; z-index: 90;
  background: rgba(31,22,12,.88);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox figure{
  margin: 0; max-width: min(46rem, 92vw);
  background: #FFFDF8;
  padding: .75rem .75rem 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.lightbox img{
  width: 100%; max-height: 74vh; object-fit: contain;
  display: block; background: var(--cream-warm);
}
.lightbox figcaption{
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.45rem; color: var(--brown-mid);
  text-align: center; padding: .6rem .4rem .8rem;
  min-height: 2.2rem;
}
.lightbox-close{
  position: absolute; top: clamp(.5rem,2vw,1.25rem); right: clamp(.5rem,2vw,1.25rem);
  width: 48px; height: 48px;
  background: transparent; border: 2px solid rgba(253,248,237,.5);
  border-radius: 50%; color: var(--cream);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover{ border-color: var(--cream); background: rgba(253,248,237,.12); }

/* The introduction near the top of the home page: smaller portrait, and
   the eyebrow sits inside the copy column rather than above the pair. */
.meet .person{ align-items: center; }
@media (min-width: 48em){
  .meet .person{ grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}
.meet .person-copy h2{ margin-bottom: .7rem; }
.meet .person-copy p{ color: var(--ink-soft); }
.meet .person-copy .eyebrow{ color: var(--olive-mid); }

/* ---------- the person ---------- */
.person{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 48em){
  .person{ grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
}
.person-copy p + p{ margin-top: 1rem; }
.person-sign{
  font-family: var(--f-script);
  font-size: 2rem; line-height: 1;
  color: var(--olive);
  margin-top: 1.4rem;
}

/* Credentials. Stated plainly, never led with. */
.creds{
  list-style: none; padding: 0;
  margin: 1.4rem 0 0;
  display: grid; gap: .65rem;
}
.creds li{
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: 1rem;
}
.creds li::before{
  content: "¹3";
  width: 1.4rem; height: 1.4rem; flex: none;
  margin-top: .12rem;
  display: grid; place-items: center;
  background: var(--olive); color: var(--on-olive);
  border-radius: 50%;
  font-size: .8rem; font-weight: 700;
}

.portrait{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(60,38,18,.14), 0 18px 34px -16px rgba(60,38,18,.38);
}
.portrait img{ width: 100%; height: auto; display: block; }

/* ---------- photo placeholders ----------
   Deliberately loud. A missing photograph should be impossible to
   publish by accident, and obvious to whoever is reviewing the page. */
.photo-slot{
  margin: 0; position: relative;
  background: var(--cream-warm);
  border: 2px dashed var(--flag-line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .6rem; padding: 1.25rem; text-align: center;
}
.photo-portrait{ aspect-ratio: 3 / 4; }
.photo-wide{ aspect-ratio: 3 / 2; }
.photo-square{ aspect-ratio: 1; }
.photo-need{
  font-family: var(--f-body); font-weight: 700; font-size: .9rem;
  color: var(--flag-ink); background: var(--flag-bg);
  border: 1px solid var(--flag-line); border-radius: 4px;
  padding: .2rem .55rem;
}
.photo-slot figcaption{
  font-family: var(--f-body);
  font-size: .9rem; line-height: 1.45;
  color: var(--ink-soft); max-width: 28ch;
}

/* ---------- utilities ---------- */
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.todo{
  background: var(--flag-bg); color: var(--flag-ink);
  border: 1px dashed var(--flag-line); border-radius: 4px;
  padding: 0 .4rem; font-family: var(--f-body); font-size: .92em; font-weight: 600;
}

/* ---------- the contact page is the chat ---------- */
/* Bookings made in the chat land in the diary on their own, so the page
   is built round it. The phone number and the email address are still
   here for anyone who would rather, but they sit underneath rather than
   competing with it. */
.chat-page{ max-width: var(--measure); }
.chat-open{
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--bg-alt);
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--sage-pale);
  text-align: center;
}
.chat-hint{
  margin: 1rem auto 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: .95rem;
}
/* The button is live from the first paint. It used to be greyed out
   until the widget had loaded, which made the wait the visitor's
   problem; now an early click is held and fired when the widget lands,
   and all that changes is what the line underneath says. */
body[data-chat-opening] [data-chat-hint]{ visibility: hidden; }
body[data-chat-opening] .chat-open::after{
  content: "Opening the chat\2026";
  display: block;
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: .95rem;
}
body[data-chat-failed] [data-chat-hint]{ visibility: hidden; }
body[data-chat-failed] .chat-open::after{
  content: "The chat will not load just now. The number and address below both reach me.";
  display: block;
  margin-top: 1rem;
  max-width: 38ch;
  margin-inline: auto;
  color: var(--flag-ink);
  font-size: .95rem;
}

/* Everywhere else the widget sits in the corner in its normal form. On
   this page it is the page, so once the panel has opened its floating
   launcher would be the same thing twice - it stands down. Hidden after
   the open rather than before it, so the widget's own logic never has
   to work against a launcher that is not there. */
body[data-chat-open] button[data-secondpair-widget]{ display: none; }

.chat-next{ margin-top: clamp(2rem, 5vw, 3rem); }

.chat-aside{
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--sage-pale);
  color: var(--ink-soft);
}
.chat-aside h2{ font-size: 1.15rem; margin-bottom: .6rem; }
.chat-aside p{ margin-top: .5rem; }
.chat-direct{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  font-size: 1.05rem;
}
.chat-direct a{ color: var(--olive-deep); }
.chat-where{ font-size: .95rem; color: var(--ink-faint); }