/* Dimensions Massage Therapy. Brand layer on top of Bootstrap 5.3.
   Use Bootstrap utilities first; this file only holds brand tokens and the few shared components Bootstrap lacks. */

:root {
  --ink: #0B0A08;
  --ink-2: #1C1916;
  --cream: #FFF9F3;
  --paper: #FFFCF8;
  --coral: #D9604A;
  --coral-deep: #B8472F;
  --coral-light: #F4A391;
  --blush: #FBE3DA;
  --star: #E8A33D; /* warm marigold for review stars, sits between coral and sand */
  --link: #1F6B66; /* deep teal, coral's complement; 6:1 on cream. Coral = accent, marigold = stars. */
  --sand: #F1EAE1;
  --muted: #5C564F;
  --line: rgba(11, 10, 8, .12);
  --line-soft: rgba(11, 10, 8, .10);
  --line-strong: rgba(11, 10, 8, .20);
  --serif: Fraunces, Georgia, serif;

  --bs-body-font-family: Barlow, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-size: 17px;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--cream);
  --bs-link-color: var(--link);
  --bs-link-color-rgb: 31, 107, 102;
  --bs-link-hover-color: var(--coral-deep);
  --bs-link-hover-color-rgb: 184, 71, 47;
  --bs-border-color: var(--line);
  --bs-emphasis-color: var(--ink);
}

body { background: var(--cream); }
a { text-decoration: none; }
img { max-width: 100%; }

/* Layout */
.container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
@media (max-width: 575.98px) { .container { padding-left: 16px; padding-right: 16px; } }
.section-gap { padding-top: 120px; }
.section-gap-lg { padding-top: 160px; padding-bottom: 120px; }
.page-head { padding-top: 110px; padding-bottom: 64px; }
@media (max-width: 767.98px) {
  .section-gap { padding-top: 72px; }
  .section-gap-lg { padding-top: 96px; padding-bottom: 72px; }
  .page-head { padding-top: 64px; padding-bottom: 40px; }
}

/* Type */
.font-serif { font-family: var(--serif); }
.eyebrow { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; opacity: .7; }
.label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; opacity: .65; }
.display-xl { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6vw, 80px); line-height: 1.02; letter-spacing: -.02em; }
.display-lg { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }
.display-md { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; }
.display-cta { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.04; letter-spacing: -.02em; }
.accent { font-style: italic; color: var(--coral-deep); }
.on-dark .accent, .accent-light { color: var(--coral-light); }
.lead-soft { font-size: 19px; opacity: .8; max-width: 600px; }
.text-coral { color: var(--coral-deep) !important; }
.text-coral-light { color: var(--coral-light) !important; }
.text-muted-ink { color: var(--muted) !important; }
.link-ink { color: var(--ink); }
.link-ink:hover { color: var(--coral-deep); }
.link-arrow { font-weight: 600; font-size: 15.5px; color: var(--link); }
/* Links read as deep teal, no underline; coral text is kept for .accent words. */
.link-arrow, .link-label, p a:not([class]), li a:not([class]) { text-decoration: none; }
.link-label { color: var(--link); }
.link-arrow:hover, a:hover .link-label, p a:not([class]):hover, li a:not([class]):hover { color: var(--coral-deep); }
.on-dark .link-arrow, .on-dark p a:not([class]) { color: var(--cream); }
.on-dark .link-arrow:hover, .on-dark p a:not([class]):hover { color: var(--coral-light); }

