/* Foundations */
:root { --navy:#0f172a; --bg:#f8fafc; --indigo:#4f46e5; --text:#1e293b; --muted:#475569; --line:#dbe2ed; --white:#fff; --soft:#eef2ff; --radius:16px; }
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--indigo); text-underline-offset:4px; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--indigo); outline-offset:5px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { color:var(--navy); line-height:1.15; letter-spacing:-.035em; }
h1 { font-size:clamp(2.8rem,5.2vw,4.8rem); font-weight:750; margin-bottom:24px; }
h2 { font-size:clamp(2rem,3.4vw,3rem); margin-bottom:20px; }
h3 { font-size:1.25rem; letter-spacing:-.02em; }
p { margin-bottom:20px; }
.section { padding-block:clamp(64px,8vw,108px); }
.eyebrow { font-size:.74rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; color:var(--indigo); margin-bottom:18px; }
.intro { max-width:650px; color:var(--muted); font-size:1.08rem; }
.section-top { margin-bottom:40px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:18px; min-height:48px; padding:13px 23px; border:1px solid transparent; border-radius:8px; background:var(--indigo); color:white; font-size:.9rem; font-weight:650; text-decoration:none; transition:background .18s,box-shadow .18s; }
.button:hover { background:#4338ca; box-shadow:0 4px 14px #4f46e51a; }
.button.secondary { background:white; color:var(--text); border-color:var(--line); }
.button.secondary:hover { background:var(--soft); }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.skip-link { position:fixed; top:12px; left:12px; transform:translateY(-160%); z-index:100; padding:12px 20px; background:var(--navy); color:white; }
.skip-link:focus { transform:translateY(0); }
/* Header and responsive navigation */
.site-header { background:#ffffffed; border-bottom:1px solid var(--line); }
.brand { font-size:1rem; display:flex; align-items:center; gap:12px; color:var(--navy); text-decoration:none; font-weight:750; line-height:1.3; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--navy); color:white; border-radius:9px; font:24px Georgia,serif; }
.brand small { display:block; color:var(--muted); font-size:.68rem; font-weight:500; letter-spacing:.06em; margin-top:4px; }
/* Hero: a CSS-only mathematical notebook */
.hero { padding-block:clamp(56px,7vw,96px) 42px; overflow:hidden; }
.hero h1 span { color:var(--indigo); }
.hero-copy > p:not(.eyebrow) { color:var(--muted); max-width:540px; font-size:1.08rem; }
.hero .actions { margin-top:30px; }
.notebook { min-height:420px; position:relative; padding:30px; border:1px solid #cbd5e1; border-radius:var(--radius); background-color:#fff; background-image:linear-gradient(#e2e8f066 1px,transparent 1px),linear-gradient(90deg,#e2e8f066 1px,transparent 1px); background-size:28px 28px; box-shadow:0 18px 50px #0f172a08; transform:rotate(2deg); }
.notebook-label { display:flex; justify-content:space-between; gap:12px; font:10px ui-monospace,monospace; letter-spacing:.12em; color:var(--muted); }
.equation { text-align:center; font:italic clamp(1.65rem,3vw,2.4rem) Georgia,serif; color:var(--navy); padding-top:35px; }
.graph { position:relative; height:170px; width:85%; margin:28px auto 0; border-left:1px solid #94a3b8; border-bottom:1px solid #94a3b8; }
.graph::before { content:""; position:absolute; width:92%; height:140px; bottom:15px; left:3%; border-bottom:3px solid var(--indigo); border-radius:0 0 50% 50%; transform:rotate(-18deg); }
.graph::after { content:"f(x)"; position:absolute; right:0; top:20px; font:italic 20px Georgia,serif; color:var(--indigo); }
.axis-x { position:absolute; bottom:-25px; right:-10px; font:italic 15px Georgia,serif; }
.axis-y { position:absolute; top:-20px; left:-5px; font:italic 15px Georgia,serif; }
.notebook-note { margin:35px 0 0; text-align:center; font:11px ui-monospace,monospace; color:var(--muted); }
.trust-row { display:flex; flex-wrap:wrap; gap:18px 36px; border-top:1px solid var(--line); margin-top:64px; padding-top:26px; color:var(--muted); font-size:.8rem; }
.trust-row span::before { content:"✓"; margin-right:9px; color:var(--indigo); font-weight:700; }
/* Audience */
.audience { padding-block:36px 52px; }
.audience h2 { font-size:1.4rem; max-width:260px; line-height:1.35; }
.tags { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.tags li { padding:7px 13px; border:1px solid var(--line); border-radius:6px; font-size:.8rem; background:white; color:var(--muted); }
/* Expertise cards; add additional articles to extend the grid. */
.expertise { background:white; border-block:1px solid var(--line); }
.subject { border:1px solid var(--line); padding:28px; border-radius:var(--radius); background:var(--bg); }
.symbol { display:grid; place-items:center; width:43px; height:43px; border:1px solid #d5d9fb; background:var(--soft); border-radius:9px; color:var(--indigo); font:24px Georgia,serif; margin-bottom:24px; }
.subject p { font-size:.9rem; color:var(--muted); }
.topic-list { margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); list-style:none; font-size:.8rem; color:var(--muted); }
.topic-list li { margin-block:6px; padding-left:14px; position:relative; }
.topic-list li::before { content:"·"; position:absolute; left:0; color:var(--indigo); }
.subject-note { min-height:280px; display:flex; flex-direction:column; justify-content:center; padding:28px; border-left:2px solid var(--indigo); margin:0; }
.subject-note p { font-size:.95rem; color:var(--muted); margin-bottom:0; }
/* Teaching approach */
.principle { margin-top:32px; padding:20px 24px; border-left:3px solid var(--indigo); background:var(--soft); color:#3730a3; font-size:.95rem; }
.steps { list-style:none; counter-reset:step; margin:0; padding:0; }
.steps li { counter-increment:step; display:grid; grid-template-columns:40px 1fr; gap:20px; padding:0 0 25px; }
.steps li::before { content:"0" counter(step); color:var(--indigo); font:12px ui-monospace,monospace; border-top:1px solid #a5b4fc; padding-top:8px; }
.steps h3 { font-size:1.06rem; margin:3px 0 8px; }
.steps p { color:var(--muted); font-size:.9rem; margin:0; }
/* Academic profile: all biographical details await verified copy. */
.credentials { background:var(--navy); color:#cbd5e1; }
.credentials h2,.credentials h3 { color:white; }
.credentials .eyebrow { color:#a5b4fc; }
.credentials .col-lg-5 > p { max-width:400px; }
.edit-label { display:inline-block; border:1px solid #64748b; padding:4px 10px; border-radius:4px; font:10px ui-monospace,monospace; letter-spacing:.08em; color:#e2e8f0; margin-bottom:24px; }
.profile-details { display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; margin:0; }
.profile-details div { border-top:1px solid #334155; padding-top:16px; }
.profile-details dt { font-size:.85rem; font-weight:650; color:white; margin-bottom:7px; }
.profile-details dd { margin:0; font-size:.82rem; color:#cbd5e1; }
/* Session experience and editable rates */
.session-item { border-top:1px solid var(--line); padding-top:20px; }
.session-item .session-icon { color:var(--indigo); font:20px ui-monospace,monospace; margin-bottom:18px; display:block; }
.session-item h3 { font-size:1rem; }
.session-item p { font-size:.85rem; color:var(--muted); }
.rates { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:42px; padding:25px 30px; border:1px solid var(--line); border-radius:12px; background:white; }
.rates h3 { font-size:1rem; margin-bottom:6px; }
.rates p { font-size:.85rem; color:var(--muted); margin:0; }
/* Booking: responsive third-party calendar container. */
.booking { background:#eef2ff; border-block:1px solid #dfe3fb; }
.booking .section-top { text-align:center; }
.booking .intro { margin-inline:auto; }
.booking-shell { background:white; border:1px solid #d5d9eb; border-radius:var(--radius); box-shadow:0 12px 32px #0f172a06; overflow:hidden; }
.booking-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 26px; border-bottom:1px solid var(--line); font-size:.8rem; font-weight:600; }
.booking-bar span:last-child { color:var(--muted); font-weight:400; }
.setup-notice { margin:24px; padding:18px 22px; background:var(--bg); border:1px dashed #94a3b8; border-radius:8px; color:var(--muted); font-size:.85rem; }
.setup-notice strong { color:var(--navy); display:block; margin-bottom:4px; }
.setup-notice code { overflow-wrap:anywhere; }
.calendly-inline-widget { width:100%; min-width:0; height:700px; }
.booking-footnote { text-align:center; color:var(--muted); font-size:.78rem; margin:20px auto 0; max-width:690px; }
/* Closing call to action and footer */
.closing { padding:58px; background:var(--navy); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:76px; }
.closing h2 { color:white; font-size:clamp(1.7rem,3vw,2.5rem); max-width:610px; margin-bottom:14px; }
.closing p { color:#cbd5e1; margin:0; font-size:.95rem; }
.closing .button { flex-shrink:0; background:white; color:var(--navy); }
.closing .button:hover { background:#e0e7ff; }
footer { border-top:1px solid var(--line); padding-block:35px; }
.footer-top,.footer-bottom { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-top { align-items:center; margin-bottom:28px; }
.footer-contact { color:var(--muted); font-size:.82rem; overflow-wrap:anywhere; }
.footer-bottom { color:var(--muted); font-size:.72rem; border-top:1px solid var(--line); padding-top:22px; }
.footer-bottom p { margin:0; max-width:570px; }
/* Tablet and mobile */
@media (max-width:991.98px) {
  .notebook { width:min(100%,480px); margin:20px auto 0; }
  .hero h1 { max-width:620px; }
  .trust-row { margin-top:42px; gap:14px 24px; }
  .audience h2 { max-width:none; }
  .closing { padding:35px; }
}
@media (max-width:575.98px) {
  h1 { font-size:2.7rem; }
  .subject { padding:24px; }
  .profile-details { grid-template-columns:1fr; gap:20px; }
  .booking-bar { padding:16px; flex-wrap:wrap; gap:4px; }
  .setup-notice { margin:16px; padding:16px; }
  .closing { padding:28px; width:calc(100% - 24px); }
  .notebook-label { font-size:8px; }
  .trust-row { font-size:.74rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }
@media print { .site-header, .actions, .booking, .closing, .skip-link { display:none; } .section { padding-block:25px; } .credentials { background:white; color:var(--text); } .credentials h2,.credentials dt,.credentials dd { color:var(--text); } .accordion-item { break-inside:avoid; } }

/* Bootstrap component theming: keep layout and interactive state with Bootstrap. */
.navbar { --bs-navbar-color:var(--muted); --bs-navbar-hover-color:var(--indigo); }
.nav-link { font-size:.85rem; }
.navbar-toggler { min-width:48px; min-height:48px; border-color:var(--line); }
.navbar-toggler:focus { box-shadow:0 0 0 3px #4f46e540; }
.btn-primary { --bs-btn-bg:var(--indigo); --bs-btn-border-color:var(--indigo); --bs-btn-hover-bg:#4338ca; --bs-btn-hover-border-color:#4338ca; --bs-btn-active-bg:#3730a3; --bs-btn-active-border-color:#3730a3; }
.btn:focus-visible, .accordion-button:focus-visible { outline:3px solid var(--indigo); outline-offset:4px; box-shadow:none; }
.subject.card { --bs-card-border-color:var(--line); --bs-card-border-radius:var(--radius); }
.accordion { --bs-accordion-bg:transparent; --bs-accordion-border-color:var(--line); --bs-accordion-btn-color:var(--navy); --bs-accordion-active-color:#3730a3; --bs-accordion-active-bg:var(--soft); --bs-accordion-btn-focus-box-shadow:0 0 0 3px #4f46e533; }
.accordion-button { font-size:.92rem; font-weight:600; line-height:1.5; padding:22px 16px; min-height:60px; }
.accordion-header { letter-spacing:normal; }
.accordion-body { color:var(--muted); font-size:.88rem; }
.accordion-body p:last-child { margin-bottom:0; }
@media print { .accordion-collapse.collapse { display:block; } }

/* Accommodate the full public brand without crowding navigation. */
.brand { min-width:0; white-space:normal; }
.brand > span:last-child { min-width:0; overflow-wrap:anywhere; }
.brand-mark { flex-shrink:0; }
.navbar-brand { max-width:calc(100% - 76px); }
.navbar-brand [data-business="businessName"] { display:block; max-width:28ch; }
.service-location { font-weight:650; }
.profile-title { color:#e0e7ff; font-weight:650; }
.rates > div { max-width:760px; }
.rates [data-business="rateText"] { color:var(--navy); font-size:1.15rem; font-weight:700; margin-bottom:8px; }
@media (min-width:1200px) { .navbar-brand { max-width:410px; } }

/* Original tutor portrait: reserve its square dimensions to avoid layout shift. */
.tutor-headshot {
  display:block;
  width:clamp(180px,24vw,260px);
  max-width:100%;
  height:auto;
  aspect-ratio:1;
  border:1px solid #64748b;
  border-radius:var(--radius);
  margin-bottom:28px;
  box-shadow:0 12px 28px #0000001a;
}