/* ===== About: compact portrait ===== */
.about { padding: 70px 0; }
.about-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 50px; align-items: center; }
.about .about-photo { width: 240px; justify-self: start; }
.about .about-photo img { border-radius: 50%; box-shadow: 0 0 0 6px var(--cream), 0 0 0 8px var(--navy); }
.about-body .about-intro { font-size: 30px; line-height: 40px; }
.about-body .about-text { margin-top: 22px; max-width: 820px; }
.about-body .about-text p + p { margin-top: 16px; }
@media (max-width: 767px) {
  .about-wrap { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .about .about-photo { width: 180px; justify-self: center; }
  .about-body .about-intro { font-size: 23px; line-height: 31px; }
}

/* ===== More motion ===== */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,217,188,.0); } 50% { box-shadow: 0 0 0 10px rgba(194,217,188,.35); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.anim .hero-title { animation: rise .9s cubic-bezier(.2,.8,.2,1) .1s both; }
.anim .typing-text { animation: rise .9s cubic-bezier(.2,.8,.2,1) .25s both; }
.anim .hero::before, .anim .hero::after { animation: rise 1.2s ease .1s both; }
.anim .hero-ctas .btn-big { animation: glow 2.8s ease-in-out 2.2s infinite; }
.anim .about .about-photo { animation: bob 6s ease-in-out infinite; }
.anim .underline::after { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.6,0,.2,1) .35s; }
.anim .underline.drawn::after { clip-path: inset(0 0 0 0); }
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(20,27,65,.10); }
.logo-track li img, .logo-track li .outlet-tile { transition: transform .3s ease; }
.logo-track li:hover img { transform: translateY(-6px) rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .anim .underline::after { clip-path: none; } }
/* Portrait */
.about .about-photo { display: block; height: auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px var(--cream), 0 0 0 8px var(--navy); }
.about .about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ===== Email result cards ===== */
.results-note { font-size: 17px; line-height: 25px; opacity: .8; margin: -8px 0 20px; max-width: 760px; }
.result-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.result-card { border: 1px solid rgba(251,244,215,.35); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 4px; transition: transform .3s ease, background-color .3s ease; }
.result-card:hover { transform: translateY(-6px); background: rgba(251,244,215,.06); }
.result-card b { font-size: 44px; line-height: 1.05; font-style: italic; color: var(--green); }
.result-card span { font-size: 20px; line-height: 27px; font-weight: 700; }
.result-card small { font-size: 16px; line-height: 23px; opacity: .8; }
@media (max-width: 1024px) { .result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .result-cards { grid-template-columns: 1fr; } .result-card b { font-size: 36px; } }

