/*
  Olive & Twig: warm, rustic food and storytelling design (website standard). A dark olive-charcoal sidebar on
  wide screens (logo, menu, Book now, social, copyright) beside cream "paper" pages; the home hero is the Pro's photo
  edge to edge with a framed menu-style card holding the headline; Fraunces serif headings with italic accents,
  DM Sans text, Outfit for small caps labels; services read like a restaurant menu (round "plate" photos, dotted
  leaders between name and price); a dark chalkboard card for contact details and hours.
  Live parts (.rb-*) come from public/assets/css/rb-site.css; this file gives them the Olive & Twig look.
  Customize changes var(--rb-brand) / var(--rb-on-brand) / var(--rb-font-heading) / var(--rb-font-body). The brand
  colour is used as is on the dark parts and mixed darker on cream, so any colour stays readable on both.
*/
:root {
  --rb-brand: #a8bd4a;
  --rb-on-brand: #1c1e16;
  --rb-font-heading: 'Fraunces', Georgia, serif;
  --rb-font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --rb-text: #2b2a20;
  --rb-muted: #6e6a57;
  --rb-line: rgba(43, 42, 32, .14);
  --rb-surface: #f5f0e4;
  --rb-soft: #ece4d2;
  --rb-card: #fbf8f0;
  --rb-radius: 6px;
  --rb-sticky-top: 68px;   /* the top bar under 1100px; the sidebar layout sets 0 (nothing sits on top) */
  --ot-ink: #1c1e16;
  --ot-ink-2: #272a1f;
  --ot-cream: #f5f0e4;
  --ot-label: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --ot-side: 264px;
  --ot-wrap: 1180px;
  /* the brand as set (dark parts, buttons there), darker for cream pages, lighter for text on the dark parts */
  --ot-brand-raw: var(--rb-brand);
  --ot-on-brand-raw: var(--rb-on-brand);
  --ot-brand-ink: color-mix(in srgb, var(--rb-brand) 46%, #1c1e16);
  --ot-brand-light: color-mix(in srgb, var(--rb-brand) 84%, #f5f0e4);
  --ot-leader: color-mix(in srgb, #2b2a20 32%, transparent);
}

html { background: var(--ot-ink); }
body.ot { margin: 0; background: var(--ot-ink); color: var(--rb-text); font-family: var(--rb-font-body); font-size: 16px; line-height: 1.7; }
/* cream pages: the brand mixed darker so text, links and buttons stay readable */
.ot main { --rb-brand: var(--ot-brand-ink); --rb-on-brand: var(--ot-cream); background: var(--rb-surface); }
.ot .rb-chooser, .ot .rb-quote { --rb-brand: var(--ot-brand-ink); --rb-on-brand: var(--ot-cream); }
.ot h1, .ot h2, .ot h3 { font-family: var(--rb-font-heading); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.ot h1 em, .ot h2 em { font-style: italic; color: var(--rb-brand); }
.ot main a:not([class]) { color: var(--rb-brand); }
.ot-wrap { width: 100%; max-width: var(--ot-wrap); margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.ot-section { padding: 96px 0; }
.ot-section-tight { padding-top: 24px; }
.ot-section-soft { background: var(--rb-soft); }
.ot-eyebrow { margin: 0 0 14px; font-family: var(--ot-label); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rb-brand); }
.ot-heading { margin-bottom: 48px; }
.ot-heading h2, .ot-split h2 { font-size: clamp(34px, 4vw, 52px); }
.ot-center { text-align: center; }
.ot-more { text-align: center; margin-top: 44px; }
/* a little twig between two hairlines */
.ot-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px auto 0; color: var(--rb-brand); font-size: 12px; line-height: 1; }
.ot-ornament::before, .ot-ornament::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .45; }
.ot-ornament i { transform: rotate(-35deg); }
.ot-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--rb-brand); text-decoration: none; font-family: var(--ot-label); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.ot-link i { font-size: 11px; transition: transform .2s; }
.ot-link:hover i { transform: translateX(3px); }

/* Dark parts (chalkboard card, closing, footer): cream text, the brand as set */
.ot-dark { --rb-brand: var(--ot-brand-raw); --rb-on-brand: var(--ot-on-brand-raw); --rb-text: #f5f0e4; --rb-muted: rgba(245, 240, 228, .64); --rb-line: rgba(245, 240, 228, .14); --rb-card: var(--ot-ink-2); --rb-soft: var(--ot-ink-2); background: var(--ot-ink); color: var(--rb-text); }
.ot-dark .ot-eyebrow, .ot-dark .ot-ornament, .ot-dark h2 em { color: var(--ot-brand-light); }
.ot-dark .rb-contact-details i, .ot-dark .rb-areas i, .ot-dark a:not([class]) { color: var(--ot-brand-light); }

/* Buttons: squared, small caps labels */
.ot .rb-btn { border-radius: 2px; font-family: var(--ot-label); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding: 15px 30px; color: var(--rb-on-brand); }
.ot .rb-btn:hover { filter: brightness(1.08); }
.ot .rb-btn.rb-btn-outline { background: transparent; color: var(--rb-brand); border-color: currentColor; }
.ot .rb-btn.rb-btn-outline:hover { background: var(--rb-brand); border-color: var(--rb-brand); color: var(--rb-on-brand); filter: none; }
.ot .ot-btn-sm { padding: 11px 20px; font-size: 12px; }

/* Header: a top bar under 1100px, the sidebar of the original on wider screens (below) */
.ot-header { position: sticky; top: 0; z-index: 40; background: var(--ot-ink); color: var(--ot-cream); border-bottom: 1px solid rgba(245, 240, 228, .06); transition: border-color .2s; }
.ot-header.is-scrolled { border-bottom-color: rgba(245, 240, 228, .14); }
.ot-header-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; padding: 0 28px; }
.ot-brand .rb-logo-mark, .ot-footer-brand .rb-logo-mark { border-radius: 8px; background: var(--ot-brand-raw); color: var(--ot-on-brand-raw); font-family: var(--ot-label); font-weight: 600; }
.ot-brand .rb-logo-name { font-family: var(--rb-font-heading); font-weight: 500; font-size: 22px; color: var(--ot-cream); }
.ot-brand .rb-logo-img { height: 40px; }
.ot-nav { display: flex; align-items: center; justify-content: center; flex: 1; }
.ot-header .rb-menu { gap: 24px; }
.ot-header .rb-menu a { font-family: var(--ot-label); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 240, 228, .7); border-bottom: 0; padding: 6px 0; }
.ot-header .rb-menu a:hover { color: var(--ot-cream); }
.ot-header .rb-menu a.is-active { color: var(--ot-brand-light); }
.ot-header .rb-menu-toggle, .ot-header .rb-sub-toggle { color: var(--ot-cream); }
.ot-header ul.rb-menu .rb-submenu { background: var(--ot-ink-2); border-color: rgba(245, 240, 228, .12); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); }
.ot-header ul.rb-menu .rb-submenu a { font-size: 12px; letter-spacing: .1em; color: rgba(245, 240, 228, .8); }
.ot-header ul.rb-menu .rb-submenu a:hover, .ot-header ul.rb-menu .rb-submenu a.is-active { color: var(--ot-cream); background: rgba(245, 240, 228, .06); }
.ot-header-actions { display: flex; align-items: center; gap: 16px; }
.ot-social .rb-social, .ot-footer-social .rb-social { gap: 2px; }
.ot-social .rb-social a, .ot-footer-social .rb-social a { width: 32px; height: 32px; border: 0; color: rgba(245, 240, 228, .66); font-size: 15px; opacity: 1; }
.ot-social .rb-social a:hover, .ot-footer-social .rb-social a:hover { background: transparent; color: var(--ot-brand-light); }
.ot-header .rb-account-login, .ot-header .rb-account-btn { color: rgba(245, 240, 228, .72); font-family: var(--ot-label); font-size: 13px; letter-spacing: .08em; }
.ot-header .rb-account-login:hover, .ot-header .rb-account-btn:hover { color: var(--ot-cream); }
.ot-header .rb-avatar { background: var(--ot-ink-2); color: var(--ot-cream); border-color: rgba(245, 240, 228, .2); }
.ot-side-note { display: none; }

