/* TCH Financial - main stylesheet. Colours are the brand colours from the mock-up. */
:root{--navy:#23418d;--sky:#7cb9f2;--orange:#F5793B;--brown:#8D5A32;--gold:#E9B949;--slate:#2F3747;--sage:#8C9470;--steel:#6d7c93;--mist:#eef4fb;--sand:#f3efe8;
--font:Aptos,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--hero-font:"Outfit",system-ui,"Segoe UI",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.7 var(--font);color:var(--slate);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{width:min(1180px,100% - 3rem);margin-inline:auto}
h1,h2,h3{font-family:var(--font);font-weight:600;line-height:1.2;margin:0 0 1rem;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,2.6vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1rem;max-width:62ch}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}

/* Header */
.site-header{background:var(--navy);color:#fff}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:1.1rem;position:relative}
.logo img{height:46px;width:auto}
.nav{display:flex;gap:2rem}
.nav a{color:#fff;text-decoration:none;font-size:1rem;padding:.35rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--sky)}
.nav a[aria-current="page"]{border-color:var(--orange)}
.menu-btn{display:none;background:none;border:1px solid var(--sky);color:#fff;font:inherit;padding:.45rem 1rem;cursor:pointer}
@media(max-width:820px){
 .menu-btn{display:block}
 .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;gap:0;padding:0 0 1rem;z-index:10;border-top:1px solid rgba(255,255,255,.25)}
 .nav.open{display:flex}
 .nav a{padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.15)}
}

/* Picture panels: photo sits on a brand-colour panel offset behind it */
.slot{position:relative;margin:0 1.4rem 1.4rem 0;isolation:isolate}
.slot::before{content:"";position:absolute;right:-1.4rem;bottom:-1.4rem;width:72%;height:72%;background:var(--b,var(--sage));z-index:-1}
.slot img{width:100%;height:auto}
.slot.sage{--b:var(--sage)}.slot.sky{--b:var(--sky)}.slot.gold{--b:var(--gold)}.slot.navy{--b:var(--navy)}.slot.orange{--b:var(--orange)}.slot.steel{--b:var(--steel)}

/* Hero: quote sits over the sea image, right of centre where the sky is lightest */
.hero-img{position:relative;display:flex;align-items:center;min-height:clamp(320px,31vw,460px);overflow:hidden;background:#cfe6f8}
.hero-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero-img .wrap{position:relative;display:flex;justify-content:flex-end;padding-block:3rem}
.hero-img blockquote{width:min(54%,660px);margin:0 3% 0 0}
.hero-img blockquote p{font:400 clamp(1.5rem,2.5vw,2.3rem)/1.3 var(--hero-font);color:var(--slate);max-width:none;margin:0}
@media(prefers-reduced-motion:no-preference){.hero-img blockquote{animation:rise .9s ease-out both}@keyframes rise{from{opacity:0;transform:translateY(14px)}}}
@media(max-width:820px){
 .hero-img{display:block;min-height:0;background:#fff}
 .hero-img>img{position:static;height:210px}
 .hero-img .wrap{padding-block:2rem 0;display:block}
 .hero-img blockquote{width:auto;margin:0}
 .hero-img blockquote p{font-size:1.45rem}
}

/* Home */
.intro{padding-block:clamp(3rem,6vw,5rem)}
.intro .wrap{display:grid;grid-template-columns:6fr 5fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.statements{list-style:none;margin:0 0 0 clamp(0rem,6vw,5rem);padding:0}
.statements li{padding:1.1rem 0;border-top:1px solid #c9d3e2;font-size:1.15rem}
.statements li:last-child{border-bottom:1px solid #c9d3e2}
.clients{padding-block:clamp(1rem,3vw,2rem) clamp(3.5rem,7vw,6rem)}
.clients .wrap{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.clients ul,.bullets{padding-left:1.25rem;margin:0}
.clients li,.bullets li{padding:.4rem 0 .4rem .4rem;max-width:62ch}
.clients li::marker,.bullets li::marker{color:var(--orange)}
.clients .slot{margin-top:1.5rem;max-width:380px}
.pyramid{background:var(--mist);padding-block:clamp(3rem,6vw,5.5rem)}
.pyramid .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.pyramid img{width:100%;max-width:640px;margin-inline:auto}
.pyramid p:first-child{font-size:1.35rem;line-height:1.5;font-weight:400}
.objective{padding-block:clamp(3.5rem,7vw,6rem)}
.objective .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.pair p{font:400 clamp(1.3rem,2vw,1.7rem)/1.4 var(--font);margin:0;max-width:none}
.pair p+p{margin-top:2rem}
.pair p+p::before{content:"";display:block;width:3rem;height:2px;background:var(--orange);margin-bottom:1.6rem}

/* Services */
.areas{padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem)}
.area-grid{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 2rem}
.area-grid li{font:400 1.55rem/1.25 var(--font);padding-top:1rem;border-top:2px solid var(--gold);margin-bottom:2.2rem}
.process{padding-block:clamp(2rem,5vw,4rem) clamp(3.5rem,7vw,6rem)}
.process .wrap{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.process .slot{max-width:340px;margin-top:2.5rem}
.steps{list-style:none;margin:2rem 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:4rem 1fr;padding:1.3rem 0;border-top:1px solid #d5dbe6}
.steps li::before{content:counter(s);font:400 3rem/1 var(--font);color:var(--orange)}
.steps h3{font-size:1.3rem;margin-bottom:.3rem}.steps p{margin:0}
.different{background:var(--mist);padding-block:clamp(3rem,6vw,5.5rem)}
.different .wrap{display:grid;grid-template-columns:7fr 4fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.different .lead{font-size:1.35rem;line-height:1.5;font-weight:400;max-width:none}
.different .lead strong{font-weight:700}
.different .small{font-size:1rem}
.prepare{padding-block:clamp(3rem,6vw,5.5rem)}
.prepare .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.prepare ol{padding-left:1.4rem}.prepare li{padding:.5rem 0 .5rem .4rem}.prepare li::marker{font-size:1.3rem;font-weight:400;color:var(--orange)}

/* About */
.about-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:end;padding-block:clamp(3rem,6vw,5rem) 3rem}
.portrait{width:min(330px,80vw)}
.portrait img{aspect-ratio:386/458;object-fit:cover;width:100%}
.statement{background:var(--orange);color:var(--slate);padding:clamp(2rem,5vw,3.5rem);border-radius:56px 0 56px 0;font:400 clamp(1.7rem,3.2vw,2.7rem)/1.25 var(--font);margin:0;max-width:none}
.byline{margin:1.2rem 0 0;font-size:1rem}
.who{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);padding-block:1rem clamp(3rem,6vw,5rem);align-items:start}
.who section{background:var(--slate);color:#fff;border-radius:72px 0 72px 0;padding:clamp(2rem,4vw,3rem)}
.who section+section{margin-top:3rem}
.who h2{font-size:clamp(1.5rem,2.3vw,2rem);margin-bottom:1.4rem}
.who h2 span{color:var(--orange)}
.who .bullets li{padding-bottom:.9rem}
.who a{color:var(--gold)}
.approach-sec{padding-block:clamp(1rem,3vw,2rem) clamp(3.5rem,7vw,6rem)}
.approach-sec .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.approach-sec h2{color:var(--navy);font-weight:700}
.approach-sec .bullets li{padding:.55rem 0 .55rem .4rem}
.approach-sec strong{font-weight:700}

/* Fees + Contact (navy pages) */
body.navy{background:var(--navy);color:#fff}
body.navy a{color:var(--sky)}
.page-title{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:400}
.fees{padding-block:clamp(3.5rem,7vw,6rem)}
.fees .wrap{max-width:900px;margin-left:max(1.5rem,calc((100% - 1180px)/2 + 4rem))}
.fee-list{margin:3.5rem 0 0;border-bottom:1px solid rgba(255,255,255,.3)}
.fee-row{display:grid;grid-template-columns:11rem 1fr;gap:2rem;padding:1.3rem 0;border-top:1px solid rgba(255,255,255,.3)}
.fee-row dt{color:var(--gold);font-weight:600}.fee-row dd{margin:0;font-weight:500}
.contact{padding-block:clamp(3.5rem,7vw,6rem)}
.contact .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.contact .intro-text{padding-top:5rem;font-size:1.25rem}
.form-card{background:var(--sand);color:var(--slate);padding:clamp(1.5rem,3vw,2.5rem)}
.form-card label{display:block;font-weight:600;font-size:.95rem;margin:1.2rem 0 .4rem}
.form-card label:first-of-type{margin-top:0}
.form-card input,.form-card textarea{width:100%;font:inherit;padding:.75rem .85rem;border:1px solid #b9b3a8;background:#fff;color:var(--slate);border-radius:0}
.form-card textarea{min-height:11rem;resize:vertical}
.btn{margin-top:1.6rem;background:var(--orange);color:var(--slate);border:0;font:600 1rem var(--font);padding:.95rem 2.4rem;cursor:pointer}
.btn:hover{background:var(--gold)}.btn[disabled]{opacity:.6;cursor:wait}
.note{font-size:.95rem;margin:1.2rem 0 0}
.status{margin-top:1rem;font-weight:600;min-height:1.5rem}
.status.err{color:#a3220d}.status.ok{color:#1d5c2e}
.hp{position:absolute;left:-9999px}

/* Footer */
.site-footer{background:var(--navy);color:#fff;border-top:1px solid rgba(255,255,255,.4);padding-block:2.2rem;font-size:.9rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.site-footer p{margin:0;max-width:60ch}
.site-footer nav{display:flex;gap:1.8rem;flex-wrap:wrap}
.site-footer a{color:var(--sky);font-size:1rem}

/* Tablet and mobile */
@media(max-width:960px){
 .intro .wrap,.pyramid .wrap,.clients .wrap,.objective .wrap,.process .wrap,.different .wrap,.prepare .wrap,.contact .wrap,.who,.about-top,.approach-sec .wrap{grid-template-columns:1fr}
 .statements{margin-left:0}
 .who section+section{margin-top:0}
 .area-grid{grid-template-columns:repeat(2,1fr)}
 .intro .slot,.objective .slot,.different .slot,.prepare .slot,.approach-sec .slot{max-width:460px}
 .contact .intro-text{padding-top:0}
 .fees .wrap{margin-inline:auto}.fee-row{grid-template-columns:1fr;gap:.4rem}
 .objective .slot,.clients .slot{order:2}
}
@media(max-width:480px){body{font-size:1rem}.area-grid{grid-template-columns:1fr}.logo img{height:38px}.who section{border-radius:48px 0 48px 0}.statement{border-radius:40px 0 40px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}