/* O'Brien Media — concept homepage. Roboto only, fluid type and spacing, square-ish corners. */
:root {
  --pink: #e51463;
  --pink-dark: #a62153;
  --pink-soft: #fdeaf1;
  --pink-rgb: 229, 20, 99;
  --pink-light: #ff5c97;
  --pink-light-2: #ff8fb3;
  --pink-light-3: #ffb3cd;
  --pink-wash: #fff7fa;
  --pink-line: #f6c5d7;
  --pink-wave: #bf1049;
  --lime: #9bc53d;
  --ink: #2b3035;
  --ink-2: #32373c;
  --muted: #5d646b;
  --tint: #f6f4f5;
  --line: #e4e1e3;
  --radius: 3px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: clamp(1rem, .96rem + .2vw, 1.1rem);
  --fs-h1: clamp(2.2rem, 1.2rem + 4vw, 4.6rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.02rem + .5vw, 1.4rem);
  --space: clamp(3rem, 2rem + 5vw, 6.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 var(--fs-body)/1.65 var(--sans); color: var(--ink-2); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--pink); color: #fff; text-shadow: none; }
::-moz-selection { background: var(--pink); color: #fff; text-shadow: none; }
a { color: var(--pink); }
a:hover { color: var(--pink-dark); }
h1, h2, h3 { font-family: var(--sans); color: var(--ink); margin: 0 0 .55em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
.accent { color: var(--pink); }

/* Buttons */
.btn { display: inline-block; background: var(--pink); color: #fff; text-decoration: none; font-weight: 500; padding: .85em 1.6em; border-radius: var(--radius); border: 2px solid var(--pink); transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--pink-dark); border-color: var(--pink-dark); color: #fff; }
.btn i { margin-inline: .35em 0; font-size: .85em; transition: transform .2s; }
.btn:hover i.fa-arrow-right { transform: translateX(3px); }
.btn i.fa-phone { margin-inline: 0 .45em; }
.btn--ghost { background: transparent; color: var(--pink); }
.btn--ghost:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn--small { padding: .5em 1.15em; font-size: .95rem; }
.btn--medium { padding: .7em 1.4em; font-size: 1.1rem; font-weight: 600; }
.btn--light { background: #fff; color: var(--pink-dark); border-color: #fff; }
.btn--light:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--pink-dark); }
a:focus-visible, .btn:focus-visible, label:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* Top bar */
.topbar { background: var(--pink); color: #fff; font-size: .88rem; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; flex-wrap: wrap; }
.topbar i { color: #fff; margin-right: .35em; }
.topbar a { color: #fff; font-weight: 700; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }

/* Header — full width, sticky */
.header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; }
.logo img { width: clamp(150px, 15vw, 190px); height: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; position: relative; padding: .3rem 0; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav-toggle, .nav-burger { display: none; }

/* Hero */
.hero { background: linear-gradient(120deg, #fff 52%, var(--pink-soft)); padding: clamp(2.5rem, 2rem + 3.5vw, 5rem) 0 var(--space); }
.hero__head { margin-bottom: clamp(1.8rem, 3.5vw, 3.2rem); }
.hero__head h1 { max-width: 20em; margin-bottom: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .82rem; font-weight: 700; color: var(--pink); margin-bottom: 1rem; }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--muted); max-width: 58ch; margin-top: 0; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.8rem 0 1rem; }
.hero__note { color: var(--muted); font-size: .95rem; margin: 0; }
.hero__media { padding: 0 14px 14px 0; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); image-rendering: auto; box-shadow: 14px 14px 0 var(--pink); }

/* Sections */
.section { padding: var(--space) 0; }
.section--tint { background: var(--tint); }
.section__head { max-width: 760px; margin-bottom: clamp(1.6rem, 3.5vw, 3rem); }
.section__head p { color: var(--muted); }
.kicker { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); margin-bottom: .8rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border-bottom: 6px solid var(--lime); }
.split__copy p { color: var(--muted); }

/* Stats */
.stats { background: var(--pink); color: #fff; padding: clamp(2rem, 4vw, 3.4rem) 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; text-align: center; }
.stat__top { display: flex; align-items: center; justify-content: center; gap: .3em; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; }
.stat__i { font-size: 1em; opacity: .85; }
.stat__n { font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__l { display: block; margin: .7rem auto 0; font-size: .98rem; line-height: 1.35; text-align: center; opacity: .95; max-width: 26ch; }

/* Services — three equal cards */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(43,48,53,.4); border-color: var(--pink); }
.card__media { overflow: hidden; background: var(--tint); }
.card__media a { display: block; }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: clamp(1.2rem, 2vw, 1.8rem); display: flex; flex-direction: column; flex: 1; }
.card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--pink-soft); color: var(--pink); border-radius: var(--radius); font-size: 1.25rem; margin-bottom: 1rem; transition: background .2s, color .2s; }
.card:hover .card__icon { background: var(--pink); color: #fff; }
.card__body p { color: var(--muted); flex: 1; }
.more { font-weight: 700; text-decoration: none; }
.more i { margin-left: .3em; font-size: .85em; transition: transform .2s; }
.more:hover i { transform: translateX(3px); }
.more:hover { text-decoration: underline; }

/* Posts */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.post { background: #fff; border-radius: var(--radius); padding: clamp(1.2rem, 2vw, 1.8rem); border-top: 4px solid var(--pink); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.post:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(43,48,53,.4); }
.post:nth-child(2) { border-top-color: var(--lime); }
.post:nth-child(3) { border-top-color: var(--ink); }
.post h3 { font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--pink); }
.post p { color: var(--muted); font-size: .98rem; }
.post__by { font-size: .88rem; margin-top: auto; padding-top: .3rem; }
.tag { align-self: flex-start; background: var(--tint); color: var(--pink-dark); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .25em .8em; border-radius: var(--radius); margin-bottom: .9rem; }

/* Brochures */
.brochures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.brochures a { display: flex; align-items: center; gap: .8em; padding: .85em 1.1em; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-weight: 500; transition: border-color .2s, background .2s; }
.brochures a::before { content: "\f1c1"; font-family: "Font Awesome 7 Pro"; font-weight: 900; flex: none; font-size: 1.25rem; line-height: 1; color: var(--pink); }
.brochures a:hover { border-color: var(--pink); background: var(--pink-wash); }
.new { background: var(--lime); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 2px; padding: .15em .5em; margin-left: .3em; }

/* CTA — full-width band */
.cta { background: linear-gradient(135deg, var(--pink), var(--pink-dark)); color: #fff; padding: var(--space) 0; text-align: center; }
.cta h2 { color: #fff; }
.cta__panel { max-width: 840px; margin-inline: auto; }
.cta p { font-size: 1.08em; opacity: .96; }
.cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: .6rem; }

/* Footer */
.footer { background: var(--ink); color: #c9ced3; padding: clamp(2.2rem, 4vw, 3.2rem) 0 calc(1.2rem + 40px); font-size: .95rem; }
.footer__inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer__inner > div { max-width: 560px; }
.footer__logo { width: 190px; height: auto; margin-bottom: 1rem; }
.footer__small { font-size: .82rem; opacity: .7; }
.footer__social { display: flex; gap: .6rem; align-content: start; }
.footer__social a { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); transition: background .2s, border-color .2s, color .2s; }
.footer__social a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: .45rem 2.5rem; align-content: start; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { color: var(--lime); }
.footer .footer__social a, .footer .footer__social a:hover, .footer .footer__social a:focus-visible { color: #fff; }
.footer__concept { text-align: center; margin: 2rem 0 0; font-size: .8rem; opacity: .5; }

/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 960px) {
  .hero__grid, .split { grid-template-columns: 1fr; }
  .hero__media { max-width: 560px; }
  .hero__media { padding: 0 10px 10px 0; }
  .hero__media img { box-shadow: 10px 10px 0 var(--pink); aspect-ratio: 16 / 10; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .bento, .posts { grid-template-columns: 1fr; }
  .brochures { grid-template-columns: 1fr; }
  .nav-burger { display: block; width: 44px; height: 44px; cursor: pointer; position: relative; border: 1px solid var(--line); border-radius: var(--radius); }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .2s; }
  .nav-burger span { top: 20px; }
  .nav-burger span::before { left: 0; right: 0; top: -7px; }
  .nav-burger span::after { left: 0; right: 0; top: 7px; }
  .nav-toggle:checked + .nav-burger span { background: transparent; }
  .nav-toggle:checked + .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; padding: 1.2rem var(--gutter) 1.5rem; gap: 1rem; box-shadow: 0 20px 30px -20px rgba(43,48,53,.35); }
  .nav-toggle:checked ~ .nav { display: flex; }
  .topbar__hours { display: none; }
  .topbar .wrap { justify-content: center; }
}
@media (max-width: 560px) {
  .stat__l { display: block; margin: .7rem auto 0; font-size: .98rem; line-height: 1.35; text-align: center; opacity: .95; max-width: 26ch; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============ Inner pages ============ */
.nav a[aria-current="page"]:not(.btn) { color: var(--pink); }
.nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }

.page-hero { background: linear-gradient(120deg, #fff 55%, var(--pink-soft)); padding: clamp(2.5rem, 2rem + 3.5vw, 5rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); max-width: 22em; }
.page-hero .lead { max-width: 64ch; }
.page-hero .hero__actions { margin-bottom: 0; }
.jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.jump a { display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.1em; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-weight: 500; transition: border-color .2s, color .2s; }
.jump a i { color: var(--pink); }
.jump a:hover { border-color: var(--pink); color: var(--pink); }

.prose-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.prose p { color: var(--muted); }
.prose p strong { color: var(--ink); }
.ticks { list-style: none; margin: 1.2rem 0; padding: 0; }
.ticks li { position: relative; padding: .35em 0 .35em 1.9em; color: var(--muted); }
.ticks li > i { position: absolute; left: 0; top: .6em; color: var(--pink); width: 1.3em; text-align: center; }
.ticks--compact li { padding: .2em 0 .2em 1.8em; font-size: .95rem; }
.ticks--compact li > i { top: .4em; }

.award { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.award__img { width: 100%; max-width: 420px; border-radius: var(--radius); border-bottom: 6px solid var(--lime); }

.timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.timeline__year { background: #fff; border-left: 4px solid var(--pink); border-radius: var(--radius); padding: clamp(1.1rem, 2vw, 1.6rem); }
.timeline__year h3 { color: var(--pink); font-size: 1.6rem; margin-bottom: .6rem; letter-spacing: -.02em; }
.timeline__year ul { list-style: none; margin: 0; padding: 0; }
.timeline__year li { padding: .6rem 0; border-top: 1px solid var(--line); }
.timeline__year li:first-child { border-top: 0; padding-top: 0; }
.timeline__year li strong { display: block; color: var(--ink); line-height: 1.3; }
.timeline__year li span { display: block; color: var(--muted); font-size: .95rem; margin-top: .2rem; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.feature { background: #fff; border-radius: var(--radius); padding: clamp(1.3rem, 2.4vw, 2rem); border: 1px solid var(--line); }
.feature p { color: var(--muted); margin: 0; }
.note { margin-top: 2rem; padding: 1rem 1.3rem; background: #fff; border-left: 4px solid var(--lime); border-radius: var(--radius); color: var(--muted); }
.note i { color: var(--lime); margin-right: .5em; }

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.review { margin: 0; background: #fff; border-radius: var(--radius); padding: clamp(1.3rem, 2.4vw, 2rem); display: flex; flex-direction: column; border-top: 4px solid var(--pink); }
.review:nth-child(3n+2) { border-top-color: var(--lime); }
.review:nth-child(3n) { border-top-color: var(--ink); }
.review__mark { color: var(--pink-soft); font-size: 2rem; margin-bottom: .6rem; }
.review blockquote { margin: 0 0 1.2rem; flex: 1; }
.review blockquote p { color: var(--ink-2); font-size: .98rem; }
.review figcaption strong, .review figcaption span, .review figcaption small { display: block; line-height: 1.35; }
.review figcaption strong { color: var(--ink); }
.review figcaption span { color: var(--muted); font-size: .92rem; }
.review figcaption small { color: var(--pink-dark); font-size: .82rem; margin-top: .2rem; }

.faq-wrap { max-width: 920px; }
.faq__group { margin: 2.2rem 0 1rem; color: var(--pink); }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; transition: border-color .2s; }
.faq details[open] { border-color: var(--pink); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 3.2rem 1rem 1.3rem; font-weight: 700; color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\2b"; font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--pink); transition: transform .2s; }
.faq details[open] summary::after { content: "\f068"; }
.faq summary:hover { color: var(--pink); }
.faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--muted); }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.plans--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; }
.plan--popular { border: 2px solid var(--pink); box-shadow: 0 20px 40px -26px rgba(var(--pink-rgb),.6); }
.plan__badge { position: absolute; top: -.8rem; right: 1.2rem; background: var(--pink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3em .9em; border-radius: var(--radius); }
.plan__label { text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 700; color: var(--pink); margin-bottom: .4rem; }
.plan h3 { font-size: 1.2rem; }
.plan__price { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.03em; margin: .4rem 0 1rem; }
.plan__price span { font-size: .5em; vertical-align: top; margin-right: .1em; position: relative; top: .25em; }
.plan__price small { display: block; font-size: .9rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: .3rem; }
.plan .ticks { flex: 1; }
.plan .btn { align-self: flex-start; }
.plan__note { font-size: .85rem; color: var(--muted); margin: 1.1rem 0 0; }
.fine { font-size: .88rem; color: var(--muted); }
.plans + .fine { margin-top: 1.4rem; }

.addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(1.4rem, 3vw, 2.5rem); }
.addon { display: flex; gap: 1rem; background: var(--tint); border-radius: var(--radius); padding: clamp(1.2rem, 2vw, 1.8rem); }
.addon > i { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: #fff; color: var(--pink); border-radius: var(--radius); font-size: 1.25rem; }
.addon h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.addon h3 em { font-style: normal; color: var(--pink); margin-left: .4em; }
.addon p { color: var(--muted); font-size: .95rem; margin: 0; }

.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.work { margin: 0; }
.work__media { position: relative; background: #eceef0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); border-bottom: 4px solid var(--lime); aspect-ratio: 4 / 3; transition: box-shadow .25s, transform .25s, border-color .25s; }
.work__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform .5s; }
.work:hover .work__media { box-shadow: 0 18px 36px -20px rgba(43,48,53,.45); transform: translateY(-3px); }
.work:hover .work__media img, .work__link:focus-visible .work__media img { transform: scale(1.18); }
.work figcaption { margin-top: .8rem; display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; color: var(--ink); }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.bpost { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.bpost:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -18px rgba(43,48,53,.4); border-color: var(--pink); }
.bpost__media { display: block; overflow: hidden; background: var(--tint); }
.bpost__media img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: transform .5s; }
.bpost:hover .bpost__media img { transform: scale(1.03); }
.bpost__body { padding: clamp(1.2rem, 2vw, 1.8rem); display: flex; flex-direction: column; flex: 1; }
.bpost h2 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.bpost h2 a { color: var(--ink); text-decoration: none; }
.bpost h2 a:hover { color: var(--pink); }
.bpost__body > p { color: var(--muted); font-size: .96rem; }
.bpost__meta { font-size: .85rem; color: var(--muted); margin-top: auto; }
.bpost__meta i { color: var(--pink); margin-right: .2em; }
/* Related posts at the foot of a post: slightly smaller meta line */
.blog-grid--related .bpost__meta { font-size: .8rem; }
.bpost--feature { grid-column: 1 / -1; flex-direction: row; }
.bpost--feature .bpost__media { flex: 1.1; }
.bpost--feature .bpost__media img { height: 100%; aspect-ratio: auto; min-height: 280px; }
.bpost--feature .bpost__body { flex: 1; justify-content: center; }
.bpost--feature h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.blog-more { text-align: center; margin: 2.5rem 0 0; }

.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.3rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.contact-card:hover { transform: translateY(-4px); border-color: var(--pink); box-shadow: 0 16px 32px -18px rgba(43,48,53,.4); }
.contact-card h2 { font-size: 1.25rem; }
.contact-card p { color: var(--muted); font-size: .95rem; flex: 1; }
.contact-card:hover .card__icon { background: var(--pink); color: #fff; }
.contact-card__link { font-weight: 700; font-size: 1.05rem; text-decoration: none; word-break: break-word; }
.contact-card__link:hover { text-decoration: underline; }
.address { font-style: normal; font-size: 1.1em; line-height: 1.7; margin: 0 0 1.2rem; padding-left: 1.2rem; border-left: 4px solid var(--pink); color: var(--ink-2); }
.status { display: flex; align-items: center; gap: 1.2rem; justify-content: center; text-align: left; }
.status i { color: var(--lime); font-size: 1.8rem; }
.status p { margin: 0; color: var(--muted); }

@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans--three { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .addons { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .prose-grid, .award { grid-template-columns: 1fr; }
  .timeline, .plans { grid-template-columns: 1fr; }
  .features, .reviews, .work-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpost--feature { flex-direction: column; }
  .bpost--feature .bpost__media img { min-height: 0; aspect-ratio: 2 / 1; height: auto; }
  .plans { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .features, .reviews, .work-grid, .blog-grid, .contact-grid { grid-template-columns: 1fr; }
  .status { flex-direction: column; text-align: center; }
}
/* ============ CMS-driven additions ============ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Plans: included / not included */
.ticks li.is-off { color: #8a9097; }
.ticks li.is-off > i { color: #8a9097; opacity: 1; }
.ticks li.is-off .off-text { text-decoration: line-through; text-decoration-color: rgba(138,144,151,.6); }
.plan .ticks li { padding-block: .4em; border-bottom: 1px solid #f1eff0; }
.plan .ticks li:last-child { border-bottom: 0; }

/* Text & image: flipped and solo layouts */
.split--flip .split__media { order: 2; }
.split--solo { grid-template-columns: minmax(0, 760px); }
.rich > :first-child { margin-top: 0; }
.rich p { color: var(--muted); }
.rich h2, .rich h3, .rich h4 { margin-top: 1.6em; }
.rich a { font-weight: 500; }
.rich ul, .rich ol { padding-left: 0; list-style: none; margin: 1.2rem 0; }
.rich ul li { position: relative; padding: .35em 0 .35em 1.9em; color: var(--muted); }
.rich ul li::before { content: "\f00c"; font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; position: absolute; left: 0; top: .5em; color: var(--pink); font-size: .85em; }
.rich ol { counter-reset: item; }
.rich ol li { position: relative; padding: .35em 0 .35em 2.2em; color: var(--muted); counter-increment: item; }
.rich ol li::before { content: counter(item); position: absolute; left: 0; top: .4em; width: 1.5em; height: 1.5em; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink-dark); font-size: .8em; font-weight: 700; border-radius: var(--radius); }
.rich blockquote { margin: 1.6rem 0; padding: .4rem 0 .4rem 1.3rem; border-left: 4px solid var(--pink); color: var(--ink-2); font-size: 1.08em; }
.rich img { border-radius: var(--radius); margin: 1.6rem 0; }
.rich table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
.rich th, .rich td { border: 1px solid var(--line); padding: .6em .8em; text-align: left; }
.rich th { background: var(--tint); }
.rich hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.rich small { color: var(--muted); }

.section--notice { padding-block: clamp(1.4rem, 3vw, 2.4rem); }
.section--notice .status { background: var(--tint); border-left: 4px solid var(--lime); border-radius: var(--radius); padding: 1.1rem 1.4rem; justify-content: flex-start; }

/* Blog */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.tags .tag { margin-bottom: 0; text-decoration: none; }
a.tag:hover { background: var(--pink); color: #fff; }
.topic-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.topic-nav__item { padding: .45em 1em; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; transition: border-color .2s, color .2s, background .2s; }
.topic-nav__item:hover { border-color: var(--pink); color: var(--pink); }
.topic-nav__item.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; color: var(--muted); }
.post-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.post-hero h1 { max-width: 24em; }
.crumbs { margin-bottom: 1.2rem; font-weight: 500; }
.crumbs a { text-decoration: none; }
.post-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--muted); font-size: .95rem; margin: 0; }
.post-meta i { color: var(--pink); margin-right: .3em; }
[google-add-preferred-source-btn] { float: right; margin-left: 1rem; }
.article-wrap { max-width: 820px; padding-top: clamp(1.6rem, 3vw, 2.6rem); padding-bottom: var(--space); }
.article__image { margin: 0 0 1.6rem; }
.article__image img { width: 100%; height: auto; border-radius: var(--radius); }
.article__lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ink-2); border-left: 4px solid var(--lime); padding-left: 1.2rem; margin-bottom: 2rem; }
.article h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.article p, .article li { color: var(--ink-2); }
.share { display: flex; align-items: center; gap: .6rem; margin: 2.5rem 0 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.share a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.share a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.post-nav__link { display: block; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .2s; }
.post-nav__link:hover { border-color: var(--pink); }
.post-nav__link small { display: block; color: var(--pink); font-weight: 700; margin-bottom: .2rem; }
.post-nav__link--older { text-align: right; grid-column: 2; }
.bpost .tags { margin-bottom: .7rem; }

@media (max-width: 960px) {
  .split--flip .split__media { order: -1; }
  .split--solo { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--older { grid-column: auto; text-align: left; }
}
.plan .ticks li { font-size: .95rem; line-height: 1.5; }
.plan .ticks li > i { top: .55em; }

/* Code in blog posts */
.rich pre { background: var(--ink); color: #e9ecef; border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.5rem 0; overflow-x: auto; font-size: .88rem; line-height: 1.6; tab-size: 2; -webkit-overflow-scrolling: touch; }
.rich pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.rich code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background: var(--tint); padding: .12em .4em; border-radius: 3px; font-size: .9em; color: var(--pink-dark); }
/* Topic filter with disclosure */
.topic-nav__item small { margin-left: .3em; opacity: .6; font-weight: 500; }
.topic-nav__item.is-active small { opacity: .85; }
.topic-more { display: inline-block; }
.topic-more > summary { list-style: none; cursor: pointer; background: var(--tint); }
.topic-more > summary::-webkit-details-marker { display: none; }
.topic-more > summary::after { content: "\f107"; font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; font-size: .7em; margin-left: .55em; }
.topic-more[open] > summary::after { content: "\f077"; }
.topic-more[open] { display: block; width: 100%; }
.topic-more__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; padding: 1rem; background: var(--tint); border-radius: var(--radius); }
/* ============ Help centre (knowledge base) ============ */
.kb-hero { background: linear-gradient(120deg, #fff 45%, var(--pink-soft)); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 clamp(2rem, 1.5rem + 3vw, 3.5rem); border-bottom: 1px solid var(--line); }
.kb-hero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); max-width: 20em; }
.kb-hero--compact { padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem) 0; }
.kb-hero--compact h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); max-width: 28em; margin-bottom: .4em; }
.kb-hero__title { display: flex; gap: 1.2rem; align-items: center; }
.kb-hero__title h1 { margin: 0 0 .2em; }
.kb-hero__title .lead { margin: 0; }
.card__icon--lg { width: 64px; height: 64px; font-size: 1.7rem; flex: none; margin: 0; }
.kb-search { position: relative; display: flex; gap: .6rem; max-width: 760px; margin: 1.8rem 0 1rem; }
.kb-search > i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.kb-search input { flex: 1; min-width: 0; font: inherit; padding: 1rem 1.1rem 1rem 2.9rem; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.kb-search input:focus { outline: 0; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(var(--pink-rgb),.12); }
.kb-stats { display: flex; gap: 1.6rem; color: var(--muted); font-size: .95rem; margin: 0; }
.kb-stats strong { color: var(--ink); }
.kb-crumbs { margin-bottom: 1rem; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--muted); }
.kb-crumbs i { font-size: .65em; opacity: .7; }

.kb-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.kb-topic { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2vw, 1.8rem); display: flex; flex-direction: column; transition: border-color .25s, box-shadow .25s, transform .25s; }
.kb-topic:hover { border-color: var(--pink); box-shadow: 0 16px 32px -20px rgba(43,48,53,.4); transform: translateY(-3px); }
.kb-topic header { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.kb-topic header .card__icon { margin: 0; flex: none; }
.kb-topic h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.kb-topic h3 a { color: var(--ink); text-decoration: none; }
.kb-topic h3 a:hover { color: var(--pink); }
.kb-topic__intro { color: var(--muted); font-size: .94rem; margin-bottom: .8rem; }
.kb-topic ul { list-style: none; margin: 0 0 1rem; padding: 0; flex: 1; }
.kb-topic li { border-top: 1px solid var(--line); }
.kb-topic li a { display: block; padding: .55em 0 .55em 1.3em; position: relative; color: var(--ink-2); text-decoration: none; font-size: .95rem; line-height: 1.4; }
.kb-topic li a::before { content: "\f15b"; font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; position: absolute; left: 0; top: .72em; font-size: .8em; color: var(--pink); }
.kb-topic li a:hover { color: var(--pink); }

.kb-recent { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.kb-recent li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; }
.kb-recent a { font-weight: 700; color: var(--ink); text-decoration: none; display: block; }
.kb-recent a:hover { color: var(--pink); }
.kb-recent span { font-size: .85rem; color: var(--muted); }

.kb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.kb-main { min-width: 0; }
.kb-subhead { font-size: 1.15rem; margin: 0 0 1rem; }
.kb-subtopics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; margin-bottom: 2rem; }
.kb-subtopic { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 500; transition: border-color .2s; }
.kb-subtopic i { color: var(--pink); }
.kb-subtopic small { margin-left: auto; color: var(--muted); }
.kb-subtopic:hover { border-color: var(--pink); }
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list__item { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.kb-list__item:first-child { padding-top: 0; }
.kb-list__title { font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.kb-list__title:hover { color: var(--pink); }
.kb-list__item p { color: var(--muted); font-size: .95rem; margin: .3rem 0 .3rem; }
.kb-list__meta, .kb-list__topic { font-size: .82rem; color: var(--muted); margin-left: .6rem; }
.kb-list__meta { margin-left: 0; }
.kb-empty { padding: 1.4rem; background: var(--tint); border-radius: var(--radius); }
.kb-results__title { font-size: 1.4rem; }

.kb-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.2rem; }
.kb-side__search { position: relative; }
.kb-side__search input { width: 100%; font: inherit; padding: .75rem 2.8rem .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.kb-side__search input:focus { outline: 0; border-color: var(--pink); }
.kb-side__search button { position: absolute; right: 0; top: 0; bottom: 0; width: 2.8rem; border: 0; background: none; color: var(--pink); cursor: pointer; }
.kb-side__title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); margin: 0 0 .5rem; }
.kb-side__nav ul { list-style: none; margin: 0; padding: 0; }
.kb-side__nav li > a { display: block; padding: .38em .7em; border-left: 3px solid transparent; color: var(--ink-2); text-decoration: none; font-size: .95rem; line-height: 1.35; }
.kb-side__nav li > a:hover { color: var(--pink); background: var(--tint); }
.kb-side__nav li.is-current > a { border-left-color: var(--pink); color: var(--pink); font-weight: 700; background: var(--pink-soft); }
.kb-side__nav li li > a { padding-left: 1.6em; font-size: .9rem; }
.kb-side__help { background: var(--ink); color: #dfe3e6; border-radius: var(--radius); padding: 1.3rem; }
.kb-side__help > i { font-size: 1.5rem; color: var(--lime); margin-bottom: .4rem; }
.kb-side__help p { margin: 0 0 .8rem; font-size: .95rem; }
.kb-side__help strong { color: #fff; }
.kb-side__phone { margin: .8rem 0 0 !important; }
.kb-side__phone a { color: #fff; font-weight: 700; text-decoration: none; }

.kb-summary { font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); color: var(--ink-2); border-left: 4px solid var(--lime); padding-left: 1.1rem; margin: 0 0 1.5rem; }
.kb-toc { background: var(--tint); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0 0 2rem; }
.kb-toc[hidden] { display: none; }
.kb-toc__title { font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.kb-toc__title i { color: var(--pink); margin-right: .4em; }
.kb-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.kb-toc li { padding: .15em 0; break-inside: avoid; font-size: .95rem; }
.kb-toc li.is-sub { margin-left: 1.1rem; font-size: .9rem; list-style: circle; }
.kb-toc a { color: var(--ink-2); text-decoration: none; }
.kb-toc a:hover { color: var(--pink); text-decoration: underline; }
.kb-article h2, .kb-article h3, .kb-article h4 { scroll-margin-top: 110px; }
.kb-article h2 { padding-bottom: .3em; border-bottom: 1px solid var(--line); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.kb-article h3 { font-size: 1.2rem; }
.kb-article p, .kb-article li { color: var(--ink-2); }
.kb-article img { border: 1px solid var(--line); box-shadow: 0 10px 28px -18px rgba(43,48,53,.45); max-width: 100%; height: auto; }
.kb-article ol { counter-reset: item; }
.kb-article ol li { counter-increment: item; }
.kb-article blockquote { background: var(--pink-soft); border-left-color: var(--pink); padding: .9rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; }
.kb-article blockquote p { margin: 0; color: var(--ink); }
.kb-article table { display: block; overflow-x: auto; }
.kb-feedback { margin-top: 2.5rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: var(--radius); }
.kb-feedback p { margin: 0 0 .4rem; }
.kb-related { margin-top: 2.5rem; }
.kb-related h2 { font-size: 1.3rem; }
.kb-related ul { list-style: none; padding: 0; margin: 0; }
.kb-related li { border-top: 1px solid var(--line); }
.kb-related li a { display: block; padding: .7em 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.kb-related li a::before { content: "\f105"; font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; font-size: .7em; color: var(--pink); margin-right: .7em; }
.kb-related li a:hover { color: var(--pink); }

@media (max-width: 960px) {
  .kb-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-layout { grid-template-columns: 1fr; }
  .kb-side { position: static; }
  .kb-layout--article .kb-side { order: 2; }
  .kb-recent { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kb-topics { grid-template-columns: 1fr; }
  .kb-search { flex-direction: column; }
  .kb-toc ol { columns: 1; }
  .kb-hero__title { flex-direction: column; align-items: flex-start; }
}
/* ============ Nav dropdowns ============ */
.header__inner { position: relative; }
.nav__group { display: flex; align-items: center; }
.nav__caret { font-size: .65em; margin-left: .35em; opacity: .65; transition: transform .2s; }
html:not(.js) .nav__group:hover .nav__caret, .nav__group.is-hover .nav__caret, .nav__group:focus-within .nav__caret { transform: rotate(180deg); }
.nav__group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }

/* ============ Legal hub ============ */
.legal-hero { background: linear-gradient(120deg, #fff 45%, var(--pink-soft)); padding: clamp(2.2rem, 1.6rem + 3vw, 4.2rem) 0 clamp(1.8rem, 1.4rem + 2vw, 3rem); border-bottom: 1px solid var(--line); }
.legal-hero h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem); max-width: 22em; }
.legal-hero .lead { max-width: 70ch; }
.legal-hero--doc h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); max-width: 26em; }
.legal-filter { position: relative; max-width: 640px; margin: 1.6rem 0 .5rem; }
.legal-filter > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.legal-filter input { width: 100%; font: inherit; padding: .9rem 1rem .9rem 2.7rem; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; }
.legal-filter input:focus { outline: 0; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(var(--pink-rgb),.12); }
.legal-count { margin: 0; min-height: 1.4em; color: var(--muted); font-size: .92rem; }
.legal-group { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.legal-group[hidden], .legal-card[hidden] { display: none; }
.legal-group__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.legal-group__head .card__icon { margin: 0; flex: none; }
.legal-group__head h2 { font-size: 1.5rem; margin: 0; }
.legal-group__head p { margin: 0; color: var(--muted); font-size: .95rem; }
.legal-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.legal-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, transform .2s; }
.legal-card:hover { border-color: var(--pink); box-shadow: 0 14px 30px -20px rgba(43,48,53,.4); transform: translateY(-2px); }
.legal-card h3 { font-size: 1.1rem; margin-bottom: .4em; }
.legal-card h3 a { color: var(--ink); text-decoration: none; }
.legal-card h3 a:hover { color: var(--pink); }
.legal-card p { color: var(--muted); font-size: .93rem; flex: 1; }
.legal-card__subs { list-style: none; margin: 0 0 .9rem; padding: .6rem 0 0; border-top: 1px solid var(--line); font-size: .9rem; }
.legal-card__subs a { color: var(--ink-2); text-decoration: none; display: block; padding: .2em 0; }
.legal-card__subs a:hover { color: var(--pink); }
.legal-card__subs i { color: var(--pink); margin-right: .4em; font-size: .75em; }
.legal-empty { padding: 1.2rem; background: var(--tint); border-radius: var(--radius); }

.legal-actions { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; color: var(--muted); font-size: .93rem; margin-top: 1.2rem; }
.legal-actions i { color: var(--pink); margin-right: .35em; }
.legal-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.legal-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.4rem; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: .3rem; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.legal-toc li { padding: .22em 0; line-height: 1.35; }
.legal-toc li.is-sub { margin-left: .9rem; list-style: circle; font-size: .87rem; }
.legal-toc a, .legal-docs a:not(.more) { color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover, .legal-docs a:hover { color: var(--pink); }
.legal-docs ul { list-style: none; margin: 0 0 .8rem; padding: 0; }
.legal-docs li a:not(.more) { display: block; padding: .38em .7em; border-left: 3px solid transparent; font-size: .92rem; line-height: 1.35; }
.legal-docs li.is-current a { border-left-color: var(--pink); color: var(--pink); font-weight: 700; background: var(--pink-soft); }
.legal-docs li.is-child a { padding-left: 1.6em; font-size: .88rem; }
.legal-doc { min-width: 0; max-width: 78ch; }
.legal-body { font-size: 1.02rem; line-height: 1.75; }
.legal-body h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); margin-top: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.legal-body h3 { font-size: 1.12rem; margin-top: 1.6em; scroll-margin-top: 110px; }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-body ol { padding-left: 1.4rem; list-style: decimal; }
.legal-body ol li { padding-left: .3em; }
.legal-body ol li::before { display: none; }
.legal-body ol li { counter-increment: none; }
.legal-body table { display: block; overflow-x: auto; }
.legal-related { margin-top: 2.5rem; padding: 1.3rem 1.5rem; background: var(--tint); border-radius: var(--radius); }
.legal-related h2 { font-size: 1.15rem; margin-bottom: .6rem; }
.legal-related ul { list-style: none; margin: 0; padding: 0; }
.legal-related li { padding: .5rem 0; border-top: 1px solid var(--line); }
.legal-related li:first-child { border-top: 0; }
.legal-related li a { font-weight: 700; }
.legal-related li span { display: block; color: var(--muted); font-size: .9rem; }
.legal-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

@media (max-width: 1000px) { .legal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-side { position: static; max-height: none; overflow: visible; order: 2; }
  .nav__group { flex-direction: column; align-items: flex-start; width: 100%; }
  .nav__group::after { display: none; }
  .nav__caret { display: none; }
}
@media (max-width: 600px) { .legal-cards { grid-template-columns: 1fr; } }
@media print {
  .topbar, .header, .footer, .legal-side, .legal-actions, .legal-hero .eyebrow, .cta, .legal-filter, .kb-crumbs, .reviews { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .legal-hero { background: none; border: 0; padding: 0 0 1rem; }
  .legal-layout { display: block; }
  .legal-doc { max-width: none; }
  a { color: inherit; text-decoration: none; }
  .legal-body h2 { break-after: avoid; }
}
/* Mega menu */
.nav__group { position: static; align-self: stretch; }
.nav__group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav__group > a { position: relative; z-index: 2; align-self: center; }
.mega { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 1fr auto; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--pink); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 30px 50px -24px rgba(43,48,53,.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 40; overflow: hidden; }
html:not(.js) .nav__group:hover .mega, .nav__group.is-hover .mega, .nav__group:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__feature { grid-row: 1 / 3; position: relative; display: flex; flex-direction: column; min-height: 260px; text-decoration: none; background: var(--ink); color: #fff; overflow: hidden; }
.mega__feature img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .5s; }
.mega__feature::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(43,48,53,.05) 0%, rgba(43,48,53,.9) 80%); }
.mega__feature-body { position: relative; z-index: 2; margin-top: auto; padding: 1.4rem; display: grid; gap: .35rem; }
.mega__feature-body strong { font-size: 1.15rem; line-height: 1.25; }
.mega__feature-body small { font-size: .88rem; line-height: 1.45; opacity: .92; }
.mega__feature-body em { justify-self: start; margin-top: .45rem; font-style: normal; font-weight: 500; font-size: .95rem; color: var(--ink); background: var(--lime); border: 2px solid var(--lime); border-radius: var(--radius); padding: .5em 1.15em; transition: background .2s, border-color .2s; }
.mega__feature:hover .mega__feature-body em { background: var(--lime-hover); border-color: var(--lime-hover); }
.mega__feature-body em i { transition: transform .2s; }
.mega__feature:hover img { transform: scale(1.05); }
.mega__feature:hover .mega__feature-body em i { transform: translateX(3px); }
.nav .mega__feature, .nav .mega__feature:hover { color: #fff; }
.mega__list { list-style: none; margin: 0; padding: 1.2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem .6rem; align-content: start; }
.nav .mega__list a { display: flex; gap: .85rem; align-items: flex-start; padding: .75rem .85rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: background .2s; }
.nav .mega a::after { display: none; }
.mega__icon { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink); border-radius: var(--radius); transition: background .2s, color .2s; }
.mega__text { display: grid; gap: .1rem; }
.mega__text strong { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.mega__text small { font-size: .84rem; line-height: 1.4; color: var(--ink-2); font-weight: 400; }
.nav .mega__list a:hover, .nav .mega__list a:focus-visible { background: var(--pink-soft); }
.nav .mega__list a:hover .mega__icon, .nav .mega__list a:focus-visible .mega__icon { background: var(--pink); color: #fff; }
.nav .mega__list a:hover strong { color: var(--pink-dark); }
.mega__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.2rem; background: #f7f7f8; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.mega__foot i { color: var(--pink); }
.nav .mega__foot a { color: var(--pink); font-weight: 700; text-decoration: none; }
.nav .mega__foot a:hover { color: var(--pink-dark); }
@media (max-width: 960px) {
  .nav__group { flex-direction: column; align-items: flex-start; width: 100%; align-self: auto; }
  .nav__group::after { display: none; }
  .nav__caret { display: none; }
  .mega { position: static; display: block; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--pink-soft); border-radius: 0; margin: .2rem 0 .2rem .3rem; overflow: visible; background: transparent; }
  .mega__feature, .mega__foot, .mega__text small { display: none; }
  .mega__list { grid-template-columns: 1fr; padding: .1rem 0 .1rem .6rem; }
  .nav .mega__list a { padding: .4rem .5rem; }
  .mega__icon { width: 1.8rem; height: 1.8rem; font-size: .8rem; }
}
.nav a.mega__feature:not(.btn), .nav a.mega__feature:not(.btn):hover { color: #fff; }
.nav a.mega__feature:not(.btn)::after { display: none; }
.nav .mega__feature-body em { color: var(--ink); }

/* Image shapes, linked images and plan alignment */
.split__link { display: block; border-radius: var(--radius); overflow: hidden; }
.split__link img { transition: transform .5s; }
.split__link:hover img { transform: scale(1.03); }
.split__media--square img { aspect-ratio: 1 / 1; max-width: 460px; margin-inline: auto; display: block; }
.split__media--tall img { aspect-ratio: 3 / 4; max-width: 400px; margin-inline: auto; display: block; object-position: center 35%; }
.split__media--square .split__link, .split__media--tall .split__link { max-width: 460px; margin-inline: auto; }
.plan h3 { min-height: 2.6em; }
.plan__note { min-height: 5.6em; }
@media (max-width: 960px) { .plan h3, .plan__note { min-height: 0; } }

/* Our Work: year groups, badges, captions */
.work-year { display: flex; align-items: baseline; gap: 1rem; margin: clamp(2rem, 4vw, 3.2rem) 0 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.work-year:first-of-type { margin-top: 0; }
.work-year h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; color: var(--ink); }
.work-year span { color: var(--muted); font-size: .92rem; }
.work__link { display: block; color: inherit; text-decoration: none; }
.work__link:hover .work__media { border-bottom-color: var(--pink); }
.work__badge { position: absolute; top: .7rem; left: .7rem; background: var(--pink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3em .8em; border-radius: var(--radius); }
.work figcaption strong { font-size: 1.02rem; }
.work figcaption time { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.work__link:hover figcaption strong { color: var(--pink); }

/* Error pages */
.err { background: linear-gradient(120deg, #fff 52%, var(--pink-soft)); padding: clamp(2.5rem, 2rem + 3.5vw, 5rem) 0; overflow: hidden; }
.err__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.err__code { font-size: clamp(5.5rem, 4rem + 9vw, 11rem); font-weight: 800; line-height: .85; letter-spacing: -.05em; color: var(--pink); opacity: .14; margin: 0 0 .5rem; }
.err h1 { margin-top: 0; }
.err__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.4rem; }
.err__search { position: relative; display: flex; gap: .6rem; max-width: 34rem; }
.err__search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.err__search input { flex: 1; min-width: 0; padding: .75em 1em .75em 2.6rem; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.err__search input:focus { outline: 3px solid var(--lime); outline-offset: 1px; border-color: var(--pink); }
.err__media { display: block; max-width: 340px; margin-inline: auto; border-radius: var(--radius); box-shadow: 14px 14px 0 var(--pink); }
.err__media img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.err__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.err__link { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.err__link .card__icon { margin: 0; flex: none; }
.err__link strong { display: block; }
.err__link small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.4; margin-top: .15rem; }
.err__link:hover { border-color: var(--pink); box-shadow: 0 14px 30px -20px rgba(43,48,53,.4); transform: translateY(-2px); }
.err__link:hover .card__icon { background: var(--pink); color: #fff; }
.err__posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.err__post { display: flex; flex-direction: column; justify-content: space-between; gap: .8rem; padding: 1.2rem; border: 1px solid var(--line); border-top: 3px solid var(--pink); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.err__post span { color: var(--pink); font-size: .88rem; font-weight: 700; }
.err__post:hover { box-shadow: 0 14px 30px -20px rgba(43,48,53,.4); }
.err__post:hover strong { color: var(--pink); }
@media (max-width: 960px) { .err__inner { grid-template-columns: 1fr; } .err__media { max-width: 260px; margin: 0 14px 14px 0; box-shadow: 10px 10px 0 var(--pink); } .err__links, .err__posts { grid-template-columns: 1fr; } }

/* Help centre topic cards: roomier spacing */
.kb-topics { gap: clamp(1.25rem, 2.4vw, 2.2rem); }
.kb-topic { padding: clamp(1.5rem, 2.4vw, 2.2rem); }
.kb-topic header { gap: 1rem; margin-bottom: 1rem; padding-bottom: 1.1rem; border-bottom: 2px solid var(--pink-soft); min-height: 4.6rem; }
.kb-topic h3 { font-size: 1.18rem; line-height: 1.3; }
.kb-topic__intro { margin: 0 0 1.1rem; line-height: 1.55; font-size: .93rem; }
.kb-topic ul { margin: 0 0 1.4rem; }
.kb-topic li a { padding: .75em 0 .75em 1.6em; line-height: 1.45; }
.kb-topic li a::before { top: 1em; }
.kb-topic li:first-child { border-top: 0; }
.kb-topic > .more { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); }

/* Plans: each column ends where its own content ends */
.plans { align-items: start; }
.plan__note { min-height: 0; }

/* Add-on cards (e.g. SEO extras): each card ends with its own content */
.addons { align-items: start; }

/* Add-on cards: stacked layout with a prominent price */
.addon { display: block; position: relative; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--pink); padding: clamp(1.4rem, 2.4vw, 2.1rem); transition: box-shadow .25s, transform .25s, border-color .25s; }
.addon:hover { box-shadow: 0 16px 32px -20px rgba(43,48,53,.4); transform: translateY(-3px); }
.addon__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.addon__icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: var(--pink-soft); color: var(--pink); border-radius: var(--radius); font-size: 1.3rem; transition: background .2s, color .2s; }
.addon:hover .addon__icon { background: var(--pink); color: #fff; }
.addon h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.addon__price { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.addon__price strong { font-size: 2rem; line-height: 1; letter-spacing: -.03em; color: var(--ink); margin-right: .15em; }
.addon__text { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 0; }

.addon .addon__price { margin: 0 0 1.1rem; }

.addons:has(> .addon:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .addons:has(> .addon:nth-child(2):last-child) { grid-template-columns: 1fr; } }

.addons + .fine { margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ======================================================================
   Mobile & tablet polish
   ====================================================================== */
.footer__contact { align-self: start; }
.footer__head { margin: 0 0 .7rem; font-weight: 700; color: #fff; }
.footer__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__contact li { display: flex; gap: .7rem; align-items: baseline; }
.footer__contact i { color: var(--lime); width: 1.1em; text-align: center; flex: none; }
.footer__contact a { color: #fff; text-decoration: none; }
.footer__contact a:hover { color: var(--lime); }
.mbar, .topic-select, .legal-toc-m { display: none; }
.legal-toc-m { margin: 0 0 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.legal-toc-m summary { cursor: pointer; padding: .85rem 1rem; font-weight: 700; list-style: none; display: flex; align-items: center; gap: .6rem; }
.legal-toc-m summary::-webkit-details-marker { display: none; }
.legal-toc-m summary i { color: var(--pink); }
.legal-toc-m summary::after { content: "\f107"; font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; margin-left: auto; font-size: .75em; }
.legal-toc-m[open] summary::after { content: "\f077"; }
.legal-toc-m ol { margin: 0; padding: .2rem 1rem 1rem 2.4rem; font-size: .93rem; }
.legal-toc-m li { padding: .4em 0; line-height: 1.35; }
.legal-toc-m li.is-sub { margin-left: .8rem; list-style: circle; font-size: .88rem; }
.legal-toc-m a { color: var(--ink-2); text-decoration: none; }
.legal-toc-m a:hover { color: var(--pink); }

/* Tablet */
@media (max-width: 960px) {
  .nav a:not(.btn) { padding: .6rem 0; }
  .nav .btn { align-self: stretch; text-align: center; }
  .nav { max-height: calc(100vh - 110px); overflow-y: auto; gap: .2rem; }
  .legal-toc-m { display: block; }
  .legal-toc-m[hidden] { display: none; }
  .legal-side .legal-toc { display: none; }
  .features, .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__inner { gap: 1.6rem 2rem; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --space: clamp(2.2rem, 1.4rem + 5vw, 3.2rem); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .mbar { display: grid; grid-template-columns: 1fr 1.5fr; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -16px rgba(43,48,53,.5); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; border: 2px solid var(--pink); border-radius: var(--radius); color: var(--pink); font-weight: 700; text-decoration: none; }
  .mbar a.mbar__main { background: var(--pink); color: #fff; }
  .topbar { font-size: .85rem; }

  /* Buttons: full width and easy to tap */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .cta .btn { text-align: center; }
  .split__copy > .btn, .plan .btn { display: block; text-align: center; }
  .btn { padding: .95em 1.4em; }
  .btn--small { padding: .7em 1.2em; }
  .btn--medium { padding: .85em 1.3em; }
  .cta .btn + .btn { margin-top: .6rem; }

  /* Imagery: shorter, so copy appears sooner */
  .card__media img { aspect-ratio: 16 / 9; }
  .split__media img { aspect-ratio: 16 / 10; }
  .split__media--square img, .split__media--tall img { aspect-ratio: 4 / 3; max-width: 100%; object-fit: cover; }
  .split__media--tall img { object-position: center 30%; }
  .hero__media img { box-shadow: 8px 8px 0 var(--pink); }

  /* Notices read left to right */
  .status { flex-direction: row; text-align: left; align-items: flex-start; }
  .status i { margin-top: .15rem; }

  /* Testimonials: swipe sideways instead of a long stack */
  .reviews { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: .2rem var(--gutter) 1rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .reviews .review { flex: 0 0 86%; scroll-snap-align: center; }

  /* Tighter gaps */
  .features { grid-template-columns: 1fr; }
  .features, .addons, .contact-grid, .err__links, .err__posts { gap: .9rem; }
  .plans { gap: 1.4rem; }
  .plan h3, .plan__note { min-height: 0; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .work figcaption { flex-direction: column; gap: .1rem; }
  .work-year { margin-top: 1.6rem; }

  /* Blog: one topic select instead of a wall of chips */
  .topic-nav { display: none; }
  .topic-select { display: block; margin-bottom: 1.4rem; }
  .topic-select select { width: 100%; font: inherit; padding: .85rem 2.4rem .85rem 1rem; min-height: 48px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23e51463%27 stroke-width=%272%27/%3E%3C/svg%3E") no-repeat right 1rem center; appearance: none; color: var(--ink); }
  .topic-select select:focus { outline: 0; border-color: var(--pink); }

  /* Help centre: compact topic rows */
  .kb-search { flex-direction: column; }
  .kb-search > i { top: 1.9rem; }
  .kb-topics { gap: .7rem; }
  .kb-topic { padding: 1rem 1.1rem; }
  .kb-topic header { margin: 0; padding: 0; border: 0; min-height: 0; }
  .kb-topic .card__icon { width: 40px; height: 40px; font-size: 1.05rem; }
  .kb-topic h3 { font-size: 1.05rem; }
  .kb-topic__intro, .kb-topic ul { display: none; }
  .kb-topic > .more { margin-top: .7rem; padding-top: .7rem; font-size: .92rem; }

  /* Legal hub */
  .legal-hero .lead:nth-of-type(n+2) { display: none; }
  .legal-cards { gap: .8rem; }
  .legal-card { padding: 1.1rem; }

  /* Footer */
  .footer__inner { gap: 1.4rem; }
  .footer__nav a, .footer__contact a { display: inline-block; padding: .35rem 0; }
  .footer__social a { width: 46px; height: 46px; }

  /* Error pages */
  .err__code { font-size: 5.5rem; }
  .err__search { flex-direction: column; }
  .err__search i { top: 1.65rem; }
  .contact-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem; }
  .contact-card .card__icon { grid-row: 1 / span 3; margin: 0; }
  .contact-card h2 { font-size: 1.15rem; margin: 0 0 .25rem; }
  .contact-card p { margin: 0 0 .5rem; font-size: .93rem; }
  .jump { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .jump a { justify-content: flex-start; padding: .7em .9em; font-size: .92rem; }
  .plan .btn { align-self: stretch; }
}
.kb-toc.is-collapsible .kb-toc__title { margin: 0; cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.kb-toc.is-collapsible .kb-toc__title::after { content: "\f107"; font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; margin-left: auto; font-size: .75em; color: var(--pink); }
.kb-toc.is-collapsible:not(.is-closed) .kb-toc__title::after { content: "\f077"; }
.kb-toc.is-collapsible:not(.is-closed) .kb-toc__title { margin-bottom: .5rem; }
.kb-toc.is-closed ol { display: none; }

/* Tablet portrait: use the width instead of stacking everything */
@media (min-width: 641px) and (max-width: 960px) {
  .bento, .posts, .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento .card__body { padding: 1.1rem; }
  .bento .card__media img { aspect-ratio: 16 / 10; }
  .split__media img { aspect-ratio: 16 / 9; }
  .split__media--square img, .split__media--tall img { aspect-ratio: 4 / 3; max-width: 100%; }
  .brochures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-topics, .legal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans--three { grid-template-columns: 1fr; }
}

/* Mobile menu accordion */
.nav__expand { display: none; }
@media (max-width: 960px) {
  .nav__group { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; width: 100%; }
  .nav__group > a { justify-self: start; font-weight: 700; }
  .nav__group > a .nav__caret { display: none; }
  .nav__expand { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: none; color: var(--pink); cursor: pointer; border-radius: var(--radius); }
  .nav__expand i { transition: transform .2s; }
  .nav__group.is-open .nav__expand i { transform: rotate(180deg); }
  .nav__group > .mega { grid-column: 1 / -1; display: none; }
  .nav__group.is-open > .mega { display: block; }
  .nav a:not(.btn)::after { display: none; }
  .nav > a:not(.btn) { padding: .75rem 0; font-weight: 700; width: 100%; }
  .nav .btn { margin-top: .6rem; }
}
@media (max-width: 640px) {
  .nav { max-height: calc(100dvh - 110px - 76px); }
  body:has(.nav-toggle:checked) .mbar { display: none; }
}
@media print { .mbar { display: none !important; } }

/* Megamenu: overview link for the top-level page */
.mega__overview { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .3rem; }
.nav .mega__overview a { align-items: center; background: var(--tint); }
.nav .mega__overview a:hover { background: var(--pink-soft); }
.mega__go { margin-left: auto; color: var(--pink); transition: transform .2s; }
.mega__overview a:hover .mega__go { transform: translateX(3px); }
@media (max-width: 960px) { .mega__overview { padding-bottom: .2rem; margin-bottom: 0; border: 0; } .mega__go { display: none; } }

/* Image display options: show the whole image */
.split__media--whole img, .split__media--padded img { aspect-ratio: auto; height: auto; object-fit: contain; }
.split__media--padded { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); border-bottom: 6px solid var(--lime); padding: clamp(1.5rem, 4vw, 3rem); }
.split__media--padded img { border-bottom: 0; border-radius: 0; }
.split__media--padded .split__link { max-width: none; }
.section--tint .split__media--padded { background: #fff; }

/* Testimonials carousel */
.tcar { position: relative; }
.tcar__viewport { overflow: hidden; }
.tcar:not(.is-js) .reviews { display: grid; }
.tcar.is-js .reviews { display: flex; gap: clamp(1rem, 2vw, 1.75rem); overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; transition: none; will-change: transform; }
.tcar.is-js .review { flex: 0 0 calc((100% - 2 * 1.75rem) / 3); }
.tcar .review { border-top-color: var(--pink); user-select: none; }
.tcar .review[data-tone="1"] { border-top-color: var(--lime); }
.tcar .review[data-tone="2"] { border-top-color: var(--ink); }
.tcar__btn { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--pink); border-radius: 50%; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(43,48,53,.5); transition: background .2s, color .2s, border-color .2s; }
.tcar__btn:hover, .tcar__btn:focus-visible { background: var(--pink); border-color: var(--pink); color: #fff; }
.tcar__btn--prev { left: -23px; }
.tcar__btn--next { right: -23px; }
.tcar.is-static .tcar__btn { display: none; }
@media (max-width: 1280px) { .tcar__btn--prev { left: -8px; } .tcar__btn--next { right: -8px; } }
@media (max-width: 640px) { .tcar__btn { top: auto; bottom: -4px; margin: 0; } .tcar__btn--prev { left: auto; right: 62px; } .tcar__btn--next { right: 8px; } .tcar { padding-bottom: 3.4rem; } }

/* Four feature cards sit as a 2x2 grid instead of leaving one orphan */
@media (min-width: 961px) { .features:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================================
   Alternative homepage (/welcome)
   ====================================================================== */
.w-hero { background: radial-gradient(circle at 85% 20%, rgba(var(--pink-rgb),.35), transparent 45%), var(--ink); color: #fff; padding: clamp(2.5rem, 2rem + 4vw, 6rem) 0; overflow: hidden; }
.w-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.w-chip { display: inline-flex; gap: .5em; align-items: center; margin: 0 0 1.2rem; padding: .35em .9em; border: 1px solid rgba(255,255,255,.3); border-radius: 99px; font-size: .88rem; color: #fff; }
.w-chip i { color: var(--lime); }
.w-hero h1 { color: #fff; font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 1.2rem; }
.w-hero h1 span { color: var(--pink-light); }
.w-lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: rgba(255,255,255,.82); max-width: 54ch; }
.w-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0; }
.w-proof { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: rgba(255,255,255,.85); font-size: .95rem; }
.w-proof i { color: var(--lime); width: 1.4em; }
.w-hero__media { position: relative; display: block; transform: rotate(1.5deg); }
.w-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); image-rendering: auto; border: 6px solid #fff; box-shadow: -16px 16px 0 var(--pink); display: block; }
.w-badge { position: absolute; left: -1.4rem; bottom: 2rem; background: var(--lime); color: var(--ink); padding: 1rem 1.3rem; border-radius: var(--radius); line-height: 1.1; font-weight: 700; transform: rotate(-4deg); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.w-badge strong { display: block; font-size: 2.4rem; letter-spacing: -.03em; }
.w-service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--line); }
.w-service.is-flip .w-service__media { order: 2; }
.w-service__media { display: block; overflow: hidden; border-radius: var(--radius); }
.w-service__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .6s; }
.w-service__media:hover img { transform: scale(1.04); }
.w-num { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 800; line-height: .9; color: var(--pink-soft); letter-spacing: -.05em; display: block; }
.w-service h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin: .2rem 0 .6rem; }
.w-service h3 i { color: var(--pink); margin-right: .35em; font-size: .85em; }
.w-service p { color: var(--muted); max-width: 48ch; }
.w-pills { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1rem 0 1.4rem; }
.w-pills a { display: inline-block; padding: .35em .9em; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-2); text-decoration: none; font-size: .9rem; transition: border-color .2s, color .2s, background .2s; }
.w-pills a:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-soft); }
.w-numbers { background: var(--pink); color: #fff; padding: clamp(2rem, 4vw, 3.4rem) 0; }
.w-numbers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; text-align: center; }
.w-numbers strong { display: block; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: -.03em; }
.w-numbers span { display: block; margin: .5rem auto 0; max-width: 24ch; font-size: .98rem; opacity: .95; }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h2 { color: #fff; }
.section--dark .kicker { color: var(--pink-light-2); }
.w-work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.w-project { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: #1d2023; color: #fff; text-decoration: none; }
.w-project img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform .6s; }
.w-project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20,22,24,.9)); }
.w-project span { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.w-project small { opacity: .75; }
.w-project:hover img { transform: scale(1.18); }
.w-project:hover strong { color: var(--pink-light-2); }
.w-center { text-align: center; margin: 2rem 0 0; }
.w-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.w-step { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.w-step__icon { display: grid; place-items: center; width: 52px; height: 52px; background: var(--pink); color: #fff; border-radius: var(--radius); font-size: 1.3rem; margin-bottom: 1rem; }
.w-step h3 { margin: 0 0 .4rem; }
.w-step p { margin: 0; color: var(--muted); font-size: .95rem; }
.w-quotes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.w-quote { margin: 0; background: #fff; border-radius: var(--radius); padding: 1.6rem; border-left: 5px solid var(--pink); display: flex; flex-direction: column; }
.w-quote > i { color: var(--pink-soft); font-size: 2rem; margin-bottom: .6rem; }
.w-quote blockquote { margin: 0 0 1rem; flex: 1; }
.w-quote blockquote p { margin: 0; color: var(--ink-2); }
.w-quote figcaption strong, .w-quote figcaption span { display: block; }
.w-quote figcaption span { color: var(--muted); font-size: .92rem; }
.w-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.w-post { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: box-shadow .25s, transform .25s, border-color .25s; }
.w-post:hover { box-shadow: 0 16px 32px -20px rgba(43,48,53,.4); transform: translateY(-3px); border-color: var(--pink); }
.w-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.w-post__body { display: block; padding: 1.1rem 1.2rem 1.3rem; }
.w-post small { display: block; color: var(--pink); font-weight: 700; margin-bottom: .3rem; }
.w-post strong { display: block; line-height: 1.3; }
.w-final { background: linear-gradient(135deg, var(--pink), var(--pink-dark)); color: #fff; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.w-final__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.w-final h2 { color: #fff; margin: 0 0 .4rem; }
.w-final p { margin: 0; color: rgba(255,255,255,.9); max-width: 46ch; }
.w-final__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 960px) {
  .w-hero__grid, .w-service { grid-template-columns: 1fr; }
  .w-service.is-flip .w-service__media { order: 0; }
  .w-hero__media { max-width: 440px; transform: none; margin: 0 1.4rem 1.4rem 0; }
  .w-numbers__grid, .w-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-work__grid, .w-posts, .w-quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .w-actions .btn, .w-final__actions .btn { display: block; text-align: center; width: 100%; }
  .w-final__actions { width: 100%; }
  .w-work__grid, .w-posts, .w-quotes__grid, .w-steps__list { grid-template-columns: 1fr; }
  .w-badge { left: auto; right: -.6rem; bottom: 1rem; }
}

/* ======================================================================
   Homepage concept B (/homepage)
   ====================================================================== */
.h-hero { padding: clamp(2.5rem, 2rem + 4vw, 6rem) 0 clamp(2rem, 4vw, 4rem); background: linear-gradient(180deg, var(--pink-soft) 0%, #fff 100%); text-align: center; }
.h-eyebrow { display: inline-block; margin: 0 0 1.2rem; padding: .35em 1em; background: #fff; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.h-hero h1 { max-width: 20ch; margin: 0 auto 1.2rem; font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem); line-height: 1.05; letter-spacing: -.03em; }
.h-hero h1 span { color: var(--pink); }
.h-lead { max-width: 52ch; margin: 0 auto; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--muted); }
.h-choose { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3.4rem); text-align: left; }
.h-choice { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem 1.3rem 3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .25s, transform .25s; }
.h-choice:hover { border-color: var(--pink); box-shadow: 0 18px 34px -22px rgba(var(--pink-rgb),.55); transform: translateY(-4px); }
.h-choice__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: .6rem; background: var(--pink-soft); color: var(--pink); border-radius: var(--radius); font-size: 1.25rem; transition: background .2s, color .2s; }
.h-choice:hover .h-choice__icon { background: var(--pink); color: #fff; }
.h-choice strong { font-size: 1.1rem; line-height: 1.25; }
.h-choice small { color: var(--muted); font-size: .92rem; line-height: 1.4; }
.h-choice__go { position: absolute; left: 1.3rem; bottom: 1.2rem; color: var(--pink); transition: transform .2s; }
.h-choice:hover .h-choice__go { transform: translateX(5px); }
.h-clients { border-block: 1px solid var(--line); padding: 1.1rem 0; background: #fff; }
.h-clients .wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.h-clients p { margin: 0; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.h-clients ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; margin: 0; padding: 0; }
.h-clients li { font-weight: 700; color: var(--ink-2); opacity: .75; }
.h-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 1rem; }
.h-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; padding: 1.4rem; border-radius: var(--radius); background: var(--tint); color: var(--ink); text-decoration: none; margin: 0; }
.h-tile > i:first-child { font-size: 1.6rem; color: var(--pink); margin-bottom: auto; }
.h-tile strong { line-height: 1.2; font-size: 1.1rem; }
.h-tile span, .h-tile small { font-size: .92rem; }
.h-tile--photo { grid-column: span 2; grid-row: span 2; background-size: cover; background-position: center; color: #fff; }
.h-tile--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(20,22,24,.85)); }
.h-tile__label { position: relative; z-index: 1; display: grid; gap: .3rem; }
.h-tile__label strong { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); }
.h-tile--photo small { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--pink-light-3); }
.h-tile--stat { align-items: flex-start; justify-content: center; background: #fff; border: 1px solid var(--line); }
.h-tile--stat strong { font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: 1; letter-spacing: -.04em; color: var(--pink); }
.h-tile--pink { background: var(--pink); border-color: var(--pink); color: #fff; }
.h-tile--pink strong { color: #fff; }
.h-tile--lime { background: var(--lime); }
.h-tile--lime > i { color: var(--ink); }
.h-tile--dark { background: var(--ink); color: #fff; transition: background .2s; }
.h-tile--dark > i:first-child { color: var(--lime); }
.h-tile--dark span i { margin-left: .3em; transition: transform .2s; display: inline-block; }
.h-tile--dark:hover { background: #1d2023; }
.h-tile--dark:hover span i { transform: translateX(4px); }
.h-tile--quote { grid-column: span 2; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--pink); justify-content: space-between; }
.h-tile--quote > i { color: var(--pink-soft); font-size: 1.8rem; }
.h-tile--quote blockquote { margin: 0; font-size: 1.05rem; color: var(--ink-2); }
.h-tile--quote figcaption { font-weight: 700; font-size: .92rem; }
.h-tile--work, .h-tile--post { padding: 0; justify-content: flex-end; color: #fff; background: #1d2023; }
.h-tile--work img, .h-tile--post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.h-tile--work::after, .h-tile--post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,22,24,.88)); }
.h-tile--work span, .h-tile--post span { position: relative; z-index: 2; padding: 1.2rem; display: grid; gap: .2rem; }
.h-tile--work small, .h-tile--post small { color: var(--pink-light-3); font-weight: 700; }
.h-tile--work:hover img, .h-tile--post:hover img { transform: scale(1.06); }
.h-tile--work img { object-position: center top; }
.h-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.h-price { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; gap: .5rem; }
.h-price.is-hot { border: 2px solid var(--pink); box-shadow: 0 20px 40px -28px rgba(var(--pink-rgb),.7); }
.h-price__label { margin: 0; text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 700; color: var(--pink); }
.h-price__amount { margin: 0; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.h-price__amount sup { font-size: .45em; vertical-align: top; position: relative; top: .3em; margin-right: .1em; }
.h-price__amount small { font-size: .3em; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: .3em; }
.h-price p:not([class]) { color: var(--muted); flex: 1; margin: .4rem 0 1rem; }
.h-price .btn { align-self: flex-start; }
.h-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.h-faq header p { color: var(--muted); }
.h-contact { background: var(--ink); color: #fff; padding: clamp(2.5rem, 5vw, 4.5rem) 0; text-align: center; }
.h-contact h2 { color: #fff; margin: 0 0 1.6rem; }
.h-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.h-contact__grid a { display: grid; gap: .25rem; justify-items: center; padding: 1.6rem 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.h-contact__grid a i { font-size: 1.5rem; color: var(--lime); margin-bottom: .3rem; }
.h-contact__grid a span { color: rgba(255,255,255,.8); }
.h-contact__grid a:hover { background: var(--pink); border-color: var(--pink); }
.h-contact__grid a:hover i { color: #fff; }
@media (max-width: 960px) {
  .h-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-tile--photo { grid-column: span 2; grid-row: span 1; min-height: 260px; }
  .h-prices, .h-contact__grid { grid-template-columns: 1fr; }
  .h-faq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .h-choose { grid-template-columns: 1fr; }
  .h-choice { padding-bottom: 2.8rem; }
  .h-bento { grid-template-columns: 1fr; }
  .h-tile--photo, .h-tile--quote { grid-column: auto; }
  .h-tile--work, .h-tile--post { min-height: 200px; }
  .h-clients p { white-space: normal; }
}

.h-prices + .fine { margin-top: 1.6rem; }

/* Concept B contrast and polish */
.h-bento { grid-auto-rows: minmax(210px, auto); }
.h-tile--photo::before { background: linear-gradient(180deg, rgba(20,22,24,0) 20%, rgba(20,22,24,.94) 100%); }
.h-tile--photo small { color: #fff; opacity: .9; }
.h-tile--photo strong, .h-tile--work strong, .h-tile--post strong { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.h-tile--work::after, .h-tile--post::after { background: linear-gradient(180deg, rgba(20,22,24,0) 15%, rgba(20,22,24,.94) 100%); }
.h-tile--work small, .h-tile--post small { color: #fff; opacity: .85; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.h-tile--lime > i:first-child { color: var(--ink); }
.h-tile--pink span { opacity: 1; font-size: 1rem; }
.h-clients li { opacity: 1; color: var(--ink-2); }
.h-price .btn { margin-top: auto; }
.h-price p:not([class]) { flex: 0 0 auto; }
.h-price { min-height: 100%; }
.h-choice small { color: var(--ink-2); }
.h-prices { align-items: stretch; }

/* Concept B tile hover: white and underlined; Disability Confident goes brand green */
.h-tile--photo:hover, .h-tile--work:hover, .h-tile--post:hover { color: #fff; }
.h-tile--photo:hover strong, .h-tile--work:hover strong, .h-tile--post:hover strong { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.h-tile--dark:hover, .h-tile--dark:hover strong, .h-tile--dark:hover span, .h-tile--dark:hover > i:first-child { color: var(--lime); }
.h-tile--dark:hover strong, .h-tile--dark:hover span { text-decoration: underline; text-underline-offset: .18em; }

.h-prices + .fine { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* Concept B "Let's talk" blocks: brand green on hover, dark text for contrast */
.h-contact__grid a:hover, .h-contact__grid a:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.h-contact__grid a:hover i, .h-contact__grid a:focus-visible i, .h-contact__grid a:hover span, .h-contact__grid a:focus-visible span { color: var(--ink); }
.h-tile--dark:hover strong, .h-tile--dark:hover span { text-decoration: none; }

/* Concept B tiles: animated border (like the main nav) instead of text-decoration */
.h-tile--photo strong, .h-tile--work strong, .h-tile--post strong { display: inline; width: fit-content; background: linear-gradient(#fff, #fff) no-repeat 0 100% / 0 2px; padding-bottom: .12em; transition: background-size .25s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.h-tile--photo:hover strong, .h-tile--work:hover strong, .h-tile--post:hover strong { text-decoration: none; background-size: 100% 2px; }
.h-tile--photo .h-tile__label, .h-tile--work span, .h-tile--post span { justify-items: start; }
.h-tile--dark strong { display: inline; width: fit-content; background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 100% / 0 2px; padding-bottom: .12em; transition: background-size .25s ease; }
.h-tile--dark:hover strong { text-decoration: none; background-size: 100% 2px; }

.h-tile--lime strong { font-size: 1.6rem; line-height: 1.15; }
.h-tile--lime span { font-size: 1.1rem; }

.h-tile--stat:not(.h-tile--pink) span { font-size: 1.4rem; line-height: 1.2; }

.h-tile--quote { justify-content: center; gap: .8rem; }
.h-tile--quote > i:first-child { margin-bottom: 0; }

.w-hero__media img { box-shadow: -16px 16px 0 var(--lime); }

.w-badge { left: auto; right: -1.2rem; transform: rotate(4deg); }
@media (max-width: 640px) { .w-badge { right: -.6rem; } }

/* Homepage hero: a wave of colour (no movement) spreading outward from the centre of the words */
.hero h1 .accent, .page-hero h1 .accent, .legal-hero h1 .accent, .kb-hero h1 .accent { color: var(--pink); }
.hero h1 .accent .rp, .page-hero h1 .accent .rp, .legal-hero h1 .accent .rp, .kb-hero h1 .accent .rp { white-space: pre-wrap; animation: obm-wave 4.5s ease-in-out infinite; animation-delay: var(--rd, 0s); }
@keyframes obm-wave {
  0%, 24%, 100% { color: var(--pink); }
  10% { color: var(--pink-wave); }
}
@media (prefers-reduced-motion: reduce) { .hero h1 .accent .rp, .page-hero h1 .accent .rp, .legal-hero h1 .accent .rp, .kb-hero h1 .accent .rp { animation: none; } }

.footer__small a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.footer__small a:hover { color: #fff; }

/* Image display option: a compact image column, leaving more width for the text (e.g. long bullet points on one line) */
@media (min-width: 961px) {
  .split:has(.split__media--small) { grid-template-columns: minmax(0, 1fr) 380px; }
  .split--flip:has(.split__media--small) { grid-template-columns: minmax(0, 1fr) 380px; }
  .split:not(.split--flip):has(.split__media--small) { grid-template-columns: 380px minmax(0, 1fr); }
}
.split__media--small { width: 100%; max-width: 380px; justify-self: end; }
.split:not(.split--flip) .split__media--small { justify-self: start; }
.split__media--small img { aspect-ratio: 4 / 3; }
@media (max-width: 960px) { .split__media--small { max-width: 100%; justify-self: stretch; } }
@media (min-width: 1200px) {
  .split:has(.split__media--small), .split--flip:has(.split__media--small) { grid-template-columns: minmax(0, 1fr) 450px; }
  .split:not(.split--flip):has(.split__media--small) { grid-template-columns: 450px minmax(0, 1fr); }
  .split__media--small { max-width: 450px; }
}

/* Footer social icons: brand green on hover (dark icon for contrast) */
.footer .footer__social a:hover, .footer .footer__social a:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* Our Work "New" badge: top right, tilts up on hover */
.work__badge { left: auto; right: .7rem; transform-origin: 50% 50%; transition: transform .25s ease; }
.work:hover .work__badge, .work__link:focus-visible .work__badge { transform: rotate(-8deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .work__badge { transition: none; } }

/* ======================================================================
   Green accents in sections whose image uses the brand-green highlight.
   Applies site-wide. Lime for buttons, icons and ticks; a deeper green for text so it stays readable on white.
   ====================================================================== */
:root { --lime-deep: #587a0f; --lime-hover: #84ad28; }
.section:has(.split__media) .kicker { color: var(--lime-deep); }
.section:has(.split__media) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.section:has(.split__media) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--lime-hover); border-color: var(--lime-hover); color: var(--ink); }
.section:has(.split__media) .btn--ghost { color: var(--lime-deep); border-color: var(--lime); }
.section:has(.split__media) .btn--ghost:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.section:has(.split__media) .rich a, .section:has(.split__media) .more { color: var(--lime-deep); }
.section:has(.split__media) .rich a:hover, .section:has(.split__media) .more:hover { color: var(--ink); }
.section:has(.split__media) .rich ul li::before, .section:has(.split__media) .ticks li > i { color: var(--lime); }
.section:has(.split__media) .rich ol li::before { background: #eef6d9; color: var(--lime-deep); }
.section:has(.split__media) .rich blockquote { border-left-color: var(--lime); }
.section:has(.split__media) .card__icon { background: #eef6d9; color: var(--lime-deep); }
.section:has(.split__media) a:focus-visible { outline-color: var(--ink); }

/* Disability Confident Leader section: keep brand pink (the logo panel and its accents) */
.page-about-disability-confident .section:has(.split__media--padded) .split__media--padded { border-bottom-color: var(--pink); }
.page-about-disability-confident .section:has(.split__media--padded) .kicker { color: var(--pink); }
.page-about-disability-confident .section:has(.split__media--padded) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--pink); border-color: var(--pink); color: #fff; }
.page-about-disability-confident .section:has(.split__media--padded) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--pink-dark); border-color: var(--pink-dark); color: #fff; }
.page-about-disability-confident .section:has(.split__media--padded) .btn--ghost { color: var(--pink); border-color: var(--pink); }
.page-about-disability-confident .section:has(.split__media--padded) .btn--ghost:hover { background: var(--pink); color: #fff; }
.page-about-disability-confident .section:has(.split__media--padded) .rich a, .page-about-disability-confident .section:has(.split__media--padded) .more { color: var(--pink); }
.page-about-disability-confident .section:has(.split__media--padded) .rich ul li::before { color: var(--pink); }

/* WordPress version checker */
.wpv { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
.wpv__wrap { max-width: 860px; }
.wpv__card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--pink); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: 0 24px 50px -34px rgba(43,48,53,.55); }
.wpv__form label { display: block; font-weight: 700; margin-bottom: .6rem; }
.wpv__row { display: flex; gap: .7rem; }
.wpv__field { position: relative; flex: 1; min-width: 0; }
.wpv__field i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.wpv__field input { width: 100%; font: inherit; padding: .95rem 1rem .95rem 2.8rem; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.wpv__field input:focus { outline: 0; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(var(--pink-rgb),.12); }
.wpv__row .btn { white-space: nowrap; cursor: pointer; }
.wpv__row .btn:disabled { opacity: .7; cursor: progress; }
.wpv__hint { margin: .7rem 0 0; font-size: .88rem; color: var(--muted); }
.wpv__result { display: none; margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.wpv__result.is-shown { display: block; }
.wpv__status { display: flex; gap: 1rem; align-items: flex-start; }
.wpv__status > i { font-size: 2.2rem; line-height: 1; margin-top: .15rem; color: var(--muted); }
.wpv__status h3 { margin: 0 0 .2rem; font-size: 1.35rem; }
.wpv__status p { margin: 0; color: var(--ink-2); }
.wpv__result.is-ok .wpv__status > i { color: #3f7d1d; }
.wpv__result.is-warn .wpv__status > i { color: #b8860b; }
.wpv__result.is-bad .wpv__status > i { color: #c0392b; }
.wpv__msg { margin: 0; color: var(--ink-2); display: flex; gap: .6rem; align-items: center; }
.wpv__msg i { color: var(--pink); }
.wpv__versions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0; }
.wpv__versions > div { background: var(--tint); border-radius: var(--radius); padding: 1rem 1.2rem; }
.wpv__versions dt { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }
.wpv__versions dd { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.wpv__site { border-left: 4px solid var(--line); padding: .2rem 0 .2rem 1rem; margin-top: 1.2rem; }
.wpv__site p { margin: .2rem 0 .4rem; color: var(--muted); font-size: .92rem; }
.wpv__site a { word-break: break-all; font-size: .92rem; }
.wpv__cta { margin-top: 1.6rem; padding: 1.2rem 1.3rem; background: var(--pink-soft); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.wpv__cta p { margin: 0 auto 0 0; font-weight: 700; flex: 1 1 240px; }
@media (max-width: 640px) { .wpv__row { flex-direction: column; } .wpv__row .btn { width: 100%; text-align: center; } .wpv__versions { grid-template-columns: 1fr; } .wpv__cta .btn { width: 100%; text-align: center; } }

/* WordPress checker: card spans the content width; site address floats right in the results */
.wpv__wrap { max-width: none; }
.wpv__site { display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem 1.5rem; flex-wrap: wrap; }
.wpv__site > strong { flex: 1 1 100%; }
.wpv__site > p { flex: 1 1 320px; margin: 0; }
.wpv__site > a { margin-left: auto; text-align: right; flex: 0 1 auto; }
@media (max-width: 640px) { .wpv__site > a { margin-left: 0; text-align: left; } }

.wpv__nodesc em { font-style: italic; }

/* WordPress checker: wider button, larger label */
.wpv__row .btn { min-width: 240px; font-size: 1.15rem; padding-inline: 2rem; }
@media (max-width: 640px) { .wpv__row .btn { min-width: 0; width: 100%; } }

/* Cookie notice */
.cookie { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; width: min(400px, calc(100vw - 2rem)); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--pink); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.3rem; box-shadow: 0 24px 50px -20px rgba(43,48,53,.5); font-size: .9rem; color: var(--ink-2); }
.cookie[hidden] { display: none; }
.cookie p { margin: 0 0 .7rem; line-height: 1.5; }
.cookie__title { font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.cookie__title i { color: var(--pink); margin-right: .35em; }
.cookie a { color: var(--pink); }
.cookie__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.cookie__actions .btn { cursor: pointer; }
.footer__nav [data-cookie-open] { cursor: pointer; }
@media (max-width: 640px) { .cookie { left: .6rem; right: .6rem; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media print { .cookie { display: none !important; } }

/* Cookie notice: enhanced */
.cookie { width: min(440px, calc(100vw - 2rem)); }
.cookie__links { font-size: .85rem; }
.cookie__actions { align-items: center; }
.cookie__link { background: none; border: 0; padding: .4rem .2rem; font: inherit; font-weight: 700; color: var(--pink); text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.cookie__link:hover { color: var(--pink-dark); }
html.ckp-open { overflow: hidden; }
.ckp { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; }
.ckp[hidden] { display: none; }
.ckp__backdrop { position: absolute; inset: 0; background: rgba(20,22,24,.62); }
.ckp__panel { position: relative; width: min(680px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; background: #fff; border-radius: var(--radius); border-top: 5px solid var(--pink); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.ckp__panel h2 { margin: 0 2rem .5rem 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.ckp__intro { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; }
.ckp__x { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border: 0; background: var(--tint); border-radius: var(--radius); cursor: pointer; color: var(--ink); }
.ckp__x:hover { background: var(--pink); color: #fff; }
.ckp__list { display: grid; gap: .7rem; }
.ckp__item { display: flex; justify-content: space-between; gap: 1.2rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.ckp__item strong { color: var(--ink); }
.ckp__item p { margin: .3rem 0 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.ckp__tag { display: inline-block; margin-left: .6rem; padding: .1em .65em; border-radius: 99px; background: var(--pink-soft); color: var(--pink-dark); font-size: .75rem; font-weight: 700; vertical-align: .1em; }
.ckp__tag--soft { background: var(--tint); color: var(--ink-2); }
.ckp__switch { position: relative; flex: none; width: 52px; height: 30px; margin-top: .1rem; cursor: pointer; }
.ckp__switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.ckp__switch span { position: absolute; inset: 0; border-radius: 99px; background: #c5c9ce; transition: background .2s; }
.ckp__switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .2s; }
.ckp__switch input:checked + span { background: var(--pink); }
.ckp__switch input:checked + span::after { transform: translateX(22px); }
.ckp__switch input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.ckp__switch.is-locked { opacity: .55; cursor: not-allowed; }
.ckp__switch.is-locked input { cursor: not-allowed; }
.ckp__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.ckp__actions .btn { cursor: pointer; }
@media (max-width: 640px) { .ckp { padding: .5rem; align-items: end; } .ckp__panel { max-height: calc(100vh - 1rem); } .ckp__item { flex-direction: column-reverse; gap: .6rem; } .ckp__actions .btn { width: 100%; text-align: center; } }
@media print { .ckp { display: none !important; } }

/* Online agreement signing */
.sign { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.sign__doc { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.sign__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.1rem; background: var(--tint); border-bottom: 1px solid var(--line); font-size: .92rem; }
.sign__bar a { font-weight: 700; text-decoration: none; }
.sign__scroll { max-height: min(72vh, 780px); overflow-y: auto; padding: 1.4rem 1.6rem; margin: 0; }
.sign__scroll:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.sign__form { position: sticky; top: 96px; border: 1px solid var(--line); border-top: 4px solid var(--pink); border-radius: var(--radius); background: #fff; padding: clamp(1.2rem, 2.4vw, 1.9rem); box-shadow: 0 24px 50px -36px rgba(43,48,53,.55); }
.sign__form h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.sign__field { margin-bottom: 1rem; display: grid; gap: .35rem; }
.sign__field label, .sign__pad-head label { font-weight: 700; font-size: .95rem; }
.sign__field input[type="text"], .sign__field input[type="email"], .sign__field textarea { width: 100%; font: inherit; padding: .75rem .9rem; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.sign__field input:focus, .sign__field textarea:focus { outline: 0; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(var(--pink-rgb),.12); }
.sign__pad-head { display: flex; justify-content: space-between; align-items: center; }
.sign__clear { background: none; border: 0; font: inherit; font-size: .9rem; font-weight: 700; color: var(--pink); cursor: pointer; padding: .2rem .3rem; }
.sign__clear:hover { color: var(--pink-dark); text-decoration: underline; }
.sign__pad { position: relative; border: 2px dashed #b9bec4; border-radius: var(--radius); background: #fcfcfd; height: 170px; }
.sign__pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; border-radius: var(--radius); }
.sign__pad::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 34px; border-bottom: 1px solid #d5d8dc; pointer-events: none; }
.sign__pad-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #8a9097; font-size: .95rem; pointer-events: none; }
.sign__pad-hint[hidden] { display: none; }
.sign__check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500 !important; cursor: pointer; line-height: 1.45; }
.sign__check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--pink); flex: none; }
.sign__err { color: #b3261e; font-size: .88rem; min-height: 0; }
.sign__err:empty { display: none; }
.sign__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sign__date { margin: .2rem 0 1rem; color: var(--muted); font-size: .95rem; }
.sign__date i { color: var(--pink); margin-right: .3em; }
.sign__submit { width: 100%; cursor: pointer; font-size: 1.05rem; }
.sign__submit:disabled { opacity: .7; cursor: progress; }
.sign__fine { margin: .9rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.sign__result { margin-top: .9rem; }
.sign__result.is-error { padding: .9rem 1rem; background: #fdecea; color: #7a1d17; border-radius: var(--radius); font-size: .95rem; }
.sign__done { text-align: center; padding: 1rem .5rem; }
.sign__done > i { font-size: 3rem; color: #3f7d1d; }
.sign__done h2 { margin: .6rem 0 .5rem; }
@media (max-width: 960px) { .sign { grid-template-columns: 1fr; } .sign__form { position: static; } .sign__scroll { max-height: 55vh; } }
@media print { .sign__form { display: none; } }

.legal-actions .btn i { color: inherit; margin-right: .35em; }

/* Signing page: agreement panel matches the height of the details form, scrolling inside */
@media (min-width: 961px) {
  .sign { align-items: stretch; }
  .sign__doc { display: flex; flex-direction: column; height: 0; min-height: 100%; }
  .sign__scroll { flex: 1; min-height: 0; max-height: none; }
  .sign__form { position: static; }
}

.sign__ver { display: inline-block; margin-left: .5rem; padding: .1em .65em; border-radius: 99px; background: var(--pink-soft); color: var(--pink-dark); font-size: .78rem; font-weight: 700; }

/* ======================================================================
   Client Connect link (top bar) and legal / signing pages on tablet and phone
   ====================================================================== */
.topbar__right { display: flex; align-items: center; gap: .6rem 1.4rem; }
.topbar__short { display: none; }
.topbar a.topbar__cc { display: inline-flex; align-items: center; gap: .45em; padding: .15rem .75rem; border: 1px solid rgba(255,255,255,.55); border-radius: 99px; font-weight: 700; transition: background .2s, color .2s; }
.topbar a.topbar__cc i { margin: 0; font-size: 1.05em; }
.topbar a.topbar__cc:hover, .topbar a.topbar__cc:focus-visible { background: #fff; color: var(--pink); text-decoration: none; }
.topbar a.topbar__cc:hover i, .topbar a.topbar__cc:focus-visible i { color: var(--pink); }
@media (max-width: 960px) {
  .topbar .wrap { justify-content: space-between; flex-wrap: nowrap; }
  .topbar__right { margin-left: auto; }
}
@media (max-width: 560px) {
  .topbar { font-size: .84rem; }
  .topbar__long { display: none; }
  .topbar__short { display: inline; }
  .topbar a.topbar__cc { padding: .15rem .6rem; }
}

/* Signing page: touch-friendly */
.sign__skip { display: none; }
.sign__pad canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.sign__field { scroll-margin-top: 120px; }
.sign__doc { position: relative; }
.sign__doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%); pointer-events: none; transition: opacity .2s; }
.sign__doc.is-end::after { opacity: 0; }
.sign__scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: auto; }
.sign__field input[type="text"], .sign__field input[type="email"], .sign__field textarea { font-size: 1rem; min-height: 48px; }
.sign__check input { width: 1.5rem; height: 1.5rem; }
.sign__check { padding: .3rem 0; }
.sign__clear { min-height: 44px; padding-inline: .6rem; }
@media (max-width: 960px) {
  .sign__skip { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); font-weight: 700; font-size: .92rem; text-decoration: none; }
  .sign__doc { border: 0; background: none; overflow: visible; }
  .sign__doc > .sign__bar, .sign__doc > .sign__scroll { border: 1px solid var(--line); background: #fff; }
  .sign__bar { border-radius: var(--radius) var(--radius) 0 0; }
  .sign__scroll { max-height: 58vh; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .sign__doc::after { bottom: 0; left: 1px; right: 1px; border-radius: 0 0 var(--radius) var(--radius); }
  .sign__pad { height: 210px; }
}
@media (max-width: 640px) {
  .sign__form { padding: 1.2rem 1rem 1.4rem; }
  .sign__pad { height: 190px; }
  .sign__submit { min-height: 54px; font-size: 1.1rem; }
  .legal-actions { gap: .6rem; }
  .legal-actions .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
  .legal-actions > span { flex: 1 1 auto; }
  .legal-hero--doc h1 { font-size: clamp(1.45rem, 1.2rem + 2vw, 1.9rem); }
}
@media (max-width: 960px) and (orientation: landscape) { .sign__scroll { max-height: 70vh; } .sign__pad { height: 180px; } }
/* The quick-contact bar steps aside on signing pages so nothing sits next to the submit button */
.is-sign .mbar { display: none; }
@media (max-width: 640px) { .is-sign { padding-bottom: 0; } }

/* Top bar: everything sits on one vertical centre line */
.topbar .wrap { align-items: center; }
.topbar__phone, .topbar__hours { display: inline-flex; align-items: center; line-height: 1.2; }
.topbar__phone > i, .topbar__hours > i { flex: none; }
.topbar__long, .topbar__short { white-space: pre-wrap; }
.topbar a.topbar__cc { line-height: 1.2; }
@media (max-width: 960px) { .topbar__right { align-self: center; } }
.topbar a.topbar__cc, .topbar__phone, .topbar__hours { white-space: nowrap; }
@media (max-width: 960px) { .topbar .topbar__hours { display: none; } }

/* Optical vertical centring and equal-height legal action buttons */
.topbar a.topbar__cc span { position: relative; top: .06em; }
.legal-actions .btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 2.6rem; margin: 0; font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; vertical-align: middle; }
.legal-actions .btn i { margin-right: .45em; line-height: 1; }

/* Top band: drop text (and the Client Connect label/icon) a couple of pixels */
.topbar__phone, .topbar__hours { position: relative; top: 2px; }
.topbar__phone > i, .topbar__hours > i { position: relative; top: -1px; }
.topbar a.topbar__cc span { top: .2em; }
.topbar a.topbar__cc i { position: relative; top: .14em; }
.topbar__phone > i, .topbar__hours > i { top: -2px; }
.topbar a.topbar__cc i { top: .07em; }

/* "Questions about this document?" button: brand green */
.kb-side__help .btn { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.kb-side__help .btn:hover, .kb-side__help .btn:focus-visible { background: var(--lime-hover); border-color: var(--lime-hover); color: var(--ink); }

/* ======================================================================
   Reusable contact form section (creates a ticket in Midas NG)
   ====================================================================== */
.cform { max-width: 820px; margin: 0 auto; border: 1px solid var(--line); border-top: 4px solid var(--pink); border-radius: var(--radius); background: #fff; padding: clamp(1.3rem, 3vw, 2.2rem); box-shadow: 0 24px 50px -36px rgba(43,48,53,.55); }
.cform__head { margin-bottom: 1.2rem; }
.cform__head h2 { margin: .2rem 0 .5rem; }
.cform__head p { margin: 0; color: #5b6268; }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
.cform__field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.cform__field label { font-weight: 700; margin-bottom: .35rem; }
.cform__field input, .cform__field textarea { font: inherit; font-size: 1rem; min-height: 48px; padding: .65rem .8rem; border: 1px solid #b9bec3; border-radius: calc(var(--radius) - 2px); background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; }
.cform__field textarea { resize: vertical; min-height: 140px; }
.cform__field input:focus, .cform__field textarea:focus { outline: 3px solid rgba(var(--pink-rgb),.25); border-color: var(--pink); }
.cform__field [aria-invalid="true"] { border-color: #b3261e; }
.cform__err { color: #b3261e; font-size: .9rem; margin-top: .25rem; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__fine { font-size: .9rem; color: #5b6268; margin: 0 0 1rem; }
.cform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.cform__actions .btn { min-height: 48px; display: inline-flex; align-items: center; gap: .5em; }
.cform__actions .btn i { margin: 0; }
.cform__actions .btn[disabled] { opacity: .7; cursor: wait; }
.cform__status { margin: 0; font-weight: 700; }
.cform__status.is-ok { color: #2f6b12; }
.cform__status.is-error { color: #b3261e; }
@media (max-width: 640px) {
  .cform__row { grid-template-columns: 1fr; }
  .cform__actions .btn { width: 100%; justify-content: center; }
}

/* Agreement text panel on the signing page: at least 700px tall (phones keep the shorter viewport-based height) */
@media (min-width: 961px) { .sign__doc { min-height: max(100%, 700px); } }
@media (min-width: 641px) and (max-width: 960px) { .sign__scroll { min-height: 700px; } }

/* Contact form: sits in the page grid, intro on the left and the form panel on the right */
.cform { max-width: none; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.cform__head { margin: 0; }
.cform__head h2 { margin: .3rem 0 .8rem; }
.cform__facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.cform__facts li { display: flex; gap: .8rem; align-items: flex-start; color: #3d4349; }
.cform__facts li > i { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pink-soft); color: var(--pink); font-size: .95rem; margin: 0; }
.cform__facts span { padding-top: .35rem; }
.cform__panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: clamp(1.2rem, 2.6vw, 2rem); box-shadow: 0 1px 2px rgba(43,48,53,.04); }
@media (max-width: 960px) { .cform { grid-template-columns: 1fr; } }

/* Contact form follows the section above it, so it needs less space on top */
.section--cform { padding-top: calc(var(--space) * .3); }

/* Web design page: Techie strip sits closer to the section above it */
.page-web-design .section:has(+ .section--notice) { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.page-web-design .section--notice { padding-top: 0; }

/* Web design page: the contact form follows a cards section, so it keeps the full section spacing above it */
.page-web-design .section--cform { padding-top: var(--space); }

/* Blog search */
.blog-search { max-width: none; margin: 0 0 1.4rem; }
.blog-search__summary { margin: 0 0 1.4rem; color: #3d4349; }

/* Contact form: larger send button text */
.cform__actions .btn { font-size: 1.15rem; padding-inline: 2rem; min-height: 54px; }

/* Cookie notice on phones: compact, with the explanation collapsed until tapped */
.cookie__more { display: none; }
@media (max-width: 640px) {
  .cookie { padding: .8rem .9rem; font-size: .84rem; border-radius: 10px; }
  .cookie p { margin: 0 0 .4rem; line-height: 1.4; }
  .cookie__title { font-size: .95rem; margin-bottom: .3rem; }
  #cookie-text { cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .cookie.is-open #cookie-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .cookie__more { display: inline-block; background: none; border: 0; padding: .1rem 0 .3rem; font: inherit; font-size: .8rem; font-weight: 700; color: var(--pink); text-decoration: underline; cursor: pointer; }
  .cookie__links { display: none; font-size: .8rem; }
  .cookie.is-open .cookie__links { display: block; }
  .cookie__actions { gap: .4rem .5rem; margin-top: .4rem; }
  .cookie__actions .btn { padding: .5em .9em; font-size: .85rem; }
  .cookie__link { font-size: .85rem; padding: .3rem .1rem; }
}

/* Desktop nav: keep every item on one line; tighten the gaps a little on mid-width screens */
@media (min-width: 961px) {
  .nav a:not(.btn), .nav .nav__group > a { white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1240px) {
  .nav { gap: clamp(.7rem, 1.4vw, 1.1rem); font-size: .95rem; }
}

/* Mega menu: items wrap their small text and the two columns are an even 50/50 split */
.nav .mega a { white-space: normal; }
.mega { grid-template-columns: 300px minmax(0, 1fr); }
.mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.mega__list li { min-width: 0; }
.nav .mega__list a { min-width: 0; }
.mega__text { min-width: 0; overflow-wrap: break-word; }

/* PDF lightbox */
.pdfbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; }
.pdfbox[hidden] { display: none; }
.pdfbox__backdrop { position: absolute; inset: 0; background: rgba(20,22,24,.72); }
.pdfbox__panel { position: relative; display: flex; flex-direction: column; width: min(1000px, 100%); height: calc(100vh - 2rem); background: #fff; border-radius: var(--radius); border-top: 5px solid var(--pink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); overflow: hidden; }
.pdfbox__bar { display: flex; align-items: center; gap: 1rem; padding: .6rem .8rem .6rem 1.1rem; background: var(--tint); border-bottom: 1px solid var(--line); }
.pdfbox__bar strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdfbox__open { font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.pdfbox__x { width: 40px; height: 40px; border: 0; background: #fff; border-radius: var(--radius); cursor: pointer; color: var(--ink); }
.pdfbox__x:hover { background: var(--pink); color: #fff; }
.pdfbox__frame { flex: 1; width: 100%; border: 0; background: #525659; }
html.pdfbox-open { overflow: hidden; }
@media print { .pdfbox { display: none !important; } }

/* Phone outline holding the live /links page (blockRichSplit with the anchor "links-phone") */
.split__media--phone { display: flex; justify-content: center; }
.phone { position: relative; width: min(100%, 470px); aspect-ratio: 9 / 16.5; padding: 14px; background: #1b1d20; border-radius: 38px; box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 0 0 2px #3a3d42; }
.phone__speaker { position: absolute; top: 7px; left: 50%; width: 64px; height: 6px; margin-left: -32px; background: #3a3d42; border-radius: 6px; }
.phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 26px; background: var(--pink-soft); }

/* FAQ with three or more groups: groups sit side by side on wide screens */
@media (min-width: 900px) {
  .faq-groups--cols { columns: 2; column-gap: clamp(1.5rem, 3vw, 3rem); }
  .faq-groups--cols .faq-group { break-inside: avoid; }
  .faq-groups--cols .faq-group:first-child .faq__group { margin-top: 0; }
}
.faq-wrap:has(.faq-groups--cols) { max-width: var(--max); }

/* /website-support/seo: one long page, so tighter vertical spacing and images that fill the height of long text */
.page-web-design .section:not(.section--notice):not(.section--cform), .page-website-support .section { padding: clamp(2.25rem, 1.4rem + 3vw, 4rem) 0; }
.page-web-design .hero, .page-website-support .hero { padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
@media (min-width: 900px) {
  .page-web-design .split, .page-website-support .split { align-items: stretch; }
  .page-web-design .split__media, .page-website-support .split__media { display: flex; }
  .page-web-design .split__media img, .page-website-support .split__media img { height: 100%; max-height: 640px; min-height: 320px; aspect-ratio: auto; object-fit: cover; }
}

/* Top bar: centre icons and text on the bar's midline (measured by ink, not line box) */
.topbar__phone, .topbar__hours { top: 1px; }
.topbar__phone > i, .topbar__hours > i { top: -.65px; }
.topbar a.topbar__cc span { top: .06em; }
.topbar a.topbar__cc i { top: .015em; }

/* Two feature cards share the full width; tick lists inside feature cards */
@media (min-width: 900px) { .features--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature .ticks { margin: .8rem 0 0; }

/* Security page, "What we do when a website is hacked": brand pink instead of the lime used beside photos */
#hacked-site-repair .split__media img { border-bottom-color: var(--pink); }
#hacked-site-repair.section:has(.split__media) .kicker { color: var(--pink); }
#hacked-site-repair.section:has(.split__media) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--pink); border-color: var(--pink); color: #fff; }
#hacked-site-repair.section:has(.split__media) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--pink-dark); border-color: var(--pink-dark); color: #fff; }
#hacked-site-repair.section:has(.split__media) .rich a, #hacked-site-repair.section:has(.split__media) .more { color: var(--pink-dark); }
#hacked-site-repair.section:has(.split__media) .rich a:hover, #hacked-site-repair.section:has(.split__media) .more:hover { color: var(--ink); }
#hacked-site-repair.section:has(.split__media) .rich ul li::before, #hacked-site-repair.section:has(.split__media) .ticks li > i { color: var(--pink); }
#hacked-site-repair.section:has(.split__media) .rich ol li::before { background: var(--pink-soft); color: var(--pink-dark); }
#hacked-site-repair.section:has(.split__media) a:focus-visible { outline-color: var(--pink); }

/* Responsive polish for the web design and support pages */
@media (max-width: 960px) {
  /* Heading above body text: no big gap once the two columns stack */
  .prose-grid { gap: 1rem; }
}
@media (min-width: 641px) and (max-width: 960px) {
  /* Three feature cards on a tablet: two side by side, the third across the full width */
  .features:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .features--two { grid-template-columns: 1fr; }
}

/* PDF lightbox: pink Download button at the top */
.pdfbox__download { white-space: nowrap; }


/* Payments page: the Tide image is a cut-out (transparent background), so no bar, crop or box around it */
#tide .split__media { align-items: center; justify-content: center; }
#tide .split__media img { border-bottom: 0; border-radius: 0; height: auto; min-height: 0; max-height: 560px; width: auto; max-width: 100%; object-fit: contain; aspect-ratio: auto; }

/* Payments page disclosure (below the Tide section): a little space above, room before the call to action */
#disclosure.section--notice { padding-top: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }

/* Payments page: space above the Square terms footnote */
#square-offers .fine { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Space above the link at the bottom of feature cards ("Read more", "Claim this offer", and so on) */
.feature .more { display: inline-block; margin-top: 1.1rem; }

/* Contact page: the form and the four cards read as one block, with even space around the service status notice */
.page-contact #contact-form { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-contact #contact-methods { padding-top: 0; }
.page-contact .section:has(+ .section--notice) { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.page-contact .section--notice { padding-top: 0; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* Contact form: Privacy Policy agreement checkbox, above the send button */
.cform__consent { margin-bottom: 1.1rem; }
.cform__field .cform__check { display: flex; align-items: flex-start; gap: .7rem; font-weight: 400; margin: 0; cursor: pointer; }
.cform__check input[type="checkbox"] { flex: none; width: 1.3rem; height: 1.3rem; min-height: 0; margin: .15rem 0 0; padding: 0; accent-color: var(--pink); cursor: pointer; }
.cform__check input[type="checkbox"]:focus-visible { outline: 3px solid rgba(var(--pink-rgb),.35); outline-offset: 2px; }
.cform__check a { font-weight: 500; }
.cform__opt { font-weight: 400; color: #5b6268; font-size: .9em; }

/* Contact form: service status note sits under the facts list */
.cform__note { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2rem; padding: 1.1rem 1.3rem; background: var(--tint); border-left: 4px solid var(--lime); border-radius: var(--radius); }
.cform__note > i { color: var(--lime); font-size: 1.6rem; margin-top: .1rem; flex: none; }
.cform__note p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Nav Contact button: text the same size as the menu items, button padding unchanged (the old padding is kept as fixed values, since it was em-based on the smaller text) */
.nav > a.btn--small { font-size: var(--fs-body); padding: .475rem 1.0925rem; }
@media (max-width: 640px) { .nav > a.btn--small { padding: .665rem 1.14rem; } }

/* Footer: Disability Confident Leader logo, bottom right, linked to the Disability Confident page */
.footer__badge { margin-left: auto; align-self: flex-end; line-height: 0; }
.footer__badge img { width: 165px; height: auto; display: block; }
.footer__badge:hover, .footer__badge:focus-visible { opacity: .85; }

/* Link lists: page links get a link icon instead of the document icon */
.brochures a.is-page::before { content: "\f0c1"; }
.brochures a.has-icon::before { content: none; }
.brochures a.has-icon > i { flex: none; font-size: 1.25rem; line-height: 1; color: var(--pink); }

/* Footer: the links run along the top of the footer, with a divider under them */
.footer__nav { display: flex; flex-wrap: wrap; flex: 1 1 100%; gap: .45rem 2rem; padding-bottom: 1.4rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.15); }

/* Footer: the social icons with the Disability Confident logo underneath, right aligned */
.footer__side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.4rem; }
.footer__badge { margin-left: 0; align-self: flex-end; }
@media (max-width: 640px) { .footer__side { align-items: flex-start; } .footer__badge { align-self: flex-start; } }

/* Our work: image opens a lightbox, project name links to the site */
.work__open { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: zoom-in; }
.work__open .work__media { display: block; }
.work__open:hover .work__media { border-bottom-color: var(--pink); }
.work__open:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: var(--radius); }
.work__open:hover .work__media img, .work__open:focus-visible .work__media img { transform: scale(1.18); }
.work__open:focus-visible .work__badge { transform: rotate(-8deg) translateY(-2px); }
.work__name { color: inherit; text-decoration: none; }
.work__name i { font-size: .72em; color: var(--pink); margin-left: .25em; }
.work__name:hover strong, .work__name:focus-visible strong { color: var(--pink); text-decoration: underline; }
.lbox { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 1rem; }
.lbox[hidden] { display: none; }
.lbox__backdrop { position: absolute; inset: 0; background: rgba(14,16,18,.86); cursor: zoom-out; }
.lbox__panel { position: relative; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); border-bottom: 5px solid var(--lime); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lbox__img { display: block; max-width: 100%; max-height: calc(100vh - 8.5rem); width: auto; height: auto; object-fit: contain; background: #eceef0; }
.lbox__bar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.1rem; background: var(--tint); }
.lbox__cap { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
.lbox__title { font-weight: 700; font-size: 1.05rem; }
.lbox__title a { color: inherit; text-decoration: none; }
.lbox__title a:hover { color: var(--pink); text-decoration: underline; }
.lbox__title i { font-size: .75em; color: var(--pink); margin-left: .3em; }
.lbox__date { color: var(--muted); font-size: .88rem; }
.lbox__btn { flex: none; width: 40px; height: 40px; border: 0; border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer; }
.lbox__btn:hover, .lbox__btn:focus-visible { background: var(--pink); color: #fff; }
.lbox__nav { position: absolute; top: calc(50% - 3rem); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.lbox__nav--prev { left: .8rem; } .lbox__nav--next { right: .8rem; }
.lbox__nav[hidden] { display: none; }
html.lbox-open { overflow: hidden; }
@media (max-width: 700px) { .lbox { padding: .5rem; } .lbox__img { max-height: calc(100vh - 9rem); } .lbox__nav { width: 40px; height: 40px; } }
@media print { .lbox { display: none !important; } }

/* Web design and support pages: images set to "show whole image" are not cropped */
.page-web-design .split__media--whole, .page-website-support .split__media--whole { align-items: center; align-self: center; }
.page-web-design .split__media--whole img, .page-website-support .split__media--whole img { height: auto; min-height: 0; max-height: none; aspect-ratio: auto; object-fit: contain; }

/* Text & image blocks with two images: stacked, with a gap */
.split__media--stack { display: grid; gap: clamp(3rem, 7.5vw, 5.25rem); align-content: center; }
.split__media--stack .split__stack-item { margin: 0; }
.split__media--stack img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.page-web-design .split__media--stack, .page-website-support .split__media--stack { display: grid; }
.page-web-design .split__media--stack img, .page-website-support .split__media--stack img { height: auto; min-height: 0; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }

/* WordPress web design page: accent colours alternate section by section (lime, pink, lime, pink, lime, pink) */
.page-web-design-wordpress .section:has(.split__media--stack) .split__media img { border-bottom-color: var(--pink); }
.page-web-design-wordpress .section:has(.split__media--stack) .kicker { color: var(--pink); }
.page-web-design-wordpress .section:has(.split__media--stack) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--pink); border-color: var(--pink); color: #fff; }
.page-web-design-wordpress .section:has(.split__media--stack) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--pink-dark); border-color: var(--pink-dark); color: #fff; }
.page-web-design-wordpress .section:has(.split__media--stack) .rich a, .page-web-design-wordpress .section:has(.split__media--stack) .more { color: var(--pink-dark); }
.page-web-design-wordpress .section:has(.split__media--stack) .rich a:hover, .page-web-design-wordpress .section:has(.split__media--stack) .more:hover { color: var(--ink); }
.page-web-design-wordpress .section:has(.split__media--stack) .rich ul li::before, .page-web-design-wordpress .section:has(.split__media--stack) .ticks li > i { color: var(--pink); }
.page-web-design-wordpress .section:has(.split__media--stack) a:focus-visible { outline-color: var(--pink); }
.page-web-design-wordpress .section:has(.features) .kicker { color: var(--lime-deep); }
.page-web-design-wordpress .section:has(.features) .card__icon { background: #eef6d9; color: var(--lime-deep); }
.page-web-design-wordpress .section:has(.features) .ticks li > i { color: var(--lime); }
.page-web-design-wordpress .section:has(.features) .more { color: var(--lime-deep); }
.page-web-design-wordpress .section:has(.features) .more:hover { color: var(--ink); }
.page-web-design-wordpress .section:has(.features) a:focus-visible { outline-color: var(--ink); }

/* Footer: Living Wage Employer logo beside the Disability Confident logo, both the same height */
.footer__badges { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; align-self: flex-end; }
.footer__badges .footer__badge { align-self: auto; }
.footer__badges .footer__badge img { width: auto; height: 68px; }
@media (max-width: 640px) { .footer__badges { align-self: flex-start; justify-content: flex-start; } }

/* Footer on phones: everything centred */
@media (max-width: 640px) {
  .footer__inner { text-align: center; justify-content: center; }
  .footer__inner > div { max-width: none; width: 100%; }
  .footer__nav { justify-content: center; }
  .footer__logo { display: block; margin-inline: auto; }
  .footer__contact ul { justify-items: center; }
  .footer__contact li { justify-content: center; }
  .footer__side { align-items: center; }
  .footer__social { justify-content: center; }
  .footer__badges { align-self: center; justify-content: center; }
}

/* Footer on phones: the Get in touch lines sit closer together */
@media (max-width: 640px) {
  .footer__contact ul { gap: .2rem; }
  .footer__contact a { padding: .1rem 0; }
  .footer__head { margin-bottom: .5rem; }
}

/* Contact form band: full padding at the top on every page except Contact, where it follows the contact cards closely */
.section--cform, .page-website-support .section--cform { padding-top: var(--space); }
.page-contact .section--cform { padding-top: calc(var(--space) * .3); }

/* Tablet landscape (961-1280px): the footer keeps three columns (logo and address, Get in touch, social icons and logos) instead of wrapping the icons and logos underneath */
@media (min-width: 961px) and (max-width: 1280px) {
  .footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.4rem 2.5rem; align-items: start; }
  .footer__inner > div { max-width: none; }
  .footer__nav { grid-column: 1 / -1; }
}

/* Tablets and phones: bigger tap targets for the small links (footer links, "read more" links, topic tags, Client Connect and phone in the top band) */
@media (max-width: 960px) {
  .footer__nav a, .footer__contact a { display: inline-block; padding: .6rem 0; }
  .footer__contact ul { gap: 0; }
  .more { display: inline-block; padding: .5rem 0; }
  .tags .tag { padding: .6em .9em; }
  .topbar a.topbar__cc { padding: .5rem .85rem; }
  .topbar__phone { padding: .5rem 0; }
}
@media (max-width: 640px) {
  .footer__contact a { padding: .45rem 0; }
}

/* Signable legal documents: the Agreement/Service Period info box under the hero */
.section--term { padding-bottom: 0; }
.section--term .status { align-items: flex-start; }
.section--term .status i { margin-top: .15rem; }
.status__title { margin: 0 0 .3rem; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
@media (max-width: 640px) { .section--term .status { flex-direction: column; text-align: left; align-items: flex-start; gap: .6rem; } }
.section--term + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Site search results */
.search-results { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.search-result { padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.search-result h2 { font-size: 1.3rem; margin: .2rem 0 .3rem; }
.search-result p { margin: 0 0 .3rem; color: var(--muted); }
.search-result__type { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }
.search-result__url { font-size: .85rem; word-break: break-all; }

/* Search results in the style of classic Google results */
.gsr-stats { font: 17px/1.4 arial, sans-serif; color: #70757a; margin: 0 0 1.6rem; }
.gsr-stats strong { font-weight: 400; color: #202124; }
.gsr { list-style: none; margin: 0; padding: 0; max-width: 860px; font-family: arial, sans-serif; }
.gsr__item { margin: 0 0 2.2rem; }
.gsr__title { font: 400 28px/1.3 arial, sans-serif; margin: 0; }
.gsr__title a { color: var(--pink); text-decoration: none; }
.gsr__title a:hover { text-decoration: underline; }
.gsr__title a:visited { color: var(--pink-dark); }
.gsr__url { display: flex; align-items: baseline; gap: .5em; font-size: 17px; line-height: 1.3; margin: .1rem 0 .15rem; color: #006621; }
.gsr__url cite { flex: 0 1 auto; min-width: 0; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsr__url span { flex: none; padding: 0 .4em; border: 1px solid #dadce0; border-radius: 3px; font-size: 13px; color: #70757a; }
.gsr__snippet { font-size: 18px; line-height: 1.55; color: #545454; margin: 0; }
.gsr__snippet b { font-weight: 700; color: #3c4043; }
.gsr-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.6rem; max-width: 860px; }
.gsr-pager a, .gsr-pager strong { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: 1rem; font-weight: 500; line-height: 1; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.gsr-pager a { color: var(--ink-2); }
.gsr-pager a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.gsr-pager strong { background: var(--pink); border-color: var(--pink); color: #fff; }
.gsr-pager .gsr-pager__nav { display: inline-flex; gap: .5rem; padding: 0 1.1rem; border: 2px solid var(--pink); color: var(--pink); font-weight: 700; }
.gsr-pager .gsr-pager__nav:first-child { margin-right: .5rem; }
.gsr-pager .gsr-pager__nav:last-child { margin-left: .5rem; }
@media (max-width: 560px) { .gsr-pager { justify-content: center; } .gsr-pager a, .gsr-pager strong { min-width: 40px; height: 40px; } }

/* Service links beside the search results, in the style of old text ads */
.gsr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem 3rem; align-items: start; }
@media (min-width: 1100px) { .gsr-layout { grid-template-columns: minmax(0, 860px) 300px; } .gsr-ads { margin-top: 2.9rem; } }
.gsr-ads { background: var(--pink-soft); border: 1px solid var(--pink-line); border-radius: var(--radius); padding: .9rem 1.1rem .4rem; font-family: arial, sans-serif; }
.gsr-ads ul { list-style: none; margin: 0; padding: 0; }
.gsr-ads__label { margin: 0 0 .6rem; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pink-dark); }
.gsr-ad { padding: .7rem 0 .85rem; border-top: 1px solid var(--pink-line); }
.gsr-ad:first-child { border-top: 0; padding-top: .2rem; }
.gsr-ad__title { display: block; font-size: 17px; line-height: 1.3; font-weight: 400; color: var(--pink); text-decoration: underline; }
.gsr-ad__title:hover { color: var(--pink-dark); }
.gsr-ad__url { margin: .15rem 0; font-size: 13px; line-height: 1.3; color: #4f7a0c; word-break: break-all; }
.gsr-ad__text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* Search icon in the top bar, beside Client Connect */
.topbar a.topbar__search { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transition: background .2s, color .2s; }
.topbar a.topbar__search i { margin: 0; font-size: .9em; }
.topbar a.topbar__search:hover, .topbar a.topbar__search:focus-visible { background: #fff; color: var(--pink); text-decoration: none; }
.topbar a.topbar__search:hover i, .topbar a.topbar__search:focus-visible i { color: var(--pink); }

/* Error pages without the photo: a single column */
.err__inner { grid-template-columns: minmax(0, 1fr); }
.err__copy { max-width: 46rem; }

/* Let the browser smooth images that are scaled down */
img { image-rendering: auto; }

/* "What is my IP address?" help article: the visitor's own address, with a Copy button */
.ipbox { margin: 0 0 2rem; padding: 1.4rem 1.6rem; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--pink); border-radius: var(--radius); }
.ipbox__label { margin: 0 0 .2rem; font-size: .95rem; font-weight: 500; color: var(--muted); }
.ipbox__value { margin: 0; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ipbox__value--error { font-size: 1.2rem; color: var(--pink-dark); }
.ipbox__meta { margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }
.ipbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1rem; }
.ipbox__actions[hidden], .ipbox [hidden] { display: none; }
.ipbox__status { font-size: .9rem; color: var(--ink-2); }

/* "DNS lookup" help article: a domain's DNS records, listed by type (the form reuses the .wpv__ field styles) */
.dnsl { margin: 0 0 2rem; padding: 1.4rem 1.6rem; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--pink); border-radius: var(--radius); }
.dnsl .wpv__row .btn { min-width: 0; font-size: 1.1rem; font-weight: 600; padding: .7em 1.4em; }
.dnsl__result { margin-top: 1.2rem; }
.dnsl__result:not(.is-shown) { display: none; }
.dnsl__title { margin: 0 0 1rem; font-size: 1.3rem; overflow-wrap: anywhere; }
.dnsl__group { margin: 0 0 1.4rem; }
.dnsl__group h3 { margin: 0; font-size: 1.1rem; }
.dnsl__group h3 span { font-size: .85rem; font-weight: 400; color: var(--muted); margin-left: .4rem; }
.dnsl__help { margin: .2rem 0 .6rem; font-size: .9rem; color: var(--muted); }
.dnsl__scroll { overflow-x: auto; }
.dnsl__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dnsl__table th, .dnsl__table td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.dnsl__table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dnsl__val { overflow-wrap: anywhere; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.dnsl__note { margin: 0; font-size: .88rem; color: var(--muted); }

/* Icons: Font Awesome Jelly Fill. Any icon it lacks falls back to the classic glyph, and brand icons keep the brands font */
.fa-jelly-fill { font-family: "Font Awesome 7 Jelly Fill", "Font Awesome 7 Pro"; font-weight: 400; }

/* Icons Jelly Fill lacks use the classic solid style, so every icon is filled */
.fa-arrow-pointer, .fa-arrow-turn-up, .fa-award, .fa-basket-shopping, .fa-calendar-check, .fa-chart-line, .fa-chevron-down, .fa-chevron-left, .fa-chevron-right, .fa-circle-exclamation, .fa-clipboard-check, .fa-code-branch, .fa-code-compare, .fa-comment-sms, .fa-cookie-bite, .fa-copy, .fa-door-open, .fa-download, .fa-envelope-open-text, .fa-eraser, .fa-file-lines, .fa-fingerprint, .fa-folder-open, .fa-handshake, .fa-headset, .fa-id-card, .fa-keyboard, .fa-laptop-code, .fa-list-ul, .fa-magnifying-glass-chart, .fa-pen-ruler, .fa-people-group, .fa-plug, .fa-robot, .fa-screwdriver-wrench, .fa-server, .fa-signal, .fa-signature, .fa-spinner, .fa-sterling-sign, .fa-store, .fa-tablet-screen-button, .fa-tags, .fa-truck-fast, .fa-vial, .fa-window-restore, .fa-envelope-open, .fa-file-signature, .fa-file-word, .fa-mobile-screen-button, .fa-paintbrush, .fa-scale-balanced, .fa-user-shield, .fa-briefcase { font-family: "Font Awesome 7 Pro"; font-weight: 900; }

/* SEO page: accent colours alternate lime / pink with the white and grey bands, section by section (the hero is the first child of main) */
.page-website-support-seo main > .section:nth-child(even):not(.cta) .kicker { color: var(--lime-deep); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--lime-hover); border-color: var(--lime-hover); color: var(--ink); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .btn--ghost { color: var(--lime-deep); border-color: var(--lime); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .btn--ghost:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .rich a, .page-website-support-seo main > .section:nth-child(even):not(.cta) .more { color: var(--lime-deep); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .rich a:hover, .page-website-support-seo main > .section:nth-child(even):not(.cta) .more:hover { color: var(--ink); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .rich ul li::before, .page-website-support-seo main > .section:nth-child(even):not(.cta) .ticks li > i { color: var(--lime); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .rich ol li::before { background: #eef6d9; color: var(--lime-deep); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .rich blockquote { border-left-color: var(--lime); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .card__icon { background: #eef6d9; color: var(--lime-deep); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .plan--popular { border-color: var(--lime); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .plan__badge { background: var(--lime); color: var(--ink); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) a:focus-visible { outline-color: var(--ink); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .kicker { color: var(--pink-dark); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--pink); border-color: var(--pink); color: #fff; }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--pink-dark); border-color: var(--pink-dark); color: #fff; }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn--ghost { color: var(--pink-dark); border-color: var(--pink); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn--ghost:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich a, .page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .more { color: var(--pink-dark); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich a:hover, .page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .more:hover { color: var(--ink); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich ul li::before, .page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .ticks li > i { color: var(--pink); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich ol li::before { background: var(--pink-soft); color: var(--pink-dark); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich blockquote { border-left-color: var(--pink); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .card__icon { background: var(--pink-soft); color: var(--pink-dark); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .plan--popular { border-color: var(--pink); }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) .plan__badge { background: var(--pink); color: #fff; }
.page-website-support-seo main > .section:nth-child(odd):not(.cta):not(.page-hero) a:focus-visible { outline-color: var(--pink); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .addon { border-top-color: var(--lime); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .addon__icon { background: #eef6d9; color: var(--lime-deep); }
.page-website-support-seo main > .section:nth-child(even):not(.cta) .addon:hover .addon__icon { background: var(--lime); color: var(--ink); }

/* WordPress page: accent colours alternate lime / pink with the white and grey bands, section by section (the hero is the first child of main) */
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .kicker { color: var(--lime-deep); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--lime-hover); border-color: var(--lime-hover); color: var(--ink); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .btn--ghost { color: var(--lime-deep); border-color: var(--lime); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .btn--ghost:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .rich a, .page-web-design-wordpress main > .section:nth-child(even):not(.cta) .more { color: var(--lime-deep); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .rich a:hover, .page-web-design-wordpress main > .section:nth-child(even):not(.cta) .more:hover { color: var(--ink); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .rich ul li::before, .page-web-design-wordpress main > .section:nth-child(even):not(.cta) .ticks li > i { color: var(--lime); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .rich ol li::before { background: #eef6d9; color: var(--lime-deep); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .rich blockquote { border-left-color: var(--lime); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .card__icon { background: #eef6d9; color: var(--lime-deep); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .plan--popular { border-color: var(--lime); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .plan__badge { background: var(--lime); color: var(--ink); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) a:focus-visible { outline-color: var(--ink); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .kicker { color: var(--pink-dark); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light) { background: var(--pink); border-color: var(--pink); color: #fff; }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: var(--pink-dark); border-color: var(--pink-dark); color: #fff; }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn--ghost { color: var(--pink-dark); border-color: var(--pink); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .btn--ghost:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich a, .page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .more { color: var(--pink-dark); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich a:hover, .page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .more:hover { color: var(--ink); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich ul li::before, .page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .ticks li > i { color: var(--pink); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich ol li::before { background: var(--pink-soft); color: var(--pink-dark); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .rich blockquote { border-left-color: var(--pink); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .card__icon { background: var(--pink-soft); color: var(--pink-dark); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .plan--popular { border-color: var(--pink); }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) .plan__badge { background: var(--pink); color: #fff; }
.page-web-design-wordpress main > .section:nth-child(odd):not(.cta):not(.page-hero) a:focus-visible { outline-color: var(--pink); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .addon { border-top-color: var(--lime); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .addon__icon { background: #eef6d9; color: var(--lime-deep); }
.page-web-design-wordpress main > .section:nth-child(even):not(.cta) .addon:hover .addon__icon { background: var(--lime); color: var(--ink); }

/* Not-included marks stay grey whatever accent colour the page bands use */
.ticks li.is-off > i { color: #8a9097 !important; opacity: 1; }

/* Halloween colours (30 and 31 October): the pink variables become orange, switched by the pumpkin button (assets/js/halloween.js) */
html.halloween { --pink: #f26a0a; --pink-dark: #c2500a; --pink-soft: #fff1e3; --pink-rgb: 242, 106, 10; --pink-light: #ff9a3c; --pink-light-2: #ffb066; --pink-light-3: #ffc88f; --pink-wash: #fff8f0; --pink-line: #ffd9b3; --pink-wave: #d85a00; }
/* The header logo is swapped for the all-black logo and the footer logo for the all-white logo in halloween.js; these filters do the same until the script has run */
html.halloween .logo img { filter: brightness(0); }
html.halloween .footer__logo { filter: brightness(0) invert(1); }
html.halloween .topic-select select { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23f26a0a%27 stroke-width=%272%27/%3E%3C/svg%3E"); }
.halloween-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 58; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid #ff7518; background: #2b3035; color: #ff8c1a; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); transition: transform .2s, background .2s, color .2s; }
.halloween-btn:hover { transform: scale(1.08) rotate(-6deg); }
.halloween-btn:focus-visible { outline: 3px solid #ff7518; outline-offset: 3px; }
.halloween-btn[aria-pressed="true"] { background: #ff7518; color: #2b1200; border-color: #fff; }
@media (max-width: 640px) { .halloween-btn { bottom: 5.4rem; width: 46px; height: 46px; font-size: 1.3rem; } }
@media print { .halloween-btn { display: none !important; } }

/* A tilted, faint pumpkin in the top right of each hero while the Halloween colours are on */
html.halloween .hero, html.halloween .page-hero, html.halloween .kb-hero, html.halloween .legal-hero { position: relative; overflow: hidden; }
html.halloween .hero::after, html.halloween .page-hero::after, html.halloween .kb-hero::after, html.halloween .legal-hero::after { content: "\f30e"; content: "\f30e" / ""; font-family: "Font Awesome 7 Pro"; font-weight: 900; position: absolute; top: clamp(.4rem, 2vw, 1.4rem); right: clamp(.5rem, 5vw, 5rem); font-size: clamp(6rem, 17vw, 15rem); line-height: 1; color: var(--pink); opacity: .16; transform: rotate(18deg); transform-origin: center; pointer-events: none; z-index: 0; }
html.halloween .hero > .wrap, html.halloween .page-hero > .wrap, html.halloween .kb-hero > .wrap, html.halloween .legal-hero > .wrap { position: relative; z-index: 1; }
@media print { html.halloween .hero::after, html.halloween .page-hero::after, html.halloween .kb-hero::after, html.halloween .legal-hero::after { display: none; } }

/* Welcome bar for the new website: --ink background, white text, dismissible */
.welcome { background: var(--ink); color: #fff; font-size: .95rem; }
.welcome__inner { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; }
.welcome__icon { flex: none; font-size: 1.25rem; color: #fff; }
.welcome__text { flex: 1; margin: 0; line-height: 1.45; }
.welcome__text a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.welcome__text a:hover { color: #fff; text-decoration-thickness: 2px; }
.welcome__close { flex: none; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; transition: background .2s; }
.welcome__close:hover { background: rgba(255,255,255,.18); }
.welcome__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.welcome-off .welcome { display: none; }
@media (max-width: 640px) { .welcome { font-size: .9rem; } .welcome__inner { align-items: flex-start; gap: .65rem; } .welcome__icon { margin-top: .15rem; } }
@media print { .welcome { display: none !important; } }