/* Home: "Passed along the table" opening, A day at Bora, döner centerpiece, Kahvaltı, favourites, catering,
   careers band, visit + opening list, review band. Values follow Bora Home.dc.html. */

.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--terra-deep); }
@container page (width >= 860px) { .eyebrow { font-size: 13px; } }

/* ---------- Opening ---------- */
.hero { position: relative; display: flex; flex-direction: column; padding: 22px 0 0; overflow: hidden; }
.hero-meta {
  display: flex; justify-content: space-between; gap: 24px; margin: 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--olive);
}
.hero-meta .accent { color: var(--terra-deep); }
.hero-title {
  margin: 28px 20px 0; font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 16.5cqw, 76px); line-height: .9;
  letter-spacing: -.035em; color: var(--ink);
}
.hero-title .line { display: block; animation: var(--rise); }
.hero-title em, .hero-title .ital { font-style: italic; color: var(--terra); }
.hero-title .m-l3 { padding-left: 14cqw; }
.hero-title .m-l1 { animation-delay: .05s; } .hero-title .m-l2 { animation-delay: .12s; }
.hero-title .m-l3 { animation-delay: .19s; } .hero-title .m-l4 { animation-delay: .26s; }
.hero-title .d-l1 { animation-delay: .05s; } .hero-title .d-l2 { animation-delay: .18s; padding-left: 12cqw; }
.hero-title .d-l3 { animation-delay: .31s; padding-left: 4cqw; }
.hero-title .lines { display: block; }

