/* Chris Courneen — Custom Site — Shared Styles — Slate & Cobalt */
:root{
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-hover: #eef2fb;
  --ink: #10141c;
  --ink-body: #454e59;
  --ink-dim: #7c8794;
  --accent: #2f5fe3;
  --accent-glow: rgba(47,95,227,0.22);
  --accent-ink: #ffffff;
  --line: #e2e6ee;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink-body);
  font-family:'Roboto', sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
a{color:inherit;}
img{max-width:100%; display:block;}

/* progress bar */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; background:var(--accent);
  box-shadow:0 0 14px var(--accent-glow);
  z-index:100; transition:width .1s linear;
}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,247,250,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; max-width:1120px; margin:0 auto;}
.logo{font-weight:700; font-size:19px; color:var(--ink); text-decoration:none;}
nav .links{display:flex; align-items:center; gap:28px; font-size:14px; font-weight:500; color:var(--ink-body);}
nav .links a{text-decoration:none; position:relative; transition:color .15s;}
nav .links a:hover{color:var(--ink);}
nav .links a:after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent);
  transition:width .3s cubic-bezier(.2,.8,.2,1);
}
nav .links a:hover:after, nav .links a.active:after{width:100%;}
nav .links a.active{font-weight:700; color:var(--ink);}
nav .links a.nav-cta:after{content:none;}
.nav-cta{background:transparent; border:1.5px solid var(--accent); color:var(--accent); padding:6px 16px; font-weight:700; border-radius:20px; font-size:14px; line-height:1.4; text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease;}
nav .links a.nav-cta:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.menu-toggle{display:none;}
@media (max-width:900px){
  nav .links{
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:12px 24px 20px;
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .35s cubic-bezier(.16,.8,.24,1), opacity .25s ease, padding .35s;
  }
  nav .links.open{max-height:420px; opacity:1; padding:16px 24px 24px;}
  nav .links a{width:100%; padding:10px 0;}
  nav .links a:after{display:none;}
  nav .links a.active{color:var(--accent);}
  .nav-cta{width:auto; display:inline-block; margin-top:6px;}
  .menu-toggle{display:block; font-size:24px; background:none; border:none; cursor:pointer; color:var(--ink); line-height:1; padding:4px 6px;}
}

/* HERO */
.hero{padding:110px 24px 96px; text-align:center; position:relative; overflow:hidden;}
.hero:before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(700px circle at 50% 0%, var(--accent-glow), transparent 60%),
    repeating-linear-gradient(0deg, rgba(16,20,28,0.03) 0px, rgba(16,20,28,0.03) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(16,20,28,0.03) 0px, rgba(16,20,28,0.03) 1px, transparent 1px, transparent 42px);
  animation:heroDrift 16s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(-1.5%,1%,0) scale(1.04);}
}
.hero .wrap{position:relative; z-index:1;}
.eyebrow{font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:24px; display:inline-block;}
.page-title{font-size:clamp(38px,6vw,60px); font-weight:900; color:var(--ink); margin-bottom:14px; letter-spacing:-0.5px; line-height:1.05;}
.hero .role{font-size:clamp(20px,3vw,28px); font-weight:400; color:var(--ink-body); max-width:820px; margin:0 auto 26px;}
.hero .role b{font-weight:700; color:var(--ink);}
.hero .role em{font-style:italic; color:var(--ink);}
.hero .sub{font-size:16px; color:var(--ink-dim); max-width:600px; margin:0 auto 8px;}
.featured{font-size:13.5px; color:var(--ink-dim); margin-top:18px; letter-spacing:0.3px;}
.featured-rotator{position:relative; height:22px; margin-top:14px; overflow:hidden;}
.featured-rotator span{position:absolute; left:50%; top:0; transform:translateX(-50%); white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:0.4px; color:var(--accent); opacity:0; animation:fr-cycle 24s infinite;}
.featured-rotator span:nth-child(1){animation-delay:0s;}
.featured-rotator span:nth-child(2){animation-delay:3s;}
.featured-rotator span:nth-child(3){animation-delay:6s;}
.featured-rotator span:nth-child(4){animation-delay:9s;}
.featured-rotator span:nth-child(5){animation-delay:12s;}
.featured-rotator span:nth-child(6){animation-delay:15s;}
.featured-rotator span:nth-child(7){animation-delay:18s;}
.featured-rotator span:nth-child(8){animation-delay:21s;}
@keyframes fr-cycle{
  0%{opacity:0; transform:translateX(-50%) translateY(8px);}
  3%{opacity:1; transform:translateX(-50%) translateY(0);}
  9.5%{opacity:1; transform:translateX(-50%) translateY(0);}
  12.5%{opacity:0; transform:translateX(-50%) translateY(-8px);}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .featured-rotator span{animation:none; opacity:0;}
  .featured-rotator span:nth-child(1){opacity:1; position:static; transform:none;}
}
.cta-row{margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn{display:inline-block; padding:14px 30px; font-weight:700; font-size:14.5px; text-decoration:none; border-radius:3px; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;}
.btn:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 14px 30px var(--accent-glow);}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-ghost{border:1.5px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

/* SECTIONS */
section{padding:92px 0;}
.white{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.band{background:var(--accent); color:var(--accent-ink); position:relative; overflow:hidden;}
.band:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(500px circle at 85% 20%, rgba(255,255,255,0.12), transparent 60%);
}
.band .wrap{position:relative; z-index:1;}
.band h2, .band h3, .band p, .band .kicker, .band .lead, .band a{color:var(--accent-ink) !important;}
.band a{text-decoration:underline;}
.kicker{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:14px;}
h2{font-size:clamp(28px,4vw,42px); font-weight:900; color:var(--ink); margin-bottom:20px; max-width:720px; letter-spacing:-0.5px;}
.lead{font-size:17px; color:var(--ink-dim); max-width:640px; margin-bottom:8px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:820px){.two-col{grid-template-columns:1fr;}}
.two-col img{border-radius:6px;}

/* reveal animation — bigger, more dramatic */
.reveal{opacity:0; transform:translateY(48px) scale(.97); transition:opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}
.reveal-stagger > *{opacity:0; transform:translateY(36px) scale(.96); transition:opacity .65s cubic-bezier(.16,.8,.24,1), transform .65s cubic-bezier(.16,.8,.24,1);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0) scale(1);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.06s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.14s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.22s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.3s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.38s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.46s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.54s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.62s;}

