/* Fly Foxx - the site's one stylesheet.
 *
 * Values are read from flyfoxx.com (the WordPress/Elementor site) with
 * tools/computed_styles.py on 23 Oct 2026, so the rebuild matches it.
 * Every color and size is a token below; components use the tokens.
 * The build copies this file to /assets/css/foxx.<hash>.css.
 */

/* ----------------------------------------------------------------- fonts */
/* Georgia is a system face. The two script faces are the client's own files,
   served from this domain. size-adjust keeps the fallback close to the real
   face so text does not jump when the script font arrives. */
@font-face {
  font-family: "Dancing Script";
  src: url("/assets/fonts/dancingscript-regular.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("/assets/fonts/dancingscript-bold.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brittany Signature";
  src: url("/assets/fonts/brittanysignature.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --brown-900: #3B2110;   /* primary: dark text on light buttons, legal banners */
  --brown-800: #644B34;   /* the home hero's headline */
  --brown-600: #83592C;   /* secondary: script headings, dark buttons, top bar */
  --brown-500: #816348;   /* the header phone icon's circle */
  --brown-400: #A57F55;   /* accordion icon tint, hover */
  --peach:     #FFEBD2;   /* text on the top bar */
  --cream:     #FFFAF1;   /* most section backgrounds */
  --sand:      #E8E2CC;   /* testimonials, footer */
  --wash:      #DBD0BA;   /* the home hero's ground, and its wash on a phone */
  --tan:       #E9DBC0;   /* light buttons, contact panel */
  --tan-soft:  #E9DBC0;
  --field:     #F4ECDE;   /* form fields */
  --white:     #FFFFFF;
  --ink:       #1B1B1A;   /* body text */
  --ink-soft:  #3D3D3D;   /* field text */
  --black:     #0D0D0D;   /* copyright bar */
  --star:      #FBBC05;

  --serif:  Georgia, "Times New Roman", serif;
  --script: "Dancing Script", "Brush Script MT", cursive;
  --sign:   "Brittany Signature", "Dancing Script", cursive;

  --fs-body: 20px;  --lh-body: 1.5;
  --fs-h1:   68px;  /* hero headline, banner titles */
  --fs-sh:   70px;  /* script section headings */
  --fs-sh-sm: 50px; /* smaller script headings ("Companies We Work With") */
  --fs-eyebrow: 28px;
  --fs-acc:  30px;  /* accordion questions in the services list */
  --fs-faq:  27px;
  --fs-btn:  22px;

  --gutter: 64px;
  --sec-pad: 100px;
  --radius: 30px;   /* photos and cards */
  --radius-sm: 10px;
  --shadow: 0 6px 18px rgba(59, 33, 16, .18);
}

@media (max-width: 1024px) {
  :root { --fs-h1: 54px; --fs-sh: 56px; --fs-sh-sm: 40px; --gutter: 40px; --sec-pad: 80px; }
}
@media (max-width: 767px) {
  :root {
    --fs-body: 18px; --fs-h1: 45px; --fs-sh: 40px; --fs-sh-sm: 30px;
    --fs-eyebrow: 20px; --fs-acc: 20px; --fs-faq: 16px; --fs-btn: 16px;
    --gutter: 20px; --sec-pad: 60px; --radius: 20px;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr, 0px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--serif);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.2; }
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 .75em; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brown-600); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--white); padding: 12px 18px; }
.skip:focus { left: 12px; top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Live's page width: 5% in from each side (1152px of content at 1280), up to 1440px of content
   (240px in at 1920), and never under 20px on a phone. */
.wrap { --pad-x: max(20px, 5%, calc((100% - 1440px) / 2)); width: 100%; margin: 0 auto; padding: 0 var(--pad-x); }
.sec { padding: var(--sec-pad) 0; }
.sec--cream { background: var(--cream); }
.sec--sand  { background: var(--sand); }
.sec--white { background: var(--white); }
.center { text-align: center; }

.eyebrow {
  display: block; font: 500 var(--fs-eyebrow)/1.2 var(--serif);
  text-transform: uppercase; letter-spacing: 1px; color: var(--ink); margin-bottom: 10px;
}
.sh {               /* script section heading */
  font: 500 var(--fs-sh)/1.2 var(--script); color: var(--brown-600); margin-bottom: 40px;
}
.sh--sm { font-size: var(--fs-sh-sm); margin-bottom: 30px; }
.sh--bold { font-weight: 700; }
.sign { font: 400 32px/1.2 var(--sign); color: #000; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 18px 34px; border-radius: 100px; border: 1px solid transparent;
  font: 400 var(--fs-btn)/1 var(--serif); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--dark  { background: var(--brown-600); color: var(--white); }
.btn--dark:hover  { background: var(--brown-900); }
.btn--light { background: var(--tan); color: var(--brown-900); }
.btn--light:hover { background: var(--brown-600); color: var(--white); }
.btn--outline { background: var(--cream); color: var(--brown-900); border-color: var(--tan); }
.btn--outline:hover { background: var(--tan); }
.btn--white { background: var(--white); color: var(--brown-600); text-transform: capitalize; }
.btn--white:hover { background: var(--tan); color: var(--brown-900); }
.btn--brand { background: var(--brown-900); color: var(--white); }
.btn--brand:hover { background: var(--brown-600); }
.btn--big { padding: 26px 40px; }
.btn--caps { text-transform: uppercase; font-size: 18px; }
.btns { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 40px; }
.btns--left { justify-content: flex-start; }

/* ------------------------------------------------------------ top bar */
.topbar { background: var(--brown-600); color: var(--peach); }
.topbar .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 59px; gap: 16px; }
.topbar__social { display: flex; gap: 6px; }
.topbar__social a { color: var(--peach); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.topbar__social svg { width: auto; height: 30px; fill: currentColor; }
.topbar__social a:first-child svg { height: 21px; }   /* the live "f" is 11 x 21 in its 30px box */
.topbar__tag { font: 500 24px/1.2 var(--script); margin: 0; text-align: center; }
.topbar__login { justify-self: end; font: 500 17px/1.2 var(--serif); text-transform: uppercase; letter-spacing: .5px; color: var(--peach); text-decoration: none; }
.topbar__login:hover { text-decoration: underline; }

/* -------------------------------------------------------------- header */
.hdr { background: var(--white); position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
/* Logo, menu centered on the page, phone and button: the live header at 1280 is 160px tall. */
.hdr .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 160px; padding-top: 24px; padding-bottom: 24px; }
.hdr__logo { justify-self: start; }
.hdr__logo img { width: clamp(180px, 18.8vw, 241px); height: auto; }
.nav { flex: 1; display: flex; justify-content: center; }
/* One line at every desktop width (the live site's 520px box wrapped Gallery onto a second
   line); the gap gives way first on narrower screens, down to the 1100px burger breakpoint. */
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: center; column-gap: clamp(16px, 2.3vw, 30px); white-space: nowrap; }
.nav a, .nav button.nav__top {
  font: 500 24px/36px var(--serif); color: var(--brown-600); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav a:hover, .nav button.nav__top:hover, .nav a[aria-current="page"] { color: var(--brown-900); }
.nav__has { position: relative; }
.nav__top { display: inline-flex; align-items: center; gap: 8px; }
.nav__top svg { width: 17px; height: 17px; fill: currentColor; transition: transform .2s; }
.nav__sub {
  list-style: none; margin: 0; padding: 10px 0; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); min-width: 320px; background: var(--white); box-shadow: var(--shadow);
  border-radius: var(--radius-sm); opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 50;
}
.nav__sub a { display: block; padding: 8px 22px; font-size: 18px; line-height: 1.4; }
.nav__sub a:hover { background: var(--cream); }
.nav__has:hover .nav__sub, .nav__has:focus-within .nav__sub, .nav__has.open .nav__sub { opacity: 1; visibility: visible; }

/* Services as a mega menu: a panel the width of the header, below it. The item stretches
   to the header's full height so the pointer never leaves it on the way down. */
.hdr .wrap { position: relative; }
.nav__has--mega { position: static; padding: 62px 0; margin: -62px 0; }   /* (160px header - 36px line) / 2 */
.mega {
  position: absolute; left: var(--pad-x); right: var(--pad-x); top: 100%; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: 8px 16px; align-items: stretch;
  background: var(--white); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow);
  padding: 20px; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.nav__has--mega:hover .mega, .nav__has--mega:focus-within .mega, .nav__has--mega.open .mega {
  opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s;
}
.nav__has--mega.esc .mega { opacity: 0; visibility: hidden; }
.nav__has--mega:hover .nav__top svg, .nav__has--mega.open .nav__top svg { transform: rotate(180deg); }
.mega__list { grid-column: 1 / 3; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px 16px; }
.mega__list li { display: flex; }
.nav .mega__item { display: flex; flex: 1; align-items: center; gap: 18px; padding: 10px 14px; border-radius: var(--radius-sm); font: inherit; color: inherit; }
.nav .mega__item:hover, .nav .mega__item:focus-visible, .nav .mega__item[aria-current="page"] { background: var(--cream); color: inherit; }
.mega__img { width: 84px; height: 84px; flex: none; border-radius: var(--radius-sm); object-fit: cover; }
.mega__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__name { font: 700 19px/1.3 var(--serif); color: var(--brown-900); }
.mega__line { font: 400 16px/1.4 var(--serif); color: var(--ink-soft); }
.mega__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--brown-900); color: var(--cream); border-radius: var(--radius-sm); padding: 20px; }
.mega__tag { margin: 0; background: var(--tan); color: var(--brown-900); font: 700 11px/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding: 7px 12px; border-radius: 999px; }
.mega__lead { margin: 0 0 4px; font: 400 17px/1.4 var(--serif); color: var(--white); }
/* .nav a strips backgrounds and darkens the current page's link: the card's buttons set both. */
.nav .mega__all, .nav .mega__call { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0;
  padding: 11px 14px; border-radius: 100px; font: 700 16px/1.2 var(--serif); text-align: center; text-decoration: none; }