/* ===== Proof strip ===== */
.proof-strip { list-style: none; margin: 44px auto 0; padding: 22px 10px; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(20,27,65,.2); border-bottom: 1px solid rgba(20,27,65,.2); }
.proof-strip li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 4px 16px; min-width: 0; }
.proof-strip li + li { border-left: 1px solid rgba(20,27,65,.2); }
.proof-strip .stars, .proof-icon { font-size: 18px; color: #C9A227; letter-spacing: 3px; }
.proof-strip b { font-size: 22px; font-style: italic; }
.proof-strip small { font-size: 16px; opacity: .8; }
@media (max-width: 767px) {
  .proof-strip { grid-template-columns: 1fr; padding: 8px 0; }
  .proof-strip li { padding: 14px 0; }
  .proof-strip li + li { border-left: 0; border-top: 1px solid rgba(20,27,65,.2); }
}

/* ===== Comparison ===== */
.versus { padding: 90px 0; background: var(--pink); }
.versus .table-wrap { overflow-x: auto; margin-top: 46px; }
.versus-table { width: 100%; min-width: 680px; max-width: 1100px; margin: 0 auto; border-collapse: separate; border-spacing: 0; font-size: 18px; line-height: 26px; }
.versus-table th, .versus-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(20,27,65,.15); }
.versus-table thead th { font-size: 21px; font-style: italic; font-weight: 700; border-bottom: 2px solid var(--navy); }
.versus-table tbody th { font-weight: 700; width: 28%; }
.versus-table .me { background: var(--cream); }
.versus-table thead .me { background: var(--navy); color: var(--cream); border-radius: 12px 12px 0 0; }
.versus-table tbody tr:last-child .me { border-radius: 0 0 12px 12px; }
.versus-table i { font-style: normal; font-weight: 700; display: inline-block; width: 22px; }
.versus-table .y { color: #2E8B3A; } .versus-table .n { color: #B23A48; } .versus-table .m { color: #8A6D1F; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 767px) { .versus { padding: 60px 0; } .versus-table { font-size: 16px; line-height: 23px; } }

/* ===== Sticky "Book a call" (all screens) ===== */
.sticky-cta { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 90; background: var(--green); color: var(--navy); font-weight: 700; font-size: 19px; text-decoration: none; padding: 14px 26px; border-radius: 999px; box-shadow: 0 8px 24px rgba(20,27,65,.25); transition: transform .35s ease, opacity .35s ease, background-color .2s ease; }
.sticky-cta:hover { background: var(--green-hover); }
.sticky-cta.away { transform: translateY(160%); opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .sticky-cta { left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .site-footer { padding-bottom: 90px; }
}

/* Tighter gap between Services and Reviews; bigger portrait */
.services { padding-bottom: 30px; }
.reviews { padding-top: 40px; }
.about-wrap { grid-template-columns: 320px minmax(0, 1fr); }
.about .about-photo { width: 320px; }
@media (max-width: 767px) { .about-wrap { grid-template-columns: 1fr; } .about .about-photo { width: 220px; } }
.about { margin-top: 0; }

/* Bigger sticky button + booking row */
.sticky-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 23px; padding: 18px 34px; right: 28px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.book-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: -10px 0 34px; }
.book-row span { font-style: italic; font-size: 18px; opacity: .8; }
@media (max-width: 767px) { .sticky-cta { font-size: 21px; padding: 16px 20px; } .book-btn { font-size: 22px; } }

/* ===== Animation pass 3 ===== */
/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); z-index: 200; pointer-events: none; }
/* Hero vines grow out of the corners */
@keyframes grow-left { from { opacity: 0; transform: scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes grow-right { from { opacity: 0; transform: scale(.6) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.2deg; } }
.anim .hero::before { transform-origin: 0 0; animation: grow-left 1.4s cubic-bezier(.2,.8,.2,1) both, sway 9s ease-in-out 1.4s infinite; }
.anim .hero::after { transform-origin: 100% 0; animation: grow-right 1.4s cubic-bezier(.2,.8,.2,1) both, sway 9s ease-in-out 1.4s infinite reverse; }
/* Section titles: words rise one by one */
.anim .section-title .w { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.anim .section-title.words-in .w { opacity: 1; transform: none; }
/* Journey: an envelope travels along the flow cards, each card lights up as it passes */
.journey-map { position: relative; }
.journey-map li { transition: transform .4s ease, box-shadow .4s ease, background-color .4s ease; }
.journey-map li.lit { background: #fff; transform: translateY(-6px); box-shadow: 0 0 0 3px var(--green), 0 14px 30px rgba(0,0,0,.25); }
.journey-map li:not(:last-child)::after { transition: transform .4s ease; }
.journey-map li.lit::after { transform: translate(4px, -50%) scale(1.4); }
/* Comparison ticks pop in row by row */
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
.anim .versus-table i { transform: scale(0); }
.anim .versus-table.ticks-in i { animation: pop .45s cubic-bezier(.2,.8,.2,1) both; }
/* Case cards tilt towards the mouse */
.case-card { transform-style: preserve-3d; will-change: transform; }
.case-card.tilting { transition: transform .08s linear, box-shadow .3s ease; }
/* Stat icons bob on hover; result numbers glow while counting */
.stat:hover img { animation: bob 1.2s ease-in-out infinite; }
.result-card b.counting { text-shadow: 0 0 18px rgba(194,217,188,.5); }
/* Sticky button nudges every few seconds */
@keyframes nudge { 0%, 88%, 100% { transform: none; } 91% { transform: translateY(-6px) rotate(-3deg); } 94% { transform: translateY(0) rotate(2deg); } 97% { transform: translateY(-3px); } }
.sticky-cta:not(.away) { animation: nudge 6s ease-in-out 3s infinite; }
.sticky-cta:hover { animation: none; transform: translateY(-3px) scale(1.04); }
/* Logo strip: pause and pop on hover */
.logo-track li:hover span { color: var(--navy); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .anim .section-title .w { opacity: 1; transform: none; }
  .anim .versus-table i { transform: none; }
  .sticky-cta:not(.away) { animation: none; }
}
.proof-icon { display: inline-flex; height: 22px; align-items: center; }
/* Comparison: rows slide in, then ticks pop (bigger, clearer) */
.anim .versus-table tbody tr { opacity: 0; transform: translateX(-24px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.anim .versus-table.ticks-in tbody tr { opacity: 1; transform: none; }
.versus-table i { font-size: 20px; }
@keyframes pop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.8) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.anim .versus-table.ticks-in td.me { animation: me-glow 1.2s ease 1.2s both; }
@keyframes me-glow { 0% { box-shadow: inset 0 0 0 0 rgba(194,217,188,0); } 50% { box-shadow: inset 0 0 0 3px rgba(194,217,188,.9); } 100% { box-shadow: inset 0 0 0 0 rgba(194,217,188,0); } }
@media (prefers-reduced-motion: reduce) { .anim .versus-table tbody tr { opacity: 1; transform: none; } }
/* Brand mark top left */
.header-inner { justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-size: 26px; font-weight: 700; letter-spacing: .5px; }
.brand img { width: 40px; height: 40px; border-radius: 50%; image-rendering: pixelated; }
.brand i { font-weight: 400; }
@media (max-width: 991px) { .brand { font-size: 21px; } .brand img { width: 34px; height: 34px; } }
/* Hero CTAs stacked */
.hero-ctas { flex-direction: column; gap: 16px; }
/* Logo marquee: slower, smaller, sharper */
.logo-track { animation-duration: 70s; gap: 28px; }
.logo-track li { width: 130px; }
.logo-track img { width: 112px; border-radius: 18px; margin-bottom: 10px; }
.logo-track span { font-size: 16px; line-height: 22px; }
@media (max-width: 767px) { .logo-track { animation-duration: 55s; gap: 18px; } .logo-track li { width: 100px; } .logo-track img { width: 84px; } .logo-track span { font-size: 13px; line-height: 18px; } }
/* Golden laurel numbers */
.laurel b { color: #8a6a14; }
/* Business cards in brand green */
.stat { background: var(--green); box-shadow: 0 10px 0 -2px rgba(20,27,65,.12); transition: transform .3s ease, box-shadow .3s ease; }
.stat:hover { transform: translateY(-6px); box-shadow: 0 16px 0 -2px rgba(20,27,65,.16); }
.stat strong { color: var(--navy); }
/* Case studies: navy cards, clear type levels, green pills */
.case-card { background: var(--navy); border: 0; color: var(--cream); }
.case-card h3, .case-card p { color: var(--cream); }
.case-card .case-metric { color: var(--green); font-size: 52px; }
.case-card .case-metric-label { color: rgba(251,244,215,.72); font-size: 15px; font-style: normal; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin: 6px 0 22px; }
.case-card h3 { font-size: 28px; font-style: italic; padding-top: 18px; border-top: 1px solid rgba(251,244,215,.2); }
.case-card > p:not([class]) { color: rgba(251,244,215,.88); }
.case-card .tags li { background: var(--pink); border: 0; color: var(--navy); font-style: normal; font-weight: 700; padding: 4px 14px; }
.case-card:hover { box-shadow: 0 18px 36px rgba(20,27,65,.3); }
@media (max-width: 767px) { .case-card .case-metric { font-size: 40px; } .case-card h3 { font-size: 24px; } .case-card .case-metric-label { font-size: 13px; } }
/* Case studies v2: purple cards, navy text, green pills */
.case-card { background: var(--pink); color: var(--navy); }
.case-card h3, .case-card p, .case-card .case-metric { color: var(--navy); }
.case-card .case-metric-label { color: rgba(20,27,65,.7); }
.case-card > p:not([class]) { color: var(--navy); }
.case-card h3 { border-top-color: rgba(20,27,65,.2); }
.case-card .tags li { background: var(--green); color: var(--navy); }
.case-card:hover { box-shadow: 0 18px 36px rgba(20,27,65,.18); }
/* Email section: pink ground, navy as accent */
.journey { background: var(--pink); color: var(--navy); }
.journey .section-title, .journey-lead, .results-note { color: var(--navy); }
.journey-label { color: var(--navy); }
.journey-map li { background: var(--cream); color: var(--navy); }
.journey-map li:not(:last-child)::after { color: var(--navy); }
.journey-map li.lit { background: var(--navy); color: var(--cream); box-shadow: 0 0 0 3px var(--green), 0 14px 30px rgba(20,27,65,.25); }
.journey-map li.lit b, .journey-map li.lit span, .journey-map li.lit small { color: var(--cream); opacity: 1; }
.chips li { border-color: var(--navy); color: var(--navy); }
.chips li:hover { background: var(--navy); color: var(--cream); }
.result-card { background: var(--navy); border: 0; color: var(--cream); }
.result-card:hover { background: var(--navy); box-shadow: 0 14px 30px rgba(20,27,65,.25); }
.offer { background: var(--cream); color: var(--navy); }
/* Review avatars */
.review-card footer { display: flex; align-items: center; gap: 14px; }
.review-card .avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--navy); font-style: normal; font-size: 19px; letter-spacing: 1px; box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px rgba(20,27,65,.2); }
.review-card:nth-child(3n+2) .avatar { background: var(--pink); }
.review-card:nth-child(3n) .avatar { background: var(--navy); color: var(--cream); }
/* Required marks */
.field .req { color: #b4234a; font-weight: 700; }
.review-card:nth-child(3n+2) .avatar { background: var(--cream); }
.review-card footer .who span { text-transform: none; }
/* Brand flower */
.brand img { border-radius: 0; image-rendering: auto; }
/* Case studies: compact, in proportion with the rest of the site */
.case-grid { gap: 22px; margin-top: 44px; }
.case-card { padding: 26px 28px; }
.case-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.case-top .case-logo { width: 56px; height: 56px; border-radius: 10px; margin: 0; }
.case-art { width: 56px; height: 56px; color: var(--navy); opacity: .85; }
.case-art svg { width: 100%; height: 100%; }
.anim .case-card:hover .case-art { animation: sway 1.2s ease-in-out; }
.case-card .case-metric { font-size: 36px; }
.case-card .case-metric-label { font-size: 13px; margin: 4px 0 16px; }
.case-card h3 { font-size: 22px; padding-top: 14px; margin-bottom: 8px; }
.case-card > p:not([class]) { font-size: 17px; line-height: 26px; }
.case-card .tags { margin-top: 16px; }
.case-card .tags li { font-size: 14px; padding: 3px 12px; }
@media (max-width: 767px) { .case-card { padding: 22px; } .case-card .case-metric { font-size: 30px; } .case-card h3 { font-size: 20px; } .case-card > p:not([class]) { font-size: 16px; line-height: 24px; } .case-art, .case-top .case-logo { width: 48px; height: 48px; } }
.review-card img.avatar { object-fit: cover; padding: 0; }
.journey-map li.lit { background: var(--green); color: var(--navy); box-shadow: 0 0 0 3px var(--navy), 0 14px 30px rgba(20,27,65,.25); }
.journey-map li.lit b, .journey-map li.lit span, .journey-map li.lit small { color: var(--navy); }
.brand img { width: 44px; height: 44px; }
/* Reviews: face + name pinned to the same spot on every card */
.carousel#reviews { align-items: stretch; }
.review-card { display: flex; flex-direction: column; }
.review-card p { flex: 1; }
.review-card footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(20,27,65,.15); min-height: 72px; text-transform: none; font-size: 18px; line-height: 24px; }
.review-card footer .who { display: flex; flex-direction: column; }
.review-card footer .who span { display: block; font-weight: 400; font-size: 16px; }
.journey-map li { transition-duration: .7s; }
/* Business icons: crisp vector, animate on hover/tap and once on view */
.stat .ico { display: block; margin: 0 auto 12px; color: var(--navy); overflow: visible; }
.ico * { transform-box: fill-box; }
.ico-mail .flap { transform-origin: 50% 0%; transition: transform .5s ease; }
.ico-mail .letter { transition: transform .5s ease .15s; transform: translateY(14px); }
.stat:hover .ico-mail .flap, .stat.play .ico-mail .flap { transform: scaleY(-1); }
.stat:hover .ico-mail .letter, .stat.play .ico-mail .letter { transform: translateY(-8px); }
.ico-laptop .type path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s ease; }
.ico-laptop .t2 { transition-delay: .35s !important; } .ico-laptop .t3 { transition-delay: .7s !important; }
.stat:hover .ico-laptop .type path, .stat.play .ico-laptop .type path { stroke-dashoffset: 0; }
.ico-laptop .cursor { animation: blink 1s steps(1) infinite; }
.ico-laptop .rank { opacity: 0; transform: scale(.4); transform-origin: center; transition: opacity .3s ease 1.1s, transform .4s cubic-bezier(.2,.8,.2,1.4) 1.1s; }
.stat:hover .ico-laptop .rank, .stat.play .ico-laptop .rank { opacity: 1; transform: none; }
@keyframes blink { 50% { opacity: 0; } }
.ico-scroll .ink path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .5s linear; }
.ico-scroll .i2 { transition-delay: .5s !important; } .ico-scroll .i3 { transition-delay: 1s !important; }
.stat:hover .ico-scroll .ink path, .stat.play .ico-scroll .ink path { stroke-dashoffset: 0; }
.stat:hover .ico-scroll .quill, .stat.play .ico-scroll .quill { animation: write 1.5s ease-in-out; }
@keyframes write { 0% { transform: translate(-22px,-14px); } 33% { transform: translate(0,-14px); } 34% { transform: translate(-22px,-7px); } 66% { transform: translate(0,-7px); } 67% { transform: translate(-22px,0); } 100% { transform: translate(-6px,0); } }
.stat { cursor: default; }
@media (prefers-reduced-motion: reduce) { .ico * { transition: none !important; animation: none !important; } .ico-laptop .type path, .ico-scroll .ink path { stroke-dashoffset: 0; } .ico-laptop .rank { opacity: 1; transform: none; } }
.ico-scroll .i4 { transition-delay: 1.4s !important; }
@keyframes write { 0% { transform: translate(-30px,-2px); } 25% { transform: translate(-2px,-2px); } 26% { transform: translate(-30px,6px); } 50% { transform: translate(-2px,6px); } 51% { transform: translate(-30px,14px); } 75% { transform: translate(-12px,14px); } 100% { transform: translate(0,0); } }
.stat:hover .ico-scroll .quill, .stat.play .ico-scroll .quill { animation: write 1.8s ease-in-out; }
.ico-laptop .rank { transform-origin: 50% 100%; }
.ico-mail .seal { transition: opacity .3s ease; }
.stat:hover .ico-mail .seal, .stat.play .ico-mail .seal { opacity: 0; }
.stat .ico { width: 88px; height: 70px; filter: drop-shadow(0 3px 0 rgba(20,27,65,.12)); }
.chips li { background: var(--green); border-color: var(--green); color: var(--navy); }
.chips li:hover { background: var(--navy); border-color: var(--navy); color: var(--cream); }
/* Case studies: real product shots */
.case-art.product { width: auto; height: 96px; opacity: 1; display: flex; align-items: flex-end; }
.case-art.product img { height: 100%; width: auto; max-width: 170px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(20,27,65,.18)); transition: transform .4s ease; }
.anim .case-card:hover .case-art.product { animation: none; }
.case-card:hover .case-art.product img { transform: translateY(-6px) rotate(-3deg) scale(1.05); }
.case-top { align-items: center; min-height: 96px; }
@media (max-width: 767px) { .case-art.product { height: 76px; } .case-top { min-height: 76px; } }
.case-art.product img[src*="product-lw"] { height: 118%; margin-top: -10%; }
/* Services: icons, colour and motion */
.svc { position: relative; border-top: 2px solid rgba(20,27,65,.15); padding: 18px 16px 16px; border-radius: 0 0 12px 12px; transition: background-color .35s ease, transform .35s ease; }
.svc::before { content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: 0; background: var(--navy); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.svc.drawn::before, .svc:hover::before { width: 100%; }
.svc:hover { background: var(--green); transform: translateY(-4px); }
.svc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.svc-head h3 { margin: 0; }
.svc-ico { flex: 0 0 auto; transition: transform .4s cubic-bezier(.2,.8,.2,1.4); }
.svc:hover .svc-ico { transform: rotate(-10deg) scale(1.18); }
.anim .svc.drawn .svc-ico { animation: pop .5s cubic-bezier(.2,.8,.2,1) both; }
.anim .svc:nth-child(2).drawn .svc-ico { animation-delay: .12s; } .anim .svc:nth-child(3).drawn .svc-ico { animation-delay: .24s; }
.anim .svc:nth-child(4).drawn .svc-ico { animation-delay: .36s; } .anim .svc:nth-child(5).drawn .svc-ico { animation-delay: .48s; } .anim .svc:nth-child(6).drawn .svc-ico { animation-delay: .6s; }
/* Review faces: coloured ring */
.review-card .avatar { box-shadow: 0 0 0 3px var(--green), 0 0 0 5px var(--navy); }
/* Diamocycle ring photo */
.case-art.ring { position: relative; }
.case-art.ring img { max-width: 132px; height: auto; align-self: center; filter: drop-shadow(0 8px 10px rgba(20,27,65,.22)); }
.case-art.ring .sparkle { position: absolute; top: -6px; right: 4px; font-style: normal; color: var(--navy); font-size: 18px; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
/* Services v2: filled cards so the section has colour at rest */
.service-cards { gap: 18px; }
.svc { background: var(--pink); border-top: 0; border-radius: 14px; padding: 22px 22px 20px; box-shadow: 0 6px 0 -1px rgba(20,27,65,.10); }
.svc::before { top: 0; left: 22px; height: 3px; border-radius: 3px; }
.svc.drawn::before, .svc:hover::before { width: calc(100% - 44px); }
.svc-ico { background: var(--cream); border-radius: 50%; padding: 6px; width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--navy); }
.svc:nth-child(even) { background: var(--green); }
.svc:hover { background: var(--navy); color: var(--cream); transform: translateY(-6px); }
.svc:hover h3, .svc:hover p { color: var(--cream); }
.svc:hover::before { background: var(--green); }
/* Avatars: single navy ring */
.review-card .avatar { box-shadow: 0 0 0 3px var(--navy); }
/* Contact letter: a quill that follows the field you're in and writes as you type */
.envelope { position: relative; }
.quill-pen { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transform-origin: 12% 92%; transition: opacity .3s ease, translate .55s cubic-bezier(.2,.8,.2,1); }
.quill-pen.on { opacity: 1; animation: quill-bob 2.6s ease-in-out infinite; }
.quill-pen.writing { animation: quill-write .28s ease-in-out infinite; }
.quill-pen.sent { animation: quill-fly 1s ease-in forwards; }
@keyframes quill-bob { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes quill-write { 0% { rotate: -10deg; transform: translateX(0); } 50% { rotate: 6deg; transform: translateX(3px); } 100% { rotate: -10deg; transform: translateX(0); } }
@keyframes quill-fly { to { transform: translate(140px,-160px) rotate(40deg); opacity: 0; } }
.envelope .field input, .envelope .field textarea { transition: border-color .3s ease, box-shadow .3s ease; }
.envelope .field input:focus, .envelope .field textarea:focus { border-color: var(--navy); box-shadow: 0 3px 0 var(--green); outline: none; }
@media (prefers-reduced-motion: reduce) { .quill-pen { display: none; } }

/* One background everywhere: beige. Colour lives in the cards. */
.journey, .about, .versus, .compare, .contact, .faq, .reviews, .services, .portfolio, .business { background: var(--cream); }
.journey-map li { background: var(--pink); }
.offer { background: var(--pink); }
.versus-table .me { background: var(--pink); }

/* Even rhythm: same space between every section */
main > section[class] { padding-top: 50px; padding-bottom: 50px; margin-top: 0; margin-bottom: 0; }
main > section.hero { padding-top: 10px; }
main > section.contact { padding-bottom: 70px; }
@media (max-width: 767px) { main > section[class] { padding-top: 36px; padding-bottom: 36px; } main > section.hero { padding-top: 10px; } main > section.contact { padding-bottom: 50px; } }
.case-card .case-metric { margin-bottom: 16px; }
.envelope .field input, .envelope .field textarea { border-color: var(--navy); border-width: 2px; }
.envelope .field input:focus, .envelope .field textarea:focus { box-shadow: 0 3px 0 var(--green); }

/* Services v3: no icons. Cards are dealt in, titles get a highlighter swipe, words drift in */
.svc::before { display: none; }
.svc-head { margin-bottom: 10px; }
.svc h3 { position: relative; display: inline; padding: 0 4px; background: linear-gradient(var(--green), var(--green)) no-repeat 0 88% / 0% 42%; transition: background-size .7s cubic-bezier(.2,.8,.2,1); }
.svc:nth-child(even) h3 { background-image: linear-gradient(var(--pink), var(--pink)); }
.svc.drawn h3 { background-size: 100% 42%; }
.svc:hover h3 { background-size: 100% 100%; }
.svc:hover, .svc:nth-child(even):hover { background: inherit; }
.svc { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, opacity .6s ease; }
.svc:nth-child(odd):hover { background: var(--pink); } .svc:nth-child(even):hover { background: var(--green); }
.svc:hover h3, .svc:hover p { color: var(--navy); }
.svc:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 30px -12px rgba(20,27,65,.35); }
.svc:nth-child(even):hover { transform: translateY(-8px) rotate(1deg); }
.anim .svc:not(.drawn) { opacity: 0; transform: translateY(40px) rotate(var(--tilt, -3deg)); }
.anim .svc:nth-child(even) { --tilt: 3deg; }
.svc.drawn { transition-delay: calc(var(--i, 0) * 110ms); }
.svc .w { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--d) * 28ms + 350ms + var(--i, 0) * 110ms); }
.svc.drawn .w { opacity: 1; transform: none; }
.svc:hover .w { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .svc .w { opacity: 1; transform: none; } .anim .svc:not(.drawn) { opacity: 1; transform: none; } }

