/* Grace page styles: home (loaded after base.css) */
:root{--navy:    #0d1b2e;
    --navy-2:  #162236;
    --teal:    #2EC4B6;
    --teal-l:  #5DD6CA;
    --teal-10: rgba(46,196,182,0.1);
    --teal-20: rgba(46,196,182,0.22);
    --coral:   #E85D4A;
    --coral-l: #F07060;
    --white:   #ffffff;
    --cream:   #F5FAFA;
    --gray:    #F0F6F6;
    --border:  #DDE9E9;
    --text:    #0d1b2e;
    --muted:   #64748b;
    --light:   #a0aec0;
    --teal-dark: #0F6E56;
    --coral-dark: #9C3B29;}
h1, h2, h3, h4{font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;}
.dd-section{font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--light);
    padding: 10px 14px 4px; display: block;}
.hero{background: var(--white); padding: 72px 0 0; overflow: hidden; position: relative;}
.hero-inner{display: grid; grid-template-columns: 1fr 1fr;
    gap: 48px; align-items: start;}
.hero-left{padding-bottom: 72px;}
.hero h1{font-size: 54px; font-weight: 800;
    line-height: 1.08; color: var(--navy);
    letter-spacing: -0.035em; margin-bottom: 22px;}
.hero h1 .accent{color: var(--teal);}
.hero-sub{font-size: 18px; font-weight: 300;
    color: var(--muted); line-height: 1.65;
    margin-bottom: 36px; max-width: 440px;}
.cta-row{display: flex; gap: 12px; align-items: center; flex-wrap: wrap;}
.btn-primary{font-size: 14px; font-weight: 600;
    background: var(--coral); color: var(--white);
    padding: 13px 24px; border-radius: 7px;
    text-decoration: none; transition: background 0.2s;}
.btn-primary:hover{background: var(--coral-l);}
.btn-outline{font-size: 14px; font-weight: 500; color: var(--navy);
    padding: 13px 24px; border-radius: 7px;
    text-decoration: none; border: 1.5px solid var(--border);}
.btn-outline:hover{border-color: var(--navy);}
.hero-graphic{position: relative; height: 480px;
    display: flex; align-items: center; justify-content: center;}
.hero-photo{width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 24px 64px rgba(13,27,46,.18);display:block}
.hc-viewport{overflow:hidden;min-height:480px;display:flex;align-items:center}
.hc-pause{all:unset;position:absolute;right:calc(100% + 40px);bottom:0;width:28px;height:28px;cursor:pointer;z-index:2}
.hc-pause svg{display:block;transform:rotate(-90deg)}
.hc-pause-track{fill:none;stroke:var(--border);stroke-width:2}
.hc-pause-ring{fill:none;stroke:var(--light);stroke-width:2;stroke-linecap:round;stroke-dasharray:69.1px;stroke-dashoffset:69.1px}
.hc-pause.is-paused .hc-pause-ring{animation-play-state:paused}
@keyframes hc-ring-fill{from{stroke-dashoffset:69.1px}to{stroke-dashoffset:0}}
.hc-skip{all:unset;position:absolute;right:calc(100% + 78px);bottom:7px;width:14px;height:14px;cursor:pointer;color:var(--light);opacity:.55;transition:opacity .2s ease;z-index:2}
.hc-skip:hover{opacity:1}
.hc-skip svg{display:block}
.hc-icon-pause,.hc-icon-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.hc-icon-pause{display:flex;gap:2px}
.hc-icon-pause span{width:2px;height:7px;background:var(--light);border-radius:1px;display:block}
.hc-icon-play{width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--light);margin-left:1px}
.hc-heading{margin-bottom:16px}
.hc-greater{color:var(--navy)}
.hc-stat-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hc-stat-num{font-size:21px;font-weight:800}
.hc-stat-num.client{color:var(--teal-dark)}
.hc-stat-num.research{color:var(--coral-dark)}
.hc-stat-desc{font-size:15px;color:var(--muted);line-height:1.6;max-width:420px}
.hc-source{font-size:11px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 0}
.hc-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-top:6px}
.hc-badge.client{background:var(--teal-10);color:var(--teal-dark)}
.hc-badge.research{background:rgba(232,93,74,.12);color:var(--coral-dark)}
.hc-cta{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--teal);padding-bottom:2px;margin-top:24px}
.hc-heading-wrap{position:relative;margin-top:130px}
.hc-heading-wrap.is-intro{margin-top:0}
.hc-peek{all:unset;position:absolute;left:0;bottom:100%;max-width:100%;height:58px;overflow:hidden;cursor:pointer;box-sizing:border-box;white-space:nowrap;transition:opacity .3s ease;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);}
.hc-peek.is-hidden{opacity:0;pointer-events:none}
.hc-peek-label{font-size:54px;font-weight:800;color:var(--navy);letter-spacing:-.035em;line-height:1.08;display:block}
.trust-bar{background: var(--gray); margin-top: 24px; padding: 22px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.trust-inner{display: flex; align-items: center; gap: 40px;}
.trust-label{font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--light);
    white-space: nowrap; flex-shrink: 0;}
