@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Titillium+Web:wght@400;600;700&display=swap');

:root {
  --ink: #000000;
  --white: #ffffff;
  --gray-light: #f5f5f5;
  --gray-mid: #e9e9e9;
  --gray-dark: #6b6b6b;
  --font-head: "Open Sans", -apple-system, sans-serif;
  --font-body: "Titillium Web", -apple-system, sans-serif;
  --max: 6000px;
}

:root[data-theme="dark"] {
  --ink: #f0f0f0;
  --white: #17181b;
  --gray-light: #1e2024;
  --gray-mid: #2a2c31;
  --gray-dark: #a3a3a3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { transition: background-color 0.2s ease, color 0.2s ease; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { font-size: 1.25rem; margin: 0 0 1em; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 max(32px, 4vw);
}

/* Header */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
:root[data-theme="dark"] header.site {
  box-shadow: none;
  border-bottom: 1px solid var(--gray-mid);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(9px, calc(2.7vw - 5px), 85px);
  padding-bottom: clamp(9px, calc(2.7vw - 5px), 85px);
}
.logo img { height: clamp(100px, 60px + 5vw, 200px); width: auto; }
nav.main { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 2vw; }
nav.main a {
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1.38rem;
  color: var(--ink);
}
nav.main a.active { text-decoration: underline; text-underline-offset: 4px; }
nav.main a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Mobile hamburger toggle */
.nav-toggle {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%) translateY(-6px);
  transition: transform 0.22s cubic-bezier(0.65, 0, 0.35, 1), width 0.22s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-toggle span:nth-child(2) { transform: translate(-50%, -50%) translateY(6px); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.nav-toggle:hover span { width: 26px; }

/* Dark mode toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-left: clamp(4px, 1vw, 12px);
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.theme-toggle:hover { opacity: 0.65; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Section dividers: exact clip-path curves copied from the live site.
   Each wave clips away part of a section's own bottom edge. Rather than
   clipping the section itself (which would reveal the plain page
   background in the cutout -- fine when that happens to match, a
   visible seam when it doesn't, e.g. dark mode), the clip lives on a
   ::before layer colored with the section's OWN background; the
   section's real background is set to whatever comes right after it,
   so that's what shows through the cutout. Shape and color are both
   correct at any viewport, nothing measured or guessed in pixels. */
.divider {
  position: relative;
  z-index: 0;
  padding-top: 0;
}
.divider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.divider > * {
  position: relative;
  z-index: 1;
}

.hero-photo { background: var(--gray-light); }

/* .divider.ID (two classes) so these reliably beat section.gray /
   section.white / section.gray-mid (one class + one type) below,
   regardless of source order. */
.home-d2::before { clip-path: url(#home-d2); background: var(--gray-light); }
.divider.home-d2 { background: var(--white); }
.home-d3::before { clip-path: url(#home-d3); background: var(--white); }
.divider.home-d3 { background: var(--white); }
.home-testimonials-wave::before { clip-path: url(#home-d1-inv); background: var(--white); }
.divider.home-testimonials-wave { background: var(--gray-mid); }
/* Testimonials section is currently hidden (see index.html) -- home-d3 now
   sits directly above home-d4, so its wave reveals home-d3's white instead
   of the testimonials section's gray-mid. Revert both rules below together
   with the HTML comment when testimonials come back. */
.home-d3 + section.divider .contact-grid {
  padding-top: clamp(48px, 8vw, 96px);
}
.home-d4::before { clip-path: url(#home-d4); background: var(--white); }
.divider.home-d4 { background: var(--gray-light); }

.wwd-d2::before { clip-path: url(#wwd-d2); background: var(--gray-light); }
.divider.wwd-d2 { background: var(--white); }
.wwd-d3::before { clip-path: url(#wwd-d3); background: var(--white); }
.divider.wwd-d3 { background: var(--gray-light); }
.wwd-d4::before { clip-path: url(#wwd-d4); background: var(--gray-light); }
.divider.wwd-d4 { background: var(--white); }

.about-d1::before { clip-path: url(#about-d1); background: var(--gray-light); }
.divider.about-d1 { background: var(--white); }
.about-d2::before { clip-path: url(#about-d2); background: var(--white); }
.divider.about-d2 { background: var(--gray-mid); }
.about-d3::before { clip-path: url(#about-d3); background: var(--gray-mid); }
.divider.about-d3 { background: var(--gray-light); }

.pf-d1::before { clip-path: url(#pf-d1); background: var(--white); }
.divider.pf-d1 { background: var(--gray-light); }

.faqs-d1::before { clip-path: url(#faqs-d1); background: var(--gray-light); }
.divider.faqs-d1 { background: var(--white); }
.faqs-d2::before { clip-path: url(#faqs-d2); background: var(--white); }
.divider.faqs-d2 { background: var(--gray-light); }

.contact-d1::before { clip-path: url(#contact-d1); background: var(--white); }
.divider.contact-d1 { background: var(--gray-light); }

/* Hero (full-bleed photo/video) */
.hero-photo {
  position: relative;
  height: calc(27.6vw + 39px);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo.short { height: calc(20.3vw - 4px); }
/* The wave clips the video, not the section -- so the section's own
   background (set above, matching the section right after it) is what
   shows through the cutout instead of being clipped away right along
   with the video. */
.hero-photo .hero-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.home-d1 .hero-clip { clip-path: url(#home-d1); }
.wwd-d1 .hero-clip { clip-path: url(#wwd-d1); }
.hero-photo .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.hero-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-photo h1 {
  position: relative;
  color: #ffffff; /* always over a photo + dark overlay, independent of page theme */
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.2vw, 4.85rem);
  text-align: center;
  margin: 0;
  padding: 0 20px;
}
.hero-photo h1 strong { font-weight: 700; }

/* Sections */
section { padding: clamp(40px, 4vw, 58px) 0 clamp(48px, 6vw, 86px); }
section.pb-lg { padding-bottom: clamp(56px, 8vw, 115px); }
section.pb-sm { padding-bottom: clamp(40px, 5.4vw, 78px); }
section.pb-xs { padding-bottom: clamp(24px, 2.4vw, 35px); }
section.gray { background: var(--gray-light); }
section.gray-mid { background: var(--gray-mid); }
section.white { background: var(--white); }

h1, h2, h3 { font-family: var(--font-head); font-weight: 500; margin: 0 0 0.5em; }

.page-title {
  text-align: center;
  font-size: clamp(2.6rem, 6.2vw, 4.85rem);
  padding: 56px 0 8px;
}
.page-title.left { text-align: left; }
.page-title.md { font-size: clamp(2rem, 4.2vw, 3.1rem); padding-top: 40px; }
.page-sub { text-align: center; color: var(--ink); font-size: 1.38rem; margin: 0 0 1.5em; }

/* Two-column intro (photo hero pages don't need, but text sections do) */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.intro-grid h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.28;
}
.intro-grid p { font-size: 1.55rem; }

/* Breathing room between a hero video/photo and the section right after it.
   padding, not margin -- margin here would collapse through the section
   (divider has padding-top:0) and push the section's own background down
   with it, leaving a white gap above the colored background. */
.hero-photo + section .intro-grid {
  padding-top: clamp(48px, 8vw, 96px);
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 17px 30px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 1.38rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--white); }
.btn-row { text-align: center; margin-top: 28px; }

/* Problems box (matches surrounding gray section) */
.problems-box {
  background: var(--gray-light);
  padding: 48px 40px;
  text-align: center;
}
.problems-box h3 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.6rem;
  margin-bottom: 40px;
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.icon-grid .icon-item svg { width: 46px; height: 46px; margin: 0 auto 16px; display: block; }
.icon-grid .icon-item p { font-size: 0.98rem; color: var(--ink); margin: 0; }

/* Photo feature grid (4 columns, photo + caption). Captions get a fixed
   min-height (enough for the longest caption's 3 lines) so every
   image starts at the same row position regardless of how many lines
   a given caption wraps to. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.feature-grid figure { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.feature-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.feature-grid h3 {
  font-size: 1.48rem;
  margin: 0;
  min-height: 6.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.feature-grid p { font-size: 1.1rem; color: var(--ink); margin: 0; }

/* Homepage feature grid: photo above title (What We Do page keeps the
   default title-above-photo order, so this is scoped to home-d3 only). */
.home-d3 .feature-grid img { order: -1; }
.home-d3 .feature-grid h3 { min-height: 0; }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  background: var(--white);
  padding: 32px 28px;
}
.testimonial-card .quote-mark {
  font-family: var(--font-head);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gray-dark);
  margin-bottom: 8px;
  display: block;
}
.testimonial-card p.quote { font-size: 1.15rem; margin: 0 0 16px; }
.testimonial-card p.attribution { font-size: 1rem; color: var(--gray-dark); margin: 0; }

/* Accordion (How it works) */
.accordion-title {
  text-align: center;
  font-weight: 600;
  font-size: 2.25rem;
  margin: 56px 0 16px;
}
details.acc {
  border-top: 1px solid #ccc;
  padding: 18px 0;
}
details.acc:last-of-type { border-bottom: 1px solid #ccc; }
details.acc summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.38rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after {
  content: "\2304";
  font-size: 1.4rem;
  margin-left: 16px;
  transition: transform 0.2s ease;
}
details.acc[open] summary::after { transform: rotate(180deg); }
details.acc p { margin: 14px 0 0; font-size: 1.25rem; }

/* Portfolio grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.photo-grid figure { margin: 0; aspect-ratio: 1/1; overflow: hidden; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ card grid */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.faq-card {
  background: var(--white);
  padding: 28px 24px;
}
.faq-card h3 { font-size: 1.67rem; margin-bottom: 12px; }
.faq-card p { font-size: 1.15rem; margin: 0; }

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team-card { position: relative; background: #1a1a1a; overflow: hidden; border-radius: 14px; }
.team-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 12%; display: block; }
.team-card .plate {
  position: absolute;
  left: 12.8%;
  bottom: 7.3%;
  width: 74.4%;
  box-sizing: border-box;
  background: var(--gray-light);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.38rem;
  text-align: center;
  border-radius: 8px;
}
.about-photo img { width: 100%; max-width: 620px; margin: 0 auto 40px; display: block; }

/* Contact form */
.contact-section .wrap { }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: start;
}
.contact-grid h1 { font-size: clamp(2.6rem, 6.2vw, 4.85rem); margin-bottom: 20px; }
.contact-grid > div:first-child p { font-size: 1.55rem; }
form.contact-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: 4px;
}
form.contact-form .req { color: #777; font-size: 0.9rem; font-weight: 400; }
form.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 22px;
}
form.contact-form .field { margin-bottom: 22px; }
form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form input[type="tel"],
form.contact-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--gray-dark);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  padding: 6px 2px;
  font-family: inherit;
}
form.contact-form input:focus,
form.contact-form textarea:focus { outline: none; border-bottom: 2px solid var(--ink); }
form.contact-form textarea { resize: vertical; min-height: 80px; }
form.contact-form .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 1rem;
}
form.contact-form .checkbox-row input { width: 16px; height: 16px; }
.form-status { margin-top: 16px; font-size: 0.98rem; }
.form-status.ok { color: #196619; }
.form-status.err { color: #a11; }
:root[data-theme="dark"] .form-status.ok { color: #5fd576; }
:root[data-theme="dark"] .form-status.err { color: #ff7a7a; }

/* Footer */
footer.site {
  background: var(--gray-light);
  padding: 56px 0 32px;
}
footer.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
footer.site .logo-foot img { height: 92px; }
footer.site .foot-cols { display: flex; gap: 64px; }
footer.site h4 { font-family: var(--font-head); font-weight: 500; font-size: 1.3rem; margin: 0 0 12px; }
footer.site p, footer.site a { font-family: var(--font-body); font-size: 1.05rem; color: var(--ink); text-decoration: none; margin: 0 0 6px; }
footer.site a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .logo img { height: clamp(64px, 12vw, 100px); }
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  form.contact-form .row { grid-template-columns: 1fr; gap: 0; }
  footer.site .foot-cols { gap: 40px; }

  nav.main { gap: 10px; }
  .nav-toggle { display: flex; order: 2; }
  .theme-toggle { order: 1; margin-left: 0; }
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    order: 3;
    background: var(--white);
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
    padding: 0 32px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.15s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.12s ease, padding 0.15s cubic-bezier(0.65, 0, 0.35, 1);
  }
  :root[data-theme="dark"] .nav-links { border-top: 1px solid var(--gray-mid); }
  .nav-links.open {
    max-height: 340px;
    opacity: 1;
    padding: 12px 32px 20px;
  }
  .nav-links a { padding: 8px 0; width: 100%; font-size: 1.1rem; }
  .nav-links .theme-toggle { margin: 8px 0 0; }
}

@media (max-width: 640px) {
  .icon-grid, .photo-grid { grid-template-columns: 1fr 1fr; }
  .faq-grid, .feature-grid { grid-template-columns: 1fr; }
  .faq-card h3 { font-size: 1.3rem; }
  .faq-card p { font-size: 1.05rem; }
  .feature-grid h3 { min-height: 0; }
}