@media (min-width: 1100px) {
  :root { --rb-sticky-top: 0px; }
  body.ot { padding-left: var(--ot-side); }
  .ot-header { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ot-side); border-bottom: 0; border-right: 1px solid rgba(245, 240, 228, .06); }
  .ot-header-row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; height: 100%; padding: 44px 34px 30px; }
  .ot-brand .rb-logo { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ot-brand .rb-logo-mark { width: 50px; height: 50px; flex-basis: 50px; border-radius: 10px; font-size: 16px; }
  .ot-brand .rb-logo-name { font-size: 25px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  .ot-brand .rb-logo-img { height: auto; max-height: 96px; max-width: 100%; }
  .ot-nav { flex: 0 0 auto; display: block; margin-top: 52px; }
  .ot-header .rb-menu { flex-direction: column; gap: 2px; }
  .ot-header .rb-menu a { display: inline-block; padding: 9px 0; font-size: 14px; letter-spacing: .18em; }
  /* Services categories: a list under Services, opened with the arrow (always open on a category page) */
  .ot-header .rb-menu .rb-has-sub { white-space: normal; }
  .ot-header ul.rb-menu .rb-submenu { position: static; min-width: 0; margin: 2px 0 8px 2px; padding: 0 0 0 14px; background: transparent; border: 0; border-left: 1px solid rgba(245, 240, 228, .16); border-radius: 0; box-shadow: none; }
  .ot-header ul.rb-menu .rb-submenu::before { content: none; }
  .ot-header .rb-has-sub > .rb-submenu { display: none; }
  .ot-header .rb-has-sub.is-sub-open > .rb-submenu, .ot-header .rb-has-sub:has(.rb-submenu .is-active) > .rb-submenu { display: block; }
  .ot-header ul.rb-menu .rb-submenu a { padding: 6px 0; font-size: 12px; white-space: normal; }
  .ot-header ul.rb-menu .rb-submenu a:hover, .ot-header ul.rb-menu .rb-submenu a.is-active { background: transparent; color: var(--ot-brand-light); }
  .ot-header-actions { margin-top: auto; padding-top: 36px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .ot-header-actions .rb-btn { order: -1; align-self: stretch; }
  .ot-social { order: 2; margin-left: -8px; }
  /* the account menu opens upwards from the bottom of the sidebar */
  .ot-header .rb-account-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); }
  .ot-side-note { display: block; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(245, 240, 228, .12); font-family: var(--ot-label); font-size: 11px; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 240, 228, .5); }
}
/* short screens: the sidebar scrolls with the page instead of being cut off */
@media (min-width: 1100px) and (max-height: 700px) {
  body.ot { position: relative; }
  .ot-header { position: absolute; bottom: auto; min-height: 100vh; }
  .ot-header-row { height: auto; min-height: 100vh; }
}

