/* Bramblegate Animal Care — Websy Vet-informed veterinary practice demo.
   The source grammar is the long agency-style sequence: statement hero, service rail, differentiator
   cards, practice-only promise, care-path showcase, process metrics, advice/editorial and CTA/footer.
   The brand, animal imagery, fictional UK copy and logo are original; no Websy Vet marks or claims ship. */

:root {
  --a11y-ink: var(--ink);
  --a11y-surface: var(--cream);
  --a11y-line: var(--line);
  --a11y-radius: var(--radius);
  --a11y-sans: var(--sans);
  --plum: #3d1838;
  --plum-deep: #241026;
  --plum-soft: #eadbef;
  --coral: #f17468;
  --coral-deep: #c94f4d;
  --sage: #b8cbaa;
  --sage-deep: #4f704f;
  --cream: #fff9f0;
  --paper: #fffdf9;
  --ink: #221d24;
  --muted: #6c6170;
  --line: #ded2d7;
  --yellow: #f4c85b;
  --radius: 2px;
  --sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --max: 74rem;
  --assistant-accent: var(--plum);
  --assistant-accent-ink: #fff;
  --assistant-panel: var(--paper);
  --assistant-ink: var(--ink);
  --assistant-muted: var(--muted);
  --assistant-soft: var(--plum-soft);
  --assistant-line: var(--line);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; background: var(--cream); color: var(--ink); font: 1rem/1.65 var(--sans); }
