/* ==========================================================================
   Sudeshna Thapa — site design (child theme)
   An editorial design in Sudeshna's own brand: cream paper, burnt-orange
   serif display type, warm brown text, thin gold rules that echo the ring in
   her logo. Loaded after every parent and plugin stylesheet. Rules that must
   beat a parent rule regardless of load order are scoped with body.st.

   Contrast (WCAG 2.2, measured): body #4A4038 on #FAF9F5 9.6:1. Headings
   #BE6513 are display sizes only (3.9:1, AA large). Small orange text and
   white-on-orange buttons use #A85A11 (5.1:1). Gold #C0A058 is decoration only.
   ========================================================================== */

/* ---------- 1. Tokens (remaps the parent's names onto the brand) ---------- */
:root{
  --st-cream:#FAF9F5;--st-paper:#FFFFFF;--st-surface:#F4EEE2;--st-band:#F0E5C5;--st-sand:#E4D8BE;
  --st-line:#E5D9C2;--st-line-soft:#EFE7D6;
  --st-orange:#BE6513;--st-orange-ink:#A85A11;--st-orange-deep:#8C4A0D;
  --st-brown:#4A4038;--st-brown-strong:#2E2820;--st-brown-soft:#834F16;--st-muted:#6F665E;
  --st-gold:#C0A058;--st-gold-soft:rgba(192,160,88,.45);
  --st-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --st-sans:Rubik,-apple-system,"Segoe UI",Roboto,sans-serif;
  --st-shadow:0 1px 2px rgba(46,40,32,.05),0 14px 32px -20px rgba(46,40,32,.28);
  --st-radius:12px;--st-radius-sm:6px;

  /* parent tokens */
  --navy-deep:var(--st-band);--navy:var(--st-band);--card:var(--st-paper);
  --teal:var(--st-orange-ink);--teal-2:var(--st-gold);--teal-ink:var(--st-orange-ink);--teal-deep:var(--st-orange-deep);--teal-text:var(--st-orange-ink);
  --ink:var(--st-brown-strong);--body:var(--st-brown);--muted:var(--st-muted);--surface:var(--st-surface);--white:#fff;
  --line:var(--st-line);--line-dark:rgba(74,64,56,.14);--t-white:var(--st-brown-strong);--t-dim:var(--st-muted);
  --grad:linear-gradient(135deg,var(--st-orange) 0%,var(--st-gold) 100%);
  --f-head:var(--st-sans);--f-body:var(--st-sans);--f-accent:var(--st-serif);
  --r-sm:var(--st-radius-sm);--r-md:var(--st-radius);
  --sh-card:var(--st-shadow);--sh-hover:0 18px 40px -22px rgba(46,40,32,.35);
  --container:1180px;--narrow:720px;
  --krj-color-accent:var(--st-orange-ink);--krj-color-accent-text:var(--st-orange-ink);--krj-color-ink:var(--st-brown-strong);
  --krj-color-muted:var(--st-muted);--krj-color-line:#D6C8AC;--krj-color-surface:#fff;--krj-accent:var(--st-orange-ink);
}

