/*
Theme Name: Scott Pearce
Theme URI: https://www.scottpearce.co.uk
Author: Scott Pearce
Description: Bespoke Apple-esque one-page site for scottpearce.co.uk, with enquiry form and motion.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: scottpearce-holding
*/

:root{
	--bg:#ffffff; --text:#1d1d1f; --muted:#6e6e73; --line:#d2d2d7;
	--accent:#0071e3; --accent-hover:#0077ed; --bg-alt:#f5f5f7;
	--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--maxw:720px;
}
:root[data-theme="dark"]{
	--bg:#000000; --text:#f5f5f7; --muted:#86868b; --line:#2a2a2c;
	--accent:#2997ff; --accent-hover:#47a6ff; --bg-alt:#1c1c1e;
}
@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]){
		--bg:#000000; --text:#f5f5f7; --muted:#86868b; --line:#2a2a2c;
		--accent:#2997ff; --accent-hover:#47a6ff; --bg-alt:#1c1c1e;
	}
}
*,*::before,*::after{box-sizing:border-box;}
body{
	margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
	font-size:17px; line-height:1.55; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased;
	transition:background-color .3s ease,color .3s ease; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none;}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.35rem,5vw,2rem);}

/* Top bar */
.topbar{position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
	padding:.9rem clamp(1.35rem,5vw,2rem);
	background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
	border-bottom:1px solid transparent; transition:border-color .3s;}
.topbar.scrolled{border-bottom-color:var(--line);}
.topbar .mark{font-weight:600; letter-spacing:-0.02em; opacity:0; transform:translateY(-6px); transition:opacity .4s, transform .4s; color:var(--text);}
.topbar.scrolled .mark{opacity:1; transform:none;}
.theme-toggle{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text);
	cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background-color .2s,border-color .2s;}
.theme-toggle:hover{background:var(--bg-alt);}
.theme-toggle svg{width:18px; height:18px;}
.icon-sun{display:none;} .icon-moon{display:block;}
:root[data-theme="dark"] .icon-sun{display:block;} :root[data-theme="dark"] .icon-moon{display:none;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .icon-sun{display:block;} :root:not([data-theme="light"]) .icon-moon{display:none;} }

/* Hero */
.hero{position:relative; text-align:center; padding:clamp(4.5rem,15vw,9rem) 0 clamp(2.5rem,7vw,4rem); overflow:hidden;}
.hero::before{content:""; position:absolute; top:-30%; left:50%; width:min(760px,120vw); height:min(760px,120vw);
	transform:translateX(-50%); border-radius:50%; z-index:0; pointer-events:none;
	background:radial-gradient(circle at center, color-mix(in srgb,var(--accent) 26%,transparent), transparent 62%);
	filter:blur(20px); opacity:.55; animation:glow 12s ease-in-out infinite alternate;}
@keyframes glow{ from{transform:translateX(-50%) scale(.9); opacity:.4;} to{transform:translateX(-52%) scale(1.12); opacity:.7;} }
.hero .container{position:relative; z-index:1;}
.eyebrow{color:var(--accent); font-weight:600; font-size:clamp(.95rem,2.2vw,1.15rem); margin:0 0 1rem;}
.hero h1{font-weight:600; letter-spacing:-0.035em; line-height:1; font-size:clamp(3.4rem,13vw,7rem); margin:0 0 1.4rem;}
.hero .lead{color:var(--muted); font-size:clamp(1.15rem,2.4vw,1.4rem); max-width:34ch; margin:0 auto; line-height:1.5;}

/* Hero entrance */
.rise{opacity:0; transform:translateY(18px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;}
.rise.d1{animation-delay:.05s;} .rise.d2{animation-delay:.18s;} .rise.d3{animation-delay:.32s;}
@keyframes rise{ to{opacity:1; transform:none;} }

/* Sections */
section{position:relative;}
.bio{padding:clamp(1.5rem,5vw,3rem) 0 clamp(2.5rem,7vw,4rem);}
.bio p{margin:0 0 1.3rem; font-size:clamp(1.05rem,2vw,1.2rem);}
.bio .sub{font-weight:600; letter-spacing:-0.01em; color:var(--text); font-size:1.05rem; margin:2rem 0 .8rem;}
.bio ul{list-style:none; margin:0 0 1.4rem; padding:0;}
.bio li{position:relative; padding-left:1.7rem; margin-bottom:.7rem; color:var(--text); font-size:clamp(1.02rem,2vw,1.15rem);}
.bio li::before{content:""; position:absolute; left:.15rem; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent);}

/* Commercial callout */
.commercial{margin:clamp(1rem,4vw,2rem) 0;}
.commercial .box{border:1px solid var(--line); border-radius:18px; background:var(--bg-alt); padding:1.4rem 1.6rem; text-align:center;
	display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; justify-content:center;}
.commercial .box span{color:var(--muted);}
.commercial .box a{font-weight:600;}
.commercial .box a::after{content:" \2197";}

/* Contact */
.contact{border-top:1px solid var(--line); padding:clamp(3rem,8vw,5rem) 0 clamp(2rem,5vw,3rem); margin-top:clamp(2rem,6vw,4rem);}
.contact h2{font-size:clamp(1.9rem,5vw,2.6rem); font-weight:600; letter-spacing:-0.025em; text-align:center; margin:0 0 .5rem;}
.contact .intro{color:var(--muted); text-align:center; max-width:38ch; margin:0 auto 2.4rem;}
.grid{display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3rem);}
@media (min-width:760px){ .grid{grid-template-columns:1.3fr .9fr;} }
form{display:flex; flex-direction:column; gap:1rem;}
.row{display:flex; gap:1rem; flex-wrap:wrap;}
.row .field{flex:1 1 45%; min-width:0;}
.field{display:flex; flex-direction:column;}
label{font-size:.85rem; color:var(--muted); margin-bottom:.35rem;}
input,textarea{font:inherit; color:var(--text); background:var(--bg-alt); border:1px solid var(--line); border-radius:12px; padding:.75rem .9rem; width:100%; transition:border-color .15s, box-shadow .15s;}
input:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);}
textarea{resize:vertical; min-height:120px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4em; border-radius:980px; padding:.8em 1.6em;
	font-size:1.05rem; font-weight:500; border:none; cursor:pointer; background:var(--accent); color:#fff; transition:background-color .2s, transform .1s;}
.btn:hover{background:var(--accent-hover);} .btn:active{transform:scale(.98);}
.actions{margin-top:.3rem;}
.details{font-size:1.02rem;}
.details h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin:0 0 .6rem;}
.details a{color:var(--text);}
.details a:hover{color:var(--accent);}
.details .phone{font-size:1.2rem; font-weight:600; letter-spacing:-0.01em; margin:0 0 1.5rem;}
.details address{font-style:normal; color:var(--muted); line-height:1.7;}

/* Honeypot + form notices */
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.notice{margin:0 auto 1.5rem; max-width:var(--maxw); padding:.9rem 1.1rem; border-radius:12px; text-align:center; border:1px solid var(--line);}
.notice.ok{background:color-mix(in srgb,#34c759 16%, transparent);}
.notice.err{background:color-mix(in srgb,#ff3b30 14%, transparent);}

/* Footer */
footer{border-top:1px solid var(--line); margin-top:clamp(3rem,7vw,5rem); padding:2rem clamp(1.35rem,5vw,2rem);
	display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:center; align-items:center; color:var(--muted); font-size:.9rem;}
footer a{color:var(--muted);} footer a:hover{color:var(--text);}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
	.rise,.reveal{opacity:1 !important; transform:none !important; animation:none !important;}
	.hero::before{animation:none;}
}