/* stat grid */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:50px; background:var(--line);}
@media (max-width:860px){.stat-grid{grid-template-columns:repeat(2,1fr);} .stat-grid > *:last-child:nth-child(odd){grid-column:1 / -1;}}
.stat{background:var(--surface); padding:36px 20px; text-align:center; transition:background .25s, transform .25s;}
.stat:hover{background:var(--surface-hover); transform:translateY(-4px);}
.stat .num{font-size:38px; font-weight:900; color:var(--accent); display:block; margin-bottom:8px; font-variant-numeric:tabular-nums;}
.stat .label{font-size:12px; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-dim); font-weight:700;}

/* expertise / list grid */
.expertise-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:46px; border-top:1px solid var(--line);}
@media (max-width:760px){.expertise-grid{grid-template-columns:1fr 1fr;} .expertise-grid > *:last-child:nth-child(odd){grid-column:1 / -1;}}
.expertise-item{padding:20px 22px 20px 0; border-bottom:1px solid var(--line); font-weight:700; font-size:15px; color:var(--ink); display:flex; align-items:center; gap:10px; transition:padding-left .25s, color .25s; text-decoration:none;}
a.expertise-item{cursor:pointer;}
.expertise-item:hover{padding-left:10px; color:var(--accent);}
.expertise-item:before{content:"—"; font-weight:900; color:var(--accent);}

/* timeline */
.timeline{margin-top:50px; border-top:1px solid var(--line);}
.tl-item{border-bottom:1px solid var(--line); padding:26px 0; cursor:pointer;}
.tl-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px;}
.tl-head .role-title{font-size:19px; font-weight:700; color:var(--ink);}
.tl-head .years{font-size:13px; color:var(--ink-dim); font-weight:700; white-space:nowrap;}
.tl-org{font-size:14.5px; color:var(--accent); font-weight:500; margin-top:4px;}
.tl-body{max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,.8,.24,1);}
.tl-item.open .tl-body{max-height:400px;}
.tl-body p{padding-top:14px; font-size:15px; color:var(--ink-body); max-width:680px;}
.tl-toggle{font-size:22px; color:var(--accent); transition:transform .35s cubic-bezier(.34,1.56,.64,1); font-weight:300;}
.tl-item.open .tl-toggle{transform:rotate(135deg);}

