:root { --directions-bg: #f8f3ea; --directions-surface: rgba(255, 252, 247, 0.9); --directions-surface-strong: #fffdf8; --directions-surface-soft: rgba(255, 255, 255, 0.58); --directions-surface-dark: #3c3732; --directions-ink: #352a23; --directions-text: #51453d; --directions-muted: #7a6d62; --directions-border: rgba(75, 61, 49, 0.15); --directions-border-strong: rgba(75, 61, 49, 0.24); --directions-olive: #78724f; --directions-olive-dark: #625d3f; --directions-olive-light: #a5a07d; --directions-shadow: 0 18px 60px rgba(69, 53, 41, 0.14); --directions-shadow-soft: 0 12px 30px rgba(69, 53, 41, 0.08); --directions-radius: 30px; --directions-radius-sm: 18px; --directions-radius-xs: 12px; } body.page-directions.page-directions-board { background: radial-gradient(circle at 16% 0%, rgba(17, 106, 66, 0.08), transparent 28rem), radial-gradient(circle at 88% 12%, rgba(40, 159, 161, 0.08), transparent 26rem), linear-gradient(180deg, #fbf7ef 0%, #f7f1e8 56%, #f4ede4 100%); color: var(--directions-text); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: hidden; } body.page-directions.page-directions-board h1, body.page-directions.page-directions-board h2, body.page-directions.page-directions-board h3, body.page-directions.page-directions-board h4 { color: var(--directions-ink); font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -0.03em; } body.page-directions.page-directions-board a { color: inherit; } .directions-board-page { display: block; } .directions-scene { padding: clamp(1rem, 2.4vw, 2rem) clamp(1rem, 2.2vw, 1.75rem) 0; } .directions-scene__wrap { position: relative; max-width: 1540px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: clamp(1rem, 1.9vw, 1.7rem); align-items: stretch; } .directions-board { overflow: hidden; border: 1px solid rgba(75, 61, 49, 0.17); border-radius: var(--directions-radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 253, 247, 0.88) 100%); box-shadow: var(--directions-shadow); backdrop-filter: blur(20px); } .directions-board__nav { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.55rem 0.95rem; } .directions-board__brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; } .directions-board__brand img { flex: 0 0 auto; } .directions-board__brand span { display: grid; gap: 0.12rem; } .directions-board__brand strong { color: var(--directions-ink); font-size: 0.87rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; } .directions-board__brand small { color: var(--directions-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; } .directions-board__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.95rem; } .directions-board__links a { color: var(--directions-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.18s ease; } .directions-board__links a:hover, .directions-board__links a:focus-visible { color: var(--directions-olive-dark); } .directions-board__nav-cta { justify-self: end; } .directions-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1rem, 2vw, 2rem); align-items: center; padding: 1.35rem 1.55rem 0.95rem; } .directions-hero__copy { padding: 0.8rem 0 0.75rem; max-width: 33rem; } .directions-hero__eyebrow { margin: 0 0 1rem; color: var(--directions-olive-dark); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .directions-hero h1 { margin: 0; color: var(--directions-ink); font-size: clamp(2.6rem, 5.15vw, 4.2rem); line-height: 0.93; letter-spacing: -0.05em; max-width: 14.8ch; } .directions-hero__lede { margin: 1.1rem 0 0; max-width: 23rem; color: var(--directions-text); font-size: 1.02rem; line-height: 1.55; } .directions-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.55rem; } .directions-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.78rem 1.2rem; border-radius: 12px; border: 1px solid transparent; font-size: 0.96rem; font-weight: 700; line-height: 1; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .directions-button:hover, .directions-button:focus-visible { transform: translateY(-2px); } .directions-button--primary { color: #fff; background: var(--directions-olive); border-color: var(--directions-olive); box-shadow: 0 12px 20px rgba(100, 91, 63, 0.22); } .directions-button--primary:hover, .directions-button--primary:focus-visible { color: #fff; background: var(--directions-olive-dark); border-color: var(--directions-olive-dark); box-shadow: 0 14px 24px rgba(90, 80, 54, 0.26); } .directions-button--outline { color: var(--directions-ink); background: rgba(255, 255, 255, 0.95); border-color: var(--directions-border-strong); box-shadow: 0 8px 18px rgba(69, 53, 41, 0.05); } .directions-button--outline:hover, .directions-button--outline:focus-visible { color: var(--directions-ink); border-color: rgba(98, 93, 63, 0.45); background: rgba(247, 243, 235, 0.96); } .directions-hero__media { position: relative; min-height: 420px; border-radius: 0 0 0 28px; overflow: hidden; background: radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.55), transparent 36%), linear-gradient(180deg, rgba(248, 242, 233, 0.95), rgba(241, 236, 226, 0.92)); box-shadow: inset 0 0 0 1px rgba(75, 61, 49, 0.07); } .directions-hero__orb { position: absolute; inset: 7% 16% 13% 28%; border-radius: 50%; border: 1px solid rgba(111, 102, 83, 0.18); background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0) 72%); opacity: 0.78; box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(111, 102, 83, 0.05); } .directions-hero__orb::before { content: "先生"; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); color: rgba(56, 47, 39, 0.46); font-family: "Instrument Serif", Georgia, serif; font-size: clamp(2.1rem, 3vw, 3rem); line-height: 1; letter-spacing: 0.08em; } .directions-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% center; filter: saturate(0.92) contrast(0.96) brightness(1.03); transform: scale(1.03); } .directions-badge { position: absolute; display: inline-flex; align-items: center; gap: 0.72rem; max-width: 12rem; padding: 0.8rem 0.95rem; border: 1px solid rgba(75, 61, 49, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 22px rgba(69, 53, 41, 0.12); backdrop-filter: blur(10px); color: var(--directions-ink); font-size: 0.8rem; font-weight: 600; line-height: 1.2; } .directions-badge i { flex: 0 0 auto; font-size: 1.1rem; color: var(--directions-olive-dark); } .directions-badge--upper { top: 28%; right: 18%; } .directions-badge--lower { left: 14%; bottom: 15%; } .directions-lane { padding: 0.65rem 1.55rem 1rem; } .directions-section-head { display: grid; justify-items: center; gap: 0.35rem; text-align: center; } .directions-section-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.06; } .directions-section-head p { margin: 0; color: var(--directions-muted); font-size: 0.9rem; } .directions-section-head--compact { grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; text-align: center; } .directions-section-head--compact > div { width: min(100%, 56rem); } .directions-section-head--compact h2 { max-width: 18ch; } .directions-inline-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--directions-olive-dark); font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .directions-inline-link:hover, .directions-inline-link:focus-visible { color: var(--directions-ink); } .directions-lane__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; } .directions-lane-card { position: relative; display: flex; gap: 0.95rem; padding: 1.15rem 1.1rem 1.05rem; border: 1px solid rgba(75, 61, 49, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 12px 30px rgba(69, 53, 41, 0.08); text-decoration: none; color: inherit; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease; min-height: 220px; } .directions-lane-card:hover, .directions-lane-card:focus-visible { color: inherit; transform: translateY(-4px); border-color: rgba(95, 90, 61, 0.34); box-shadow: 0 18px 36px rgba(69, 53, 41, 0.12); } .directions-lane-card__icon { width: 3.1rem; height: 3.1rem; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--directions-olive); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .directions-lane-card__icon i { font-size: 1rem; } .directions-lane-card__body { display: flex; flex-direction: column; min-width: 0; } .directions-lane-card__title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 0.28rem; } .directions-lane-card__title-row h3 { margin: 0; font-size: 1.35rem; line-height: 1; } .directions-lane-card__title-row span { color: var(--directions-muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .directions-lane-card p { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.55; } .directions-lane-card__link { margin-top: auto; padding-top: 1rem; color: var(--directions-olive-dark); font-size: 0.88rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; } .directions-proof { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 1rem; padding: 0 1.55rem 1rem; } .directions-proof__schedule { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(75, 61, 49, 0.12); border-radius: 22px; box-shadow: 0 10px 24px rgba(69, 53, 41, 0.06); padding: 1.2rem 1.2rem 1rem; } .directions-schedule-list { margin-top: 0.95rem; border: 1px solid rgba(75, 61, 49, 0.08); border-radius: 16px; overflow: hidden; } .directions-schedule-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.82rem 0.9rem; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid rgba(75, 61, 49, 0.08); } .directions-schedule-row:last-child { border-bottom: 0; } .directions-schedule-time { color: var(--directions-ink); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.04em; } .directions-schedule-class { color: var(--directions-text); font-size: 0.92rem; } .directions-schedule-date { color: var(--directions-muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; } .directions-proof__footnote { display: flex; align-items: center; gap: 0.45rem; margin: 0.95rem 0 0.7rem; color: var(--directions-muted); font-size: 0.9rem; } .directions-proof__testimonial { position: relative; overflow: hidden; border-radius: 22px; padding: 1.35rem 1.3rem 1.15rem; background: radial-gradient(circle at 95% 8%, rgba(255, 255, 255, 0.08), transparent 30%), linear-gradient(180deg, #44403b 0%, #37322e 100%); color: #f7f1e6; box-shadow: 0 18px 40px rgba(34, 28, 24, 0.18); } .directions-proof__testimonial::before { content: ""; position: absolute; top: -2rem; right: -2.5rem; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 72%); } .directions-proof__stars { display: inline-flex; gap: 0.25rem; color: #f0d27d; font-size: 0.85rem; } .directions-proof__quote { position: relative; z-index: 1; margin: 1rem 0 1.25rem; color: #fbf4e7; font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.55; max-width: 18ch; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .directions-proof__credit { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.8rem; } .directions-proof__credit img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); } .directions-proof__credit strong, .directions-proof__credit span { display: block; color: #f7f1e6; } .directions-proof__credit strong { font-size: 0.95rem; font-weight: 700; } .directions-proof__credit span { color: rgba(247, 241, 230, 0.72); font-size: 0.82rem; } .directions-proof__dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; } .directions-proof__dots span { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: rgba(255, 255, 255, 0.35); } .directions-proof__dots .is-active { width: 0.48rem; height: 0.48rem; background: rgba(255, 255, 255, 0.88); } .directions-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(75, 61, 49, 0.12); } .directions-feature { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.05rem 1.25rem 1.2rem; border-right: 1px solid rgba(75, 61, 49, 0.12); } .directions-feature:last-child { border-right: 0; } .directions-feature__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(120, 114, 79, 0.12); color: var(--directions-olive-dark); flex: 0 0 auto; } .directions-feature__icon i { font-size: 0.98rem; } .directions-feature h2 { margin: 0 0 0.3rem; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.94rem; font-weight: 800; letter-spacing: 0.02em; } .directions-feature p { margin: 0; color: var(--directions-muted); font-size: 0.88rem; line-height: 1.5; } .directions-phone { position: relative; padding-top: 4.4rem; } .directions-phone__shell { position: sticky; top: 1.25rem; width: min(100%, 352px); margin-left: auto; margin-right: auto; padding: 0.92rem 0.92rem 1rem; border: 1px solid rgba(75, 61, 49, 0.18); border-radius: 28px; background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.72), transparent 42%), linear-gradient(180deg, rgba(253, 250, 244, 0.98) 0%, rgba(248, 242, 234, 0.96) 100%); box-shadow: 0 18px 48px rgba(69, 53, 41, 0.16); } .directions-phone__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .directions-phone__brand { display: inline-flex; align-items: center; gap: 0.56rem; text-decoration: none; } .directions-phone__brand img { flex: 0 0 auto; } .directions-phone__brand span { display: grid; gap: 0.08rem; } .directions-phone__brand strong { color: var(--directions-ink); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .directions-phone__brand small { color: var(--directions-muted); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .directions-phone__menu { width: 1.9rem; height: 1.9rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.23rem; } .directions-phone__menu span { width: 1rem; height: 2px; border-radius: 999px; background: var(--directions-ink); } .directions-phone__eyebrow { margin: 0 0 0.75rem; color: var(--directions-olive-dark); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .directions-phone__shell h2 { margin: 0; color: var(--directions-ink); font-size: 1.8rem; line-height: 0.95; letter-spacing: -0.05em; max-width: 12ch; } .directions-phone__lede { margin: 0.8rem 0 0; color: var(--directions-text); font-size: 0.92rem; line-height: 1.5; } .directions-phone__actions { display: grid; gap: 0.6rem; margin-top: 1rem; } .directions-phone__actions .directions-button { min-height: 45px; font-size: 0.87rem; border-radius: 11px; } .directions-phone__media { position: relative; margin-top: 0.95rem; border-radius: 18px; overflow: hidden; min-height: 210px; background: linear-gradient(180deg, rgba(245, 239, 228, 0.9), rgba(240, 233, 220, 0.88)); box-shadow: inset 0 0 0 1px rgba(75, 61, 49, 0.08); } .directions-phone__media img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; object-position: 64% center; filter: saturate(0.92) contrast(0.96) brightness(1.03); } .directions-phone__badge { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.75rem; border-radius: 12px; border: 1px solid rgba(75, 61, 49, 0.12); background: rgba(255, 255, 255, 0.92); box-shadow: 0 10px 18px rgba(69, 53, 41, 0.1); color: var(--directions-ink); font-size: 0.72rem; font-weight: 700; line-height: 1.15; } .directions-phone__badge i { color: var(--directions-olive-dark); } .directions-phone__badge--top { top: 1rem; left: 1rem; } .directions-phone__badge--mid { left: 0.7rem; top: 5.5rem; } .directions-phone__lane-head { margin-top: 1rem; text-align: center; } .directions-phone__lane-head h3 { margin: 0; font-size: 1.35rem; } .directions-phone__lane-head p { margin: 0.25rem 0 0; color: var(--directions-muted); font-size: 0.82rem; line-height: 1.45; } .directions-phone__lane-list { display: grid; gap: 0.55rem; margin-top: 0.9rem; } .directions-phone__lane { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid rgba(75, 61, 49, 0.1); background: rgba(255, 255, 255, 0.86); box-shadow: 0 8px 18px rgba(69, 53, 41, 0.08); text-decoration: none; } .directions-phone__lane span { display: grid; gap: 0.1rem; } .directions-phone__lane strong { color: var(--directions-ink); font-size: 1rem; font-weight: 700; } .directions-phone__lane small { color: var(--directions-muted); font-size: 0.74rem; } .directions-phone__lane i { color: var(--directions-muted); font-size: 0.9rem; } .directions-phone__cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem; border-radius: 16px; background: var(--directions-olive); color: #fff; box-shadow: 0 14px 22px rgba(98, 93, 63, 0.22); } .directions-phone__cta strong, .directions-phone__cta p { color: #fff; } .directions-phone__cta strong { display: block; margin-bottom: 0.2rem; font-size: 1.02rem; } .directions-phone__cta p { margin: 0; font-size: 0.82rem; line-height: 1.35; max-width: 13rem; } .directions-phone__cta-icon { width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.93); color: var(--directions-olive-dark); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1.15rem; } .directions-callout { position: absolute; right: 0.75rem; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--directions-muted); font-size: 0.9rem; letter-spacing: 0.02em; z-index: 2; } .directions-callout::before { content: "↗"; font-size: 1.25rem; line-height: 1; opacity: 0.55; } .directions-callout--top { top: 0.25rem; } .directions-callout--bottom { bottom: 0.8rem; } .directions-callout--bottom::before { content: "↘"; } .directions-scene__tagline { margin: 1.2rem 0 0; padding: 0 1rem 0.25rem; color: var(--directions-ink); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; text-align: center; } .directions-info { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); } .directions-info__container { max-width: 1200px; padding-inline: clamp(1rem, 2vw, 1.75rem); } .directions-info__card { border: 1px solid rgba(75, 61, 49, 0.12); border-radius: 30px; background: rgba(255, 255, 255, 0.84); box-shadow: var(--directions-shadow-soft); padding: clamp(1.25rem, 2.5vw, 2rem); } .directions-info__eyebrow { margin: 0 0 0.7rem; color: var(--directions-olive-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .directions-info__card h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.05; } .directions-info__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.25rem; } .directions-info__item { border: 1px solid rgba(75, 61, 49, 0.1); border-radius: 18px; background: rgba(255, 255, 255, 0.82); padding: 1rem 1rem 1.1rem; box-shadow: 0 8px 18px rgba(69, 53, 41, 0.06); } .directions-info__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(120, 114, 79, 0.12); color: var(--directions-olive-dark); margin-bottom: 0.8rem; } .directions-info__icon i { font-size: 1rem; } .directions-info__item h3 { margin: 0 0 0.35rem; color: var(--directions-ink); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.96rem; font-weight: 800; } .directions-info__item p { margin: 0; color: var(--directions-text); font-size: 0.92rem; line-height: 1.55; } .directions-info__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.2rem; } .directions-town-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1rem; } .directions-town-link { display: block; text-decoration: none; border: 1px solid rgba(75, 61, 49, 0.1); border-radius: 18px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 18px rgba(69, 53, 41, 0.06); padding: 1rem 1rem 1.05rem; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .directions-town-link:hover, .directions-town-link:focus-visible { transform: translateY(-3px); border-color: rgba(98, 93, 63, 0.32); box-shadow: 0 14px 24px rgba(69, 53, 41, 0.1); color: inherit; } .directions-town-link h3 { margin: 0 0 0.35rem; font-family: "Instrument Serif", Georgia, serif; font-size: 1.55rem; line-height: 1; } .directions-town-link p { margin: 0; color: var(--directions-text); font-size: 0.93rem; line-height: 1.5; } @media (max-width: 1399.98px) { .directions-scene__wrap { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); } .directions-hero h1 { max-width: 11ch; } } @media (max-width: 1199.98px) { .directions-scene__wrap { grid-template-columns: 1fr; } .directions-board__links { gap: 1rem; } .directions-callout { display: none; } .directions-phone { padding-top: 0; max-width: 760px; margin-inline: auto; } .directions-phone__shell { position: relative; top: auto; width: min(100%, 380px); margin-inline: auto; } } @media (max-width: 991.98px) { .directions-board__nav { grid-template-columns: minmax(0, auto) 1fr; } .directions-board__links { display: none; } .directions-board__nav-cta { justify-self: end; } .directions-hero { grid-template-columns: 1fr; padding-top: 1rem; } .directions-hero__copy { max-width: 100%; } .directions-hero__media { min-height: 320px; border-radius: 26px; } .directions-lane__grid { grid-template-columns: 1fr; } .directions-proof { grid-template-columns: 1fr; } .directions-features { grid-template-columns: 1fr; } .directions-feature { border-right: 0; border-bottom: 1px solid rgba(75, 61, 49, 0.12); } .directions-feature:last-child { border-bottom: 0; } .directions-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .directions-town-links { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .directions-scene { padding-inline: 0.75rem; } .directions-scene__tagline { letter-spacing: 0.22em; font-size: 0.72rem; } .directions-board { border-radius: 24px; } .directions-board__nav, .directions-hero, .directions-lane, .directions-proof, .directions-features { padding-left: 1rem; padding-right: 1rem; } .directions-board__nav { grid-template-columns: 1fr auto; } .directions-board__nav-cta { display: none; } .directions-board__brand small { letter-spacing: 0.18em; } .directions-hero h1 { font-size: clamp(2.4rem, 11vw, 3.3rem); } .directions-hero__actions { flex-direction: column; } .directions-button { width: 100%; } .directions-badge { max-width: 11rem; font-size: 0.74rem; } .directions-badge--upper { top: 1rem; right: 0.8rem; } .directions-badge--lower { left: 0.8rem; bottom: 0.8rem; } .directions-lane-card { min-height: 0; } .directions-inline-link { white-space: normal; } .directions-schedule-row { grid-template-columns: 1fr; gap: 0.2rem; align-items: start; } .directions-schedule-date { justify-self: start; } .directions-phone { max-width: 100%; } .directions-phone__shell { width: 100%; max-width: 420px; border-radius: 24px; } .directions-phone__shell h2 { max-width: 100%; font-size: 1.65rem; } .directions-phone__cta { align-items: flex-start; } .directions-info__grid { grid-template-columns: 1fr; } .directions-info__actions { flex-direction: column; } } body.page-directions.page-directions-board .directions-info__card, body.page-directions.page-directions-board .directions-arrival-proof__inner, body.page-directions.page-directions-board .directions-phone__shell, body.page-directions.page-directions-board .directions-proof__schedule, body.page-directions.page-directions-board .directions-proof__testimonial { text-align: center; } body.page-directions.page-directions-board .directions-info__card h1, body.page-directions.page-directions-board .directions-info__card h2, body.page-directions.page-directions-board .directions-info__card h3, body.page-directions.page-directions-board .directions-info__card p, body.page-directions.page-directions-board .directions-arrival-proof h2, body.page-directions.page-directions-board .directions-arrival-proof figcaption, body.page-directions.page-directions-board .directions-phone__shell p, body.page-directions.page-directions-board .directions-phone__shell h2, body.page-directions.page-directions-board .directions-phone__shell h3 { margin-inline: auto; } body.page-directions.page-directions-board .directions-info__item p, body.page-directions.page-directions-board .directions-proof__quote, body.page-directions.page-directions-board .directions-proof__footnote, body.page-directions.page-directions-board .directions-proof__credit { margin-inline: auto; } body.page-directions.page-directions-board .directions-proof__credit { justify-content: center; } body.page-directions.page-directions-board .directions-info__grid { justify-items: stretch; } body.page-directions.page-directions-board .directions-info__item { display: grid; justify-items: center; } body.page-directions.page-directions-board .directions-proof { justify-items: center; } body.page-directions.page-directions-board .directions-proof > * { width: 100%; } body.page-directions.page-directions-board .directions-info__actions, body.page-directions.page-directions-board .directions-phone__actions, body.page-directions.page-directions-board .directions-phone__cta { justify-content: center; } @media (max-width: 575.98px) { .directions-scene { padding-top: 0.75rem; } .directions-board__brand { gap: 0.55rem; } .directions-board__brand strong { font-size: 0.8rem; letter-spacing: 0.14em; } .directions-board__brand small { letter-spacing: 0.12em; } .directions-hero__media { min-height: 280px; } .directions-badge { padding: 0.65rem 0.7rem; max-width: 10.5rem; } .directions-phone__shell { padding: 0.82rem 0.8rem 0.88rem; } .directions-phone__badge { max-width: 9.6rem; } .directions-info__card, .directions-town-link { border-radius: 16px; } } .directions-arrival-proof { width: min(1120px, calc(100% - 2rem)); margin: clamp(2rem, 5vw, 4rem) auto; } .directions-arrival-proof__inner { padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--directions-border); border-radius: var(--directions-radius-sm); background: var(--directions-surface-strong); box-shadow: var(--directions-shadow-soft); } .directions-arrival-proof__eyebrow { margin: 0 0 0.45rem; color: var(--directions-olive-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .directions-arrival-proof h2 { margin: 0 0 1rem; max-width: 760px; color: var(--directions-ink); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.12; } .directions-arrival-proof__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } .directions-arrival-proof__item { grid-column: span 2; margin: 0; overflow: hidden; border: 1px solid var(--directions-border); border-radius: var(--directions-radius-xs); background: #fff; } .directions-arrival-proof__item--wide { grid-column: span 3; } .directions-arrival-proof__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; visibility: visible; opacity: 1; } .directions-arrival-proof__item--wide img { aspect-ratio: 16 / 9; } .directions-arrival-proof__item--portrait img { aspect-ratio: 3 / 4; } .directions-arrival-proof__item figcaption { margin: 0; padding: 0.72rem 0.85rem; color: var(--directions-muted); font-size: 0.9rem; font-weight: 700; line-height: 1.35; } @media (max-width: 767.98px) { .directions-arrival-proof__grid { grid-template-columns: 1fr; } .directions-arrival-proof__item, .directions-arrival-proof__item--wide { grid-column: 1; } }