/* Home hero: the photo edge to edge, the headline on a framed cream card (like a menu) */
.ot-hero { position: relative; background: var(--ot-ink); }
.ot-hero-photo { position: relative; height: calc(100vh - var(--rb-sticky-top)); min-height: 560px; background-color: var(--ot-ink-2); background-size: cover; background-repeat: no-repeat; }
.ot-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 30, 22, 0) 55%, rgba(28, 30, 22, .5) 100%); }
.ot-hero-photo.rb-no-hero { background-image: radial-gradient(70% 60% at 70% 30%, color-mix(in srgb, var(--ot-brand-raw) 22%, transparent), transparent 70%); }
.ot-hero-card { position: absolute; left: 56px; bottom: 56px; z-index: 1; width: calc(100% - 112px); max-width: 580px; box-sizing: border-box; padding: 48px 48px 44px; background: var(--rb-surface); outline: 1px solid var(--rb-line); outline-offset: -12px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); }
.ot-hero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.05; margin-bottom: 16px; text-wrap: balance; }
.ot-hero-tagline { margin: 0 0 30px; color: var(--rb-muted); font-size: 17px; }
.ot-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* Inner page title band */
.ot-title { background: radial-gradient(900px 320px at 50% 0%, color-mix(in srgb, var(--rb-brand) 10%, transparent), transparent 70%), var(--rb-surface); }
.ot-title-inner { padding-top: 96px; padding-bottom: 56px; text-align: center; }
.ot-title h1 { font-size: clamp(44px, 6vw, 78px); }
.ot-title-sub { max-width: 620px; margin: 20px auto 0; color: var(--rb-muted); font-size: 17px; }
.ot-title .rb-btn { margin-top: 30px; }

