/* Meyer's Mobile — plain CSS, no build step. Breakpoints: 640px, 768px, 1024px. */

:root {
  --orange: #F58634;
  --orange-dark: #E5762E;
  --orange-50: oklch(98% .016 73.684);
  --orange-400: oklch(75% .183 55.934);
  --orange-500: oklch(70.5% .213 47.604);
  --gray-50: oklch(98.5% .002 247.839);
  --gray-100: oklch(96.7% .003 264.542);
  --gray-200: oklch(92.8% .006 264.531);
  --gray-300: oklch(87.2% .01 258.338);
  --gray-500: oklch(55.1% .027 264.364);
  --gray-600: oklch(44.6% .03 256.802);
  --gray-700: oklch(37.3% .034 259.733);
  --gray-800: oklch(27.8% .033 256.848);
  --gray-900: oklch(21% .034 264.665);
  --border: hsl(214.3 31.8% 91.4%);
  --text: hsl(222.2 84% 4.9%);
  --radius: .5rem;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}

/* ---------- Reset ---------- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-tap-highlight-color: transparent;
}
body { background: #fff; color: var(--text); }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ol, ul { list-style: none; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background-color: transparent; border-radius: 0; }
button { cursor: pointer; }
button:disabled { cursor: default; }
textarea { resize: vertical; }
::placeholder { color: color-mix(in oklab, currentColor 50%, transparent); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* ---------- Layout ---------- */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
.page { min-height: 100vh; background: #fff; }
.section { padding: 4rem 0; }
.bg-white { background: #fff; }
.bg-gray-50 { background: var(--gray-50); }
.bg-gray-100 { background: var(--gray-100); }
.bg-dark { background: var(--gray-800); color: #fff; }
.text-center { text-align: center; }

.orange { color: var(--orange); }

.grid { display: grid; grid-template-columns: 1fr; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
@media (min-width: 768px) {
  .grid-md-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.items-center { align-items: center; }

/* ---------- Header ---------- */
.site-header { position: relative; background: #fff; color: var(--gray-800); box-shadow: var(--shadow-md); }
.site-header .bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 4rem; width: auto; }
.nav { display: none; }
.nav a { padding: .5rem .75rem; border-radius: calc(var(--radius) - 2px); font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700); transition: color .2s, background-color .2s; }
.nav a + a { margin-left: 2rem; }
.nav a:hover { color: var(--orange-500); }
.nav a.active, .nav a.active:hover { background: var(--orange); color: #fff; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; border-radius: calc(var(--radius) - 2px); color: var(--orange-500); transition: color .15s, background-color .15s; }
.menu-btn:hover { color: var(--orange-400); background: var(--gray-700); }
.menu-btn:focus { outline: none; box-shadow: inset 0 0 0 2px var(--orange-500); }
.menu-btn svg { width: 1.5rem; height: 1.5rem; }
.menu-btn .icon-close, .menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: var(--gray-800); box-shadow: var(--shadow-lg); border-top: 1px solid var(--gray-700); padding: .5rem .5rem .75rem; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { display: block; padding: .5rem .75rem; border-radius: calc(var(--radius) - 2px); font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: var(--gray-300); transition: color .2s, background-color .2s; }
.mobile-menu a + a { margin-top: .25rem; }
.mobile-menu a:hover { color: #fff; background: var(--gray-700); }
.mobile-menu a.active, .mobile-menu a.active:hover { color: #fff; background: var(--orange); }
@media (min-width: 768px) {
  .nav { display: flex; }
  .menu-wrap { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--gray-800); color: #fff; }
.site-footer > .container { padding-top: 3rem; padding-bottom: 3rem; }
.site-footer h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 1rem; color: var(--orange); }
.site-footer p, .site-footer li, .site-footer span, .site-footer a, .site-footer button { color: var(--gray-300); }
.site-footer a, .site-footer button { transition: color .15s; }
.site-footer a:hover, .site-footer button:hover { color: #fff; }
.footer-blurb { margin-bottom: 1rem; }
.footer-contact > div { display: flex; align-items: center; }
.footer-contact > div + div { margin-top: .5rem; }
.footer-contact svg { width: 1.25rem; height: 1.25rem; margin-right: .5rem; color: var(--orange); }
.footer-areas li + li { margin-top: .25rem; }
.footer-bottom { border-top: 1px solid var(--gray-700); margin-top: 2rem; padding-top: 2rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1rem; }
.footer-bottom p { text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; font-size: .875rem; line-height: 1.25rem; }
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; }
  .footer-bottom p { text-align: left; }
  .footer-links { justify-content: flex-end; }
}

/* ---------- Buttons ---------- */
.btn { color: #fff; padding: 1rem 2rem; border-radius: var(--radius); font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; transition: color .2s, background-color .2s, opacity .2s; }
.btn-orange { background: var(--orange); }
.btn-orange:hover { opacity: .9; }
.btn-call { display: flex; align-items: center; justify-content: center; }
.btn-call svg { width: 1.25rem; height: 1.25rem; margin-right: .5rem; }
.btn-outline { border: 2px solid #fff; }
.btn-outline:hover { background: #fff; color: var(--gray-800); }
.btn-row { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .btn-row { flex-direction: row; } }
.btn-dark { background: var(--gray-800); color: #fff; padding: .75rem 1.5rem; border-radius: var(--radius); transition: background-color .2s; }
.btn-dark:hover { background: var(--gray-700); }

/* ---------- Page heroes ---------- */
.page-hero { background-image: linear-gradient(to right in oklab, var(--gray-800), var(--gray-600)); color: #fff; padding: 4rem 0; text-align: center; }
.page-hero.darker { background-image: linear-gradient(to right in oklab, var(--gray-900), var(--gray-700)); }
.page-hero h1 { font-size: 3rem; line-height: 1; font-weight: 700; margin-bottom: 1.5rem; }
.page-hero p { font-size: 1.25rem; line-height: 1.75rem; color: var(--gray-300); max-width: 48rem; margin: 0 auto; }

.home-hero { position: relative; overflow: hidden; min-height: 500px; color: #fff; background-image: linear-gradient(rgba(55, 65, 81, 0.75), rgba(75, 85, 99, 0.75)), url('/images/uploads/5b527573-8469-4510-95a6-66ae32d67f81.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.home-hero .container { position: relative; z-index: 10; padding-top: 5rem; padding-bottom: 5rem; text-align: center; }
.home-hero h1 { font-size: 3rem; line-height: 1; font-weight: 700; margin-bottom: 1.5rem; }
.home-hero h1 span { display: block; color: var(--orange); }
.home-hero p { font-size: 1.25rem; line-height: 1.75rem; margin: 0 auto 2rem; max-width: 48rem; color: var(--gray-300); }
@media (min-width: 768px) {
  .home-hero h1 { font-size: 3.75rem; }
  .home-hero p { font-size: 1.5rem; line-height: 2rem; }
}

/* ---------- Section headings ---------- */
.section-head { text-align: center; margin-bottom: 3rem; }
.section-head h2, .h2 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: var(--gray-800); }
.section-head h2 { margin-bottom: 1rem; }
.section-head p { font-size: 1.25rem; line-height: 1.75rem; color: var(--gray-600); }
.section-head p.narrow { max-width: 48rem; margin: 0 auto; }
.bg-dark .section-head h2 { color: #fff; }
.bg-dark .section-head p { color: var(--gray-300); }
.lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--gray-600); }
.badge { display: inline-block; background: var(--orange); color: #fff; padding: .75rem 1.5rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }

/* ---------- Cards ---------- */
.card { background: #fff; padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.card-hover { transition: box-shadow .2s; }
.card-hover:hover { box-shadow: var(--shadow-xl); }
.card h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--gray-800); }
.service-card svg { width: 3rem; height: 3rem; margin-bottom: 1rem; color: var(--orange); }
.service-card h3 { margin-bottom: .75rem; }
.service-card p { color: var(--gray-600); }
.photo-panel { border-radius: var(--radius); padding: 2rem; }
.photo-panel img { width: 100%; height: 16rem; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.5rem; }
.photo-panel h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--gray-800); margin-bottom: .5rem; }
.photo-panel p { color: var(--gray-600); }
.tile { background: var(--gray-100); padding: 1rem; border-radius: var(--radius); border-left: 4px solid var(--orange); }
.tile p, .tile h3 { color: var(--gray-800); font-weight: 500; }
.tile h3 { font-size: 1.125rem; line-height: 1.75rem; }
.equip-card { background: #fff; padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-md); transition: box-shadow .2s; display: flex; align-items: center; }
.equip-card:hover { box-shadow: var(--shadow-lg); }
.equip-card svg { width: 1.5rem; height: 1.5rem; margin-right: .75rem; color: var(--orange); }
.equip-card h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; color: var(--gray-800); }
.callout { background: var(--orange-50); border-radius: var(--radius); padding: 1.5rem; border-left: 4px solid var(--orange); display: flex; align-items: center; }
.callout svg { width: 2rem; height: 2rem; margin-right: 1rem; color: var(--orange); }
.callout h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--gray-800); }
.callout p { color: var(--gray-700); }
.dark-card { background: var(--gray-700); padding: 1.5rem; border-radius: var(--radius); }
.dark-card h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; margin-bottom: 1rem; color: var(--orange); }
.dark-card li { color: var(--gray-300); }
.dark-card li + li { margin-top: .5rem; }
.more { text-align: center; margin-top: 3rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--orange); }

/* About */
.cert h3 { margin-bottom: .75rem; }
.cert p { font-weight: 500; color: var(--orange); }
.section-head .safety-intro { font-size: 1.25rem; line-height: 1.75rem; color: var(--gray-300); margin-bottom: 2rem; }
.bg-dark .section-head .safety-motto { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; margin-bottom: 2rem; color: var(--orange); }
.safety-box { background: var(--gray-700); border-radius: var(--radius); padding: 2rem; }
.safety-box h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; margin-bottom: 1.5rem; text-align: center; color: var(--orange); }
.safety-item { display: flex; align-items: center; }
.safety-item i { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--orange); margin-right: .75rem; }
.safety-item span { color: var(--gray-300); }

/* ---------- Carousels ---------- */
.carousel { position: relative; max-width: 64rem; margin: 0 auto; }
.carousel-viewport { overflow: hidden; touch-action: pan-y; }
.carousel-track { display: flex; transition: transform .45s cubic-bezier(.25, .8, .25, 1); }
.carousel-track.no-anim { transition: none; }
.carousel-slide { min-width: 0; flex: 0 0 100%; }
@media (min-width: 768px) { .carousel-slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .carousel-slide { flex-basis: 33.3333%; } }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; height: 2rem; width: 2rem; border-radius: 9999px; border: 1px solid var(--border); background: #fff; color: var(--text); transition: color .15s, background-color .15s; }
.carousel-btn:hover { background: hsl(210 40% 96.1%); color: hsl(222.2 47.4% 11.2%); }
.carousel-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--text); }
.carousel-btn:disabled { pointer-events: none; opacity: .5; }
.carousel-btn svg { width: 1rem; height: 1rem; pointer-events: none; }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }
@media (min-width: 768px) {
  .carousel-btn.prev { left: -3rem; }
  .carousel-btn.next { right: -3rem; }
}

