/* ==========================================================================
   Akil Wilson — shared styles
   Used by every page. Page-only styles live in a <style> block on that page.

   Contents
   1. Colours and basics
   2. Page layout
   3. Header, menu button, phone menu, logo
   4. Footer, phone pill, contact pop-up
   5. Buttons and links
   6. Form fields and dropdowns
   7. Animations
   ========================================================================== */


/* 1. Colours and basics ---------------------------------------------------- */

:root {
  --charcoal: #232323;   /* main background */
  --panel: #1B1B1B;      /* slightly darker panels */
  --white: #FFFFFF;
  --grey: #B8B8B8;       /* the "selected page" grey, also used for links */
  --mid: #8A8A8A;        /* small labels */
  --line: #4A4A4A;       /* thin dividers on dark backgrounds */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* These two swap on light pages (see body.light below). */
  --bg: var(--charcoal);
  --fg: var(--white);
}

body.light {
  --bg: #F8F8F6;
  --fg: var(--charcoal);
  --panel: #EFEFED;
  --grey: #555555;
  --mid: #6E6E6E;
  --line: #DCDCD8;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; dynamic-range-limit: no-limit; }
h1, h2, h3, p { margin: 0; }

/* Links inside running text: grey, no underline, white on hover. */
p a:not([data-ul]) { color: var(--grey); transition: color .3s; }
p a:not([data-ul]):hover { color: var(--fg); }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Small grey label above headings, e.g. "PHOTO · 10 GENRES". */
.eyebrow {
  font-size: 13px; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey);
}

/* Big uppercase page heading with trailing horizontal line matching intro width. */
.page-title {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); width: 100%;
  font-size: clamp(28px, 3vw, 42px); font-weight: 300; line-height: 1.1;
  letter-spacing: .01em; text-transform: uppercase;
}
.page-title::after {
  content: ""; flex: 1 1 auto; min-width: 28px; height: 1px;
  background: currentColor; opacity: .34;
  transform: scaleY(0.5); transform-origin: center;
}
@media (max-width: 520px) { .page-title::after { display: none; } }


/* 2. Page layout ----------------------------------------------------------- */

/* Most pages leave a 60px strip on the left, under the MENU button. */
.page { padding-left: 60px; min-height: 100vh; }
main { padding-bottom: 72px; }