/* card grids */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:46px; background:var(--line); perspective:1000px;}
@media (max-width:860px){.card-grid{grid-template-columns:1fr 1fr;} .card-grid > *:last-child:nth-child(odd){grid-column:1 / -1;}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}
.grid-card{background:var(--surface); padding:28px; text-decoration:none; display:block; transition:background .25s, transform .2s ease; transform-style:preserve-3d;}
.grid-card:hover{background:var(--surface-hover);}
.grid-card .tag{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:10px;}
.grid-card h3{font-size:16.5px; font-weight:700; margin-bottom:8px; color:var(--ink);}
.grid-card p{font-size:14px; color:var(--ink-dim);}
.grid-card .arrow{margin-top:14px; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:3px; color:var(--accent);}

.badge-card{background:var(--surface); border:1px solid var(--line); padding:26px; text-align:center; transition:border-color .25s, transform .25s;}
.badge-card:hover{border-color:var(--accent); transform:translateY(-4px);}
.badge-card img{height:56px; width:auto; margin:0 auto 16px; object-fit:contain; background:#fff; padding:8px 12px; border-radius:6px;}
.badge-card h4{font-size:14.5px; font-weight:700; margin-bottom:6px; color:var(--ink);}
.badge-card p{font-size:13px; color:var(--ink-dim);}
.badge-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:46px;}
.badge-grid > *:last-child:nth-child(4n+1){grid-column:1 / -1; justify-self:center; width:100%; max-width:calc(25% - 15px);}
@media (max-width:860px){.badge-grid{grid-template-columns:1fr 1fr;} .badge-grid > *:last-child:nth-child(odd){grid-column:1 / -1; justify-self:center; width:100%; max-width:calc(50% - 10px);}}

.highlight-card{background:var(--surface); border:1px solid var(--line); padding:32px; margin-top:24px; transition:box-shadow .25s, border-color .25s, transform .25s;}
.highlight-card:hover{box-shadow:0 16px 36px rgba(16,20,28,0.1); border-color:var(--accent); transform:translateY(-3px);}
.highlight-card .tag{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:12px;}
.highlight-card h3{font-size:21px; font-weight:700; margin-bottom:10px; color:var(--ink);}
.highlight-card p{font-size:15px; color:var(--ink-body); margin-bottom:6px;}

/* photo frame */
.photo-frame{overflow:hidden; border-radius:6px; position:relative; border:1px solid var(--line);}
.photo-frame img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,.8,.24,1);}
.photo-frame:hover img{transform:scale(1.06);}

/* contact form */
.contact-form{max-width:640px; margin-top:40px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; padding:14px 16px; border:1px solid var(--line); background:var(--surface);
  font-family:'Roboto',sans-serif; font-size:15px; color:var(--ink); border-radius:3px;
  transition:border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow);}
.contact-form label{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--ink-dim); display:block; margin-bottom:6px;}
.contact-form textarea{min-height:140px; resize:vertical;}
.contact-form .full{margin-bottom:16px;}
.form-note{font-size:13px; color:var(--ink-dim); margin-top:14px;}
.form-success{display:none; padding:20px; background:var(--surface); border:1px solid var(--accent); color:var(--ink); font-weight:700; margin-top:20px;}
.form-success.show{display:block; animation:popIn .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{0%{opacity:0; transform:scale(.9) translateY(10px);} 100%{opacity:1; transform:scale(1) translateY(0);}}

/* footer */
footer{padding:60px 0 40px; text-align:center; border-top:1px solid var(--line);}
footer .foot-links{display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; font-size:14px; font-weight:500;}
footer .foot-links a{text-decoration:underline; text-underline-offset:3px; transition:color .2s;}
footer .foot-links a:hover{color:var(--accent);}
footer .fine{font-size:12px; color:var(--ink-dim);}

.oc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:46px; background:var(--line);}
@media (max-width:860px){.oc-grid{grid-template-columns:1fr 1fr;}}
.oc-item{text-align:center; padding:26px 20px; background:var(--surface); transition:transform .25s;}
.oc-item:hover{transform:translateY(-4px);}
.oc-item .emoji{font-size:30px; margin-bottom:14px; display:block; transition:transform .3s;}
.oc-item:hover .emoji{transform:scale(1.2) rotate(-6deg);}
.oc-item h4{font-size:15px; font-weight:700; margin-bottom:8px; color:var(--ink);}
.oc-item p{font-size:13.5px; color:var(--ink-dim);}