@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..500&display=swap");

/* Kelly Studio brand palette, used exactly as supplied. The layout language
   (pills, soft 24px cards, light weight type with tight tracking, alternating
   light and dark panels) follows the Phantom-style reference. */
:root {
  --black: #050505;
  --teal: #189AAA;
  --sage: #DDDBCB;
  --cream: #F5F1E3;
  --white: #FFFFFF;

  --max: 1200px;
  --pill: 100px;
  --card: 24px;
  --track: -0.025em;
}

/* Page colour that fades as sections scroll past, like the reference.
   Registered so it animates; browsers without @property just switch. */
@property --page {
  syntax: '<color>';
  inherits: true;
  initial-value: #F5F1E3;
}

html {
  --page: var(--cream);
  transition: --page .7s ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--black);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
}

a { color: inherit; }

h1, h2, h3 {
  font-weight: 350;
  letter-spacing: var(--track);
  margin: 0 0 16px;
}

/* ---------- header: floating pill ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 0;
  background: color-mix(in srgb, var(--page) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
  color: var(--black);
}

.logo-mark {
  height: 30px;
  width: auto;
  display: block;
}

nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: var(--pill);
  padding: 6px;
}

nav a {
  text-decoration: none;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: var(--pill);
  transition: background .15s ease;
}

nav a:hover { background: var(--cream); }

nav a.nav-cta {
  background: var(--teal);
  padding: 10px 20px;
}

nav a.nav-cta:hover { background: var(--teal); opacity: .88; }

/* Products opens a menu in two columns: the products, each with an icon tile, its name and a
   short line, then a narrower column of related links. On phones it folds down to plain links. */
/* Products is a button, not a link: it only opens the menu */
nav .nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 15px;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 10px 16px;
  border-radius: var(--pill);
  cursor: pointer;
  transition: background .15s ease;
}

nav .nav-parent:hover,
.nav-group.open .nav-parent { background: var(--cream); }

.nav-parent svg {
  width: 10px;
  height: 6px;
  flex: none;
  transition: transform .2s ease;
}

.nav-menu { display: none; }
.nav-menu a b { display: block; font-weight: 400; }
.nav-menu .np-pitch { display: block; font-size: 13px; margin-top: 2px; }
.nm-head, .nm-icon, .nm-side { display: none; }

nav .nav-parent.is-current { background: var(--cream); }

@media (min-width: 761px) {
  /* the menu hangs from the whole nav pill, lined up with its right edge */
  nav { position: relative; }

  .nav-menu {
    position: absolute;
    top: calc(100% + 14px);
    right: -1px;
    width: min(650px, calc(100vw - 48px));
    grid-template-columns: 1.4fr 1fr;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--sage);
    border-radius: var(--card);
    box-shadow: 0 18px 40px rgba(5, 5, 5, .12);
  }
  /* bridges the gap between the Products link and the menu (the pill's own padding and border, plus
     the space under it) so the menu stays open while the pointer travels down to it */
  .nav-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -26px;
    height: 26px;
  }
  .nav-group:hover .nav-menu,
  .nav-group:focus-within .nav-menu,
  .nav-group.open .nav-menu {
    display: grid;
    animation: nav-drop .18s ease both;
  }
  .nav-group:hover .nav-parent svg,
  .nav-group:focus-within .nav-parent svg,
  .nav-group.open .nav-parent svg { transform: rotate(180deg); }

  .nm-col { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
  .nm-side { display: flex; border-left: 1px solid var(--sage); padding-left: 20px; margin-left: 8px; }
  .nm-head {
    display: block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 12px 14px;
  }

  .nav-menu a.nm-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 16px;
  }
  .nm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    transition: transform .2s ease;
  }
  .nm-icon svg { width: 24px; height: 24px; }
  .nm-icon.nm-teal { background: var(--teal); color: var(--black); }
  .nm-icon.nm-black { background: var(--black); color: var(--cream); }
  .nav-menu a.nm-item:hover .nm-icon { transform: scale(1.06); }
  .nav-menu a b { font-size: 17px; line-height: 1.2; }
  .nav-menu .np-pitch { margin-top: 3px; }

  .nm-side a {
    display: block;
    font-size: 15px;
    padding: 9px 12px;
    border-radius: 12px;
  }
}

/* Mobile: the page links fold into a dropdown card behind a hamburger.
   Closed, the bar shows the logo, the Contact pill and the button. */
.menu-btn { display: none; }

