/* Blonde Balance - Taylor visual system
   Powder blue #A9C7DB-#BCDAEF, warm taupe #6E675C/#5B5347,
   beige #D6CFC0, cream/white. Poppins bold + Caveat script. */
*{box-sizing:border-box}
:root{
  --blue:#A9C7DB; --blue-light:#BCDAEF; --blue-pale:#EAF3F9;
  --taupe:#6E675C; --taupe-dark:#5B5347; --ink:#2E2A26;
  --beige:#D6CFC0; --beige-light:#EFEAE0; --cream:#FFF9F0; --white:#FAFCFD;
  --gold:#D9A62E;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',Arial,sans-serif;background:var(--white);color:var(--taupe-dark);line-height:1.55;overflow-x:hidden}
img{max-width:100%}
.script{font-family:'Caveat',cursive;font-weight:700}
a{color:inherit}

/* Ticker - 60s loop */
.ticker{background:var(--taupe-dark);color:#fff;overflow:hidden;padding:9px 0;white-space:nowrap}
.ticker-track{display:inline-flex;gap:0;width:max-content;animation:tick 60s linear infinite}
.ticker-track span{font-size:12px;font-weight:700;letter-spacing:2.5px;padding:0 18px}
.ticker-track .dot{color:var(--blue-light);padding:0}
@keyframes tick{to{transform:translateX(-50%)}}

/* Nav - thin powder blue bar */
nav.top{background:var(--blue);display:flex;align-items:center;justify-content:space-between;padding:12px 26px;position:sticky;top:0;z-index:50}
nav.top .wordmark{font-weight:800;font-size:17px;letter-spacing:2px;color:var(--taupe-dark)}
nav.top .links{display:flex;gap:26px}
nav.top .links a{color:var(--taupe-dark);text-decoration:none;font-weight:700;font-size:13px;letter-spacing:1px}
.btn{display:inline-block;background:var(--taupe-dark);color:#fff;padding:13px 30px;border-radius:999px;text-decoration:none;font-size:13px;letter-spacing:1.5px;font-weight:700;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.blue{background:var(--blue);color:var(--taupe-dark)}
.btn.pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(169,199,219,.55)}50%{box-shadow:0 0 0 12px rgba(169,199,219,0)}}
nav.top .btn{background:#fff;color:var(--taupe-dark);padding:9px 20px}

/* Hero - full bleed photo, huge name layered over */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--beige)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.1) translateY(-14px)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,42,38,.08) 40%,rgba(46,42,38,.45))}
.hero-inner{position:relative;padding:40px 28px 34px;color:#fff}
.hero-name{font-size:clamp(44px,10.5vw,124px);font-weight:800;line-height:.98;letter-spacing:1px;color:#fff;text-transform:uppercase;margin:0;text-shadow:0 4px 30px rgba(46,42,38,.35);animation:rise .9s ease both}
.hero-script{font-family:'Caveat',cursive;font-size:clamp(30px,4.5vw,52px);color:var(--blue-light);margin:2px 0 6px;animation:rise .9s .15s ease both;text-shadow:0 2px 18px rgba(46,42,38,.6),0 0 3px rgba(46,42,38,.45)}
.hero-sub{max-width:520px;font-size:16px;margin:0 0 20px;animation:rise .9s .3s ease both;text-shadow:0 1px 12px rgba(46,42,38,.55)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.email-pill{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--taupe-dark);border-radius:999px;padding:12px 24px;font-weight:700;text-decoration:none;animation:rise .9s .45s ease both,floaty 4.5s 1.4s ease-in-out infinite}
.email-pill .env{color:var(--blue)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-meta{position:absolute;right:26px;bottom:26px;text-align:right;color:#fff;animation:rise .9s .6s ease both}
.hero-meta .loc{font-weight:800;letter-spacing:1.5px;font-size:14px;text-shadow:0 2px 10px rgba(46,42,38,.5)}
.hero-meta .socials{display:flex;gap:16px;justify-content:flex-end;margin-top:8px}
.hero-meta .socials div{text-align:center}
.hero-meta .socials b{display:block;font-size:19px}
.hero-meta .socials span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.9}
.hero-badge{position:absolute;top:24px;left:24px;background:var(--taupe-dark);color:#fff;border-radius:12px;padding:10px 16px;font-size:12px;font-weight:800;letter-spacing:1.5px;animation:floaty 3.8s ease-in-out infinite}
.hero-badge b{color:var(--blue-light)}

/* Brand marquee - 30s */
.marquee{background:var(--blue-pale);overflow:hidden;padding:14px 0;white-space:nowrap;border-bottom:3px solid var(--blue)}
.marquee-track{display:inline-flex;width:max-content;animation:tick 30s linear infinite}
.marquee-track span{font-weight:800;letter-spacing:2px;font-size:16px;color:var(--taupe);padding:0 16px}
.marquee-track .dot{color:var(--blue)}

/* Stats */
.stats{background:#fff;padding:44px 20px 8px;text-align:center}
.stats .row{display:flex;justify-content:center;flex-wrap:wrap;max-width:1000px;margin:0 auto}
.stat{flex:1;min-width:150px;padding:10px}
.stat .num{font-size:clamp(36px,5vw,54px);font-weight:800;color:var(--taupe-dark)}
.stat .lbl{font-size:11px;letter-spacing:2.5px;color:var(--taupe);text-transform:uppercase;margin-top:4px}

section{padding:64px 28px;max-width:1180px;margin:0 auto}
section[id]{scroll-margin-top:86px}
section.bleed{max-width:none;padding-left:0;padding-right:0}
section.bleed>.inner{max-width:1180px;margin:0 auto;padding:0 28px}
h2{font-size:clamp(34px,5vw,56px);font-weight:800;line-height:1.08;margin:0;color:var(--taupe-dark)}
h2 .script{display:block;font-size:.72em;color:var(--taupe-dark);transform:rotate(-2deg) translateY(5px);margin-bottom:0}
.secsub{color:var(--taupe);font-size:15.5px;max-width:560px;margin:14px 0 36px}
.center{text-align:center}.center .secsub{margin-left:auto;margin-right:auto}

/* Brand wall */
.logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.logo-tile{background:#fff;border:1.5px solid var(--beige);border-radius:14px;padding:22px 8px;text-align:center;font-weight:800;letter-spacing:1.5px;font-size:15px;color:var(--taupe-dark);display:flex;align-items:center;justify-content:center;min-height:74px}

/* Why work with me - pinstripes + oval photos bleeding off edges */
.why{position:relative;background:repeating-linear-gradient(90deg,#fff 0 46px,var(--beige-light) 46px 47px);overflow:hidden;max-width:none}
.why .inner{max-width:760px;margin:0 auto;padding:0 28px;text-align:center;position:relative;z-index:2}
.why h2{color:var(--blue)}
.why ul{list-style:none;margin:26px auto 0;padding:0;text-align:left;max-width:520px}
.why li{padding:9px 0 9px 30px;position:relative;font-size:16px;color:var(--taupe-dark)}
.why li:before{content:'\2713';position:absolute;left:0;color:var(--blue);font-weight:800}
.oval{position:absolute;top:50%;width:290px;height:420px;object-fit:cover;border-radius:50%;transform:translateY(-50%);z-index:1}
.oval.left{left:-120px}.oval.right{right:-120px}

/* Videos */
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.vcard{text-align:center}
.phone{appearance:none;border:0;padding:0;cursor:pointer;width:100%;aspect-ratio:9/16;border-radius:16px;position:relative;overflow:hidden;background:var(--beige-light);box-shadow:0 10px 26px rgba(46,42,38,.14);display:block;transition:transform .25s,box-shadow .25s}
.vcard:hover .phone{transform:translateY(-6px);box-shadow:0 18px 34px rgba(46,42,38,.2)}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.phone-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-weight:800;color:var(--taupe);padding:10px}
.phone .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border:0;padding:0;cursor:pointer;border-radius:50%;background:rgba(255,255,255,.95);transition:transform .25s,background .25s;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:2}
.vcard:hover .play{transform:translate(-50%,-50%) scale(1.18);background:var(--blue)}
.phone .play:after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:14px solid var(--taupe-dark);border-top:9px solid transparent;border-bottom:9px solid transparent}
.phone .fmt{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.94);font-size:9px;letter-spacing:1px;padding:3px 10px;border-radius:999px;font-weight:700;white-space:nowrap;z-index:2}
.phone.playing{cursor:default}
.phone video.inline-media,.phone iframe.inline-media{width:100%;height:100%;display:block;border:0;background:#111;object-fit:contain}
.phone-note{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);background:rgba(255,255,255,.96);color:var(--taupe-dark);font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:3}
.phone-watch-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:800;color:var(--taupe-dark);background:var(--beige-light);text-decoration:underline;text-underline-offset:4px}
.vbrand{font-weight:800;font-size:13.5px;color:var(--taupe-dark);margin-top:10px}
.vmetric{font-size:12px;color:var(--taupe);margin-top:2px}

/* Case studies - dark taupe, alternating, protruding circular badge */
.case{position:relative;background:var(--taupe-dark);color:#fff;border-radius:24px;padding:38px 34px 30px;margin:54px 0;overflow:visible}
.case-badge{position:absolute;top:-26px;left:-14px;width:76px;height:76px;border-radius:50%;background:#141210;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.case.flip .case-badge{left:auto;right:-14px}
.case-script{font-family:'Caveat',cursive;font-size:34px;color:var(--blue-light)}
.case .cbrand{font-size:11px;letter-spacing:2.5px;color:var(--blue-light);font-weight:700;text-transform:uppercase}
.case h3{font-size:24px;margin:6px 0 12px;color:#fff}
.case dl{margin:0;font-size:14.5px;max-width:640px}
.case dt{font-weight:800;margin-top:10px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--blue-light)}
.case dd{margin:2px 0 0;color:#EDEAE4}
.metric{display:inline-block;background:#fff;color:var(--taupe-dark);font-size:12px;font-weight:800;padding:8px 16px;border-radius:999px;margin:14px 6px 0 0}
.metric.hot{background:var(--blue)}

/* Results */
.resgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rcard{border:2px solid var(--beige);border-radius:14px;padding:24px;background:#fff;transition:transform .25s,border-color .25s}
.rcard:hover{transform:translateY(-4px);border-color:var(--blue)}
.rcard .rlbl{font-size:10.5px;letter-spacing:2.5px;color:var(--taupe);text-transform:uppercase;font-weight:700;margin-bottom:8px}
.rcard .rnum{font-size:42px;font-weight:800;color:var(--taupe-dark)}
.rcard p{font-size:13px;color:var(--taupe);margin:8px 0 0}

/* Testimonials - beige band */
.testi-band{background:var(--beige);max-width:none}
.testi-band .inner{max-width:1180px;margin:0 auto;padding:0 28px}
.testi-band h2{color:#fff;text-shadow:0 2px 12px rgba(46,42,38,.18)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.q{position:relative;background:#fff;border-radius:26px;padding:34px 24px 24px;margin:26px 0 10px;text-align:center;transition:transform .25s}
.q:hover{transform:translateY(-4px)}
.q-badge{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:var(--taupe-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;border:3px solid var(--beige)}
.q .stars{color:var(--gold);letter-spacing:4px;font-size:16px;margin-bottom:10px}
.q blockquote{margin:0;font-size:14.5px;color:var(--taupe-dark)}
.q .who{margin-top:14px;font-size:11px;color:var(--taupe);letter-spacing:1.5px;text-transform:uppercase;font-weight:700}

/* Portfolio strips */
.strip{background:var(--blue);text-align:center;padding:8px 10px;margin:38px 0 22px}
.strip span{font-family:'Caveat',cursive;font-size:36px;color:var(--taupe-dark);line-height:1}

/* Services over faded photo */
.services{position:relative;max-width:none;overflow:hidden}
.services:before{content:'';position:absolute;inset:0;background:url('../assets/laptop.jpg') center/cover;opacity:.14}
.services .inner{position:relative;max-width:1180px;margin:0 auto;padding:0 28px}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pkg{background:var(--taupe-dark);color:#fff;border-radius:14px;padding:28px 24px;position:relative;transition:transform .25s}
.pkg:hover{transform:translateY(-5px)}
.pkg .pkg-script{font-family:'Caveat',cursive;font-size:28px;color:var(--blue-light)}
.pkg .pn{font-size:12px;font-weight:800;letter-spacing:3px;opacity:.65}
.pkg h4{margin:8px 0 10px;font-size:19px;color:#fff}
.pkg p{margin:0;font-size:13.5px;opacity:.88}
.pkg .tag{position:absolute;top:-13px;left:24px;background:#fff;color:var(--taupe-dark);border:2px solid var(--blue);font-size:10px;font-weight:800;letter-spacing:2px;padding:5px 14px;border-radius:999px}
.pricenote{text-align:center;margin-top:24px;font-size:14px;color:var(--taupe)}

/* About + Where I Create */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}
.about img{width:100%;border-radius:20px;box-shadow:0 16px 40px rgba(46,42,38,.16)}
.about ul{list-style:none;margin:0 0 24px;padding:0}
.about li{margin-bottom:10px;padding-left:26px;position:relative;font-size:14.5px}
.about li:before{content:'\2713';position:absolute;left:0;color:var(--blue);font-weight:800}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:10px;min-height:180px}

/* Process - powder blue zig zag */
.process{background:var(--blue);max-width:none}
.process .inner{max-width:1180px;margin:0 auto;padding:0 28px}
.process h2{color:#fff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.step{text-align:center;padding:10px 6px;animation:bob 5s ease-in-out infinite}
.step:nth-child(2){margin-top:44px}.step:nth-child(4){margin-top:44px}
.step:nth-child(2){animation-delay:.6s}.step:nth-child(3){animation-delay:1.2s}.step:nth-child(4){animation-delay:1.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.step-dot{width:74px;height:74px;border-radius:50%;background:#fff;color:var(--taupe-dark);font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;border:3px dashed var(--beige)}
.step-script{font-family:'Caveat',cursive;font-size:30px;color:var(--taupe-dark)}
.step p{font-size:12.5px;color:var(--taupe-dark);margin:4px 0 0}

/* Filmstrip - 38s */
.filmstrip{overflow:hidden;background:#141210;padding:10px 0}
.film-track{display:flex;gap:10px;width:max-content;animation:tick 38s linear infinite}
.film-track img{height:190px;width:130px;object-fit:cover;border-radius:8px}

/* Footer CTA + contact */
.cta{background:var(--taupe-dark);color:#fff;text-align:center;padding:80px 28px;max-width:none}
.cta .script{font-size:44px;color:var(--blue-light)}
.cta h2{color:#fff;font-size:clamp(34px,5.5vw,58px)}
.cta h2 .accent{color:var(--blue-light)}
.cta p.lead{color:#CFC9BC;margin:0 0 20px}
.big-email{display:block;font-size:clamp(21px,4.2vw,40px);font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:6px;margin:14px 0;word-break:break-all}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn.line{background:transparent;color:#fff;border:2px solid #fff}
.copyline{margin-top:20px;font-size:13px;color:#CFC9BC}
.copyline span{background:rgba(255,255,255,.1);padding:5px 12px;border-radius:8px;user-select:all}
footer.foot{text-align:center;padding:20px;font-size:11px;color:var(--taupe);letter-spacing:2px;background:#fff}

/* Video playback is inline in each card; there is no popup player. */

/* Reveal (visible by default; hidden only after JS init class) */
body.js-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
body.js-reveal .reveal.in{opacity:1;transform:none}
.script-sway{display:inline-block;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-.5deg)}}

@media (prefers-reduced-motion: reduce){
  .ticker-track,.marquee-track,.film-track,.hero-photo,.step{animation:none!important}
  html{scroll-behavior:auto}
}
@media(max-width:820px){
  .grid5{grid-template-columns:repeat(2,1fr)}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .resgrid,.quotes,.pkgs{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2),.step:nth-child(4){margin-top:0}
  .about{grid-template-columns:1fr}
  .oval{width:170px;height:250px;opacity:.55}
  .oval.left{left:-80px}.oval.right{right:-80px}
  .hero-meta{position:relative;right:auto;bottom:auto;margin-top:18px;text-align:left}
  .hero-meta .socials{justify-content:flex-start;flex-wrap:wrap;gap:12px 22px}
  .hero-meta .socials div{text-align:left}
  .hero-meta .socials b{font-size:16px}
  nav.top{flex-wrap:wrap;padding:10px 16px 4px;row-gap:2px}
  nav.top .wordmark{font-size:15px}
  nav.top .btn{padding:8px 16px;font-size:12.5px}
  nav.top .links{display:flex;order:3;flex-basis:100%;gap:22px;overflow-x:auto;padding:8px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.top .links::-webkit-scrollbar{display:none}
  nav.top .links a{white-space:nowrap;font-size:12.5px;padding:6px 0}
  .hero{min-height:78vh}
  .hero-inner{padding:28px 20px 26px}
  .email-pill{padding:11px 18px;font-size:14.5px;max-width:100%}
  section{padding:52px 20px}
  section[id]{scroll-margin-top:132px}
  section.bleed>.inner,.testi-band .inner,.services .inner,.process .inner{padding:0 20px}
}