/*
Theme Name: Online Therapy Works
Theme URI: https://onlinetherapyworks.ie/
Author: BeFound
Author URI: https://befound.ie/
Description: Bright, warm custom theme for Online Therapy Works — online therapy across Ireland. Coral, sunny yellow, teal and lilac on warm white, with an illustrated hero. Built from the approved 2026-08 homepage design.
Version: 0.6.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: online-therapy-works
*/

/* ============ Tokens ============ */
:root{
  --paper:#FFFBF4;
  --paper-deep:#FFF4E4;
  --ink:#253150;
  --ink-soft:#5A6480;
  --coral:#F25C44;
  --coral-deep:#D8452E;
  --sun:#FFC53D;
  --teal:#00A896;
  --lilac:#8F7BE8;
  --leaf:#58AB6B;
  --sky:#3FA5D8;
  --line:#EBDFCC;
  --radius:22px;
  color-scheme: light;
}
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('assets/fonts/BricolageGrotesque.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  src:url('assets/fonts/AtkinsonHyperlegible-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  src:url('assets/fonts/AtkinsonHyperlegible-400i.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Atkinson Hyperlegible';
  src:url('assets/fonts/AtkinsonHyperlegible-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ============ Base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Atkinson Hyperlegible', 'Trebuchet MS', sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Bricolage Grotesque', Georgia, sans-serif;
  line-height:1.12; margin:0; text-wrap:balance; font-weight:800;
  letter-spacing:-0.01em;
}
p{margin:0}
a{color:inherit}
img{max-width:100%; height:auto}
.wrap{max-width:1280px; margin:0 auto; padding:0 24px}
.eyebrow{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--coral-deep); margin-bottom:14px;
}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px}
.screen-reader-text{
  position:absolute!important; clip-path:inset(50%); width:1px; height:1px;
  overflow:hidden; word-wrap:normal!important;
}

/* the colour thread — signature motif */
.thread{display:inline-flex; gap:5px; height:8px; margin-top:6px}
.thread i{width:34px; border-radius:99px}
.thread i:nth-child(1){background:var(--coral)}
.thread i:nth-child(2){background:var(--sun)}
.thread i:nth-child(3){background:var(--teal)}
.thread i:nth-child(4){background:var(--lilac)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Atkinson Hyperlegible',sans-serif; font-weight:700; font-size:17px;
  padding:15px 28px; border-radius:99px; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background:var(--coral); color:#fff; border:0;
  box-shadow:0 6px 0 var(--coral-deep);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 0 var(--coral-deep)}
.btn-primary:active{transform:translateY(2px); box-shadow:0 3px 0 var(--coral-deep)}
.btn-ghost{
  background:transparent; color:var(--ink);
  border:2px solid var(--ink); box-shadow:none;
}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}
.arrow-link{
  font-weight:700; text-decoration:none; color:var(--ink);
  border-bottom:3px solid var(--sun); padding-bottom:2px;
  transition:border-color .15s ease;
}
.arrow-link:hover{border-color:var(--coral)}

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,251,244,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:28px; padding:16px 24px; max-width:1280px; margin:0 auto}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
.logo-dots{display:grid; grid-template-columns:1fr 1fr; gap:3px}
.logo-dots i{width:9px; height:9px; border-radius:50%}
.logo-dots i:nth-child(1){background:var(--coral)}
.logo-dots i:nth-child(2){background:var(--sun)}
.logo-dots i:nth-child(3){background:var(--teal)}
.logo-dots i:nth-child(4){background:var(--lilac); border-radius:2px}
.logo b{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:19px; letter-spacing:-0.01em}
.nav-links ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav-links a{
  text-decoration:none; font-weight:700; font-size:15.5px; color:var(--ink-soft);
  transition:color .15s ease;
}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a{color:var(--coral-deep)}
.nav .btn{padding:11px 22px; font-size:15.5px}
.menu-toggle{
  display:none; background:none; border:2px solid var(--ink); border-radius:10px;
  padding:7px 10px; cursor:pointer; color:var(--ink);
}
.menu-toggle svg{display:block}