/* Heading row used at the top of most pages. */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 40px;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(20px, 2.5vw, 32px) 7px;
}
.page-head__text { flex: 0 1 620px; width: fit-content; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.page-head__intro { max-width: 620px; font-size: 18px; }


/* 3. Header, menu button, phone menu, logo -------------------------------- */

.site-header {
  position: relative; z-index: 1000;
  display: flex; align-items: flex-start;
  min-height: 60px; padding: 8px 124px 8px 76px;
  background: var(--bg); color: var(--fg);
}
.site-header.has-label { padding-right: clamp(124px, 24vw, 300px); }

.site-nav {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap;
  gap: 0 clamp(14px, 2.2vw, 32px);
  font-size: clamp(14px, 3.6vw, 17px); text-transform: uppercase;
}
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  /* underline that draws in from the left and leaves to the right */
  background: linear-gradient(currentColor, currentColor) 100% 78% / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
.site-nav a:hover { background-position-x: 0; background-size: 100% 1px; }
.site-nav a[aria-current="page"] { color: var(--grey); }
body.light .site-nav a[aria-current="page"] { color: var(--mid); }
.site-nav a[aria-current="page"]::before {
  content: "";
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Desktop: after scrolling, MENU drops this bar down from the top. */
.menu-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; min-height: 60px; padding: 8px 124px 8px 76px;
  background: var(--bg); color: var(--fg);
  transform: translateY(-110%); visibility: hidden;
  transition: transform .8s cubic-bezier(.77, 0, .18, 1), visibility .8s;
}
.menu-open .menu-bar { transform: none; visibility: visible; }

/* The square MENU button, top left. Hidden until you scroll on desktop. */
.menu-button {
  position: fixed; top: 0; left: 0; z-index: 1001;
  width: 60px; height: 60px; padding: 0; border: 0; border-radius: 0;
  background: var(--fg); color: var(--bg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateX(-60px);
  transition: opacity .3s, visibility .3s, transform .4s var(--ease);
}
.scrolled .menu-button { opacity: 1; visibility: visible; transform: none; }
.menu-button svg { display: block; }
.menu-button g {
  transform-box: view-box; transform-origin: 30px 30px;
  transition: transform .5s cubic-bezier(.65, 0, .25, 1), opacity .35s;
}
/* "MENU" letters shrink and turn into a thin X when the menu is open. */
.menu-button .icon-close { opacity: 0; transform: rotate(-90deg) scale(.2); }
.menu-open .menu-button .icon-menu { opacity: 0; transform: rotate(90deg) scale(.2); }
.menu-open .menu-button .icon-close { opacity: 1; transform: none; }

/* Phone: full-screen menu panel. */
.menu-panel { display: none; }

/* The logo, top right. While it sits over the header it is solid (white, or deep grey on light
   pages). As the header scrolls away from behind it, the part of the logo that is over the page
   content flips to inverted monochrome against whatever is behind it; site.js sets --solid-h,
   how much of the logo is still over the header, and the two layers are clipped to either side. */
:root {
  --glass-mask-logo: url(/img/aw-logo-mask.svg);
  --glass-mask-label: url(/img/weddings-mask.svg);
  --logo-solid: #fff;
}
body.light { --logo-solid: var(--charcoal); }

.logo {
  position: fixed; top: 6px; right: 16px; z-index: 1000;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px;
}
.logo-fx, .logo-label-fx {
  display: block;
  -webkit-backdrop-filter: grayscale(1) invert(1) contrast(60);
  backdrop-filter: grayscale(1) invert(1) contrast(60);
}
/* Inverted monochrome layer: only below the header line. Solid layer: only above it. */
.logo, .logo-label { --solid-h: 100px; }
.logo-fx {
  clip-path: inset(var(--solid-h) 0 0 0);
}
/* The WEDDINGS word has no inverted state: it is wiped away from the bottom up as the header
   scrolls off, and comes back the same way when you scroll back to the top. */
.logo-label-fx { clip-path: inset(100% 0 0 0); }
.logo-solid, .logo-label-solid {
  position: absolute; top: 50%; background: var(--logo-solid); pointer-events: none;
  clip-path: inset(0 0 calc(100% - var(--solid-h)) 0);
}
.logo-solid {
  left: 8px; width: 84px; height: 36px; margin-top: -18px;
  -webkit-mask: var(--glass-mask-logo) center / contain no-repeat; mask: var(--glass-mask-logo) center / contain no-repeat;
}
.logo-label-solid {
  left: 0; width: 158px; height: 31px; margin-top: -15.5px;
  -webkit-mask: var(--glass-mask-label) center / contain no-repeat; mask: var(--glass-mask-label) center / contain no-repeat;
  animation: slide-in-right 1.1s .3s var(--ease) both;
}
.logo-fx {
  width: 84px; height: 36px; transform: translateZ(0);
  -webkit-mask: var(--glass-mask-logo) center / contain no-repeat;
  mask: var(--glass-mask-logo) center / contain no-repeat;
}
/* Optional word next to the logo, e.g. WEDDINGS. */
.logo-label {
  position: fixed; top: 6px; right: 112px; z-index: 1000;
  display: inline-flex; align-items: center; min-height: 48px;
  overflow: hidden; pointer-events: none;
}
.logo-label-fx {
  width: 158px; height: 31px;
  -webkit-mask: var(--glass-mask-label) center / contain no-repeat;
  mask: var(--glass-mask-label) center / contain no-repeat;
  animation: slide-in-right 1.1s .3s var(--ease) both;
}
@media (max-width: 1100px) { .logo-label { display: none; } }

@media (max-width: 700px) {
  .site-nav, .menu-bar { display: none; }
  /* MENU is always visible on phones. */
  .menu-button { opacity: 1; visibility: visible; transform: none; }

  .menu-panel {
    position: fixed; inset: 0; z-index: 999;
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: 96px 24px 32px; overflow-y: auto;
    background: var(--bg); color: var(--fg);
    opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  }
  .menu-open .menu-panel { opacity: 1; visibility: visible; }
}
.menu-panel nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
body.light .menu-panel nav, body.light .menu-panel nav a { border-color: #D6D6D6; }
.menu-panel nav a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 30px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase;
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s, transform .6s var(--ease);
}
.menu-open .menu-panel nav a { opacity: 1; transform: none; }
.menu-panel nav a[aria-current="page"] { color: var(--grey); }
body.light .menu-panel nav a[aria-current="page"] { color: var(--mid); }
.menu-panel nav small { font-size: 13px; letter-spacing: .14em; color: var(--grey); }
.menu-panel__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--grey);
}
.menu-panel__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); }