/* Portfolio: square photos, a cream frame on hover */
.ot .rb-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 14px; }
.ot .rb-portfolio-featured .rb-grid { grid-template-columns: repeat(3, 1fr); }
.ot .rb-tile { aspect-ratio: 1 / 1; border-radius: 4px; background: var(--rb-soft); }
.ot .rb-tile img { transition: transform .6s ease; }
.ot .rb-tile:hover img { transform: scale(1.05); }
.ot .rb-tile::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(245, 240, 228, .75); opacity: 0; transition: opacity .3s; pointer-events: none; }
.ot .rb-tile:hover::after { opacity: 1; }
.ot .rb-tile-caption { z-index: 1; }
.ot .rb-tabs { justify-content: center; gap: 6px 28px; margin-bottom: 34px; }
.ot .rb-tab { border: 0; border-radius: 0; background: transparent; padding: 6px 0; font-family: var(--ot-label); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rb-muted); }
.ot .rb-tab:hover { color: var(--rb-text); }
.ot .rb-tab.is-active { background: transparent; color: var(--rb-brand); box-shadow: inset 0 -1px 0 currentColor; }
.ot .rb-count { color: inherit; opacity: .6; letter-spacing: .04em; }
.ot .rb-tabs-sticky { justify-content: flex-start; background: var(--rb-surface); }
.ot .rb-tabs-sticky > :first-child { margin-left: auto; }
.ot .rb-tabs-sticky > :last-child { margin-right: auto; }