.trust-logos{display: flex; align-items: center; gap: 36px; flex-wrap: wrap;}
.trust-logo{font-size: 13px; font-weight: 500; color: #b8b4ac; letter-spacing: 0.03em;}
.results{padding: 96px 0; background: var(--white);}
.results h2{font-size: 40px; font-weight: 800; color: var(--navy);
    letter-spacing: -0.03em; line-height: 1.1;
    margin-top: 10px; max-width: 540px;}
.results-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px;}
.result-card{background: var(--cream); border-radius: 14px;
    padding: 36px 30px; border: 1px solid var(--border);
    position: relative; overflow: hidden;}
.result-card::before{content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, var(--teal), var(--coral));}
.result-card .big-num{font-size: 52px; font-weight: 800; color: var(--navy);
    letter-spacing: -0.04em; line-height: 1; margin-bottom: 14px;}
.result-card .big-num span{color: var(--teal);}
.result-card p{font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 20px;}
.result-source{font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--light);
    padding-top: 16px; border-top: 1px solid var(--border);}
.problem{padding: 96px 0; background: var(--cream);}
.two-col{display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;}
.problem h2{font-size: 38px; font-weight: 800; color: var(--navy);
    letter-spacing: -0.03em; line-height: 1.1;
    margin-top: 10px; margin-bottom: 18px;}
.problem .lead{font-size: 16px; color: var(--muted); line-height: 1.7; font-weight: 300;}
.problem-list{list-style: none; display: flex; flex-direction: column;}
.problem-item{padding: 22px 0; border-bottom: 1px solid var(--border);}
.problem-item:first-child{border-top: 1px solid var(--border);}
.problem-item h4{font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 5px; line-height: 1.4;}
.problem-item p{font-size: 14px; color: var(--muted); line-height: 1.65;}
.how{padding: 96px 0; background: var(--white);}
.how h2{font-size: 38px; font-weight: 800; color: var(--navy);
    letter-spacing: -0.03em; line-height: 1.1;
    margin-top: 10px; margin-bottom: 52px; max-width: 480px;}
.how-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.how-card{display: flex; flex-direction: column; gap: 14px;}
.how-icon{width: 48px; height: 48px; background: var(--teal-10);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;}
.how-card h4{font-size: 17px; font-weight: 700; color: var(--navy);}
.how-card p{font-size: 14px; color: var(--muted); line-height: 1.65;}
.programmes{padding: 96px 0; background: var(--gray);}
.section-hdr{display: flex; align-items: flex-end;
    justify-content: space-between; margin-bottom: 44px;}
.section-hdr h2{font-size: 38px; font-weight: 800; color: var(--navy);
    letter-spacing: -0.03em; line-height: 1.1; margin-top: 10px;}
.see-all{font-size: 13px; font-weight: 600; color: var(--coral);
    text-decoration: none; border-bottom: 1px solid var(--coral);
    padding-bottom: 2px; margin-bottom: 6px; flex-shrink: 0;}