.hero-band {
  --band-h: 48cqw;
  position: relative; margin-top: 44px; height: var(--band-h);
  background:
    linear-gradient(180deg, #A85E39 0 5px, transparent 5px 9px, #4F523A 9px 17px, transparent 17px 21px, #A85E39 21px 24px, transparent 24px) top / 100% 24px no-repeat,
    linear-gradient(0deg, #A85E39 0 5px, transparent 5px 9px, #4F523A 9px 17px, transparent 17px 21px, #A85E39 21px 24px, transparent 24px) bottom / 100% 24px no-repeat,
    repeating-linear-gradient(90deg, rgba(58, 61, 42, .04) 0 1px, transparent 1px 5px),
    var(--runner);
}
/* Each dish: an outer wrapper that only moves sideways, a soft shadow that never rotates, and the image that only rotates.
   The food reaches the corners of its circle (its farthest opaque pixel is 0.504 of the width from the centre), so
   while it turns it sweeps a disc as wide as the wrapper. `top` is clamped so that disc, and the simit's offset
   ring shadow, stay inside the band whatever the angle: food never passes under the headline, intro or buttons.
   --w is the dish width and --dy its offset from the band's middle. */
.dish {
  position: absolute; aspect-ratio: 1; will-change: transform; width: var(--w);
  top: clamp(calc(var(--w) * .008 + 3px), calc(50% - var(--w) / 2 + var(--dy)), calc(var(--band-h) - var(--w) * 1.02 - 3px));
}
.dish img { position: relative; width: 100%; height: 100%; will-change: transform; -webkit-user-drag: none; user-select: none; }
.dish-shadow {
  position: absolute; inset: 8%; border-radius: 50%; transform: translate(3%, 8%);
  background: radial-gradient(closest-side, rgba(70, 42, 22, .34), rgba(70, 42, 22, .12) 70%, transparent);
}
/* The simit gets a ring, so its hole stays clear (no filter, so frames only recombine layers). */
.dish--simit .dish-shadow {
  inset: 0; transform: translate(2.4%, 5.9%);
  background: radial-gradient(closest-side, transparent 0 47%, rgba(70, 42, 22, .24) 55%, rgba(70, 42, 22, .2) 86%, transparent 100%);
}
/* Mobile arrangement: simit, coffee, lahmacun. */
.dish--simit { left: -6%; --w: 40cqw; --dy: -2cqw; }
.dish--coffee { left: 37%; --w: 27cqw; --dy: 4cqw; }
.dish--lahmacun { left: 66%; --w: 44cqw; --dy: -3cqw; }
.dish--simit img { transform: rotate(-10deg); }
.dish--coffee img { transform: rotate(15deg); }
.dish--lahmacun img { transform: rotate(-5deg); }

.hero-intro { padding: 0 20px; }
.hero-intro p { margin-top: 28px; font-size: 18px; line-height: 1.6; color: var(--olive); text-wrap: pretty; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.link-cta {
  display: inline-flex; align-items: center; height: 56px; padding: 0 22px; color: var(--ink); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px;
}
.row-link {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-top: 20px; padding: 0 4px;
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}

@container page (width >= 860px) {
  .hero {
    display: grid; grid-template-columns: 24px repeat(12, minmax(0, 1fr)) 24px; column-gap: 24px; padding: 28px 0 0;
  }
  .hero-meta { grid-column: 2 / 14; grid-row: 1; margin: 0; padding-bottom: 18px; font-size: 13px; letter-spacing: .2em; }
  .hero-title {
    grid-column: 2 / span 8; grid-row: 2; align-self: end; margin: 32px 0 0;
    font-size: clamp(80px, 8.4cqw, 136px); line-height: .88;
  }
  .hero-intro { grid-column: 10 / span 4; grid-row: 2; align-self: end; margin-top: 32px; padding: 0 0 10px; animation: var(--rise); animation-delay: .45s; }
  .hero-intro p { margin-top: 0; max-width: 32ch; }
  /* The band is shorter than the widest dish (25cqw) from about 1000px up, so the five dishes scale together:
     --fit is the iskender's width, 25cqw until it would no longer fit the band, and the others keep their
     HANDOFF proportions (17/21/25/14/22) and offsets relative to it. */
  .hero-band { --band-h: clamp(240px, 21cqw, 340px); --fit: min(25cqw, var(--band-h) * .94); grid-column: 1 / -1; grid-row: 3; margin-top: 64px; }
  .dish--simit { left: 3%; --w: calc(var(--fit) * .68); --dy: calc(var(--fit) * -.08); }
  .dish--hummus { left: 23%; --w: calc(var(--fit) * .84); --dy: calc(var(--fit) * .06); }
  .dish--iskender { left: 46%; --w: var(--fit); --dy: calc(var(--fit) * -.12); }
  .dish--coffee { left: 74%; --w: calc(var(--fit) * .56); --dy: calc(var(--fit) * .1); }
  .dish--lahmacun { left: 91%; --w: calc(var(--fit) * .88); --dy: calc(var(--fit) * -.04); }
  .dish--simit img { transform: rotate(-14deg); }
  .dish--hummus img { transform: rotate(8deg); }
  .dish--iskender img { transform: rotate(-6deg); }
  .dish--coffee img { transform: rotate(20deg); }
  .dish--lahmacun img { transform: rotate(-10deg); }
}

/* ---------- A day at Bora ---------- */
.day { padding: 88px 20px 80px; }
.day .eyebrow { margin: 0 0 22px; }
.day-text { font-family: var(--serif); font-size: clamp(32px, 9.2cqw, 40px); line-height: 1.16; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.day-text em { color: var(--terra); }
.day-text b { font-weight: inherit; }
.day-note { margin-top: 20px; font-size: 14px; color: var(--body-2); }
@container page (width >= 860px) {
  .day { padding: 160px 48px 150px; }
  .day .eyebrow { margin: 0 0 40px 8.33%; }
  .day-text { margin-left: 8.33%; max-width: 20ch; font-size: clamp(48px, 5.3cqw, 80px); line-height: 1.12; letter-spacing: -.02em; }
  .day-text b { font-weight: 700; }
  .day-note { margin: 36px 0 0 8.33%; font-size: 15px; }
}

/* ---------- Döner centerpiece ---------- */
/* Static layout (no JS, reduced motion, Save-Data or a slow connection): no pin, frame 030 as a still image. */
.doner { position: relative; height: min(720px, 100svh); background: var(--spit-bg); color: var(--ink); font-family: var(--sans); }
.doner-stage { position: relative; top: 0; height: 100%; overflow: hidden; }
.doner.is-scrub { height: 170vh; }
.doner.is-scrub .doner-stage { position: sticky; top: 64px; height: calc(100svh - 64px - 72px); }
.doner-eyebrow { position: absolute; left: 20px; top: 22px; z-index: 4; }
.doner-line {
  position: absolute; left: 0; margin: 0; white-space: nowrap; font-family: var(--serif); font-weight: 400;
  font-size: clamp(84px, 27cqw, 120px); line-height: 1; letter-spacing: -.045em; z-index: 1; will-change: transform;
}
.doner-line--a { top: 11%; color: var(--ink); transform: translate3d(4%, 0, 0); }
.doner-line--b { top: 27%; font-style: italic; color: var(--terra); transform: translate3d(40%, 0, 0); }
.doner-canvas { position: absolute; right: 6%; top: 22%; width: 34%; height: 44%; z-index: 2; }
.doner-still { position: absolute; right: 6%; top: 22%; height: 44%; width: auto; max-width: none; z-index: 2; }
.doner-copy { position: absolute; left: 20px; right: 20px; bottom: 22px; z-index: 4; }
.doner-copy p { max-width: 26ch; font-size: 15px; line-height: 1.5; }
.doner-copy a {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--ink); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-underline-offset: 6px;
}
@container page (width >= 860px) {
  .doner { height: min(880px, 100svh); }
  .doner.is-scrub { height: 260vh; }
  .doner.is-scrub .doner-stage { top: 96px; height: calc(100vh - 96px); }
  .doner-eyebrow { left: 48px; top: 40px; }
  .doner-line { font-size: clamp(140px, 17cqw, 260px); }
  .doner-line--a { top: 9%; }
  .doner-line--b { top: 37%; }
  .doner-canvas { right: 8%; width: min(18cqw, 250px); height: 56%; }
  .doner-still { right: 8%; height: 56%; }
  .doner-copy { left: 48px; right: auto; bottom: 40px; max-width: 330px; }
  .doner-copy p { max-width: none; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
}

/* ---------- Kahvaltı ---------- */
.kahvalti { display: flex; flex-direction: column; padding: 0 0 64px; background: var(--olive); color: var(--cream); }
.kahvalti-photo img { width: 100%; height: 260px; object-fit: cover; }
.kahvalti-body { display: flex; flex-direction: column; padding: 0 20px; }
.kahvalti-eyebrow { order: 2; margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); }
.kahvalti-title {
  order: 1; margin-top: 36px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(68px, 21cqw, 92px);
  line-height: .9; letter-spacing: -.03em; color: var(--cream);
}
.kahvalti-text { order: 3; margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--on-olive); }
.kahvalti-list { order: 4; margin-top: 28px; }
.kahvalti-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid var(--olive-line); }
.kahvalti-list div:last-child { border-bottom: 1px solid var(--olive-line); }
.kahvalti-list dt { font-family: var(--serif); font-size: 21px; }
.kahvalti-list dd { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; font-size: 17px; color: var(--sand); }
.kahvalti-link {
  order: 5; align-self: flex-start; margin-top: 28px; color: var(--cream); font-size: 15px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-underline-offset: 6px;
}
.kahvalti-link:hover { color: var(--sand); }
@container page (width >= 860px) {
  .kahvalti { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 0; }
  .kahvalti-photo { grid-column: 1 / span 7; }
  .kahvalti-photo img { height: 100%; min-height: 680px; object-position: 40% 50%; }
  .kahvalti-body { grid-column: 8 / span 5; padding: 96px 48px 96px 24px; justify-content: center; }
  .kahvalti-eyebrow { order: 0; margin-top: 0; font-size: 13px; }
  /* 84px floor (was 96): at 860-959px the italic title is ~3.55em wide and a 96px floor pushed it ~20px past the
     viewport; above 960px 10cqw >= 96px, so nothing changes there. */
  .kahvalti-title { order: 0; margin-top: 18px; font-size: clamp(84px, 10cqw, 160px); }
  .kahvalti-text { order: 0; margin-top: 32px; max-width: 36ch; font-size: 19px; text-wrap: pretty; }
  .kahvalti-list { order: 0; margin-top: 40px; max-width: 440px; }
  .kahvalti-list div { gap: 16px; padding: 16px 0; }
  .kahvalti-list dt { font-size: 24px; }
  .kahvalti-list dd { font-size: 19px; }
  .kahvalti-link { order: 0; }
}

/* ---------- Start with these ---------- */
.favs { padding: 80px 20px 72px; }
.favs-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 14cqw, 60px); line-height: .95; letter-spacing: -.03em; }
.favs-head h2 em, .team-title em { color: var(--terra); }
.favs-head p { margin: 14px 0 28px; font-size: 15px; color: var(--body-2); }
.favs-head .star-inline { color: var(--terra); }
.fav-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.fav { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc"; column-gap: 12px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.fav-num { display: none; }
.fav-name { grid-area: name; font-family: var(--serif); font-size: 32px; line-height: 1.05; color: var(--ink); }
.fav-desc { grid-area: desc; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--body-2); }
.fav-price { grid-area: price; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; font-size: 17px; color: var(--terra-deep); white-space: nowrap; }
.star { font-size: .42em; color: var(--terra); vertical-align: .9em; margin-left: .2em; }
.favs-ctas { display: flex; gap: 12px; margin-top: 28px; }
.favs-ctas .btn-outline { flex: 1; }
@container page (width >= 860px) {
  .favs { padding: 150px 48px 140px; }
  .favs-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: 56px; }
  .favs-head h2 { grid-column: 1 / span 7; font-size: clamp(64px, 6.6cqw, 104px); }
  .favs-head p { grid-column: 9 / span 4; margin: 0; font-size: 17px; line-height: 1.6; }
  .fav { grid-template-columns: 72px minmax(0, 5fr) minmax(0, 4fr) 170px; grid-template-areas: "num name desc price"; gap: 24px; padding: 30px 0; }
  .fav-num { display: block; grid-area: num; font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--terra-deep); }
  .fav-name { font-size: clamp(40px, 4cqw, 60px); line-height: 1; letter-spacing: -.02em; }
  .fav-desc { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
  .fav-price { text-align: right; font-size: 23px; }
  .favs-ctas { margin-top: 44px; }
  .favs-ctas .btn-outline { flex: none; }
}

