/*
Theme Name: Early G.R.I.P.
Theme URI: https://www.earlygrip.co.uk
Author: Margin Practice
Author URI: https://marginpractice.co.uk
Description: Custom block theme for Early G.R.I.P. (Grounded Relationships in Parenting). Built to WCAG 2.2 AA.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.2.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: earlygrip
*/

/* Layout concept: "the desk, read clearly". Big photographs that move gently as you scroll,
   set against Braille Institute-style clarity: one hyperlegible face, large text, solid outlines,
   unmistakable buttons and links.

   The design tokens live in theme.json. The short names below are aliases so this file reads
   like the approved preview (preview/index.html). Dark mode swaps the theme.json values, so the
   editor's colour classes flip too. */

:root{
  --bg:var(--wp--preset--color--bg);
  --surface:var(--wp--preset--color--surface);
  --ink:var(--wp--preset--color--ink);
  --muted:var(--wp--preset--color--muted);
  --action:var(--wp--preset--color--action);
  --sage:var(--wp--custom--sage);              /* logo sage: decoration only, never text */
  --sage-panel:var(--wp--custom--sage-panel);  /* text-bearing sage: white text 6.6:1 */
  --on-panel:var(--wp--custom--on-panel);
  --action-ink:var(--wp--custom--action-ink);
  --shadow:var(--wp--custom--shadow);
  --line:var(--wp--custom--line);
  --soft-line:var(--wp--custom--soft-line);
  --focus:var(--wp--custom--focus);
  --focus-halo:var(--wp--custom--focus-halo);
  --err:var(--wp--custom--err);
  --logo-disc:var(--wp--custom--logo-disc);
  --font:var(--wp--preset--font-family--atkinson);
  --step--1:var(--wp--preset--font-size--small);
  --step-0:var(--wp--preset--font-size--medium);
  --step-1:var(--wp--preset--font-size--large);
  --step-2:var(--wp--preset--font-size--x-large);
  --step-3:var(--wp--preset--font-size--xx-large);
  --step-4:var(--wp--preset--font-size--huge);
  --radius:10px;
  --measure:62ch;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wp--preset--color--bg:#191C16;--wp--preset--color--surface:#232920;--wp--preset--color--ink:#F1EADC;--wp--preset--color--muted:#CDC2AE;--wp--preset--color--action:#BFD3AA;
    --wp--custom--sage:#8FA47C;--wp--custom--sage-panel:#4F6343;--wp--custom--on-panel:#FFFFFF;--wp--custom--action-ink:#191C16;--wp--custom--shadow:#C99A72;
    --wp--custom--line:#F1EADC;--wp--custom--soft-line:#3E4636;--wp--custom--focus:#F3DFA6;--wp--custom--focus-halo:#191C16;--wp--custom--err:#F4A99F;--wp--custom--logo-disc:#F7F2E9;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --wp--preset--color--bg:#191C16;--wp--preset--color--surface:#232920;--wp--preset--color--ink:#F1EADC;--wp--preset--color--muted:#CDC2AE;--wp--preset--color--action:#BFD3AA;
  --wp--custom--sage:#8FA47C;--wp--custom--sage-panel:#4F6343;--wp--custom--on-panel:#FFFFFF;--wp--custom--action-ink:#191C16;--wp--custom--shadow:#C99A72;
  --wp--custom--line:#F1EADC;--wp--custom--soft-line:#3E4636;--wp--custom--focus:#F3DFA6;--wp--custom--focus-halo:#191C16;--wp--custom--err:#F4A99F;--wp--custom--logo-disc:#F7F2E9;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:76rem;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;line-height:1.08;letter-spacing:-0.015em;color:var(--ink);text-wrap:balance;margin:0}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1);font-weight:700;letter-spacing:0}
h4{font-size:var(--step-0);font-weight:700;letter-spacing:0}
p,figure,blockquote{margin:0}
a{color:var(--action);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.18em}
a:hover{text-decoration-thickness:4px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 6px var(--focus-halo)}
[tabindex="-1"]:focus{outline:none;box-shadow:none}
img{display:block;max-width:100%;height:auto}
.screen-reader-text,.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;word-wrap:normal!important}