.nav .mega__all, .nav .mega__all[aria-current="page"] { margin-top: auto; background: var(--tan); color: var(--brown-900); }
.nav .mega__all:hover { background: var(--peach); color: var(--brown-900); }
.nav .mega__call { background: transparent; color: var(--tan); border: 1px solid var(--tan); }
.nav .mega__call:hover { background: var(--tan); color: var(--brown-900); }
.hdr__cta { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.hdr__tel { display: inline-flex; align-items: center; gap: 7px; color: var(--brown-600); font-weight: 600; font-size: 19px; line-height: 30px; text-decoration: none; }
/* The live site's icon: a white handset in a brown circle. */
.hdr__tel .ico { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--brown-500); display: inline-flex; align-items: center; justify-content: center; }
.hdr__tel .ico svg { width: 14px; height: 14px; fill: var(--white); }
.hdr__cta .btn { min-height: 0; padding: 19px 42px; font-size: 22px; line-height: 22px; }   /* 193 x 62 with the border, as live */
.hdr__burger { display: none; justify-content: flex-end; background: none; border: 0; padding: 0; cursor: pointer; color: var(--brown-600); }
.hdr__burger svg { width: auto; height: 50px; fill: currentColor; }

/* the phone drawer */
.drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; transition: visibility 0s .25s; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 88vw); background: var(--cream);
  transform: translateX(100%); transition: transform .25s; overflow-y: auto; padding: 24px;
}
.drawer.open, .drawer:target { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.drawer.open .drawer__scrim, .drawer:target .drawer__scrim { opacity: 1; }
.drawer.open .drawer__panel, .drawer:target .drawer__panel { transform: none; }
.drawer__close { background: none; border: 0; padding: 6px; float: right; cursor: pointer; color: var(--brown-900); }
.drawer__close svg { width: 28px; height: 28px; }
.drawer ul { list-style: none; margin: 48px 0 24px; padding: 0; clear: both; }
.drawer li a { display: block; padding: 12px 0; font-size: 20px; color: var(--brown-900); text-decoration: none; border-bottom: 1px solid var(--tan); }
.drawer li ul { margin: 0 0 0 16px; }
.drawer li ul a { font-size: 17px; }
.drawer .btn { width: 100%; margin-top: 12px; }

@media (max-width: 1100px) {
  .nav, .hdr__cta { display: none; }
  .hdr__burger { display: inline-flex; }
  /* The live tablet header: 180px logo, the bars at 50px; 77px tall at 1024, 73 at 820. */
  .hdr .wrap { display: flex; justify-content: space-between; min-height: calc(57px + 1.96vw); padding-top: 7px; padding-bottom: 7px; }
  .hdr__logo img { width: 180px; }
}
@media (max-width: 1024px) {
  .topbar .wrap { min-height: calc(39px + 1.47vw); }   /* 54px at 1024, 51 at 820 */
  .topbar__tag { font-size: 20px; }
  .topbar__login { font-size: 12px; }
}
@media (max-width: 767px) {
  .topbar .wrap { grid-template-columns: 1fr; justify-items: center; padding-top: 13px; padding-bottom: 14px; gap: 14px; }
  .topbar__social { gap: 4px; }
  .topbar__social a { width: 24px; height: 24px; }
  .topbar__social svg { height: 24px; }
  .topbar__social a:first-child svg { height: 17px; }
  .topbar__tag { font-size: 17px; }
  .topbar__login { justify-self: center; font-size: 16px; }
  .hdr .wrap { min-height: 59px; }
  .hdr__logo img { width: 150px; }
  .hdr__burger svg { height: 35px; }
}
/* Tablet and phone: the header stays at the top as the page scrolls, and once it has stuck
   (site.js adds .is-small) the logo and the band shrink so it takes less of a small screen. */
@media (max-width: 1100px) {
  .hdr .wrap, .hdr__logo img, .hdr__burger svg { transition: min-height .25s ease, padding .25s ease, width .25s ease, height .25s ease; }
  .hdr.is-small { box-shadow: 0 2px 10px rgba(59, 33, 16, .12); }
  .hdr.is-small .wrap { min-height: 60px; padding-top: 5px; padding-bottom: 5px; }
  .hdr.is-small .hdr__logo img { width: 130px; }
  .hdr.is-small .hdr__burger svg { height: 38px; }
}
@media (max-width: 767px) {
  .hdr.is-small .wrap { min-height: 50px; }
  .hdr.is-small .hdr__logo img { width: 115px; }
  .hdr.is-small .hdr__burger svg { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr .wrap, .hdr__logo img, .hdr__burger svg { transition: none; }
}

/* ------------------------------------------------------------ home hero */
/* Live's hero is 90% of the screen's height. The soft panel behind the headline is part of the
   collage photo itself, so nothing is laid over it; a phone gets live's own photo under a wash. */
.hero { position: relative; min-height: 90vh; display: flex; align-items: center; overflow: hidden; background: var(--wash); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .wrap { position: relative; z-index: 1; }
.hero__eyebrow { font: 600 36px/1.2 var(--script); color: var(--brown-900); margin-bottom: 20px; }
.hero h1 { font: 400 var(--fs-h1)/1.2 var(--serif); color: var(--brown-800); max-width: 880px; }
@media (max-width: 767px) { .hero h1 { font-size: 42px; } }
.hero h1 span { display: block; color: var(--brown-900); }
.hero .btns { justify-content: flex-start; margin-top: 30px; }
@media (max-width: 767px) {
  .hero__img { object-position: -280px 0; }
  .hero::after { content: ""; position: absolute; inset: 0; background: var(--wash); opacity: .7; }
  .hero__eyebrow { font-size: 21px; }
  .hero .btn { font-size: 16px; padding: 22px 30px; }
}

/* ------------------------------------------------------- page banners */
/* Live's banners are half the screen's height (Contact 60%). Above 1024px each photo sits at
   live's own offset from its top-left corner (--p); narrower, at the corner itself (--pt). */
.banner { position: relative; min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--brown-900); }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--p, 50% 50%); }
@media (max-width: 1024px) { .banner__img { object-position: var(--pt, 0 0); } }
.banner > .banner__tile { position: absolute; inset: 0; z-index: 0; padding: 0; background: center / auto 100% repeat-x; }
.banner::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade, .6); }
.banner > div { position: relative; z-index: 1; padding: 40px var(--gutter); }
.banner__t { font: 400 var(--fs-h1)/1.2 var(--serif); color: var(--tan); margin: 0; }
.crumbs { margin-top: 20px; font-size: 18px; color: var(--white); }
.crumbs a { color: var(--white); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-current] { color: #D7A86E; }
.crumbs .sep { margin: 0 10px; opacity: .8; }
.banner--plain { min-height: 288px; }
.banner--plain::after { display: none; }
.banner--plain .banner__t { font: 500 40px/1.2 var(--script); color: var(--white); }
/* Live's own banner sizes: FAQs 80px on a desktop, a service 55px everywhere, and on a phone
   Services 80px and Contact 60px. */
/* Contact's photo is a face: the title sits below it, never across it. */
.banner--contact { min-height: 60vh; align-items: flex-end; }
.banner--faq .banner__t { font-size: 80px; }
/* A service page's photo fills the band edge to edge, not centered with grey beside it as on
   live (the user's call, 5 Nov 2026), pinned at its people's faces (SVC_FOCUS). */
.banner--svc .banner__t { font-size: 55px; }
@media (max-width: 767px) {
  .banner--plain { min-height: 200px; }
  .banner__t { color: #E1D4BA; }
  .banner--plain .banner__t { color: var(--white); }
  .banner--faq .banner__t { font-size: var(--fs-h1); }
  .banner--services .banner__t { font-size: 80px; }
  .banner--contact .banner__t { font-size: 60px; }
}

/* --------------------------------------------------------- client logos */
.clients { padding: 50px 0 61px; }
@media (max-width: 767px) { .clients { padding: 40px 0; } }
.logos { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos__track { display: flex; gap: 40px; width: max-content; animation: logos 70s linear infinite; }
.logos:hover .logos__track, .logos.is-paused .logos__track { animation-play-state: paused; }
.clients { position: relative; }
.logos-pause { position: absolute; right: 20px; bottom: 12px; z-index: 1; padding: 8px 16px; border: 0; border-radius: 100px; background: var(--brown-900); color: var(--white); font: 400 16px/1.2 var(--serif); cursor: pointer; }
.logos-pause:not(:focus-visible):not([aria-pressed="true"]) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logos li { list-style: none; flex: 0 0 auto; width: 190px; height: 150px; display: flex; align-items: center; justify-content: center; }
.logos img { max-height: 140px; width: auto; object-fit: contain; }
@keyframes logos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .logos__track [aria-hidden="true"] { display: none; }
}
.logos__track { margin: 0; padding: 0; }

/* ------------------------------------------------------- two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.split--center { align-items: center; }
.split__photo { border-radius: var(--radius); overflow: hidden; }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }
/* Side by side, the photo stays in view while its column's list scrolls past (the home
   services and every FAQ section), as the service pages' photos do. Not a centered split. */
@media (min-width: 901px) { .split:not(.split--center) > .split__photo { position: sticky; top: calc(var(--hdr, 0px) + 30px); } }

/* ------------------------------------------------- accordions (details) */
.acc { list-style: none; margin: 0; padding: 0; }
.acc details { border-bottom: 1px solid transparent; }
.acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 25px 20px; font: 500 var(--fs-acc)/1 var(--serif); color: var(--ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {   /* the round "ff" mark the live site uses as its toggle */
  content: ""; flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: url("/assets/img/ui/ff-mark.png") center/cover; transition: transform .25s;
}
.acc details[open] summary::after { transform: rotate(90deg); }
.acc summary:hover { color: var(--brown-600); }
.acc__body { padding: 0 20px 25px; }
.acc--faq summary { font-size: var(--fs-faq); line-height: 30px; }
.acc--svc .acc__body { display: grid; grid-template-columns: 1fr 160px; gap: 24px; align-items: start; font-size: 18px; }
.acc--svc .acc__body img { border-radius: var(--radius-sm); aspect-ratio: 3/4; object-fit: cover; }
@media (max-width: 767px) {
  .acc summary { padding: 18px 8px; line-height: 1.5; }
  .acc--faq summary { line-height: 1.6; }
  .acc__body { padding: 0 8px 18px; }
  .acc--svc .acc__body { grid-template-columns: 1fr; }
  .acc--svc .acc__body img { max-width: 220px; }
}

/* --------------------------------------------------------- home: about */
.about-home { display: grid; grid-template-columns: 50% 1fr; gap: 60px; align-items: center; }   /* 576px at 1280; live's columns are shares */
.about-home > *, .split > *, .svc > *, .qa-page > *, .about-intro > * { min-width: 0; }
.about-home__main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 576/507; }
.about-home__main img { width: 100%; height: 100%; object-fit: cover; }
/* The photos share the main photo's width in equal columns, so none is cut off at the edge. */
.about-home__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.about-home__thumbs button { aspect-ratio: 160/115; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; opacity: .75; }
.about-home__thumbs button[aria-pressed="true"], .about-home__thumbs button:hover { opacity: 1; }
.about-home__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.about-home__text { text-align: center; max-width: 470px; justify-self: center; }
.about-home__text .icon { width: 150px; margin: 0 auto 20px; }
.about-home__text p:not(.sign) { font-size: 20px; }
.about-home__text .btn { font-size: min(19px, var(--fs-btn)); }
@media (max-width: 767px) { .about-home__text p:not(.sign) { font-size: 18px; line-height: 27px; } }
.about-home__text .sign { margin: 24px 0 30px; }
@media (max-width: 1024px) { .about-home { grid-template-columns: 1fr; } .about-home__main, .about-home__thumbs { max-width: 576px; margin-left: auto; margin-right: auto; } }
@media (max-width: 600px) { .about-home__thumbs { gap: 10px; margin-top: 12px; } .about-home__thumbs button { border-radius: 12px; } }

/* -------------------------------------------------------------- reviews */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.reviews-head .sh { margin-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; margin: 0 0 40px; padding: 0; list-style: none; }
.chip {
  background: var(--tan); color: var(--brown-900); border: 0; border-radius: 100px;
  padding: 12px 24px; font: 400 20px/1 var(--serif); cursor: pointer;
}
.chip[aria-pressed="true"], .chip:hover { background: var(--brown-600); color: var(--white); }
.chips--text .chip { background: none; color: var(--brown-600); font-weight: 700; padding: 6px 4px; font-size: 22px; }
@media (max-width: 767px) { .chips--text .chip { font-size: 20px; line-height: 1; } .rev__text { font-size: 18px; line-height: 27px; } .rev__name { font-size: 14px; } .rev__date { font-size: 12px; } }
.chips--text .chip[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 6px; background: none; color: var(--brown-600); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.rev {
  background: var(--white); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.12);
  padding: 40px; display: flex; flex-direction: column; gap: 20px;
}
.rev__top { display: flex; justify-content: space-between; align-items: center; }
.rev__stars { display: flex; gap: 6px; color: var(--star); }
.rev__stars svg { width: 25px; height: 25px; fill: currentColor; }
.rev__src svg, .rev__src img { width: 36px; height: 36px; }
.rev__text { font-style: italic; font-size: 20px; line-height: 30px; color: #2C2C2C; flex: 1; }
.rev__name { font-weight: 700; font-size: 20px; margin: 0; line-height: 1.2; }
.rev__date { font-size: 18px; margin: 0; line-height: 1.2; }
.rev__logo { height: 80px; width: auto; max-width: 140px; object-fit: contain; }
.rev__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
/* A long review: its first six lines, then "Read more" (site.js measures which are long). */
.rev__text.is-clamped { flex: 0 0 auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.rev__more { align-self: flex-start; margin-top: -8px; margin-bottom: auto; padding: 0; border: 0; background: none; color: var(--brown-600); font: inherit; font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rev__more:hover, .rev__more:focus-visible { color: var(--brown-900); }
/* The whole review in a popup. */
.rev-modal { width: min(620px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: var(--radius); background: var(--white); box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.rev-modal::backdrop { background: rgba(0,0,0,.6); }
.rev-modal__body { max-height: min(88vh, 900px); overflow-y: auto; }
.rev-modal .rev--full { box-shadow: none; border-radius: 0; padding: 66px 40px 40px; }   /* the stars clear the close button */
.rev-modal .rev--full .rev__text { flex: 0 0 auto; }
.rev-modal__close { position: absolute; top: 10px; right: 12px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tan); color: var(--brown-900); font-size: 28px; line-height: 1; cursor: pointer; }
.rev-modal__close:hover, .rev-modal__close:focus-visible { background: var(--brown-600); color: var(--white); }
@media (max-width: 600px) { .rev-modal .rev--full { padding: 62px 24px 28px; } }
.rev[hidden] { display: none; }
@media (max-width: 900px) { .rev-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .rev { padding: 30px; } }
/* The home page's reviews: three at a time with arrows (one on a phone), as live. */
.rev-slider { position: relative; }
.rev-grid--slide { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 4px 12px; }
.rev-grid--slide::-webkit-scrollbar { display: none; }
.rev-grid--slide > .rev { scroll-snap-align: start; }
.rev-slider__nav { position: absolute; top: 50%; z-index: 1; width: 40px; height: 40px; transform: translateY(-50%); border: 0; border-radius: 50%; background: var(--brown-600); color: var(--white); font: 400 28px/1 var(--serif); cursor: pointer; }
.rev-slider__nav:hover, .rev-slider__nav:focus-visible { background: var(--brown-900); }
.rev-slider__nav--prev { left: -48px; }
.rev-slider__nav--next { right: -48px; }
@media (max-width: 900px) {
  .rev-grid--slide { grid-template-columns: none; grid-auto-columns: 100%; max-width: none; }
  .rev-slider__nav--prev { left: -14px; }
  .rev-slider__nav--next { right: -14px; }
}

/* --------------------------------------------------------- instagram */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ig-grid a { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 1; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ig-grid a:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* -------------------------------------------------- service area + form */
.area { padding-block: 84px; }
.area .sh { font-size: 68px; }
@media (max-width: 767px) { .area .sh { font-size: 35px; } }
.area h3 { font: 500 var(--fs-eyebrow)/1.2 var(--serif); margin: -20px 0 50px; }
.contact-card {
  display: grid; grid-template-columns: 1fr 1fr; max-width: 100%; margin: 0 auto;   /* live: the full page width up to 1024 ... */
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
@media (min-width: 1025px) { .contact-card { max-width: min(81vw, 1440px); } }   /* ... then 1036px at 1280, 1440 at 1920 */
.contact-card__map { background: var(--sand); display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.contact-card__map img { width: 90%; margin-right: -12%; }
.contact-card__form { background: var(--tan-soft); padding: 40px; text-align: center; }
.contact-card__form .sh { font-weight: 700; font-size: 61px; margin-bottom: 20px; }
.contact-card__form > p { font-style: italic; margin-bottom: 30px; }
@media (max-width: 900px) {
  .contact-card { grid-template-columns: 1fr; }
  .contact-card__map { justify-content: center; padding: 30px 0; }
  .contact-card__map img { width: 85%; margin: 0; }
  .contact-card__form { padding: 30px 20px; }
  .contact-card__form .sh { font-size: 35px; }
  .contact-card__form > p { font-size: 16px; line-height: 30px; }
}

/* ---------------------------------------------------------------- forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; text-align: left; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; }
.form input, .form textarea, .form select {
  width: 100%; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--field);
  padding: 10px 15px; font-size: 20px; line-height: 28px; color: var(--ink-soft); font-style: italic;
}
.form input::placeholder, .form textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.form input:focus, .form textarea:focus { border-color: var(--brown-600); }
.form textarea { min-height: 104px; resize: vertical; }
.form .btn { justify-self: center; grid-column: 1 / -1; margin-top: 20px; }
.form .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.formmsg { grid-column: 1 / -1; font-size: 17px; padding: 12px 16px; border-radius: var(--radius-sm); text-align: center; margin: 0; }
.formmsg.ok { background: #E7F2E1; color: #2D5016; }
.formmsg.err { background: #FBE9E7; color: #8A1F11; }
.form--square input, .form--square textarea { border-radius: 0; font-size: 18px; border-color: var(--white); }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- footer */
/* Live's footer, measured at 1920, 1280, 820 and 390: four columns of 30/20/25/25% with 70px
   between them, the logo 45% of the first; two columns on a tablet; one, left-aligned, on a phone. */
.ftr { background: var(--sand); padding: 80px 0; }
.ftr__grid { display: grid; grid-template-columns: 30fr 20fr 25fr 25fr; gap: 70px; }
.ftr__brand { text-align: center; font-size: 18px; line-height: 30px; }
.ftr__brand img { width: 45%; margin: 0 auto 20px; }
.ftr__brand .btn { margin-top: 20px; min-height: 62px; padding: 0 30px; font-size: 20px; }
.ftr h2 { font: 500 22px/26px var(--serif); text-transform: uppercase; color: var(--brown-600); margin-bottom: 25px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 25px; }
.ftr ul li { line-height: 26px; }
.ftr ul a { text-decoration: none; font-size: 20px; line-height: 26px; }
.ftr ul a:hover, .ftr ul a[aria-current="page"] { color: var(--brown-600); }
.ftr .ftr__contact { gap: 22px; }
.ftr__contact li { display: flex; align-items: center; gap: 8px; }
.ftr__contact .ico { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--brown-400); display: inline-flex; align-items: center; justify-content: center; }
.ftr__contact .ico svg { width: 16px; height: 16px; fill: var(--white); }
.ftr__map { display: block; margin-top: 22px; border-radius: 20px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.14); aspect-ratio: 235/200; background: var(--white); }
.ftr__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.ftr__social { display: flex; gap: 15px; margin-top: 38px; }
.ftr__social a { color: var(--brown-400); display: inline-flex; }
.ftr__social svg { width: 35px; height: 35px; fill: currentColor; }
.ftr__social a:hover { color: var(--brown-600); }
/* The copyright bar: one centered line, the site's name in tan, the legal links divided by rules. */
.copy { background: var(--black); color: var(--white); font-size: 20px; line-height: 30px; }
.copy .wrap { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-height: 99px; padding-top: 16px; padding-bottom: 16px; text-align: center; }
.copy p { margin: 0; }
.copy__site { color: var(--tan); }
.copy ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; font-size: 20px; }
.copy li + li { border-left: 1px solid currentColor; }
.copy li { padding: 0 6px; line-height: 30px; }
.copy li:first-child { padding-left: 0; }
.copy a { color: var(--white); text-decoration: none; }
.copy a:hover { text-decoration: underline; }
@media (max-width: 1024px) {
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 50px 10px; }
  .ftr__grid > :last-child { align-self: center; }
  .ftr__brand img { width: 150px; }
  .copy, .copy ul { font-size: 16px; }
}
@media (max-width: 767px) {
  .ftr { padding: 40px 0 60px; }
  .ftr__grid { grid-template-columns: 1fr; gap: 50px; }
  .ftr__grid > :last-child { align-self: auto; }
  .ftr__brand { text-align: left; }
  .ftr__brand img { width: 158px; }
  .ftr__brand .btn { display: flex; width: max-content; margin: 20px auto 0; min-height: 58px; font-size: 16px; }
  .ftr h2 { margin-bottom: 15px; }
  .ftr ul { gap: 15px; }
  .ftr ul li, .ftr ul a { font-size: 16px; line-height: 21px; }
  .ftr .ftr__contact { gap: 22px; }
  .ftr .ftr__contact a { font-size: 17px; line-height: 22px; }
  .ftr__map { max-width: 320px; }
  .ftr__social { margin-top: 22px; }
  .copy, .copy ul { font-size: 13px; line-height: 18px; }
  .copy .wrap { min-height: 97px; gap: 6px 14px; }
  .copy li { line-height: 18px; }
}

/* ------------------------------------------------------------ about page */
.about-intro { display: grid; grid-template-columns: 47.83% 1fr; gap: 20px; align-items: start; }   /* 551px at 1280, as live */
.about-intro__gal { position: sticky; top: calc(var(--hdr, 0px) + 30px); }
.about-intro__main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 560/390; }
.about-intro__main img { width: 100%; height: 100%; object-fit: cover; }
.about-intro__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.about-intro__thumbs button { padding: 0; border: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; opacity: .8; }
.about-intro__thumbs button[aria-pressed="true"], .about-intro__thumbs button:hover { opacity: 1; }
.about-intro__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.about-copy .eyebrow, .about-copy .sh { text-align: center; }
.about-copy .sh { margin: 50px 0 24px; }
.about-copy .sh:first-of-type { margin-top: 0; }
.about-copy { font-size: 22px; line-height: 30px; }
.about-copy .eyebrow { font-size: 32px; }
@media (min-width: 768px) { .about-copy .sh, .founder__text .sh, .team-head .sh, .team-lead h3 { font-size: 80px; } }
@media (max-width: 767px) { .about-copy { font-size: 18px; } .about-copy .eyebrow { font-size: var(--fs-eyebrow); } }
.philo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; font-size: 20px; line-height: 30px; }
.philo svg { width: 48px; height: 48px; stroke: var(--brown-600); fill: none; stroke-width: 1.8; margin: 0 auto 10px; display: block; }
.philo h3 { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
@media (max-width: 767px) { .philo { font-size: 17px; } }
@media (max-width: 1024px) { .about-intro { grid-template-columns: 1fr; } .about-intro__gal { position: static; max-width: 560px; margin: 0 auto; } }
@media (max-width: 600px) { .philo { grid-template-columns: 1fr; } }

.founder { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.founder__text { text-align: center; font-size: 18px; line-height: 34px; max-width: 520px; justify-self: center; }
.founder__text .sign { margin-top: 20px; }
.round { border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.round img { width: 100%; height: 100%; object-fit: cover; }
.founder .round { width: 404px; max-width: 100%; justify-self: start; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } .founder .round { justify-self: center; width: 300px; } }

.team-intro { max-width: 760px; margin: 0 auto 60px; text-align: center; font-size: 21px; }
@media (max-width: 767px) { .team-intro { font-size: 18px; line-height: 30px; } }
.team-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 100px; }
.team-lead .round { width: 284px; justify-self: center; }
.team-lead h3 { font: 500 70px/1.2 var(--script); color: var(--brown-600); }
.team-role { font: 500 25px/1.2 var(--serif); text-transform: uppercase; margin: 16px 0 24px; }
.team-lead__bio { font-size: 18px; line-height: 30px; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; text-align: center; }
.team-card .round { width: 284px; margin: 0 auto 20px; }
.team-card h3 { font: 500 25px/1.2 var(--script); color: var(--brown-600); }
.team-card .team-role { font-size: 21px; margin: 10px 0 20px; }
.team-card__bio { font-size: 17px; line-height: 30px; max-width: 470px; margin: 0 auto; }
@media (max-width: 900px) {
  .team-lead, .team-grid { grid-template-columns: 1fr; }
  .team-lead { text-align: center; }
  .team-lead h3 { font-size: 46px; }
}
@media (max-width: 767px) { .team-lead h3 { font-size: 35px; } .team-lead .team-role { font-size: 17px; } }

/* --------------------------------------------------------- services page */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 40px; }
.svc-card { display: flex; flex-direction: column; }
/* 380px tall at every width, as live: a taller card would only zoom further into the photo. */
.svc-card__img { border-radius: var(--radius-sm); overflow: hidden; height: 380px; margin-bottom: 18px; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.svc-card:hover .svc-card__img img { transform: scale(1.03); }
.svc-card h2 { font: 400 28px/1.3 var(--serif); color: var(--brown-600); margin-bottom: 18px; }
.svc-card h2 a { text-decoration: none; }
.svc-card__sum { font-size: 20px; line-height: 30px; flex: 1; }
.svc-card .btn { align-self: flex-start; margin-top: 24px; min-height: 0; padding: 18px 40px; font-size: var(--fs-btn); color: var(--ink); }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .svc-grid { gap: 30px 16px; } .svc-card h2 { font-size: 23px; line-height: 1.2; } .svc-card__sum { font-size: 16px; line-height: 24px; } .svc-card .btn { padding: 14px 22px; } }   /* two columns on a phone, as live */

/* ----------------------------------------------------- one service page */
.svc { display: grid; grid-template-columns: 49% 1fr; gap: 22px; align-items: start; }   /* text starts 650px in at 1280 */
/* Live crops every service photo to the same tall shape, whatever the image's own shape. */
.svc__photo { width: min(100%, 481px); aspect-ratio: 481/600; justify-self: center; border-radius: 30px; overflow: hidden; position: sticky; top: calc(var(--hdr, 0px) + 30px); }
.svc__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc__body h1 { font: 500 var(--fs-sh)/1.2 var(--script); color: var(--brown-600); margin-bottom: 20px; }
.svc__body h2 { font: 500 34px/1.3 var(--script); color: var(--ink); margin-bottom: 20px; }
.svc__body h2 strong { font-weight: 500; }
.svc__body p { font-size: 19px; line-height: 30px; margin-bottom: 14px; }
@media (max-width: 1024px) { .svc { grid-template-columns: 1fr; gap: 40px; } .svc__photo { position: static; } }
@media (max-width: 767px) { .svc__photo { width: 275px; aspect-ratio: 275/500; } }
@media (max-width: 600px) { .svc__body h2 { font-size: 26px; } }
/* A lead-in heading that reads as the paragraph's bold first words */
.svc__body .svc__para { font-size: 19px; line-height: 30px; margin-bottom: 14px; }
/* Live's service pages set their buttons smaller, and on a phone their FAQs larger. */
.svc-sec .btn, .svc-sec ~ .sec:not(.area) .btn { font-size: 18px; }
@media (max-width: 767px) { .svc-sec ~ .sec:not(.area) .sh { font-size: 60px; } .svc-sec ~ .sec:not(.area) .acc--faq summary { font-size: 27px; line-height: 30px; } }
.svc__body .svc__para h2 { display: inline; font: inherit; font-weight: bolder; color: inherit; margin: 0; }

/* -------------------------------------------------------------- faq page */
.qa-page { display: grid; grid-template-columns: 28.47% 1fr; gap: 80px; align-items: start; }   /* 328px at 1280 */
.ask { background: var(--tan-soft); padding: 20px; text-align: center; position: sticky; top: calc(var(--hdr, 0px) + 30px); }
.ask h2 { font: 500 24px/1.2 var(--serif); text-transform: uppercase; color: var(--brown-900); margin-bottom: 10px; }
@media (max-width: 767px) { .ask h2 { font-size: 20px; } }
.ask > p { font-size: 18px; line-height: 30px; margin-bottom: 20px; }
.ask .form { grid-template-columns: 1fr; gap: 10px; }
.ask .btn { font-size: var(--fs-btn); padding: 20px 22px; }
.qa-page .acc details[hidden] { display: none; }
.qa-page .acc--faq summary { font-size: var(--fs-faq); }
@media (max-width: 767px) { .acc--faq summary { line-height: 30px; } }
@media (max-width: 900px) { .qa-page { grid-template-columns: 1fr; gap: 40px; } .ask { position: static; max-width: 420px; margin: 0 auto; order: 2; } }

/* ----------------------------------------------------------- gallery */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gal a { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 1; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gal a:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .gal { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
.lb::backdrop { background: rgba(0,0,0,.88); }
.lb img { max-width: 96vw; max-height: 86vh; width: auto; margin: 0 auto; border-radius: 8px; }
.lb__bar { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.lb button { background: var(--white); border: 0; border-radius: 100px; padding: 10px 20px; cursor: pointer; font-size: 16px; }

/* ------------------------------------------------------- contact page */
.reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; align-items: end; padding-block: 22px; }
.reach a { text-decoration: none; }
.reach svg { width: 110px; height: 110px; fill: var(--brown-600); margin: 0 auto 30px; display: block; }
.reach img { width: 185px; margin: 0 auto 20px; }
.reach h2 { font: 500 60px/1.2 var(--script); color: var(--brown-600); }
.reach p { font-size: 22px; }
@media (max-width: 767px) { .reach { grid-template-columns: 1fr; gap: 50px; } .reach h2 { font-size: 50px; } }

/* --------------------------------------------------------- legal + misc */
.prose { font-size: 20px; line-height: 1.5; }
.prose h2 { font: 700 32px/1.2 var(--script); margin: 40px 0 16px; }
.prose h3 { font-size: 28px; font-weight: 400; margin: 30px 0 12px; }
.prose h4 { font-size: 24px; font-weight: 400; margin: 24px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--brown-600); }
.sitemap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.sitemap h2 { font: 500 52px/1.2 var(--script); color: var(--brown-900); margin-bottom: 30px; }
.sitemap ul { list-style: none; margin: 0; padding: 0 0 0 20px; display: grid; gap: 25px; }
.sitemap a { color: var(--brown-600); text-decoration: none; font-size: 26px; line-height: 1.3; }
.sitemap a:hover { text-decoration: underline; }
@media (max-width: 767px) { .sitemap { grid-template-columns: 1fr; } }

/* write a review */
.wr { max-width: 640px; margin: 0 auto; text-align: center; }
.wr__logo { width: 200px; margin: 0 auto 30px; }
.wr h1 { font: 500 34px/1.3 var(--script); margin-bottom: 30px; }
.stars-pick { display: inline-flex; gap: 8px; border: 0; padding: 0; margin: 0 0 30px; }
.stars-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-pick label { cursor: pointer; color: #8A8A8A; }
.stars-pick svg { width: 58px; height: 58px; fill: currentColor; }
.stars-pick label:hover, .stars-pick label:has(~ label:hover), .stars-pick input:checked + label, .stars-pick label:has(~ input:checked) { color: var(--star); }
.stars-pick input:focus-visible + label { outline: 3px solid var(--brown-600); outline-offset: 2px; }
.wr-panel { background: var(--cream); border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: var(--shadow); }
.wr-panel[hidden] { display: none; }
.wr-panel h2 { font: 500 40px/1.2 var(--script); color: var(--brown-600); margin-bottom: 16px; }
.wr-sites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px; }
.wr-sites a { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; background: var(--white); border-radius: 20px; text-decoration: none; font-size: 20px; color: var(--brown-900); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wr-sites svg { width: 44px; height: 44px; fill: var(--brown-600); }
.wr-sites a:hover { background: var(--tan); }
.empty { text-align: center; padding: 20px 0; }
.empty .btn { border-radius: 0; margin-bottom: 30px; }

/* Live's closing line under the stars on Write a Review, and the photo beside Site Credits. */
.wr__thanks { margin: 32px 0 0; text-align: center; font-size: 28px; line-height: 1.2; }
@media (max-width: 767px) { .wr__thanks { font-size: 20px; line-height: 29px; } }
.thanks__t { font-size: 40px; color: var(--ink); margin-bottom: 24px; }
.thanks .btn { font-size: 22px; }
.credits { display: grid; gap: 32px; }
.credits__img img { width: 100%; height: auto; display: block; }
@media (min-width: 768px) { .credits { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start; } }