/* Services, home: a menu board; each category a line with its round "plate" photo and a dotted leader */
.ot-menu-board { max-width: 1040px; margin: 0 auto; padding: 64px 64px 56px; box-sizing: border-box; background: var(--rb-card); border: 1px solid var(--rb-line); outline: 1px solid var(--rb-line); outline-offset: -14px; }
.ot-menu-board .ot-heading { margin-bottom: 40px; }
.ot-menu-preview .rb-services-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 56px; }
.ot .ot-menu-preview .rb-service-card { flex-direction: row; align-items: center; gap: 18px; padding: 14px 0; border: 0; border-radius: 0; background: transparent; }
.ot .ot-menu-preview .rb-service-card:hover { transform: none; }
.ot-menu-preview .rb-service-card-media { flex: 0 0 76px; width: 76px; height: 76px; aspect-ratio: auto; border-radius: 50%; box-shadow: 0 0 0 4px var(--rb-card), 0 0 0 5px var(--rb-line); }
.ot-menu-preview .rb-service-card-media.is-empty::after { font-size: 30px; }
.ot-menu-preview .rb-service-card-body { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 0; padding: 0; min-width: 0; }
.ot .ot-menu-preview .rb-service-card-title { flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; min-width: 0; font-family: var(--rb-font-heading); font-size: 23px; font-weight: 400; line-height: 1.25; }
.ot-menu-preview .rb-service-card-title::after { content: ""; flex: 1 1 auto; min-width: 20px; border-bottom: 2px dotted var(--ot-leader); transform: translateY(-5px); }
.ot-menu-preview .rb-service-card-meta { flex: 0 0 auto; margin-left: 12px; color: var(--rb-brand); font-family: var(--rb-font-heading); font-size: 16px; font-style: italic; }
.ot-menu-preview .rb-service-card-link { flex-basis: 100%; margin-top: 4px; color: var(--rb-muted); font-family: var(--ot-label); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.ot-menu-preview .rb-service-card:hover .rb-service-card-link { color: var(--rb-brand); }
.ot-menu-board .ot-more { margin-top: 36px; }

/* Services page: the whole list as a menu card */
.ot-menu-card { max-width: 1080px; margin: 0 auto; padding: 56px 64px 64px; box-sizing: border-box; background: var(--rb-card); border: 1px solid var(--rb-line); outline: 1px solid var(--rb-line); outline-offset: -14px; }
.ot-menu-card .rb-tabs-sticky { background: var(--rb-card); margin-bottom: 40px; }
.ot .rb-service-cat { margin: 0 0 64px; }
.ot .rb-service-cat:last-child { margin-bottom: 0; }
.ot .rb-service-cat-head { flex-direction: column; align-items: center; gap: 12px; text-align: center; border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
.ot .rb-service-cat-text::after { content: "\f06c"; display: block; width: 150px; margin: 16px auto 0; color: var(--rb-brand); font: 900 11px/1 "Font Awesome 6 Free"; background: linear-gradient(currentColor, currentColor) left center / 56px 1px no-repeat, linear-gradient(currentColor, currentColor) right center / 56px 1px no-repeat; }
.ot .rb-cat-title { font-size: clamp(30px, 3.4vw, 42px); font-weight: 400; font-style: italic; }
.ot .rb-cat-meta { margin-top: 6px; font-family: var(--ot-label); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.ot .rb-cat-more { margin-left: 0; font-family: var(--ot-label); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rb-brand); }
.ot .rb-cat-desc { max-width: 640px; margin: 0 auto 30px; text-align: center; font-style: italic; }
.ot .rb-service-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 0 56px; }
.ot .rb-service { grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--rb-line); border-radius: 0; background: transparent; }
.ot .rb-service.rb-service-noimg, .ot .rb-service:not(:has(.rb-service-img)) { grid-template-columns: minmax(0, 1fr); }
.ot .rb-service-img { border-radius: 50%; }
.ot .rb-service-img.is-art img { padding: 14px; }
/* name ...... price */
.ot .rb-service-top { gap: 10px; }
.ot .rb-service-title { flex: 0 1 auto; min-width: 0; font-family: var(--rb-font-heading); font-weight: 500; font-size: 21px; }
.ot .rb-service-top::after { content: ""; order: 1; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--ot-leader); transform: translateY(-5px); }
.ot .rb-service-top:not(:has(.rb-price))::after { content: none; }
.ot .rb-service-top > .rb-price, .ot .rb-service-from { order: 2; }
.ot .rb-price { font-family: var(--rb-font-heading); font-weight: 500; color: var(--rb-brand); }
.ot .rb-service-top > .rb-price { font-size: 20px; }
.ot .rb-service-from { font-style: italic; }
.ot .rb-service-from .rb-price { font-size: 19px; font-style: normal; }
.ot .rb-service-desc { font-style: italic; font-size: 14.5px; }
.ot .rb-options { gap: 0; margin-top: 8px; }
.ot .rb-option { align-items: baseline; gap: 12px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; }
.ot a.rb-option:hover { border-color: transparent; }
.ot a.rb-option:hover .rb-option-name { color: var(--rb-brand); }
.ot .rb-option-main::after { content: ""; order: 2; flex: 1 1 20px; min-width: 20px; margin-left: 4px; border-bottom: 2px dotted var(--ot-leader); transform: translateY(-5px); }
.ot .rb-option:not(:has(.rb-price)) .rb-option-main::after { content: none; }
.ot .rb-option-name { order: 0; font-size: 15px; font-weight: 500; }
.ot .rb-option-main small { order: 1; }
.ot .rb-option-desc { order: 3; font-style: italic; }
.ot .rb-option .rb-price { font-size: 17px; }
.ot .rb-option-book { border: 0; border-radius: 0; padding: 0; font-family: var(--ot-label); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ot a.rb-option:hover .rb-option-book, .ot a.rb-option-quote:hover .rb-option-book { background: transparent; color: var(--rb-text); }
.ot .rb-pill-btn { border-radius: 2px; padding: 6px 12px; font-family: var(--ot-label); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.ot .rb-service-cta .rb-btn { padding: 8px 16px; font-size: 11px; }
.ot .rb-deposit { font-style: italic; }
.ot .rb-desc-more { font-family: var(--ot-label); letter-spacing: .04em; }

/* Reviews */
.ot .rb-reviews { gap: 22px; }
.ot .rb-review { position: relative; padding: 32px 28px 26px; background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); }
.ot .rb-review::before { content: "\201C"; position: absolute; top: 10px; right: 22px; font: italic 400 72px/1 var(--rb-font-heading); color: var(--rb-brand); opacity: .3; pointer-events: none; }
.ot .rb-review blockquote { font-family: var(--rb-font-heading); font-size: 18px; line-height: 1.55; font-style: italic; color: var(--rb-text); }
.ot .rb-stars { color: var(--rb-brand); }
.ot .rb-review-name { font-family: var(--ot-label); letter-spacing: .06em; }

/* About + details (a dark chalkboard card) */
.ot-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ot-split > .ot-card:only-child { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ot-split h2 { margin-bottom: 24px; }
.ot .rb-about p { font-size: 17px; color: color-mix(in srgb, var(--rb-text) 86%, var(--rb-surface)); }
.ot .rb-about-photo img { border-radius: var(--rb-radius); }
.ot-story .ot-link { margin-top: 12px; }
.ot-card { display: grid; gap: 28px; padding: 38px 34px; border-radius: var(--rb-radius); outline: 1px solid rgba(245, 240, 228, .12); outline-offset: -10px; }
.ot-card h3 { margin-bottom: 10px; font-family: var(--ot-label); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ot-brand-light); }
.ot .rb-hours li { border-bottom: 1px dotted var(--rb-line); }

/* Contact: the form on a card */
.ot-form-card { padding: 42px; background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: var(--rb-radius); }
.ot-form-card h2 { font-size: 34px; padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--rb-line); }
.ot .rb-contact-form input, .ot .rb-contact-form textarea { background: var(--rb-surface); border-color: rgba(43, 42, 32, .18); border-radius: 3px; }
.ot .rb-contact-form label { font-weight: 500; font-size: 14px; }