/* ---------- 2. Base ---------- */
body.st{background:var(--st-cream);color:var(--st-brown);font-family:var(--st-sans);font-weight:400;font-size:1.0625rem;line-height:1.7}
body.st ::selection{background:var(--st-orange-ink);color:#fff}
body.st a{color:var(--st-orange-ink)}
body.st a:hover{color:var(--st-brown-strong)}
body.st :focus-visible{outline:3px solid var(--st-orange-ink);outline-offset:3px;border-radius:4px}
body.st h1,body.st h2{font-family:var(--st-serif);font-weight:700;color:var(--st-orange);letter-spacing:-.005em;line-height:1.15}
body.st h3,body.st h4{font-family:var(--st-sans);font-weight:600;color:var(--st-brown-strong);letter-spacing:0;line-height:1.3}
body.st .skip-link:focus{background:var(--st-brown-strong);color:#fff}
body.st .eyebrow,body.st .eyebrow--light{display:flex;align-items:center;gap:12px;font-family:var(--st-sans);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--st-brown-soft)}
body.st .eyebrow::before{content:"";flex:none;width:28px;height:1px;background:var(--st-gold)}
body.st .section__head--center .eyebrow{justify-content:center}
body.st .section__title{font-size:clamp(1.75rem,1.25rem + 1.9vw,2.6rem);max-width:22ch}
body.st .section__head--center .section__title{margin-left:auto;margin-right:auto}
body.st .section__lede{color:var(--st-brown);font-size:1.08rem;max-width:60ch;margin-top:14px}
body.st em.hl,body.st .hl{font-family:var(--st-serif);font-style:italic;font-weight:600;color:var(--st-brown-soft);background:none;-webkit-text-fill-color:currentColor}
body.st hr,body.st .wp-block-separator{border:0;height:1px;background:var(--st-line)}

/* Decoration from the parent that has no place here. */
body.st .hero::before,body.st .hero::after,body.st .hero__aurora,body.st .hero__viz-glow,body.st .krj-cta::before{display:none!important}
body.st .marquee,body.st .marquee__track{animation:none!important}

/* ---------- 3. Layout ---------- */
body.st .section{padding:clamp(56px,7vw,104px) 0}
body.st .section--surface{background:var(--st-paper)}
body.st .section--dark{background:var(--st-band);color:var(--st-brown)}
body.st .section--dark h2,body.st .section--dark .section__title{color:var(--st-orange)}
body.st .layout{gap:clamp(36px,5vw,72px)}
body.st .layout--sidebar{grid-template-columns:minmax(0,1fr) 300px}

/* ---------- 4. Buttons ---------- */
body.st .btn,body.st .krj-btn,body.st .wp-block-button__link,body.st .wp-element-button{font-family:var(--st-sans);font-weight:500;font-size:.95rem;letter-spacing:.01em;line-height:1.2;padding:14px 24px;border-radius:var(--st-radius-sm);border:1.5px solid transparent;box-shadow:none;transform:none;min-height:48px;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
body.st .btn--primary,body.st .krj-btn--primary,body.st .wp-block-button__link,body.st .wp-element-button,body.st .krj-cta .krj-btn--primary,body.st .krj-cta--light .krj-btn--primary{background:var(--st-orange-ink);border-color:var(--st-orange-ink);color:#fff;box-shadow:none}
body.st .btn--primary:hover,body.st .krj-btn--primary:hover,body.st .wp-block-button__link:hover,body.st .krj-cta .krj-btn--primary:hover,body.st .cform .krj-btn--primary:hover{background:var(--st-orange-deep);border-color:var(--st-orange-deep);color:#fff;transform:none}
body.st .btn--secondary,body.st .btn--ghost,body.st .krj-btn--secondary,body.st .section:not(.section--dark) .btn--ghost,body.st .hero .btn--secondary,body.st .hero .btn--ghost,body.st .krj-cta .krj-btn--secondary,body.st .krj-cta .btn--ghost,body.st .is-style-secondary .wp-block-button__link,body.st .is-style-outline .wp-block-button__link{background:transparent;color:#4A3A26;border-color:rgba(74,58,38,.45)}
body.st .btn--secondary:hover,body.st .btn--ghost:hover,body.st .krj-btn--secondary:hover,body.st .section:not(.section--dark) .btn--ghost:hover,body.st .hero .btn--ghost:hover,body.st .krj-cta .krj-btn--secondary:hover{background:transparent;color:var(--st-brown-strong);border-color:var(--st-brown-strong)}
body.st .btn--sm{padding:10px 16px;min-height:42px;font-size:.88rem}
body.st .krj-btn--whatsapp{background:transparent;color:#4A3A26;border-color:rgba(74,58,38,.45)}
body.st .krj-btn--whatsapp .krj-icon{color:#1A8A4A}

/* ---------- 5. Header ---------- */
body.st .site-header{background:rgba(250,249,245,.94);color:var(--st-brown-strong);border-bottom:1px solid transparent;backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);transition:box-shadow .2s ease,border-color .2s ease}
body.st .site-header.is-scrolled{box-shadow:0 1px 14px rgba(36,26,15,.09);border-bottom-color:var(--st-line-soft)}
body.st .site-header__in{min-height:84px}
body.st .logo__img{max-height:60px;width:auto}
body.st .logo__name{font-family:var(--st-serif);color:var(--st-brown-strong);font-size:1.3rem}
body.st .logo__tag{color:var(--st-brown-soft);letter-spacing:.14em}
body.st .nav__link{color:var(--st-brown-strong);font-weight:400;font-size:.97rem;padding:10px 14px;border-radius:0;background:none}
body.st .nav__link:hover,body.st .nav__item.is-open>.nav__link,body.st .nav__item.is-current>.nav__link{color:var(--st-orange-ink);background:none}
body.st .nav__item.is-current>.nav__link::after{left:14px;right:14px;bottom:4px;height:1px;background:var(--st-gold)}
body.st .nav__item--cta .nav__link,body.st .nav__cta{background:var(--st-orange-ink);color:#fff;border-radius:var(--st-radius-sm);padding:11px 18px;margin-left:8px}
body.st .nav__item--cta .nav__link:hover,body.st .nav__cta:hover{background:var(--st-orange-deep);color:#fff}
body.st .nav-toggle{border-color:var(--st-line);background:var(--st-paper)}
body.st .nav-toggle__bar{background:var(--st-brown-strong)}
/* Dropdowns: a plain light panel with lists, not a dark mega menu. */
body.st .mega__panel,body.st .mega>div{background:var(--st-paper);color:var(--st-brown);border:1px solid var(--st-line);border-radius:var(--st-radius);box-shadow:0 24px 48px -28px rgba(46,40,32,.35)}
body.st .mega a{color:var(--st-brown-strong)}
body.st .mega a:hover{color:var(--st-orange-deep);background:var(--st-surface)}
body.st .mega h3,body.st .mega .mega__hd,body.st .mega [class*="__head"]{color:var(--st-brown-soft)}
body.st .mega .krj-icon{color:var(--st-gold)}
/* Mobile menu: a full-height cream sheet with large serif links. */
body.st .mnav__scrim{background:rgba(46,40,32,.35)}
body.st .mnav__panel{background:var(--st-cream);color:var(--st-brown-strong)}
body.st .mnav__panel a{color:var(--st-brown-strong)}
body.st .mnav-link{font-family:var(--st-serif);font-size:1.3rem;font-weight:600;color:var(--st-brown-strong)}
body.st .mnav-link:hover,body.st .mnav-link:focus-visible{color:var(--st-orange-ink);background:none}
body.st .mnav-item--cta .btn{font-family:var(--st-sans);font-size:1rem;font-weight:500}
body.st .mnav__close{color:var(--st-brown-strong);border-color:var(--st-line)}
body.st .mnav__phone{color:var(--st-brown-strong)}
body.st .mnav__contact{border-top:1px solid var(--st-line)}

/* ---------- 6. Page hero ---------- */
body.st .hero{background:var(--st-cream);color:var(--st-brown);padding:clamp(40px,6vw,84px) 0 clamp(44px,6vw,80px);border-bottom:1px solid var(--st-line);overflow:hidden;isolation:isolate}
/* The signature: a thin gold ring, as in her logo, sitting behind the hero. */
body.st .hero>.container{position:relative}
body.st .hero>.container::after{content:"";position:absolute;z-index:-1;right:-140px;top:-120px;width:min(520px,70vw);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--st-gold-soft);pointer-events:none}
body.st .hero__title{color:var(--st-orange);font-family:var(--st-serif);font-size:clamp(2.1rem,1.3rem + 3vw,3.5rem);line-height:1.08;max-width:18ch}
body.st .hero__title--xl{font-size:clamp(2.4rem,1.4rem + 3.6vw,4rem)}
body.st .hero .eyebrow{color:var(--st-brown-soft)}
body.st .hero__intro{color:var(--st-brown);font-size:clamp(1.08rem,1rem + .35vw,1.25rem);font-weight:300;line-height:1.6;max-width:58ch}
body.st .hero__intro a{color:var(--st-orange-ink)}
body.st .hero__proof li{color:var(--st-brown)}
body.st .hero__proof .krj-icon{color:var(--st-orange-ink)}
body.st .hero__portrait{border:0;box-shadow:none;border-radius:999px 999px var(--st-radius) var(--st-radius);max-width:400px}
body.st .crumbs ol{color:var(--st-muted);font-size:.82rem;letter-spacing:.02em}
body.st .crumbs a{color:var(--st-muted)}
body.st .crumbs a:hover{color:var(--st-orange-ink)}
body.st .crumbs [aria-current]{color:var(--st-brown-strong)}
body.st .stats{background:var(--st-line);border-color:var(--st-line)}
body.st .stats__item{background:var(--st-paper)}
body.st .stats__num{font-family:var(--st-serif);color:var(--st-orange)}
body.st .post-meta,body.st .post-meta a{color:var(--st-muted)}

/* ---------- 7. Reading content ---------- */
body.st .content{max-width:var(--narrow);color:var(--st-brown);font-size:1.0625rem;line-height:1.78}
body.st .content p,body.st .content li{color:var(--st-brown)}
body.st .content strong{color:var(--st-brown-strong);font-weight:600}
body.st .content h2{font-family:var(--st-serif);color:var(--st-orange);font-size:clamp(1.55rem,1.2rem + 1.2vw,2.05rem);border:0;padding:0;margin-top:2.4em;position:relative}
body.st .content h2::before{content:"";display:block;width:40px;height:1px;background:var(--st-gold);margin-bottom:18px}
body.st .content>h2:first-child{margin-top:0}
body.st .content h3{font-size:1.2rem;color:var(--st-brown-strong)}
body.st .content a{color:var(--st-orange-ink);text-decoration:underline;text-decoration-color:var(--st-gold);text-decoration-thickness:1px;text-underline-offset:3px}
body.st .content a:hover{color:var(--st-brown-strong);text-decoration-color:var(--st-brown-strong)}
body.st .content ul>li{padding-left:26px}
body.st .content ul>li::before{-webkit-mask:none;mask:none;width:6px;height:6px;border-radius:50%;background:var(--st-orange-ink);top:.95em;left:6px;opacity:1}
body.st .content ul>li:hover::before{transform:none;background:var(--st-orange-ink)}
body.st .content ul ul>li::before{width:5px;height:5px;background:var(--st-gold)}
body.st .content ol>li{padding-left:40px}
body.st .content ol>li::before{background:none;border-radius:0;font-family:var(--st-serif);font-style:italic;font-weight:600;font-size:1.05rem;color:var(--st-brown-soft);min-width:28px;justify-content:flex-start;top:.35em}
body.st .content table{background:var(--st-paper);border-color:var(--st-line);box-shadow:none;border-radius:var(--st-radius)}
body.st .content thead th{background:var(--st-band);color:var(--st-brown-strong);letter-spacing:.06em}
body.st .content th,body.st .content td,body.st .content .wp-block-table td,body.st .content .wp-block-table th{border-bottom-color:var(--st-line-soft)}
body.st .content tbody tr:nth-child(even){background:#FCFAF5}
body.st .content tbody tr:hover{background:#FBF6EC}
body.st .content blockquote,body.st .content .wp-block-quote{border-left:2px solid var(--st-gold);background:none;padding:4px 0 4px 26px;font-family:var(--st-serif);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--st-brown-strong)}
body.st .content img{border-radius:var(--st-radius)}
body.st .takeaway,body.st .updated-note{background:var(--st-band);border-left:2px solid var(--st-gold);border-radius:0 var(--st-radius) var(--st-radius) 0}
body.st .takeaway h2{color:var(--st-brown-soft);font-family:var(--st-sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
body.st .takeaway h2::before{display:none}
body.st .author-box{background:var(--st-paper);border-color:var(--st-line)}
body.st .used a{border-color:var(--st-line);color:var(--st-brown-strong)}
body.st .krj-review{background:#FFF1D6;color:#7A3E06}

/* ---------- 8. Sidebar ---------- */
body.st .side__box{background:var(--st-paper);border-color:var(--st-line);border-radius:var(--st-radius)}
body.st .side__hd{color:var(--st-brown-soft);border-bottom-color:var(--st-line-soft);font-weight:500}
body.st .side__nav a{color:var(--st-brown);border-radius:0;margin:0;padding:8px 0;border-bottom:1px solid var(--st-line-soft)}
body.st .side__nav li:last-child a{border-bottom:0}
body.st .side__nav a:hover{background:none;color:var(--st-orange-ink)}
body.st .side__parent a{color:var(--st-orange-ink)}
body.st .side__cta{background:var(--st-band);border-color:var(--st-band);color:var(--st-brown)}
body.st .side__cta-title{font-family:var(--st-serif);color:var(--st-orange);font-size:1.4rem}
body.st .side__cta p{color:var(--st-brown)}
body.st .side__contact li{color:var(--st-brown)}
body.st .side__contact .krj-icon{color:var(--st-orange-ink)}
body.st .convert{background:var(--st-paper);border-color:var(--st-line);border-radius:var(--st-radius);box-shadow:var(--st-shadow)}

/* ---------- 9. Index rows (replace icon card grids) ----------
   Child pages, related pages and hub listings read like a contents page:
   a numeral, the title and one line, divided by hairlines. */
body.st .grid--3,body.st .grid--index,body.st .grid--hubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,56px);counter-reset:st-row}
body.st .card{counter-increment:st-row;position:relative;display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;grid-template-areas:"num title arrow" "num text arrow";align-items:start;gap:4px 16px;padding:22px 0;background:none;border:0;border-top:1px solid var(--st-line);border-radius:0;box-shadow:none;color:var(--st-brown);transform:none}
body.st .card::before{content:counter(st-row,decimal-leading-zero);grid-area:num;font-family:var(--st-serif);font-style:italic;font-weight:600;font-size:1.25rem;line-height:1.4;color:var(--st-gold)}
body.st .card__ico{display:none}
body.st .card__title{grid-area:title;font-family:var(--st-sans);font-weight:500;font-size:1.12rem;color:var(--st-brown-strong);margin:0}
body.st .card__text{grid-area:text;font-size:.95rem;color:var(--st-muted);margin:0}
body.st .card__more{grid-area:arrow;align-self:center;color:var(--st-orange-ink);transition:transform .2s ease}
body.st .card--link:hover{transform:none;box-shadow:none;border-color:var(--st-line);background:none}
body.st .card--link:hover .card__title{color:var(--st-orange-ink)}
body.st .card--link:hover .card__more{transform:translateX(4px);color:var(--st-orange-ink)}
body.st .card--dense{padding:16px 0}
body.st .card--dense .card__text{font-size:.9rem}
body.st .section__count{font-family:var(--st-sans);font-size:.8rem;font-weight:500;color:var(--st-brown-soft);background:var(--st-band);border-radius:999px;padding:4px 10px;margin-left:12px;vertical-align:middle}
body.st .gfilter__in{background:var(--st-paper);border:1px solid var(--st-line);border-radius:var(--st-radius-sm);color:var(--st-brown-strong)}

/* Post and case-study cards keep a card form, warmed up. */
body.st .pcard,body.st .krj-case,body.st .krj-testimonial{background:var(--st-paper);border:1px solid var(--st-line);border-radius:var(--st-radius);box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}
body.st .pcard:hover{transform:none;border-color:var(--st-sand);box-shadow:var(--st-shadow)}
body.st .pcard__placeholder{background:var(--st-band);color:var(--st-gold)}
body.st .pcard__title,body.st .pcard__title a{font-family:var(--st-serif);color:var(--st-brown-strong);font-weight:700}
body.st .pcard__title a:hover{color:var(--st-orange-ink)}
body.st .pcard__meta{color:var(--st-muted)}

/* ---------- 10. FAQ: a ruled list, not boxes ---------- */
body.st .krj-faq__heading{font-family:var(--st-serif);color:var(--st-orange)}
body.st .krj-faq__list{gap:0;border-bottom:1px solid var(--st-line)}
body.st .krj-faq__item{border:0;border-top:1px solid var(--st-line);border-radius:0;background:none;box-shadow:none}
body.st .krj-faq__item[open]{border-color:var(--st-line);box-shadow:none}
body.st .krj-faq__q{padding:20px 0;font-family:var(--st-sans);font-weight:500;font-size:1.06rem;color:var(--st-brown-strong)}
body.st .krj-faq__q:hover{color:var(--st-orange-ink)}
body.st .krj-faq__icon{color:var(--st-orange-ink)}
body.st .krj-faq__a{padding:0 0 22px;color:var(--st-brown);max-width:68ch}

/* ---------- 11. Call-to-action band ---------- */
body.st .krj-cta,body.st .krj-cta--accent{background:var(--st-band);color:var(--st-brown);position:relative;overflow:hidden;isolation:isolate}
body.st .krj-cta--light{background:var(--st-paper)}
body.st .krj-cta::after{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(620px,92vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid var(--st-gold-soft);pointer-events:none}
body.st .krj-cta__heading{font-family:var(--st-serif);color:var(--st-orange);font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem)}
body.st .krj-cta__text{color:var(--st-brown);opacity:1}
body.st .stack a{background:var(--st-paper);border-color:var(--st-line);color:var(--st-brown-strong)}
body.st .stack a:hover{border-color:var(--st-orange-ink)}
body.st .stack .krj-icon{color:var(--st-orange-ink)}

/* ---------- 12. Forms ---------- */
body.st .krj-form{--krj-radius:6px}
body.st .krj-form input[type=text],body.st .krj-form input[type=email],body.st .krj-form input[type=tel],body.st .krj-form input[type=url],body.st .krj-form input[type=date],body.st .krj-form select,body.st .krj-form textarea{background:#fff;border-color:#D6C8AC;color:var(--st-brown-strong)}
body.st .krj-form input:focus-visible,body.st .krj-form select:focus-visible,body.st .krj-form textarea:focus-visible{border-color:var(--st-orange-ink);box-shadow:0 0 0 3px rgba(168,90,17,.2);outline:0}
body.st .krj-field__label{color:var(--st-brown-strong);font-weight:500}
body.st .krj-form__note{color:var(--st-muted)}
body.st .krj-form__heading{font-family:var(--st-serif);color:var(--st-orange)}
body.st .krj-choice{border-color:var(--st-line);border-radius:var(--st-radius-sm)}
body.st .krj-choice:has(input:checked){border-color:var(--st-orange-ink);background:#FBF3E8}
body.st .search-form__input,body.st .section .search-form__input{background:#fff;border:1px solid #D6C8AC;color:var(--st-brown-strong);border-radius:var(--st-radius-sm)}

/* ---------- 13. Footer ---------- */
body.st .site-footer{background:var(--st-band);color:var(--st-brown-soft);border-top:0;padding:clamp(56px,7vw,88px) 0 28px}
body.st .site-footer__signoff{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding-bottom:clamp(32px,4vw,48px);margin-bottom:clamp(32px,4vw,48px);border-bottom:1px solid rgba(131,79,22,.22)}
body.st .site-footer__signoff-title{font-family:var(--st-serif);font-weight:700;color:var(--st-orange);font-size:clamp(1.8rem,1.2rem + 2.2vw,2.8rem);line-height:1.12;max-width:20ch;margin:0}
body.st .site-footer__grid{grid-template-columns:1.5fr repeat(4,1fr)}
body.st .site-footer__brand p{color:var(--st-brown-soft)}
body.st .site-footer__contact a,body.st .site-footer__contact li{color:var(--st-brown-soft)}
body.st .site-footer__contact .krj-icon{color:var(--st-orange-ink)}
body.st .site-footer__hd{color:var(--st-brown-strong);font-weight:500;letter-spacing:.16em}
body.st .site-footer__links a,body.st .site-footer__legal a{color:var(--st-brown-soft)}
body.st .site-footer__links a:hover,body.st .site-footer__legal a:hover{color:var(--st-brown-strong);text-decoration:underline;text-decoration-color:var(--st-gold);text-underline-offset:3px}
body.st .site-footer__bottom{border-top-color:rgba(131,79,22,.22);color:var(--st-brown-soft)}
body.st .site-footer__cookies{background:none;border:0;padding:0;font:inherit;color:var(--st-brown-soft);cursor:pointer;text-decoration:underline;text-decoration-color:var(--st-gold);text-underline-offset:3px}
body.st .site-footer__cookies:hover{color:var(--st-brown-strong)}
body.st .social a{border-color:rgba(131,79,22,.3);color:var(--st-brown-strong);border-radius:50%}
body.st .social a:hover{background:var(--st-orange-ink);border-color:var(--st-orange-ink);color:#fff}
body.st .site-footer .logo__img{max-height:72px}
body.st .to-top{background:var(--st-orange-ink);border-color:var(--st-orange-ink);color:#fff;box-shadow:0 10px 24px -10px rgba(140,74,13,.55)}
body.st .to-top:hover{background:var(--st-orange-deep)}

/* ---------- 14. Cookie banner (plugin) ----------
   Re-skinned through the banner's own variables and shown as a compact card in
   the corner instead of a full-width bar. Accept and Reject stay identical. */
body.st .krj-consent{--krj-consent-bg:var(--st-paper);--krj-consent-ink:var(--st-brown);--krj-consent-muted:var(--st-muted);--krj-consent-line:var(--st-line);--krj-consent-btn-bg:var(--st-brown-strong);--krj-consent-btn-ink:#fff;--krj-consent-btn-hover:#000;--krj-consent-link:var(--st-orange-ink);--krj-consent-focus:var(--st-orange-ink);
  left:20px;right:auto;bottom:20px;width:min(440px,calc(100vw - 40px));max-width:440px;padding:22px 22px 20px;border:1px solid var(--st-line);border-radius:var(--st-radius);box-shadow:0 24px 60px -24px rgba(46,40,32,.45);font-family:var(--st-sans)}
body.st .krj-consent .krj-consent__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
body.st .krj-consent .krj-consent__title{font-family:var(--st-serif);font-weight:700;color:var(--st-orange);font-size:1.25rem;margin:0 0 6px}
body.st .krj-consent .krj-consent__text,body.st .krj-consent .krj-consent__cat-desc{color:var(--st-brown);font-size:.95rem}
body.st .krj-consent .krj-consent__link{color:var(--st-orange-ink)}
body.st .krj-consent .krj-consent__actions{display:flex;flex-wrap:wrap;gap:8px;align-self:stretch}
body.st .krj-consent .krj-consent__btn,body.st .krj-consent .krj-consent__btn[data-krj-consent-action="manage"],body.st .krj-consent .krj-consent__btn[data-krj-consent-action="save"]{flex:1 1 8.5rem;min-width:0;border-radius:var(--st-radius-sm);font-family:var(--st-sans);font-weight:500;box-shadow:none}
body.st .krj-consent .krj-consent__btn[data-krj-consent-action="manage"]{flex-basis:100%;background:transparent;color:#4A3A26;border:1.5px solid rgba(74,58,38,.45)}
body.st .krj-consent .krj-consent__btn[data-krj-consent-action="manage"]:hover{background:transparent;color:var(--st-brown-strong);border-color:var(--st-brown-strong)}
body.st .krj-consent .krj-consent__cat{border-color:var(--st-line-soft)}
body.st .krj-consent .krj-consent__check{accent-color:var(--st-orange-ink)}
@media (max-width:520px){body.st .krj-consent{left:12px;right:12px;bottom:12px;width:auto;max-width:none}}

/* ---------- 15. Campaign popup and bar (plugin) ---------- */
body.st .krj-popup__panel{background:var(--st-paper);color:var(--st-brown);border-radius:var(--st-radius)}
body.st .krj-popup__title{font-family:var(--st-serif);color:var(--st-orange)}
body.st .krj-bar,body.st .krj-bar--navy{background:var(--st-brown-strong);color:#F7F1E6}
body.st .krj-bar--light{background:var(--st-band);color:var(--st-brown-strong)}

/* ---------- 16. Misc components ---------- */
body.st .pagination .page-numbers{border-color:var(--st-line);color:var(--st-brown)}
body.st .pagination .page-numbers.current{background:var(--st-orange-ink);border-color:var(--st-orange-ink);color:#fff}
body.st .results__item{border-bottom-color:var(--st-line)}
body.st .results__title a{color:var(--st-brown-strong)}
body.st .wa-float{box-shadow:0 10px 24px -10px rgba(26,138,74,.5)}
body.st .krj-proof{background:var(--st-paper);border-color:var(--st-line)}
body.st .tcard,body.st .tline a{color:var(--st-brown-strong)}

/* ---------- 17. Responsive ---------- */
@media (max-width:900px){
  body.st .grid--3,body.st .grid--index,body.st .grid--hubs{grid-template-columns:minmax(0,1fr)}
  body.st .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.st .site-footer__brand{grid-column:1/-1}
  body.st .site-footer__signoff{grid-template-columns:minmax(0,1fr)}
  body.st .hero>.container::after{right:-220px;top:-160px}
  body.st .layout--sidebar{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  body.st .site-footer__grid{grid-template-columns:minmax(0,1fr)}
  body.st .card{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:2px 12px}
  body.st .hero__actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  body.st *,body.st *::before,body.st *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ==========================================================================
   18. Homepage (child front-page.php)
   ========================================================================== */
.st-head{max-width:46ch;margin-bottom:clamp(24px,3.5vw,40px)}
.st-head--center{margin-left:auto;margin-right:auto;text-align:center}
.st-head--center .eyebrow{justify-content:center}
body.st .st-head__title{font-size:clamp(1.8rem,1.25rem + 2vw,2.7rem);line-height:1.12}
.st-head__lede{margin:14px 0 0;color:var(--st-brown);font-size:1.06rem;max-width:58ch}
.st-head--center .st-head__lede{margin-left:auto;margin-right:auto}
.st-more{margin:32px 0 0}
.st-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--st-orange-ink)}
.st-link .krj-icon{transition:transform .2s ease}
.st-link:hover .krj-icon{transform:translateX(4px)}

/* Hero: words on the left, her photograph on the right in an arch, a gold ring behind. */
.st-hero{position:relative;padding:clamp(32px,5vw,72px) 0 clamp(56px,7vw,104px);overflow:hidden;isolation:isolate}
.st-hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:center}
body.st .st-hero__title{font-size:clamp(2.4rem,1.35rem + 3.8vw,4.3rem);line-height:1.04;max-width:14ch;margin:4px 0 0}
.st-hero__intro{margin-top:22px;font-size:clamp(1.08rem,1rem + .4vw,1.28rem);font-weight:300;line-height:1.6;color:var(--st-brown);max-width:54ch}
.st-hero__intro p{margin:0 0 .7em}
.st-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.st-hero__points{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.94rem;color:var(--st-brown)}
.st-hero__points li{display:inline-flex;align-items:center;gap:10px}
.st-hero__points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--st-orange-ink);flex:none}
.st-hero__figure{position:relative;margin:0;justify-self:end;width:min(100%,460px)}
.st-hero__ring{position:absolute;z-index:-1;left:-14%;top:-8%;width:118%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--st-gold);opacity:.75}
.st-hero__img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:78% 30%;border-radius:999px 999px 14px 14px;background:var(--st-band)}
.st-hero__caption{position:absolute;left:-28px;bottom:28px;display:grid;gap:2px;background:var(--st-paper);border:1px solid var(--st-line);border-radius:10px;padding:12px 16px;box-shadow:var(--st-shadow);max-width:80%}
.st-hero__name{font-family:var(--st-serif);font-weight:700;color:var(--st-brown-strong);font-size:1.05rem}
.st-hero__role{font-size:.82rem;color:var(--st-muted)}

/* Split layout: sticky heading on the left, content on the right. */
.st-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,88px);align-items:start}
.st-split__aside{position:sticky;top:110px}

/* Numbered services index */
.st-index{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--st-line)}
.st-index__item{border-top:1px solid var(--st-line)}
.st-index__link{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;gap:18px;align-items:start;padding:26px 0;color:var(--st-brown)}
.st-index__num{font-family:var(--st-serif);font-style:italic;font-weight:600;font-size:1.4rem;line-height:1.2;color:var(--st-gold)}
.st-index__body{display:grid;gap:6px}
.st-index__title{font-family:var(--st-serif);font-weight:700;font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);line-height:1.2;color:var(--st-brown-strong);transition:color .2s ease}
.st-index__text{color:var(--st-muted);font-size:.98rem;max-width:56ch}
.st-index__arrow{align-self:center;color:var(--st-orange-ink);transition:transform .2s ease}
.st-index__link:hover .st-index__title,.st-index__link:focus-visible .st-index__title{color:var(--st-orange-ink)}
.st-index__link:hover .st-index__arrow{transform:translateX(5px)}

/* Process steps */
.st-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--st-line)}
.st-steps__item{padding:28px 26px 8px 0;position:relative}
.st-steps__item+.st-steps__item{padding-left:26px;border-left:1px solid var(--st-line-soft)}
.st-steps__num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--st-gold);font-family:var(--st-serif);font-weight:700;font-size:1.15rem;color:var(--st-brown-soft);margin-bottom:16px}
body.st .st-steps__title{font-size:1.1rem;margin:0 0 8px}
.st-steps__text{color:var(--st-brown);font-size:.97rem;margin:0}

/* Sectors and places */
.st-who__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,88px)}
.st-list{list-style:none;margin:0;padding:0;columns:2;column-gap:32px;border-top:1px solid var(--st-line)}
.st-list li{break-inside:avoid;border-bottom:1px solid var(--st-line-soft)}
.st-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;color:var(--st-brown-strong);font-weight:400}
.st-list a::after{content:"\2192";color:var(--st-orange-ink);transition:transform .2s ease}
.st-list a:hover{color:var(--st-orange-ink)}
.st-list a:hover::after{transform:translateX(4px)}

/* About */
.st-about__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.st-about__figure{margin:0;position:relative}
.st-about__figure::after{content:"";position:absolute;z-index:-1;right:-18px;bottom:-18px;width:62%;height:62%;border:1.5px solid var(--st-gold);border-radius:14px;opacity:.7}
.st-about__img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;object-position:40% 30%;border-radius:14px}
.st-about__copy p{color:var(--st-brown);font-size:1.06rem}