/* Editor font-size presets keep working, and win over section defaults */
.has-small-font-size{font-size:var(--step--1)!important}
.has-medium-font-size{font-size:var(--step-0)!important}
.has-large-font-size{font-size:var(--step-1)!important}
.has-x-large-font-size{font-size:var(--step-2)!important}
.has-xx-large-font-size{font-size:var(--step-3)!important}
.has-huge-font-size{font-size:var(--step-4)!important}

.skip{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:-200px;z-index:100;background:var(--action);color:var(--action-ink);padding:0.8rem 1.1rem;border-radius:var(--radius);border:2px solid var(--ink)}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 0.5rem)}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bg);border-bottom:2px solid var(--line)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:0;position:relative}}
.site-header > .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:0.55rem;flex-wrap:wrap}
.js .site-header > .wrap{flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--ink);min-height:48px}
.brand:hover{text-decoration:none}
.brand-disc{width:88px;height:88px;border-radius:50%;background:var(--logo-disc);display:grid;place-items:center;flex:none}
.brand-disc img{width:80px;height:auto}
.brand-name{font-size:var(--step-1);font-weight:800;line-height:1.1;letter-spacing:-0.01em}
.brand-name span{display:block;font-size:1rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:0.2rem}
.menu-btn{display:none;align-items:center;gap:0.5rem;min-height:48px;padding:0.5rem 1rem;border:2px solid var(--ink);background:var(--bg);color:var(--ink);border-radius:var(--radius);font:inherit;font-weight:700;cursor:pointer}
.menu-btn svg{width:20px;height:20px}
.nav-list{display:flex;flex-wrap:wrap;gap:0.25rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{display:inline-flex;align-items:center;min-height:48px;padding:0 0.9rem;text-decoration:none;color:var(--ink);border-radius:var(--radius)}
.nav-list a:hover{text-decoration:underline;text-decoration-thickness:2px}
.nav-list a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:4px;text-decoration-color:var(--sage)}
.nav-list .nav-cta > a{background:var(--action);color:var(--action-ink);border:2px solid var(--ink);margin-left:0.5rem;box-shadow:3px 3px 0 var(--shadow)}
.nav-list .nav-cta > a[aria-current="page"]{text-decoration-color:currentColor}
@media (max-width:900px){
  .js .menu-btn{display:inline-flex}
  .js .site-nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:2px solid var(--line)}
  .js .site-nav:not(.is-open){display:none}
  .site-nav{flex-basis:100%}
  .nav-list{flex-direction:column;align-items:stretch;padding:0.5rem max(16px,env(safe-area-inset-right,0px)) 1.25rem max(16px,env(safe-area-inset-left,0px))}
  .nav-list a{font-size:var(--step-1);padding-inline:0.25rem}
  .nav-list .nav-cta > a{margin:0.75rem 0 0;justify-content:center}
}
@media (max-width:1100px){.brand-name span{display:none}.brand-disc{width:72px;height:72px}.brand-disc img{width:66px}}
@media (max-width:480px){.brand{gap:0.65rem}.brand-name{font-size:1.2rem}.brand-disc{width:58px;height:58px}.brand-disc img{width:53px}}

/* Buttons: solid outline + offset shadow so they're unmistakably buttons.
   Core "Fill" style = primary, core "Outline" style = secondary. */
.wp-block-buttons,.btn-row{display:flex;flex-wrap:wrap;gap:1rem}
body .wp-block-button .wp-block-button__link,.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;min-height:52px;padding:0.75rem 1.5rem;border-radius:var(--radius);font-family:var(--font);font-weight:700;font-size:var(--step-0);line-height:1.3;text-decoration:none;border:2px solid var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease);background:var(--action);color:var(--action-ink)}
body .wp-block-button .wp-block-button__link:hover,.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow);text-decoration:none}
body .wp-block-button .wp-block-button__link:active,.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--shadow)}
body .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,.btn-secondary{background:var(--bg);color:var(--ink);border:2px solid var(--ink);padding:0.75rem 1.5rem}
.text-link a,a.text-link{display:inline-flex;align-items:center;gap:0.4rem;min-height:44px}

