/*
 * HOD theme styles that theme.json cannot express.
 * Sections, in order:
 *   1. Base            5. Block styles (picked in the editor's Styles panel)
 *   2. Layout helpers  6. Section patterns (Who we are, Mercy Diet, Next steps, Welcome)
 *   3. Buttons (.pill) 7. Footer
 *   4. Sections        8. Motion, phones, reduced motion
 * Colours: use var(--wp--preset--color--<slug>) from theme.json, not hex codes.
 */

/* 1. Base ------------------------------------------------------------------ */
:root{
	--navy:var(--wp--preset--color--navy);--night:var(--wp--preset--color--night);--blue:var(--wp--preset--color--blue);
	--red:var(--wp--preset--color--red);--coral:var(--wp--preset--color--coral);--pink:var(--wp--preset--color--pink);
	--mist:var(--wp--preset--color--mist);--slate:var(--wp--preset--color--slate);--muted:var(--wp--preset--color--muted);
	--ink:var(--wp--preset--color--ink);--white:var(--wp--preset--color--white);
	--serif:var(--wp--preset--font-family--newsreader);
}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;overflow-wrap:break-word}
a{text-decoration:none}
/* Link hover is set per place, never globally: a global red hover vanishes on red sections. */
.hod-plain .wp-block-post-content a:not(.wp-element-button):hover{color:var(--red)}
.titem:hover,.titem:focus-visible{color:#fff}.titem:hover .go{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
html [hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block-start:0!important}
main.hod-main{margin:0}

/* 2. Layout helpers ---------------------------------------------------------- */
.w{max-width:1280px;margin-left:auto!important;margin-right:auto!important;padding-left:48px;padding-right:48px;box-sizing:border-box;width:100%;container-type:inline-size}
.two{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
[class*="hod-stack-"]{display:flex;flex-direction:column}
.hod-stack-16{gap:16px}.hod-stack-20{gap:20px}.hod-stack-24{gap:24px}.hod-stack-40{gap:40px}.hod-stack-48{gap:48px}.hod-stack-56{gap:56px}
[class*="hod-stack-"]>*,.two>*,.hod-headrow>*,.w>*{margin-block:0!important}
.hod-headrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 32px}
.hod-headrow-center{align-items:center}
.hod-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lede{margin:0;font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--slate)}
.lede-dark{color:#D5D9E8}

/* 3. Buttons ----------------------------------------------------------------- */
.u{position:relative;display:inline-block}
.u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .38s var(--wp--custom--ease)}
.pill,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;font-weight:700;font-size:16px;box-sizing:border-box;font-family:inherit;cursor:pointer;border:0;white-space:nowrap;text-decoration:none;transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s ease}
.pill:hover .u::after{transform:scaleX(1)}
.pill-sm{min-height:44px;padding:0 18px;font-size:14px}
.p-red{background:var(--red);color:#fff}.p-red:hover{background:#fff;color:var(--red)}
.p-redl{background:var(--red);color:#fff}.p-redl:hover{background:var(--navy);color:#fff}
.glass,.is-style-hod-glass .wp-block-button__link{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.45);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
a.glass:hover,button.glass:hover,.is-style-hod-glass .wp-block-button__link:hover{background:#fff;border-color:#fff;color:var(--navy)}
.p-white,.is-style-hod-white .wp-block-button__link{background:#fff;color:var(--navy)}
.p-white:hover,.is-style-hod-white .wp-block-button__link:hover{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 2px #fff}
.p-line,.is-style-hod-line .wp-block-button__link{background:transparent;border:2px solid #fff;color:#fff}
.p-line:hover,.is-style-hod-line .wp-block-button__link:hover{background:#fff;color:var(--red)}
.pill-line,.is-style-hod-outline .wp-block-button__link{background:transparent;border:2px solid #C5CADB;color:var(--blue)}
.pill-line:hover,.is-style-hod-outline .wp-block-button__link:hover{border-color:var(--red);background:var(--red);color:#fff}
.wp-block-buttons{gap:12px}
.wp-block-button__link:hover{text-decoration:none}

/* 4. Sections ---------------------------------------------------------------- */
.sheet{position:relative;border-radius:40px 40px 0 0;margin-top:-40px!important;overflow-x:clip}
.wp-block-post-content>.sheet:first-child{margin-top:0!important}
.hod-sec{padding:120px 0 168px}
.h2,.is-style-hod-display{margin:0;font-stretch:125%;font-weight:900;font-size:clamp(44px,5vw,72px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:break-word}
.is-style-hod-white{background:#fff;color:var(--ink)}
.is-style-hod-mist{background:var(--mist);color:var(--ink)}
.is-style-hod-navy{background:var(--navy);color:#fff}
.is-style-hod-red{background:var(--red);color:#fff}
.is-style-hod-blue{background:var(--blue);color:#fff}
.is-style-hod-white .is-style-hod-display,.is-style-hod-mist .is-style-hod-display,.is-style-hod-white .h2,.is-style-hod-mist .h2{color:var(--navy)}

/* 5. Block styles ------------------------------------------------------------- */
.is-style-hod-serif{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.32}
.is-style-hod-label{font-weight:700;font-size:18px;color:var(--red)}
.is-style-hod-navy .is-style-hod-label,.is-style-hod-blue .is-style-hod-label{color:var(--coral)}
.is-style-hod-red .is-style-hod-label{color:#FFE1E3}
.is-style-hod-lede{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--slate)}
.is-style-hod-navy .is-style-hod-lede{color:#D5D9E8}
.hod-badge{align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.16);font-weight:700;font-size:13px}
/* Values list (List block, style "HOD values") */
ul.is-style-hod-values{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vrow{display:flex;align-items:center;gap:28px;padding:10px 0;border-bottom:1px solid #222A55;position:relative;cursor:default;margin:0}
.vrow::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--wp--custom--ease)}
.vrow:hover::after{transform:scaleX(1)}
.vl{flex:0 0 84px;font-stretch:125%;font-weight:900;font-size:64px;line-height:1;color:var(--red);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.vn{font-stretch:110%;font-weight:700;font-size:26px;line-height:1.15;transition:transform .45s cubic-bezier(.2,.8,.2,1),color .3s ease}
.vrow:hover .vl{transform:scale(1.12)}.vrow:hover .vn{transform:translateX(10px);color:#fff}

/* 6. Section patterns ------------------------------------------------------------ */
/* Who we are */
.hod-who{padding:128px 0 168px}
.hod-who .is-style-hod-serif.is-big{font-size:clamp(30px,3vw,42px);line-height:1.2}
.hod-who .is-style-hod-serif{color:#E6E9F4}
.hod-who .is-style-hod-serif.is-big{color:#fff}
/* Mercy Diet panel: continues the white section above it */
.hod-tail{padding:0 0 168px;margin-top:-40px!important}
.hod-feature{position:relative;border-radius:40px;overflow:hidden;background:radial-gradient(120% 90% at 0% 0%,#7A0F14 0%,rgba(122,15,20,0) 55%),radial-gradient(120% 90% at 100% 100%,#23307A 0%,rgba(35,48,122,0) 60%),var(--navy);color:#fff;display:flex!important;flex-wrap:wrap;align-items:center;gap:40px;padding:56px}
.hod-feature>.hod-feature-text{flex:1 1 380px;min-width:0}
.hod-feature>.hod-feature-media{flex:1 1 420px;display:flex;justify-content:center;min-width:0}
.hod-feature .wp-block-image{margin:0;width:100%;max-width:520px}
.hod-feature .wp-block-image img{width:100%;border-radius:28px;display:block;background:#fff}
.hod-feature .hod-feature-title{margin:0;font-stretch:125%;font-weight:900;font-size:min(clamp(40px,4.4vw,64px),16.4cqi);line-height:.9;text-transform:uppercase}
.hod-feature .is-style-hod-label{color:var(--pink);font-size:17px}
.hod-feature p:not([class*="is-style"]){color:#D5D9E8;font-size:18px;line-height:1.6;max-width:520px;margin:0}
/* Next steps tiles */
.steps{display:grid!important;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.tile{position:relative;height:100%;box-sizing:border-box;border-radius:28px;display:flex!important;flex-direction:column;gap:14px;padding:32px 28px;background:var(--mist);color:var(--ink);container-type:inline-size;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.tile>*{margin:0!important}
.tile:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(10,15,44,.18)}
.tile .num{display:inline-block;font-stretch:125%;font-weight:900;font-size:min(60px,20.5cqi);line-height:.8;color:var(--red);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .num{transform:translateX(8px) rotate(-6deg)}
.tile .tile-title{font-stretch:125%;font-weight:900;font-size:min(26px,13.7cqi);line-height:1;text-transform:uppercase;color:var(--navy)}
.tile .tile-text{font-size:15px;line-height:1.5;color:var(--slate)}
.tile .tile-cta{margin-top:auto!important;font-weight:700;font-size:15px;color:var(--blue)}
.tile .tile-cta a{color:inherit;text-decoration:none}
.tile .tile-cta a::after{content:"";position:absolute;inset:0;border-radius:28px}
.tile:hover .tile-cta a{text-decoration:underline;text-underline-offset:4px}
.tile-lead{background:var(--navy);color:#fff;padding:36px;min-height:340px;gap:16px}
.tile-lead .num{font-size:min(80px,20.5cqi)}
.tile-lead .tile-title{color:#fff;font-size:min(40px,20.5cqi)}
.tile-lead .tile-text{color:#D5D9E8;font-size:17px}
.tile-lead .tile-cta{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--red);color:#fff}
.tile-lead:hover .tile-cta a{text-decoration:none}
/* Welcome (Cover block) */
.hod-welcome.wp-block-cover{min-height:max(760px,80svh);padding:0;align-items:flex-end;color:#fff;background:var(--navy)}
.hod-welcome .wp-block-cover__image-background{filter:grayscale(1) contrast(1.1)}
.hod-welcome .wp-block-cover__background{background:linear-gradient(90deg,rgba(10,15,44,.92) 0%,rgba(10,15,44,.55) 50%,rgba(10,15,44,.15) 100%)!important;opacity:1!important}
.hod-welcome::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#D2191F 0%,#23307A 100%);mix-blend-mode:color;opacity:.85;pointer-events:none}
.hod-welcome .wp-block-cover__inner-container{width:100%;z-index:2}
.hod-welcome .w{padding-top:120px;padding-bottom:160px}
.hod-welcome .is-style-hod-serif{max-width:760px}
.hod-welcome .hod-sign{display:flex;flex-direction:column;gap:4px}
.hod-welcome .hod-sign p{margin:0}
.hod-sign-name{font-weight:800;font-size:18px}.hod-sign-role{font-size:15px;color:#D5D9E8}

/* 7. Footer ---------------------------------------------------------------------- */
.foot{background:var(--night);color:#C9CEE0;padding:96px 0 40px}
.foot a{color:#E4E7F2;text-decoration:none;overflow-wrap:anywhere}.foot a:hover{color:#fff;text-decoration:underline}
.foot-top{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-end}
.foot-brand{max-width:540px}
.foot-brand .wp-block-image{margin:0}.foot-brand .wp-block-image img{height:54px;width:auto}
.foot-brand .is-style-hod-serif{font-size:28px;line-height:1.25;color:#fff}
.foot .hod-newsletter{flex:0 1 440px;min-width:0}
.fcols{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid #262E5C;padding-top:40px}
.fcols>*{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5;margin:0!important}
.fcols p{margin:0}
.fcols .foot-h{font-weight:700;color:#fff}
.foot-bottom{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:14px;color:#8D95B5}
.foot-bottom p{margin:0}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
/* Newsletter (WPForms) on the dark footer */
.foot .hod-newsletter .wpforms-container{margin:0!important}

/* Plain pages (Legal, Thanks, news posts) */
.hod-plain{padding:72px 0 120px}
.hod-plain .wp-block-post-title{font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(40px,6vw,80px);line-height:.92;margin:0 0 32px;color:var(--navy)}
.hod-plain .wp-block-post-content>*{max-width:760px}
.hod-plain .wp-block-post-content{font-size:18px;line-height:1.65;color:var(--slate)}

/* 8. Motion, phones, reduced motion ---------------------------------------------- */
.kb{animation:hod-kb 24s ease-in-out infinite alternate}
@keyframes hod-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
@supports (animation-timeline:view()){
	.rv{animation:hod-rv linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
	.vrow{animation:hod-vin linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
	.vl{animation:hod-vfill linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
	@keyframes hod-rv{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
	@keyframes hod-vin{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
	@keyframes hod-vfill{from{color:transparent;-webkit-text-stroke:1.5px var(--red)}to{color:var(--red);-webkit-text-stroke:1.5px var(--red)}}
}
@media (max-width:1200px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps .tile-lead{grid-column:span 2}}
@media (max-width:980px){.two{grid-template-columns:minmax(0,1fr);gap:40px}.cards3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
	.w{padding-left:16px;padding-right:16px}
	.sheet{border-radius:24px 24px 0 0;margin-top:-24px!important}
	.hod-tail{margin-top:-24px!important;padding-bottom:120px}
	.hod-sec,.hod-who{padding:88px 0 120px}
	.h2,.is-style-hod-display{font-size:clamp(34px,10vw,52px)}
	.cards3,.steps,.fcols{grid-template-columns:minmax(0,1fr)}
	.steps .tile-lead{grid-column:auto}
	.hod-feature{padding:28px;border-radius:28px}
	.vl{flex-basis:56px;font-size:48px}.vn{font-size:21px}
	.foot .hod-newsletter{flex:1 1 100%}
	.hod-welcome .w{padding-top:88px;padding-bottom:120px}
}
@media (prefers-reduced-motion:reduce){.kb,.rv,.vrow,.vl{animation:none!important}}