/* Resource tiles */
.st-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.st-tile__link{display:grid;gap:8px;height:100%;padding:26px 24px;background:var(--st-paper);border:1px solid var(--st-line);border-radius:var(--st-radius);color:var(--st-brown);transition:border-color .2s ease,box-shadow .2s ease}
.st-tile__title{font-family:var(--st-serif);font-weight:700;font-size:1.2rem;color:var(--st-brown-strong)}
.st-tile__text{font-size:.95rem;color:var(--st-muted)}
.st-tile__arrow{color:var(--st-orange-ink);margin-top:6px;transition:transform .2s ease}
.st-tile__link:hover{border-color:var(--st-sand);box-shadow:var(--st-shadow)}
.st-tile__link:hover .st-tile__title{color:var(--st-orange-ink)}
.st-tile__link:hover .st-tile__arrow{transform:translateX(4px)}

@media (max-width:900px){
  .st-hero__grid,.st-split,.st-who__grid,.st-about__grid{grid-template-columns:minmax(0,1fr)}
  .st-hero__figure{justify-self:center;width:min(86%,400px);margin-top:12px}
  .st-split__aside{position:static}
  .st-tiles{grid-template-columns:minmax(0,1fr)}
  .st-steps__item+.st-steps__item{padding-left:0;border-left:0;border-top:1px solid var(--st-line-soft)}
}
@media (max-width:520px){
  .st-list{columns:1}
  .st-hero__caption{left:0;bottom:16px}
  .st-index__link{grid-template-columns:2.4rem minmax(0,1fr) auto;gap:12px}
}

/* ---------- 19. Refinements after the first visual check ---------- */
/* Ordered lists are plain numbered lines, not boxed steps. */
body.st .content ol>li{background:none;border:0;border-radius:0;box-shadow:none;padding:6px 0 6px 40px;margin:0}
body.st .content ol>li::before{top:.3em;font-size:1.15rem;line-height:1.5}
/* Sidebar and footer labels are small sans-serif labels, even when marked up as h2. */
body.st .side__hd,body.st .site-footer__hd{font-family:var(--st-sans);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--st-brown-soft);line-height:1.4}
body.st .side__hd::before,body.st .site-footer__hd::before{display:none}
/* Index rows: keep title and description together whatever the row height. */
body.st .card{align-content:start}
/* A page that already ends with a call-to-action band does not need the footer's sign-off too. */
body.st:has(.site-main > .krj-cta:last-child) .site-footer__signoff{display:none}
body.st:has(.site-main > .krj-cta:last-child) .site-footer{padding-top:clamp(40px,5vw,64px)}
body.st:has(.site-main > .krj-cta:last-child) .site-footer{border-top:1px solid rgba(131,79,22,.18)}
/* The banner box takes focus programmatically so screen readers announce it; its
   buttons carry the visible focus ring, so the box itself does not need one. */
body.st .krj-consent:focus,body.st .krj-consent:focus-visible{outline:none}

