:root { color-scheme:light; --ink:#25282c; --muted:#62676e; --accent:#30343a; --line:#e1e3e5; --wash:#f4f5f5; --label:#5b6168; --surface:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:#fff; color:var(--ink); font:1rem/1.65 Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#cbd2da; color:#131619; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible { outline:3px solid #737b85; outline-offset:5px; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure,blockquote { margin:0; }
[hidden] { display:none !important; }
.wrap { width:min(74rem,calc(100% - 5rem)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-5rem; left:1rem; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:10; }
.skip-link:focus { top:1rem; }
.header { min-height:6.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand { display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
.brand img { width:3.75rem; height:3.75rem; }
.wordmark { font-size:2rem; line-height:1; letter-spacing:-.075rem; font-weight:700; }
.wordmark small { display:block; margin-top:.4rem; font-size:.625rem; line-height:1.3; font-weight:500; letter-spacing:.19em; }
.header nav { display:flex; align-items:center; gap:2rem; font-size:.875rem; }
.hello-link { display:inline-flex; align-items:center; gap:1rem; border:1px solid var(--line); border-radius:2rem; padding:.65rem 1.2rem; }
.hello-link:hover,.nav-learn:hover,.profile-links a:hover { color:var(--accent); }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:3.5rem; padding:3rem 0 4.75rem; }
.hero-copy { min-width:0; }
.eyebrow { font-size:.8125rem; line-height:1.6; letter-spacing:.075em; color:var(--label); font-weight:700; }
h1 { font-size:clamp(3rem,4.8vw,4.4rem); font-weight:500; letter-spacing:-.065em; line-height:1.07; margin-top:1.4rem; }
h1 em,h2 em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:var(--accent); letter-spacing:-.055em; }
h1 em { display:inline-block; padding-bottom:.1em; }
.intro { font-size:1rem; line-height:1.7; max-width:33rem; margin-top:1.25rem; color:var(--muted); }
.teaching-intro { margin-top:1.1rem; max-width:33rem; font-size:.9375rem; line-height:1.55; color:var(--muted); }
.teaching-intro > p { color:var(--ink); font-weight:600; }
.teaching-intro ul { padding-left:1.1rem; margin:.55rem 0 0; }
.teaching-intro li { padding-left:.25rem; margin:.5rem 0; }
.teaching-intro li::marker { color:var(--ink); }
.teaching-intro strong { font-weight:600; color:var(--ink); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem 1.7rem; margin-top:1.8rem; }
.button { display:inline-flex; align-items:center; justify-content:space-between; border-radius:2rem; min-height:3.4rem; padding:.9rem 1.45rem; background:var(--accent); color:#fff; font-size:.9375rem; gap:1.5rem; transition:background .2s,transform .2s; }
.button:hover { background:#171a1e; transform:translateY(-2px); }
.text-link { font-size:.875rem; border-bottom:1px solid var(--line); padding:.5rem 0; }
.text-link span { margin-left:.5rem; }
.hero-reassurance { margin-top:1.2rem; font-size:.875rem; color:var(--muted); }
.coast-photo { position:relative; margin:0 .5rem 0 0; isolation:isolate; }
.coast-photo::before { content:''; position:absolute; inset:1.5rem -1rem -1rem 1.5rem; background:#e9ebed; border-radius:1.5rem; z-index:-1; transform:rotate(3deg); }
.coast-photo img { aspect-ratio:1/1.12; width:100%; height:auto; border-radius:1.5rem; object-fit:cover; object-position:center 70%; box-shadow:0 18px 48px #25282c18; }
.coast-photo figcaption { position:absolute; bottom:1.1rem; left:1.1rem; right:1.1rem; background:#25282ceb; backdrop-filter:blur(10px); border:1px solid #ffffff24; border-radius:.8rem; padding:.85rem 1rem; font-size:.875rem; color:#fff; }
.coast-photo figcaption span { display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em; color:#cdd1d5; margin-bottom:.25rem; }
.experience-summary { display:grid; grid-template-columns:1.3fr .8fr 1fr 1fr; gap:2rem; align-items:center; border-top:1px solid var(--line); padding:2rem 0 2.75rem; }
.experience-summary p { font-size:.9375rem; color:var(--muted); }
.experience-summary strong { display:block; font-weight:500; color:var(--ink); font-size:1.1875rem; line-height:1.4; }
.experience-summary p:first-child strong { font-size:.9375rem; font-weight:700; }
.experience-summary span { font-size:.875rem; }
.learn { padding:3rem; background:#f4f5f5; color:var(--ink); border:1px solid var(--line); border-radius:1.4rem; overflow:hidden; }
.learn-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.learn .eyebrow { color:var(--label); font-size:.75rem; }
h2 { font-size:clamp(2rem,3.7vw,3.3rem); font-weight:500; line-height:1.15; letter-spacing:-.05em; }
.learn h2 { margin-top:.8rem; }
.learn h2 em { color:var(--accent); }
.learn-heading > p { max-width:19rem; color:var(--muted); font-size:1rem; }
.platform-stage { display:grid; gap:1rem; }
.is-enhanced .platform-stage { background:#fff; border-radius:1.2rem; box-shadow:0 12px 36px #25282c09; overflow:hidden; }
.is-enhanced .lesson-card { grid-area:1/1; background:transparent; border:0; box-shadow:none; }
.lesson-card { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:2.5rem; padding:2rem 2.3rem; min-height:26rem; background:#fff; border:1px solid var(--line); border-radius:1.2rem; color:var(--ink); box-shadow:0 12px 36px #25282c09; }
.lesson-intro { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.platform-brand { width:100%; display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.logo-flight-window { width:100%; height:10rem; display:grid; place-items:center; overflow:hidden; }
.logo-flight { width:7rem; height:7rem; display:grid; place-items:center; border:1px solid #e1e3e5; border-radius:1.75rem; background:#fff; box-shadow:0 10px 26px #25282c0f; will-change:transform; }
.platform-brand .logo-flight img { width:4.75rem; height:4.75rem; object-fit:contain; }
.platform-brand > span { font-size:.75rem; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.lesson-intro h3 { font-size:2.4rem; letter-spacing:-.055em; font-weight:500; margin-top:.9rem; line-height:1.2; }
.lesson-intro > p { margin-top:.7rem; font-size:.9375rem; color:var(--muted); max-width:21rem; }
.lesson-category { padding:.45rem .75rem; margin-top:1.25rem; font-size:.6875rem; letter-spacing:.08em; font-weight:700; color:#fff; background:var(--ink); border-radius:.4rem; }
.lesson-example { border-left:1px solid var(--line); padding-left:2.5rem; display:flex; flex-direction:column; justify-content:center; }
.example-label { font-size:.75rem; font-weight:700; letter-spacing:.09em; color:var(--muted); }
.lesson-example ul { list-style:none; padding:0; margin:.5rem 0 0; font-size:.9375rem; line-height:1.55; color:var(--muted); }
.lesson-example li { padding:1rem 0; border-bottom:1px solid var(--line); }
.lesson-example li:last-child { border-bottom:0; padding-bottom:0; }
.platform-uses strong { display:block; color:var(--ink); font-size:1rem; font-weight:600; margin-bottom:.25rem; }
.learn-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:1.3rem; font-size:.875rem; color:var(--muted); }
.learn-bottom a { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
#rotation-toggle { color:var(--ink); background:#fff; border:1px solid #c8ccd1; border-radius:2rem; min-height:2.75rem; padding:.5rem 1rem; font-size:.8125rem; }
#rotation-toggle span { margin-right:.35rem; }
#rotation-toggle:disabled { cursor:default; }
.services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.5rem; padding:3.75rem 0; }
.service-number { display:inline-block; color:#fff; background:var(--ink); padding:.25rem .65rem; border-radius:.35rem; font-size:.75rem; letter-spacing:.065em; font-weight:700; }
.services h2 { font-size:1.45rem; margin-top:.8rem; letter-spacing:-.035em; }
.services p { margin-top:.85rem; color:var(--muted); font-size:1rem; }
.about { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:4rem; padding:3.75rem 0 4.5rem; border-top:1px solid var(--line); align-items:start; }
.about-photos { display:grid; gap:1.1rem; min-width:0; }
.about-photo { margin:0; padding-top:.3rem; }
.teaching-photo { margin:0; padding:.85rem; background:var(--wash); border:1px solid var(--line); border-radius:1rem; }
.teaching-photo img { width:100%; height:auto; border-radius:.6rem; }
.teaching-photo figcaption { padding:.6rem .15rem 0; font-size:.8125rem; color:var(--muted); }
.portrait { width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:1.2rem; background:#eceeef; }
.portrait img { width:100%; height:100%; object-fit:cover; object-position:0% center; }
.about-photo figcaption { font-size:1rem; font-weight:700; padding:.9rem .2rem; }
.about-photo figcaption span { display:block; font-size:.8125rem; color:var(--muted); font-weight:400; margin-top:.2rem; }
.about-copy > .eyebrow { margin:0 0 .8rem; }
.about-copy > p:not(.eyebrow) { margin-top:1.1rem; color:var(--muted); font-size:1rem; }
.work-history { display:grid; gap:.75rem; margin-top:1.75rem; }
.work-item { display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:1.15rem; align-items:center; padding:.9rem; border:1px solid var(--line); border-radius:.8rem; background:var(--surface); }
.work-item:hover { border-color:#8e959d; }
.company-logo { display:flex; align-items:center; justify-content:center; min-height:4.5rem; padding:.75rem; border-radius:.4rem; background:#f0f2f4; }
.company-logo img { width:100%; height:auto; }
.caseflood .company-logo { background:#171c21; }
.work-detail { display:block; font-size:.875rem; line-height:1.5; }
.work-detail strong { display:block; color:var(--ink); font-size:.9375rem; font-weight:600; margin-bottom:.2rem; }
.work-detail > span { color:var(--muted); }
.work-detail small { display:block; font-size:.75rem; letter-spacing:.08em; color:var(--muted); margin-top:.45rem; }
.profile-links { display:flex; flex-wrap:wrap; gap:1.75rem; margin-top:1.4rem; }
.profile-links a { font-size:.875rem; border-bottom:1px solid var(--line); padding:.35rem 0; min-height:2.75rem; }
.profile-links span { margin-left:.5rem; }
.booking { padding:0 0 3.5rem; }
.booking-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:1.75rem; }
.booking-heading h2 { margin-top:.8rem; }
.booking-heading > p { max-width:26rem; color:var(--muted); }
.booking-calendar { display:block; width:100%; height:740px; border:1px solid var(--line); border-radius:1.25rem; background:#fff; }
.booking-alternative { margin-top:1rem; font-size:.875rem; color:var(--muted); }
.booking-alternative a { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
@media(max-width:700px) { .booking { padding-bottom:2.5rem; } .booking-heading { flex-direction:column; align-items:flex-start; gap:1rem; } .booking-calendar { height:820px; border-radius:.75rem; } }
.contact { background:#f4f5f5; border:1px solid var(--line); border-radius:1.25rem; padding:2.75rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem; }
.contact .eyebrow { font-size:.75rem; letter-spacing:.07em; }
.contact h2 { font-size:2.6rem; margin-top:.9rem; }
.contact h2 em { color:var(--label); }
.contact-intro { color:var(--muted); font-size:.9375rem; margin-top:1rem; max-width:26rem; }
.contact-links { display:grid; gap:.7rem; min-width:0; }
.contact-links a { color:var(--accent); font-size:1rem; overflow-wrap:anywhere; min-height:3rem; padding:.7rem 1rem; border:1px solid #d5d8dc; background:#fff; border-radius:.65rem; }
.contact-links a:hover { border-color:var(--accent); }
.contact-links a span { margin-left:.5rem; }
.footer { padding-block:2rem; color:var(--muted); font-size:.75rem; }
.footer > div { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer > p { font-size:.75rem; max-width:53rem; margin-top:1rem; color:#62676e; }
@media(prefers-reduced-motion:no-preference) { .hero-copy { animation:arrive .7s both; } .coast-photo { animation:arrive .85s .12s both; } @keyframes arrive { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } }
@media(max-width:1000px) { .hero { gap:2rem; } h1 { font-size:clamp(2.8rem,4.8vw,4.4rem); } .learn { padding:2rem; } .lesson-card { gap:1.5rem; padding:1.75rem; } .lesson-example { padding-left:1.5rem; } .about { gap:2.5rem; } .work-item { grid-template-columns:7.5rem minmax(0,1fr); } }
@media(max-width:860px) { .hero { grid-template-columns:1fr; padding:2rem 0 3.5rem; gap:2.5rem; } h1 { font-size:clamp(3rem,7vw,4.2rem); } .intro { max-width:36rem; } .coast-photo img { aspect-ratio:16/9; object-position:center 66%; } .experience-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; } .learn-heading { align-items:flex-start; } .learn-heading > p { max-width:15rem; font-size:.9375rem; } .about { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:2rem; } .work-item { grid-template-columns:1fr; gap:.65rem; } .company-logo { width:10rem; } }
@media(max-width:700px) { .wrap { width:calc(100% - 2.5rem); } .header { min-height:6rem; } .header nav { gap:0; } .nav-learn { display:none; } .hello-link { padding:.6rem .85rem; } .hero { padding-top:1.5rem; } h1 { font-size:clamp(2.65rem,8vw,3.3rem); } .hero .eyebrow { font-size:.75rem; } .intro { font-size:1rem; } .coast-photo { margin-right:.65rem; } .coast-photo img { aspect-ratio:4/3; } .experience-summary { padding-bottom:2rem; } .experience-summary strong { font-size:1.0625rem; } .learn { padding:1.5rem 1.1rem; border-radius:1.2rem; } .learn-heading { flex-direction:column; gap:1rem; margin-bottom:1.5rem; } .learn-heading > p { max-width:100%; } .learn h2 { font-size:2.45rem; } .lesson-card { grid-template-columns:1fr; gap:1.5rem; padding:1.4rem; min-height:38rem; } .lesson-intro h3 { font-size:2.1rem; } .lesson-intro > p { max-width:none; } .lesson-category { display:none; } .lesson-example { border-left:0; border-top:1px solid var(--line); padding:1.3rem 0 0; justify-content:flex-start; } .lesson-example ul { font-size:.875rem; } .learn-bottom { font-size:.8125rem; } .services { grid-template-columns:1fr; gap:1.75rem; padding:2.5rem 0; } .services h2 { margin-top:.5rem; } .services p { margin-top:.6rem; } .about { grid-template-columns:1fr; gap:1.5rem; padding:2.5rem 0; } .portrait { max-width:20rem; } .about h2 { font-size:2.6rem; } .work-item { grid-template-columns:8rem minmax(0,1fr); gap:.9rem; } .company-logo { width:auto; } .contact { padding:1.5rem; } .contact h2 { font-size:2.2rem; } .contact-links { width:100%; } .contact-links a { font-size:.9375rem; } }
@media(max-width:380px) { .wrap { width:calc(100% - 2rem); } .brand { gap:.2rem; } .brand img { width:3.25rem; height:3.25rem; } .wordmark { font-size:1.8rem; } .work-item { grid-template-columns:1fr; } .company-logo { width:9rem; } .lesson-card { padding:1.1rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }