:root {
  /* Approved brand colors (originals/kanode_video_production_package) */
  --teal: #5EB19C;
  --cream: #F4EBD7;
  --ink: #1F4E4F;   /* Deep Blue-Green */
  --coral: #D46B60; /* accents, plus the Let's make yours section (cream text there is large and bold) */

  --display: "Fraunces", Georgia, serif;
  --text: "DM Sans", system-ui, sans-serif;

  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --step-head: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem);
  --step-hero: clamp(3rem, 1.2rem + 6vw, 7rem);

  --margin: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--display); font-weight: 650; font-variation-settings: "SOFT" 100;
  line-height: 1.02; letter-spacing: -.02em; margin: 0;
}
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
::selection { background: var(--teal); color: var(--ink); }

/* Buttons: one shape, fully round */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: 999px; border: 0;
  font: 700 1.0625rem/1 var(--text); text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-play { background: var(--cream); color: var(--ink); padding-left: 12px; }
.btn-play:hover { background: #fff; }
.btn-play svg { width: 34px; height: 34px; padding: 8px 7px 8px 9px; border-radius: 50%; background: var(--coral); fill: var(--cream); transition: transform .3s var(--ease); }
.btn-play:hover svg { transform: scale(1.08); }
.btn-play span { font-weight: 400; opacity: .75; }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: #163a3b; }
.text-link { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; transition: opacity .2s; }
.text-link:hover { opacity: .65; }

/* HERO: the film, full screen */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--ink); color: var(--cream);
}
.hero-bg-wrap { position: absolute; inset: 0; }
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.68);
}
.hero::after { /* neutral scrim behind the headline */
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(31, 78, 79, .75), rgba(31, 78, 79, 0)); /* taste-skill-ignore: neutral scrim over footage */
}
.bar, .hero-copy { position: relative; z-index: 1; padding: var(--margin); }
.bar { display: flex; justify-content: space-between; align-items: center; }
.logo { display: block; width: clamp(110px, 10vw, 160px); transition: transform .3s var(--ease); }
.logo img { width: 100%; height: auto; }
.logo:hover { transform: rotate(-3deg) scale(1.03); }
.bar-links { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); font-weight: 500; }
.bar-links a { text-decoration: none; }
.bar-links a:not(.bar-cta):hover { text-decoration: underline; text-underline-offset: 5px; }
.bar-cta { background: var(--cream); color: var(--ink); padding: 12px 22px; border-radius: 999px; transition: background-color .2s; }
.bar-cta:hover { background: var(--teal); }
.hero-copy h1 { font-size: var(--step-hero); max-width: 14ch; margin-bottom: 32px; }

/* PITCH */
.pitch { padding: clamp(72px, 9vw, 140px) var(--margin); max-width: 1200px; }
.statement { font: 600 var(--step-lead)/1.2 var(--display); font-variation-settings: "SOFT" 100; letter-spacing: -.01em; max-width: 26ch; }
.pitch-note { max-width: 48ch; margin-top: 24px; }

/* OFFERS on deep blue-green */
.offers { background: var(--ink); color: var(--cream); padding: clamp(100px, 12vw, 180px) var(--margin); }
.offers h2 { font-size: var(--step-head); max-width: 16ch; margin-bottom: clamp(48px, 6vw, 88px); }
.offer-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); }
.offer h3 { font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); margin-bottom: 16px; color: var(--teal); }
.offer p { max-width: 36ch; }

/* ABOUT */
.about {
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 7vw, 120px); align-items: center;
  padding: clamp(100px, 12vw, 180px) var(--margin); max-width: 1440px; margin: 0 auto;
}
.about-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: var(--teal); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo.empty { display: none; }
.about:has(.empty) { grid-template-columns: 1fr; max-width: 1000px; margin: 0; }
.about h2 { font-size: var(--step-head); margin-bottom: 28px; }
.about-text p { max-width: 46ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); }