/* Account menu, popups */
.ot .rb-account-menu a { color: var(--rb-text); }
.ot .rb-chooser-box h3, .ot .rb-quote-box h3 { font-weight: 500; }

/* Closing call to action */
.ot-cta { text-align: center; background: radial-gradient(800px 320px at 50% 0%, color-mix(in srgb, var(--ot-brand-raw) 16%, transparent), transparent 70%), var(--ot-ink); }
.ot-cta-inner { padding-top: 110px; padding-bottom: 110px; }
.ot-cta .ot-ornament { margin: 0 auto 28px; }
.ot-cta h2 { max-width: 860px; margin: 0 auto 20px; font-size: clamp(36px, 5vw, 64px); text-wrap: balance; }
.ot-cta p { max-width: 520px; margin: 0 auto 34px; color: var(--rb-muted); }

/* Footer */
.ot-footer { padding: 72px 0 32px; border-top: 1px solid rgba(245, 240, 228, .06); text-align: center; font-size: 14px; color: var(--rb-muted); }
.ot-footer .ot-wrap { display: grid; justify-items: center; gap: 18px; }
.ot-footer-brand .rb-logo { flex-direction: column; gap: 14px; }
.ot-footer-brand .rb-logo-mark { width: 44px; height: 44px; flex-basis: 44px; }
.ot-footer-brand .rb-logo-name { font-family: var(--rb-font-heading); font-weight: 500; font-size: 26px; color: var(--rb-text); }
.ot-footer-brand .rb-logo-img { height: 48px; }
.ot-footer-line { margin: 0; font-family: var(--rb-font-heading); font-style: italic; font-size: 18px; color: var(--rb-muted); }
.ot-footer-social .rb-social { justify-content: center; }
.ot-footer-contact .rb-contact-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; }
.ot-footer .rb-contact-details a { color: var(--rb-muted); text-decoration: none; }
.ot-footer .rb-contact-details a:hover { color: var(--rb-text); }
.ot-copy { width: 100%; margin: 12px 0 0; padding-top: 22px; border-top: 1px solid var(--rb-line); font-family: var(--ot-label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.ot-footer .rb-powered { margin-left: 6px; color: var(--rb-muted); }

/* Category pages (/services/<category>): text beside the framed photo, then the sections on cream / parchment */
.ot-cp-hero { padding: 88px 0 80px; background: radial-gradient(900px 320px at 30% 0%, color-mix(in srgb, var(--rb-brand) 10%, transparent), transparent 70%), var(--rb-surface); }
.ot-cp-hero .rb-cp-hero-inner { gap: 64px; }
.ot-cp-hero h1 { font-size: clamp(42px, 5.4vw, 74px); text-wrap: balance; }
.ot .rb-cp-intro { margin-top: 20px; color: var(--rb-muted); font-size: 18px; }
.ot-cp .rb-cp-hero-actions { margin-top: 32px; }
.ot-cp .rb-cp-hero-media img, .ot-cp .rb-cp-hero-media video { aspect-ratio: 4 / 4.2; border-radius: 4px; box-shadow: 0 0 0 10px var(--rb-card), 0 0 0 11px var(--rb-line), 0 24px 50px rgba(28, 30, 22, .16); }
.ot .rb-cp-wrap { max-width: var(--ot-wrap); padding: 0 40px; }
.ot .rb-cp-section { padding: 88px 0; }
.ot .rb-cp-section:nth-child(even) { background: var(--rb-soft); }
.ot .rb-cp-section + .rb-cp-section { border-top: 0; }
.ot .rb-cp-title { font-size: clamp(32px, 3.6vw, 46px); font-weight: 400; }
.ot .rb-cp-more { font-family: var(--ot-label); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rb-brand); }
.ot .rb-cp-lead p { font-family: var(--rb-font-heading); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.4; color: var(--rb-text); max-width: 900px; }
.ot .rb-cp-photos .rb-grid, .ot .rb-cp-row .rb-grid { grid-template-columns: repeat(4, 1fr); }
.ot .rb-cp-row-1 .rb-grid { grid-template-columns: 1fr; }
.ot .rb-cp-row-2 .rb-grid { grid-template-columns: repeat(2, 1fr); }
.ot .rb-cp-row-3 .rb-grid, .ot .rb-cp-row-5 .rb-grid, .ot .rb-cp-row-6 .rb-grid { grid-template-columns: repeat(3, 1fr); }
.ot .rb-cp-sections .rb-tile.is-lead { grid-column: auto; grid-row: auto; }
.ot .rb-cp-row-1 .rb-tile { aspect-ratio: 16 / 9; }
.ot .rb-cp-row-2 .rb-tile { aspect-ratio: 4 / 3; }
.ot .rb-cp-photo img { border-radius: 4px; }
.ot .rb-faq summary { font-family: var(--rb-font-heading); font-size: 21px; font-weight: 400; }
.ot .rb-detail dt { font-family: var(--ot-label); letter-spacing: .14em; }
.ot .rb-detail dd { font-family: var(--rb-font-heading); font-size: 21px; }
.ot .rb-cp-contact { --rb-brand: var(--ot-brand-raw); --rb-on-brand: var(--ot-on-brand-raw); --rb-text: #f5f0e4; --rb-muted: rgba(245, 240, 228, .64); --rb-line: rgba(245, 240, 228, .14);
  padding: 48px 52px; border: 0; border-radius: var(--rb-radius); background: var(--ot-ink); color: var(--rb-text); outline: 1px solid rgba(245, 240, 228, .12); outline-offset: -10px; }
.ot .rb-cp-contact .rb-cp-title { color: var(--rb-text); }
.ot .rb-cp-contact .rb-cp-text p { font-family: var(--rb-font-heading); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; }

@media (max-width: 1099px) {
  .ot-social { display: none; }
  .ot-header .rb-menu { gap: 18px; }
  .ot-menu-board { padding: 52px 40px 48px; }
  .ot-menu-preview .rb-services-preview { gap: 4px 36px; }
  .ot-menu-card { padding: 48px 40px 52px; }
}
@media (max-width: 991px) {
  .ot-header-actions .rb-account-login { font-size: 0; }
  .ot-header-actions .rb-account-login i { font-size: 18px; }
  .ot-split { grid-template-columns: 1fr; gap: 40px; }
  .ot-menu-preview .rb-services-preview { grid-template-columns: 1fr; }
  .ot .rb-grid, .ot .rb-portfolio-featured .rb-grid { gap: 10px; }
}
@media (max-width: 767px) {
  :root { --rb-sticky-top: 64px; }
  .ot-wrap { padding-left: 16px; padding-right: 16px; }
  .ot-header-row { height: 64px; padding: 0 16px; gap: 8px; }
  .ot-brand .rb-logo-name { font-size: 20px; max-width: 52vw; }
  .ot-brand .rb-logo-mark { width: 34px; height: 34px; flex-basis: 34px; font-size: 12px; }
  .ot-nav { order: 3; flex: 0 0 auto; }
  .ot-header-actions { gap: 2px; margin-left: auto; }
  .ot-header-actions .rb-btn { display: none; }
  .ot-header .rb-account-login i { padding: 8px; }
  .ot-header .rb-menu { background: var(--ot-ink); border-bottom: 1px solid rgba(245, 240, 228, .12); padding: 4px 16px 12px; }
  .ot-header .rb-menu a { color: var(--ot-cream); border-bottom: 1px solid rgba(245, 240, 228, .1); padding: 13px 0; }
  .ot-header .rb-menu a.is-active { color: var(--ot-brand-light); border-bottom-color: rgba(245, 240, 228, .1); }
  .ot-header .rb-menu > li:last-child > a { border-bottom: 0; }
  .ot-header ul.rb-menu .rb-submenu { background: transparent; box-shadow: none; }
  .ot-header ul.rb-menu .rb-submenu a { border-bottom: 0; padding: 10px 0; }
  /* hero: the photo on top, the card overlapping its lower edge */
  .ot-hero { background: transparent; padding-bottom: 8px; }
  .ot-hero-photo { height: 58vh; height: 58svh; min-height: 300px; }
  .ot-hero-card { position: relative; left: auto; bottom: auto; width: auto; max-width: none; margin: -72px 16px 0; padding: 32px 24px 28px; outline-offset: -8px; box-shadow: 0 18px 40px rgba(28, 30, 22, .18); }
  .ot-hero h1 { font-size: clamp(32px, 9vw, 40px); margin-bottom: 12px; }
  .ot-hero-tagline { font-size: 16px; margin-bottom: 24px; }
  .ot-hero-actions { gap: 16px 22px; }
  .ot-section { padding: 64px 0; }
  .ot-section-tight { padding-top: 8px; }
  .ot-heading { margin-bottom: 32px; }
  .ot-heading h2, .ot-split h2 { font-size: clamp(30px, 8.4vw, 36px); }
  .ot-title-inner { padding-top: 56px; padding-bottom: 32px; }
  .ot-title h1 { font-size: clamp(40px, 11vw, 52px); }
  .ot-title-sub { font-size: 16px; }
  .ot .rb-grid, .ot .rb-portfolio-featured .rb-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ot .rb-tile::after { inset: 6px; }
  .ot .rb-tabs { gap: 6px 20px; margin-bottom: 20px; }
  .ot .rb-tab { font-size: 12px; letter-spacing: .12em; }
  /* menus: plates smaller, the price under the name */
  .ot-menu-board { padding: 40px 20px 32px; outline-offset: -8px; }
  .ot .ot-menu-preview .rb-service-card { gap: 14px; padding: 12px 0; }
  .ot-menu-preview .rb-service-card-media { flex-basis: 60px; width: 60px; height: 60px; }
  .ot .ot-menu-preview .rb-service-card-title { flex-basis: 100%; font-size: 20px; }
  .ot-menu-preview .rb-service-card-title::after { content: none; }
  .ot-menu-preview .rb-service-card-meta { margin-left: 0; font-size: 15px; }
  .ot-menu-preview .rb-service-card-link { display: none; }
  .ot-menu-card { padding: 28px 16px 32px; outline-offset: -8px; }
  .ot-menu-card .rb-tabs-sticky { margin-bottom: 28px; }
  .ot .rb-service-cat { margin-bottom: 48px; }
  .ot .rb-service-cat-head { margin-bottom: 18px; }
  .ot .rb-cat-title { font-size: 30px; }
  .ot .rb-service { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; }
  .ot .rb-service.rb-service-noimg, .ot .rb-service:not(:has(.rb-service-img)) { grid-template-columns: minmax(0, 1fr); }
  .ot .rb-service-img.is-art img { padding: 8px; }
  .ot .rb-service-title, .ot .rb-service-top > .rb-price { font-size: 18px; }
  .ot .rb-option-book { font-size: 0; letter-spacing: 0; }
  .ot .rb-option-book i { font-size: 13px; margin: 0; }
  .ot-split { gap: 32px; }
  .ot .rb-about p { font-size: 16px; }
  .ot-card { padding: 30px 24px; }
  .ot-form-card { padding: 26px 20px; }
  .ot-form-card h2 { font-size: 28px; }
  .ot .rb-review { padding: 26px 22px 22px; }
  .ot-cta-inner { padding-top: 72px; padding-bottom: 72px; }
  .ot-cta h2 { font-size: clamp(32px, 9vw, 40px); }
  .ot-footer { padding-top: 52px; }
  .ot-footer-contact .rb-contact-details { flex-direction: column; align-items: center; gap: 2px; }
  .ot .rb-mobile-bar { background: var(--ot-ink); border-top-color: rgba(245, 240, 228, .14); }
  .ot .rb-bar-btn { background: transparent; color: var(--ot-cream); border-color: rgba(245, 240, 228, .2); border-radius: 2px; }
  .ot .rb-bar-btn.rb-bar-primary { background: var(--ot-brand-raw); border-color: var(--ot-brand-raw); color: var(--ot-on-brand-raw); }
  .ot-cp-hero { padding: 36px 0 48px; }
  .ot-cp-hero h1 { font-size: clamp(36px, 10vw, 48px); }
  .ot .rb-cp-intro { font-size: 16px; }
  .ot-cp .rb-cp-hero-media img, .ot-cp .rb-cp-hero-media video { box-shadow: 0 0 0 6px var(--rb-card), 0 0 0 7px var(--rb-line); }
  .ot .rb-cp-wrap { padding-left: 16px; padding-right: 16px; }
  .ot .rb-cp-section { padding: 56px 0; }
  .ot .rb-cp-photos .rb-grid, .ot .rb-cp-row .rb-grid { grid-template-columns: repeat(2, 1fr); }
  .ot .rb-cp-row-1 .rb-grid { grid-template-columns: 1fr; }
  .ot .rb-cp-contact { padding: 30px 22px; outline-offset: -7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ot .rb-tile img, .ot-link i { transition: none; }
}