::selection { color: var(--cream); background: var(--plum); }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; }
h1, h2, h3 { font-weight: 800; line-height: 1.03; letter-spacing: -.035em; }
h1 em, h2 em { color: var(--coral-deep); font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.03em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 60; top: -3rem; left: 1rem; padding: .55rem .85rem; background: var(--yellow); color: var(--ink); font-weight: 900; text-decoration: none; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.rail { width: min(var(--max), calc(100% - 7rem)); margin-inline: auto; }

/* Websy-style compact header and menu grammar, with original Bramblegate mark. */
.site-header { position: absolute; z-index: 40; inset: 0 0 auto; height: 90px; display: flex; align-items: center; gap: 1.4rem; padding: 0 3.5rem; background: var(--cream); border-bottom: 1px solid rgba(61,24,56,.16); }
.wordmark { display: inline-flex; align-items: center; gap: .7rem; color: var(--plum); text-decoration: none; }
.brand-badge { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--plum); border-radius: 50%; background: var(--cream); }
.brand-badge::after { content: ""; position: absolute; inset: -.4rem; border: 1px solid var(--coral); border-right-color: transparent; border-radius: 50%; animation: paw-orbit 10s linear infinite; }
.brand-mark { display: block; width: 2.45rem; height: 2.45rem; object-fit: contain; }
.wordmark-copy { display: grid; line-height: 1; }
.wordmark-name { font-size: 1.3rem; letter-spacing: -.04em; }
.wordmark-sub { margin-top: .22rem; color: var(--coral-deep); font-size: .56rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.desktop-nav a { padding: .5rem .7rem; color: var(--plum); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.desktop-nav a:hover { color: var(--coral-deep); }
.nav-group { position: static; }
.nav-group > summary { cursor: pointer; list-style: none; padding: .5rem .7rem; color: var(--plum); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: " +"; color: var(--coral-deep); }
.nav-group[open] > summary::after { content: " −"; }
.mega-menu { position: absolute; z-index: 42; inset: 90px 0 auto; padding: 2.2rem 3.5rem 2.6rem; background: var(--plum); color: var(--cream); box-shadow: 0 1.2rem 2.5rem rgba(36,16,38,.18); }
.mega-inner { width: min(var(--max), 100%); margin: auto; display: grid; grid-template-columns: .75fr 1.5fr; gap: 3rem; }
.mega-intro { max-width: 17rem; }
.mega-intro small, .eyebrow { color: var(--coral-deep); font-size: .65rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.mega-intro small { color: var(--yellow); }
.mega-intro h2 { margin-top: .7rem; font: 2.5rem/1 var(--serif); letter-spacing: -.04em; }
.mega-intro p { margin-top: .7rem; color: var(--plum-soft); font-size: .86rem; }
.mega-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.22); }
.mega-links a { display: grid; min-height: 7rem; align-content: space-between; padding: 1rem; background: var(--plum-deep); color: var(--cream); text-decoration: none; }
.mega-links a:hover { background: var(--coral-deep); }
.mega-links strong { font: 1.1rem/1 var(--serif); }
.mega-links span { color: var(--plum-soft); font-size: .74rem; }
.header-call { display: inline-flex; align-items: center; gap: .35rem; color: var(--plum); font-size: .75rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.header-call::before { content: "↗"; color: var(--coral-deep); }
.header-cta { margin-left: .5rem; }
.mobile-menu { display: none; }

/* Buttons and repeated section language. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; padding: .7rem 1.1rem; border: 1px solid var(--plum); border-radius: 999px; background: var(--plum); color: var(--cream); cursor: pointer; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); background: var(--plum-deep); }
.button-coral { border-color: var(--coral); background: var(--coral); color: var(--ink); }
.button-coral:hover { background: var(--yellow); border-color: var(--yellow); }
.button-outline { background: transparent; color: var(--plum); }
.button-outline:hover { background: var(--plum); color: var(--cream); }
.button-light { border-color: var(--cream); background: var(--cream); color: var(--plum); }
.button-light:hover { background: var(--yellow); border-color: var(--yellow); }
.text-link { color: var(--coral-deep); font-size: .73rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.text-link:hover { color: var(--plum); }
.section { padding: 7rem 0; }
.section-plum { background: var(--plum); color: var(--cream); }
.section-sage { background: var(--sage); }
.section-kicker { color: var(--coral-deep); font-size: .66rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.section-plum .section-kicker { color: var(--yellow); }
.section-title { max-width: 12ch; margin-top: 1rem; font-size: clamp(2.8rem, 6.4vw, 6rem); }
.section-intro { max-width: 42rem; margin-top: 1.2rem; color: var(--muted); font-size: 1.05rem; }
.section-plum .section-intro { color: var(--plum-soft); }
.split-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 3.5rem; align-items: end; }

/* Hero: 750px statement image with a rotating word and animal-care interface. */
.hero { position: relative; min-height: 750px; display: grid; align-items: center; overflow: hidden; background: var(--plum-deep); color: var(--cream); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(36,16,38,.97) 0 43%, rgba(36,16,38,.36) 72%, rgba(36,16,38,.18)), url("media/dog-plate.webp") 78% 50% / cover; opacity: .95; }
.hero::after { content: ""; position: absolute; width: 34rem; height: 34rem; right: 5%; top: 10rem; border: 1px solid rgba(244,200,91,.6); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(244,200,91,.07), 0 0 0 12rem rgba(244,200,91,.04); animation: hero-orbit 17s ease-in-out infinite alternate; }
.hero-inner { position: relative; z-index: 1; padding: 9rem 0 5rem; }
.hero-inner .eyebrow { color: var(--yellow); }
.hero h1 { max-width: 10ch; margin-top: 1.1rem; font-size: clamp(4rem, 9.5vw, 9rem); letter-spacing: -.08em; }
.hero h1 em { color: var(--coral); }
.hero-sub { max-width: 31rem; margin-top: 1.8rem; color: var(--plum-soft); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin-top: 4rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.25); color: var(--plum-soft); font-size: .76rem; }
.hero-meta strong { color: var(--cream); }
.hero-sticker { position: absolute; z-index: 2; right: 13%; bottom: 9rem; display: grid; place-items: center; width: 8rem; height: 8rem; padding: 1.2rem; border: 1px solid var(--coral); border-radius: 50%; background: var(--coral); color: var(--plum); text-align: center; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(10deg); }
.hero-sticker::after { content: ""; position: absolute; inset: .55rem; border: 1px dashed rgba(61,24,56,.55); border-radius: 50%; }
.rotating-word { display: inline-block; min-width: 5.4ch; color: var(--coral); }

