/* Olive & Oscar's — home page, as blocks. Ported from the approved concept (concepts/concept-1.html, Ink & Paper, chosen 15 Sep 2026)
   with Graeme's notes: woodland hero, upright type, straight dark-green strip, green buttons, "Let dogs be dogs" biggest,
   Muddy Paws stats + day list, pick-up and six-dog badges. Same file styles the front end and the block editor.
   .oo-home = the root group of the home page. .is-home = body class on the front end only (header, footer). */
.is-home{background-image:none}
.is-home .site-main{overflow:hidden}
.oo-home{margin:0}
.oo-home .kick{font:600 .8rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-deep);margin:0 0 1rem}
.oo-home h1,.oo-home h2,.oo-home h3{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
.oo-home h2{font-size:clamp(2rem,3.6vw,3rem)}.oo-home h3{font-size:1.35rem;font-weight:600}
.oo-home :is(h1,h2,h3) em{font-style:normal;font-weight:500;color:var(--slate-deep);position:relative;white-space:nowrap}
.oo-home :is(h1,h2,h3) em::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.08em;height:.32em;z-index:-1;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'><path d='M3 16c40-8 78-9 118-6 30 2 60 6 92 3 30-3 55-8 84-9' fill='none' stroke='%233f6b7b' stroke-width='3.2' stroke-linecap='round' opacity='.75'/><path d='M8 20c50-6 96-7 140-4 34 2 68 4 104 1' fill='none' stroke='%233f6b7b' stroke-width='2' stroke-linecap='round' opacity='.45'/></svg>") no-repeat center/100% 100%}
.oo-home p{margin:0 0 1.1em}
.oo-home .lede{font-size:1.35rem;line-height:1.45;color:var(--ink-2)}
.oo-home .wp-block-image{margin:0}
.oo-home .wp-block-image img{border-radius:0}
/* buttons (core button block, styled as the concept buttons; primary is black, as on the original site) */
.oo-home .wp-block-buttons{margin:0 0 1rem}
.oo-home .wp-block-button__link{display:inline-flex;align-items:center;gap:.5em;font:600 1rem/1 var(--sans);padding:1em 1.6em;border-radius:999px;text-decoration:none;border:1.5px solid var(--moss);background:var(--moss);color:var(--on-moss);transition:.25s}
.oo-home .wp-block-button__link:hover{transform:translateY(-2px);background:var(--moss-deep);border-color:var(--moss-deep);color:#fff}
.oo-home .is-style-outline .wp-block-button__link,.oo-home .btn--ghost .wp-block-button__link{background:transparent;color:var(--ink);border-color:var(--ink)}
.oo-home .is-style-outline .wp-block-button__link:hover,.oo-home .btn--ghost .wp-block-button__link:hover{background:var(--ink);color:var(--paper)}
/* nav over the hero (front end only) */
.is-home .site-head{position:absolute;inset:0 0 auto;z-index:5;padding:1.25rem 0}
.is-home .brand{display:inline-block;background:var(--paper);padding:.6rem .9rem .35rem;border-radius:12px 12px 12px 34px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);transform:rotate(-2deg)}
.is-home .brand img{width:120px}
.is-home .brand:hover img{transform:none}
@media (min-width:900px){
  .is-home .nav__list{gap:1.6rem}
  .is-home .nav__list a{font:600 .9rem/1 var(--sans);letter-spacing:.06em;color:var(--paper);text-shadow:0 1px 8px rgba(0,0,0,.35)}
  .is-home .nav__list a::after{background:var(--sand)}
  .is-home .nav__cta{background:var(--paper);color:var(--ink);border-color:var(--paper);box-shadow:none}
  .is-home .nav__cta:hover{background:#fff;color:var(--ink)}
}
.is-home .nav-toggle{border-color:var(--paper);background:rgba(22,21,20,.25)}
.is-home .nav-toggle span:not(.sr){background:var(--paper)}
/* hero */
/* 0.9.0 hero (UX council, 30 Sep). Two versions for Graeme/Sarah: V1 "low horizon" (default, ?hero=1) and V2 "left column" (?hero=2).
   One eased scrim per version (no stacked boxes) + 3% noise to stop banding. WCAG 2.1 AA on ANY photo: every glyph sits where the
   ink scrim is at least .66 (white needs .59 for 4.5:1, light jade .61 for 3:1 when blended in sRGB) - measured over a white photo too.
   The words and the dogs never share space: V1 keeps the dogs in the top 60%, V2 puts the photo in the right 62%.
   --focus comes from Your photos; the video (computers only) sits over the photo. The card floats over the photo's bottom edge in both. */
.hero--home{--hh:clamp(540px,72vh,720px);--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");position:relative;isolation:isolate;overflow-x:clip;display:grid;grid-template-columns:minmax(0,1fr);color:var(--paper);padding:0;margin:0}
.hero--home > .wrap,.hero--home .wp-block-columns.hero-grid,.hero--home .hero-grid > .wp-block-column{display:contents}
.hero--home .bg{grid-area:1/1/-1/-1;position:relative;z-index:-2;height:100%;min-height:var(--hh);margin:0;overflow:hidden}
.hero--home .bg img{position:absolute;inset:0}
.hero--home .bg img,.hero--home .bg-video{width:100%;height:100%;object-fit:cover;object-position:var(--focus,var(--focus-default,50% 35%));display:block}
.hero--home .bg-video{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.hero--home .bg-video.is-on{opacity:1}
.hero--home::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero--home .text{grid-area:1/1;align-self:end;z-index:1;box-sizing:border-box;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter) clamp(2.25rem,5vh,3.25rem)}
.hero--home .text > *{max-width:min(38rem,50vw)}
.hero--home .hero-h1{font:400 clamp(2.6rem,4.6vw,4.4rem)/1 var(--serif);color:#fff;margin:0 0 .8rem;text-wrap:balance}
.hero--home .hero-title{font:400 clamp(1.5rem,2.1vw,2.1rem)/1.2 var(--serif);color:#fff;margin:0;text-wrap:balance}
.hero--home .hero-title em{color:var(--sand)}.hero--home .hero-title em::after{filter:brightness(0) invert(1);opacity:.75}
/* the floating card: straddles the photo's bottom edge, no offset outline, badges in one row */
.hero--home .card{grid-area:1/1;align-self:end;justify-self:end;z-index:2;box-sizing:border-box;width:min(27rem,34vw);margin-right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));margin-bottom:clamp(2.25rem,5vh,3.25rem);transform:rotate(.6deg);background:var(--paper);color:var(--ink);padding:1.6rem 1.75rem;border-radius:18px 18px 18px 56px;box-shadow:0 30px 60px -28px rgba(22,21,20,.55),0 2px 0 rgba(22,21,20,.06)}
.hero--home .card::after{display:none}
.hero--home .card .badges{flex-wrap:nowrap}
/* V1 low horizon: dark floor under the words, dogs clear in the top 60% */
.hero--home::before{background:var(--noise),linear-gradient(0deg,rgba(22,21,20,.84) 0%,rgba(22,21,20,.82) 30%,rgba(22,21,20,.76) 38%,rgba(22,21,20,.66) 45%,rgba(22,21,20,.52) 52%,rgba(22,21,20,.37) 59%,rgba(22,21,20,.23) 66%,rgba(22,21,20,.12) 73%,rgba(22,21,20,.05) 80%,rgba(22,21,20,0) 88%),linear-gradient(180deg,rgba(22,21,20,.74) 0,rgba(22,21,20,.7) 60px,rgba(22,21,20,.66) 105px,rgba(22,21,20,.52) 135px,rgba(22,21,20,.35) 165px,rgba(22,21,20,.2) 195px,rgba(22,21,20,.08) 225px,rgba(22,21,20,0) 255px)}
/* the £35 stamp is pinned to the card's top-right corner (it lives inside the card block), so it can never collide with it */
.hero--home .card{position:relative}
/* keep the card (and its stamp) clear of the menu: on shorter screens the hero grows instead of the card riding up */
@media (min-width:901px){.hero-v1 .hero--home .card{margin-top:14.5rem}}
.hero--home .card .stamp{position:absolute;top:-4.75rem;right:-1.75rem;width:116px;height:116px;border-radius:50%;background:var(--sand);color:var(--ink);display:grid;place-items:center;text-align:center;font:500 .85rem/1.1 var(--serif);transform:rotate(8deg);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 7px var(--ink),0 12px 24px -12px rgba(22,21,20,.5);padding:.9rem;z-index:3;margin:0}
.hero--home .card .stamp strong{font-size:1.7rem}
.hero--home .card .stamp p{margin:0;font:inherit;color:var(--ink)}
.hero--home .card{padding-top:2rem}
/* V2 left column: words on a deep slate panel, photo in the right 62%, one smooth blend between them */
@media (min-width:901px){
  .hero-v2 .hero--home .bg{background:var(--slate-deep)}
  .hero-v2 .hero--home .bg img,.hero-v2 .hero--home .bg-video{width:60%;margin-left:auto;left:auto;right:0}
  .hero-v2 .hero--home::before{background:var(--noise),linear-gradient(90deg,var(--slate-deep) 0%,var(--slate-deep) 40%,rgba(43,81,96,.96) 43%,rgba(43,81,96,.9) 46%,rgba(43,81,96,.8) 49%,rgba(43,81,96,.67) 52%,rgba(43,81,96,.53) 55%,rgba(43,81,96,.39) 58%,rgba(43,81,96,.27) 61%,rgba(43,81,96,.17) 64%,rgba(43,81,96,.09) 67%,rgba(43,81,96,.04) 70%,rgba(43,81,96,.01) 73%,rgba(43,81,96,0) 76%),linear-gradient(180deg,rgba(22,21,20,.74) 0,rgba(22,21,20,.7) 60px,rgba(22,21,20,.66) 105px,rgba(22,21,20,.52) 135px,rgba(22,21,20,.35) 165px,rgba(22,21,20,.2) 195px,rgba(22,21,20,.08) 225px,rgba(22,21,20,0) 255px)}
  .hero-v2 .hero--home{grid-template-rows:1fr auto}
  .hero-v2 .hero--home .text{grid-area:1/1;align-self:end;padding-top:10.5rem;padding-bottom:1.75rem}
  .hero-v2 .hero--home .text > *{max-width:min(36rem,36.5vw)}
  .hero-v2 .hero--home .hero-h1{font-size:clamp(2.3rem,3.7vw,3.8rem)}
  .hero-v2 .hero--home .hero-title{font-size:clamp(1.5rem,1.9vw,1.9rem)}
  .hero-v2 .hero--home .card{grid-area:2/1;justify-self:start;margin-left:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));margin-right:0;margin-top:4.75rem;width:min(34rem,38vw);transform:rotate(-.6deg);border-radius:18px 18px 56px 18px}
}
.hero--home .card p{margin:0 0 1rem;font-size:1.05rem;color:var(--ink-2)}
.hero--home .card p{margin:0 0 1rem;font-size:1.05rem;color:var(--ink-2)}
.stamp p{margin:0;font:inherit}
.stamp strong{font:700 2rem/1 var(--serif);display:block}
/* badges (Muddy Paws): pick-up time and group size */
.badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.badges li{display:block;background:var(--paper-2);color:var(--ink);border-radius:999px;padding:.5rem 1rem .5rem 2.2rem;font:400 .8rem/1.15 var(--sans);color:var(--ink-3);position:relative}
.badges li strong{display:block;font-weight:600;color:var(--ink);font-size:.9rem}
.badges li::before{content:"";position:absolute;left:.8rem;top:50%;width:.8rem;height:.8rem;transform:translateY(-50%);border-radius:50%;background:var(--jade);box-shadow:inset 0 0 0 3px var(--paper-2)}
/* ticker: straight, dark green (Graeme), upright */
.is-home .ticker,.oo-home .ticker{margin:0;background:var(--forest);color:var(--paper);padding:.9rem 0;transform:none;border:0}
.oo-home .ticker__track>div{font:500 1.35rem/1 var(--serif);gap:2rem;padding-right:2rem}
.oo-home .ticker i{color:var(--sand)}
/* sections */
.oo-home .home-section{padding-block:clamp(3.5rem,8vw,7rem)}
.oo-home .wp-block-columns.split{display:flex;gap:clamp(2rem,6vw,5rem);align-items:center;margin:0}
.oo-home .split > .wp-block-column{flex:1 1 0}
.cluster{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%;max-width:560px;margin-inline:auto}
/* v0.7 (Sarah, 25 Sep): no overlapping polaroids. One big photo, two underneath, square corners like the rest of the site. */
.cluster .wp-block-image{margin:0}
.cluster .wp-block-image img{width:100%;object-fit:cover;border-radius:14px 14px 14px 40px}
.cluster .a{grid-column:1/-1}.cluster .a img{aspect-ratio:4/3}
.cluster .b img,.cluster .c img{aspect-ratio:1}
.cluster .wp-block-image figcaption{margin:.4rem 0 0;font:500 .95rem/1.2 var(--serif);color:var(--ink-2)}
.pts{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1rem}
.pts li{display:block;position:relative;padding-left:3.4rem;min-height:1.6rem}
.pts li strong{position:absolute;left:0;top:-.15em;font:500 1.6rem/1 var(--serif);color:var(--slate)}
/* ethos band: "Let dogs be dogs" is the biggest line (Graeme) */
.ethos-band{background:var(--slate-deep);color:var(--paper);position:relative;overflow:hidden}
.ethos-band::before{content:"";position:absolute;inset:0;background:url(../img/artwork.jpg) right -10% center/40% no-repeat;opacity:.08;filter:invert(1) grayscale(1);mix-blend-mode:screen;pointer-events:none}
.ethos-band .kick{color:var(--sand)}
.ethos-band h2{font-size:clamp(3rem,8vw,6.5rem);font-weight:400;letter-spacing:-.03em;color:var(--paper)}
.ethos-band h2 em{color:var(--sand)}.ethos-band h2 em::after{filter:brightness(0) invert(1);opacity:.7}
.ethos-band .lede{color:var(--paper);max-width:60ch}
.ethos-band .believe{margin:2rem 0 0;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.words{display:flex;gap:2.5rem;flex-wrap:wrap;font:500 clamp(1.8rem,3.6vw,2.8rem)/1 var(--serif);margin:1rem 0 1rem;letter-spacing:-.02em;list-style:none;padding:0}
.words li:nth-child(1){color:var(--sand)}.words li:nth-child(3){color:#d6ece4}
.ethos-band .after{opacity:.8;margin:0}
/* steps (three columns) */
.oo-home .wp-block-columns.steps{display:flex;gap:1.5rem;margin:2.5rem 0 0}
.oo-home .steps > .wp-block-column{flex:1 1 0;position:relative;padding:2rem 1.5rem 1.5rem;border:1.5px solid var(--ink);border-radius:18px 18px 18px 48px;background:#fff9}
.oo-home .steps > .wp-block-column::after{content:"";position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:inherit;transform:translate(8px,8px) rotate(.4deg);z-index:-1;opacity:.6;pointer-events:none}
.oo-home .steps .num{font:500 3.2rem/1 var(--serif);color:var(--slate);margin:0}
.oo-home .steps h3{margin:.4rem 0}
.oo-home .steps p:last-child{margin:0}
/* Muddy Paws detail: photo with the four numbers, the day as a clear list on the right */
.oo-home .wp-block-columns.howit{display:flex;gap:clamp(2rem,6vw,5rem);align-items:center;margin:3.5rem 0 0}
.oo-home .howit > .wp-block-column:first-child{flex:.95 1 0}
.oo-home .howit > .wp-block-column:last-child{flex:1.05 1 0}
.pic{position:relative;margin:0 0 2.5rem}
.pic .wp-block-image img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:14px 14px 14px 40px;outline:1.5px solid var(--ink);outline-offset:6px}
.stats{position:absolute;left:1rem;right:1rem;bottom:-1.75rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:.9rem .6rem;box-shadow:0 24px 48px -24px rgba(22,21,20,.6);text-align:center;z-index:1}
.stats p{margin:0;font:600 .72rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.stats strong{display:block;font:600 clamp(1.3rem,2.4vw,1.8rem)/1 var(--serif);color:var(--slate-deep);margin-bottom:.3rem;letter-spacing:-.02em}
.oo-home .day{list-style:none;padding:0;margin:1.5rem 0 0;border-left:1.5px solid var(--ink);max-width:40rem}
.oo-home .day li{position:relative;padding:0 0 1.1rem 1.75rem;font-size:.95rem;color:var(--ink-2)}
.oo-home .day li::before{content:"";position:absolute;left:-7px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.oo-home .day li:first-child::before,.oo-home .day li:last-child::before{background:var(--jade)}
.oo-home .day li strong{display:inline-block;font:600 1.15rem/1.3 var(--serif);color:var(--slate-deep);white-space:nowrap}
/* photo strip: five images in a row */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;margin-top:3rem}
.strip .wp-block-image{margin:0}
.strip .wp-block-image img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:14px 14px 14px 40px;outline:1.5px solid var(--ink);outline-offset:6px;transition:.3s}
.strip .wp-block-image img:hover{transform:scale(1.03)}
/* quotes (dynamic block, concept look) */
.oo-home .quotes{margin:0}
.oo-home .quotes__kicker{font:600 .8rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-deep);margin:0 0 1rem}
.oo-home .quotes__list{margin-top:2rem;gap:1.25rem}
.oo-home .quote__card{background:#fff8;border-radius:18px 18px 18px 40px}
.oo-home .quote__text{font-size:1.15rem}
.oo-home .quote__names cite{font-size:.8rem;letter-spacing:.14em}
/* enquiry band */
.enq{background:var(--paper-2);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.enq .enquiry{margin:0;padding:0;border:0;background:none;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.enq .enquiry__title{font-size:clamp(2rem,3.6vw,3rem)}
.enq .enquiry__lede{font-size:1.35rem;line-height:1.45;color:var(--ink-2)}
.enq .enquiry__meta{margin:0}
.enq .field label{font:600 .8rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.enq .field input,.enq .field textarea{font-size:1.05rem;padding:.85rem .95rem;border-radius:10px}
/* footer on paper, no band (front end) */
.is-home .site-foot{background:var(--paper);border-top:0}
.is-home .site-foot__strap{font:500 1.3rem/1.2 var(--serif)}
.is-home .site-foot__h{font-size:1.15rem;font-weight:600;letter-spacing:0}
@media (max-width:900px){
  .oo-home .wp-block-columns.split,.oo-home .wp-block-columns.howit,.oo-home .wp-block-columns.steps,.enq .enquiry{display:block}
  .oo-home .steps > .wp-block-column + .wp-block-column{margin-top:1.5rem}
  .is-home .brand{padding:.45rem .7rem .3rem}.is-home .brand img{width:88px}
  /* Phones (both versions): the photo stays clean for the dogs and melts into a slate panel that carries the words and the card */
  .hero--home{--hh:max(56svh,380px);grid-template-rows:var(--hh) auto auto;background:var(--slate-deep)}
  .hero--home .bg{grid-area:1/1;height:var(--hh);min-height:0}
  .hero--home::before{inset:0 0 auto;height:var(--hh);background:var(--noise),linear-gradient(0deg,var(--slate-deep) 0%,rgba(43,81,96,.85) 4%,rgba(43,81,96,.55) 9%,rgba(43,81,96,.25) 14%,rgba(43,81,96,.08) 19%,rgba(43,81,96,0) 24%),linear-gradient(180deg,rgba(22,21,20,.55) 0,rgba(22,21,20,.3) 70px,rgba(22,21,20,.1) 130px,rgba(22,21,20,0) 170px)}
  .hero--home .text{grid-area:2/1;align-self:start;padding:.25rem var(--gutter) 1.5rem}
  .hero--home .hero-h1{font-size:clamp(2.05rem,8.9vw,2.6rem);margin-bottom:.6rem}
  .hero--home .hero-title{font-size:clamp(1.5rem,6.2vw,1.85rem)}
  .hero--home .card{grid-area:3/1;justify-self:stretch;align-self:start;width:auto;margin:0 var(--gutter) 2rem;transform:none;border-radius:18px 18px 18px 48px;padding:1.4rem 1.4rem 1.5rem}
  .hero--home .card .badges{flex-wrap:wrap}
  .is-home .ticker,.oo-home .ticker{margin-top:0}
  .hero--home .card .stamp{width:90px;height:90px;top:-3.25rem;right:-.25rem;font-size:.72rem;padding:.7rem}
  .hero--home .card .stamp strong{font-size:1.35rem}
  .strip{grid-template-columns:repeat(3,1fr)}
  .strip .wp-block-image:nth-child(n+4){display:none}
  .cluster{margin-top:2rem}
  .oo-home .howit > .wp-block-column + .wp-block-column{margin-top:3rem}
  /* Shorter on phones: the three steps already give the times, so the second timetable only shows on wider screens */
  .oo-home .howit > .wp-block-column:last-child{display:none}
}
@media (max-width:420px){.hero--home .hero-title em{white-space:normal}.hero--home .hero-title em::after{display:none}}
@media (prefers-reduced-motion:reduce){.strip .wp-block-image img{transition:none}}

/* 0.9.3 version 4 preview (?hero=4, Graeme 30 Sep): one line on the photo, the H1 sits below it in the first section */
.hero-v4 .hero--home .hero-title{font-size:clamp(2.4rem,4.2vw,4rem);line-height:1.02}
.hero-v4 .oo-home .home-h1{font-size:clamp(2.2rem,4vw,3.4rem)}
@media (max-width:900px){.hero-v4 .hero--home .text > .hero-title{font-size:clamp(2rem,8.4vw,2.5rem);max-width:none}.hero-v4 .hero--home .text{padding-bottom:3.5rem}}