/* ---------- Home and About at the case studies' calm scale ---------- */
:root { --q-ink: rgba(19,21,22,.86); --q-soft: rgba(19,21,22,.62); --q-faint: rgba(19,21,22,.45); --q-frame: #F6F7F9; --section-gap: 96px; --content-gap: 32px; --label-gap: 20px; }
:root:not([data-theme="light"]) { --q-ink: rgba(234,227,214,.88); --q-soft: rgba(234,227,214,.62); --q-faint: rgba(234,227,214,.42); --q-frame: #171717; }
html[data-theme="light"] { --q-ink: rgba(19,21,22,.86); --q-soft: rgba(19,21,22,.62); --q-faint: rgba(19,21,22,.45); --q-frame: #F6F7F9; }
@media (max-width: 991px) { :root { --section-gap: 80px; } }
@media (max-width: 767px) { :root { --section-gap: 64px; --content-gap: 24px; } }

/* hero */
h1.hero-title { font-size: 40px !important; line-height: 1.18 !important; font-weight: 400 !important; color: var(--q-ink) !important; }
.hero-simple .padding-bottom._40px { padding-bottom: 20px !important; }
p.hero-intro, .about-page .about-intro { font-size: 15.5px !important; line-height: 1.66 !important; color: var(--q-ink) !important; opacity: 1 !important; }
.hero-simple .home_header-content { max-width: 720px !important; }
.home-section_header.hero-simple { padding-top: 40px !important; }
@media (max-width: 991px) { h1.hero-title { font-size: 34px !important; } }
@media (max-width: 767px) { h1.hero-title { font-size: 28px !important; line-height: 1.22 !important; } }

/* section labels and statements */
.section-label { font-size: 13px !important; color: var(--q-ink) !important; }
.section-statement { font-size: 18px !important; line-height: 1.5 !important; color: var(--q-soft) !important; }
@media (max-width: 767px) { .section-statement { font-size: 17px !important; } }

/* work cards: flat frames, smaller type */
.work-card, .res-card { background: var(--q-frame) !important; border: 0 !important; border-radius: 12px !important; padding: 12px 12px 20px !important; }
.wc-media, .rc-media { border-radius: 8px !important; }
.wc-body { padding: 0 8px !important; }
.wc-head { margin-top: 18px !important; }
.wc-title { font-size: 21px !important; line-height: 1.3 !important; font-weight: 400 !important; }
.wc-title a, .rc-title a { color: var(--q-ink) !important; }
.wc-sub { font-size: 14px !important; line-height: 1.6 !important; color: var(--q-soft) !important; margin-top: 8px !important; }
.wc-kpis { margin-top: 18px !important; padding-top: 16px !important; border-top-color: color-mix(in srgb, var(--q-ink) 10%, transparent) !important; }
.kpi dd { font-size: 20px !important; color: var(--q-ink) !important; }
.kpi dt { font-size: 12px !important; color: var(--q-faint) !important; }
.kpi-arrow { width: 13px !important; height: 13px !important; }
.wc-ctas { padding-top: 20px !important; gap: 10px 18px !important; }
.wc-btn { height: 36px !important; padding: 0 16px !important; font-size: 13.5px !important; }
.wc-link { font-size: 13.5px !important; }
.wc-btn svg, .wc-link svg { width: 12px !important; height: 12px !important; }

/* resources */
.rc-kind { font-size: 12px !important; color: var(--q-faint) !important; margin: 14px 6px 0 !important; }
.rc-title { font-size: 16px !important; margin-top: 6px !important; }
.rc-stat { font-size: 12.5px !important; color: var(--q-faint) !important; }
.rc-stat b { font-size: 16px !important; color: var(--q-ink) !important; }

/* kind words: three quiet cards, like the case studies */
.kw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kw-card { margin: 0; padding: 20px 22px; border-radius: 12px; background: var(--q-frame); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.kw-card blockquote { margin: 0; padding: 0; border: 0; font: 400 14px/1.6 var(--sans); color: var(--q-soft); }
.kw-card figcaption b { display: block; font: 500 13.5px/1.4 var(--sans); color: var(--q-ink); }
.kw-card figcaption span { font: 400 12.5px/1.4 var(--sans); color: var(--q-faint); }
@media (max-width: 991px) { .kw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .kw-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.reviews-section .tabs-links { padding: 8px 14px !important; font-size: 13px !important; }

/* motto */
.motto-quote p { font-size: 32px !important; font-weight: 400 !important; color: var(--q-ink) !important; }
.motto-quote footer { font-size: 13px !important; color: var(--q-faint) !important; }
@media (max-width: 767px) { .motto-quote p { font-size: 26px !important; } }

/* footer */
.foot-ask { font-size: 30px !important; line-height: 1.25 !important; }
.foot-ask span { color: var(--q-soft) !important; }
.foot-ask strong { color: var(--q-ink) !important; margin-top: 10px !important; }
.foot-actions { margin-top: 32px !important; }
.foot-btn { height: 44px !important; padding: 0 22px !important; font-size: 15px !important; }
.foot-link { font-size: 15px !important; }
.foot-note p { font-size: 17px !important; margin-top: 46px !important; }
.foot-links { margin-top: 64px !important; }
.foot-links a { font-size: 13.5px !important; }
@media (max-width: 767px) { .foot-ask { font-size: 24px !important; } }

/* about page sections */
.about-page .heading-style-2.section-statement { font-size: 18px !important; }
.about-page .p-28.font-weight-600 { font-size: 19px !important; }
.about-page .border-div { background: var(--q-frame) !important; border: 0 !important; border-radius: 12px !important; }
.kw-card, .kw-card * { text-align: left !important; }

/* ================= About hero ================= */
.ab-hero { padding: 40px 0 0 !important; }
.ab-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.ab-copy { max-width: 620px; }
.ab-lead { margin: 20px 0 0; font: 400 17px/1.65 var(--sans); color: var(--q-ink); text-wrap: pretty; }
.ab-portrait { margin: 0; width: 240px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #000; }
.ab-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 48px 0 0; }
.ab-facts > div { padding: 16px 18px; border-radius: 12px; background: var(--q-frame); }
.ab-facts dt { margin: 0 0 6px; font: 500 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--q-faint); }
.ab-facts dd { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--q-ink); text-wrap: pretty; }
.ab-bio { max-width: 720px; margin-top: 40px; display: grid; gap: 14px; }
.ab-bio p.about-intro { margin: 0 !important; max-width: none; }
@media (max-width: 991px) {
  .ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-portrait { width: 200px; }
}
@media (max-width: 767px) {
  .ab-hero { padding-top: 24px !important; }
  .ab-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-portrait { width: 144px; order: -1; }
  .ab-lead { font-size: 16px; }
  .ab-facts { margin-top: 32px; }
  .ab-bio { margin-top: 32px; }
}
@media (max-width: 420px) { .ab-facts { grid-template-columns: minmax(0, 1fr); } }

/* client logos: dark grey on the light theme */
html[data-theme="light"] .logo-img { filter: brightness(0); opacity: .55; }
.about_section_header.ab-hero { margin-bottom: 0 !important; }
.about_section_header.ab-hero { padding-top: 0 !important; }
.ab-top { align-items: start; }
/* the title starts at the same height as the Home hero title */
.about_section_header.ab-hero { margin-top: 136px !important; }
@media (max-width: 767px) { .about_section_header.ab-hero { margin-top: 144px !important; } }

/* About bio: coloured keywords instead of fact cards */
:root { --ab-green-fg: #1D7A4A; --ab-green-bg: #E2F3E9; --ab-brand-fg: #C2410C; --ab-brand-bg: #FDEBE3; --ab-blue-fg: #2456A6; --ab-blue-bg: #E5EDFA; --ab-amber-fg: #8A5A00; --ab-amber-bg: #FBF0D6; }
:root:not([data-theme="light"]) { --ab-green-fg: #72D39C; --ab-green-bg: rgba(114,211,156,.13); --ab-brand-fg: #F4875F; --ab-brand-bg: rgba(235,89,57,.16); --ab-blue-fg: #8DB5F7; --ab-blue-bg: rgba(141,181,247,.13); --ab-amber-fg: #F0C46C; --ab-amber-bg: rgba(240,196,108,.13); }
html[data-theme="light"] { --ab-green-fg: #1D7A4A; --ab-green-bg: #E2F3E9; --ab-brand-fg: #C2410C; --ab-brand-bg: #FDEBE3; --ab-blue-fg: #2456A6; --ab-blue-bg: #E5EDFA; --ab-amber-fg: #8A5A00; --ab-amber-bg: #FBF0D6; }
.ab-bio mark { font-weight: 500; border-radius: 4px; padding: 1px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ab-bio mark.hl-green { color: var(--ab-green-fg); background: var(--ab-green-bg); }
.ab-bio mark.hl-brand { color: var(--ab-brand-fg); background: var(--ab-brand-bg); }
.ab-bio mark.hl-blue  { color: var(--ab-blue-fg);  background: var(--ab-blue-bg); }
.ab-bio mark.hl-amber { color: var(--ab-amber-fg); background: var(--ab-amber-bg); }
.ab-bio { margin-top: 40px; }
@media (max-width: 767px) { .ab-bio { margin-top: 28px; } }

/* About: one section gap between every block, no stacked Webflow paddings */
.about-page .about-section-marqee { padding: 0 !important; margin-top: var(--section-gap) !important; }
.about-page .about-section-marqee .logo-container { padding-top: 30px !important; padding-bottom: 0 !important; }
.about-page .about-section-marqee { margin-top: calc(var(--section-gap) - 10px) !important; }
.about-page .about_section_reading { margin-top: var(--section-gap) !important; }
.about-page .about_section_reading .mg-bottom-108, .about-page .about_section_reading .bottom-16 { margin-bottom: 0 !important; }
.about-page ~ .mt-99 { margin-top: 0 !important; }
.about-page ~ .mt-99 .reviews-section { padding-top: var(--section-gap) !important; }
/* the footer sits one section gap below the content, on every page */
.mt-104:has(> .site-foot) { margin-top: 0 !important; }
.site-foot { padding-top: var(--section-gap) !important; }
.about-page .about_section_reading { padding-top: 0 !important; }
/* logo rail: one section gap below the cards */
.about-page .ab-logos { margin-top: var(--section-gap) !important; }
.about-page .ab-logos { margin-top: calc(var(--section-gap) - 30px) !important; margin-bottom: 0 !important; }
.about-page ~ .mt-99 .reviews-section { padding-top: calc(var(--section-gap) - 30px) !important; }
.ab-lead .hero-em { font-weight: 500; }
/* bio sits under the opening line, beside the portrait */
.ab-copy { max-width: 720px; }
.ab-copy .ab-bio { margin-top: 24px; }
@media (max-width: 767px) { .ab-copy .ab-bio { margin-top: 20px; } }
/* Home intro: the same coloured keywords as the About bio */
.hero-intro mark { font-weight: 500; border-radius: 4px; padding: 1px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-intro mark.hl-green { color: var(--ab-green-fg); background: var(--ab-green-bg); }
.hero-intro mark.hl-brand { color: var(--ab-brand-fg); background: var(--ab-brand-bg); }
.hero-intro mark.hl-blue  { color: var(--ab-blue-fg);  background: var(--ab-blue-bg); }
.hero-intro mark { white-space: nowrap; }
/* Selected work statement: one highlighted phrase */
.section-statement mark { border-radius: 4px; padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section-statement mark.hl-brand { color: var(--ab-brand-fg); background: var(--ab-brand-bg); }
.section-statement mark.hl-green { color: var(--ab-green-fg); background: var(--ab-green-bg); }
/* logo band: the same lined band as "Things I love to do", with the logos scrolling inside */
.about-page .ab-logo-band { margin-top: calc(var(--section-gap) - 10px) !important; }
.about-page .ab-logo-band .logo-section-w { padding: 0 !important; }
.about-page .ab-logo-band .marqee-contetn-2 { padding-top: 44px !important; padding-bottom: 44px !important; }
.about-page .ab-logo-band .logo-img { max-height: 40px; width: auto; }
.about-page ~ .mt-99 .reviews-section { padding-top: var(--section-gap) !important; }
/* both band labels sit centred on the top line, with a clean gap in the line */
.about-page .about-section-marqee .heart-icon-animated { inset: 0 0 auto !important; transform: translateY(-50%); }
.about-page .about-section-marqee .white-bg-2 { padding: 4px 32px !important; }
.about-page .about-section-marqee .text-block-15 { line-height: 24px !important; }
.about-page .about-section-marqee, .about-page .ab-logo-band { margin-top: calc(var(--section-gap) - 19px) !important; }

/* ===== About: teaching & mentoring cards, on the same rhythm as the Home cards ===== */
.about-page .div-block-66 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--grid-gap) !important; align-items: stretch; }
.about-page .div-block-66 > * { min-width: 0; height: 100%; }
.about-page .div-block-66 > div > .border-div, .about-page .div-block-66 > .border-div { height: 100% !important; }
.about-page .div-block-66 .border-div { padding: 24px !important; }
.about-page .div-block-66 .border-div > div:not(.card-stretch-wrapper) { height: 100%; }
.about-page .div-block-66 .card-stretch-wrapper { height: 100%; display: flex !important; flex-direction: column; justify-content: space-between; gap: 0; }
.about-page .div-block-66 .mg-bottom-24px { margin-bottom: 16px !important; }
.about-page .div-block-66 .button-style-1 { padding: 6px 12px !important; }
.about-page .div-block-66 :is(.text-block-21, .text-block-22) { font-size: 12.5px !important; line-height: 1.3 !important; }
.about-page .div-block-66 .p-28.font-weight-600 { line-height: 1.35 !important; }
.about-page .div-block-66 .mt-36 { margin-top: 10px !important; }
.about-page .div-block-66 .mt-36 + .mt-36 { margin-top: 24px !important; }
.about-page .div-block-66 .mt-36 p { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--q-soft) !important; }
.about-page .div-block-66 .img-bg { margin-bottom: 0 !important; height: auto !important; aspect-ratio: 16 / 7; border-radius: 8px; background-size: cover !important; background-position: center !important; }
.about-page .div-block-66 .div-block-11 { margin-top: 20px !important; padding-top: 16px !important; justify-content: flex-start !important; }
.about-page .div-block-66 .small-btn { padding: 4px 0 !important; }
@media (max-width: 767px) {
  .about-page .div-block-66 { grid-template-columns: minmax(0, 1fr) !important; }
  .about-page .div-block-66 .border-div { padding: 20px !important; }
}
/* bands: a little less padding inside the lines */
.about-page .about-section-marqee .marqee-contetn-2 { padding-top: 40px !important; padding-bottom: 40px !important; }
.about-page .div-block-66 .img-bg { aspect-ratio: 2 / 1; }
@media (max-width: 767px) { .about-page .div-block-66 .card-stretch-wrapper { justify-content: flex-start; } .about-page .div-block-66 > *, .about-page .div-block-66 .border-div, .about-page .div-block-66 .border-div > div:not(.card-stretch-wrapper), .about-page .div-block-66 .card-stretch-wrapper { height: auto !important; } }
/* a bigger portrait on the right */
.ab-portrait { width: 380px; }
@media (max-width: 1199px) { .ab-portrait { width: 320px; } }
@media (max-width: 991px) { .ab-portrait { width: 240px; } }
@media (max-width: 767px) { .ab-portrait { width: 200px; } }

/* ===== Kind words: a segmented control like the nav pill, without the shadow ===== */
.reviews-section .tabs-menu-2 { position: relative; display: inline-flex !important; gap: 4px !important; padding: 4px !important; border-radius: 999px; background: var(--nav-pill-bg); border: 1px solid var(--nav-pill-border); box-shadow: none; }
.reviews-section .tabs-menu-2 .tabs-links { position: relative; z-index: 1; background: transparent !important; border: 0 !important; color: var(--nav-link) !important; transition: color .25s ease; }
.reviews-section .tabs-menu-2 .tabs-links * { color: inherit !important; }
.reviews-section .tabs-menu-2 .tabs-links:hover { color: var(--nav-link-hover) !important; }
.reviews-section .tabs-menu-2 .tabs-links.w--current { color: var(--nav-active-fg) !important; }
/* without the script, the current tab is simply filled */
.reviews-section .tabs-menu-2:not(.has-indicator) .tabs-links.w--current { background: var(--nav-active-bg) !important; }
.kw-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--nav-active-bg); pointer-events: none;
  transition: transform .87s linear(0, .0201 2.5%, .0716 5%, .1436 7.5%, .2274 10%, .3164 12.5%, .4058 15%, .4921 17.5%, .5728 20%, .6465 22.5%, .7125 25%, .7704 27.5%, .8203 30%, .8627 32.5%, .8982 35%, .9273 37.5%, .9508 40%, .9694 42.5%, .9838 45%, .9947 47.5%, 1.0026 50%, 1.0082 52.5%, 1.0118 55%, 1.014 57.5%, 1.015 60%, 1.0151 62.5%, 1.0147 65%, 1.0138 67.5%, 1.0126 70%, 1.0113 72.5%, 1.0099 75%, 1.0086 77.5%, 1.0073 80%, 1.0061 82.5%, 1.005 85%, 1.0041 87.5%, 1.0032 90%, 1.0025 92.5%, 1.0019 95%, 1.0014 97.5%, 1.001),
              width .87s linear(0, .0201 2.5%, .0716 5%, .1436 7.5%, .2274 10%, .3164 12.5%, .4058 15%, .4921 17.5%, .5728 20%, .6465 22.5%, .7125 25%, .7704 27.5%, .8203 30%, .8627 32.5%, .8982 35%, .9273 37.5%, .9508 40%, .9694 42.5%, .9838 45%, .9947 47.5%, 1.0026 50%, 1.0082 52.5%, 1.0118 55%, 1.014 57.5%, 1.015 60%, 1.0151 62.5%, 1.0147 65%, 1.0138 67.5%, 1.0126 70%, 1.0113 72.5%, 1.0099 75%, 1.0086 77.5%, 1.0073 80%, 1.0061 82.5%, 1.005 85%, 1.0041 87.5%, 1.0032 90%, 1.0025 92.5%, 1.0019 95%, 1.0014 97.5%, 1.001); }
@media (prefers-reduced-motion: reduce) { .kw-indicator { transition: none; } }
/* the portrait is a small looping video (was a 2.7MB GIF) */
.ab-portrait video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* lighter card images (JPEG instead of PNG) */
.about-page .img-bg.shipwright-ds { background-image: url("../images/card-shipwright.jpg") !important; }
.about-page .img-bg.adp-mentor { background-image: url("../images/card-adplist.jpg") !important; }