/* Scroll signature: service carousel, then differentiated practice cards. */
.service-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.service-head h2 { max-width: 10ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6rem); }
.service-head p { max-width: 23rem; color: var(--muted); }
.service-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18rem, 28%); gap: 1rem; overflow-x: auto; margin-top: 3.5rem; padding: .4rem .3rem 1.2rem; scroll-snap-type: x proximity; }
.service-card { min-height: 21rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.4rem; border: 1px solid var(--line); background: var(--paper); scroll-snap-align: start; transition: transform .2s ease, border-color .2s ease; }
.service-card:hover { border-color: var(--coral); transform: translateY(-4px); }
.service-card:nth-child(2) { background: var(--plum-soft); }
.service-card:nth-child(3) { background: var(--sage); }
.service-card:nth-child(4) { background: var(--yellow); }
.service-card small { color: var(--coral-deep); font-size: .65rem; font-weight: 900; letter-spacing: .15em; }
.service-card h3 { max-width: 10ch; margin-top: 3.5rem; color: var(--plum); font-size: 2.3rem; }
.service-card p { margin-top: .7rem; color: var(--muted); font-size: .9rem; }
.service-card .text-link { margin-top: 1.3rem; }
.rail-hint { display: flex; justify-content: space-between; margin-top: .7rem; color: var(--muted); font-size: .72rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 3.5rem; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.24); }
.feature-card { min-height: 20rem; padding: 1.5rem; background: var(--plum-deep); }
.feature-card:nth-child(2) { background: var(--plum); }
.feature-card:nth-child(3) { background: #52264b; }
.feature-card strong { color: var(--yellow); font: 2.5rem/1 var(--serif); }
.feature-card h3 { margin-top: 4rem; font-size: 2rem; }
.feature-card p { margin-top: .7rem; color: var(--plum-soft); font-size: .9rem; }

/* Practice-only band: replaces the agency source's unsupported client proof with honest clinic scope. */
.practice-band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5rem; align-items: center; }
.practice-copy h2 { max-width: 9ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6.2rem); }
.practice-copy p { max-width: 36rem; margin-top: 1.3rem; color: var(--muted); font-size: 1.08rem; }
.practice-art { position: relative; min-height: 27rem; overflow: hidden; background: var(--sage); }
.practice-art img { width: 100%; height: 100%; min-height: 27rem; object-fit: cover; display: block; mix-blend-mode: multiply; }
.practice-art::after { content: "Routine / urgent / referral"; position: absolute; right: 1rem; bottom: 1rem; padding: .55rem .75rem; background: var(--cream); color: var(--plum); font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

/* Care paths showcase. */
.care-showcase { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; align-items: start; }
.care-showcase h2 { max-width: 8ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6.4rem); }
.care-showcase > div > p { max-width: 22rem; margin-top: 1.2rem; color: var(--plum-soft); }
.care-list { display: grid; gap: 1rem; }
.care-item { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid rgba(255,255,255,.25); }
.care-item:last-child { border-bottom: 1px solid rgba(255,255,255,.25); }
.care-number { color: var(--yellow); font-size: .7rem; font-weight: 900; letter-spacing: .13em; }
.care-item h3 { font-size: 2rem; }
.care-item p { margin-top: .5rem; color: var(--plum-soft); font-size: .9rem; }
.care-item a { display: inline-block; margin-top: .8rem; color: var(--yellow); }