.prog-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.prog-card{background: var(--white); border-radius: 14px;
    padding: 30px 24px; border: 1.5px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;}
.prog-card:hover{border-color: var(--teal);
    box-shadow: 0 4px 24px rgba(46,196,182,0.15);}
.prog-icon{width: 44px; height: 44px; background: var(--teal-10);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;}
.prog-for{font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal);}
.prog-card h3{font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.3;}
.prog-card p{font-size: 13px; color: var(--muted); line-height: 1.65; flex: 1;}
.prog-link{font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; margin-top: 4px;}
.prog-link::after{content: ' →';}
.orp-badge{display: inline-block; font-size: 10px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    background: var(--teal-10); color: var(--teal);
    border: 1px solid var(--teal-20); padding: 3px 8px;
    border-radius: 4px; width: fit-content;}
.human-edge{background: var(--navy); padding: 96px 0; position: relative; overflow: hidden;}
.human-edge::after{content: ''; position: absolute; bottom: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(46,196,182,0.12) 0%, transparent 65%);
    pointer-events: none;}
.edge-inner{display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;}
.human-edge .eyebrow{color: var(--teal);}
.human-edge h2{font-size: 38px; font-weight: 800; color: var(--white);
    letter-spacing: -0.03em; line-height: 1.1; margin-top: 10px; margin-bottom: 18px;}
.human-edge > .container > p, .human-edge .edge-inner > div > p{font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.7; font-weight: 300; margin-bottom: 30px;}
.human-edge .prog-card p{color: var(--muted); font-weight: 400; margin-bottom: 0}
.btn-amber{font-size: 14px; font-weight: 600;
    background: var(--coral); color: var(--white);
    padding: 13px 24px; border-radius: 7px; text-decoration: none;
    display: inline-block; transition: background 0.2s;}
.btn-amber:hover{background: var(--coral-l);}
.edge-points{list-style: none; display: flex; flex-direction: column; gap: 20px;}
.edge-points li{display: flex; gap: 14px; align-items: flex-start;
    font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.6;}
.edge-num{font-size: 11px; font-weight: 700; color: var(--white);
    background: var(--teal); border-radius: 50%;
    width: 22px; height: 22px; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;}
.testimonials{padding: 96px 0; background: var(--white);}
.testimonials h2{font-size: 38px; font-weight: 800; color: var(--navy);
    letter-spacing: -0.03em; line-height: 1.1; margin-top: 10px; margin-bottom: 48px;}
.testi-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.testi{background: var(--cream); border-radius: 14px;
    padding: 32px; display: flex; flex-direction: column; gap: 20px;
    border: 1px solid var(--border);}
.quote{font-size: 15px; color: var(--navy); line-height: 1.65; font-style: italic;}
.quote::before{content: '\201C'; color: var(--teal); font-size: 32px; line-height: 0; vertical-align: -10px; margin-right: 3px; font-style: normal;}
.attr{display: flex; align-items: center; gap: 12px; margin-top: auto;}
.avatar{width: 40px; height: 40px; border-radius: 50%;
    background: var(--teal-10); border: 1.5px solid var(--teal-20);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--teal); flex-shrink: 0;}
.attr-name{font-size: 14px; font-weight: 600; color: var(--navy);}
.attr-role{font-size: 12px; color: var(--light);}
.lead-magnet{padding: 96px 0; background: var(--cream);}
.lm-inner{display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;}
.lm-left h2{font-size: 36px; font-weight: 800; color: var(--navy);
    letter-spacing: -0.03em; line-height: 1.1; margin-top: 10px; margin-bottom: 14px;}
.lm-left p{font-size: 16px; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 24px;}
.checklist{list-style: none; display: flex; flex-direction: column; gap: 10px;}
.checklist li{font-size: 14px; color: var(--text); display: flex; gap: 10px; align-items: flex-start; line-height: 1.5;}
.checklist li::before{content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0;}
.lm-form{background: var(--white); border: 1.5px solid var(--border);
    border-radius: 16px; padding: 40px;
    box-shadow: 0 4px 32px rgba(13,27,46,0.06);}