/* CLIENTS on teal: large type only (deep green on teal is about 3.6:1) */
.clients { background: var(--teal); color: var(--ink); padding: clamp(100px, 12vw, 180px) var(--margin); }
.clients h2 { font-size: var(--step-head); margin-bottom: 48px; }
/* Logo band: one slow row, the set repeated once so it loops seamlessly */
.logo-band { display: flex; overflow: hidden; margin: 0 calc(var(--margin) * -1); }
.logo-track {
  list-style: none; margin: 0; padding: 0 clamp(28px, 4vw, 56px) 0 0; flex: none;
  display: flex; align-items: center; gap: clamp(48px, 6vw, 88px);
  animation: logos 60s linear infinite;
}
.logo-band:hover .logo-track { animation-play-state: paused; }
.logo-track img { height: clamp(40px, 4.4vw, 64px); width: auto; max-width: none; }
@keyframes logos { to { transform: translateX(-100%); } }
.also { font-size: 1.1875rem; font-weight: 700; line-height: 1.45; max-width: 52ch; margin: clamp(48px, 6vw, 80px) 0 0; }
.quote { margin: 64px 0 0; max-width: 40ch; }
.quote p { font: 600 var(--step-lead)/1.25 var(--display); }
.quote cite { font-style: normal; opacity: .8; }

/* GOLF on cream */
.golf {
  background: var(--cream); padding: clamp(90px, 10vw, 150px) var(--margin);
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.golf h2 { font-size: var(--step-head); margin-bottom: 24px; }
.golf p { max-width: 46ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); margin-bottom: 32px; }
.golf-alt { margin: 18px 0 0; font-size: var(--step-small); }
.golf-flag { width: clamp(140px, 18vw, 260px); color: var(--ink); margin-right: clamp(0px, 6vw, 120px); }

/* CONTACT on coral: cream text kept large and bold (cream on coral is about 2.9:1) */
.contact { background: var(--coral); color: var(--cream); padding: clamp(110px, 14vw, 220px) var(--margin); text-align: center; }
.contact h2 { font-size: var(--step-hero); margin-bottom: 20px; }
.contact > p { font-size: 1.5rem; font-weight: 700; }
.contact-actions { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; margin: 36px 0 0; font-size: 1.5rem; font-weight: 700; }
.contact-actions .btn { font-size: 1.1875rem; background: var(--cream); color: var(--ink); }
.contact-actions .btn:hover { background: #fff; }

/* FOOTER */
.footer { background: var(--ink); color: var(--cream); padding: clamp(72px, 9vw, 130px) var(--margin) 32px; text-align: center; }
.footer-logo { width: min(520px, 80vw); height: auto; margin: 0 auto 28px; }
.footer .tagline { font-size: 1.0625rem; letter-spacing: .02em; margin: 0 auto 56px; opacity: 1; }
.footer p { font-size: var(--step-small); margin: 0 0 8px; opacity: .85; }

/* FILM DIALOG */
.film-dialog { width: min(1280px, 94vw); padding: 0; border: 0; background: #000; overflow: visible; }
.film-dialog::backdrop { background: rgba(18, 46, 47, .94); }
.film-dialog[open] { animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.film-frame { aspect-ratio: 16 / 9; }
.film-frame video, .film-frame iframe { width: 100%; height: 100%; border: 0; }
.close {
  position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--cream); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer;
  transition: transform .2s var(--ease);
}
.close:hover { transform: rotate(90deg); }

/* Entrances (only when JS runs) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .logo-track { animation: none; flex-wrap: wrap; row-gap: 32px; }
  .logo-track[aria-hidden] { display: none; }
  .logo-band { margin: 0; }
  .film-dialog[open] { animation: none; }
}

/* PHONE */
@media (max-width: 760px) {
  .bar-links a:not(.bar-cta) { display: none; }
  .bar-cta { padding: 10px 18px; }
  .hero-copy h1 { font-size: clamp(2.2rem, 9.4vw, 3.4rem); max-width: none; }
  .offer-list { grid-template-columns: 1fr; gap: 40px; }
  .about { grid-template-columns: 1fr; }
  .about-photo { width: 80%; }
  .golf { grid-template-columns: 1fr; }
  .golf-flag { width: 120px; order: -1; margin: 0; }
  .contact h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .close { top: -56px; }
}

/* Photography: one quiet row under the offers */
.photo-too { margin-top: clamp(72px, 9vw, 140px); }
.photo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 28px; }
.photo-head h3 { font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); color: var(--teal); }
.photo-head p { margin: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.photo-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; transition: transform .4s var(--ease); }
.photo-grid img:hover { transform: translateY(-4px) rotate(-.6deg); }
@media (max-width: 760px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}