/* Surfaces */
.bg-cream { background: var(--cream) !important; }
.bg-paper { background: var(--paper) !important; }
.bg-ink { background: var(--ink-2) !important; color: var(--cream); }
.bg-blush { background: var(--blush) !important; }
.card-soft { background: #fff; border: 1px solid var(--line-soft); border-radius: 22px; }
.card-ink { background: var(--ink-2); color: var(--cream); border-radius: 22px; }
.rounded-xl { border-radius: 26px !important; }
.rounded-lg2 { border-radius: 18px !important; }
.img-cover { width: 100%; object-fit: cover; display: block; }
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border-radius: 18px; background-color: var(--sand); background-image: repeating-linear-gradient(115deg, rgba(11,10,8,.06) 0 1px, transparent 1px 8px); color: rgba(11,10,8,.55); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

/* Hairline lists and rows */
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list > li, .rule-row { padding: 14px 0; border-top: 1px solid rgba(11,10,8,.14); }
.rule-list > li:last-child, .rule-row:last-child { border-bottom: 1px solid rgba(11,10,8,.14); }
.top-rule { border-top: 2px solid var(--ink-2); padding-top: 18px; }
.faq details { padding: 16px 0; border-top: 1px solid rgba(11,10,8,.14); }
.faq details:last-child { border-bottom: 1px solid rgba(11,10,8,.14); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 8px 0 0; font-size: 15.5px; opacity: .8; }

/* Buttons */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 999px; --bs-btn-padding-x: 26px; --bs-btn-padding-y: 13px; --bs-btn-font-size: 16px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-ink { --bs-btn-bg: var(--ink-2); --bs-btn-color: var(--cream); --bs-btn-border-color: var(--ink-2); --bs-btn-hover-bg: #000; --bs-btn-hover-color: var(--cream); --bs-btn-hover-border-color: #000; --bs-btn-active-bg: #000; --bs-btn-active-color: var(--cream); }
.btn-coral { --bs-btn-bg: var(--coral-light); --bs-btn-color: var(--ink); --bs-btn-border-color: var(--coral-light); --bs-btn-hover-bg: #F08E78; --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: #F08E78; --bs-btn-active-bg: #F08E78; --bs-btn-active-color: var(--ink); }
.btn-line { --bs-btn-bg: transparent; --bs-btn-color: var(--ink); --bs-btn-border-color: rgba(11,10,8,.28); --bs-btn-hover-bg: rgba(11,10,8,.04); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-active-bg: rgba(11,10,8,.06); --bs-btn-active-color: var(--ink); }
.btn-line-light { --bs-btn-bg: transparent; --bs-btn-color: var(--cream); --bs-btn-border-color: rgba(255,249,243,.35); --bs-btn-hover-bg: rgba(255,249,243,.08); --bs-btn-hover-color: var(--cream); --bs-btn-hover-border-color: var(--cream); }
.btn-lg-pill { --bs-btn-padding-x: 34px; --bs-btn-padding-y: 17px; --bs-btn-font-size: 17px; min-height: 56px; }
.btn-cta-square { border-radius: 18px; }
.shadow-ink { box-shadow: 0 12px 30px rgba(11,10,8,.25); }
.btn-text { background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--coral-deep); font-weight: 600; font-family: inherit; }

/* Chips and toggles (used by booking widgets) */
.chip { font-family: inherit; cursor: pointer; font-size: 14.5px; font-weight: 600; padding: 0 16px; min-height: 44px; border-radius: 999px; border: 1px solid rgba(11,10,8,.18); background: #fff; color: var(--ink); display: inline-flex; align-items: center; gap: 9px; }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--ink-2); border-color: var(--ink-2); color: var(--cream); }
.chip-photo { padding-left: 4px; }
.chip-photo img { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; }
.chip.is-dim { opacity: .35; }
.on-dark .chip { background: transparent; color: var(--cream); border-color: rgba(255,249,243,.3); }
.on-dark .chip.is-on, .on-dark .chip[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(11,10,8,.06); }
.seg button { font-family: inherit; cursor: pointer; border: 0; font-size: 15px; font-weight: 600; padding: 0 20px; min-height: 44px; border-radius: 999px; background: transparent; color: var(--ink); }
.seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(11,10,8,.18); }
/* .seg-sm: compact filter size (Schedule page and homepage slot picker). */
.seg-sm { padding: 3px; gap: 2px; }
.seg-sm button { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
/* .seg-split: a toggle with no "Any" (press again to clear), with a hairline between options when neither is selected. */
.seg-split button { position: relative; }
.seg-split button + button::before { content: ''; position: absolute; left: -1px; top: 50%; width: 1px; height: 16px; transform: translateY(-50%); background: rgba(11,10,8,.22); }
.seg-split button[aria-pressed="true"]::before, .seg-split button[aria-pressed="true"] + button::before { display: none; }
.day-btn { font-family: inherit; cursor: pointer; width: 64px; padding: 9px 0 10px; border-radius: 14px; border: 1px solid rgba(11,10,8,.16); background: #fff; color: var(--ink); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.day-btn .d-top { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; opacity: .7; }
.day-btn .d-num { font-family: var(--serif); font-size: 21px; line-height: 1; }
.day-btn[aria-pressed="true"] { background: var(--ink-2); border-color: var(--ink-2); color: var(--cream); }

/* Pressure meter */
.pressure { display: inline-flex; align-items: center; gap: 8px; }
.pressure-bars { display: inline-flex; gap: 3px; }
.pressure-bars span { width: 18px; height: 6px; border-radius: 3px; background: rgba(11,10,8,.1); }
.pressure-bars span.on { background: rgba(11,10,8,.55); }
.pressure-word { font-size: 14px; font-weight: 500; opacity: .75; }

/* Nav */
.site-nav-wrap { padding-top: 20px; }
.site-nav-overlay { position: absolute; top: 20px; left: 0; right: 0; z-index: 20; }
.site-nav { background: var(--ink-2); color: var(--cream); border-radius: 999px; padding: 10px 12px 10px 14px; }
.site-nav .nav-link { color: var(--cream); font-size: 15px; font-weight: 500; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--coral-light); }
.site-nav .btn { min-height: 44px; --bs-btn-padding-y: 10px; --bs-btn-padding-x: 22px; --bs-btn-font-size: 15px; }
.site-nav-toggle { border: 1px solid rgba(255,249,243,.3); border-radius: 999px; width: 44px; height: 44px; color: var(--cream); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.site-nav-toggle:focus { box-shadow: 0 0 0 3px rgba(244,163,145,.5); }
@media (max-width: 991.98px) {
  .site-nav { border-radius: 26px; padding: 10px 12px 10px 12px; }
  .site-nav .navbar-collapse { order: 3; width: 100%; }
  .site-nav .navbar-nav { padding: 12px 8px 8px; }
  .site-nav .nav-link { font-size: 17px; padding: 10px 0; }
}
/* Teal button (same colour as links) for the nav's Book a massage. */
.btn-teal { --bs-btn-bg: var(--link); --bs-btn-color: var(--cream); --bs-btn-border-color: var(--link); --bs-btn-hover-bg: #17554F; --bs-btn-hover-color: var(--cream); --bs-btn-hover-border-color: #17554F; --bs-btn-active-bg: #17554F; --bs-btn-active-color: var(--cream); --bs-btn-active-border-color: #17554F; }
@media (max-width: 420px) { .site-nav .btn-coral, .site-nav .btn-teal { display: none; } }

/* CTA band */
.cta-band { background: var(--blush); border-radius: 26px; padding: 100px 40px 104px; }
@media (max-width: 767.98px) { .cta-band { padding: 64px 20px; } }

/* Footer */
.site-footer { background: #fff; border-top: 1px solid var(--line-soft); font-size: 15px; line-height: 1.55; padding: 72px 0 36px; }
.footer-brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); }
.footer-brand-name { display: block; font-size: 21px; font-weight: 600; letter-spacing: .2em; line-height: 1; }
.footer-brand-sub { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .42em; margin-top: 6px; }
.footer-h { font-size: 16px; font-weight: 600; margin: 0 0 16px; font-family: inherit; }
.footer-links li + li { margin-top: 12px; }
.footer-links a, .footer-base a { color: var(--muted); }
.footer-links a:hover, .footer-base a:hover { color: var(--ink); }
.footer-flow li + li { margin-top: 12px; }
.footer-flow a { color: var(--ink); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; font-size: 14px; color: var(--muted); }

/* Modal (booking overlay) */
/* Dialog centres with margin:auto so a dialog taller than the window scrolls from its top instead of being clipped. */
.bk-overlay { position: fixed; inset: 0; z-index: 1050; overflow-y: auto; background: rgba(11,10,8,.42); display: flex; justify-content: center; align-items: flex-start; padding: 36px 16px; }
.bk-overlay[hidden] { display: none; }
.bk-dialog { margin: auto; width: 100%; max-width: 500px; background: var(--paper); border-radius: 24px; box-shadow: 0 30px 80px rgba(11,10,8,.35); overflow: hidden; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.field input, .field textarea, .field select { font-family: inherit; font-size: 16px; font-weight: 400; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(11,10,8,.22); background: var(--cream); color: var(--ink); }
.on-dark .field input, .on-dark .field textarea { border-color: rgba(255,249,243,.25); background: rgba(255,249,243,.06); color: var(--cream); }

/* Apple Pay / Google Pay buttons (assets/js/wallet-pay.js), above the card field in every checkout. */
.dmt-wallets { display: flex; gap: 10px; }
.dmt-applepay { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: black; display: block; flex: 1 1 0; min-width: 0; height: 48px; border: 0; border-radius: 999px; cursor: pointer; }
.dmt-applepay-off { flex: 1 1 0; min-width: 0; height: 48px; border: 0; border-radius: 999px; background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-size: 17px; font-weight: 600; opacity: .35; cursor: not-allowed; }
.dmt-googlepay { flex: 1 1 0; min-width: 0; height: 48px; border-radius: 999px; overflow: hidden; }
.dmt-or { display: flex; align-items: center; gap: 12px; font-size: 13px; opacity: .65; }
.dmt-or::before, .dmt-or::after { content: ''; flex: 1; height: 1px; background: rgba(11, 10, 8, .2); }