@media (max-width: 760px) {
  nav a:not(.nav-cta) { display: none; }
  nav { border: 0; background: none; padding: 0; }
  .nav-group { display: none; }

  .menu-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    padding: 0;
    flex-shrink: 0;
    background: var(--white);
    border: 1px solid var(--sage);
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-btn span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--black);
    border-radius: 2px;
    transition: transform .25s ease;
  }
  .nav-open .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav-open .menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

  .bar nav { margin-left: auto; }

  /* open: the nav becomes a card dropping from the header */
  .nav-open nav {
    position: absolute;
    top: calc(100% - 4px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--sage);
    border-radius: var(--card);
    box-shadow: 0 18px 40px rgba(5, 5, 5, .12);
    animation: nav-drop .22s ease both;
  }
  .nav-open nav a:not(.nav-cta) {
    display: block;
    font-size: 22px;
    font-weight: 350;
    padding: 14px 18px;
    border-radius: 16px;
  }
  /* in the open card, Products is a small label with its two products listed under it */
  .nav-open .nav-group { display: block; }
  .nav-open .nav-menu { display: grid; gap: 2px; }
  .nav-open nav .nav-parent {
    display: block;
    width: 100%;
    text-align: left;
    cursor: default;
    font-size: 13px;
    padding: 12px 18px 2px;
    background: none;
    pointer-events: none;
  }
  .nav-open .nav-parent svg { display: none; }
  .nav-open .nav-menu .np-pitch { font-size: 14px; font-weight: 400; }
  .nav-open nav a.nav-cta {
    margin-top: 8px;
    text-align: center;
    font-size: 17px;
    padding: 16px 20px;
  }
}

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-open nav { animation: none; }
  .nav-group .nav-menu { animation: none; }
  .nm-icon { transition: none; }
  .menu-btn span { transition: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--teal);
  color: var(--black);
  text-decoration: none;
  padding: 16px 32px;
  border-radius: var(--pill);
  font-size: 16px;
  font-weight: 400;
  transition: transform .15s ease, opacity .15s ease;
}

.btn:hover { transform: translateY(-1px); opacity: .9; }

.btn-soft {
  background: var(--sage);
}

.btn-light {
  background: var(--cream);
}

.btn .arrow {
  width: 14px;
  height: 14px;
  flex: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 480px) {
  .actions { flex-direction: column; align-items: stretch; }
}

/* ---------- hero: dark rounded panel ---------- */
.hero {
  background: var(--black);
  color: var(--cream);
  border-radius: var(--card);
  padding: 112px 32px 96px;
  text-align: center;
  margin-top: 8px;
}

.hero h1 {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1;
  max-width: 16ch;
  margin: 0 auto 28px;
  text-wrap: balance;
}

.hero p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.35;
  max-width: 560px;
  margin: 0 auto 40px;
}

@media (max-width: 480px) {
  .hero { padding: 72px 20px 56px; }
}

/* ---------- product panel ---------- */
.showpiece {
  background: var(--sage);
  border-radius: var(--card);
  margin-top: 16px;
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 48px;
  overflow: hidden;
}

.showpiece-text {
  flex: 1 1 320px;
}

.showpiece-text h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
}

.showpiece-text p {
  margin: 0 0 28px;
  max-width: 380px;
}

.showpiece-image-wrap {
  flex: 1 1 480px;
  max-width: 560px;
  opacity: 0;
  animation: fade-up .9s ease .1s forwards;
}

.showpiece-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease;
}

.showpiece-image:hover { transform: translateY(-6px); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showpiece-image-wrap { animation: none; opacity: 1; }
}

@media (max-width: 800px) {
  .showpiece { flex-direction: column; align-items: stretch; padding: 32px 24px; gap: 24px; }
  .showpiece-image-wrap { max-width: 100%; order: -1; flex: none; }
  .showpiece-text { flex: none; }
}

/* ---------- sections ---------- */
section { padding: 128px 0 0; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-head h2 {
  text-wrap: balance;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
}

.section-head p {
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: var(--sage);
  margin: 0 0 24px;
}


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.card {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: var(--card);
  padding: 40px;
}

.card h3 {
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 12px;
}

.card p {
  margin: 0;
  font-size: 15px;
}

.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pill);
  background: var(--cream);
  font-size: 13px;
  margin-bottom: 32px;
}

@media (max-width: 480px) {
  .card { padding: 28px; }
}

/* ---------- showcase ---------- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.showcase-card {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: var(--card);
  padding: 16px 16px 32px;
}

.showcase-shot {
  aspect-ratio: 16 / 10;
  background: var(--cream);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-bottom: 24px;
}

.showcase-card .showcase-tag,
.showcase-card h3,
.showcase-card > p:last-child {
  margin-left: 16px;
  margin-right: 16px;
}

.showcase-card .showcase-tag {
  display: inline-block;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--teal);
  margin-top: 0;
  margin-bottom: 16px;
}

.showcase-card h3 {
  font-size: 24px;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 8px;
}

.showcase-card > p:last-child {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
}

/* ---------- footer: large rounded card ---------- */
footer {
  padding: 0 0 32px;
}

