/*
Theme Name: Todd Holloway
Theme URI: https://toddholloway.com
Author: Todd Holloway / Avalon Digital Partners
Description: A custom executive personal-brand theme built around Todd Holloway's digital transformation leadership and “The hats I wear” story.
Version: 1.0.0
Text Domain: todd-holloway
*/

:root { --ink:#17232d; --navy:#112735; --deep:#0c1d27; --paper:#f3efe7; --cream:#fbf8f2; --copper:#b45e3f; --copper-dark:#8d422a; --line:rgba(23,35,45,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:84px; padding:0 6vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(251,248,242,.94); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:12px; font-size:.88rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-family:Georgia,serif; font-size:.78rem; letter-spacing:.04em; }
nav { display:flex; align-items:center; gap:30px; font-size:.8rem; font-weight:700; }
nav a { padding:10px 0; } nav a:hover { color:var(--copper-dark); }
.nav-cta { border:1px solid var(--ink); padding:11px 18px; border-radius:999px; }

.hero { min-height:calc(100vh - 84px); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); align-items:center; gap:8vw; padding:9vh 8vw; overflow:hidden; position:relative; }
.hero:before { content:""; position:absolute; width:540px; height:540px; border:1px solid rgba(180,94,63,.19); border-radius:50%; right:-270px; top:-180px; }
.eyebrow { color:var(--copper-dark); font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 24px; }
h1,h2,h3,blockquote { font-family:Georgia,'Times New Roman',serif; font-weight:400; }
h1 { max-width:850px; margin:0; font-size:clamp(3.6rem,7.2vw,7.3rem); line-height:.96; letter-spacing:-.055em; }
h1 em { color:var(--copper); font-weight:400; }
.hero-lede { max-width:690px; margin:34px 0; font-size:clamp(1.05rem,1.45vw,1.3rem); line-height:1.7; color:#48545c; }
.button-row { display:flex; flex-wrap:wrap; gap:14px; }
.button { min-height:52px; padding:0 23px; display:inline-flex; gap:12px; align-items:center; justify-content:center; border-radius:999px; font-size:.82rem; font-weight:800; transition:.2s ease; }
.button.primary { background:var(--copper); color:white; } .button.primary:hover { background:var(--copper-dark); transform:translateY(-2px); }
.button.secondary { border:1px solid var(--ink); } .button.secondary:hover { background:var(--ink); color:white; }
.hero-card { min-height:520px; background:var(--navy); color:white; padding:28px; border-radius:2px 2px 110px 2px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:28px 32px 0 var(--paper); position:relative; }
.hero-card:after { content:"TH"; position:absolute; right:28px; top:82px; color:rgba(255,255,255,.035); font:180px/1 Georgia,serif; }
.hero-card-top { display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; color:#d4deda; }
.status-dot { width:8px; height:8px; background:#c8d3c7; border-radius:50%; box-shadow:0 0 0 5px rgba(200,211,199,.08); }
.hero-card-center { position:relative; z-index:1; }
.hero-number { display:block; font:112px/.8 Georgia,serif; letter-spacing:-.07em; color:#f6efe4; }
.hero-number-label { display:block; max-width:230px; margin-top:24px; font-size:1rem; line-height:1.5; color:#c3d0d3; }
.hero-card-bottom { border-top:1px solid rgba(255,255,255,.16); padding-top:24px; display:grid; gap:18px; }
.hero-card-bottom div { display:grid; gap:5px; } .hero-card-bottom strong { font-size:.84rem; } .hero-card-bottom span { color:#9fb0b6; font-size:.76rem; }

.credibility-band { padding:34px 6vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.credibility-band p { text-align:center; margin:0 0 24px; color:#667076; font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.client-list { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px 42px; }
.client-list span { font:600 1rem Georgia,serif; color:#435058; }

.hats-section { padding:120px 8vw; background:#e9e4da; }
.hats-intro { display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:end; margin-bottom:64px; }
.hats-intro h2 { max-width:850px; margin:0; font:clamp(2.8rem,5.6vw,6rem)/1 Georgia,serif; letter-spacing:-.05em; }
.hats-intro>p { margin:0; max-width:470px; color:#59666d; line-height:1.8; }
.hat-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:120px; gap:16px; }
.hat-card { margin:0; position:relative; overflow:hidden; background:#d7d1c7; min-height:250px; }
.hat-card img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.02); transition:transform .45s ease,filter .35s ease; }
.hat-card:after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,22,29,.82),rgba(8,22,29,.04) 62%); }
.hat-card:hover img { transform:scale(1.035); filter:saturate(1); }
.hat-card figcaption { position:absolute; z-index:2; left:24px; right:24px; bottom:20px; color:white; }
.hat-card figcaption span { font:1.45rem/1.15 Georgia,serif; }
.hat-card figcaption p { max-width:360px; margin:8px 0 0; color:rgba(255,255,255,.74); font-size:.75rem; line-height:1.45; opacity:0; transform:translateY(8px); transition:.25s ease; }
.hat-card:hover figcaption p { opacity:1; transform:translateY(0); }
.hat-1 { grid-column:span 5; grid-row:span 4; }
.hat-2 { grid-column:span 4; grid-row:span 4; }
.hat-3 { grid-column:span 3; grid-row:span 4; }
.hat-4 { grid-column:span 4; grid-row:span 3; }
.hat-5 { grid-column:span 3; grid-row:span 3; }
.hat-6 { grid-column:span 5; grid-row:span 3; }
.hat-7 { grid-column:span 5; grid-row:span 3; }
.hat-8 { grid-column:span 4; grid-row:span 3; }
.hat-9 { grid-column:span 3; grid-row:span 3; }
.hat-10 { grid-column:span 6; grid-row:span 3; }
.hat-11 { grid-column:span 6; grid-row:span 3; background:#d9d1c4; }
.hat-11 img { object-fit:contain; padding:22px; }

.section { padding:120px 8vw; }
.two-column { display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; }
.section h2 { font-size:clamp(2.6rem,4.8vw,5.2rem); line-height:1.04; letter-spacing:-.045em; margin:0; }
.body-copy { padding-top:36px; } .body-copy p { color:#526068; font-size:1rem; line-height:1.85; }
.body-copy .lead { color:var(--ink); font:1.65rem/1.45 Georgia,serif; margin-top:0; }
.capability-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:38px; border-top:1px solid var(--line); }
.capability-grid span { padding:16px 0; border-bottom:1px solid var(--line); font-size:.8rem; font-weight:800; }
.capability-grid span:nth-child(even) { padding-left:20px; border-left:1px solid var(--line); }

.work-section { background:var(--paper); }
.section-heading-row { display:grid; grid-template-columns:1.3fr .7fr; gap:8vw; align-items:end; margin-bottom:70px; }
.section-heading-row>p { color:#657178; line-height:1.75; max-width:420px; }
.outcome-list { border-top:1px solid var(--line); }
.outcome { display:grid; grid-template-columns:80px 1fr 230px; gap:5vw; padding:48px 0; border-bottom:1px solid var(--line); align-items:start; }
.outcome-index { font:italic 1.1rem Georgia,serif; color:var(--copper); }
.card-label { font-size:.67rem; text-transform:uppercase; font-weight:800; letter-spacing:.15em; color:var(--copper-dark); }
.outcome h3 { margin:12px 0 14px; font-size:clamp(1.6rem,2.5vw,2.5rem); line-height:1.18; }
.outcome-story>p:last-child { margin:0; max-width:720px; color:#58646b; line-height:1.75; }
.outcome-metric { display:grid; gap:7px; } .outcome-metric strong { font:3.1rem/1 Georgia,serif; color:var(--navy); } .outcome-metric span { font-size:.72rem; color:#657178; }

.perspective-section { background:var(--navy); color:white; }
.eyebrow.light,.perspective-section .card-label { color:#d18a70; }
.perspective-section .section-heading-row>p { color:#a9b8bd; }
.perspective-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.17); border-bottom:1px solid rgba(255,255,255,.17); }
.perspective-card { min-height:390px; padding:38px; border-right:1px solid rgba(255,255,255,.17); }
.perspective-card:last-child { border-right:0; }
.perspective-card h3 { font-size:clamp(1.5rem,2.15vw,2.25rem); line-height:1.25; margin:60px 0 20px; }
.perspective-card>p:last-child { color:#a9b8bd; font-size:.9rem; line-height:1.7; }
.text-link { display:inline-flex; align-items:center; gap:12px; margin-top:42px; font-size:.8rem; font-weight:800; }
.light-link { color:#f4e7da; }

.story-section { max-width:1050px; margin:0 auto; text-align:center; }
.story-mark { font:7rem/.7 Georgia,serif; color:var(--copper); }
blockquote { font-size:clamp(2.8rem,5.8vw,5.9rem); line-height:1.08; letter-spacing:-.045em; margin:20px 0 30px; }
.story-section>p { max-width:760px; margin:auto; color:#5e6a70; line-height:1.8; }
.story-links { margin-top:50px; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.story-links span { padding:10px 15px; border:1px solid var(--line); border-radius:999px; font-size:.72rem; font-weight:700; }

.contact-section { padding:115px 8vw; background:var(--deep); color:white; text-align:center; }
.contact-section .eyebrow { color:#d18a70; }
.contact-section h2 { max-width:1050px; margin:0 auto 28px; font:clamp(2.7rem,5.3vw,5.5rem)/1.04 Georgia,serif; letter-spacing:-.045em; }
.contact-section>p:not(.eyebrow) { max-width:670px; margin:0 auto 40px; color:#aebdc1; line-height:1.7; }
.centered { justify-content:center; }
.button.secondary.on-dark { border-color:rgba(255,255,255,.5); color:white; } .button.secondary.on-dark:hover { background:white; color:var(--deep); }

footer { min-height:150px; padding:38px 6vw; background:#07151c; color:#9cabb0; display:grid; grid-template-columns:1fr 1.5fr 1fr; align-items:center; gap:30px; font-size:.7rem; }
.footer-brand { color:white; } footer p { line-height:1.6; } footer>div { display:flex; justify-content:flex-end; gap:20px; } footer a:hover { color:white; }

@media (max-width:980px) {
  nav a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding-top:80px}.hero-card{min-height:420px;max-width:620px;width:100%}.hats-intro,.two-column,.section-heading-row{grid-template-columns:1fr;gap:36px}.hat-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:300px}.hat-card{grid-column:auto!important;grid-row:auto!important}.hat-card figcaption p{opacity:1;transform:none}.body-copy{padding-top:0}.outcome{grid-template-columns:55px 1fr}.outcome-metric{grid-column:2}.perspective-grid{grid-template-columns:1fr}.perspective-card{min-height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.17)}.perspective-card:last-child{border-bottom:0}.perspective-card h3{margin-top:36px}footer{grid-template-columns:1fr;text-align:center}footer .brand,footer>div{justify-content:center}
}
@media (max-width:620px) {
  .site-header{height:72px;padding:0 20px}.site-header .brand>span:last-child{display:none}.hero{padding:68px 24px 82px;min-height:auto}h1{font-size:3.45rem}.hero-card{min-height:390px;box-shadow:14px 16px 0 var(--paper);border-radius:2px 2px 70px 2px}.hero-number{font-size:88px}.hats-section{padding:84px 24px}.hats-intro h2{font-size:3rem}.hat-grid{grid-template-columns:1fr;grid-auto-rows:330px}.section{padding:84px 24px}.section h2{font-size:2.75rem}.capability-grid{grid-template-columns:1fr}.capability-grid span:nth-child(even){padding-left:0;border-left:0}.outcome{grid-template-columns:36px 1fr;gap:18px}.outcome-metric strong{font-size:2.5rem}.perspective-card{padding:30px 0}.contact-section{padding:88px 24px}.contact-section h2{font-size:2.8rem}.button{width:100%}
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *{transition:none!important} }