/* Process metrics and editorial advice. */
.metric-band { background: var(--coral); color: var(--plum); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.metric { min-height: 10rem; padding: 1.8rem 2rem; border-left: 1px solid rgba(61,24,56,.24); }
.metric:first-child { border-left: 0; }
.metric strong { display: block; font: 4.2rem/1 var(--serif); }
.metric span { display: block; margin-top: .6rem; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.advice-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 4rem; }
.advice-lead h2 { max-width: 9ch; margin-top: 1rem; font-size: clamp(3rem, 6vw, 6rem); }
.advice-lead p { max-width: 22rem; margin-top: 1.1rem; color: var(--muted); }
.advice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.advice-card { min-height: 18rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid var(--line); background: var(--paper); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.advice-card:hover { border-color: var(--coral); transform: translateY(-4px); }
.advice-card time { color: var(--coral-deep); font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.advice-card h3 { margin-top: 3rem; font-size: 1.7rem; }
.advice-card span { color: var(--coral-deep); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cta-band { background: var(--yellow); color: var(--plum); }
.cta-inner { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.cta-inner h2 { max-width: 10ch; margin-top: 1rem; font-size: clamp(3rem, 6.5vw, 6.5rem); }
.cta-band .button { border-color: var(--plum); background: var(--plum); color: var(--cream); }

/* Inner pages and signature planner. */
.page-hero { padding: 11rem 0 5rem; background: var(--plum-soft); }
.page-hero h1 { max-width: 10ch; margin-top: 1rem; color: var(--plum); font-size: clamp(3.7rem, 8vw, 8rem); }
.page-hero p { max-width: 43rem; margin-top: 1.25rem; color: var(--muted); font-size: 1.08rem; }
.page-hero .button { margin-top: 2rem; }
.breadcrumb { display: inline-flex; color: var(--coral-deep); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.page-body { padding: 6rem 0 8rem; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.service-tile { min-height: 20rem; padding: 1.4rem; border: 1px solid var(--line); background: var(--paper); }
.service-tile:nth-child(2n) { background: var(--plum-soft); }
.service-tile:nth-child(3n) { background: var(--sage); }
.service-tile small { color: var(--coral-deep); font-size: .65rem; font-weight: 900; letter-spacing: .13em; }
.service-tile h2 { margin-top: 4rem; font-size: 2.1rem; }
.service-tile p { margin-top: .7rem; color: var(--muted); font-size: .88rem; }
.service-tile a { display: inline-block; margin-top: 1.2rem; }
.planner-layout { display: grid; grid-template-columns: 1.15fr .7fr; gap: 3rem; align-items: start; }
.tool-panel { padding: 2rem; background: var(--paper); border: 1px solid var(--line); box-shadow: .7rem .7rem 0 var(--plum-soft); }
.tool-panel h2 { margin-top: .9rem; color: var(--plum); font-size: clamp(2.3rem, 4vw, 4.2rem); }
.tool-panel > p { margin-top: .75rem; color: var(--muted); }
.tool-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 2rem; }
.tool-steps li { display: grid; gap: .35rem; padding: .75rem; border-top: 2px solid var(--coral); color: var(--muted); font-size: .78rem; }
.tool-steps li span { color: var(--coral-deep); font-weight: 900; }
.est-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
.field { display: grid; gap: .35rem; }
.field-wide { grid-column: 1 / -1; }
.field label { color: var(--plum); font-size: .74rem; font-weight: 900; letter-spacing: .04em; }
.field input, .field select, .field textarea { width: 100%; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral); outline: 0; }
.est-out { margin-top: 2rem; padding: 1.2rem; border-top: 2px solid var(--coral); background: var(--plum-soft); }
.est-list { display: grid; gap: .35rem; }
.est-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; color: var(--muted); font-size: .84rem; }
.est-list .leader { border-bottom: 1px dotted var(--line); transform: translateY(-.35rem); }
.est-list .qty { color: var(--plum); font-weight: 800; }
.est-total { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.est-total .value { color: var(--coral-deep); font-weight: 900; }
.est-caveat { margin-top: .9rem; color: var(--muted); font-size: .76rem; }
.est-out .button { margin-top: 1rem; }
.aside-panel { padding: 1.5rem; border: 1px solid var(--line); background: var(--plum); color: var(--cream); }
.aside-panel h2 { margin-top: .8rem; font: 2.5rem/1 var(--serif); }
.aside-list { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.aside-list li { padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.22); }
.aside-list strong { display: block; color: var(--yellow); }
.aside-list p { margin-top: .35rem; color: var(--plum-soft); font-size: .85rem; }
.honest-note { margin-top: 1.5rem; padding: 1rem; border-left: 2px solid var(--coral); background: rgba(255,255,255,.08); color: var(--plum-soft); font-size: .8rem; }
.enquiry { margin-top: 5rem; padding-top: 5rem; border-top: 1px solid var(--line); }
.enquiry h2 { color: var(--plum); font-size: clamp(2.8rem, 5vw, 5rem); }
.enquiry-grid { display: grid; grid-template-columns: 1fr .7fr; gap: 3rem; margin-top: 2rem; }
.preview-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.6rem; }
.preview-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; min-height: 1.5em; color: var(--coral-deep); font-size: .82rem; }
.faq-list { display: grid; max-width: 58rem; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 1.3rem 0; color: var(--plum); font-size: 1.45rem; font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; color: var(--coral-deep); font-size: 1.35rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 45rem; padding: 0 2rem 1.4rem 0; color: var(--muted); }

/* Footer. */
.site-footer { background: var(--plum-deep); color: var(--cream); }
.footer-contact { padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.footer-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer-contact-item { display: grid; gap: .2rem; color: var(--plum-soft); font-size: .8rem; }
.footer-contact-item strong, .footer-contact-item a { color: var(--cream); text-decoration: none; }
.footer-contact-item a:hover { color: var(--yellow); }
.footer-lower { padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.55fr repeat(4, 1fr); gap: 2rem; }
.footer-brand .wordmark { color: var(--cream); }
.footer-truth { max-width: 21rem; margin-top: 1rem; color: var(--plum-soft); font-size: .74rem; }
.footer-grid h3 { margin-bottom: .8rem; color: var(--yellow); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-grid a { display: block; margin: .4rem 0; color: var(--plum-soft); font-size: .78rem; text-decoration: none; }
.footer-grid a:hover { color: var(--cream); }
.footer-build, .footer-maker { margin-top: 1.1rem; color: var(--plum-soft); font-size: .72rem; }
.footer-maker { margin-top: .2rem; color: var(--yellow); }
.footer-legal { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.22); color: var(--plum-soft); font-size: .68rem; }

/* Bounded normal/reduced motion. */
@keyframes bg-paw-reveal { from { opacity: 0; clip-path: inset(0 0 16% 0 round 20px); transform: translateY(1.2rem) rotate(-.8deg); } to { opacity: 1; clip-path: inset(0 round 20px); transform: none; } }
.reveal { opacity: 1; transform: none; }
.js-ready .reveal { opacity: 1; clip-path: inset(0 0 16% 0 round 20px); transform: translateY(1.2rem) rotate(-.8deg); transition: opacity .65s ease, transform .65s ease, clip-path .65s ease; }
.js-ready .reveal.is-visible { opacity: 1; clip-path: inset(0 round 20px); transform: none; animation: bg-paw-reveal .68s cubic-bezier(.2,.8,.2,1) both; }
@keyframes paw-orbit { to { transform: rotate(360deg); } }
@keyframes hero-orbit { from { transform: rotate(-12deg) translate3d(0,0,0); } to { transform: rotate(8deg) translate3d(-1rem, 1rem, 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .js-ready .reveal { opacity: 1; clip-path: none; transform: none; animation: none; }
}

@media (max-width: 1050px) {
  .site-header { padding-inline: 2rem; }
  .rail { width: min(var(--max), calc(100% - 4rem)); }
  .mega-menu { padding-inline: 2rem; }
  .desktop-nav a, .nav-group > summary { padding-inline: .4rem; font-size: .67rem; }
}
@media (max-width: 800px) {
  .site-header { height: 90px; padding: 0 1.2rem; }
  .desktop-nav, .site-header > .header-cta, .header-call { display: none; }
  .mobile-menu { display: block; margin-left: auto; }
  .mobile-menu > summary { cursor: pointer; list-style: none; padding: .55rem .7rem; border: 1px solid var(--plum); color: var(--plum); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu > summary::after { content: " +"; color: var(--coral-deep); }
  .mobile-menu[open] > summary::after { content: " −"; }
  .mobile-panel { position: fixed; z-index: 41; inset: 90px 0 0 auto; width: min(300px, 82vw); overflow-y: auto; padding: 1.2rem; background: var(--plum); color: var(--cream); box-shadow: -1rem 0 3rem rgba(36,16,38,.18); }
  .mobile-panel > a, .mobile-panel > details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.4rem; border-bottom: 1px solid rgba(255,255,255,.22); color: var(--cream); font: 1.35rem/1 var(--serif); text-decoration: none; }
  .mobile-panel > details > summary { cursor: pointer; list-style: none; }
  .mobile-panel > details > summary::-webkit-details-marker { display: none; }
  .mobile-panel > details > summary::after { content: "↘"; color: var(--yellow); font: 1rem var(--sans); }
  .mobile-submenu { display: grid; gap: .1rem; padding: .4rem 0 .8rem 1rem; border-bottom: 1px solid rgba(255,255,255,.22); }
  .mobile-submenu a { padding: .45rem 0; color: var(--plum-soft); font-size: .84rem; text-decoration: none; }
  .mobile-cta { margin-top: 1.5rem; border-color: var(--yellow); background: var(--yellow); color: var(--plum); }
  body.menu-open main, body.menu-open footer { transform: translateX(-300px); }
  main, footer { transition: transform .35s ease; }
  .rail { width: min(var(--max), calc(100% - 2.4rem)); }
  .hero { min-height: 700px; }
  .hero::before { background: linear-gradient(90deg, rgba(36,16,38,.97), rgba(36,16,38,.45)), url("media/dog-plate.webp") 65% center / cover; }
  .hero::after { right: -10rem; top: 15rem; width: 28rem; height: 28rem; }
  .hero-inner { padding-top: 10rem; }
  .hero h1 { font-size: clamp(4rem, 17vw, 7rem); }
  .hero-sticker { right: 1.5rem; bottom: 6.5rem; width: 6.7rem; height: 6.7rem; font-size: .6rem; }
  .hero-meta { margin-top: 3rem; }
  .section { padding: 5rem 0; }
  .split-heading, .practice-band, .care-showcase, .advice-grid, .planner-layout, .enquiry-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .service-head { align-items: start; flex-direction: column; }
  .service-rail { grid-auto-columns: minmax(17rem, 74%); }
  .feature-grid, .service-grid, .advice-cards { grid-template-columns: 1fr 1fr; }
  .feature-card { min-height: 16rem; }
  .practice-art, .practice-art img { min-height: 20rem; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric { min-height: auto; padding: 1.4rem 1.2rem; border-left: 0; border-top: 1px solid rgba(61,24,56,.24); }
  .metric:first-child { border-top: 0; }
  .page-hero { padding-top: 11rem; }
  .tool-panel, .aside-panel { padding: 1.2rem; }
  .enquiry { margin-top: 3.5rem; padding-top: 3.5rem; }
  .footer-contact-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-legal { align-items: start; flex-direction: column; }
}
@media (max-width: 480px) {
  .wordmark-sub { display: none; }
  .wordmark-name { font-size: 1.12rem; }
  .brand-badge { width: 2.55rem; height: 2.55rem; }
  .brand-mark { width: 2.05rem; height: 2.05rem; }
  .hero h1 { font-size: clamp(3.6rem, 18vw, 5.5rem); }
  .hero-sticker { right: 1rem; bottom: 5rem; }
  .feature-grid, .service-grid, .advice-cards, .footer-contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 14rem; }
  .care-item { grid-template-columns: 2.5rem 1fr; }
  .tool-steps, .est-controls, .preview-form { grid-template-columns: 1fr; }
  .field-wide, .form-status { grid-column: auto; }
  .est-list li { grid-template-columns: 1fr auto; }
  .est-list .leader { display: none; }
}

/* Accessibility palette hooks — the shared panel needs Bramblegate's own care palette. */
html[data-a11y-contrast="high"] {
  --plum: #000; --plum-deep: #000; --plum-soft: #fff;
  --coral: #000; --coral-deep: #000; --sage: #000; --sage-deep: #000;
  --cream: #fff; --paper: #fff; --ink: #000; --muted: #000; --line: #000; --yellow: #000;
}
html[data-a11y-colour="safe"] {
  --plum: #23282a; --plum-deep: #16191a; --plum-soft: #e8f1f7;
  --coral: #0072b2; --coral-deep: #005a8d;
  --sage: #009e73; --sage-deep: #00724f; --yellow: #e69f00;
}
/* S301 parity pass — a short care-route rail gives the opening the same reassurance and
   wayfinding density as the veterinary reference without making a clinical claim. */
.care-rail { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; background:var(--plum-deep); color:var(--cream); border-bottom:3px solid var(--coral); }
.care-rail > span, .care-rail > a { padding:.58rem .9rem; border-right:1px solid rgba(255,249,240,.16); font-size:.63rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.care-rail__label { color:var(--yellow); }
.care-rail a { color:#ffd5cc; text-decoration:underline; text-underline-offset:.18em; }
@media (max-width:680px) { .care-rail { justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; } .care-rail::-webkit-scrollbar { display:none; } .care-rail > span, .care-rail > a { flex:none; padding:.55rem .68rem; font-size:.54rem; } }
/* S301 parity repair — darken the care choice layer to echo the technology/trust opening. */
.care-mode-rail { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem; padding:.45rem clamp(1rem,4vw,4rem); background:#102b44; color:#fff9f0; }
.care-mode-rail a { padding:.5rem .7rem; color:#fff9f0; font-size:.61rem; font-weight:900; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.care-mode-rail a:hover, .care-mode-rail a.is-active { background:#b8cbaa; color:#102b44; }
.care-mode-rail a:last-child { margin-left:auto; color:#f4c85b; }
@media (max-width:680px) { .care-mode-rail { overflow-x:auto; flex-wrap:nowrap; padding-inline:.75rem; } .care-mode-rail a { flex:0 0 auto; white-space:nowrap; font-size:.54rem; } .care-mode-rail a:last-child { margin-left:0; } }

/* S301 trust/technology closeout — give the veterinary opening a cool dark care panel to
   balance the warm hero and make the routine/urgent split scan immediately. */
.hero { position:relative; isolation:isolate; }
.hero::before { position:absolute; right:0; bottom:0; z-index:-1; width:45%; height:72%; background:linear-gradient(145deg,rgba(16,43,68,.95),rgba(16,43,68,.45)),url("media/dog-plate.webp") center/cover; clip-path:polygon(18% 0,100% 12%,100% 100%,0 100%); content:""; opacity:.9; }
.hero-meta { position:relative; z-index:2; }
.hero-meta span { border-color:rgba(184,203,170,.45)!important; }
@media (max-width:680px) { .hero::before { width:100%; height:48%; clip-path:polygon(0 18%,100% 0,100% 100%,0 100%); opacity:.38; } }

/* S301 scheduling-role closeout — put the practical planning surface alongside the animal image
   in the opening rather than leaving the reference's trust/scheduling role below the fold. */
.hero-route-card { position:absolute; top:13rem; right:3%; z-index:3; display:grid; gap:.35rem; width:min(18rem,30vw); padding:1rem 1.1rem; color:#f7f2e8; background:#102b44; border:1px solid rgba(184,203,170,.58); box-shadow:.7rem .7rem 0 rgba(16,43,68,.3); }
.hero-route-card::before { position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,rgba(16,43,68,.96),rgba(16,43,68,.76)),url("media/dog-plate.webp") center/cover; content:""; opacity:.55; }
.hero-route-card > span { color:#f4c85b; font-size:.53rem; font-weight:900; letter-spacing:.12em; }
.hero-route-card strong { font:800 1.15rem/1.05 var(--display); }
.hero-route-card small { color:#d8e5e0; font-size:.66rem; line-height:1.35; }
.hero-route-card a { width:fit-content; margin-top:.3rem; color:#ffd5cc; font-size:.62rem; font-weight:900; letter-spacing:.08em; text-decoration:underline; text-transform:uppercase; }
@media (max-width:900px) { .hero-route-card { right:1.2rem; width:min(17rem,42vw); } }
@media (max-width:680px) { .hero-route-card { position:relative; top:auto; right:auto; width:min(100%,19rem); margin-top:1.4rem; } }
/* S301 reference-role closeout — the source opens as a cool, blue veterinary-tech service
   plate with a large animal image and a scheduling/trust card. Keep the warm coral accent only
   for actions while restoring that cool opening field for the Bramblegate rebrand. */
.hero { background:#102b44; }
.hero::before { right:0; bottom:0; z-index:-1; width:62%; height:100%; background:linear-gradient(90deg,rgba(16,43,68,.96) 0%,rgba(16,43,68,.68) 40%,rgba(16,43,68,.2) 100%),url("media/dog-plate.webp") 72% center/cover; clip-path:polygon(16% 0,100% 0,100% 100%,0 100%); opacity:.96; }
.hero::after { border-color:rgba(117,215,228,.64); box-shadow:0 0 0 5rem rgba(117,215,228,.08),0 0 0 12rem rgba(117,215,228,.045); }
.hero-route-card { border-color:rgba(117,215,228,.7); background:#0e3854; box-shadow:.7rem .7rem 0 rgba(8,28,44,.36); }
.hero-route-card > span { color:#75d7e4; }
@media (max-width:680px) { .hero::before { width:100%; height:55%; clip-path:polygon(0 12%,100% 0,100% 100%,0 100%); opacity:.74; } }

/* S301 competitor-parity closeout — the reference's veterinary-tech opening is a
   cool, dark, image-led statement with a centred headline, cyan/blue conversion
   controls and a compact utility header. Keep Bramblegate's honest care copy and
   original mark while moving those visual roles into the same first-viewport grammar. */
:root { --websy-cyan:#75d7e4; --websy-blue:#0a67b8; --websy-deep:#102b44; }
.site-header { background:rgba(11,42,57,.94); border-bottom-color:rgba(117,215,228,.28); }
.wordmark { color:#fff; }
.brand-badge { border-color:var(--websy-cyan); background:var(--websy-deep); }
.wordmark-sub { color:var(--websy-cyan); }
.desktop-nav a, .nav-group > summary, .header-call { color:#f7fbfc; }
.desktop-nav a:hover, .nav-group > summary:hover { color:var(--websy-cyan); }
.header-call::before { color:var(--websy-cyan); }
.care-rail, .care-mode-rail { background:#0c3b53; color:#effbfc; border-color:rgba(117,215,228,.42); }
.care-rail__label { color:var(--websy-cyan); }
.hero { background:var(--websy-deep); }
.hero::before { background:linear-gradient(90deg,rgba(16,43,68,.96) 0%,rgba(16,43,68,.72) 48%,rgba(16,43,68,.18) 100%),url("media/dog-plate.webp") 72% center/cover; }
.hero::after { border-color:rgba(117,215,228,.68); box-shadow:0 0 0 5rem rgba(117,215,228,.08),0 0 0 12rem rgba(117,215,228,.045); }
.hero-inner { text-align:center; padding-top:8.4rem; }
.hero h1 { max-width:18ch; margin-inline:auto; font-size:clamp(3.5rem,7.4vw,7.4rem); letter-spacing:-.06em; }
.hero-sub { max-width:42rem; margin-inline:auto; color:#e4f4f6; }
.hero-actions { justify-content:center; }
.hero-meta { justify-content:center; max-width:62rem; margin-inline:auto; }
.button-coral { border-color:var(--websy-cyan); background:linear-gradient(90deg,#0fc8c8,var(--websy-blue)); color:#fff; }
.button-coral:hover { background:linear-gradient(90deg,var(--websy-blue),#0fc8c8); }
.hero-route-card { border-color:rgba(117,215,228,.76); background:#0e3854; }
.hero-route-card > span { color:var(--websy-cyan); }
@media (max-width:680px) {
  .hero-inner { padding-top:7.3rem; text-align:left; }
  .hero h1 { max-width:10ch; margin-inline:0; font-size:clamp(3.5rem,17vw,6.4rem); }
  .hero-sub { margin-inline:0; }
  .hero-actions { justify-content:flex-start; }
  .hero-meta { justify-content:flex-start; }
}

/* Websy-style opening geometry: the photographic dog/practice role belongs on the right of the
   centred desktop statement, with the first proof band continuing in the same blue field. */
.hero::before { left:auto; right:0; }
.hero + .section { background:#0e3854; color:#effbfc; }
.hero + .section .section-kicker { color:var(--websy-cyan); }
.hero + .section .section-title { color:#fff; }
.hero + .section .section-intro { color:#d9eef1; }
@media (max-width:680px) { .hero::before { left:0; right:auto; } }

/* S301 reference-role closeout — the source's first viewport continues into a bright,
   image-led technology/proof panel. Bramblegate keeps the pet-care rebrand and marks this
   as an honest preview, but restores the overlap, cyan field and readable image role. */
.hero-tech-cue { color:var(--websy-cyan); font-size:.66rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.hero h1 em { color:var(--websy-cyan); font-family:inherit; font-style:normal; }
.hero-proof-panel { position:relative; z-index:5; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); width:min(68rem,calc(100% - 7rem)); min-height:13rem; margin-top:-7.5rem; margin-bottom:6rem; overflow:hidden; background:linear-gradient(105deg,#0dc2c4,#0767b6); color:#fff; border-radius:1.15rem; box-shadow:0 1.5rem 3rem rgba(6,34,54,.25); }
.hero-proof-panel__image { min-height:13rem; overflow:hidden; background:#dceaf0; }
.hero-proof-panel__image img { display:block; width:100%; height:100%; min-height:13rem; object-fit:cover; object-position:center; }
.hero-proof-panel__copy { display:grid; align-content:center; gap:.7rem; padding:2rem clamp(1.5rem,4vw,3.4rem); }
.hero-proof-panel__kicker { color:#d7ffff; font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.hero-proof-panel h2 { max-width:15ch; font-size:clamp(2rem,4vw,4.1rem); letter-spacing:-.055em; }
.hero-proof-panel__copy > p:not(.hero-proof-panel__kicker) { max-width:35ch; color:#efffff; font-size:.95rem; line-height:1.45; }
.hero-proof-panel__actions { display:flex; align-items:center; flex-wrap:wrap; gap:.85rem 1rem; margin-top:.4rem; }
.hero-proof-panel__actions .button { min-height:2.4rem; padding:.55rem .85rem; font-size:.62rem; }
.hero-proof-panel__actions > span { color:#d9ffff; font-size:.62rem; font-weight:800; letter-spacing:.06em; }
@media (max-width:760px) {
  .hero-proof-panel { grid-template-columns:1fr; width:calc(100% - 2rem); min-height:0; margin-top:-2.6rem; margin-bottom:3.5rem; border-radius:.8rem; }
  .hero-proof-panel__image, .hero-proof-panel__image img { min-height:12rem; max-height:16rem; }
  .hero-proof-panel__copy { padding:1.5rem 1.2rem 1.7rem; }
  .hero-proof-panel h2 { max-width:13ch; font-size:clamp(2rem,10vw,3.2rem); }
  .hero-proof-panel__actions { align-items:flex-start; flex-direction:column; }
}

/* S301 rendered closeout — keep the statement clear of the route/proof cards while retaining
   the large technology-led opening and ensuring the long mobile word stays inside the rail. */
@media (min-width:681px) {
  .hero h1 { max-width:16ch; font-size:clamp(3.5rem,6.5vw,6.6rem); }
  .hero-route-card { right:0; width:min(16rem,25vw); }
  .hero-proof-panel { margin-top:-4rem; }
}
@media (max-width:680px) {
  .hero h1 { max-width:100%; font-size:clamp(3rem,14.2vw,5.3rem); letter-spacing:-.075em; }
  .hero-proof-panel { margin-top:-1.25rem; }
}

/* S301 nav occlusion repair — the care rails are part of the opening, so the header must
   reserve its 90px instead of painting over routine, urgent and planning links. Keep the
   change to the home route; inner pages use the existing page-hero offset. */
body.route-home .site-header { position:relative; }
@media (max-width:800px) {
  body.route-home .mobile-menu > summary { border-color:var(--websy-cyan); color:#f7fbfc; }
  body.route-home .mobile-menu > summary::after { color:var(--websy-cyan); }
}