/* ============ Hero (front page) ============ */
.hero{padding:64px 0 80px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(38px, 5vw, 58px)}
.hero h1 .lit{position:relative; white-space:nowrap}
.hero h1 .lit::after{
  content:""; position:absolute; left:2px; right:2px; bottom:-4px; height:12px;
  background:linear-gradient(90deg, var(--sun) 0 25%, var(--coral) 0 50%, var(--teal) 0 75%, var(--lilac) 0 100%);
  border-radius:99px; z-index:-1; opacity:.55;
}
.hero-sub{font-size:20px; color:var(--ink-soft); margin:22px 0 32px; max-width:34em}
.hero-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:22px}
.hero-trust{
  margin-top:26px; font-size:15px; font-weight:700; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
}
.hero-trust span{display:inline-flex; align-items:center; gap:7px}
.hero-trust i{width:9px; height:9px; border-radius:50%; flex:none}
.hero-trust span:nth-child(1) i{background:var(--teal)}
.hero-trust span:nth-child(2) i{background:var(--coral)}
.hero-trust span:nth-child(3) i{background:var(--sun)}

.hero-art{position:relative}
.hero-art .frame{
  border-radius:200px 200px var(--radius) var(--radius);
  overflow:hidden; position:relative; z-index:2;
  box-shadow:0 24px 60px rgba(37,49,80,.16);
  aspect-ratio:4/4.4;
}
.hero-art .frame img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.hero-art .blob{position:absolute; z-index:1; border-radius:50%}
.hero-art .blob.b1{width:190px; height:190px; background:var(--sun); top:-34px; right:-44px}
.hero-art .blob.b2{width:110px; height:110px; background:var(--teal); bottom:-30px; left:-38px; opacity:.9}
.hero-art .blob.b3{width:46px; height:46px; background:var(--lilac); top:38%; left:-58px}
.hero-badge{
  position:absolute; z-index:3; left:-26px; bottom:36px;
  background:#fff; border-radius:16px; padding:12px 18px;
  box-shadow:0 10px 30px rgba(37,49,80,.18);
  font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:10px;
}
.hero-badge .pulse{width:12px; height:12px; border-radius:50%; background:var(--leaf); flex:none}

@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0; transform:translateY(18px); animation:rise .7s ease forwards}
  .rise.d1{animation-delay:.08s}
  .rise.d2{animation-delay:.16s}
  .rise.d3{animation-delay:.24s}
  .rise.d4{animation-delay:.32s}
  @keyframes rise{to{opacity:1; transform:none}}
  .hero-badge .pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(88,171,107,.45)} 50%{box-shadow:0 0 0 7px rgba(88,171,107,0)}}
}