/* Home gallery */
.gallery .carousel-track { margin-left: -.5rem; }
.gallery .carousel-slide { padding-left: .5rem; }
@media (min-width: 768px) {
  .gallery .carousel-track { margin-left: -1rem; }
  .gallery .carousel-slide { padding-left: 1rem; }
}
.gallery-card { cursor: pointer; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg); transition: all .3s; }
.gallery-card:hover { box-shadow: var(--shadow-xl); }
.gallery-card .img-wrap { background: var(--gray-200); }
.gallery-card img { width: 100%; height: 16rem; object-fit: cover; transition: transform .3s; }
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card .caption { padding: .75rem 1rem; background: #fff; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.gallery-card .caption p { font-size: .75rem; line-height: 1.25; color: var(--gray-600); font-weight: 500; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) { .gallery-card .caption p { font-size: .875rem; } }

/* Services carousel */
.work .carousel-track { margin-left: -1rem; }
.work .carousel-slide { padding-left: 1rem; }
.work-card { margin: .25rem; padding: .5rem; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-sm); }
.work-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.work-card p { font-size: .875rem; line-height: 1.25rem; color: var(--gray-600); margin-top: .5rem; text-align: center; font-weight: 500; }

/* ---------- Contact ---------- */
.contact-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1.5rem; }
.form > * + * { margin-top: 1.5rem; }
.form label { display: block; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700); margin-bottom: .5rem; }
.form input, .form select, .form textarea { width: 100%; padding: .75rem 1rem; border: 1px solid var(--gray-300); border-radius: var(--radius); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--orange); }
.form .honey { position: absolute; left: -9999px; }
.form button[type="submit"] { width: 100%; color: #fff; padding: 1rem 1.5rem; border-radius: var(--radius); font-weight: 500; background: var(--orange); transition: background-color .2s; }
.form button[type="submit"]:hover { background: var(--orange-dark); }
.form button[type="submit"]:disabled { opacity: .5; }
.info-stack > * + * { margin-top: 2rem; }
.info-box { padding: 1.5rem; border-radius: var(--radius); }
.info-box h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--gray-900); margin-bottom: 1rem; }
.info-box p, .info-box li { color: var(--gray-600); }
.info-box li + li { margin-top: .5rem; }
.info-box.emergency { background: var(--orange-50); border-left: 4px solid var(--orange); }
.info-row { display: flex; align-items: center; margin-bottom: .75rem; }
.info-row svg { width: 1.5rem; height: 1.5rem; margin-right: .75rem; color: var(--orange); }
.info-row .strong { font-weight: 600; color: var(--gray-900); }
.call-big { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--orange); }
.call-big:hover { color: var(--orange-dark); }