/* 4. Footer, phone pill, contact pop-up ----------------------------------- */

.site-footer {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 24px; min-height: 64px; padding: 8px clamp(12px, 2vw, 24px) 8px 76px;
  background: var(--charcoal); color: var(--white);
  font-weight: 400; font-size: 13px;
}
.page > site-header { display: block; margin-left: -60px; }
.page > site-footer { display: block; margin-left: -60px; position: sticky; bottom: 0; z-index: 3; }

.breadcrumb {
  flex: 1 1 200px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  text-transform: uppercase; letter-spacing: .04em;
}
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb .sep, .breadcrumb [aria-current] { color: var(--grey); }

.review-badge-wrap { flex: 1 1 200px; display: flex; }
.review-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--grey); text-transform: uppercase; letter-spacing: .04em;
}
.review-badge .google { text-transform: none; font-weight: 500; letter-spacing: 0; }

.footer-copy {
  flex: 1 1 160px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 14px;
}
.footer-copy a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grey); }
.footer-copy a:hover { color: var(--white); }

/* Social icons: Instagram always shows; the others slide out on hover. */
.socials { flex: 1 1 140px; display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.socials__more {
  display: flex; gap: 4px; overflow: hidden;
  max-width: 0; opacity: 0; visibility: hidden;
  transition: max-width .45s var(--ease), opacity .3s, visibility .45s;
}
.socials.is-open .socials__more { max-width: 100px; opacity: 1; visibility: visible; }
.socials a { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Floating phone button, bottom left: a small round translucent button, the same
   look as the photo viewer's tools. On hover it opens into three round buttons
   (the number, email and WhatsApp). */
.phone-pill {
  position: absolute; left: 5px; bottom: calc(100% + 12px);
  height: 40px; display: flex; align-items: center; gap: 8px;
}
.phone-pill a {
  flex: none; height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 20px; color: var(--white);
  background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .25s, opacity .3s .05s, transform .3s var(--ease), visibility .4s;
}
.phone-pill a:hover { background: rgba(0, 0, 0, .55); }
.phone-pill a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.phone-pill .call { padding: 0; font-size: 15px; font-weight: 500; white-space: nowrap; }
.phone-pill .call span { max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; transition: max-width .45s var(--ease), margin .45s var(--ease), opacity .3s .08s; }
.phone-pill .extra { width: 40px; opacity: 0; visibility: hidden; transform: scale(.6); }
.phone-pill.is-open .call { padding: 0 14px 0 12px; }
.phone-pill.is-open .call span { max-width: 130px; margin-left: 8px; opacity: 1; }
.phone-pill.is-open .extra { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 700px) {
  /* One slim row on phones. Copyright and Client gallery move into the menu. */
  .site-footer { flex-wrap: nowrap; gap: 8px; min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
  .footer-copy { display: none; }
  .breadcrumb, .review-badge-wrap { flex: 1 1 auto; min-width: 0; }
  .breadcrumb { font-size: 12px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .review-badge { white-space: nowrap; font-size: 12px; letter-spacing: .02em; }
  .socials { flex: none; }
  .socials__more { max-width: 100px; opacity: 1; visibility: visible; }
  .socials a { width: 40px; height: 40px; }
}

/* Contact pop-up. */
.contact-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .65);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.contact-modal.is-open { opacity: 1; visibility: visible; }
.contact-modal__box {
  --bg: var(--white); --fg: var(--charcoal);
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 32px clamp(20px, 5vw, 32px); display: flex; flex-direction: column; gap: 18px;
  background: var(--white); color: var(--charcoal); font-weight: 400;
  transform: translateY(24px); transition: transform .4s var(--ease);
}
.contact-modal.is-open .contact-modal__box { transform: none; }
.contact-modal h2 { font-size: clamp(26px, 5vw, 34px); font-weight: 300; line-height: 1.15; }
.contact-modal__head { display: flex; flex-direction: column; gap: 6px; padding-right: 52px; }
.contact-modal__close {
  position: absolute; top: 0; right: 0; width: 52px; height: 52px;
}
.contact-modal__send { position: absolute; right: 0; bottom: 0; width: 64px; height: 64px; }
.contact-modal textarea { margin-right: 44px; }
.contact-modal [hidden] { display: none !important; }
.field-pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 6px 20px;
}


/* 5. Buttons and links ----------------------------------------------------- */

/* Underline link: text with a line that draws in from the left on hover
   and leaves to the right. Use data-ul on a link or button. */
[data-ul] {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0; border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; font-size: 15px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 100% calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
[data-ul]:hover, [data-ul]:focus-visible {
  outline: none; background-position-x: 0; background-size: 100% 1px;
}

/* Outline button that fills from the left on hover and leaves to the right. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent); border-radius: 0; background-color: transparent; color: var(--fg);
  font: inherit; font-size: 15px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  background-image: linear-gradient(var(--fg), var(--fg)); background-repeat: no-repeat;
  background-position: 100% 0; background-size: 0% 100%;
  transition: background-size .5s var(--ease), color .35s, border-color .35s;
}
.btn:hover, .btn:focus-visible { background-position: 0 0; background-size: 100% 100%; border-color: currentColor; color: var(--bg); outline: none; }
/* Solid version (white block on dark pages). */
.btn--solid { background-color: transparent; border-color: var(--fg); background-size: 100% 100%; background-position: 0 0; color: var(--bg); }
.btn--solid:hover, .btn--solid:focus-visible { background-position: 100% 0; background-size: 0% 100%; border-color: color-mix(in srgb, currentColor 32%, transparent); color: var(--fg); }

/* Square icon buttons (close, send). */
.square-btn {
  padding: 0; border: 1px solid var(--charcoal); border-radius: 0;
  background: var(--charcoal); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; transition: background-color .3s, color .3s;
}
.square-btn:hover { background: var(--white); color: var(--charcoal); }

/* Strip: a row of joined buttons with a sliding highlight block.
   Used for Call / WhatsApp / Email and the social icons. */
.strip {
  position: relative; display: flex; flex-wrap: nowrap; align-items: stretch;
  border-bottom: 1px solid currentColor;
}
.strip > a, .strip > button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: transparent; color: inherit;
  font: inherit; font-size: 14px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; transition: color .3s;
}
.strip--fill > a, .strip--fill > button { flex: 1 1 0; min-width: 0; padding: 0 10px; }
.strip svg { flex: none; }
.strip > a:hover, .strip > button:hover, .strip > a:focus-visible, .strip > button:focus-visible {
  color: var(--strip-bg, var(--white)); outline: none;
}
.strip__block {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; opacity: 0;
  background: currentColor; pointer-events: none;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .25s;
}
@media (max-width: 480px) {
  .strip--fill > a, .strip--fill > button { font-size: 12px; letter-spacing: .02em; gap: 5px; padding: 0 4px; }
}


/* 6. Form fields and dropdowns -------------------------------------------- */

/* Text fields: a grey line underneath, and a darker line draws across on hover/focus. */
.field {
  width: 100%; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid #9A9A9A; border-radius: 0;
  font: inherit; font-size: 16px; color: inherit; background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 100% 100%; background-size: 0 2px;
  transition: background-size .4s var(--ease);
}
.field:hover, .field:focus { background-position-x: 0; background-size: 100% 2px; outline: none; }
.field::placeholder { color: var(--mid); opacity: 1; }
textarea.field { padding-top: 12px; resize: vertical; }
select.field:has(option[value=""]:checked) { color: var(--mid); }

/* Big dropdown used on phones to pick a photo genre. */
.picker { display: none; flex-direction: column; gap: 6px; }
.picker label { font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.picker select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 52px; margin: 0; padding: 0 44px 0 0;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0; color: inherit; cursor: pointer;
  font: inherit; font-size: 20px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 4px center / 20px no-repeat;
}
.picker select:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.picker option { background: var(--bg); color: var(--fg); }
body.light .picker select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (max-width: 700px) { .picker { display: flex; } }


/* 7. Animations ------------------------------------------------------------ */

@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise-in-blur {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes sharpen {
  from { opacity: 0; filter: blur(14px); transform: scale(1.04); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes slide-in-right { from { transform: translateX(105%); opacity: 0; } to { transform: none; opacity: 1; } }

.rise-in { animation: rise-in .7s var(--ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Form: hidden trap field for robots, and the optional-updates tick box */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--mid); cursor: pointer; }
.consent input { width: 18px; height: 18px; accent-color: var(--charcoal); flex: none; }

/* One-time cookie notice: bottom-right, square corners, never shown again once answered */
.cookie-note {
  position: fixed; right: 20px; bottom: 20px; z-index: 90; max-width: 330px;
  background: var(--charcoal, #232323); color: var(--white, #fff);
  border: 1px solid rgba(255, 255, 255, .18); padding: 14px 16px;
  font-size: 13px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  animation: rise-in .35s var(--ease, ease) both;
}
.cookie-note p { margin: 0 0 12px; color: var(--grey, #B8B8B8); }
.cookie-note__actions { display: flex; gap: 8px; }
.cookie-note__btn {
  font: inherit; font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .35); background: transparent;
  color: #fff; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.cookie-note__btn:hover { border-color: #fff; }
.cookie-note__btn--accept { background: #fff; color: #232323; border-color: #fff; }
.cookie-note__btn--accept:hover { background: #e8e8e8; }
@media (max-width: 700px) {
  .cookie-note { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

/* Light-mode footer, floating buttons, and theme switcher */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; margin: 4px 0; border: 1px solid var(--line);
  background: transparent; color: var(--grey); font: inherit;
  font-size: 11.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: color .2s, border-color .2s, background-color .2s;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }

body.light .site-footer { background: #FFFFFF; color: var(--charcoal); border-top: 1px solid var(--line); }
body.light .footer-copy a:hover { color: var(--charcoal); }
body.light .phone-pill a {
  background: rgba(255, 255, 255, .86); color: var(--charcoal);
  border-color: rgba(35, 35, 35, .25);
}
body.light .phone-pill a:hover { background: #FFFFFF; border-color: var(--charcoal); }
body.light .cookie-note { background: #FFFFFF; color: var(--charcoal); border-color: var(--line); }
body.light .cookie-note__btn { color: var(--charcoal); border-color: var(--line); }
body.light .cookie-note__btn:hover { border-color: var(--charcoal); }
body.light .cookie-note__btn--accept { background: var(--charcoal); color: #FFFFFF; border-color: var(--charcoal); }
body.light .cookie-note__btn--accept:hover { background: #3a3a3a; }