/* Envelope v2: airmail letter with stamp and postmark */
.envelope { filter: drop-shadow(0 18px 24px rgba(20,27,65,.12)); }
.letter-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.letter-left { display: flex; flex-direction: column; gap: 14px; }
.par-avion { align-self: flex-start; border: 2px solid var(--navy); border-radius: 4px; padding: 4px 10px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--navy); }
.dear { font-size: 34px; font-style: italic; color: var(--navy); line-height: 1; }
.stamp-wrap { position: relative; width: 210px; height: 120px; flex: 0 0 auto; }
.stamp { position: absolute; right: 0; top: 0; width: 96px; height: 114px; background: var(--pink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--navy);
  --p: 6px; -webkit-mask: radial-gradient(circle at var(--p) var(--p), transparent 3.5px, #000 4px) calc(var(--p) * -1) calc(var(--p) * -1) / calc(var(--p) * 2) calc(var(--p) * 2);
  mask: radial-gradient(circle at var(--p) var(--p), transparent 3.5px, #000 4px) calc(var(--p) * -1) calc(var(--p) * -1) / calc(var(--p) * 2) calc(var(--p) * 2);
  box-shadow: inset 0 0 0 9px var(--pink), inset 0 0 0 11px var(--navy); transform: rotate(4deg); }
.stamp img { width: 58px; height: 58px; }
.stamp b { font-size: 15px; font-style: italic; letter-spacing: 1px; } .stamp i { position: absolute; top: 14px; left: 16px; font-size: 12px; font-weight: 700; font-style: normal; }
.postmark { position: absolute; right: 52px; top: 10px; opacity: .78; z-index: 2; transform: rotate(-14deg); }
.cancel-lines { position: absolute; right: 120px; top: 44px; opacity: .7; }
.anim .envelope:not(.posted) .stamp { opacity: 0; transform: translateY(-30px) rotate(-20deg) scale(1.4); }
.anim .envelope:not(.posted) .postmark { opacity: 0; transform: rotate(-40deg) scale(1.8); }
.anim .envelope:not(.posted) .cancel-lines { clip-path: inset(0 100% 0 0); }
.anim .envelope:not(.posted) .dear { clip-path: inset(0 100% 0 0); }
.anim .envelope:not(.posted) .par-avion { opacity: 0; transform: translateX(-20px); }
.stamp { transition: opacity .3s ease .1s, transform .5s cubic-bezier(.3,1.6,.5,1) .1s; }
.postmark { transition: opacity .15s ease .75s, transform .35s cubic-bezier(.3,1.5,.5,1) .75s; }
.cancel-lines { transition: clip-path .7s ease 1s; }
.dear { transition: clip-path 1.1s steps(12) .3s; }
.par-avion { transition: opacity .4s ease, transform .4s ease; }
.envelope.posted .stamp:hover { transform: rotate(-3deg) scale(1.08); }
@media (max-width: 767px) { .letter-head { flex-direction: column-reverse; align-items: stretch; } .stamp-wrap { align-self: flex-end; transform: scale(.8); transform-origin: right top; margin-bottom: -24px; } .dear { font-size: 28px; } }
.stamp { -webkit-mask: none; mask: none; width: 96px; height: 108px; box-shadow: none; background: radial-gradient(circle, var(--cream) 3px, transparent 3.6px) -6px -6px / 12px 12px, var(--pink); }
.stamp::before { content: ""; position: absolute; inset: 6px; background: var(--pink); box-shadow: inset 0 0 0 4px var(--pink), inset 0 0 0 6px var(--navy); }
.stamp img, .stamp b { position: relative; z-index: 1; }
.case-card .case-metric { font-size: 28px; line-height: 1.2; }
@media (max-width: 767px) { .case-card .case-metric { font-size: 24px; } }

/* ===== Animation pass 5 ===== */
/* 1. Hero vines grow out from the corners, petals drift down */
@property --grow { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes vine-grow { from { --grow: -120px; } to { --grow: 760px; } }
.anim .hero::before, .anim .hero::after { animation: vine-grow 3.6s cubic-bezier(.45,.05,.4,1) .1s both, sway 9s ease-in-out 3s infinite; }
.anim .hero::after { animation-direction: normal, reverse; }
.anim .hero::before { -webkit-mask: radial-gradient(circle at 0 0, #000 var(--grow), transparent calc(var(--grow) + 120px)); mask: radial-gradient(circle at 0 0, #000 var(--grow), transparent calc(var(--grow) + 120px)); }
.anim .hero::after { -webkit-mask: radial-gradient(circle at 100% 0, #000 var(--grow), transparent calc(var(--grow) + 120px)); mask: radial-gradient(circle at 100% 0, #000 var(--grow), transparent calc(var(--grow) + 120px)); }
.petals { position: absolute; inset: 0 0 auto; height: 620px; overflow: hidden; pointer-events: none; z-index: 0; }
.petal { position: absolute; top: -30px; left: var(--x); width: 18px; height: 14px; background: var(--pink); border: 1.4px solid rgba(20,27,65,.7); border-radius: 80% 0 80% 0; opacity: 0; scale: var(--s); animation: petal-fall var(--t) linear calc(var(--d) + 2.4s) infinite; }
@keyframes petal-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: .9; } 50% { transform: translate(40px, 300px) rotate(220deg); } 90% { opacity: .8; } 100% { opacity: 0; transform: translate(-20px, 620px) rotate(480deg); } }

/* 2. Signature writes itself */
.signature { display: block; width: 220px; height: auto; margin-top: 14px; overflow: visible; }
.signature text { font-family: 'Mrs Saint Delafield', cursive; font-size: 92px; fill: transparent; stroke: var(--navy); stroke-width: 1.2; stroke-dasharray: 900; stroke-dashoffset: 900; }
.signature.write text { animation: sign 2.6s cubic-bezier(.5,0,.3,1) forwards, ink .6s ease 2.2s forwards; }
@keyframes sign { to { stroke-dashoffset: 0; } }
@keyframes ink { to { fill: var(--navy); } }
.footer-sign { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 30px 20px 0; }
.footer-sign .signature { margin: 0; }
.footer-sign span { font-style: italic; font-size: 18px; }
@media (max-width: 767px) { .about-body .signature { margin-left: auto; margin-right: auto; width: 180px; } }

/* 3. Product shots float and lean toward the mouse */
.case-art.product { animation: bob 4.5s ease-in-out infinite; }
.case-card:nth-child(2) .case-art.product { animation-delay: -1.2s; } .case-card:nth-child(3) .case-art.product { animation-delay: -2.4s; } .case-card:nth-child(4) .case-art.product { animation-delay: -3.3s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.case-art.product img { transform: perspective(500px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)); transition: transform .25s ease-out; }
.case-card:hover .case-art.product img { transform: perspective(500px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)) scale(1.08); }

/* 4. Stars fill one by one, quote mark draws behind */
.review-card { position: relative; }
.review-card .stars i { font-style: normal; display: inline-block; color: transparent; -webkit-text-stroke: 1px #C9A227; transition: color .3s ease, transform .4s cubic-bezier(.3,1.8,.5,1); transform: scale(.6); }
.review-card.starred .stars i { color: #C9A227; transform: none; }
.review-card.starred .stars i:nth-child(2) { transition-delay: .15s; } .review-card.starred .stars i:nth-child(3) { transition-delay: .3s; } .review-card.starred .stars i:nth-child(4) { transition-delay: .45s; } .review-card.starred .stars i:nth-child(5) { transition-delay: .6s; }
.quote-mark { position: absolute; top: 18px; right: 22px; width: 74px; height: auto; pointer-events: none; }
.quote-mark path { fill: transparent; stroke: var(--navy); stroke-width: 1.4; stroke-dasharray: 260; stroke-dashoffset: 260; opacity: .35; }
.review-card.starred .quote-mark path { animation: sign 1.6s ease .5s forwards, quote-fill .6s ease 1.9s forwards; }
@keyframes quote-fill { to { fill: var(--green); opacity: .7; } }

/* 5. Laurels shimmer once the count lands */
.laurel { position: relative; }
.laurel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,240,180,.95) 50%, transparent 65%) no-repeat -150% 0 / 200% 100%;
  -webkit-mask: url(laurel.svg) center / contain no-repeat; mask: url(laurel.svg) center / contain no-repeat; }
.laurel.shine::after { animation: shimmer 1.3s ease forwards; }
@keyframes shimmer { 0% { opacity: 1; background-position: -150% 0; } 100% { opacity: 1; background-position: 250% 0; } }
.laurel.shine b { animation: glint 1.3s ease; }
@keyframes glint { 50% { color: #d9ad3c; text-shadow: 0 0 12px rgba(243,214,122,.8); } }

/* 6. FAQ answers type out */
.faq details p.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--navy); animation: blink .8s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim .hero::before, .anim .hero::after { -webkit-mask: none; mask: none; animation: none; }
  .petals, .quote-mark path { display: none; }
  .signature text { stroke-dashoffset: 0; fill: var(--navy); animation: none !important; }
  .case-art.product { animation: none; }
  .review-card .stars i { color: #C9A227; transform: none; }
}

/* Case studies: illustrated product icons */
.case-art.illo { width: auto; height: 96px; opacity: 1; display: flex; align-items: flex-end; animation: bob 4.5s ease-in-out infinite; }
.case-card:nth-child(2) .case-art.illo { animation-delay: -1.2s; } .case-card:nth-child(3) .case-art.illo { animation-delay: -2.4s; } .case-card:nth-child(4) .case-art.illo { animation-delay: -3.3s; }
.case-art.illo .ill { height: 100%; width: auto; overflow: visible; filter: drop-shadow(0 6px 0 rgba(20,27,65,.10)); }
.ill g, .ill .st, .ill .spark { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.case-card:hover .ill-a { transform: rotate(-6deg) translateY(-4px); }
.case-card:hover .ill-b { transform: rotate(5deg) translateY(-6px); transition-delay: .06s; }
.case-card:hover .ill-c { transform: rotate(-4deg) translateY(-3px); transition-delay: .12s; }
.case-card:hover .ill .st { transform: scale(1.25) rotate(-8deg); }
.ill .spark { transform-origin: 50% 50%; animation: twinkle 2.4s ease-in-out infinite; } .ill .s2 { animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
.case-art.illo .ill { transform: perspective(500px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .25s ease-out; }
@media (max-width: 767px) { .case-art.illo { height: 76px; } }

/* Business icons v3: envelope opens at the front, laptop opens and lights up */
.ico-mail .flap-shut { transform-box: view-box; transform-origin: 50% 37.5%; transition: transform .35s ease-in; }
.ico-mail .flap-open { transform-box: view-box; transform-origin: 50% 37.5%; transform: scaleY(0); transition: transform .35s ease-out; }
.ico-mail .letter { transform: none; transition: transform .55s cubic-bezier(.2,.8,.2,1.3); }
.ico-mail .seal { transition: opacity .2s ease; }
.stat:is(:hover, .play, .seen) .ico-mail .seal { opacity: 0; }
.stat:is(:hover, .play, .seen) .ico-mail .flap-shut { transform: scaleY(0); }
.stat:is(:hover, .play, .seen) .ico-mail .flap-open { transform: scaleY(1); transition-delay: .3s; }
.stat:is(:hover, .play, .seen) .ico-mail .letter { transform: translateY(-14px); transition-delay: .6s; }
.ico-laptop .lid { transform-box: view-box; transform-origin: 50% 71.9%; transform: scaleY(.08); transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.ico-laptop .screen { opacity: 0; transition: opacity .5s ease .6s, filter .5s ease .6s; }
.ico-laptop .type path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .45s ease; }
.ico-laptop .t1 { transition-delay: .9s !important; } .ico-laptop .t2 { transition-delay: 1.2s !important; } .ico-laptop .t3 { transition-delay: 1.5s !important; }
.stat:is(:hover, .play, .seen) .ico-laptop .lid { transform: scaleY(1); }
.stat:is(:hover, .play, .seen) .ico-laptop .screen { opacity: 1; filter: drop-shadow(0 0 6px rgba(251,244,215,.9)); }
.stat:is(:hover, .play, .seen) .ico-laptop .type path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .ico-laptop .lid { transform: none; } .ico-laptop .screen { opacity: 1; } .ico-mail .flap-open { transform: none; } .ico-mail .flap-shut { display: none; } }
.ico-laptop .lid { transform-origin: 50% 73.4%; }
.stat:is(:hover, .play, .seen) .ico-laptop .screen { filter: none; }

/* Signature v2: full name written left to right, then a flourish */
.signature { width: 300px; margin-top: 10px; }
.signature text { font-size: 140px; fill: var(--navy); stroke: none; stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
.signature .sig-pen { transform: translateX(0); }
.signature.write .sig-pen { animation: pen 3.4s cubic-bezier(.4,0,.6,1) .2s forwards; }
@keyframes pen { 0% { transform: translateX(0); } 9% { transform: translateX(70px); } 36% { transform: translateX(262px); } 46% { transform: translateX(282px); } 54% { transform: translateX(330px); } 92% { transform: translateX(482px); } 100% { transform: translateX(500px); } }
.sig-flourish { fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.signature.write .sig-flourish { animation: flourish 1.1s cubic-bezier(.3,0,.2,1) 3.4s forwards; }
@keyframes flourish { to { stroke-dashoffset: 0; } }
@media (max-width: 767px) { .about-body .signature { width: 240px; } }
@media (prefers-reduced-motion: reduce) { .signature .sig-pen { transform: translateX(560px); } .sig-flourish { stroke-dashoffset: 0; } }
.signature.write .sig-flourish { animation: flourish 1.1s cubic-bezier(.3,0,.2,1) 3.4s forwards, show 0s linear 3.4s forwards; }
@keyframes show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sig-flourish { opacity: 1; } }
.quill-pen.follow { transition: opacity .3s ease, translate .12s linear; cursor: none; }
.envelope:hover { cursor: default; }

/* Signature v3: single-line script drawn stroke by stroke, like a pen */
.signature { width: 320px; }
.sig-ink path { fill: none; stroke: var(--navy); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; }
.signature.write .sig-ink path { animation: sig-draw var(--d) linear var(--t) forwards; }
.signature.write .sig-ink .sig-flourish { animation: sig-draw var(--d) cubic-bezier(.3,0,.2,1) var(--t) forwards; stroke-width: 2.4; }
@keyframes sig-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sig-ink path { visibility: hidden; } .signature.write .sig-ink path { visibility: visible; }
@media (max-width: 767px) { .about-body .signature { width: 250px; } }
@media (prefers-reduced-motion: reduce) { .sig-ink path { stroke-dashoffset: 0; visibility: visible; animation: none !important; } }
.ico-laptop .lid { transform-origin: 50% 71.9%; }
.signature.write .sig-ink path { visibility: hidden; animation: sig-draw var(--d) linear var(--t) forwards, sig-show 0s linear var(--t) forwards; }
.signature.write .sig-ink .sig-flourish { animation: sig-draw var(--d) cubic-bezier(.3,0,.2,1) var(--t) forwards, sig-show 0s linear var(--t) forwards; }
@keyframes sig-show { to { visibility: visible; } }
.sig-ink path { stroke-width: 4.4; } .sig-ink .sig-flourish { stroke-width: 3; }
.sig-ink .sig-flourish, .signature.write .sig-ink .sig-flourish { stroke-width: 4.4; }
/* Laptop v4: plain outline like a classic laptop icon; screen fills with light when it opens */
.ico-laptop .lid { transform-origin: 50% 70.3%; }
.ico-laptop .screen { opacity: 1; fill: transparent; transition: fill .5s ease .6s; filter: none !important; }
.stat:is(:hover, .play, .seen) .ico-laptop .screen { fill: #FBF4D7; }
/* Icons loop: close in reverse order (letter in, flap folds, flap shuts) */
.ico-mail .flap-open { transition-delay: .45s; }
.ico-mail .flap-shut { transition-delay: .75s; }
.stat:is(:hover, .play, .seen) .ico-mail .flap-shut { transition-delay: 0s; }

/* ===== Mobile pass (2026-10-08) ===== */
@media (max-width: 767px) {
  .section-title { text-align: center; text-wrap: balance; }
  .section-title br { display: none; }
  .marquee-label, .journey h3, .hero-sub { text-wrap: balance; }
  /* Business cards: tighter */
  .stats-grid { gap: 22px; }
  .stat { padding-top: 26px !important; padding-bottom: 22px !important; }
  .stat h3 { margin-bottom: 10px; }
  /* Results: two per row */
  .result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .result-card { padding: 16px 14px; }
  .result-card b { font-size: 30px; }
  .result-card span { font-size: 15px; line-height: 20px; }
  /* Letter: stamp and postmark sit neatly top right */
  .stamp-wrap { transform: scale(.72); margin-bottom: -34px; }
  /* Signature centred and fully on screen */
  .about-body .signature { width: min(250px, 70vw); }
}
@media (max-width: 767px) {
  /* Compact floating "Book a call" pill so it covers less of the page */
  .sticky-cta { left: auto; right: 16px; font-size: 17px; padding: 11px 18px; gap: 8px; }
  .sticky-cta svg { width: 18px; height: 18px; }
}
@media (max-width: 767px) { .journey-cols { gap: 0; row-gap: 0; } }
/* Signature signs off bottom right, like the end of a letter */
.about-body .signature { margin-left: auto !important; margin-right: 0 !important; }
@media (max-width: 767px) { .versus-table { min-width: 600px; font-size: 15px; line-height: 21px; } .versus-table th, .versus-table td { padding: 12px 12px; } .versus-table thead th { font-size: 17px; } }
@media (max-width: 767px) { .versus-table tbody th { width: 130px; } }

/* ===== Inline booking calendar (Cal.com) ===== */
.book-cal { max-width: 1000px; margin: 34px auto 0; text-align: center; }
.book-cal-label { font-size: 22px; line-height: 30px; font-style: italic; margin: 0 0 18px; }
.cal-card { background: var(--pink); border-radius: 18px; padding: 14px; box-shadow: 0 12px 0 -2px rgba(20,27,65,.12); }
.cal-inline { width: 100%; min-height: 520px; border-radius: 12px; overflow: hidden; background: var(--cream); }
.cal-loading { padding: 220px 0 0; font-style: italic; opacity: .7; }
.cal-fallback { font-size: 16px; margin: 14px 0 0; opacity: .8; }
.cal-fallback a { color: var(--navy); }
.book-or { display: block; margin-top: 26px; font-style: italic; font-size: 19px; opacity: .8; }
@media (max-width: 767px) { .book-cal-label { font-size: 19px; line-height: 26px; } .cal-card { padding: 8px; border-radius: 14px; } .cal-inline { min-height: 560px; } }
/* Calendar: same width as the letter, no empty space once it has loaded */
.book-cal { max-width: 900px; }
.cal-inline { position: relative; }
.cal-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.cal-inline:has(iframe) { min-height: 0; }
.cal-inline:has(iframe) .cal-loading { display: none; }
.book-or { font-size: 26px; line-height: 34px; margin-top: 34px; opacity: 1; background: none; }
@media (max-width: 767px) { .book-or { font-size: 22px; line-height: 30px; } }
/* "or send a message below" as a clear divider heading between calendar and letter */
.book-or { display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 38px; line-height: 46px; font-style: italic; font-weight: 500; color: var(--navy); margin: 64px auto 40px; max-width: 900px; }
.book-or::before, .book-or::after { content: ""; flex: 1 1 0; max-width: 200px; height: 2px; background: var(--green); border-radius: 2px; }
@media (max-width: 767px) { .book-or { font-size: 28px; line-height: 36px; gap: 14px; margin: 48px auto 28px; } .book-or::before, .book-or::after { max-width: 60px; } }