.foot-card {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: var(--card);
  padding: 48px;
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px;
}

.foot-mark img {
  width: 60px;
  height: auto;
  display: block;
}

.foot-cta {
  background: var(--cream);
  border-radius: 16px;
  padding: 24px;
}

.foot-email {
  display: block;
  font-size: clamp(28px, 4.6vw, 56px);
  font-weight: 350;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
  margin-bottom: 24px;
}

.foot-email:hover { color: var(--teal); }

.foot-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.foot-cta-row p {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  max-width: 440px;
}

.foot-cta-row .btn { flex: none; }

.foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 0.5fr));
  gap: 32px;
  margin-top: 64px;
}

.foot-col:first-child { grid-column: 2; }

.foot-col h3 {
  font-size: 15px;
  font-weight: 400;
  margin: 0 0 20px;
  opacity: 1;
}

.foot-col a,
.foot-col span {
  display: block;
  font-size: 15px;
  text-decoration: none;
  margin-bottom: 14px;
}

.foot-col a:hover { color: var(--teal); }

.foot-pill {
  display: inline-block;
  margin-top: 48px;
  font-size: 15px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: var(--cream);
}

.foot-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 8px 0;
  font-size: 15px;
}

.foot-legal a { text-decoration: none; }
.foot-legal a:hover { color: var(--teal); }

@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col:first-child { grid-column: auto; }
}

@media (max-width: 560px) {

  .foot-card { padding: 28px 20px; }
  .foot-cta { padding: 20px; }
  .foot-cta-row { flex-direction: column; align-items: stretch; }
  .foot-cta-row p { font-size: 17px; }
  .foot-email { font-size: 22px; overflow-wrap: normal; }
}

/* ---------- page head: dark rounded panel ---------- */
.page-head {
  margin-top: 8px;
  margin-bottom: 16px;
  background: var(--black);
  color: var(--cream);
  border-radius: var(--card);
  padding: 96px 32px 88px;
  text-align: center;
  max-width: calc(var(--max) - 48px);
}

.page-head .eyebrow {
  display: inline-block;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: var(--teal);
  color: var(--black);
  margin: 0 0 24px;
}

.page-head h1 {
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.05;
  max-width: 16ch;
  margin: 0 auto 24px;
}

.page-head p {
  font-size: 17px;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .page-head { margin-left: 16px; margin-right: 16px; padding: 64px 20px 56px; }
}

@media (min-width: 481px) and (max-width: 1248px) {
  .page-head { margin-left: 24px; margin-right: 24px; }
}

.page-head .btn { margin-top: 40px; }

main { padding-bottom: 16px; }

/* first block under a page head sits tight to it, like stacked cards */
section.tight { padding-top: 0; }

/* current page in the nav */
nav a[aria-current="page"] { background: var(--cream); }
nav a.nav-cta[aria-current="page"] { background: var(--teal); }

/* ---------- link cards: one per page ---------- */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.link-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: var(--card);
  padding: 40px;
  min-height: 280px;
  text-decoration: none;
  transition: transform .15s ease;
}

.link-card:hover { transform: translateY(-3px); }

.link-card .label {
  align-self: flex-start;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--cream);
  margin-bottom: 32px;
}

.link-card h3 {
  font-size: 30px;
  line-height: 1.21;
  margin: 0 0 24px;
}

.link-card .go {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--pill);
  background: var(--teal);
}

.link-card .go svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .link-card { padding: 28px; min-height: 0; }
  .link-card h3 { font-size: 24px; }
}

.section-head.small h2 { font-size: clamp(30px, 4vw, 48px); }

/* ---------- who we are: body copy card ---------- */
.prose-card {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: var(--card);
  padding: 72px 56px;
}

/* card spans the full width like the panel above; the text keeps a readable line length */
.prose-card p {
  font-size: 20px;
  line-height: 1.4;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 560px) {
  .prose-card { padding: 28px; }
  .prose-card p { font-size: 17px; }
}

/* ---------- contact details ---------- */
.detail-card h3 { font-size: 24px; margin-bottom: 16px; }
.detail-card p { margin: 0 0 6px; font-size: 16px; }
.detail-card a { text-decoration: none; }
.detail-card a:hover { color: var(--teal); }

/* the contact page already leads with the email, so the footer's copy of it is dropped */
.page-contact .foot-cta { display: none; }
.contact-grid { max-width: 560px; margin: 0 auto; grid-template-columns: 1fr; text-align: center; }


/* ---------- stacking cards (homepage) ----------
   Each card sticks a little lower than the one before, so as you scroll
   the next card slides up over it and the deck builds. */