/* Sections */
.entry-content > *{margin-block:0}
.section{padding-block:clamp(3rem,8vw,6.5rem)}
.section-end{padding-bottom:clamp(3rem,8vw,6rem)}
.prose{max-width:var(--measure);display:grid;gap:1.15rem}
.prose > *{margin:0}
.big-text,.is-style-big-text{font-size:var(--step-1);line-height:1.45;font-weight:400}

/* Gentle motion: things drift up slightly as they arrive. Visible at rest, no motion if reduced. */
.rise{transition:transform .9s var(--ease)}
.js .rise.is-waiting{transform:translateY(28px)}
.photo{overflow:hidden;border-radius:var(--radius);border:2px solid var(--line);background:var(--surface)}
.wp-block-image.photo img,.photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08) translateY(var(--py,0px));will-change:transform}
@media (prefers-reduced-motion: reduce){
  .rise,body .wp-block-button .wp-block-button__link,.btn,.hero-photo img,.card .card-img img{transition:none!important}
  .js .rise.is-waiting{transform:none}
  .wp-block-image.photo img,.photo img{transform:none!important}
  .hero-photo img{animation:none!important}
}

/* HOME hero: full-bleed photograph, text on a solid panel (never text on the photo) */
.hero{position:relative;border-bottom:2px solid var(--line)}
.hero-photo{height:clamp(300px,60vh,680px);overflow:hidden;background:var(--surface)}
.wp-block-image.hero-photo img,.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:settle 2.4s var(--ease) both}
@keyframes settle{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-panel-wrap{position:relative;margin-top:clamp(-11rem,-14vw,-5rem)}
.hero-panel{background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,3rem);max-width:44rem;display:grid;gap:1.25rem;box-shadow:8px 8px 0 var(--sage)}
.hero-panel > *{margin:0}
.hero-panel h1{font-size:var(--step-4);letter-spacing:-0.03em;line-height:0.98}
.hero + .section{padding-top:clamp(2.5rem,6vw,4.5rem)}
.hero-after{padding-bottom:clamp(2.5rem,6vw,4rem)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.split > *{min-width:0;margin:0}
.split .photo{aspect-ratio:4/5}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .photo{aspect-ratio:4/3}}