/* ---------- Catering ---------- */
.catering { padding: 72px 0 80px; background: var(--cream-lift); border-top: 1px solid var(--line); }
.catering-head { padding: 0 20px; }
.catering-title { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 13cqw, 56px); line-height: .95; letter-spacing: -.03em; }
.catering-title em { color: var(--terra); }
.catering-media { position: relative; margin-top: 36px; height: 400px; }
.catering-wide { position: absolute; left: 0; top: 0; width: 86%; height: 260px; object-fit: cover; object-position: 62% 50%; }
.catering-tall { position: absolute; right: 20px; bottom: 0; width: 42%; height: 220px; object-fit: cover; border: 6px solid var(--cream-lift); }
.catering-body { padding: 0 20px; }
.catering-body p { margin-top: 28px; font-size: 17px; line-height: 1.65; color: var(--olive); }
.catering-body .btn { display: flex; width: 100%; margin-top: 24px; }
.catering-note { margin-top: 10px !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--terra-deep) !important; }
@container page (width >= 860px) {
  .catering { padding: 140px 48px 150px; }
  .catering-head { padding: 0; }
  .catering-title { margin-top: 20px; font-size: clamp(72px, 8.4cqw, 132px); line-height: .92; letter-spacing: -.035em; }
  .catering-title span { display: block; }
  .catering-title em { padding-left: 30cqw; }
  .catering-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 72px; align-items: start; }
  .catering-media { display: contents; }
  .catering-wide { position: static; grid-column: 1 / span 7; width: 100%; height: 560px; object-position: 60% 50%; }
  .catering-tall { position: static; grid-column: 8 / span 2; width: 100%; height: 420px; margin-top: 180px; border: 0; object-position: 50% 50%; }
  .catering-body { grid-column: 10 / span 3; padding: 180px 0 0; }
  .catering-body p { margin: 0; font-size: 18px; text-wrap: pretty; }
  .catering-body .btn { display: inline-flex; width: auto; margin-top: 28px; padding: 0 24px; }
  .catering-note { margin-top: 12px !important; }
}
/* 860-899px: the catering column is 173-183px wide; 12px side padding keeps the one-line 15px label inside the page
   (24px padding put the button 2px past the viewport at 860). */
