/* ================================================================= Osteopathie Bernau — Design System Warm, calm, minimal. Brown brand + ochre/gold accents + a single bright-blue call-to-action. Self-hosted fonts, no third parties, no cookies. Matches the practice's brand screenshots. ================================================================= */ /* ---------- Fonts (self-hosted, woff2) ---------- */ @font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/firasans-400.woff2") format("woff2");} @font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/firasans-500.woff2") format("woff2");} @font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/firasans-600.woff2") format("woff2");} @font-face{font-family:"Fira Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/firasans-700.woff2") format("woff2");} @font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lora-400.woff2") format("woff2");} @font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/lora-400i.woff2") format("woff2");} @font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/lora-600.woff2") format("woff2");} @font-face{font-family:"Lora";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/lora-700.woff2") format("woff2");} /* ---------- Tokens ---------- */ :root{ --ink:#33302a; /* warm near-black — strong text, nav, accordion */ --ink-2:#3c382f; /* body text (warm dark gray) */ --muted:#6f6a60; /* secondary text */ --line:#e7e3da; --line-2:#efece4; --bg:#ffffff; --bg-soft:#f6f5f1; /* warm light-gray section band */ --bg-tint:#f5f3ee; /* faint warm tint */ --dark:#2b2620; /* (legacy) warm near-black */ --light-beige:#f4efe3; /* light beige — utility bar + footer */ --brown:#5e4f3c; /* hero heading, brand wordmark */ --brown-dark:#37302a; /* section headings */ --taupe:#a88f66; /* tile prefix, soft accents */ --gold:#b18f2c; /* links, kickers, "mehr erfahren", active nav */ --gold-700:#8c6f1f; /* gold hover / small-text contrast */ --gold-050:#f6efd7; /* gold tint backgrounds */ --blue:#16a0db; /* the call-to-action */ --blue-700:#1184bb; /* CTA hover */ --white:#fff; --font-display:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-body:"Lora",Georgia,"Times New Roman",serif; --container:1160px; --gutter:clamp(20px,5vw,44px); --section-y:clamp(60px,9vw,116px); --radius:3px; /* cards — crisp, near-square */ --radius-sm:3px; --radius-btn:2px; /* buttons — sharp rectangles */ --radius-pill:999px; /* circular elements only (icons, avatars) */ --shadow-sm:0 1px 2px rgba(40,32,20,.04),0 4px 14px rgba(40,32,20,.05); --shadow:0 6px 18px rgba(40,32,20,.07),0 18px 48px rgba(40,32,20,.07); --shadow-lg:0 14px 40px rgba(40,32,20,.12),0 40px 80px rgba(40,32,20,.10); --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:118px;overflow-x:clip;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0; font-family:var(--font-body); font-size:clamp(1.02rem,.99rem + .18vw,1.1rem); /* Lora is a serif — a touch larger for comfort */ line-height:1.72; color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* horizontal overflow is clipped on (overflow-x:clip); clipping here too would make a scroll container and break the sticky header. */ } h1,h2,h3,h4{font-family:var(--font-display);color:var(--brown-dark);line-height:1.12;font-weight:600;margin:0 0 .5em;letter-spacing:-.005em;} h1{font-size:clamp(2.15rem,1.4rem + 3.4vw,3.5rem);font-weight:500;} h2{font-size:clamp(1.8rem,1.25rem + 2.4vw,2.7rem);} h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);} p{margin:0 0 1.1em;} a{color:var(--gold-700);text-decoration:none;} a:hover{color:var(--gold);} img{max-width:100%;height:auto;display:block;} ul{margin:0 0 1.1em;padding-left:1.15em;} li{margin:.35em 0;} strong{color:var(--ink);font-weight:700;} ::selection{background:var(--gold);color:#fff;} :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px;} /* ---------- Layout primitives ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);} .section{padding-block:var(--section-y);} .section--soft{background:var(--bg-soft);} .section--tint{background:linear-gradient(180deg,var(--bg-tint),#fff);} .narrow{max-width:760px;} .lead{font-size:clamp(1.1rem,1.02rem + .5vw,1.32rem);color:var(--ink-2);line-height:1.6;} .center{text-align:center;} .mx-auto{margin-inline:auto;} /* Kicker / section label — the "Label__" signature motif */ .kicker{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--font-display);font-weight:500;font-size:.95rem; letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700); margin:0 0 1.1rem; } .kicker::after{content:"";width:2.1rem;height:2px;border-radius:2px;background:var(--gold);opacity:.9;} .kicker--center{justify-content:center;} .section__head{max-width:720px;margin-bottom:clamp(2.2rem,4vw,3.4rem);} .section__head.center{margin-inline:auto;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1;letter-spacing:.01em; padding:.9em 1.6em;border-radius:var(--radius-btn);border:1.5px solid transparent; cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); white-space:nowrap; } .btn--accent{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(22,160,219,.26);} .btn--accent:hover{background:var(--blue-700);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,160,219,.32);} .btn--ghost{background:#fff;color:var(--ink);border-color:var(--line);} .btn--ghost:hover{border-color:var(--brown);color:var(--brown);transform:translateY(-2px);} .btn--on-dark{background:#fff;color:var(--brown-dark);} .btn--on-dark:hover{background:var(--gold-050);color:var(--brown-dark);} /* Always-visible booking button, pinned just below the navigation (top-right) */ .cta-tab{ position:fixed;z-index:39; top:126px;right:0; display:inline-flex;align-items:center; background:var(--blue);color:#fff; font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.02em;line-height:1; padding:.72em 1.35em;border-radius:var(--radius-btn) 0 0 var(--radius-btn); box-shadow:0 8px 22px rgba(22,160,219,.34); transition:background .2s var(--ease),box-shadow .2s var(--ease); } .cta-tab:hover{background:var(--blue-700);color:#fff;box-shadow:0 12px 26px rgba(22,160,219,.42);} @media (max-width:540px){.cta-tab{top:124px;font-size:.86rem;padding:.62em 1.05em;}} /* Arrow text-link "mehr erfahren →" */ .arrow-link{ display:inline-flex;align-items:center;gap:.4em; font-family:var(--font-display);font-weight:500;color:var(--gold);letter-spacing:.01em; } .arrow-link svg{transition:transform .25s var(--ease);} .arrow-link:hover{color:var(--gold-700);} .arrow-link:hover svg{transform:translateX(4px);} /* ---------- Header ---------- */ /* NB: no backdrop-filter/filter/transform here — those would make the header the containing block for the position:fixed mobile menu and trap it. */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line-2);} .topbar{background:var(--light-beige);color:var(--ink-2);font-size:.84rem;font-family:var(--font-display);} .topbar__inner{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;min-height:38px;flex-wrap:wrap;} .topbar a{color:var(--ink-2);font-weight:600;} .topbar a:hover{color:var(--gold-700);} .topbar__sep{opacity:.45;} /* Language switcher — segmented toggle in the main navigation */ .lang-switch--nav{display:inline-flex;align-items:center;flex:none;overflow:hidden; border:1.5px solid var(--line);border-radius:var(--radius-btn); font-family:var(--font-display);font-weight:600;font-size:.82rem;letter-spacing:.05em;line-height:1;} .lang-switch--nav .lang-switch__sep{display:none;} .lang-switch--nav a,.lang-switch--nav .is-current{padding:.5em .72em;} .lang-switch--nav a{color:var(--ink-2);transition:background .2s var(--ease),color .2s var(--ease);} .lang-switch--nav a:hover{background:var(--bg-soft);color:var(--brown);} .lang-switch--nav .is-current{background:var(--brown);color:#fff;} .nav__inner{display:flex;align-items:center;gap:1rem;min-height:76px;} .nav__inner .brand{margin-right:auto;order:0;} .brand{display:flex;align-items:center;gap:.65rem;color:var(--brown);} .brand:hover{color:var(--brown);} .brand__mark{width:38px;height:38px;flex:none;} .brand__text{display:flex;flex-direction:column;line-height:1.1;} .brand__name{font-family:var(--font-display);font-weight:600;font-size:1.3rem;letter-spacing:.01em;color:var(--brown);} .brand__name span{color:inherit;} .brand__tag{font-size:.74rem;color:var(--muted);font-weight:600;letter-spacing:.01em;} .nav__menu{display:flex;align-items:center;gap:.15rem;order:1;} .nav__menu>a:not(.nav__cta){ position:relative;font-family:var(--font-display);font-weight:500;font-size:1rem;letter-spacing:.02em;color:var(--ink); padding:.55em .8em;border-radius:4px;transition:color .2s; } .nav__menu>a:not(.nav__cta)::after{ content:"";position:absolute;left:.8em;right:.8em;bottom:.28em;height:2px;border-radius:2px; background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease); } .nav__menu>a:not(.nav__cta):hover{color:var(--gold-700);} .nav__menu>a.is-active{color:var(--gold-700);} .nav__menu>a.is-active::after,.nav__menu>a:not(.nav__cta):hover::after{transform:scaleX(1);} .nav__cta{margin-left:.7rem;padding:.72em 1.3em;font-size:.95rem;} .lang-switch--nav{order:2;} .nav__toggle{display:none;order:3;} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fcfbf8 100%);} .hero__grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2rem,5vw,4.5rem);align-items:end; padding-block:clamp(48px,7vw,92px);} .hero h1{margin-bottom:.5em;color:var(--brown);font-weight:500;} .hero__eyebrow{display:block;font-size:.5em;font-weight:500;letter-spacing:.005em;color:var(--brown);margin-bottom:.05em;} .hero__claim{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 0;list-style:none;padding:0;} /* claim matches the hero lead (font, size, weight, colour); single line uses line-height:1 so the box hugs the glyphs and the hero image bottom-aligns to the visible text. */ .hero__claim{align-items:flex-end;} .hero__claim li{margin:0;font-family:var(--font-body);font-weight:400;color:var(--ink-2);font-size:clamp(1.1rem,1.02rem + .5vw,1.32rem);line-height:1;} .hero__claim li::after{content:".";} .hero__media{position:relative;} .hero__media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;aspect-ratio:16/12;object-fit:cover;} .hero__media::before{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:70%; border-radius:var(--radius);background: radial-gradient(circle at 30% 30%,rgba(177,143,44,.14),transparent 60%), radial-gradient(circle at 80% 80%,rgba(168,143,102,.16),transparent 60%); z-index:-1;filter:blur(6px);} .hero__badge{position:absolute;left:-14px;bottom:24px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow); padding:.85rem 1.1rem;display:flex;align-items:center;gap:.7rem;max-width:230px;} .hero__badge svg{flex:none;} .hero__badge b{display:block;font-family:var(--font-display);font-weight:600;color:var(--brown-dark);font-size:.98rem;line-height:1.2;} .hero__badge span{font-size:.8rem;color:var(--muted);} /* ---------- Tiles (Osteopathie / Leistungen) ---------- */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem);} .tile{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius); padding:clamp(1.5rem,2.4vw,2rem);position:relative;overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);} .tile:hover{transform:translateY(-5px);box-shadow:var(--shadow);} .tile:hover::before{transform:scaleX(1);} .tile h3{font-size:clamp(1.35rem,1.15rem + .7vw,1.6rem);margin-bottom:.7rem;color:var(--taupe);font-weight:500;line-height:1.15;} .tile h3 .accent{color:var(--brown-dark);font-weight:600;} .tile p{color:var(--ink-2);font-size:1rem;margin-bottom:1.4rem;} .tile .arrow-link{margin-top:auto;} /* ---------- Team ---------- */ .team{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2.2rem);max-width:760px;} .team--center{margin-inline:auto;} .team-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;text-align:center;box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease);} .team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);} .team-card__photo{width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,var(--bg-tint),var(--bg-soft));position:relative;overflow:hidden;} .team-card__photo img{width:100%;height:100%;object-fit:cover;} .team-card__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--taupe);opacity:.6;} .team-card__body{padding:1.4rem 1.3rem 1.7rem;display:flex;flex-direction:column;align-items:center;flex:1;} .team-card__body h3{margin-bottom:.15rem;color:var(--brown-dark);} .team-card__role{color:var(--muted);font-weight:600;font-size:.95rem;margin-bottom:1rem;} .team-card__body .arrow-link{margin-top:auto;} /* ---------- Praxis (split) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;} .split__media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:86%;margin-inline:auto;aspect-ratio:4/3;object-fit:cover;} /* ---------- Ablauf (tabs) ---------- */ .steps__tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem;} .step-tab{ display:flex;align-items:center;gap:.7rem;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-btn); padding:.6em 1.3em .6em .6em;font-family:var(--font-display);font-weight:500;color:var(--ink);cursor:pointer; transition:all .25s var(--ease);font-size:1rem; } .step-tab__num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft); color:var(--brown);font-weight:600;font-size:.95rem;transition:all .25s var(--ease);} .step-tab:hover{border-color:var(--brown);color:var(--brown);} .step-tab[aria-selected="true"]{background:var(--brown);border-color:var(--brown);color:#fff;box-shadow:var(--shadow-sm);} .step-tab[aria-selected="true"] .step-tab__num{background:rgba(255,255,255,.22);color:#fff;} .step-panel{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--shadow-sm);} .step-panel[hidden]{display:none;} .step-panel h3{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;color:var(--brown-dark);} .step-panel h3 .badge{width:34px;height:34px;border-radius:50%;background:var(--gold-050);color:var(--gold-700);display:grid;place-items:center;font-weight:600;font-size:1rem;flex:none;} .step-panel p:last-child{margin-bottom:0;} .steps__note{margin-top:1.1rem;color:var(--muted);font-size:.95rem;} /* ---------- FAQ (accordion) ---------- */ .accordion{max-width:840px;margin-inline:auto;} .acc-item{border-bottom:1px solid var(--line);} .acc-item:first-child{border-top:1px solid var(--line);} .acc-trigger{ width:100%;display:flex;align-items:center;gap:1rem;text-align:left;background:none;border:0;cursor:pointer; font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1rem + .3vw,1.22rem);color:var(--brown-dark); padding:1.25em 0; } .acc-trigger .q-num{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums;flex:none;} .acc-trigger .q-text{flex:1;} .acc-icon{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);position:relative;transition:all .25s var(--ease);} .acc-icon::before,.acc-icon::after{content:"";position:absolute;background:var(--gold-700);border-radius:2px;top:50%;left:50%;transition:transform .25s var(--ease);} .acc-icon::before{width:11px;height:2px;transform:translate(-50%,-50%);} .acc-icon::after{width:2px;height:11px;transform:translate(-50%,-50%);} .acc-trigger[aria-expanded="true"] .acc-icon{background:var(--gold);border-color:var(--gold);} .acc-trigger[aria-expanded="true"] .acc-icon::before,.acc-trigger[aria-expanded="true"] .acc-icon::after{background:#fff;} .acc-trigger[aria-expanded="true"] .acc-icon::after{transform:translate(-50%,-50%) scaleY(0);} .acc-trigger:hover{color:var(--gold-700);} .acc-panel{overflow:hidden;height:0;transition:height .3s var(--ease);} .acc-panel__inner{padding:0 0 1.5em 2.1em;color:var(--ink-2);max-width:68ch;} .acc-panel__inner p:last-child{margin-bottom:0;} @media (prefers-reduced-motion:reduce){.acc-panel{transition:none;}} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2rem);margin-bottom:clamp(2rem,4vw,3rem);} .contact-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm);} .contact-card__icon{width:46px;height:46px;border-radius:var(--radius);background:var(--gold-050);color:var(--gold-700);display:grid;place-items:center;margin-bottom:1rem;} .contact-card h3{font-size:1.12rem;margin-bottom:.5rem;color:var(--brown-dark);} .contact-card p{font-size:.96rem;color:var(--muted);margin-bottom:.6rem;} .contact-card a{font-family:var(--font-display);font-weight:600;font-size:1.02rem;} .contact-card address{font-style:normal;color:var(--ink-2);font-weight:600;line-height:1.5;} .map{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);} .map img{width:100%;height:clamp(260px,38vw,430px);object-fit:cover;display:block;} .map__pin-cta{position:absolute;right:16px;bottom:16px;} .map__attr{position:absolute;left:8px;bottom:6px;font-size:.68rem;color:#4a4438;background:rgba(255,255,255,.82); padding:1px 6px;border-radius:3px;} .map__attr a{color:var(--gold-700);} /* ---------- Callout / CTA band (light, airy) ---------- */ .callout{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(2rem,4vw,3.2rem);text-align:center;position:relative;overflow:hidden;} .callout::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 85% -10%,rgba(177,143,44,.07),transparent 60%);} .callout *{position:relative;} .callout h2{color:var(--brown-dark);font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);font-weight:400;} .callout p{color:var(--muted);max-width:52ch;margin-inline:auto;} .callout .btn{margin-top:1.4rem;} /* ---------- Footer ---------- */ .site-footer{background:var(--light-beige);color:var(--ink-2);padding-block:clamp(3rem,6vw,4.5rem) 1.8rem;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.6rem,4vw,3rem);margin-bottom:2.4rem;} .site-footer h4{color:var(--brown-dark);font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:600;} .site-footer a{color:var(--ink-2);} .site-footer a:hover{color:var(--gold-700);} .footer-brand .brand{color:var(--brown);} .footer-brand .brand__name{color:var(--brown);} .footer-brand .brand__tag{color:var(--muted);} .footer-brand p{color:var(--ink-2);max-width:34ch;margin-top:1rem;font-size:.95rem;} .footer-list{list-style:none;padding:0;margin:0;} .footer-list li{margin:.5em 0;} .footer-contact{font-style:normal;line-height:1.7;text-wrap:balance;} .footer-contact a{font-family:var(--font-display);font-weight:600;} .footer-bottom{border-top:1px solid rgba(60,50,30,.16);padding-top:1.6rem;display:flex;justify-content:space-between; align-items:center;gap:.7rem 1.5rem;flex-wrap:wrap;font-family:var(--font-display);font-size:.86rem;color:var(--muted);} .footer-bottom p{margin:0;} .footer-bottom nav{display:flex;gap:1.3rem;flex-wrap:wrap;flex:none;justify-content:flex-end;} /* ---------- Sub-page (2. Ebene) ---------- */ .subhero{background:linear-gradient(180deg,var(--bg-soft),#fff);padding-block:clamp(2.4rem,5vw,4rem) clamp(1.6rem,3vw,2.4rem);} .crumb{font-size:.9rem;color:var(--muted);margin-bottom:1rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;} .crumb a{font-weight:600;} .crumb span{opacity:.5;} .back-link{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:500;color:var(--gold);margin-bottom:1.4rem;} .back-link svg{transition:transform .25s var(--ease);} .back-link:hover svg{transform:translateX(-4px);} .prose{max-width:760px;} .prose h2{margin-top:2em;} .prose ul{list-style:none;padding-left:0;} .prose ul li{margin:.55em 0;position:relative;padding-left:1.7em;} .prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%; background:var(--gold);box-shadow:0 0 0 4px var(--gold-050);} .bio-head{display:grid;grid-template-columns:350px 1fr;gap:clamp(1.5rem,4vw,2.6rem);align-items:end;margin-bottom:2.2rem;} .bio-photo{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,var(--bg-tint),var(--bg-soft)); display:grid;place-items:center;box-shadow:var(--shadow-sm);} .bio-photo img{width:100%;height:100%;object-fit:cover;} .bio-photo svg{color:var(--taupe);opacity:.6;} .bio-quote{border-left:3px solid var(--gold);background:var(--bg-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:1.2rem 1.4rem;margin:1.6rem 0;font-style:italic;color:var(--ink-2);font-size:1.08rem;} .vod-membership{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem;} .vod-membership__label{font-family:var(--font-display);color:var(--muted);font-weight:600;} .vod-membership img{flex:none;height:auto;} .tag-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;padding:0;list-style:none;} .tag-list li{background:var(--gold-050);color:var(--gold-700);font-family:var(--font-display);font-weight:600; font-size:.86rem;padding:.35em .9em;border-radius:var(--radius-btn);margin:0;} .tag-list li::before{display:none;} /* Legal page typography */ .legal{max-width:800px;} .legal h2{font-size:1.4rem;margin-top:1.8em;} .legal h3{font-size:1.12rem;margin-top:1.4em;} .legal p,.legal li{color:var(--ink-2);font-size:1rem;} .placeholder{background:#fff6d6;color:#7a5a00;font-weight:700;padding:.05em .45em;border-radius:3px; border:1px dashed #e0bf57;font-size:.92em;} .legal-note{background:var(--gold-050);border:1px solid #e6d6a0;border-radius:var(--radius-sm);padding:1.1rem 1.3rem;margin:1.4rem 0;font-size:.95rem;color:var(--ink-2);} .legal-note strong{color:var(--gold-700);} /* ---------- Reveal animation (gated behind .js) ---------- */ .js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .js [data-reveal].is-visible{opacity:1;transform:none;} .js [data-reveal-delay="1"]{transition-delay:.08s;} .js [data-reveal-delay="2"]{transition-delay:.16s;} .js [data-reveal-delay="3"]{transition-delay:.24s;} @media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}} /* ---------- Responsive ---------- */ @media (max-width:980px){ .tiles{grid-template-columns:repeat(2,1fr);} .footer-grid{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1/-1;} } @media (max-width:860px){ .site-header .brand__tag{display:none;} .nav__toggle{ display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border:1px solid var(--line);border-radius:var(--radius-btn);background:#fff;cursor:pointer; position:relative;z-index:60; /* keep the ✕ above the open drawer */ } .nav__toggle[aria-expanded="true"]{border-color:transparent;background:transparent;} .nav__toggle span{position:relative;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease);} .nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease);} .nav__toggle span::before{top:-6px;}.nav__toggle span::after{top:6px;} .nav__toggle[aria-expanded="true"] span{background:transparent;} .nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);} .nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);} .nav__menu{ position:fixed;inset:0 0 0 auto;width:min(86vw,340px);flex-direction:column;align-items:stretch;gap:.2rem; background:#fff;padding:6.5rem 1.5rem 2rem;box-shadow:var(--shadow-lg);transform:translateX(100%); visibility:hidden;transition:transform .32s var(--ease),visibility 0s linear .32s;overflow-y:auto; } .nav__menu.is-open{transform:translateX(0);visibility:visible;transition:transform .32s var(--ease),visibility 0s;} .nav__menu>a:not(.nav__cta){font-size:1.1rem;padding:.7em .6em;} .nav__menu>a:not(.nav__cta)::after{display:none;} .nav__cta{margin:.8rem 0 0;width:100%;} .nav-backdrop{position:fixed;inset:0;background:rgba(30,26,20,.4);opacity:0;visibility:hidden;transition:.3s;z-index:40;} .nav-backdrop.is-open{opacity:1;visibility:visible;} .hero__grid{grid-template-columns:1fr;} .hero__media{order:-1;max-width:560px;} .split{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;} .bio-head{grid-template-columns:1fr;} .bio-photo{max-width:350px;} } @media (max-width:540px){ .tiles{grid-template-columns:1fr;} .team{grid-template-columns:1fr;max-width:380px;margin-inline:auto;} .topbar{font-size:.7rem;} .topbar__inner{justify-content:center;flex-wrap:nowrap;gap:.4rem;} .topbar__item{white-space:nowrap;} .footer-grid{grid-template-columns:1fr;} .footer-bottom{font-size:.8rem;} }