/* ---------- 20. Contact page hero (parent template-contact) ---------- */
body.st .pill{background:var(--st-paper);border:1px solid var(--st-line);color:var(--st-brown-soft);font-weight:500;letter-spacing:.14em}
body.st .pill__dot{background:var(--st-gold);box-shadow:none}
body.st .hero__scroll{display:none}
body.st .krj-choice__ico{background:var(--st-band);color:var(--st-orange-ink)}
body.st .cform .krj-choice:has(input:checked) .krj-choice__ico{background:var(--st-orange-ink);color:#fff}

/* 21. Header fit: the nav needs ~960px at full padding. Labels never wrap; the padding
   tightens below 1280px and the menu collapses to the toggle below 1100px (the parent
   collapses at 999px, which is too late for the longer UK labels). */
body.st .nav__link{white-space:nowrap}
@media (max-width:1280px){body.st .nav__link{padding:10px 9px;font-size:.93rem}body.st .nav__item--cta .nav__link{padding:10px 14px;margin-left:4px}}
@media (max-width:1099px){body.st .nav{display:none}body.st .nav-toggle{display:flex}body.st .site-header__actions{margin-left:auto}}
/* Small uppercase captions read better in the sans face; Playfair is for real headings. */
body.st .facts__hd{font-family:var(--st-sans);font-weight:500;letter-spacing:.12em}

/* 22. Contrast fixes found by tools/contrast-audit.js (WCAG AA). The parent painted these
   white for its navy panels; the panels are cream here. Links and small headings that sit
   on the deeper cream cards use the darker orange so they clear 4.5:1. */
body.st .bstats dd,body.st .bstats dd a,body.st .gstats dd{color:var(--st-brown-strong)}
body.st .chip.is-active,body.st .chip--light.is-active{background:var(--st-orange-ink);border-color:var(--st-orange-ink);color:#fff}
body.st .side__cta a:not(.btn),body.st .side__alt a,body.st .clist__value,body.st .cdetails a:not(.btn){color:var(--st-orange-deep)}
body.st .krj-form__heading,body.st .facts__hd{color:var(--st-orange-deep)}

/* 23. Mobile action bar (owner requirement): Book a call + WhatsApp, phones only, after the hero.
   It replaces the floating WhatsApp circle on phones so the two never stack. */
body.st .st-mbar{position:fixed;left:0;right:0;bottom:0;z-index:850;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(250,249,245,.97);border-top:1px solid var(--st-line);box-shadow:0 -10px 30px -18px rgba(46,40,32,.35)}
body.st .st-mbar[hidden]{display:none}
body.st .st-mbar .btn{min-height:46px;justify-content:center;font-size:.95rem;margin:0}
body.st .st-mbar__wa{background:#fff;color:var(--st-brown-strong);border:1px solid var(--st-line)}
body.st .st-mbar__wa .krj-icon{width:18px;height:18px;color:#1f8f4e}
body.st .st-mbar:not(:has(.st-mbar__wa)){grid-template-columns:1fr}
@media (min-width:768px){body.st .st-mbar{display:none!important}}
@media (max-width:767px){body.st .wa-float{display:none}body.st.st-has-mbar{padding-bottom:72px}body.st.st-has-mbar .to-top{bottom:84px}}

/* 24. Homepage sections added for parity: intro, client types, why, cost, latest articles. */
body.st .st-intro__body .content{margin-bottom:28px}
body.st .st-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--st-line);padding-top:24px}
body.st .st-points .st-card__title{font-family:var(--st-sans);font-size:1rem;font-weight:600;color:var(--st-brown-strong);margin:0 0 6px}
body.st .st-points .st-card__text{margin:0;color:var(--st-brown);font-size:.95rem;line-height:1.6}
body.st .st-points--ruled{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;padding-top:0}
body.st .st-points--ruled .st-card{border-top:1px solid var(--st-line);padding-top:18px}
body.st .st-cards{list-style:none;margin:0;padding:0;display:grid;gap:20px}
body.st .st-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.st .st-cards .st-card{background:#fff;border:1px solid var(--st-line);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column}
body.st .st-cards .st-card__title{font-family:var(--st-serif);font-size:1.3rem;color:var(--st-brown-strong);margin:0 0 10px}
body.st .st-cards .st-card__text{margin:0 0 16px;color:var(--st-brown);line-height:1.65;flex:1}
body.st .st-card__link{margin:0}
body.st .st-why__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
body.st .st-why__grid .st-card{border-top:1px solid var(--st-line);padding:24px 0 28px;position:relative}
body.st .st-card__num{display:block;font-family:var(--st-serif);font-style:italic;color:var(--st-gold);font-size:1.05rem;margin-bottom:8px}
body.st .st-why__grid .st-card__title{font-family:var(--st-serif);font-size:1.25rem;color:var(--st-brown-strong);margin:0 0 8px}
body.st .st-why__grid .st-card__text{margin:0;color:var(--st-brown);line-height:1.65}
body.st .st-cost__body{color:var(--st-brown);line-height:1.7}
body.st .st-tile__meta{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--st-muted);margin-bottom:8px}
body.st .st-tiles--posts .st-tile__title{font-size:1.15rem}
@media (max-width:960px){body.st .st-points,body.st .st-cards--3,body.st .st-why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body.st .st-points,body.st .st-points--ruled,body.st .st-cards--3,body.st .st-why__grid{grid-template-columns:minmax(0,1fr)}}
/* Homepage audit band and checks */
body.st .st-audit__form .krj-form{background:#fff;border:1px solid var(--st-line);border-radius:16px;padding:clamp(22px,3vw,34px);box-shadow:0 24px 50px -36px rgba(46,40,32,.35)}
body.st .st-checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
body.st .st-checks .st-card{position:relative;padding-left:30px}
body.st .st-checks .st-card::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;border-left:2px solid var(--st-orange-ink);border-bottom:2px solid var(--st-orange-ink);transform:rotate(-45deg)}
body.st .st-checks .st-card__title{font-family:var(--st-sans);font-size:1rem;font-weight:600;color:var(--st-brown-strong);margin:0 0 2px}
body.st .st-checks .st-card__text{margin:0;color:var(--st-brown);font-size:.95rem;line-height:1.6}

/* 25. Boxed layouts (owner feedback 2026-10-05): intro points, sectors and places as cards. */
body.st .st-intro .st-points{border-top:0;padding-top:0;gap:18px;counter-reset:stp}
body.st .st-intro .st-points .st-card{background:#fff;border:1px solid var(--st-line);border-radius:14px;padding:24px 22px 26px;position:relative;box-shadow:0 18px 40px -34px rgba(46,40,32,.45);counter-increment:stp;transition:transform .2s ease,box-shadow .2s ease}
body.st .st-intro .st-points .st-card::before{content:counter(stp,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--st-gold);color:var(--st-orange-ink);font-family:var(--st-serif);font-style:italic;font-size:1rem;margin-bottom:14px}
body.st .st-intro .st-points .st-card__title{font-size:1.05rem;margin-bottom:8px}
body.st .st-boxes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
body.st .st-box__link{display:flex;flex-direction:column;gap:8px;height:100%;background:#fff;border:1px solid var(--st-line);border-radius:14px;padding:22px 22px 20px;text-decoration:none;position:relative;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
body.st .st-box__link:hover,body.st .st-box__link:focus-visible{border-color:var(--st-gold);box-shadow:0 22px 44px -30px rgba(46,40,32,.45);transform:translateY(-2px)}
body.st .st-box__title{font-family:var(--st-serif);font-size:1.15rem;font-weight:600;color:var(--st-brown-strong);line-height:1.3;padding-right:28px}
body.st .st-box__text{font-size:.9rem;line-height:1.55;color:var(--st-brown)}
body.st .st-box__arrow{position:absolute;top:22px;right:20px;color:var(--st-orange-ink)}
body.st .st-box__arrow .krj-icon{width:18px;height:18px}
body.st .st-places{margin-top:clamp(48px,6vw,80px)}
body.st .st-boxes--places{grid-template-columns:repeat(6,minmax(0,1fr))}
body.st .st-boxes--places .st-box__link{flex-direction:row;align-items:center;gap:10px;padding:16px 18px}
body.st .st-boxes--places .st-box__title{font-size:1.05rem;padding-right:0;flex:1}
body.st .st-boxes--places .st-box__arrow{position:static}
body.st .st-box__pin{display:inline-flex;color:var(--st-gold)}
body.st .st-box__pin .krj-icon{width:18px;height:18px}
body.st .st-box--all .st-box__link{background:var(--st-orange-ink);border-color:var(--st-orange-ink)}
body.st .st-box--all .st-box__title,body.st .st-box--all .st-box__pin,body.st .st-box--all .st-box__arrow{color:#fff}
@media (prefers-reduced-motion:reduce){body.st .st-box__link,body.st .st-intro .st-points .st-card{transition:none}body.st .st-box__link:hover{transform:none}}
@media (max-width:1100px){body.st .st-boxes--places{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){body.st .st-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body.st .st-intro .st-points{grid-template-columns:minmax(0,1fr)}body.st .st-boxes--places{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){body.st .st-boxes{grid-template-columns:minmax(0,1fr)}}
body.st .st-box__pin,body.st .st-boxes--places .st-box__arrow{flex-shrink:0}
body.st .st-boxes--places .st-box__title{min-width:0;overflow-wrap:anywhere}
body.st .st-boxes--places .st-box__link{padding:16px 14px;gap:8px}
body.st .st-box--all .st-box__text{color:rgba(255,255,255,.88)}
body.st .st-boxes--places{grid-template-columns:repeat(3,minmax(0,1fr))}
body.st .st-boxes--places .st-box__title{overflow-wrap:normal;font-size:1.1rem}
body.st .st-boxes--places .st-box__link{padding:18px 20px}
body.st .st-proof .krj-cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.st .st-proof .st-more{margin-top:28px;text-align:center}
@media (max-width:760px){body.st .st-proof .krj-cases__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){body.st .st-boxes--places{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 26. Site-wide boxed design (owner feedback 2026-10-05).
   Listing grids (hub children, related pages, industries) become cards; page bodies get
   card treatments from inc/content-design.php (sub-section cards, feature and step cards). */
body.st .grid--3,body.st .grid--index,body.st .grid--hubs{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.st .card{display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;background:#fff;border:1px solid var(--st-line);border-radius:14px;box-shadow:0 16px 36px -32px rgba(46,40,32,.5);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;height:100%}
body.st .card::before{display:none}
body.st .card__ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--st-gold);color:var(--st-orange-ink);background:var(--st-cream)}
body.st .card__ico .krj-icon{width:22px;height:22px}
body.st .card__title{font-family:var(--st-serif);font-weight:600;font-size:1.18rem;line-height:1.3;color:var(--st-brown-strong)}
body.st .card__text{font-size:.93rem;line-height:1.6;color:var(--st-brown);flex:1}
body.st .card__more{align-self:flex-start;color:var(--st-orange-ink)}
body.st .card--link:hover,body.st .card--link:focus-visible{border-color:var(--st-gold);box-shadow:0 24px 46px -30px rgba(46,40,32,.5);transform:translateY(-3px);background:#fff}
body.st .card--dense{padding:22px 20px 20px}
@media (max-width:1000px){body.st .grid--3,body.st .grid--index,body.st .grid--hubs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body.st .grid--3,body.st .grid--index,body.st .grid--hubs{grid-template-columns:minmax(0,1fr)}}

/* Sub-section cards inside page bodies */
body.st .content .st-subgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:24px 0 32px}
body.st .content .st-subgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.st .content .st-subcard{background:#fff;border:1px solid var(--st-line);border-radius:14px;padding:22px 24px 6px;box-shadow:0 14px 32px -30px rgba(46,40,32,.5);border-top:3px solid var(--st-gold)}
body.st .content .st-subcard > h3{margin-top:0;font-size:1.2rem}
body.st .content .st-subcard > :last-child{margin-bottom:18px}
@media (max-width:760px){body.st .content .st-subgrid--2{grid-template-columns:minmax(0,1fr)}}

/* Feature cards: lists (and runs of paragraphs) that open with a bold lead */
body.st .content ul.st-feature-list,body.st .content .st-feature-list--p{list-style:none;padding:0;margin:24px 0 32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.st .content ul.st-feature-list > li,body.st .content .st-feature-list--p > p{position:relative;margin:0;background:var(--st-cream);border:1px solid var(--st-line);border-radius:12px;padding:18px 20px 18px 50px;line-height:1.6}
body.st .content ul.st-feature-list > li::before,body.st .content .st-feature-list--p > p::before{content:"";position:absolute;left:20px;top:24px;width:14px;height:8px;border-left:2px solid var(--st-orange-ink);border-bottom:2px solid var(--st-orange-ink);transform:rotate(-45deg);background:none}
body.st .content ul.st-feature-list > li > strong:first-child,body.st .content .st-feature-list--p > p > strong:first-child{display:block;color:var(--st-brown-strong);margin-bottom:4px}
/* Step cards: numbered lists that open with a bold lead */
body.st .content ol.st-steps-list{list-style:none;padding:0;margin:24px 0 32px;counter-reset:st-step;display:grid;gap:14px}
body.st .content ol.st-steps-list > li{counter-increment:st-step;position:relative;margin:0;background:#fff;border:1px solid var(--st-line);border-radius:12px;padding:18px 22px 18px 72px;line-height:1.6}
body.st .content ol.st-steps-list > li::before{content:counter(st-step);position:absolute;left:20px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--st-orange-ink);color:#fff;font-family:var(--st-serif);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1rem}
body.st .content ol.st-steps-list > li > strong:first-child{display:block;color:var(--st-brown-strong);margin-bottom:4px}
@media (max-width:760px){body.st .content ul.st-feature-list,body.st .content .st-feature-list--p{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){body.st .card{transition:none}body.st .card--link:hover{transform:none}}
/* Plain bullet lists in page bodies: a soft panel with check marks */
body.st .entry-content > ul:not(.st-feature-list):not(.st-tools):not(.st-logo-grid):not(.st-clients):not([class*="krj-"]),body.st .st-subcard > ul{list-style:none;background:var(--st-cream);border:1px solid var(--st-line);border-radius:12px;padding:16px 20px 16px 20px;margin:20px 0 28px}
body.st .entry-content > ul:not(.st-feature-list):not(.st-tools):not(.st-logo-grid):not(.st-clients):not([class*="krj-"]) > li,body.st .st-subcard > ul > li{position:relative;padding-left:28px;margin:8px 0}
body.st .entry-content > ul:not(.st-feature-list):not(.st-tools):not(.st-logo-grid):not(.st-clients):not([class*="krj-"]) > li::before,body.st .st-subcard > ul > li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--st-orange-ink);border-bottom:2px solid var(--st-orange-ink);transform:rotate(-45deg);background:none;border-radius:0}
body.st .st-subcard > ul{background:none;border:0;padding:0;margin:10px 0 16px}
/* Closing call-to-action box */
body.st .content .st-callout{margin:40px 0 8px;background:linear-gradient(135deg,var(--st-band) 0%,var(--st-cream) 100%);border:1px solid var(--st-sand,#E5D9C2);border-left:4px solid var(--st-orange-ink);border-radius:16px;padding:26px 30px 10px}
body.st .content .st-callout > h2{margin-top:0}
body.st .content .st-callout > h2::before{display:none}
/* Case study cards with their result image */
body.st .krj-case--media{padding-top:0;overflow:hidden}
body.st .krj-case__media{display:block;margin:0 -1px 18px;aspect-ratio:16/9;overflow:hidden;background:var(--st-cream);border-bottom:1px solid var(--st-line)}
body.st .krj-case__media img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .3s ease}
body.st .krj-case--media:hover .krj-case__media img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){body.st .krj-case__media img{transition:none}}
body.st .krj-tab.is-active,body.st .krj-tab[aria-selected="true"]{background:var(--st-orange-ink);border-color:var(--st-orange-ink);color:#fff}
body.st .krj-tab:hover{border-color:var(--st-orange-ink);color:var(--st-orange-ink)}
body.st .krj-tab.is-active:hover{color:#fff}
body.st .st-box__ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--st-gold);color:var(--st-orange-ink);background:var(--st-cream);margin-bottom:6px}
body.st .st-box__ico .krj-icon{width:22px;height:22px}
body.st .st-box--all .st-box__ico{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff}

/* 27. Rings removed (owner feedback 2026-10-05): no outline circles in the hero, inner
   page headers or the call-to-action band. */
body.st .hero>.container::after,body.st .krj-cta::after,body.st .krj-cta::before,.st-hero__ring{display:none!important;content:none}
/* Home hero photo: a soft filled arch offset behind the photo instead of a line */
.st-hero__figure::before{content:"";position:absolute;z-index:-1;right:-18px;bottom:-18px;width:86%;height:88%;border-radius:999px 999px 18px 18px;background:var(--st-band);}
body.st .st-hero__figure img,.st-hero__photo{box-shadow:0 30px 60px -38px rgba(46,40,32,.55)}
/* Call-to-action band: content in a white card with a gold top edge */
body.st .krj-cta{background:var(--st-band);overflow:visible}
body.st .krj-cta .container{position:relative}
body.st .krj-cta__in,body.st .krj-cta .krj-cta__inner,body.st .krj-cta>.container>div:first-child{background:#fff;border:1px solid var(--st-line);border-top:4px solid var(--st-orange-ink);border-radius:18px;padding:clamp(28px,4vw,48px) clamp(22px,4vw,56px);max-width:860px;margin:0 auto;box-shadow:0 30px 60px -44px rgba(46,40,32,.55)}

/* 28. More visible buttons (owner feedback 2026-10-05) and article images. */
/* Text links that act as calls to action become outlined pill buttons */
body.st .st-link,body.st .st-card__link .st-link{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1.5px solid var(--st-orange-ink);border-radius:999px;background:#fff;color:var(--st-orange-ink);font-weight:600;font-size:.95rem;text-decoration:none;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
body.st .st-link:hover,body.st .st-link:focus-visible{background:var(--st-orange-ink);color:#fff;box-shadow:0 14px 30px -18px rgba(168,90,17,.8)}
body.st .st-link .krj-icon{width:18px;height:18px}
body.st .st-card__link{margin-top:14px}
body.st .st-about__copy .st-link{background:var(--st-orange-ink);color:#fff}
body.st .st-about__copy .st-link:hover{background:var(--st-orange-deep);border-color:var(--st-orange-deep)}
/* "See all" style buttons: solid, with an arrow */
body.st .st-more .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-size:1rem}
body.st .st-more .btn .krj-icon{width:18px;height:18px}
body.st .st-more{text-align:center;margin-top:32px}
/* The stray outline box behind the About photo is gone; a soft shadow instead */
.st-about__figure::after{display:none}
.st-about__img{box-shadow:0 30px 60px -40px rgba(46,40,32,.55)}
/* Article tiles with their featured image */
body.st .st-tiles--posts .st-tile__link{padding-top:0;overflow:hidden}
body.st .st-tile__media{display:block;margin:0 -24px 16px;aspect-ratio:16/9;overflow:hidden;background:var(--st-band);border-bottom:1px solid var(--st-line)}
body.st .st-tile__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
body.st .st-tile__link:hover .st-tile__media img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){body.st .st-tile__media img,body.st .st-link{transition:none}}

/* 29. Case study showcase (owner feedback 2026-10-05): image-led cards with the headline
   result laid over the screenshot, and a featured spread for the first case on the home page. */
body.st .krj-case{display:flex;flex-direction:column;padding:0;overflow:hidden;background:#fff;border:1px solid var(--st-line);border-radius:18px;box-shadow:0 22px 48px -40px rgba(46,40,32,.6);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
body.st .krj-case:hover{transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 34px 60px -38px rgba(46,40,32,.6)}
body.st .krj-case__body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 24px;flex:1}
body.st .krj-case__media{position:relative;display:block;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--st-band);border:0}
body.st .krj-case__media img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .5s ease}
body.st .krj-case:hover .krj-case__media img{transform:scale(1.05)}
body.st .krj-case__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,40,32,0) 35%,rgba(46,40,32,.82) 100%);pointer-events:none}
body.st .krj-case__headline{position:absolute;z-index:1;left:20px;right:20px;bottom:16px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;color:#fff}
body.st .krj-case__headline strong{font-family:var(--st-serif);font-size:2rem;line-height:1;font-weight:700;color:#fff}
body.st .krj-case__headline span{font-size:.85rem;opacity:.92;line-height:1.3}
body.st .krj-case__client{position:absolute;z-index:1;top:14px;left:14px;background:rgba(250,249,245,.95);color:var(--st-brown-strong);font-size:.78rem;font-weight:600;letter-spacing:.02em;padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px -10px rgba(0,0,0,.5)}
body.st .krj-case__title,body.st .krj-case__title a{font-family:var(--st-serif);font-size:1.25rem;line-height:1.3;color:var(--st-brown-strong)}
body.st .krj-case__title a:hover{color:var(--st-orange-ink)}
body.st .krj-case__metrics{border-top:1px dashed var(--st-line);padding-top:14px;margin-top:auto}
body.st .krj-case__link{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:10px 18px;border-radius:999px;background:var(--st-cream);border:1px solid var(--st-line);color:var(--st-orange-ink);font-weight:600;font-size:.9rem;transition:background .2s ease,color .2s ease}
body.st .krj-case__link:hover{background:var(--st-orange-ink);border-color:var(--st-orange-ink);color:#fff}
/* Home page: first case study as a wide featured spread, the rest in a row of three */
body.st .st-proof .krj-cases__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
body.st .st-proof .krj-case:first-child{grid-column:1/-1;flex-direction:row}
body.st .st-proof .krj-case:first-child .krj-case__media{flex:0 0 56%;aspect-ratio:auto;min-height:360px}
body.st .st-proof .krj-case:first-child .krj-case__body{padding:34px 38px;justify-content:center}
body.st .st-proof .krj-case:first-child .krj-case__title,body.st .st-proof .krj-case:first-child .krj-case__title a{font-size:1.7rem}
body.st .st-proof .krj-case:first-child .krj-case__headline strong{font-size:2.8rem}
@media (max-width:960px){body.st .st-proof .krj-cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.st .st-proof .krj-case:first-child{flex-direction:column}body.st .st-proof .krj-case:first-child .krj-case__media{flex:none;aspect-ratio:16/10;min-height:0}}
@media (max-width:640px){body.st .st-proof .krj-cases__grid{grid-template-columns:minmax(0,1fr)}body.st .krj-case__headline strong{font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){body.st .krj-case,body.st .krj-case__media img{transition:none}body.st .krj-case:hover{transform:none}}

/* 30. Hover effects (owner feedback 2026-10-05): one consistent language across the site:
   a gentle lift, a gold edge, the accent colour, and arrows that move. Keyboard focus gets
   the same treatment through :focus-visible / :focus-within. */
body.st .st-cards .st-card,body.st .st-intro .st-points .st-card,body.st .content .st-subcard,body.st .content ul.st-feature-list>li,body.st .content .st-feature-list--p>p,body.st .content ol.st-steps-list>li,body.st .st-tile__link{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease}
body.st .st-cards .st-card:hover,body.st .st-cards .st-card:focus-within,body.st .st-intro .st-points .st-card:hover{transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 26px 50px -34px rgba(46,40,32,.55)}
body.st .st-intro .st-points .st-card:hover::before{background:var(--st-orange-ink);color:#fff;border-color:var(--st-orange-ink)}
body.st .st-intro .st-points .st-card::before{transition:background .22s ease,color .22s ease}
/* Why-work-with-me: the number and the top rule pick up the accent */
body.st .st-why__grid .st-card{border-top-width:1px;transition:border-color .22s ease}
body.st .st-why__grid .st-card:hover{border-top-color:var(--st-orange-ink)}
body.st .st-why__grid .st-card:hover .st-card__num{color:var(--st-orange-ink)}
body.st .st-why__grid .st-card__num{transition:color .22s ease}
/* Results and fees points: an accent bar slides in */
body.st .st-points--ruled .st-card{position:relative;transition:padding-left .22s ease}
body.st .st-points--ruled .st-card::after{content:"";position:absolute;left:0;top:18px;bottom:0;width:3px;border-radius:3px;background:var(--st-orange-ink);transform:scaleY(0);transform-origin:top;transition:transform .22s ease}
body.st .st-points--ruled .st-card:hover{padding-left:14px}
body.st .st-points--ruled .st-card:hover::after{transform:scaleY(1)}
/* Services index rows */
body.st .st-index__link{transition:background-color .22s ease,padding .22s ease}
body.st .st-index__link:hover,body.st .st-index__link:focus-visible{background:var(--st-cream);padding-left:14px;padding-right:14px}
body.st .st-index__link:hover .st-index__title{color:var(--st-orange-ink)}
body.st .st-index__arrow{transition:transform .22s ease}
body.st .st-index__link:hover .st-index__arrow{transform:translateX(5px)}
/* Tiles (resources, articles) */
body.st .st-tile__link:hover,body.st .st-tile__link:focus-visible{transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 26px 50px -34px rgba(46,40,32,.55)}
body.st .st-tile__link:hover .st-tile__title{color:var(--st-orange-ink)}
body.st .st-tile__arrow{transition:transform .22s ease}
body.st .st-tile__link:hover .st-tile__arrow{transform:translateX(5px)}
/* Location and sector boxes: arrow moves, icon fills */
body.st .st-box__arrow{transition:transform .22s ease}
body.st .st-box__link:hover .st-box__arrow{transform:translateX(4px)}
body.st .st-box__ico{transition:background .22s ease,color .22s ease}
body.st .st-box__link:hover .st-box__ico{background:var(--st-orange-ink);color:#fff;border-color:var(--st-orange-ink)}
body.st .st-box--all .st-box__link:hover{background:var(--st-orange-deep);border-color:var(--st-orange-deep)}
/* Listing cards (hubs, related) */
body.st .card__ico{transition:background .22s ease,color .22s ease}
body.st .card--link:hover .card__ico{background:var(--st-orange-ink);color:#fff;border-color:var(--st-orange-ink)}
body.st .card--link:hover .card__title{color:var(--st-orange-ink)}
/* In-page cards */
body.st .content .st-subcard:hover{transform:translateY(-3px);border-top-color:var(--st-orange-ink);box-shadow:0 24px 46px -34px rgba(46,40,32,.55)}
body.st .content ul.st-feature-list>li:hover,body.st .content .st-feature-list--p>p:hover{background:#fff;border-color:var(--st-gold)}
body.st .content ol.st-steps-list>li:hover{border-color:var(--st-gold);box-shadow:0 20px 40px -32px rgba(46,40,32,.55)}
/* FAQ rows */
body.st .krj-faq__q{transition:color .2s ease,padding .2s ease}
body.st .krj-faq__q:hover{color:var(--st-orange-ink);padding-left:6px}
/* Sidebar and footer links */
body.st .side__nav a{transition:color .2s ease,padding .2s ease}
body.st .side__nav a:hover{padding-left:8px}
body.st .site-footer a{transition:color .2s ease}
body.st .site-footer__links a:hover,body.st .site-footer__links a:focus-visible{color:var(--st-orange-deep);text-decoration:underline;text-underline-offset:4px}
/* Buttons: a small lift and a warm shadow */
body.st .btn,body.st .krj-btn{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
body.st .btn--primary:hover,body.st .krj-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(168,90,17,.75)}
body.st .btn--secondary:hover,body.st .btn--ghost:hover{border-color:var(--st-orange-ink);color:var(--st-orange-ink);transform:translateY(-2px)}
/* Dropdown menu links */
body.st .mega__link{transition:background-color .2s ease,color .2s ease}
body.st .mega__link:hover{background:var(--st-cream);color:var(--st-orange-deep)}
@media (prefers-reduced-motion:reduce){body.st *{transition:none!important}body.st .st-cards .st-card:hover,body.st .st-tile__link:hover,body.st .content .st-subcard:hover,body.st .btn--primary:hover,body.st .krj-btn--primary:hover{transform:none}}
@media (hover:none){body.st .st-cards .st-card:hover,body.st .st-tile__link:hover,body.st .content .st-subcard:hover,body.st .krj-case:hover{transform:none}}
body.st .st-box--all .st-box__text{color:#fff}
/* Hero photo backing (owner feedback 2026-10-05): an exact copy of the photo's arch,
   offset evenly behind it, instead of a mismatched block peeking out on one side. */
.st-hero__figure::before{inset:0;right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:4/5;transform:translate(16px,16px);border-radius:999px 999px 14px 14px;background:var(--st-band);border:1px solid var(--st-sand,#E5D9C2)}

/* 31. Free tools and resources (owner feedback 2026-10-05).
   Tool lists on /tools/ become tool cards (inc/content-design.php); listing cards for
   resources and tools carry a kind label; resource-kind sub-sections carry an icon. */
body.st .content ul.st-tools{list-style:none;padding:0;margin:26px 0 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
body.st .content ul.st-tools > li.st-tool{position:relative;display:flex;flex-direction:column;margin:0;padding:24px 24px 22px;background:#fff;border:1px solid var(--st-line);border-radius:16px;box-shadow:0 16px 36px -32px rgba(46,40,32,.5);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
body.st .content ul.st-tools > li.st-tool::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--st-orange-ink);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
body.st .st-tool__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
body.st .st-tool__ico{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;background:var(--st-band);color:var(--st-orange-ink);transition:background-color .22s ease,color .22s ease}
body.st .st-tool__ico .krj-icon{width:24px;height:24px}
body.st .st-tool__kind,body.st .card__kicker{font-family:var(--st-sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brown-soft);background:var(--st-cream);border:1px solid var(--st-line);border-radius:999px;padding:5px 11px;line-height:1.2}
body.st .content .st-tool__title{font-family:var(--st-serif);font-size:1.28rem;line-height:1.3;margin:0 0 10px;text-wrap:pretty}
body.st .content .st-tool__title a{color:var(--st-brown-strong);text-decoration:none;background:none}
body.st .content .st-tool__title a::after{content:"";position:absolute;inset:0;border-radius:16px}
body.st .content .st-tool__title a:focus-visible{outline:none}
body.st .content ul.st-tools > li.st-tool:focus-within{outline:2px solid var(--st-orange-ink);outline-offset:3px}
body.st .content .st-tool__text{flex:1;margin:0 0 18px;font-size:.95rem;line-height:1.65;color:var(--st-brown)}
body.st .content .st-tool__text a{position:relative;z-index:1}
body.st .st-tool__go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding-top:14px;width:100%;border-top:1px solid var(--st-line-soft);font-weight:600;font-size:.92rem;color:var(--st-orange-ink)}
body.st .st-tool__go::after{content:"→";transition:transform .22s ease}
body.st .content ul.st-tools > li.st-tool:hover{transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 26px 48px -30px rgba(46,40,32,.55)}
body.st .content ul.st-tools > li.st-tool:hover::before{transform:scaleX(1)}
body.st .content ul.st-tools > li.st-tool:hover .st-tool__ico{background:var(--st-orange-ink);color:#fff}
body.st .content ul.st-tools > li.st-tool:hover .st-tool__title a{color:var(--st-orange-ink)}
body.st .content ul.st-tools > li.st-tool:hover .st-tool__go::after{transform:translateX(5px)}
@media (max-width:760px){body.st .content ul.st-tools{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){body.st .content ul.st-tools > li.st-tool,body.st .content ul.st-tools > li.st-tool::before,body.st .st-tool__go::after{transition:none}body.st .content ul.st-tools > li.st-tool:hover{transform:none}}

/* Listing cards: kind label top right, level with the icon */
body.st .card__kicker{position:absolute;top:34px;right:20px}
body.st .card__title{text-wrap:pretty}
body.st .card--link:hover .card__kicker{border-color:var(--st-gold)}

/* Resource-kind sub-section cards */
body.st .content .st-subcard__ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--st-band);color:var(--st-orange-ink);margin-bottom:14px}
body.st .content .st-subcard__ico .krj-icon{width:22px;height:22px}
body.st .content .st-subcard--icon > h3{font-family:var(--st-serif);font-size:1.3rem;margin-bottom:8px}
body.st .content .st-subcard--icon:hover .st-subcard__ico{background:var(--st-orange-ink);color:#fff}
body.st .content .st-subcard__ico{transition:background-color .22s ease,color .22s ease}

/* 32. QA fixes (pre-launch, 2026-10-05) */
/* "Ask AI" share row: a hidden tooltip on the last icon widened the page by a few pixels at 320px.
   Tooltips leave the layout until they are shown. */
body.st .atools__tip{display:none}
body.st .atools__icon:hover .atools__tip,body.st .atools__icon:focus-visible .atools__tip{display:block}
/* Tooltip text was white on the cream band (the recolour map turns navy backgrounds cream). */
body.st .atools__tip{background:var(--st-brown-strong);color:#fff}
/* Long unbroken strings in body copy (URLs, code samples in glossary terms) wrap instead of widening
   the page on small phones. */
body.st .content p,body.st .content li,body.st .content dd,body.st .content blockquote{overflow-wrap:anywhere}
body.st .content td,body.st .content th{overflow-wrap:break-word}
/* Glossary A to Z bar: the recolour map turned the parent's translucent white into 47% brown, leaving
   orange letters at 2:1 contrast. A cream bar with a hairline reads as part of the page. */
body.st .gbar{background:rgba(250,249,245,.96);border-bottom:1px solid var(--st-line);box-shadow:0 10px 24px -22px rgba(46,40,32,.45)}
body.st .gbar .chip:not(.is-active){color:var(--st-brown-strong);background:#fff;border-color:var(--st-line)}
/* In-page contents box (cream surface): links one step darker to pass AA at small sizes. */
body.st .toc a{color:var(--st-orange-deep)}
body.st .toc a:hover{color:var(--st-orange-ink)}

/* 33. Home "How success is measured" and "What decides the cost" (owner feedback 2026-10-05):
   icon cards instead of ruled paragraphs. */
body.st .st-points--boxed{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border-top:0;padding-top:0;align-self:center}
body.st .st-points--boxed .st-card{position:relative;display:flex;flex-direction:column;padding:26px 24px 24px;background:#fff;border:1px solid var(--st-line);border-radius:16px;box-shadow:0 18px 40px -34px rgba(46,40,32,.55);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
body.st .st-points--boxed .st-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--st-orange-ink);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
body.st .st-points--boxed .st-card__ico{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;background:var(--st-band);color:var(--st-orange-ink);margin-bottom:18px;transition:background-color .22s ease,color .22s ease}
body.st .st-points--boxed .st-card__ico .krj-icon{width:24px;height:24px}
body.st .st-points--boxed .st-card__title{font-family:var(--st-serif);font-size:1.22rem;font-weight:700;line-height:1.3;color:var(--st-brown-strong);margin:0 0 8px}
body.st .st-points--boxed .st-card__text{font-size:.95rem;line-height:1.65;color:var(--st-brown)}
body.st .st-points--boxed .st-card:hover{transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 28px 50px -32px rgba(46,40,32,.55)}
body.st .st-points--boxed .st-card:hover::before{transform:scaleX(1)}
body.st .st-points--boxed .st-card:hover .st-card__ico{background:var(--st-orange-ink);color:#fff}
/* The card that carries the call to action stands out */
body.st .st-points--boxed .st-card--action{background:linear-gradient(160deg,var(--st-band) 0%,#fff 75%);border-color:var(--st-sand,#E4D8BE)}
body.st .st-points--boxed .st-card--action .st-card__ico{background:var(--st-orange-ink);color:#fff}
body.st .st-points--boxed .st-card--action .st-card__link{margin-top:auto;padding-top:18px}
body.st .section--surface .st-points--boxed .st-card{background:#fff}
@media (max-width:640px){body.st .st-points--boxed{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){body.st .st-points--boxed .st-card,body.st .st-points--boxed .st-card::before{transition:none}body.st .st-points--boxed .st-card:hover{transform:none}}
body.st .st-points--boxed .st-card__title{text-wrap:pretty}

/* 34. One card design across the site (owner request 2026-10-05): white card, rounded, soft shadow,
   icon or number tile, serif title, and on hover a lift, an orange top line and a filled tile.
   Applies to the home "Why work with me" and process sections and to the boxes that
   inc/content-design.php builds inside every page body. */
body.st .st-points--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){body.st .st-points--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body.st .st-points--3{grid-template-columns:minmax(0,1fr)}}

/* Home process: numbered step cards */
body.st .st-steps{gap:18px;border-top:0}
body.st .st-steps__item,body.st .st-steps__item+.st-steps__item{position:relative;padding:26px 24px 24px;background:#fff;border:1px solid var(--st-line);border-radius:16px;box-shadow:0 18px 40px -34px rgba(46,40,32,.55);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
body.st .st-steps__num{width:50px;height:50px;border-radius:14px;border:0;background:var(--st-band);color:var(--st-orange-ink);font-size:1.25rem;margin-bottom:18px;transition:background-color .22s ease,color .22s ease}
body.st .st-steps__title{font-family:var(--st-serif);font-size:1.22rem;font-weight:700;color:var(--st-brown-strong);text-wrap:pretty}
body.st .st-steps__item:hover{transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 28px 50px -32px rgba(46,40,32,.55)}
body.st .st-steps__item:hover .st-steps__num{background:var(--st-orange-ink);color:#fff}
@media (max-width:760px){body.st .st-steps__item+.st-steps__item{border-top:1px solid var(--st-line)}}

/* Shared hover line for step and content cards */
body.st .st-steps__item::before,
body.st .content ul.st-feature-list > li::after,body.st .content .st-feature-list--p > p::after,
body.st .content ol.st-steps-list > li::after,body.st .content .st-subcard::after{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--st-orange-ink);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;pointer-events:none}
body.st .st-steps__item:hover::before,
body.st .content ul.st-feature-list > li:hover::after,body.st .content .st-feature-list--p > p:hover::after,
body.st .content ol.st-steps-list > li:hover::after,body.st .content .st-subcard:hover::after{transform:scaleX(1)}

/* Page-body feature lists (bold lead + text): white cards with a check tile above the lead */
body.st .content ul.st-feature-list,body.st .content .st-feature-list--p{gap:18px}
body.st .content ul.st-feature-list > li,body.st .content .st-feature-list--p > p{background:#fff;border-radius:16px;padding:24px 24px 22px;box-shadow:0 18px 40px -34px rgba(46,40,32,.55);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
body.st .content ul.st-feature-list > li::before,body.st .content .st-feature-list--p > p::before{content:"";position:static;display:block;width:46px;height:46px;margin:0 0 16px;border:0;border-radius:13px;transform:none;background:var(--st-band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A85A11' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/22px no-repeat;transition:background-color .22s ease}
body.st .content ul.st-feature-list > li > strong:first-child,body.st .content .st-feature-list--p > p > strong:first-child{font-family:var(--st-serif);font-size:1.15rem;line-height:1.3;margin-bottom:6px}
body.st .content ul.st-feature-list > li:hover,body.st .content .st-feature-list--p > p:hover{background:#fff;transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 28px 50px -32px rgba(46,40,32,.55)}
body.st .content ul.st-feature-list > li:hover::before,body.st .content .st-feature-list--p > p:hover::before{background:var(--st-orange-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/22px no-repeat}

/* Page-body numbered steps: number tile, card, same hover */
body.st .content ol.st-steps-list{gap:16px}
body.st .content ol.st-steps-list > li{border-radius:16px;padding:22px 24px 22px 90px;box-shadow:0 18px 40px -34px rgba(46,40,32,.55);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
body.st .content ol.st-steps-list > li::before{left:24px;top:20px;width:46px;height:46px;border-radius:13px;background:var(--st-band);color:var(--st-orange-ink);font-size:1.15rem;transition:background-color .22s ease,color .22s ease}
body.st .content ol.st-steps-list > li > strong:first-child{font-family:var(--st-serif);font-size:1.15rem;line-height:1.3}
body.st .content ol.st-steps-list > li:hover{transform:translateY(-3px);border-color:var(--st-gold);box-shadow:0 28px 50px -32px rgba(46,40,32,.55)}
body.st .content ol.st-steps-list > li:hover::before{background:var(--st-orange-ink);color:#fff}
@media (max-width:640px){body.st .content ol.st-steps-list > li{padding:20px 20px 20px 20px}body.st .content ol.st-steps-list > li::before{position:static;display:flex;margin-bottom:14px}}

/* Page-body sub-section cards (H3 groups): same card language */
body.st .content .st-subcard{position:relative;border-top:1px solid var(--st-line);border-radius:16px;padding:24px 24px 8px;box-shadow:0 18px 40px -34px rgba(46,40,32,.55);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
body.st .content .st-subcard > h3{font-family:var(--st-serif);font-size:1.25rem}
body.st .content .st-subcard:hover{transform:translateY(-4px);border-color:var(--st-gold);box-shadow:0 28px 50px -32px rgba(46,40,32,.55)}

@media (prefers-reduced-motion:reduce){
  body.st .st-steps__item,body.st .content ul.st-feature-list > li,body.st .content .st-feature-list--p > p,body.st .content ol.st-steps-list > li,body.st .content .st-subcard{transition:none}
  body.st .st-steps__item:hover,body.st .content ul.st-feature-list > li:hover,body.st .content .st-feature-list--p > p:hover,body.st .content ol.st-steps-list > li:hover,body.st .content .st-subcard:hover{transform:none}
}

/* 35. List markers sit on the middle of the first text line (owner feedback 2026-10-05: the ticks sat
   about 9px high). Each marker is a box exactly one line tall (1lh) placed at the item's top padding,
   with the mark centred inside it, so alignment holds at any font size or line height. */
/* Check-mark lists (plain lists in page bodies and inside sub-section cards) */
body.st .entry-content > ul:not(.st-feature-list):not(.st-tools):not(.st-logo-grid):not(.st-clients):not([class*="krj-"]) > li,
body.st .st-subcard > ul > li{padding:6px 0 6px 30px;margin:0}
body.st .entry-content > ul:not(.st-feature-list):not(.st-tools):not(.st-logo-grid):not(.st-clients):not([class*="krj-"]) > li::before,
body.st .st-subcard > ul > li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:1.7em;height:1lh;border:0;border-radius:0;transform:none;opacity:1;-webkit-mask:none;mask:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A85A11' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") left center/15px no-repeat}
/* Dot lists elsewhere in body copy (FAQ answers, callouts, nested lists): dot centred on line one */
body.st .content ul>li::before{top:calc(7px + .85em - 3px);top:calc(7px + .5lh - 3px)}
body.st .content ul ul>li::before{top:calc(7px + .85em - 2.5px);top:calc(7px + .5lh - 2.5px)}
/* Numbered lists: the number sits in a one-line box, vertically centred */
body.st .content ol:not(.st-steps-list)>li::before{top:7px;height:1.7em;height:1lh;display:inline-flex;align-items:center;line-height:1}
/* Check-mark lists keep their own one-line box (the dot rule above has equal weight and came later). */
body.st .entry-content > ul:not(.st-feature-list):not(.st-tools):not(.st-logo-grid):not(.st-clients):not([class*="krj-"]) > li::before,
body.st .st-subcard > ul > li::before{top:6px}
/* Contact details list: the icon tile centres on its two-line label and value. */
body.st .clist__item{align-items:center}
/* Sector boxes: the corner arrow is centred on the icon circle beside it (it sat 9px high). */
body.st .st-boxes:not(.st-boxes--places) .st-box__arrow{top:23px;height:46px;display:flex;align-items:center}
/* Pill links whose label wraps to two lines: rounded rectangle rather than a stretched pill, arrow
   kept at full size and centred on the label. */
body.st .st-link{border-radius:28px;line-height:1.35}
body.st .st-link .krj-icon{flex:none}
/* Numbered lists: the number's line box follows the item's line height so it centres on line one. */
body.st .content ol:not(.st-steps-list)>li::before{line-height:inherit}

/* 36. 404 page: the big "404" was white at 14% opacity (made for the old dark hero) and vanished on cream.
   Now a large serif numeral in the brand orange, shading to deep brown, with a thin gold rule under it. */
body.st .e404__mark{font-family:var(--st-serif);font-weight:700;font-size:clamp(6rem,17vw,11rem);line-height:.9;letter-spacing:-.02em;color:var(--st-orange);background:linear-gradient(180deg,var(--st-orange) 0%,var(--st-orange-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0 auto 18px;padding-bottom:14px;position:relative;width:max-content}
body.st .e404__mark::after{content:"";position:absolute;left:50%;bottom:0;width:72px;height:2px;margin-left:-36px;background:var(--st-gold);border-radius:2px}
@media (max-width:768px){body.st .e404__mark{font-size:clamp(5rem,26vw,7.5rem)}}
/* The eyebrow on the 404 page centres with the numeral and the heading. */
body.st .e404 .eyebrow{display:flex;justify-content:center;width:100%}

/* 37. Touch and readability on phones and tablets (responsive QA 2026-10-05).
   Tap targets at least 24px high (WCAG 2.2 AA 2.5.8), and no visible text under 12px. */
body.st .site-footer__links a,body.st .site-footer__legal a{display:inline-block;padding:4px 0}
body.st .crumbs a{display:inline-block;padding:4px 0}
body.st .cfacts dd a{display:inline-block;padding:2px 0}
body.st .site-footer__cookies{min-height:28px;padding:4px 0}
body.st .krj-tool input[type=checkbox],body.st .krj-tool input[type=radio]{width:20px;height:20px;accent-color:var(--st-orange-ink);flex:none}
body.st .side__hd,body.st .site-footer__hd,body.st .facts__hd,body.st .pill,body.st .card__kicker,body.st .st-tool__kind,
body.st .krj-tag,body.st .krj-metric__label,body.st .pcard__chip,body.st .bstats__list dt,body.st .cfacts dt,
body.st .clist__label,body.st .chip__n,body.st .termnav__link span,body.st .content thead th,body.st .tcard__cat{font-size:.75rem}
/* Phones held sideways (short screens): a compact sticky header leaves more room for the page. */
@media (max-height:500px) and (orientation:landscape){
  body.st .site-header__in{min-height:60px}
  body.st .logo__img{height:44px;width:auto}
}
/* Numbered lists: the item's own line height (resolved to px on the li) sizes the number's box, so a
   larger number font does not make the box taller than the text line. */
@property --st-li-lh{syntax:"<length>";inherits:true;initial-value:0px}
body.st .content ol:not(.st-steps-list)>li{--st-li-lh:1lh}
body.st .content ol:not(.st-steps-list)>li::before{height:var(--st-li-lh)}

/* 38. About page portrait: the full photo fills the 4:5 arch, positioned so the subject is centred
   (she sits at about 62% across the original) with her head clear of the curve. */
body.st .hero__portrait{aspect-ratio:4/5;overflow:hidden}
body.st .hero__portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 30%}
body.st .gstats dt{font-size:.75rem}

/* 39. Footer email and phone: the same hover as the other footer links (orange, underlined), and the
   icon beside each one deepens and nudges so the whole row responds. Keyboard focus gets the same. */
body.st .site-footer__contact li{transition:color .2s ease}
body.st .site-footer__contact a{display:inline-block;padding:3px 0;text-decoration:none;text-underline-offset:4px;transition:color .2s ease}
body.st .site-footer__contact .krj-icon{transition:transform .2s ease,color .2s ease}
body.st .site-footer__contact a:hover,body.st .site-footer__contact a:focus-visible{color:var(--st-orange-deep);text-decoration:underline;text-decoration-color:var(--st-gold)}
body.st .site-footer__contact li:hover .krj-icon,body.st .site-footer__contact li:focus-within .krj-icon{color:var(--st-orange-deep);transform:translateX(2px) scale(1.08)}
@media (prefers-reduced-motion:reduce){body.st .site-footer__contact .krj-icon{transition:none}body.st .site-footer__contact li:hover .krj-icon{transform:none}}

/* 40. Form field edges (QA 2026-10-06, WCAG 1.4.11 non-text contrast): field borders were 1.3 to 1.7:1
   against their background (#D6C8AC, the parent's slate #CBD5E1 on the tools, a 14% tint on the glossary
   search), so the edge of an empty box was hard to see. #8C7A66 is 3.3:1 or better on white, cream, the
   tool panel and the footer cream. Focus styles keep their own colour (:not(:focus)). */
body.st{--st-field-line:#8C7A66}
body.st input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=range]):not(:focus),
body.st select:not(:focus),body.st textarea:not(:focus){border-color:var(--st-field-line)}
/* The service choice cards hide the real checkbox, so their focus ring is the only sign of keyboard
   focus. It was a 25% tint (about 1.4:1); now the same solid outline as every other control. */
body.st .krj-choice:has(input:focus-visible){outline:3px solid var(--st-orange-ink);outline-offset:2px;box-shadow:none}
/* Links inside the gradient boxes (the "Next step" callout and the home cards) sit on #F0E5C5 at the
   gradient's darkest corner, where #A85A11 is 4.0:1. The deeper brand orange keeps them at 5.3:1 or better. */
body.st .st-callout a:not([class*="btn"]):not(.st-link),body.st .st-card a:not([class*="btn"]):not(.st-link){color:var(--st-orange-deep)}

/* 41. Home: figures, the businesses worked with, and case studies moved up (owner request 2026-10-07).
   Figures are Site facts; the logo strip reuses the parent's .marquee (pauses on hover, and stops
   moving for visitors who ask for reduced motion). Logos sit on white cards, as on her old site. */
body.st .st-stats{padding:0 0 clamp(36px,5vw,56px);margin-top:clamp(-56px,-3.5vw,-12px);position:relative;z-index:1}
body.st .st-stats__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--st-paper);border:1px solid var(--st-line);border-radius:18px;box-shadow:var(--st-shadow);overflow:hidden}
body.st .st-stats__list--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.st .st-stats__list--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.st .st-stats__list--1{grid-template-columns:minmax(0,1fr)}
body.st .st-stats__item{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.6vw,34px) clamp(18px,2.4vw,32px);border-left:1px solid var(--st-line);position:relative}
body.st .st-stats__item:first-child{border-left:0}
body.st .st-stats__value{font-family:var(--st-serif);font-weight:700;font-size:clamp(2.3rem,1.5rem + 2.6vw,3.5rem);line-height:1;color:var(--st-orange);letter-spacing:-.01em}
body.st .st-stats__label{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brown-strong);line-height:1.35}
body.st .st-stats__sub{font-size:.95rem;color:var(--st-muted);line-height:1.4}
@media (max-width:900px){
  body.st .st-stats__list,body.st .st-stats__list--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.st .st-stats__item:nth-child(odd){border-left:0}
  body.st .st-stats__item:nth-child(n+3){border-top:1px solid var(--st-line)}
}
@media (max-width:360px){body.st .st-stats__value{font-size:2rem}body.st .st-stats__label{font-size:.72rem;letter-spacing:.08em}}

body.st .st-logos{background:var(--st-surface);border-block:1px solid var(--st-line);padding:clamp(26px,3.5vw,40px) 0}
body.st .st-logos__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,22px)}
body.st .st-logos__title{margin:0;font-family:var(--st-sans);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--st-brown-strong)}
body.st .st-logos__more{display:inline-flex;align-items:center;gap:6px;font-size:.92rem;font-weight:600;color:var(--st-orange-deep);text-decoration:none}
body.st .st-logos__more .krj-icon{width:16px;height:16px;transition:transform .2s ease}
body.st .st-logos__more:hover,body.st .st-logos__more:focus-visible{text-decoration:underline;text-underline-offset:4px}
body.st .st-logos__more:hover .krj-icon{transform:translateX(3px)}
body.st .st-logos__marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
body.st .st-logos__marquee .marquee__track{gap:14px;padding:4px 0}
body.st .st-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:150px;height:84px;padding:10px 16px;background:var(--st-paper);border:1px solid var(--st-line);border-radius:var(--st-radius)}
body.st .st-logo img{display:block;max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain}
body.st .st-logo--text{font-size:1rem;font-weight:500;color:var(--st-muted);white-space:nowrap}
@media (max-width:600px){body.st .st-logo{width:124px;height:72px;padding:8px 12px}body.st .st-logo img{max-height:50px}}
@media (prefers-reduced-motion:reduce){body.st .st-logos__marquee{-webkit-mask-image:none;mask-image:none}body.st .st-logos__marquee .marquee__track{padding-bottom:10px}}
/* The strip is the one band that moves (the parent's other marquees stay still, see 2). Motion only
   for visitors who allow it; hovering stops it (owner decision 2026-10-08: no Pause button). */
@media (prefers-reduced-motion:no-preference){
  body.st .st-logos__marquee .marquee__track{animation:krj-marquee 60s linear infinite!important}
  body.st .st-logos__marquee:hover .marquee__track{animation-play-state:paused!important}
}
/* 42. Client logos in page bodies (owner request 2026-10-08): the logo replaces the tick tile on a
   client's feature card, a list of client names becomes a logo grid, and a paragraph naming several
   clients gets a row of their logos (inc/content-design.php, st_design_client_logos). */
body.st .content ul.st-feature-list > li.st-feature--logo::before{display:none}
body.st .st-feature-logo{display:inline-flex;align-items:center;justify-content:center;min-width:120px;height:72px;padding:8px 14px;margin:0 0 16px;background:#fff;border:1px solid var(--st-line);border-radius:12px}
body.st .st-feature-logo img{display:block;max-height:54px;max-width:150px;width:auto;height:auto;object-fit:contain}
body.st .st-feature-logo.is-text{font-weight:500;color:var(--st-muted)}
body.st .content .st-logo-row{display:flex;flex-wrap:wrap;gap:12px;margin:-4px 0 28px}
/* The logo now comes first in the card, so the name keeps its title style explicitly. */
body.st .st-feature-logo{display:flex;width:fit-content;max-width:100%}
body.st .content ul.st-feature-list > li.st-feature--logo > strong{display:block;font-family:var(--st-serif);font-size:1.15rem;line-height:1.3;margin-bottom:6px;color:var(--st-brown-strong)}
/* 43. Client cards and the client logo grid (owner request 2026-10-08: "make better UI to show the
   clients"). A client card list (ul.st-clients, see inc/content-design.php) is a grid of white cards: the
   logo on a white panel at its natural size (the files are small, so never upscaled), the name in the
   serif, the sector as a small label, what I did, and the case-study link pinned to the bottom so the
   links line up across a row. A plain list of client names is a grid of logo tiles with the name in a
   strip beneath. Neither tile lifts on hover unless it holds a link. */
body.st .content ul.st-clients{list-style:none;margin:22px 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
body.st .content ul.st-clients > li{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:0 22px 22px;background:var(--st-paper);border:1px solid var(--st-line);border-radius:var(--st-radius);overflow:hidden;font-size:.95rem;line-height:1.6;color:var(--st-brown);transition:border-color .2s ease,box-shadow .2s ease}
body.st .content ul.st-clients > li::before,body.st .content ul.st-clients > li::marker{content:none;display:none}
body.st .content ul.st-clients > li:has(.st-client__link):hover{border-color:var(--st-gold);box-shadow:var(--st-shadow)}
body.st .st-client__logo{display:flex;align-items:center;justify-content:center;align-self:stretch;height:108px;margin:0 -22px 18px;padding:18px 24px;background:#fff;border-bottom:1px solid var(--st-line-soft)}
body.st .st-client__logo img{display:block;max-height:64px;max-width:100%;width:auto;height:auto;object-fit:contain}
body.st .st-client__logo.is-text{font-family:var(--st-serif);font-size:1.3rem;font-weight:600;color:var(--st-brown-strong)}
body.st .content .st-client__name{display:block;font-family:var(--st-serif);font-size:1.2rem;font-weight:600;line-height:1.3;color:var(--st-brown-strong)}
body.st .st-client__sector{display:block;margin:6px 0 10px;font-size:.74rem;font-weight:600;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--st-orange-deep)}
body.st .content a.st-client__link{display:block;margin-top:auto;padding-top:14px;font-weight:600;color:var(--st-orange-deep);text-decoration:none}
body.st .content a.st-client__link::after{content:"\00a0\2192"}
body.st .content a.st-client__link:hover,body.st .content a.st-client__link:focus-visible{color:var(--st-orange-deep);text-decoration:underline;text-underline-offset:4px}
body.st .content ul.st-logo-grid{list-style:none;margin:22px 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
body.st .content ul.st-logo-grid > li{display:flex;flex-direction:column;align-items:stretch;margin:0;padding:0;background:#fff;border:1px solid var(--st-line);border-radius:var(--st-radius);overflow:hidden;text-align:center}
body.st .content ul.st-logo-grid > li::before,body.st .content ul.st-logo-grid > li::marker{content:none;display:none}
body.st .st-logo-grid__logo{display:flex;align-items:center;justify-content:center;height:100px;padding:16px 18px;background:#fff}
body.st .st-logo-grid__logo img{display:block;max-height:64px;max-width:100%;width:auto;height:auto;object-fit:contain}
body.st .st-logo-grid__logo.is-text{font-family:var(--st-serif);font-size:1.15rem;font-weight:600;color:var(--st-brown-strong)}
body.st .st-logo-grid__name{display:flex;align-items:center;justify-content:center;flex:1 0 auto;padding:11px 12px 12px;background:var(--st-cream);border-top:1px solid var(--st-line-soft);font-size:.9rem;font-weight:500;line-height:1.35;color:var(--st-brown-strong)}
@media (max-width:600px){body.st .content ul.st-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body.st .st-logo-grid__logo{height:84px;padding:12px}body.st .st-logo-grid__name{font-size:.85rem;padding:9px 8px 10px}}
@media (prefers-reduced-motion:reduce){body.st .content ul.st-clients > li{transition:none}}
body.st .st-monogram{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1.5px solid var(--st-gold);font-family:var(--st-serif);font-size:1.35rem;font-weight:600;letter-spacing:.04em;color:var(--st-orange-deep)}
/* 45. Testimonial cards (owner request 2026-10-08, modelled on the card from her old site): a large serif
   quote mark, the photo in a thin gold ring (echoing her logo), the name in orange with the role under it,
   and no empty band above the quote. One look on the home page, /reviews/ and anywhere else the
   [krj_testimonials] block appears. The featured quote on /reviews/ keeps its larger italic serif. */
body.st .krj-testimonial{padding:clamp(24px,3vw,34px);gap:0}
body.st .krj-testimonial__quote,body.st .content blockquote.krj-testimonial__quote{position:relative;flex:1;margin:0;padding:46px 0 0;border:0;background:none;font-family:var(--st-sans);font-style:normal;font-size:1.02rem;line-height:1.7;color:var(--st-brown)}
body.st .krj-testimonial__quote::before{content:"\201C";content:"\201C" / "";position:absolute;top:-8px;left:-3px;font-family:var(--st-serif);font-size:4.4rem;font-style:normal;font-weight:700;line-height:1;color:var(--st-orange)}
body.st .krj-testimonial__quote p{margin:0 0 .8em}
body.st .krj-testimonial__quote p:last-child{margin:0}
body.st .krj-testimonials--featured .krj-testimonial:first-child .krj-testimonial__quote{padding-top:58px;font-family:var(--st-serif);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.55;color:var(--st-brown-strong)}
body.st .krj-testimonials--featured .krj-testimonial:first-child .krj-testimonial__quote::before{font-size:5.6rem}
body.st .krj-testimonial__by{display:grid;grid-template-columns:minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--st-line-soft);font-size:.9rem}
body.st .krj-testimonial__by:has(.krj-testimonial__photo){grid-template-columns:auto minmax(0,1fr)}
body.st .krj-testimonial__photo,body.st .content img.krj-testimonial__photo{grid-row:1/span 2;width:64px;height:64px;max-width:none;margin:0;padding:3px;border:1.5px solid var(--st-gold);border-radius:50%;background:var(--st-paper);object-fit:cover;box-shadow:none}
body.st .krj-testimonial__name{align-self:end;font-family:var(--st-serif);font-size:1.12rem;font-weight:600;line-height:1.25;color:var(--st-orange-ink)}
body.st .krj-testimonial__meta{align-self:start;font-size:.88rem;line-height:1.4;color:var(--st-muted)}
body.st .krj-testimonial__by:has(.krj-testimonial__photo) .krj-testimonial__name,body.st .krj-testimonial__by:has(.krj-testimonial__photo) .krj-testimonial__meta{grid-column:2}
body.st .krj-testimonial__source{grid-column:1/-1;margin-top:6px}

/* 44. Case study pages (owner request 2026-10-08: make the individual case study pages "a bit more better",
   all 16 of them). Child single-case_study.php + inc/case-study.php. A results-first hero (title, results at
   a glance or the project image, summary, project facts, one action), the results image as framed evidence,
   the story with numbered stages (CSS counters on the unchanged body), one closing card (key takeaway and
   services used), the FAQs in the same column, then other case studies. Every rule is scoped to
   body.st.single-case_study, so the home page and the /case-studies/ archive cards are untouched.
   Bands: phone <760 (the base rules), tablet 760-1099, desktop >=1100, small phone <400. */

/* 44.1 Hero */
body.st.single-case_study .st-cs-hero{padding:clamp(24px,3.5vw,48px) 0 clamp(36px,4.5vw,64px)}
body.st.single-case_study .st-cs-hero--has-evidence{border-bottom:0}
body.st.single-case_study .st-cs-hero__in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"crumbs" "head" "aside" "lede" "facts" "actions";align-items:start}
body.st.single-case_study .st-cs-hero__in>.crumbs{grid-area:crumbs;min-width:0;margin:0 0 18px}
body.st.single-case_study .st-cs-hero__head{grid-area:head;min-width:0}
body.st.single-case_study .st-cs-hero__aside{grid-area:aside;min-width:0;margin-top:24px}
body.st.single-case_study .st-cs-hero__lede{grid-area:lede;margin:24px 0 0;max-width:60ch}
body.st.single-case_study .st-cs-hero__in>.st-cs-facts{grid-area:facts}
body.st.single-case_study .st-cs-hero__aside>.st-cs-facts{margin-top:22px}
body.st.single-case_study .st-cs-hero__actions{grid-area:actions;margin:26px 0 0}
body.st.single-case_study .st-cs-eyebrow{margin:0 0 14px;flex-wrap:wrap;column-gap:10px;row-gap:4px}
body.st.single-case_study .st-cs-title{margin:0;max-width:24ch;font-size:clamp(1.85rem,1.35rem + 2.2vw,3rem);line-height:1.1;text-wrap:balance;overflow-wrap:break-word;font-variant-numeric:lining-nums}
/* Breadcrumb on one line: the current page (the H1 repeated) is cut with an ellipsis, and on phones it is
   visually hidden but still read by screen readers. */
body.st.single-case_study .st-cs-hero .crumbs ol{flex-wrap:nowrap;align-items:center;min-width:0}
body.st.single-case_study .st-cs-hero .crumbs li{flex:none;white-space:nowrap}
body.st.single-case_study .st-cs-hero .crumbs li:last-child{flex:0 1 auto;display:flex;align-items:center;min-width:0}
body.st.single-case_study .st-cs-hero .crumbs [aria-current]{display:block;min-width:0;padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:759.98px){
  body.st.single-case_study .st-cs-hero .crumbs li:last-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (min-width:1100px){
  body.st.single-case_study .st-cs-hero__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr auto auto auto auto 1fr;grid-template-areas:"crumbs crumbs" ". aside" "head aside" "lede aside" "facts aside" "actions aside" ". aside";column-gap:clamp(40px,5vw,72px)}
  body.st.single-case_study .st-cs-hero__aside{margin-top:0;align-self:center}
  body.st.single-case_study .st-cs-title{max-width:none}
  body.st.single-case_study .st-cs-hero--solo .st-cs-hero__in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"crumbs" "head" "lede" "facts" "actions"}
  body.st.single-case_study .st-cs-hero--solo .st-cs-title{max-width:22ch}
}

/* 44.2 Project facts */
body.st.single-case_study .st-cs-facts{display:flex;flex-wrap:wrap;gap:16px 36px;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--st-line)}
body.st.single-case_study .st-cs-fact{min-width:0;max-width:100%}
body.st.single-case_study .st-cs-fact dt{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--st-brown-soft)}
body.st.single-case_study .st-cs-fact dd{margin:4px 0 0;font-size:1rem;font-weight:500;line-height:1.4;color:var(--st-brown-strong);overflow-wrap:break-word}
body.st.single-case_study .st-cs-fact--client dd{display:flex;align-items:center;gap:10px}
body.st.single-case_study .st-cs-fact__logo{flex:none;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:4px 8px;background:#fff;border:1px solid var(--st-line);border-radius:8px}
body.st.single-case_study .st-cs-fact__logo img{display:block;width:auto;height:auto;max-width:84px;max-height:26px}

/* 44.3 Results at a glance */
body.st.single-case_study .st-cs-results{background:var(--st-paper);border:1px solid var(--st-line);border-top:3px solid var(--st-gold);border-radius:18px;box-shadow:var(--st-shadow);padding:clamp(18px,2.4vw,28px) clamp(18px,2.6vw,32px) clamp(6px,1vw,10px)}
body.st.single-case_study .st-cs-results__title{margin:0 0 4px;font-family:var(--st-sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;color:var(--st-brown-soft)}
body.st.single-case_study .st-cs-results__list{--st-cs-cols:1;container-type:inline-size;list-style:none;margin:0;padding:0}
body.st.single-case_study .st-cs-result{margin:0;padding:16px 0 18px;border-top:1px solid var(--st-line-soft)}
body.st.single-case_study .st-cs-result:first-child{border-top:0}
body.st.single-case_study .st-cs-result::before{content:none}
body.st.single-case_study .st-cs-result__value{display:block;font-family:var(--st-serif);font-weight:700;color:var(--st-orange);line-height:1.04;letter-spacing:-.01em;font-variant-numeric:lining-nums;overflow-wrap:break-word;text-wrap:balance;font-size:clamp(1.75rem,1.3rem + 1.8vw,3.25rem);font-size:clamp(1.75rem,calc(18cqi / var(--st-cs-cols)),3.25rem)}
body.st.single-case_study .st-cs-result__value.is-long{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.75rem);font-size:clamp(1.5rem,calc(13cqi / var(--st-cs-cols)),2.75rem)}
/* One size per card: when any figure is long, every value in that card takes the long size, so a long lead
   figure ("6.36 million") never looks smaller than the shorter figures beside it. A value with no digit
   ("Clear visibility lift") is a phrase, not a figure: once the template marks it .is-text it is set smaller
   and never sets the size of the figures beside it. */
body.st.single-case_study .st-cs-results__list:has(.is-long:not(.is-text)) .st-cs-result__value{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.75rem);font-size:clamp(1.5rem,calc(13cqi / var(--st-cs-cols)),2.75rem)}
body.st.single-case_study .st-cs-results__list .st-cs-result__value.is-text{font-size:clamp(1.3rem,1.15rem + .6vw,1.75rem);line-height:1.2}
body.st.single-case_study .st-cs-result__label{display:block;margin-top:8px;max-width:42ch;font-size:1rem;line-height:1.5;color:var(--st-brown);text-wrap:pretty}
@media (min-width:760px) and (max-width:1099.98px){
  body.st.single-case_study .st-cs-results--2 .st-cs-results__list{--st-cs-cols:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.st.single-case_study .st-cs-results--3 .st-cs-results__list{--st-cs-cols:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  body.st.single-case_study .st-cs-results--2 .st-cs-result,body.st.single-case_study .st-cs-results--3 .st-cs-result{border-top:0;border-left:1px solid var(--st-line-soft);padding:12px 20px 18px}
  body.st.single-case_study .st-cs-results--2 .st-cs-result:first-child,body.st.single-case_study .st-cs-results--3 .st-cs-result:first-child{border-left:0;padding-left:0}
  body.st.single-case_study .st-cs-results--2 .st-cs-result:last-child,body.st.single-case_study .st-cs-results--3 .st-cs-result:last-child{padding-right:0}
  /* Side by side, the values share one bottom line and the labels one top line, even when a long value
     ("6.36 million") is set smaller than its neighbours or wraps to two lines. */
  @supports (grid-template-rows:subgrid){
    body.st.single-case_study .st-cs-results--2 .st-cs-results__list,body.st.single-case_study .st-cs-results--3 .st-cs-results__list{grid-template-rows:auto auto}
    body.st.single-case_study .st-cs-results--2 .st-cs-result,body.st.single-case_study .st-cs-results--3 .st-cs-result{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
    body.st.single-case_study .st-cs-results--2 .st-cs-result__value,body.st.single-case_study .st-cs-results--3 .st-cs-result__value{align-self:end}
  }
  /* One metric: value and label in a row; the hairline between them runs the full height of the row. */
  body.st.single-case_study .st-cs-results--1 .st-cs-result{display:flex;align-items:stretch;gap:28px}
  body.st.single-case_study .st-cs-results--1 .st-cs-result__value{flex:none;align-self:center;max-width:45%}
  body.st.single-case_study .st-cs-results--1 .st-cs-result__label{display:flex;align-items:center;margin-top:0;padding:6px 0 6px 28px;border-left:1px solid var(--st-line-soft)}
  body.st.single-case_study .st-cs-result__label{font-size:.95rem}
}

/* 44.4 The results image: framed evidence, never upscaled, never cropped */
body.st.single-case_study .st-cs-evidence{padding:0 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--st-line);background:linear-gradient(to bottom,var(--st-cream) 0,var(--st-cream) clamp(56px,8vw,120px),var(--st-surface) clamp(56px,8vw,120px),var(--st-surface) 100%)}
body.st.single-case_study .st-cs-shot{margin:0 auto;width:100%;max-width:min(100%,calc(min(var(--st-cs-w,1040px),1040px) + 22px),calc(min(72vh,620px) * var(--st-cs-r,1.6) + 22px))}
body.st.single-case_study .st-cs-shot--hero{margin:0;max-width:min(100%,calc(var(--st-cs-w,1040px) + 22px),calc(420px * var(--st-cs-r,1.6) + 22px))}
body.st.single-case_study .st-cs-shot__frame{background:var(--st-paper);border:1px solid var(--st-line);border-radius:16px;padding:clamp(6px,1vw,10px);box-shadow:0 30px 60px -40px rgba(46,40,32,.55)}
body.st.single-case_study .st-cs-shot__img{display:block;width:100%;height:auto;border-radius:8px}
body.st.single-case_study .st-cs-shot__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:12px;padding:0 4px;font-size:.88rem;line-height:1.5;color:var(--st-muted)}
body.st.single-case_study .st-cs-shot__kicker{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-brown-soft)}
body.st.single-case_study .st-cs-shot__full{display:inline-block;margin-left:auto;padding:4px 0;font-weight:500;color:var(--st-orange-deep);text-decoration:underline;text-decoration-color:var(--st-gold);text-decoration-thickness:1px;text-underline-offset:3px}
body.st.single-case_study .st-cs-shot__full:hover,body.st.single-case_study .st-cs-shot__full:focus-visible{color:var(--st-orange-deep);text-decoration-color:currentColor}

/* 44.5 The story: lede, numbered stages, result lists on white */
body.st.single-case_study .st-cs-body{padding:clamp(44px,6vw,80px) 0 clamp(56px,7vw,88px)}
body.st.single-case_study .st-cs-article{counter-reset:st-cs-stage}
body.st.single-case_study .st-cs-article>p:first-child{font-size:clamp(1.12rem,1.05rem + .3vw,1.25rem);line-height:1.65;color:var(--st-brown-strong)}
body.st.single-case_study .st-cs-article>h2{counter-increment:st-cs-stage;display:flex;align-items:center;gap:14px;margin:clamp(40px,5vw,56px) 0 20px;padding:clamp(28px,3.5vw,40px) 0 0;border-top:1px solid var(--st-line);font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);line-height:1.2;font-variant-numeric:lining-nums}
body.st.single-case_study .st-cs-article>h2::before{content:counter(st-cs-stage,decimal-leading-zero);content:counter(st-cs-stage,decimal-leading-zero) / "";position:static;flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:11px;transform:none;background:var(--st-band);color:var(--st-orange-deep);font-family:var(--st-serif);font-size:1rem;font-style:normal;font-weight:700;line-height:1;letter-spacing:0;font-variant-numeric:lining-nums}
body.st.single-case_study .st-cs-article>h2#results::before{background:var(--st-orange-ink);color:#fff}
@media (min-width:760px){
  body.st.single-case_study .st-cs-article>h2{gap:16px}
  body.st.single-case_study .st-cs-article>h2::before{width:44px;height:44px;border-radius:12px;font-size:1.05rem}
}
body.st.single-case_study .st-cs-article>ul:not(.st-feature-list):not(.st-tools):not(.st-logo-grid):not(.st-clients):not([class*="krj-"]){background:var(--st-paper);box-shadow:0 18px 40px -34px rgba(46,40,32,.55)}
/* Two-column card grids with an odd count (3 or 5 feature cards, 3 subcards): the last card takes the whole
   row instead of sitting beside an empty cell (QA 2026-10-08). Harmless in the one-column phone grid. */
body.st.single-case_study .st-cs-article ul.st-feature-list>li:last-child:nth-child(odd),body.st.single-case_study .st-cs-article .st-feature-list--p>p:last-child:nth-child(odd),body.st.single-case_study .st-cs-article .st-subgrid--2>:last-child:nth-child(odd){grid-column:1/-1}

/* 44.6 Closing card: key takeaway and services used */
body.st.single-case_study .st-cs-close{margin:clamp(40px,5vw,56px) 0 0;padding:clamp(22px,3.5vw,34px) clamp(20px,3.5vw,36px);background:var(--st-paper);border:1px solid var(--st-line);border-top:3px solid var(--st-gold);border-radius:18px;box-shadow:var(--st-shadow)}
body.st.single-case_study .st-cs-close__part+.st-cs-close__part{margin-top:24px;padding-top:22px;border-top:1px solid var(--st-line-soft)}
body.st.single-case_study .st-cs-close__label{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-family:var(--st-sans);font-size:.75rem;font-weight:600;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--st-brown-soft)}
body.st.single-case_study .st-cs-close__label::before{content:"";flex:none;width:28px;height:1px;background:var(--st-gold)}
body.st.single-case_study .st-cs-takeaway__text{margin:0;font-family:var(--st-serif);font-style:italic;font-weight:500;font-size:clamp(1.2rem,1.08rem + .55vw,1.5rem);line-height:1.45;color:var(--st-brown-strong);text-wrap:pretty}
body.st.single-case_study .st-cs-services{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
body.st.single-case_study .st-cs-services>li{margin:0;padding:0;max-width:100%}
body.st.single-case_study .st-cs-services>li::before{content:none}
body.st.single-case_study .st-cs-service{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:44px;padding:9px 16px 9px 18px;border:1px solid var(--st-line);border-radius:22px;background:var(--st-cream);color:var(--st-brown-strong);font-size:.95rem;font-weight:500;line-height:1.35;text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
body.st.single-case_study .st-cs-service .krj-icon{flex:none;width:16px;height:16px;color:var(--st-orange-ink);transition:transform .2s ease}
body.st.single-case_study .st-cs-service:hover,body.st.single-case_study .st-cs-service:focus-visible{border-color:var(--st-orange-ink);background:#fff;color:var(--st-brown-strong)}
body.st.single-case_study .st-cs-service:hover .krj-icon,body.st.single-case_study .st-cs-service:focus-visible .krj-icon{transform:translateX(3px)}

/* 44.7 FAQs in the reading column */
body.st.single-case_study .st-cs-faq{margin-top:clamp(48px,6vw,72px)}
body.st.single-case_study .st-cs-faq .krj-faq__heading{margin:0 0 10px;font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem)}
body.st.single-case_study .st-cs-faq .krj-faq__heading::before{content:"";display:block;width:40px;height:1px;margin-bottom:18px;background:var(--st-gold)}

/* 44.8 Other case studies (page-scoped: the home page's .krj-case cards are untouched).
   QA 2026-10-08: the headline result sits on the white card under the screenshot, not over it (white text
   on light Search Console screenshots measured 1.9:1); the screenshot keeps the 12:7 ratio of its card
   crop, so object-fit adds no further crop; on desktop the cards share subgrid rows, so results, tags,
   titles, excerpts and links line up; 600-1099 is one row card per line; under 600 the screenshot is a
   thumbnail beside the client and result, which keeps the three cards compact without dropping anything. */
body.st.single-case_study .st-cs-more{border-top:1px solid var(--st-line)}
body.st.single-case_study .st-cs-more .krj-cases__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
body.st.single-case_study .st-cs-more .st-cs-more__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.st.single-case_study .st-cs-more .st-cs-more__grid--1{grid-template-columns:minmax(0,1fr);max-width:420px}
body.st.single-case_study .st-cs-more .krj-case__metrics{display:none}
body.st.single-case_study .st-cs-more .krj-case__media{display:flex;flex-direction:column;aspect-ratio:auto;background:var(--st-paper)}
body.st.single-case_study .st-cs-more .krj-case__media::after{content:none}
body.st.single-case_study .st-cs-more .krj-case__media img{flex:none;height:auto;aspect-ratio:12/7;object-fit:cover;object-position:left top;background:var(--st-band)}
body.st.single-case_study .st-cs-more .krj-case__headline{position:relative;inset:auto;z-index:1;display:flex;align-items:baseline;align-content:flex-start;flex-wrap:wrap;gap:2px 10px;padding:18px 24px 0;background:var(--st-paper);border-top:1px solid var(--st-line);color:var(--st-muted)}
body.st.single-case_study .st-cs-more .krj-case__headline strong{font-size:1.85rem;line-height:1.1;color:var(--st-orange);font-variant-numeric:lining-nums}
body.st.single-case_study .st-cs-more .krj-case__headline span{font-size:.9rem;line-height:1.4;opacity:1;color:var(--st-muted)}
body.st.single-case_study .st-cs-more .krj-case__body{padding-top:16px}
body.st.single-case_study .st-cs-more .krj-case__excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;flex:none}
body.st.single-case_study .st-cs-more .krj-case__link{margin-top:auto}
body.st.single-case_study .st-cs-more .krj-tag--market{background:var(--st-surface);color:var(--st-brown-strong)}
body.st.single-case_study .st-cs-more .krj-case__title{font-variant-numeric:lining-nums}
body.st.single-case_study .st-cs-more__all{margin:clamp(28px,3.5vw,40px) 0 0;text-align:center}
@media (min-width:1100px){
  @supports (grid-template-rows:subgrid){
    body.st.single-case_study .st-cs-more .krj-cases__grid{row-gap:0}
    body.st.single-case_study .st-cs-more .krj-case{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
    body.st.single-case_study .st-cs-more .krj-case__media{display:grid;grid-row:1/span 2;grid-template-rows:subgrid;row-gap:0}
    body.st.single-case_study .st-cs-more .krj-case__media img{grid-row:1}
    body.st.single-case_study .st-cs-more .krj-case__headline{grid-row:2}
    body.st.single-case_study .st-cs-more .krj-case__body{display:grid;grid-row:3/span 4;grid-template-rows:subgrid;row-gap:0;align-items:start}
    body.st.single-case_study .st-cs-more .krj-case__tags{grid-row:1;margin:0 0 14px}
    body.st.single-case_study .st-cs-more .krj-case__title{grid-row:2;margin:0 0 10px}
    body.st.single-case_study .st-cs-more .krj-case__excerpt{grid-row:3;margin:0 0 18px}
    body.st.single-case_study .st-cs-more .krj-case__link{grid-row:4;justify-self:start;margin-top:0}
  }
}
@media (max-width:1099.98px){
  body.st.single-case_study .st-cs-more .krj-cases__grid{grid-template-columns:minmax(0,1fr);gap:18px;max-width:none}
}
@media (min-width:600px) and (max-width:1099.98px){
  body.st.single-case_study .st-cs-more .krj-case--media{flex-direction:row}
  body.st.single-case_study .st-cs-more .krj-case--media .krj-case__media{flex:0 0 42%;border-right:1px solid var(--st-line)}
  body.st.single-case_study .st-cs-more .krj-case__headline{padding:16px 22px 20px}
  body.st.single-case_study .st-cs-more .krj-case__body{padding:22px 24px}
}
@media (max-width:599.98px){
  body.st.single-case_study .st-cs-more .krj-cases__grid{gap:14px}
  body.st.single-case_study .st-cs-more .krj-case__media{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:14px;padding:16px 16px 0}
  body.st.single-case_study .st-cs-more .krj-case__media img{grid-column:1;grid-row:1/-1;align-self:center;border:1px solid var(--st-line);border-radius:10px}
  body.st.single-case_study .st-cs-more .krj-case:hover .krj-case__media img{transform:none}
  body.st.single-case_study .st-cs-more .krj-case__client{position:static;grid-column:2;grid-row:2;justify-self:start;margin:0 0 4px;padding:0;background:none;border-radius:0;box-shadow:none;font-size:.75rem;letter-spacing:.06em;line-height:1.35;text-transform:uppercase;color:var(--st-brown-soft)}
  body.st.single-case_study .st-cs-more .krj-case__headline{grid-column:2;grid-row:3;flex-direction:column;align-items:flex-start;gap:2px;padding:0;background:none;border:0}
  body.st.single-case_study .st-cs-more .krj-case__headline strong{font-size:1.5rem}
  body.st.single-case_study .st-cs-more .krj-case__headline span{font-size:.82rem;line-height:1.35}
  body.st.single-case_study .st-cs-more .krj-case__body{gap:10px;padding:14px 16px 18px}
  body.st.single-case_study .st-cs-more .krj-case__title,body.st.single-case_study .st-cs-more .krj-case__title a{font-size:1.12rem}
}

/* 44.9 Small phones */
@media (max-width:399.98px){
  body.st.single-case_study .st-cs-results{padding:16px 16px 4px}
  body.st.single-case_study .st-cs-facts{column-gap:24px}
  body.st.single-case_study .st-cs-article>h2{gap:12px;font-size:1.4rem}
  body.st.single-case_study .st-cs-article>h2::before{width:36px;height:36px;border-radius:10px;font-size:.95rem}
  body.st.single-case_study .st-cs-close{padding:20px 18px}
  body.st.single-case_study .st-cs-service{padding:8px 14px 8px 16px;font-size:.92rem}
}

/* 44.10 Motion: the only movement is the 3px arrow nudge on the service links */
@media (prefers-reduced-motion:reduce){
  body.st.single-case_study .st-cs-service,body.st.single-case_study .st-cs-service .krj-icon{transition:none}
  body.st.single-case_study .st-cs-service:hover .krj-icon,body.st.single-case_study .st-cs-service:focus-visible .krj-icon{transform:none}
}
/* 44b. Case study facts strip (owner feedback 2026-10-08: "it looks little bit not fitted properly"). Client,
   sector, market and timeframe sit in one white rounded strip of equal-height cells with hairline dividers
   (the 1px gap shows the strip's background as the divider, so wrapped rows never leave an empty cell),
   every value on the same line, and the client logo as a small mark beside the name instead of a boxed tile.
   QA 2026-10-08: rows are predictable, so no cell is ever left alone stretched across a row. The strip is its
   own size container: 512px and wider, every fact shares one row (long values wrap inside their cell);
   320-511px with three or four facts, the client runs across the top and the rest share the row below;
   under 320px (and without container query support) one fact per row, label left, values in one column.
   Labels are 12px, the site's minimum (section 37). */
body.st.single-case_study .st-cs-hero .st-cs-facts{--st-cs-n:1;container:st-cs-facts / inline-size;display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:1px;margin:28px 0 0;padding:0;background:var(--st-line-soft);border:1px solid var(--st-line);border-radius:var(--st-radius);overflow:hidden;box-shadow:0 1px 2px rgba(46,40,32,.04)}
body.st.single-case_study .st-cs-hero .st-cs-facts:has(>.st-cs-fact:nth-child(3)){--st-cs-n:2}
body.st.single-case_study .st-cs-hero .st-cs-facts:has(>.st-cs-fact:nth-child(4)){--st-cs-n:3}
body.st.single-case_study .st-cs-hero .st-cs-fact{grid-column:1;display:grid;grid-template-columns:5.75rem minmax(0,1fr);column-gap:12px;align-items:center;min-width:0;max-width:none;margin:0;padding:10px 14px;background:var(--st-paper)}
body.st.single-case_study .st-cs-hero .st-cs-fact dt{font-size:.75rem;letter-spacing:.14em;line-height:1.4}
body.st.single-case_study .st-cs-hero .st-cs-fact dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;min-height:24px;margin:0;font-size:1rem;font-weight:600;line-height:1.35}
body.st.single-case_study .st-cs-hero .st-cs-fact--client dd>span:not(.st-cs-fact__logo){flex:1 1 100%}
body.st.single-case_study .st-cs-hero .st-cs-fact__logo{flex:0 .05 auto;min-width:0;max-width:72px;height:auto;padding:0;background:none;border:0;border-radius:0}
body.st.single-case_study .st-cs-hero .st-cs-fact__logo img{max-width:100%;max-height:24px}
@container st-cs-facts (min-width:20rem){
  body.st.single-case_study .st-cs-hero .st-cs-fact{grid-column:auto;grid-row:1;display:block;padding:14px 16px 15px}
  body.st.single-case_study .st-cs-hero .st-cs-fact dd{flex-wrap:nowrap;column-gap:10px;min-height:28px;margin-top:6px}
  body.st.single-case_study .st-cs-hero .st-cs-fact--client dd>span:not(.st-cs-fact__logo){flex:0 1 auto}
}
@container st-cs-facts (min-width:20rem) and (max-width:31.99rem){
  body.st.single-case_study .st-cs-hero .st-cs-fact{padding:12px 12px 13px}
  body.st.single-case_study .st-cs-hero .st-cs-facts:has(>.st-cs-fact:nth-child(3))>.st-cs-fact--client{grid-row:1;grid-column:1 / span var(--st-cs-n)}
  body.st.single-case_study .st-cs-hero .st-cs-facts:has(>.st-cs-fact:nth-child(3)):has(>.st-cs-fact--client)>.st-cs-fact:not(.st-cs-fact--client){grid-row:2}
}
/* 44c. Case study accessibility fixes (QA 2026-10-08). Site-wide where the defect is in a shared component.
   FAQ focus (WCAG 2.4.7): the parent's .krj-faq__item{overflow:hidden} clipped the whole 3px focus ring of its
   summary, so a keyboard user saw nothing. The child already removes the item's radius and fill (section 10),
   so the clip did nothing else. Focus also takes the hover colour (no movement). */
body.st .krj-faq__item{overflow:visible}
body.st .krj-faq__q:focus-visible{color:var(--st-orange-ink)}
/* 44d. Phones (final review 2026-10-08): the result figures were 52px against a 30px H1, so the numbers outranked the
   title and pushed the summary and button down. Under 760px they are scaled to sit just above the H1. */
@media (max-width:759.98px){
  body.st.single-case_study .st-cs-results .st-cs-results__list .st-cs-result .st-cs-result__value:not(.is-text){font-size:clamp(1.85rem,1.5rem + 1.6vw,2.15rem)}
  body.st.single-case_study .st-cs-results .st-cs-results__list .st-cs-result .st-cs-result__value.is-text{font-size:clamp(1.25rem,1.1rem + .8vw,1.45rem)}
}