/* G.R.I.P. */
.grip-band{background:var(--surface);border-block:2px solid var(--line)}
.grip-head{display:grid;gap:0.75rem;max-width:var(--measure);margin-bottom:clamp(2rem,4vw,3rem)}
.grip-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none;margin:0;padding:0}
.grip-list li{background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.25rem 1.6rem;display:grid;gap:0.4rem;align-content:start;color:var(--muted)}
/* The big letter is decoration: the word below says the same thing. The "/ ''" gives it empty alt text. */
.grip-list li::before{font-size:clamp(4rem,3rem + 4vw,7rem);font-weight:800;line-height:0.9;color:var(--sage);letter-spacing:-0.04em}
.grip-list li:nth-child(1)::before{content:"G";content:"G" / ""}
.grip-list li:nth-child(2)::before{content:"R";content:"R" / ""}
.grip-list li:nth-child(3)::before{content:"I";content:"I" / ""}
.grip-list li:nth-child(4)::before{content:"P";content:"P" / ""}
.grip-list li strong{display:block;font-size:var(--step-1);font-weight:800;color:var(--ink);line-height:1.3}
.grip-list li br{display:none}
@media (max-width:900px){.grip-list{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.grip-list{grid-template-columns:1fr}}

/* Closing call to action */
.closing{background:var(--sage-panel);color:var(--on-panel);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(2rem,6vw,4.5rem);display:grid;gap:1.5rem;justify-items:start}
.closing > *{margin:0}
.closing h2{color:var(--on-panel);font-size:var(--step-3);max-width:18ch;letter-spacing:-0.025em}
.closing p{font-size:var(--step-1);max-width:30ch}
/* The panel is the same green in both themes, so this button keeps fixed colours */
body .closing .wp-block-button .wp-block-button__link{background:#F7F2E9;color:#2E2219;border-color:#2E2219;box-shadow:4px 4px 0 #2E2219}

/* Carousel: native horizontal scroll with snap, buttons and a progress bar */
.rail-head{display:flex;justify-content:space-between;align-items:end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.75rem}
.rail-head > *{margin:0}
.rail-controls{display:flex;gap:0.6rem}
.rail-btn{width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--bg);color:var(--ink);cursor:pointer;padding:0}
.rail-btn:hover{background:var(--surface)}
.rail-btn[aria-disabled="true"]{opacity:0.45;cursor:default}
.rail-btn svg{width:22px;height:22px}
.rail{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 1.25rem;margin:-4px;scrollbar-width:none;overscroll-behavior-x:contain}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(17rem,calc((100% - 3rem) / 3));gap:1.5rem;list-style:none;margin:0;padding:0}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;list-style:none;margin:0;padding:0}
@media (max-width:960px){.article-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.article-grid{grid-template-columns:1fr}}
.rail::-webkit-scrollbar{display:none}
.rail-track > *{scroll-snap-align:start;min-width:0;margin:0}
@media (max-width:860px){.rail-track{grid-auto-columns:minmax(15rem,80%)}}
@media (prefers-reduced-motion: reduce){.rail{scroll-behavior:auto}}
.rail:focus-visible{outline-offset:6px}
.progress{height:4px;background:var(--soft-line);border-radius:4px;overflow:hidden;margin-top:0.25rem}
.progress span{display:block;height:100%;width:var(--w,33%);margin-left:var(--x,0%);background:var(--ink);border-radius:4px;transition:margin-left .25s linear}
.see-all{margin-top:1.5rem}

.card{height:100%;display:grid;grid-template-rows:auto 1fr;border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);position:relative}
.card .card-img{aspect-ratio:4/3;overflow:hidden;border-bottom:2px solid var(--line);background:var(--surface)}
.card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.card-body{padding:1.25rem 1.25rem 1.5rem;display:grid;gap:0.6rem;align-content:start}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card:hover h3 a{text-decoration:underline}
.card:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.card h3 a:focus-visible{outline:none;box-shadow:none}
.meta{font-size:var(--step--1);color:var(--muted)}
.feed-empty{border:2px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--bg);display:grid;gap:0.5rem;max-width:var(--measure)}

/* Instagram */
.insta-section{display:grid;gap:1.5rem}
.insta-section > *{margin:0}
.insta-section .rail-head{margin:0}
.insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;list-style:none;margin:0;padding:0}
.insta-grid > *{margin:0}
.insta-grid .photo{aspect-ratio:1}
@media (max-width:640px){.insta-grid{grid-template-columns:1fr 1fr}}

/* ABOUT */
.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:end}
.about-hero > *{min-width:0;margin:0}
.about-hero .photo{aspect-ratio:4/3}
.about-hero .photo img{object-position:50% 30%}
@media (max-width:860px){.about-hero{grid-template-columns:1fr}}
.about-hero h1{font-size:var(--step-4);letter-spacing:-0.03em;line-height:0.98}
.byline{margin-top:1.5rem;padding-top:1.25rem;border-top:2px solid var(--line);display:grid;gap:0.1rem}
.byline > *{margin:0}
.byline .byline-name{font-size:var(--step-1);font-weight:700}
.byline .byline-role{color:var(--muted)}
.letter{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(20rem,1fr);gap:clamp(2rem,6vw,5rem)}
.letter > *{margin:0}
@media (max-width:1100px){.letter{grid-template-columns:1fr}}
.letter .prose > p:first-child{font-size:var(--step-2);font-weight:800;line-height:1.15;letter-spacing:-0.015em}
.turn,.is-style-turn{font-size:var(--step-1);font-weight:700;line-height:1.35;padding-left:1.1rem;border-left:6px solid var(--sage)}
.wp-block-pullquote.pull,.pull{margin:0;align-self:start;position:sticky;top:7.5rem;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem);text-align:left;color:var(--ink);font-size:inherit;line-height:inherit}
.pull{container-type:inline-size;overflow:hidden}
.wp-block-pullquote.pull blockquote,.pull blockquote{margin:0;padding:0;border:0;display:grid;gap:1.25rem;max-width:none;text-align:left}
/* Sized to the box, so the longest word always fits however narrow the column gets */
.pull blockquote p,.wp-block-pullquote.pull p{font-size:clamp(1.4rem,min(var(--step-2),10cqi),2.4rem);font-weight:800;line-height:1.15;letter-spacing:-0.015em;margin:0;padding:0;text-align:left;overflow-wrap:break-word;hyphens:none}
.pull cite,.pull figcaption{color:var(--muted);font-style:normal;font-size:var(--step-0);text-transform:none;text-align:left;margin:0;padding:0}
@media (max-width:1100px){.wp-block-pullquote.pull,.pull{position:static}}
.letter-end{margin-top:3rem;padding-top:2.25rem;border-top:2px solid var(--line);display:grid;gap:1.5rem;max-width:var(--measure)}
.letter-end > *{margin:0}
.letter-end p{font-size:var(--step-2);font-weight:800;line-height:1.15;letter-spacing:-0.015em}