@container page (width >= 860px) and (width < 900px) {
  .catering-body .btn { padding: 0 12px; }
}

/* ---------- Careers band ---------- */
.team { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 16px; align-items: end; padding: 0 20px 64px; background: var(--terra-deep); color: var(--cream-lift); }
.team-photo { width: 100%; height: 320px; margin-top: -36px; object-fit: cover; object-position: 50% 28%; position: relative; }
.team-body { display: contents; }
.team-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #F0D9C4; }
.team-title { grid-column: 1 / -1; margin-top: 28px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 13cqw, 56px); line-height: .95; letter-spacing: -.03em; }
.team-title em { color: inherit; }
.team-roles { grid-column: 1 / -1; list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid #B06A45; }
.team-roles li { padding: 14px 0; border-bottom: 1px solid #B06A45; }
.team-roles .role-name { display: block; font-family: var(--serif); font-size: 26px; }
.team-roles .role-desc { font-size: 15px; color: #F6E8DC; }
.team-cta { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.team-cta p { font-size: 15px; color: #F6E8DC; }
.btn-cream { background: var(--cream-lift); color: var(--terra-deep); }
@container page (width >= 860px) {
  .team { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; padding: 0 48px; }
  .team-photo { grid-column: 1 / span 4; height: 760px; margin-top: -64px; object-position: 50% 30%; }
  .team-body { display: block; grid-column: 6 / span 7; padding: 120px 0 110px; }
  .team-eyebrow { margin: 0; font-size: 13px; }
  .team-title { margin-top: 20px; font-size: clamp(64px, 6.8cqw, 108px); line-height: .94; }
  .team-roles { margin-top: 48px; }
  .team-roles li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: baseline; padding: 20px 0; }
  .team-roles .role-name { font-size: 34px; }
  .team-roles .role-desc { font-size: 16px; line-height: 1.5; }
  .team-cta { margin-top: 40px; }
}

/* ---------- Visit + opening list ---------- */
.visit { padding: 80px 20px 40px; }
.visit-title { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 13cqw, 56px); line-height: .98; letter-spacing: -.03em; }
.visit-title em { color: var(--terra); }
.visit-lede { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--olive); }
.notify-form { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.notify-form input[type="email"] {
  min-width: 0; height: 56px; padding: 0 16px; font-size: 17px; color: var(--ink); background: var(--cream-lift);
  border: 1.5px solid var(--line); border-radius: 3px; outline: none;
}
.notify-form input[type="email"]:focus { border-color: var(--terra); box-shadow: 0 0 0 4px rgba(168, 94, 57, .2); }
.notify-form input[aria-invalid="true"] { border-color: var(--error); }
.notify-form button { height: 56px; padding: 0 24px; background: var(--ink); color: var(--cream-lift); border: 0; border-radius: 3px; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.notify-form button:disabled { cursor: progress; opacity: .8; }
.notify-status { margin-top: 12px; min-height: 22px; font-size: 15px; font-weight: 600; color: var(--error); }
.notify-status[data-tone="ok"] { color: var(--olive); }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.visit-facts { margin-top: 36px; border-top: 1.5px solid var(--ink); }
.visit-facts > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.visit-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-deep); }
.visit-facts dd { margin-top: 6px; font-size: 17px; line-height: 1.6; }
.visit-facts address { line-height: 1.5; }
.visit-facts .muted { color: var(--body-2); }
.visit-hours-detail { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--body-2); }
.maps-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.maps-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--terra-deep); font-size: 15px; font-weight: 700; text-underline-offset: 4px; }
.maps-links a:hover { color: var(--ink); }
.phone-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 3px; white-space: nowrap;
  color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none;
}
@container page (width >= 860px) {
  .visit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 150px 48px 72px; }
  .visit-main { grid-column: 1 / span 6; }
  .visit-title { font-size: clamp(56px, 5.6cqw, 88px); }
  .visit-lede { margin-top: 28px; max-width: 40ch; font-size: 18px; }
  .notify-form { flex-direction: row; max-width: 520px; margin-top: 28px; }
  .notify-form input[type="email"] { flex: 1; padding: 0 18px; }
  .notify-status { margin-top: 14px; min-height: 24px; font-size: 16px; }
  .visit-facts { grid-column: 8 / span 5; margin: 8px 0 0; align-self: start; }
  .visit-facts > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 20px 0; }
  .visit-facts dt { padding-top: 4px; font-size: 13px; }
  .visit-facts dd { margin: 0; font-size: 18px; }
  .visit-hours-detail { margin-top: 8px; font-size: 15px; }
  .phone-link { display: inline; min-height: 0; padding: 0; border: 0; font-size: 18px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
}

/* ---------- Review band ---------- */
.review-band { margin: 0 20px; padding: 28px 0 56px; border-top: 1.5px solid var(--ink); }
.review-band p { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--ink); }
.review-band p em { color: var(--terra); }
.review-band .btn { display: flex; width: 100%; min-height: 52px; height: auto; margin-top: 20px; }
@container page (width >= 860px) {
  .review-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 48px; padding: 40px 0 64px; }
  .review-band p { font-size: 36px; }
  .review-band .btn { display: inline-flex; flex: none; width: auto; height: 56px; margin: 0; }
}

/* Hover colour changes only where hover exists, so taps do not leave buttons stuck in their hover state. */
@media (hover: hover) {
  .btn-cream:hover { background: var(--cream); color: var(--ink); }
}