/* ============ Sections ============ */
.section{padding:84px 0}
.section-head{max-width:640px; margin-bottom:44px}
.section-head h2{font-size:clamp(28px, 3.4vw, 40px)}
.section-head p{color:var(--ink-soft); font-size:18px; margin-top:14px}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.head-row .section-head{margin-bottom:0}
.head-row + *{margin-top:44px}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.step{position:relative; padding-top:8px}
.step .num{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:21px; color:var(--ink);
  margin-bottom:18px;
}
.step:nth-child(1) .num{background:var(--sun)}
.step:nth-child(2) .num{background:var(--teal); color:#fff}
.step:nth-child(3) .num{background:var(--coral); color:#fff}
.step:nth-child(4) .num{background:var(--lilac); color:#fff}
.step h3{font-size:20px; font-weight:600; margin-bottom:8px}
.step p{color:var(--ink-soft); font-size:16px}

/* Service cards */
.services{background:var(--paper-deep); border-radius:44px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  border-radius:var(--radius); padding:30px 28px; text-decoration:none;
  display:flex; flex-direction:column; gap:10px; position:relative;
  border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(37,49,80,.12)}
.card .icon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
}
.card .icon svg{width:26px; height:26px}
.card h3{font-size:21px; font-weight:600}
.card h3 a{color:inherit; text-decoration:none}
.card p{color:var(--ink-soft); font-size:16px; flex:1}
.card .go{font-weight:700; font-size:15.5px}
[data-href]{cursor:pointer}
.card.c-teal{background:#E3F5F1} .card.c-teal .icon{background:var(--teal)} .card.c-teal .go{color:#00766A}
.card.c-sun{background:#FFF2D2} .card.c-sun .icon{background:var(--sun)} .card.c-sun .go{color:#9A6E00}
.card.c-coral{background:#FDE7DF} .card.c-coral .icon{background:var(--coral)} .card.c-coral .go{color:var(--coral-deep)}
.card.c-lilac{background:#EFEAFD} .card.c-lilac .icon{background:var(--lilac)} .card.c-lilac .go{color:#6A54C9}
.card.c-leaf{background:#E7F4E6} .card.c-leaf .icon{background:var(--leaf)} .card.c-leaf .go{color:#3E7F4C}
.card.c-sky{background:#E3F1FA} .card.c-sky .icon{background:var(--sky)} .card.c-sky .go{color:#20719C}

/* Trust strip */
.trust{border-block:1px solid var(--line); padding:46px 0}
.trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px}
.trust-item{display:flex; gap:16px; align-items:flex-start}
.trust-item .tick{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.trust-item:nth-child(1) .tick{background:var(--teal)}
.trust-item:nth-child(2) .tick{background:var(--coral)}
.trust-item:nth-child(3) .tick{background:var(--lilac)}
.trust-item b{display:block; font-size:17px}
.trust-item small{color:var(--ink-soft); font-size:15.5px; line-height:1.5; display:block; margin-top:3px}

/* Who we help */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px}
.chip{
  font-weight:700; font-size:16px; padding:11px 22px; border-radius:99px;
  border:2px solid var(--ink); background:#fff;
  transition:transform .15s ease;
}
.chip:hover{transform:translateY(-2px) rotate(-1deg)}
.chip.k1{background:#FFF2D2; border-color:var(--sun)}
.chip.k2{background:#E3F5F1; border-color:var(--teal)}
.chip.k3{background:#FDE7DF; border-color:var(--coral)}
.chip.k4{background:#EFEAFD; border-color:var(--lilac)}
.chip.k5{background:#E7F4E6; border-color:var(--leaf)}
.chip.k6{background:#E3F1FA; border-color:var(--sky)}
.help-note{
  font-size:19px; max-width:38em; color:var(--ink);
  background:#fff; border-left:6px solid var(--sun);
  padding:20px 26px; border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:0 8px 24px rgba(37,49,80,.07);
}
.help-note em{color:var(--ink-soft)}

/* Team band */
.team{background:var(--ink); border-radius:44px; color:var(--paper)}
.team-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:56px 0}
.team h2{font-size:clamp(26px,3vw,36px); color:#fff; max-width:15em}
.team p{color:#B9C0D4; margin-top:12px; font-size:17.5px; max-width:30em}
.team .arrow-link{color:#fff; border-color:var(--sun)}
.team .arrow-link:hover{border-color:var(--coral)}

/* Final CTA */
.cta-final{text-align:center; padding:96px 0}
/* .cta-title: heading LOOK without a heading TAG (Leslie 2026-09-17) —
   the closing CTA line is a call-to-action, not part of the page outline. */
.cta-title{
  font-family:'Bricolage Grotesque', Georgia, sans-serif;
  line-height:1.12; margin:0; text-wrap:balance; font-weight:800;
  letter-spacing:-0.01em;
}
.cta-final h2, .cta-final .cta-title{font-size:clamp(32px,4.4vw,52px)}
.cta-final .thread{margin:22px auto 34px; display:flex; justify-content:center}
.cta-final .hero-ctas{justify-content:center}

/* ============ Inner pages: shared ============ */
.page-hero{padding:64px 0 44px}
.page-hero h1{font-size:clamp(32px, 4.2vw, 50px)}
.page-hero .lead{font-size:19.5px; color:var(--ink-soft); margin-top:18px; max-width:36em}
.breadcrumb{
  font-size:14px; font-weight:700; color:var(--ink-soft); margin-bottom:18px;
}
.breadcrumb a{color:var(--ink-soft); text-decoration:none; border-bottom:2px solid var(--sun)}
.breadcrumb a:hover{color:var(--coral-deep)}

/* Entry content typography */
.entry-content{font-size:17.5px; max-width:100%}
.entry-content > *{max-width:46em}
.entry-content p{margin:0 0 1.25em}
.entry-content h2{font-size:clamp(24px,2.8vw,32px); margin:1.8em 0 0.6em}
.entry-content h3{font-size:21px; font-weight:600; margin:1.5em 0 0.5em}
.entry-content h4{font-size:18px; font-weight:600; margin:1.3em 0 0.4em}
.entry-content ul, .entry-content ol{margin:0 0 1.25em; padding-left:1.3em}
.entry-content li{margin-bottom:0.45em}
.entry-content li::marker{color:var(--coral)}
.entry-content a{color:var(--coral-deep); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px}
.entry-content a:hover{color:var(--ink)}
.entry-content blockquote{
  margin:1.6em 0; padding:18px 26px; background:#fff;
  border-left:6px solid var(--lilac); border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:0 8px 24px rgba(37,49,80,.07); font-style:italic;
}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content img{border-radius:var(--radius)}
.entry-content figure{margin:1.6em 0}
.entry-content figcaption{font-size:14.5px; color:var(--ink-soft); margin-top:8px}
.entry-content table{
  border-collapse:collapse; width:100%; margin:1.6em 0; font-size:16px;
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 8px 24px rgba(37,49,80,.07);
}
.entry-content thead th{
  background:var(--ink); color:#fff; text-align:left; padding:12px 16px;
  font-family:'Atkinson Hyperlegible',sans-serif; font-weight:700; font-size:15px;
}
.entry-content tbody td, .entry-content tbody th{padding:12px 16px; border-top:1px solid var(--line); vertical-align:top}
.entry-content td p, .entry-content th p{margin:0 0 .5em}
.entry-content td p:last-child, .entry-content th p:last-child{margin-bottom:0}
/* 0.6.3: neutralise core block-library cell borders. They put 1px borders on
   every side of every cell, which clip against the table's rounded corners
   (header looked 1px inset, bottom corners broken). The design is horizontal
   hairlines only, so side/bottom borders go; the tbody border-top above stays. */
.entry-content table td, .entry-content table th{border-left:0; border-right:0; border-bottom:0}
.entry-content thead th{border:0}
.entry-content tbody tr:nth-child(even){background:#FFFDF8}
.table-scroll{overflow-x:auto}

/* ============ Blog archive ============ */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.post-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 8px 24px rgba(37,49,80,.07); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(37,49,80,.13)}
.post-card .thumb{aspect-ratio:16/9; overflow:hidden; background:var(--paper-deep)}
.post-card .thumb img{width:100%; height:100%; object-fit:cover}
.post-card .thumb-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.post-card .thumb-fallback .thread{height:10px}
.post-card .body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.post-card .cat{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em;
  color:#00766A;
}
.post-card h2, .post-card h3{font-size:20px; font-weight:600; line-height:1.25}
.post-card h2 a, .post-card h3 a{text-decoration:none; color:var(--ink)}
.post-card h2 a:hover, .post-card h3 a:hover{color:var(--coral-deep)}
.post-card .excerpt{color:var(--ink-soft); font-size:15.5px; flex:1}
.post-card .meta{font-size:14px; color:var(--ink-soft); font-weight:700}

.pagination{display:flex; justify-content:center; gap:8px; margin-top:52px}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 12px; border-radius:99px;
  border:2px solid var(--ink); text-decoration:none; font-weight:700; color:var(--ink);
}
.pagination .page-numbers.current{background:var(--ink); color:#fff}
.pagination .page-numbers:hover:not(.current){background:var(--paper-deep)}

/* ============ Single post ============ */
.single-hero{padding:64px 0 36px; max-width:820px; margin:0 auto}
.single-hero .entry-meta{margin-top:18px; font-size:15px; font-weight:700; color:var(--ink-soft); display:flex; gap:16px; flex-wrap:wrap}
.single-featured{max-width:980px; margin:0 auto 20px; padding:0 24px}
.single-featured img{width:100%; border-radius:var(--radius); box-shadow:0 16px 40px rgba(37,49,80,.12)}
.single-body{max-width:820px; margin:0 auto; padding:24px 24px 40px}
.single-body .entry-content > *{max-width:100%}
.post-cta{
  max-width:820px; margin:16px auto 72px; padding:0 24px;
}
.post-cta-inner{
  background:var(--paper-deep); border-radius:var(--radius); padding:34px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.post-cta-inner h2{font-size:23px; font-weight:600}
.post-cta-inner p{color:var(--ink-soft); margin-top:6px}

/* ============ Contact page ============ */
.contact-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:44px; align-items:start; padding-bottom:84px}
.contact-form-card{
  background:#fff; border-radius:var(--radius); padding:36px;
  box-shadow:0 16px 40px rgba(37,49,80,.09);
}
.contact-note{font-size:14.5px; color:var(--ink-soft); margin-top:16px; display:flex; gap:8px; align-items:flex-start}
.info-stack{display:flex; flex-direction:column; gap:22px}
.info-card{
  background:#fff; border-radius:var(--radius); padding:26px 28px;
  box-shadow:0 8px 24px rgba(37,49,80,.07);
}
.info-card h2, .info-card h3{font-size:19px; font-weight:600; margin-bottom:10px}
.info-card p{color:var(--ink-soft); font-size:16px}
.info-card a{color:var(--coral-deep); font-weight:700; text-decoration:none}
.info-card a:hover{text-decoration:underline}
.info-card.accent{background:var(--paper-deep)}
.info-card .btn{margin-top:16px}

/* Forms (Contact Form 7 + native) */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card select,
.contact-form-card textarea{
  width:100%; padding:14px 16px; margin:6px 0 18px;
  border:2px solid var(--line); border-radius:14px;
  font-family:'Atkinson Hyperlegible',sans-serif; font-size:16.5px; color:var(--ink);
  background:#FFFDF8; transition:border-color .15s ease;
}
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus{border-color:var(--teal); outline:none}
.contact-form-card label{font-weight:700; font-size:15.5px}
.contact-form-card .wpcf7-submit{
  background:var(--coral); color:#fff; border:0;
  box-shadow:0 6px 0 var(--coral-deep);
  font-weight:700; font-size:17px; padding:15px 32px; border-radius:99px; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.contact-form-card .wpcf7-submit:hover{transform:translateY(-2px); box-shadow:0 8px 0 var(--coral-deep)}
.wpcf7-not-valid-tip{color:var(--coral-deep); font-size:14px}
.wpcf7-response-output{
  border:2px solid var(--teal)!important; border-radius:14px!important;
  padding:14px 18px!important; margin:18px 0 0!important; font-weight:700;
}

/* ============ Service / Issue pages (0.4.0: chaptered layout) ============ */
.service-hero{
  background:var(--paper-deep); border-radius:0 0 44px 44px; padding:56px 0 56px;
}
.service-hero h1{font-size:clamp(34px,4.4vw,54px)}
.service-hero .lead{font-size:20px; color:var(--ink-soft); margin-top:18px; max-width:32em}
.service-hero .hero-ctas{margin-top:28px}
.service-hero .hero-trust{margin-top:24px}

/* Trust strip under the hero */
.service-trust{padding:34px 0 8px}
.service-trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.service-trust .trust-item{display:flex; gap:14px; align-items:flex-start}
.service-trust .tick{
  width:40px; height:40px; border-radius:50%; flex:none; font-size:18px; font-weight:700;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.service-trust .trust-item:nth-child(1) .tick{background:var(--teal)}
.service-trust .trust-item:nth-child(2) .tick{background:var(--coral)}
.service-trust .trust-item:nth-child(3) .tick{background:var(--lilac)}
.service-trust .trust-item:nth-child(4) .tick{background:var(--sun); color:var(--ink)}
.service-trust b{display:block; font-size:16.5px; line-height:1.3}
.service-trust small{color:var(--ink-soft); font-size:14.5px; line-height:1.45; display:block; margin-top:3px}

/* Chapters: one per H2, alternating plain / tinted band */
.chapters{padding:36px 0 0}
.intro{padding:40px 0 8px}
.intro .prose{max-width:44em}
.chapter{padding:64px 0}
.chapter .wrap{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,8fr); gap:64px; align-items:start}
.chapter.tint{padding:8px 0}
.chapter.tint .wrap{background:var(--paper-deep); border-radius:44px; padding:64px 72px}
.chapter-head{position:sticky; top:104px}
.chapter-head .thread{margin:0}
.chapter-head h2{font-size:clamp(28px,3.1vw,40px); margin-top:14px}
.prose{font-size:18px; line-height:1.66; max-width:40em}
.prose > *{max-width:none}
.prose p{margin:0 0 1.2em}
/* 0.6.2: chapter leads no longer bump to 20px — with 6+ chapters the mixed
   sizes read as a bug (Leslie 2026-09-17). The hero excerpt stays the lead. */
.prose h3{margin-top:0}
.prose .table-scroll{margin:.4em 0 1.6em}
.prose .table-scroll table{margin:0}

/* Question blocks: each H3 takes the next colour of the thread */
.q{margin-top:2.1em; padding-left:22px; border-left:5px solid var(--coral); border-radius:4px}
.q h3{font-size:22px; font-weight:700; line-height:1.25; margin:0 0 .55em}
.q > :last-child{margin-bottom:0}
.q-2{border-color:var(--sun)} .q-3{border-color:var(--teal)} .q-4{border-color:var(--lilac)}

/* Mid-page breather */
.breather{padding:40px 0}
.breather-inner{
  background:#EFEBFB; border-radius:44px; padding:40px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.breather h2{font-size:clamp(22px,2.4vw,28px)}
.breather p{color:var(--ink-soft); margin-top:8px; max-width:34em}
.breather .hero-ctas{margin-top:0}

/* Closing self-check card */
.closing{padding:40px 0 16px}
.closing-card{
  background:#fff; border-radius:32px; box-shadow:0 12px 34px rgba(37,49,80,.08);
  padding:52px 56px; max-width:820px; margin:0 auto; text-align:center;
}
.closing-card .thread{margin:0 0 18px}
.closing-card h2{font-size:clamp(26px,3vw,36px)}
.closing-card .prose{margin:18px auto 0; text-align:left}
.closing-card .prose > p:first-child{font-size:18px}


/* ============ Grouped listings: /services/ + /issues/ (0.5.0) ============ */
.card.is-draft{cursor:default}
.card.is-draft:hover{transform:none; box-shadow:none}
.card.is-draft .go{color:var(--ink-soft); opacity:.8}
.group{padding:56px 0}
.group .wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,9fr); gap:56px; align-items:start}
.group.tint{padding:8px 0}
.group.tint .wrap{background:var(--paper-deep); border-radius:44px; padding:56px 64px}
.group-head{position:sticky; top:104px}
.group-head .thread{margin:0}
.group-head h2{font-size:clamp(28px,3vw,38px); margin-top:14px}
.group-head p{color:var(--ink-soft); margin-top:14px; font-size:17px; max-width:24em}
.group .cards{grid-template-columns:repeat(2,1fr)}
.group .cards.one{grid-template-columns:1fr}
.groups{padding-top:24px}

/* Services hero: arch "doors" */
.svc-hero{background:var(--paper-deep); border-radius:0 0 44px 44px; padding:56px 0 64px}
.svc-hero h1{font-size:clamp(36px,4.6vw,58px); max-width:14em}
.svc-hero .lead{font-size:20px; color:var(--ink-soft); margin-top:18px; max-width:34em}
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.door{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  text-decoration:none; padding:34px 26px 26px; background:#fff;
  border-radius:160px 160px var(--radius) var(--radius);
  box-shadow:0 12px 30px rgba(37,49,80,.08); border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease;
}
.door:hover{transform:translateY(-5px); box-shadow:0 18px 40px rgba(37,49,80,.14)}
.door .badge{width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:6px}
.door .badge svg{width:30px; height:30px}
.door b{font-family:'Bricolage Grotesque',sans-serif; font-size:22px; font-weight:700; line-height:1.15}
.door b a{color:inherit; text-decoration:none}
.door small{color:var(--ink-soft); font-size:15px; max-width:22em}
.door .count{margin-top:auto; padding-top:8px; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.door.d-teal .badge{background:var(--teal)} .door.d-teal .count{color:#00766A} .door.d-teal:hover{border-color:var(--teal)}
.door.d-sun .badge{background:var(--sun)} .door.d-sun .badge svg{stroke:var(--ink)} .door.d-sun .count{color:#9A6E00} .door.d-sun:hover{border-color:var(--sun)}
.door.d-coral .badge{background:var(--coral)} .door.d-coral .count{color:var(--coral-deep)} .door.d-coral:hover{border-color:var(--coral)}
.door.d-sky .badge{background:var(--sky)} .door.d-sky .count{color:#20719C} .door.d-sky:hover{border-color:var(--sky)}
.door.d-leaf .badge{background:var(--leaf)} .door.d-leaf .count{color:#3E7F4C} .door.d-leaf:hover{border-color:var(--leaf)}
.door.d-lilac .badge{background:var(--lilac)} .door.d-lilac .count{color:#6A54C9} .door.d-lilac:hover{border-color:var(--lilac)}

/* Issues hero: "sounds familiar" */
.iss-hero{background:var(--paper-deep); border-radius:0 0 44px 44px; padding:56px 0 64px}
.iss-hero .top{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:start}
.iss-hero h1{font-size:clamp(36px,4.6vw,58px)}
.iss-hero .lead{font-size:19px; color:var(--ink-soft); margin-top:18px; max-width:26em}
.iss-hero .top .hero-ctas{margin-top:26px}
.familiar{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.familiar li{border-top:1px solid var(--line)}
.familiar li:last-child{border-bottom:1px solid var(--line)}
.familiar li{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 6px 18px 0; transition:padding-left .15s ease}
.familiar li:hover{padding-left:10px}
.familiar .tag{text-decoration:none}
.familiar q{font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:clamp(20px,2vw,25px); line-height:1.25; quotes:"\201C" "\201D"; color:var(--ink)}
.familiar .tag{flex:none; font-weight:700; font-size:14px; padding:7px 14px; border-radius:99px; white-space:nowrap}
.familiar .t-sun{background:#FFF2D2; color:#9A6E00} .familiar .t-teal{background:#E3F5F1; color:#00766A} .familiar .t-coral{background:#FDE7DF; color:var(--coral-deep)}
.familiar .t-lilac{background:#EFEAFD; color:#6A54C9} .familiar .t-leaf{background:#E7F4E6; color:#3E7F4C} .familiar .t-sky{background:#E3F1FA; color:#20719C}
.familiar-note{margin-top:16px; font-size:14.5px; color:var(--ink-soft)}
.notlisted{padding:40px 0}
.notlisted-inner{background:#fff; border-radius:32px; box-shadow:0 12px 34px rgba(37,49,80,.08); padding:48px 56px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center}
.notlisted h2{font-size:clamp(24px,2.8vw,32px)}
.notlisted p{margin-top:12px; font-size:18px; max-width:34em}

/* CTA band reused on inner pages */
.cta-band{padding:48px 0 84px}
.cta-band-inner{
  background:var(--ink); border-radius:44px; color:#fff; text-align:center;
  padding:56px 32px;
}
.cta-band-inner h2, .cta-band-inner .cta-title{color:#fff; font-size:clamp(26px,3.4vw,38px); margin:0 auto; max-width:none}
.cta-band-inner p{color:#B9C0D4; margin:12px auto 28px; max-width:34em}
.cta-band-inner .arrow-link{color:#fff; border-color:var(--sun); margin-left:22px}

/* ============ Footer ============ */
.site-footer{border-top:1px solid var(--line); padding:44px 0 56px; background:var(--paper-deep)}
.foot{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start}
.foot .logo b{font-size:17px}
.foot-tag{color:var(--ink-soft); font-size:15px; margin-top:10px}
.foot-links ul{display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.foot-links a{font-size:15px; font-weight:700; color:var(--ink-soft); text-decoration:none}
.foot-links a:hover{color:var(--coral-deep)}
.foot-brand{width:max-content; max-width:100%}
.foot-note{width:0; min-width:100%; margin-top:16px; font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
.foot-bottom{width:100%; margin-top:28px; display:flex; justify-content:space-between; align-items:baseline; gap:8px 24px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft)}
.foot-bottom p{margin:0}
.foot-credit a{color:var(--ink-soft); font-weight:inherit; text-decoration:underline; text-underline-offset:3px}
.foot-credit a:hover{color:var(--coral-deep)}

/* ============ Responsive ============ */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-art{max-width:440px; margin:0 auto}
  .steps{grid-template-columns:repeat(2,1fr); gap:34px 26px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:1fr; gap:22px}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .service-trust-grid{grid-template-columns:1fr 1fr}
  .chapter .wrap{grid-template-columns:1fr; gap:24px}
  .chapter-head{position:static}
  .chapter.tint .wrap{padding:44px 28px; border-radius:28px}
  .doors{grid-template-columns:repeat(2,1fr)} .group .wrap{grid-template-columns:1fr; gap:24px} .group-head{position:static}
  .group.tint .wrap{padding:40px 28px; border-radius:28px} .group .cards{grid-template-columns:1fr}
  .iss-hero .top{grid-template-columns:1fr; gap:32px} .notlisted-inner{grid-template-columns:1fr; padding:32px 28px}

  .menu-toggle{display:block}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px rgba(37,49,80,.12); padding:18px 24px 26px;
  }
  .nav-links.open{display:block}
  .nav-links ul{flex-direction:column; gap:16px}
  .nav-links a{font-size:17px}
}
/* Compact header on phones: logo + menu + short "Book" button fit in 390px */
.nav-book-short{display:none}
@media (max-width:560px){
  .nav{gap:12px; padding:12px 16px}
  .logo b{font-size:16px}
  .nav-book{padding:11px 16px; font-size:15px; white-space:nowrap}
  .nav-book-long{display:none} .nav-book-short{display:inline}
  .steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .hero{padding-top:40px}
  .section{padding:64px 0}
  .hero-badge{left:8px}
  .contact-form-card{padding:26px 22px}
  .service-trust-grid{grid-template-columns:1fr}
  .breather-inner,.closing-card{padding:32px 24px}
  .chapter.tint .wrap{padding:36px 22px}
  .doors{grid-template-columns:1fr 1fr; gap:14px} .door{padding:26px 14px 20px; border-radius:90px 90px 18px 18px} .door b{font-size:17px} .door small{font-size:14px}
  .familiar q{font-size:19px} .familiar li{flex-direction:column; align-items:flex-start; gap:8px}
}

/* Testimonials (homepage; section stays hidden until quotes are set in the Customizer) */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px}
.testi-grid.cols-1{grid-template-columns:minmax(0,640px); justify-content:center}
.testi-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.testi-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:26px 26px 22px; margin:0; position:relative;
}
.testi-card::before{
  content:"\201C"; display:block; font-size:52px; line-height:.6; margin-bottom:14px;
}
.testi-card.k1::before{color:var(--sun)}
.testi-card.k2::before{color:var(--teal)}
.testi-card.k3::before{color:var(--lilac)}
.testi-card blockquote{margin:0; font-size:17px; line-height:1.6}
.testi-card figcaption{margin-top:14px; font-weight:600; font-size:15px; color:var(--ink-soft)}
@media (max-width:860px){
  .testi-grid, .testi-grid.cols-2{grid-template-columns:1fr}
}