.guide-card{background: var(--navy); border-radius: 10px;
    padding: 22px; margin-bottom: 28px;
    display: flex; align-items: center; gap: 14px;}
.guide-icon{width: 40px; height: 52px; background: var(--teal);
    border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;}
.guide-title{font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.4;}
.guide-sub{font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 3px;}
.form-row input, .form-row select{width: 100%; padding: 11px 14px; border: 1.5px solid var(--border);
    border-radius: 7px; font-size: 14px; color: var(--text);
    background: var(--white); outline: none; font-family: inherit; transition: border-color 0.2s;}
.form-row input:focus, .form-row select:focus{border-color: var(--teal);}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-note{font-size: 11px; color: var(--light); text-align: center; margin-top: 12px;}
/* Lead-magnet success state: hide the form, show a prominent thank-you */
.lm-success{display:none;text-align:center;padding:24px 8px}
.lm-form.is-submitted .lm-fields{display:none}
.lm-form.is-submitted .lm-success{display:block}
.lm-success-icon{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.lm-success h3{font-size:23px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:8px;line-height:1.25}
.lm-success p{font-size:14px;color:var(--muted);line-height:1.6}
.lm-success a{color:var(--coral);font-weight:600;text-decoration:none}
.lm-success a:hover{text-decoration:underline}
@media(max-width:768px){
.section{padding:52px 0}
.page-hero{padding:52px 0 44px}
.contact-section{padding:60px 0}
.page-hero h1{font-size:32px}
.section h2{font-size:26px}
.page-hero .page-sub{font-size:15px}
.step-list{gap:20px}
.contact-inner{grid-template-columns:1fr;gap:32px}
.form-row.two{grid-template-columns:1fr;gap:12px}
.format-bar{flex-direction:column;gap:8px}
}
@media(max-width:480px){
.page-hero h1{font-size:28px}
.section h2{font-size:22px}
.contact-form{padding:28px 20px}
}
@media(max-width:768px){
.hero{padding:52px 0 40px}
.hero-inner{grid-template-columns:1fr;gap:40px}
.hero-left{padding-bottom:0}
.hero-left h1{font-size:40px}
.hero-graphic{display:block;height:260px}
.hc-heading-wrap{margin-top:40px}
.hc-heading-wrap.is-intro{margin-top:0}
.hc-peek{height:44px}
.hc-peek-label{font-size:40px}
.hc-pause{right:auto;left:16px;bottom:16px;background:rgba(13,27,46,.55);border-radius:50%;box-shadow:0 2px 8px rgba(13,27,46,.25)}
.hc-pause-track{stroke:rgba(255,255,255,.4)}
.hc-pause-ring{stroke:#fff}
.hc-icon-pause span{background:#fff}
.hc-icon-play{border-color:transparent transparent transparent #fff}
.hc-skip{right:auto;left:52px;bottom:16px;width:28px;height:28px;color:#fff;opacity:.85;background:rgba(13,27,46,.55);border-radius:50%;box-shadow:0 2px 8px rgba(13,27,46,.25);display:flex;align-items:center;justify-content:center}
.cta-row{flex-direction:column;gap:12px}
.cta-row a{width:100%;text-align:center;box-sizing:border-box}
.hc-viewport{min-height:auto}
.hc-stat-desc{max-width:none}
.trust-inner{flex-direction:column;gap:14px;text-align:center}
.trust-logos{justify-content:center;gap:24px}
.results-grid{grid-template-columns:1fr;gap:14px;margin-top:36px}
.how-grid{grid-template-columns:1fr;gap:24px}
.prog-grid{grid-template-columns:1fr}
.edge-inner{grid-template-columns:1fr;gap:40px}
.edge-points{padding:0;margin:0}
.human-edge{padding:64px 0}
.programmes .prog-grid{grid-template-columns:1fr}
.section-hdr{flex-direction:column;align-items:flex-start;gap:12px}
.testi-grid{grid-template-columns:1fr}
.lm-inner{grid-template-columns:1fr;gap:40px}
.stats-row{flex-direction:column;gap:24px}
}