/* Toast (shown when the form is sent) */
.toast-viewport { position: fixed; top: 0; z-index: 100; display: flex; max-height: 100vh; width: 100%; flex-direction: column-reverse; padding: 1rem; }
@media (min-width: 640px) { .toast-viewport { top: auto; bottom: 0; right: 0; flex-direction: column; } }
@media (min-width: 768px) { .toast-viewport { max-width: 420px; } }
.toast { position: relative; width: 100%; overflow: hidden; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); background: #fff; color: var(--text); padding: 1.5rem 2rem 1.5rem 1.5rem; box-shadow: var(--shadow-lg); }
.toast strong { display: block; font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
.toast span { display: block; font-size: .875rem; line-height: 1.25rem; opacity: .9; }

/* ---------- Privacy ---------- */
.privacy-head { background: var(--gray-50); padding: 4rem 0; }
.narrow-container { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .narrow-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .narrow-container { padding: 0 2rem; } }
.privacy-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.privacy-title svg { width: 2rem; height: 2rem; color: var(--orange); }
.privacy-title h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: var(--gray-900); }
.privacy-sub { font-size: 1.25rem; line-height: 1.75rem; color: var(--gray-600); }
.privacy-date { font-size: .875rem; line-height: 1.25rem; color: var(--gray-500); margin-top: .5rem; }
.policy { padding-top: 3rem; padding-bottom: 3rem; }
.policy section { margin-bottom: 2rem; }
.policy section:last-child { margin-bottom: 0; }
.policy h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1rem; }
.policy h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--gray-900); margin-bottom: .75rem; }
.policy p, .policy ul { color: var(--gray-700); }
.policy .mb { margin-bottom: 1rem; }
.policy ul { list-style: disc; padding-left: 1.5rem; }
.policy li + li { margin-top: .5rem; }
.policy-contact { background: var(--gray-50); padding: 1.5rem; border-radius: var(--radius); }
.policy-contact div { display: flex; align-items: center; gap: .75rem; }
.policy-contact div + div { margin-top: .75rem; }
.policy-contact svg { width: 1.25rem; height: 1.25rem; color: var(--orange); }
.policy-contact a { color: #374151; }
.policy-contact a:hover { color: var(--orange); }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gray-100); padding: 0 1rem; }
.notfound .inner { text-align: center; max-width: 28rem; margin: 0 auto; }
.notfound h1 { font-size: 3.75rem; line-height: 1; font-weight: 700; color: var(--gray-300); margin-bottom: 1rem; }
.notfound h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--gray-800); margin-bottom: 1rem; }
.notfound .msg { font-size: 1.125rem; line-height: 1.75rem; color: var(--gray-600); margin-bottom: 2rem; }
.notfound .head { margin-bottom: 2rem; }
.nf-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: .75rem 1.5rem; color: #fff; font-weight: 600; border-radius: var(--radius); transition: background-color .2s; touch-action: manipulation; }
.nf-btn svg { width: 1.25rem; height: 1.25rem; margin-right: .5rem; }
.nf-btn.home { background: var(--orange); }
.nf-btn.home:hover { background: var(--orange-dark); }
.nf-btn.back { background: var(--gray-500); margin-top: 1rem; }
.nf-btn.back:hover { background: var(--gray-600); }
.notfound .foot { margin-top: 2rem; font-size: .875rem; line-height: 1.25rem; color: var(--gray-500); }
@media (min-width: 640px) {
  .notfound h1 { font-size: 6rem; }
  .notfound h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .nf-btn { width: auto; }
  .nf-btn.back { margin-left: 1rem; }
}

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: #fff; box-shadow: var(--shadow-lg); border-top: 2px solid var(--orange); }
.cookie-banner[hidden] { display: none; }
.cookie-banner .wrap { max-width: 80rem; margin: 0 auto; padding: 1rem; }
.cookie-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.cookie-msg { display: flex; align-items: center; gap: .75rem; flex: 1 1 0%; }
.cookie-msg > svg { width: 1.5rem; height: 1.5rem; color: var(--orange); flex-shrink: 0; }
.cookie-msg .txt { font-size: .875rem; line-height: 1.25rem; color: var(--gray-700); }
.cookie-msg .txt p:first-child { font-weight: 500; margin-bottom: .25rem; }
.cookie-msg a { text-decoration: underline; margin-left: .25rem; color: var(--orange); }
.cookie-actions { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
.cookie-actions button { padding: .5rem 1rem; font-size: .875rem; line-height: 1.25rem; border-radius: calc(var(--radius) - 2px); transition: color .15s, background-color .15s; }
.ck-prefs { display: flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--gray-300) !important; }
.ck-prefs:hover { background: var(--gray-50); }
.ck-prefs svg { width: 1rem; height: 1rem; }
.ck-essential { background: var(--gray-500); color: #fff; }
.ck-essential:hover { background: var(--gray-600); }
.ck-all { background: var(--orange); color: #fff; }
.ck-all:hover { background: var(--orange-dark); }
.cookie-actions .ck-close { padding: .5rem; color: var(--gray-500); }
.ck-close:hover { color: var(--gray-700); }
.ck-close svg { width: 1.25rem; height: 1.25rem; }
.cookie-prefs { margin-top: 1rem; padding: 1rem; background: var(--gray-50); border-radius: calc(var(--radius) - 2px); }
.cookie-prefs[hidden] { display: none; }
.cookie-prefs h3 { font-weight: 500; color: var(--gray-900); margin-bottom: .75rem; }
.cookie-prefs .row { display: flex; align-items: center; justify-content: space-between; }
.cookie-prefs .row + .row { margin-top: .75rem; }
.cookie-prefs .name { font-weight: 500; font-size: .875rem; line-height: 1.25rem; }
.cookie-prefs .desc { font-size: .75rem; line-height: 1rem; color: var(--gray-600); }
.cookie-prefs .state { font-size: .875rem; line-height: 1.25rem; color: var(--gray-500); }
.cookie-prefs .state.opt { color: var(--orange); }
@media (min-width: 640px) {
  .cookie-row { flex-direction: row; align-items: center; }
  .cookie-actions { flex-direction: row; width: auto; }
}