/* Approved metallic homepage treatment. Colors live in dtr-tokens.css. */


body { background:var(--bg); }
.aurora {opacity:.38}.starfield{display:none}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 99.8%,var(--border) 100%),linear-gradient(transparent 99.8%,var(--border) 100%);background-size:80px 80px;opacity:.25}
.glass:not(.eyebrow),.cs-card,.about-photo {background:linear-gradient(145deg,var(--metal-top) 0%,var(--metal-base) 48%,var(--field-solid) 100%);border:1px solid color-mix(in srgb,var(--metal-edge) 45%,transparent);border-top-color:color-mix(in srgb,var(--metal-edge) 85%,transparent);border-radius:22px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 18%,transparent),inset 0 -2px 3px var(--bg),0 5px 0 color-mix(in srgb,var(--metal-base) 90%,var(--bg)),0 18px 32px rgba(0,0,0,.55),0 8px 25px var(--metal-shadow);}
.step-num{background:linear-gradient(145deg,var(--metal-edge),var(--metal-base));border:1px solid var(--metal-edge);box-shadow:inset 0 1px 1px var(--text-faint),0 5px 12px var(--bg);color:var(--text);border-radius:9px}
.step{position:relative}.step::after{content:'';position:absolute;left:28px;right:28px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--metal-blue),transparent)}
.btn-halo{background:linear-gradient(165deg,var(--text),var(--metal-blue) 40%,var(--metal-edge));border:1px solid var(--metal-blue);box-shadow:inset 0 1px 1px var(--text),0 4px 0 var(--metal-base),0 8px 22px var(--metal-shadow);color:var(--bg)}
.btn-glass,.track-cta{background:linear-gradient(150deg,var(--metal-top),var(--metal-base));box-shadow:inset 0 1px 0 var(--border-strong),0 4px 8px var(--bg)}
.track-card{border-top:2px solid var(--track-color)!important}.track-tag,.track-cta{color:color-mix(in srgb,var(--track-color) 48%,var(--text))}
.contact-field input,.contact-field textarea{background:var(--field-solid);border-color:color-mix(in srgb,var(--metal-edge) 45%,transparent);box-shadow:inset 0 3px 8px var(--bg),0 1px 0 var(--border-strong)}
.tier-row .tp{font-variant-numeric:tabular-nums;color:var(--metal-blue);background:none;-webkit-text-fill-color:var(--metal-blue)}
.orb{box-shadow:0 0 0 6px var(--metal-base),0 0 0 7px var(--metal-edge),0 10px 25px var(--bg)}
.cs-card{border-style:solid}.pricing-strip{max-width:760px;margin:48px auto 0;padding:32px}.pricing-note{text-align:left;max-width:65ch}.tier-row{gap:24px;padding:20px 0}.tier-row .tp{flex-shrink:0}.cs-strip{max-width:760px;margin:28px auto 0}@media(max-width:560px){.pricing-strip{margin:36px 20px 0;padding:24px}.cs-strip{margin:24px 20px}.tier-row{gap:16px}}.steps{gap:26px}.gradient{filter:saturate(.7)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--metal-blue);outline-offset:5px}
.hero{padding-top:36px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#contact,#pricing{scroll-margin-top:110px}

.referral-link{color:var(--cyan);font-size:14px;font-weight:700;text-decoration:none}.referral-link:hover{text-decoration:underline}

/* Header and palette reconciled with the existing Drive brand kit. */
.brand-header-logo{display:block;width:260px;height:auto;max-width:100%}
.header-inner{padding-top:8px;padding-bottom:8px}
.aurora .b1{background:var(--brand-navy)}
.aurora .b2{background:var(--metal-blue)}
.aurora .b3{background:var(--brand-gold)}
h1 .gradient,h2 .gradient,.gradient{background:linear-gradient(100deg,var(--metal-blue),var(--brand-silver) 65%,var(--brand-gold));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:none}
.eyebrow::before,.trust-bar li::before{background:var(--brand-gold)}
.orb{background:conic-gradient(from -90deg,var(--metal-blue) calc(var(--pct)*1%),var(--border-strong) 0)}
.orb::after{background:conic-gradient(from -90deg,var(--metal-blue),var(--brand-silver))}
@media(max-width:560px){.brand-header-logo{width:190px}.header-inner{gap:12px;padding-left:20px;padding-right:20px}.header-inner .btn{padding:10px 14px;font-size:12px}}

header{background:var(--bg)}
.brand-header-logo{mix-blend-mode:lighten}
.brand-tagline{color:var(--brand-silver);letter-spacing:2px;font-size:12px;text-transform:uppercase;margin-bottom:24px}

/* Crop empty source padding so the lettering aligns with the content margin.
   Clamp the near-black backdrop to black before screen blending: no image tile. */
.brand-header-crop{display:block;position:relative;width:160px;height:59px;overflow:hidden;isolation:auto}
.brand-header-crop .brand-header-logo{position:absolute;width:211px;max-width:none;height:auto;left:-25px;top:-11px;filter:contrast(1.2);mix-blend-mode:screen}
@media(max-width:560px){.brand-header-crop{width:140px;height:52px}.brand-header-crop .brand-header-logo{width:185px;left:-22px;top:-9px}}

/* Blend the entire cropped logo into the footer, beyond the image's own
   stacking context. The footer supplies a consistent backdrop for screen. */
footer{background:var(--bg)}
footer .wrap{background:var(--bg)}
footer .brand-header-crop{mix-blend-mode:screen}

/* Sparse data pixels stay in the hero margins; copy and controls remain steady. */
.hero-inner{position:relative;z-index:1}
.data-pixels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.data-pixels i{position:absolute;width:5px;height:5px;background:var(--metal-blue);box-shadow:0 0 10px var(--metal-shadow);opacity:.35;animation:data-drift 14s ease-in-out infinite alternate;animation-play-state:paused}
.data-pixels i:nth-child(1){left:7%;top:18%;animation-delay:-5s}
.data-pixels i:nth-child(2){left:15%;top:43%;animation-duration:18s;animation-delay:-13s}
.data-pixels i:nth-child(3){left:9%;top:72%;animation-duration:12s;animation-delay:-9s}
.data-pixels i:nth-child(4){left:21%;top:88%;animation-duration:16s;animation-delay:-19s}
.data-pixels i:nth-child(5){right:8%;top:24%;animation-duration:15s;animation-delay:-16s}
.data-pixels i:nth-child(6){right:17%;top:51%;animation-duration:19s;animation-delay:-7s}
.data-pixels i:nth-child(7){right:10%;top:79%;animation-duration:13s;animation-delay:-11s}
.data-pixels i:nth-child(8){right:23%;top:9%;animation-duration:17s;animation-delay:-21s}
@keyframes data-drift{from{transform:translate3d(0,16px,0);opacity:.25}to{transform:translate3d(28px,-72px,0);opacity:.7}}

/* A breathing underline suggests energy without pulsing the words themselves. */
.hero h1{position:relative}
.hero h1::after{content:'';position:absolute;left:30%;bottom:-12px;width:40%;height:3px;background:linear-gradient(90deg,transparent,var(--metal-blue),var(--brand-gold),transparent);filter:blur(1px);opacity:.4;pointer-events:none;animation:heading-glow 7s ease-in-out infinite;animation-play-state:paused}
@keyframes heading-glow{0%,100%{opacity:.25;transform:translateX(-12px) scaleX(.8)}50%{opacity:.85;transform:translateX(12px) scaleX(1.1)}}
#public-speaking{position:relative}
#public-speaking::after{content:'';position:absolute;inset:-1px;border:1px solid var(--metal-blue);border-radius:inherit;pointer-events:none;opacity:.2;animation:card-glow 7s ease-in-out infinite;animation-play-state:paused}
@keyframes card-glow{0%,100%{opacity:.15}50%{opacity:.65}}
.hero.motion-active .data-pixels i,.hero.motion-active h1::after,#public-speaking.motion-active::after{animation-play-state:running}
.hero-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:30px;width:100%}
.hero-controls .eyebrow{margin-bottom:0}
.motion-toggle{width:44px;height:44px;flex-shrink:0;padding:0;border:1px solid var(--border-strong);border-radius:100px;background:var(--metal-base);color:var(--text-dim);font:inherit;font-size:16px;cursor:pointer}
.motion-toggle:hover{color:var(--text);border-color:var(--metal-blue)}
.motion-paused *,.motion-paused *::before,.motion-paused *::after,.page-hidden *,.page-hidden *::before,.page-hidden *::after{animation-play-state:paused!important}
.motion-paused .reveal,.motion-paused .reveal.is-in{opacity:1;transform:none;transition:none}
.motion-ready:not(.hero-in-view) .aurora .blob,.motion-ready:not(.hero-in-view) .orb::after{animation-play-state:paused}
@media(max-width:560px){.data-pixels i:nth-child(even){display:none}.data-pixels i:nth-child(1){left:3%}.data-pixels i:nth-child(3){left:4%}.data-pixels i:nth-child(5){right:3%}.data-pixels i:nth-child(7){right:4%}}
@media(max-width:360px){.hero-controls{gap:8px}.hero-controls .eyebrow{font-size:10.5px;letter-spacing:.5px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.data-pixels{display:none}.hero h1::after,#public-speaking::after{animation:none;opacity:.18}.motion-toggle{display:none}}
/* One assessment entry area, with a quiet explanation of intake personalization. */
#what-we-do > .wrap > .sec-eyebrow,
#what-we-do > .wrap > h2,
#what-we-do > .wrap > .sec-sub { text-align:center; margin-left:auto; margin-right:auto; }
#what-we-do .pricing-strip { max-width:none; margin:32px 0 0; }
#what-we-do .pricing-note { max-width:none; }
.focus-summary { margin:32px 0 0; padding:24px 0; border-top:1px solid var(--border-strong); border-bottom:1px solid var(--border-strong); }
.focus-summary h3 { margin-bottom:10px; font-size:19px; }
.focus-summary p { color:var(--text-dim); max-width:85ch; }
.engagement-heading { margin-top:40px; text-align:center; }
.engagement-heading h3 { font-size:24px; margin-bottom:8px; }
.engagement-heading p { color:var(--text-dim); }
#what-we-do .cs-strip { max-width:none; margin:24px 0 0; align-items:stretch; }
#what-we-do .cs-card { display:flex; flex-direction:column; align-items:flex-start; padding:30px; }
#what-we-do .cs-card p { color:var(--text-dim); font-size:15px; }
#what-we-do .cs-card .referral-link { margin-top:auto!important; padding-top:20px; }
#what-we-do .cs-card .cs-tag { margin-bottom:14px; }
#focus-areas { scroll-margin-top:110px; }
@media(max-width:560px){#what-we-do .cs-card{padding:24px}}

/* A sequence, not a second set of service choices. */
#how-it-works .sec-eyebrow,#how-it-works h2,#how-it-works .sec-sub { text-align:center; margin-left:auto; margin-right:auto; }
.process-steps { list-style:none; padding:0; margin:0; }
.process-steps .step { border-radius:0; border-top:1px solid var(--border-strong); padding:24px 0; background:none; box-shadow:none; }
.process-steps h3 { font-size:19px; margin-bottom:10px; }
.process-steps .step-num { background:none; box-shadow:none; border:0; width:auto; height:auto; justify-content:flex-start; color:var(--cyan); }

/* Brushed blue metal connects the sequence without turning steps into buttons. */
.process-steps { gap:96px; }
.process-steps .step { border:0; }
.process-steps .step::after { display:none; }
.process-steps .step-num { width:56px; height:56px; justify-content:center; border-radius:50%; border:1px solid var(--metal-edge); color:var(--text); font-size:18px; background:linear-gradient(140deg,var(--brand-silver),var(--metal-edge) 20%,var(--metal-top) 58%,var(--metal-base)); box-shadow:inset 0 2px 2px var(--border-strong),inset 0 -3px 4px var(--bg),0 4px 0 var(--metal-base),0 9px 18px var(--bg); }
.process-steps .step:not(:last-child)::before { content:''; position:absolute; width:80px; height:80px; right:-88px; top:50%; background:url('/assets/dtr-steel-arrow.png') center/contain no-repeat; transform:translateY(-50%); pointer-events:none; }
.sample-showcase { margin-top:36px; display:grid; grid-template-columns:320px 1fr; gap:42px; align-items:center; padding:40px; border:1px solid var(--metal-edge); border-radius:24px; background:radial-gradient(ellipse at 12% 55%,var(--metal-shadow),transparent 60%),linear-gradient(135deg,var(--metal-top),var(--metal-base) 48%,var(--bg)); box-shadow:inset 0 2px 1px var(--border-strong),inset 0 -2px 4px var(--bg),0 6px 0 var(--metal-base),0 18px 35px var(--bg); }
.sample-art { position:relative; width:290px; height:330px; margin:auto; }
.sample-art::before { content:''; position:absolute; inset:10%; border-radius:50%; background:var(--brand-gold); opacity:.14; filter:blur(36px); }
.sample-book,.sample-sheet { position:absolute; width:216px; height:278px; border-radius:4px 12px 12px 4px; border:1px solid var(--metal-edge); }
.sample-sheet { top:24px; left:46px; padding:25px 18px; background:linear-gradient(140deg,var(--brand-silver),var(--metal-edge)); color:var(--brand-navy); }
.sample-sheet span { font-size:9px; font-weight:800; }
.sample-sheet i { display:block; height:28px; border-bottom:2px solid var(--metal-top); margin-top:15px; }
.sample-sheet-back { transform:rotate(13deg) translateX(12px); }
.sample-sheet-middle { transform:rotate(5deg); }
.sample-book { top:26px; left:20px; transform:rotate(-7deg); padding:22px; background:linear-gradient(105deg,var(--metal-base) 3%,var(--metal-edge) 5%,var(--metal-top) 8%,var(--brand-navy) 65%,var(--metal-base)); box-shadow:inset 1px 1px 0 var(--brand-silver),8px 12px 20px var(--bg); }
.sample-book img { display:block; width:130px; height:auto; margin-bottom:12px; mix-blend-mode:screen; }
.sample-cover-label { display:block; color:var(--metal-blue); font-size:8px; letter-spacing:.12em; }
.sample-book strong { display:block; font-size:17px; line-height:1.25; margin-top:12px; }
.sample-cover-rule { height:2px; margin:12px 0; background:linear-gradient(90deg,var(--brand-gold),transparent); }
.sample-cover-footer { color:var(--brand-silver); font-size:8px; line-height:1.8; }
.sample-copy .sample-kicker { color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.14em; margin-bottom:12px; }
.sample-copy h3 { font-size:clamp(24px,3vw,32px); line-height:1.2; margin-bottom:16px; }
.sample-copy p { color:var(--text-dim); }
.sample-copy .btn { margin-top:24px; white-space:normal; }
.sample-copy .sample-access { margin-top:16px; color:var(--text); font-size:13px; }
.sample-copy .sample-disclosure { margin-top:8px; font-size:12px; }
@media(max-width:900px){
 .process-steps { gap:80px; }
 .process-steps .step:not(:last-child)::before { top:auto; bottom:-76px; left:50%; right:auto; width:72px; height:72px; transform:translateX(-50%) rotate(90deg); }
 .sample-showcase { grid-template-columns:1fr; gap:12px; padding:28px 24px; }
 .sample-art { transform:scale(.85); margin-left:calc(50% - 145px); margin-top:-12px; margin-bottom:-24px; }
 .sample-copy { text-align:center; }
}
@media(max-width:380px){.sample-art{transform:scale(.65);transform-origin:center center;margin-top:-42px;margin-bottom:-50px}.sample-showcase{padding:24px 18px}}

/* Hero wave field: a perspective field of extruded blocks swelling under the hero,
   drawn on one 2D canvas by the inline script in index.html (no library). It sits
   behind the lower hero, masked away from the headline, and runs only while the
   hero is on screen and motion is allowed; otherwise it holds one still frame.
   The focus brackets below still pull in around the headline once. */
.hero-wave{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom,transparent 36%,#000 64%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent 36%,#000 64%,#000 90%,transparent)}
/* The paid-services disclosure sits over the field. A near-solid --bg plate keeps
   --text-faint at or above 4.5:1 whatever crest passes behind (Codex review of
   PR #32: a text halo alone fell to ~3:1). The trust bar is --text-dim, so a
   halo is enough there. */
.hero-note{background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:14px}
.trust-bar li{text-shadow:0 1px 2px var(--bg),0 0 10px var(--bg),0 0 18px var(--bg)}
/* The sample card sits over the densest part of the field (all of it on phones).
   Same metallic gradient as every .glass panel, at ~80% so the waves move faintly
   behind the metal, with a light blur to keep its text clean. */
.orb-card.glass:not(.eyebrow){background:linear-gradient(145deg,color-mix(in srgb,var(--metal-top) 80%,transparent) 0%,color-mix(in srgb,var(--metal-base) 80%,transparent) 48%,color-mix(in srgb,var(--field-solid) 84%,transparent) 100%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

.hero h1::before{content:'';position:absolute;inset:-14px -28px -20px;pointer-events:none;opacity:.7;--bracket:var(--metal-edge);
  background:linear-gradient(var(--bracket),var(--bracket)) left top/22px 1.5px,linear-gradient(var(--bracket),var(--bracket)) left top/1.5px 22px,
    linear-gradient(var(--bracket),var(--bracket)) right top/22px 1.5px,linear-gradient(var(--bracket),var(--bracket)) right top/1.5px 22px,
    linear-gradient(var(--bracket),var(--bracket)) left bottom/22px 1.5px,linear-gradient(var(--bracket),var(--bracket)) left bottom/1.5px 22px,
    linear-gradient(var(--bracket),var(--bracket)) right bottom/22px 1.5px,linear-gradient(var(--bracket),var(--bracket)) right bottom/1.5px 22px;
  background-repeat:no-repeat}
.hero:not(.intro-done) h1::before{animation:focus-in 1.1s cubic-bezier(.2,.8,.2,1) .15s both}
.hero:not(.intro-done) h1{animation:focus-pull .9s ease-out both}
@keyframes focus-in{0%{opacity:0;transform:scale(1.16)}60%{opacity:.95}100%{opacity:.55;transform:scale(1)}}
@keyframes focus-pull{from{filter:blur(5px)}to{filter:blur(0)}}
.motion-paused .hero h1,.motion-paused .hero h1::before{animation:none}

/* The page closes with the same wave field behind the call to action, and two still
   strips of it divide the middle sections. The band's text sits above the field's
   fade-in, and a second Pause button stops it where it is seen. Strips never move. */
.cta-band{position:relative;overflow:hidden;isolation:isolate;width:100%;box-sizing:border-box}
.cta-band>.wrap{position:relative;z-index:1}
.cta-band h2,.cta-band .sec-sub{text-shadow:0 1px 2px var(--bg),0 0 10px var(--bg),0 0 18px var(--bg)}
.cta-wave{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:.7;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 30%,#000 70%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent 30%,#000 70%,#000 88%,transparent)}
.cta-motion-toggle{position:absolute;right:20px;bottom:20px;z-index:2}
.wave-strip{position:relative;height:72px;width:100%;max-width:1100px;margin:0 auto;pointer-events:none;align-self:center}
.wave-strip canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 55%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 60% at 50% 55%,#000 40%,transparent 100%)}
@media(max-width:560px){.hero-wave{opacity:.65}.cta-wave{opacity:.55}.wave-strip{height:48px}.cta-motion-toggle{right:12px;bottom:12px}.hero h1::before{inset:-10px -10px -16px;background-size:14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero h1::before{animation:none}}