.stack {
  display: grid;
  gap: 24px;
  padding-bottom: 48px;
}

.stack-card {
  position: sticky;
  top: calc(96px + var(--i) * 24px);
  min-height: min(520px, 70vh);
  display: flex;
  flex-direction: column;
  border-radius: var(--card);
  padding: 56px;
  text-decoration: none;
  transform-origin: 50% 0;
  will-change: transform;
}

.stack-card.tone-white { background: var(--white); border: 1px solid var(--sage); }
.stack-card.tone-black { background: var(--black); color: var(--cream); }
.stack-card.tone-teal  { background: var(--teal);  color: var(--black); }

.stack-card .label {
  align-self: flex-start;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: var(--cream);
  color: var(--black);
  margin-bottom: 40px;
}

.stack-card h3 {
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.08;
  max-width: 16ch;
  margin: 0;
}

.stack-foot {
  margin-top: auto;
  padding-top: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.stack-foot p {
  margin: 0;
  font-size: 18px;
  max-width: 460px;
}

.stack-card .go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--pill);
  background: var(--teal);
  color: var(--black);
  transition: transform .2s ease;
}

.stack-card.tone-teal .go { background: var(--black); color: var(--cream); }
.stack-card .go svg { width: 20px; height: 20px; }
.stack-card:hover .go { transform: rotate(45deg); }

@media (max-width: 560px) {
  .stack-card { padding: 28px; min-height: 380px; top: calc(80px + var(--i) * 16px); }
  .stack-foot p { font-size: 15px; }
  .stack-card .go { width: 52px; height: 52px; }
}

/* ---------- scroll motion ----------
   Only when JS is running and the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--delay, 0s);
  }

  html.js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* headlines rise in word by word */
  .split .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .12em;
    margin-bottom: -.12em;
  }

  .split .w > span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 1s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--wi) * 60ms + var(--delay, 0s));
  }

  .split.is-in .w > span { transform: none; }

  .hero, .page-head { will-change: transform; transform-origin: 50% 0; }
  .showpiece-image { will-change: transform; }
}

@media (prefers-reduced-motion: no-preference) {
  .showcase-grid > *, .link-grid > * { position: relative; will-change: transform; }
}

/* ---------- related reading link on service cards ---------- */
.card-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--pill);
  background: var(--cream);
  transition: background .15s ease;
}

.card-link:hover { background: var(--sage); }

/* ---------- FAQ (what we do) ---------- */
.faq {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--sage);
  border-radius: var(--card);
  transition: background .2s ease;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  font-size: 20px;
  line-height: 1.3;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  flex: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--pill);
  background: var(--cream);
  transition: background .2s ease, transform .3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--black);
  transform: translate(-50%, -50%);
}

.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item[open] .faq-icon { background: var(--teal); transform: rotate(45deg); }

.faq-item p {
  margin: 0;
  padding: 0 28px 28px;
  font-size: 16px;
  line-height: 1.5;
  max-width: 680px;
}

.faq-item summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: var(--card); }

@media (max-width: 480px) {
  .faq-item summary { padding: 20px; font-size: 17px; }
  .faq-item p { padding: 0 20px 22px; font-size: 15px; }
  .faq-icon { width: 34px; height: 34px; }
}

/* ---------- hero background video (homepage) ---------- */
.hero.has-video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* dark wash over the video so the cream headline stays readable */
.hero.has-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 5, 5, .55) 0%, rgba(5, 5, 5, .7) 100%);
}

/* ---------- products page ---------- */
.product-shot { margin-top: 0; }

.price-panel {
  background: var(--black);
  color: var(--cream);
  border-radius: var(--card);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.price-panel h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.08;
  margin-bottom: 20px;
}

.price-panel .price-intro p {
  margin: 0 0 32px;
  font-size: 17px;
  max-width: 420px;
}

.price-panel .actions { justify-content: flex-start; }

.price-box {
  background: var(--cream);
  color: var(--black);
  border-radius: 16px;
  padding: 32px;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--sage);
}

.price-row + .price-row { margin-top: -4px; }

.price-amount {
  font-size: clamp(36px, 4.6vw, 52px);
  font-weight: 350;
  line-height: 1;
  white-space: nowrap;
}

.price-amount small { font-size: 17px; }

.price-label { font-size: 15px; text-align: right; }

.price-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.price-box li {
  position: relative;
  padding-left: 28px;
}

.price-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
}

.price-note { margin: 20px 0 0; font-size: 13px; }

@media (max-width: 860px) {
  .price-panel { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
}

@media (max-width: 480px) {
  .price-panel { padding: 32px 20px; }
  .price-box { padding: 24px 20px; }
  .price-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .price-label { text-align: left; }
  .price-panel .actions { align-items: stretch; }
}