/* Inner page heads */
.page-head{display:grid;gap:1.25rem;max-width:var(--measure);margin-bottom:clamp(2rem,5vw,3.5rem)}
.page-head > *{margin:0}
.page-head h1{letter-spacing:-0.025em}
.substack-box{margin-top:clamp(3rem,7vw,5rem);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.75rem);display:grid;grid-template-columns:1fr auto;gap:1.5rem 2.5rem;align-items:center;background:var(--surface)}
.substack-box > *{min-width:0;margin:0}
.substack-box .prose{gap:0.6rem}
.substack-box h2{font-size:var(--step-2)}
@media (max-width:760px){.substack-box{grid-template-columns:1fr}}

/* SHOP */
.shop-intro{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.shop-intro > *{min-width:0;margin:0}
.shop-intro .photo{aspect-ratio:3/4;max-height:640px}
@media (max-width:860px){.shop-intro{grid-template-columns:1fr}.shop-intro .photo{aspect-ratio:4/3}}
.book{height:100%;display:grid;grid-template-rows:auto 1fr;gap:1.25rem}
.book > *{margin:0}
.cover{aspect-ratio:3/4;border-radius:4px 12px 12px 4px;overflow:hidden;border:2px solid var(--line);box-shadow:8px 8px 0 var(--sage);background:var(--surface)}
.wp-block-image.cover img,.cover img{width:100%;height:100%;object-fit:cover;object-position:top}
/* A landscape book stands on the same baseline as the portrait ones */
.cover.is-landscape{border:0;box-shadow:none;background:none;border-radius:0;overflow:visible;display:grid;align-content:end}
.wp-block-image.cover.is-landscape img,.cover.is-landscape img{height:auto;aspect-ratio:4/3;border:2px solid var(--line);border-radius:4px 12px 12px 4px;box-shadow:8px 8px 0 var(--sage)}
.cover-soon{background:var(--sage-panel);color:var(--on-panel);display:grid;place-content:center;justify-items:center;gap:0.75rem;text-align:center;padding:1.5rem}
.cover-soon > *{margin:0}
.cover-soon .t{font-size:var(--step-2);font-weight:800;line-height:1.05}
.cover-soon .s{font-size:var(--step--1)}
.book-body{display:grid;gap:0.6rem;align-content:start}
.book-body > *{margin:0}
.skill{font-weight:700;color:var(--muted)}
.price{font-weight:700}
.book .wp-block-buttons{margin-top:0.5rem}

/* COACHING: each section is a stack with generous gaps; prices are solid green panels so they stand out */
.section.tight-top{padding-top:clamp(1rem,3vw,2rem)}
.stack{display:grid;gap:clamp(3rem,6vw,4.5rem)}
.stack > *{margin:0;min-width:0}
.section-head{display:grid;gap:1rem;max-width:var(--measure)}
.section-head > *{margin:0}
.eyebrow{font-size:var(--step--1);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.learn,.plans{display:grid;gap:1.5rem}
.learn > *,.plans > *{margin:0}
/* How it works: four numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;counter-reset:step}
.steps li{counter-increment:step;margin:0;background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.25rem 1.5rem;display:grid;gap:0.5rem;align-content:start;color:var(--muted)}
.steps li::before{content:counter(step);content:counter(step) / "";font-size:clamp(3rem,2.5rem + 2vw,4.5rem);font-weight:800;line-height:0.9;color:var(--sage);letter-spacing:-0.04em}
.steps li strong{display:block;font-size:var(--step-1);font-weight:800;color:var(--ink);line-height:1.2}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
/* At a glance */
.glance{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.glance li{margin:0;border-left:6px solid var(--sage);padding:0.25rem 0 0.25rem 1.1rem;display:grid;gap:0.2rem;color:var(--muted)}
.glance li strong{font-size:var(--step-2);font-weight:800;line-height:1.05;letter-spacing:-0.02em;color:var(--ink)}
@media (max-width:640px){.glance{grid-template-columns:1fr}}
.learn-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.learn-list li{background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.25rem 1.25rem 4.25rem;font-weight:700;font-size:var(--step-1);line-height:1.3;position:relative;margin:0;min-height:5rem;display:flex;align-items:center}
.learn-list li::before{content:"✓";content:"✓" / "";position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:2.2rem;height:2.2rem;border-radius:50%;background:var(--sage-panel);color:var(--on-panel);display:grid;place-items:center;font-size:1.2rem;line-height:1}
@media (max-width:640px){.learn-list{grid-template-columns:1fr}}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.plan-grid > *{margin:0}
@media (max-width:760px){.plan-grid{grid-template-columns:1fr}}
.plan{background:var(--sage-panel);color:var(--on-panel);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:0.9rem;align-content:start;box-shadow:8px 8px 0 var(--shadow)}
.plan > *{margin:0}
.plan h3{color:var(--on-panel);font-size:var(--step-1)}
.plan .amount{font-size:clamp(3rem,2rem + 4vw,5rem);font-weight:800;line-height:1;letter-spacing:-0.03em;color:var(--on-panel)}
.plan .per{font-size:var(--step-0);color:var(--on-panel)}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem)}
.terms > *{margin:0}
@media (max-width:760px){.terms{grid-template-columns:1fr}}
.term{display:grid;gap:1rem;align-content:start;background:var(--bg);border:2px solid var(--line);border-left:8px solid var(--sage);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem)}
.term > *{margin:0}
.callout{background:var(--bg);border:2px dashed var(--line);border-radius:var(--radius);padding:1rem 1.25rem;font-weight:700;font-size:var(--step-1);margin:0}
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.support-grid > *{margin:0}
@media (max-width:760px){.support-grid{grid-template-columns:1fr}}
.support-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.25rem);display:grid;gap:1rem;align-content:start}
.support-card > *{margin:0}
.support-card .amount{font-size:var(--step-3);font-weight:800;line-height:1;letter-spacing:-0.02em}
.aside-photo{aspect-ratio:4/3}
.prose ul.facts{list-style:none;padding:0;gap:0;background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden}
.prose ul.facts li{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:0.8rem 1.1rem;border-top:2px solid var(--soft-line)}
.prose ul.facts li:first-child{border-top:0}
.prose ul.facts li strong{color:var(--muted);font-weight:800}
.prose ul.topics{list-style:none;padding:0;gap:0.75rem}
.prose ul.topics li{border-left:6px solid var(--sage);padding-left:1rem}
.prose ul.topics li strong{display:block;font-size:var(--step-0)}
.split > .photo:first-child{order:0}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1.25fr 0.75fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.contact-grid > *{min-width:0;margin:0}
@media (max-width:920px){.contact-grid{grid-template-columns:1fr}}
.contact-form{display:grid;gap:1.5rem}
.field{display:grid;gap:0.45rem}
.field label,.field .label{font-weight:700}
.hint{font-size:var(--step--1);color:var(--muted);font-weight:400}
.contact-form input[type="text"],.contact-form input[type="email"],.contact-form input[type="tel"],.contact-form select,.contact-form textarea{font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--ink);border-radius:var(--radius);padding:0.75rem 0.9rem;min-height:54px;width:100%}
.contact-form textarea{min-height:10rem;resize:vertical}
.contact-form [aria-invalid="true"]{border-color:var(--err);border-width:3px}
.error-text{color:var(--err);font-weight:700;display:flex;gap:0.4rem;align-items:start}
.error-text::before{content:"!";content:"!" / "";display:inline-grid;place-items:center;width:1.4em;height:1.4em;flex:none;border-radius:50%;background:var(--err);color:var(--bg);font-size:0.8em;margin-top:0.15em}
.error-text[hidden]{display:none}
.check{display:grid;grid-template-columns:auto 1fr;gap:0.85rem;align-items:start}
.check input{width:28px;height:28px;margin:0.1rem 0 0;accent-color:var(--action)}
.field .check label{font-weight:400}
.hp-field{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.error-summary{border:3px solid var(--err);border-radius:var(--radius);padding:1.25rem 1.5rem;display:grid;gap:0.6rem;margin-bottom:1.5rem}
.error-summary[hidden],.success[hidden]{display:none}
.error-summary h2{font-size:var(--step-1);color:var(--err)}
.error-summary ul{margin:0;padding-left:1.25rem;display:grid;gap:0.25rem}
.error-summary a{color:var(--err)}
.success{border:3px solid var(--action);border-radius:var(--radius);padding:1.5rem;display:grid;gap:0.5rem;background:var(--surface);margin-bottom:1.5rem}
.success h2{font-size:var(--step-1)}
.aside-stack{display:grid;gap:1.25rem}
.aside-stack > *{margin:0}
.aside-card{border:2px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:grid;gap:0.9rem;background:var(--surface)}
.aside-card > *{margin:0}
.aside-card h2{font-size:var(--step-1)}
.aside-card .wp-block-button,body .aside-card .wp-block-button .wp-block-button__link{width:100%}
.email-row{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center}
.email-row strong,.email{font-weight:700;user-select:all;overflow-wrap:anywhere}
.copy-btn{min-height:44px;padding:0.4rem 0.95rem;border:2px solid var(--ink);color:var(--ink);background:var(--bg);border-radius:var(--radius);font:inherit;font-weight:700;font-size:var(--step--1);cursor:pointer}
.small,.is-style-small{font-size:var(--step--1);color:var(--muted)}
.plain-list{list-style:none;margin:0;padding:0;display:grid;gap:0.25rem}
.plain-list a{display:inline-flex;align-items:center;min-height:44px}
.plain-list li{min-height:44px;display:flex;align-items:center}

.a11y-list,.prose ul,.prose ol{display:grid;gap:0.6rem;padding-left:1.4rem;margin:0}

/* Ordinary pages (privacy policy, anything Burhana adds later) */
.entry > * + *{margin-top:1.15rem}
.entry > h2,.entry > h3{margin-top:2.25rem}
.entry h2{font-size:var(--step-1)}
.entry h3{font-size:var(--step-0)}

/* Footer */
.site-footer{border-top:2px solid var(--line);background:var(--surface)}
.site-footer > .wrap{padding-block:3rem 3.5rem;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem}
.site-footer > .wrap > *{min-width:0;margin:0}
@media (max-width:760px){.site-footer > .wrap{grid-template-columns:1fr}}
.footer-brand{display:grid;gap:1rem;justify-items:start;align-content:start}
.footer-brand > *{margin:0}
.footer-brand .brand-disc{width:140px;height:140px}
.footer-brand .brand-disc img{width:128px}
.site-footer h2{font-size:var(--step-0);font-weight:800;margin-bottom:0.6rem}
.site-footer .small{margin-top:1rem}
.site-footer .footer-credit{margin-top:0.35rem}

/* 404 */
.not-found{display:grid;gap:1.25rem;max-width:var(--measure)}
.not-found > *{margin:0}