.about-page { overflow: hidden; }
.about-hero { padding: clamp(64px, 8vw, 116px) 0 clamp(72px, 9vw, 132px); border-bottom: 1px solid rgba(23,57,47,.1); background: var(--mist); }
.about-hero__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.75fr); align-items: center; gap: clamp(44px,6vw,88px); }
.about-hero__content { padding: 12px 0 28px; }
.about-hero h1 { max-width: none; margin-bottom: 30px; font-size: clamp(3.2rem,5.5vw,5.25rem); overflow-wrap: normal; word-break: normal; hyphens: none; }
.about-hero .lead { max-width: 640px; margin-bottom: 0; color: var(--text); }
.about-hero__portrait { position: relative; max-width: 520px; margin: 0 0 0 auto; }
.about-hero__portrait::before { position: absolute; z-index: 0; top: 24px; right: -20px; bottom: -20px; left: 20px; border: 1px solid rgba(23,57,47,.22); content: ""; }
.about-hero__portrait img { position: relative; z-index: 1; width: 100%; aspect-ratio: .89; object-fit: cover; object-position: center 28%; border-radius: var(--radius); }
.about-hero__portrait figcaption { display: none; position: relative; z-index: 2; width: fit-content; margin: -24px 0 0 auto; padding: 12px 18px; background: var(--forest); color: var(--white); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.about-hero__portrait figcaption span { color: #c8d9d0; font-weight: 400; }
.about-approach__grid,.about-responsibility__grid { display: grid; grid-template-columns: minmax(240px,.75fr) minmax(0,1.25fr); gap: clamp(52px,9vw,140px); }
.about-section-heading h2,.about-principles__intro h2 { max-width: 520px; margin-bottom: 0; font-size: clamp(2.5rem,4.5vw,4rem); }
.about-approach__copy,.about-responsibility__copy { max-width: 680px; padding-top: 48px; }
.about-approach__copy p,.about-responsibility__copy p { margin-bottom: 24px; }
.about-approach__copy p:last-child,.about-responsibility__copy p:last-child { margin-bottom: 0; }
.about-principles__intro { display: grid; grid-template-columns: minmax(240px,.75fr) minmax(0,1.25fr); gap: clamp(52px,9vw,140px); align-items: end; margin-bottom: 64px; }
.about-principles__intro h2 { margin: 0; }
.about-principles__list { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.about-principles__list li { min-width: 0; padding: 28px clamp(20px,3vw,44px) 10px 0; border-right: 1px solid var(--line-strong); }
.about-principles__list li:not(:first-child) { padding-left: clamp(20px,3vw,44px); }
.about-principles__list li:last-child { padding-right: 0; border-right: 0; }
.about-principles__number { display: block; margin-bottom: 38px; color: var(--clay-ink); font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.about-principles h3 { margin-bottom: 12px; font-size: 2rem; }
.about-principles p { max-width: 300px; margin-bottom: 0; color: var(--muted); }
.about-responsibility { padding-bottom: 116px; }
.about-cta { padding-top: 0; background: var(--paper); }
.about-cta .cta { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 64px; padding: clamp(44px,6vw,72px) clamp(28px,6vw,72px); border-radius: 2px; }
.about-cta .cta h2 { max-width: 780px; margin-bottom: 26px; font-size: clamp(2.7rem,5vw,4.5rem); }
.about-cta .cta__copy > p:last-child { max-width: 620px; margin-bottom: 0; color: rgba(255,255,255,.78); }
.about-cta .button-row { justify-content: flex-end; margin-top: 0; }.about-reservation { padding-top: 72px; background: var(--sand); scroll-margin-top: 96px; }
.about-reservation__inner { max-width: none; }
.about-reservation .smartagenda-embed { width: 100%; margin-block: 8px; }
@media (max-width:1040px) { .about-hero__grid { grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); gap: 48px; } .about-hero h1 { font-size: clamp(3rem,5.3vw,4.5rem); } }
@media (max-width:820px) { .about-hero__grid,.about-approach__grid,.about-responsibility__grid,.about-principles__intro,.about-cta .cta { grid-template-columns: 1fr; } .about-hero__content { padding-bottom: 0; } .about-hero__portrait { max-width: 620px; margin: 0; } .about-approach__copy,.about-responsibility__copy { padding-top: 0; } .about-principles__intro { align-items: start; margin-bottom: 48px; } .about-cta .button-row { justify-content: flex-start; } }
@media (max-width:600px) { .about-hero { padding: 56px 0 80px; } .about-hero h1 { margin-bottom: 24px; font-size: clamp(2.65rem,12vw,3.6rem); } .about-hero__portrait::before { top:14px; right:-10px; bottom:-10px; left:10px; } .about-hero__portrait figcaption { margin-top:-18px; font-size:.68rem; } .about-principles__list { grid-template-columns: 1fr; } .about-principles__list li,.about-principles__list li:not(:first-child),.about-principles__list li:last-child { padding:24px 0 28px; border-right:0; border-bottom:1px solid var(--line-strong); } .about-principles__list li:last-child { border-bottom:0; } .about-principles__number { margin-bottom:20px; } .about-responsibility { padding-bottom:88px; } .about-cta .cta { gap:32px; padding:40px 24px; } .about-cta .cta h2 { font-size: clamp(2.35rem,10vw,3.2rem); } .about-cta .button-row { align-items:flex-start; flex-direction:column; gap:16px; } }