/* ==========================================================================
   sendaimike.com
   One stylesheet for the whole site. No build step, no framework.

   HOW THIS FILE IS ORGANISED
   1.  Variables ....... colours, fonts, spacing. Change things here first.
   2.  Reset ........... browser defaults
   3.  Base ............ body, headings, links
   4.  Layout .......... page width, sections
   5.  Header / nav
   6.  Buttons
   7.  Text blocks ..... long-form copy
   8.  Components ...... cards, credits, FAQ, quotes
   9.  Forms
   10. Footer
   11. Responsive ...... phone and tablet adjustments

   Search for the numbered headings to jump around.
   ========================================================================== */


/* 1. VARIABLES ============================================================ */
/* Change a colour here and it updates everywhere it's used. */

:root {
  /* Warm charcoal ramp, darkest to lightest.
     Derived from the palette's #594F4F so the darks stay warm rather than
     neutral black. The two lightest steps carry a hint of the pale green. */
  --black:      #171313;   /* page background */
  --grey-900:   #1f1a1a;   /* raised panels */
  --grey-800:   #2b2424;   /* borders, dividers */
  --grey-700:   #3b3232;   /* stronger borders */
  --grey-600:   #6e605d;   /* very dim text */
  --grey-400:   #9c8f8c;   /* muted text */
  --grey-200:   #cbc7bd;   /* body text */
  --white:      #e5fcc2;   /* headings — the palette's pale green */

  /* The single accent colour. Change this to re-skin the site. */
  --accent:     #45ada8;   /* teal */

  /* Rest of the palette, available if you want to reach for it.
     --accent-soft works as a second accent or a hover state.
     --slate is too low-contrast for small text — borders and fills only. */
  --accent-soft: #9de0ad;  /* light green */
  --slate:       #547980;  /* muted blue-teal */

  --font: 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, Consolas,
          'Liberation Mono', monospace;

  --page-width: 1120px;
  --gutter: 24px;
}


/* 2. RESET ================================================================ */

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}


/* 3. BASE ================================================================= */

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

body {
  background: var(--black);
  color: var(--grey-200);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Keeps the footer at the bottom on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

h1, h2, h3 {
  color: var(--white);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

h1 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  letter-spacing: 0.01em;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--white);
}

::selection {
  background: var(--accent);
  color: var(--black);
}

/* Visible outline when tabbing with a keyboard */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Small uppercase text used for nav, eyebrows and section labels */
.label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Hidden visually but still read aloud by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* "Skip to content" link — only appears when tabbed to */
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--accent);
  color: var(--black);
  padding: 10px 18px;
}


/* 4. LAYOUT =============================================================== */

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

/* Standard vertical spacing between sections */
.section {
  padding: 72px 0;
}

.section--tight {
  padding: 48px 0;
}

/* The first section on a page, sits below the sticky header */
.section--top {
  padding: 96px 0 56px;
}


/* 5. HEADER / NAV ========================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Matches --black at 88% so content blurs through as it scrolls under.
     If you change --black, change this too — rgba() can't read a variable. */
  background: rgba(23, 19, 19, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--grey-800);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.header__logo {
  color: var(--white);
}

.header__logo:hover {
  color: var(--accent);
}

.nav {
  display: flex;
  gap: 34px;
  list-style: none;
}

.nav a {
  color: var(--grey-400);
}

.nav a:hover {
  color: var(--white);
}

/* Marks the page you're currently on */
.nav a[aria-current='page'] {
  color: var(--accent);
}

/* Hamburger button — hidden on desktop, shown on phones (see section 11) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--grey-200);
  cursor: pointer;
  padding: 6px;
}

.nav-mobile {
  display: none;
  border-top: 1px solid var(--grey-800);
}

.nav-mobile ul {
  list-style: none;
}

.nav-mobile li + li {
  border-top: 1px solid var(--grey-800);
}

.nav-mobile a {
  display: block;
  padding: 16px 0;
  color: var(--grey-200);
}

.nav-mobile a[aria-current='page'] {
  color: var(--accent);
}


/* 6. BUTTONS ============================================================== */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* Solid teal — the main call to action */
.btn--primary {
  background: var(--accent);
  color: var(--black);
}

.btn--primary:hover {
  background: var(--white);
  color: var(--black);
}

/* Outlined — the secondary option */
.btn--ghost {
  border-color: var(--grey-700);
  color: var(--grey-200);
}

.btn--ghost:hover {
  border-color: var(--grey-400);
  color: var(--white);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}


/* 7. TEXT BLOCKS ========================================================== */

/* An eyebrow is the small teal line above a heading */
.eyebrow {
  color: var(--accent);
}

.h-hero {
  font-size: 66px;
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-top: 22px;
  max-width: 16em;
}

.h-page {
  font-size: 50px;
  margin-top: 22px;
  max-width: 16em;
}

.h-section {
  font-size: 34px;
  margin-bottom: 14px;
}

/* Wrap long-form paragraphs in <div class="copy"> */
.copy {
  max-width: 660px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--grey-200);
}

.copy p + p,
.copy ul,
.copy h2 {
  margin-top: 20px;
}

.copy h2 {
  font-size: 24px;
  margin-top: 40px;
}

.copy strong {
  color: var(--white);
  font-weight: 600;
}

.copy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bulleted list with a short teal dash instead of a dot */
.copy ul {
  list-style: none;
}

.copy li {
  position: relative;
  padding-left: 24px;
  margin-top: 10px;
}

.copy li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.lede {
  margin-top: 26px;
}


/* 8. COMPONENTS =========================================================== */

/* --- Full-bleed hero (home page) ---
   The photo spans the entire width of the screen, edge to edge, and the copy
   sits on top of it in a right-hand column. A dark gradient ("scrim") is laid
   over the right side of the photo so the headline stays readable no matter
   what's behind it.

   TO SWAP THE PHOTO: change the three url() lines below — the big one here and
   the two inside section 11 (RESPONSIVE) that load smaller files on smaller
   screens. Keep the same three-size setup so phones don't download the huge
   desktop file.

   TO MOVE THE CROP: background-position — first value is horizontal, second is
   vertical. `28% 32%` keeps the subject's head fully in frame on wide screens.
   Lower first value = crop moves left. Lower second value = crop moves up. */

.hero {
  position: relative;
  overflow: hidden;
}

/* min-height sets how tall the photo band is. Taller = less of the photo gets
   cropped away, because the shape of the band is closer to the shape of the
   photo. */
.hero__inner {
  position: relative;
  z-index: 2;              /* keeps text above the photo */
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 88px;
  padding-bottom: 88px;
}

/* Pushed to the right column, sitting over the darkest part of the scrim. */
.hero__text {
  max-width: 540px;
  margin-left: auto;
}

/* The eyebrow ("Seattle, Washington") is 11px, so it needs more contrast than
   the teal accent gives it once it's sitting on a photo. The lighter green from
   the palette clears the accessibility threshold comfortably. */
.hero .eyebrow {
  color: var(--accent-soft);
}

.hero .h-hero {
  font-size: 52px;
}

.hero__photo {
  position: absolute;
  inset: 0;                /* shorthand for top/right/bottom/left: 0 */
  width: 100%;
  z-index: 1;

  background-image: url('../media/hero-1600.webp');
  background-size: cover;
  background-position: 28% 32%;
  background-repeat: no-repeat;

  /* Knocks the photo back slightly so it sits inside the dark design
     instead of glaring against it. 1 = untouched, lower = darker. */
  filter: brightness(0.86);
}

/* The scrim. Sits between the photo and the text.
   Left-to-right it goes from almost clear (so the subject stays sharp) to
   near-solid on the right (so the headline has a clean dark bed). The second
   gradient fades the very bottom into the page background so the photo doesn't
   end on a hard horizontal line. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;    /* lets clicks pass through to anything beneath */
  background:
    linear-gradient(to bottom,
      transparent 62%,
      rgba(23, 19, 19, 0.72) 88%,
      var(--black) 100%),
    linear-gradient(to right,
      rgba(23, 19, 19, 0.08) 0%,
      rgba(23, 19, 19, 0.24) 30%,
      rgba(23, 19, 19, 0.70) 55%,
      rgba(23, 19, 19, 0.90) 72%,
      rgba(23, 19, 19, 0.92) 100%);
}

/* On very wide screens, load the larger file so the photo stays sharp. */
@media (min-width: 1500px) {
  .hero__photo {
    background-image: url('../media/hero-2400.webp');
  }
}

/* On very wide monitors the band gets extremely letterboxed, which crops the
   photo hard. Giving it more height keeps more of the shot visible. */
@media (min-width: 1800px) {
  .hero__inner {
    min-height: 800px;
  }
}

/* --- Media panel (holds the ReelCrafter player) --- */
.panel {
  margin-top: 20px;
  border: 1px solid var(--grey-800);
  border-radius: 12px;
  overflow: hidden;
  background: var(--grey-900);
}

.panel iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
}

/* --- Three-across service cards --- */
/* The 1px gap plus the grey background creates hairline dividers */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--grey-800);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 28px;
}

.card {
  background: var(--black);
  padding: 32px 28px;
}

.card h3 {
  font-size: 19px;
}

.card p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--grey-400);
}

.card__link {
  display: inline-block;
  margin-top: 22px;
}

/* --- Mix credits list --- */
.credits {
  list-style: none;
  margin-top: 28px;
  border-top: 1px solid var(--grey-800);
}

.credits li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--grey-800);
}

.credits__title {
  color: var(--white);
  font-weight: 500;
}

.credits__artist {
  font-size: 14px;
  color: var(--grey-400);
  margin-top: 3px;
}

.credits__meta {
  display: flex;
  gap: 18px;
  color: var(--grey-600);
}

/* --- Testimonials --- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 28px;
}

.quote {
  border-left: 1px solid var(--grey-700);
  padding-left: 22px;
}

.quote blockquote {
  font-size: 14px;
  color: var(--grey-200);
}

.quote figcaption {
  margin-top: 14px;
  color: var(--grey-400);
}

/* --- FAQ accordion --- */
/* Uses the browser's built-in <details> element. No JavaScript needed. */
.faq {
  margin-top: 28px;
  border-top: 1px solid var(--grey-800);
}

.faq details {
  border-bottom: 1px solid var(--grey-800);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  color: var(--white);
  font-weight: 500;
  list-style: none;
}

/* Hide the default triangle marker */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }

/* The + icon that rotates into an x when opened */
.faq summary svg {
  flex-shrink: 0;
  color: var(--grey-400);
  transition: transform 0.2s;
}

.faq details[open] summary svg {
  transform: rotate(45deg);
}

.faq__answer {
  padding-bottom: 24px;
  padding-right: 32px;
  font-size: 15px;
  line-height: 1.7;
}

.faq__answer p + p {
  margin-top: 14px;
}

.faq__answer strong {
  color: var(--white);
}

/* --- Definition-style service list (About page) --- */
.deflist {
  margin-top: 28px;
  border-top: 1px solid var(--grey-800);
}

.deflist__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--grey-800);
}

.deflist dt {
  color: var(--white);
  padding-top: 3px;
}

.deflist dd {
  font-size: 15px;
  color: var(--grey-400);
}

.deflist dd a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Brand name list (Content page) --- */
.brands {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 20px;
}

.brands li {
  font-size: 19px;
  font-weight: 500;
  color: var(--grey-200);
}

/* --- Vertical video thumbnails --- */
.reels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.reel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--grey-800);
  border-radius: 12px;
  background: var(--grey-900);
  color: var(--grey-600);
  transition: border-color 0.15s, color 0.15s;
}

.reel:hover {
  border-color: var(--grey-400);
  color: var(--accent);
}

/* --- Closing call-to-action box --- */
.cta {
  border: 1px solid var(--grey-800);
  border-radius: 16px;
  background: var(--grey-900);
  padding: 56px 40px;
  text-align: center;
}

.cta .copy {
  margin: 14px auto 0;
  max-width: 480px;
}


/* 9. FORMS ================================================================ */

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 64px;
}

.field + .field {
  margin-top: 22px;
}

.field label {
  display: block;
  color: var(--grey-200);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--grey-900);
  border: 1px solid var(--grey-700);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--white);
  transition: border-color 0.15s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--grey-600);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: 150px;
}

.field .optional {
  color: var(--grey-600);
}

/* The honeypot — a hidden field that spam bots fill in and humans don't */
.honeypot {
  display: none;
}

.aside-block + .aside-block {
  margin-top: 36px;
}

.aside-block h2 {
  color: var(--grey-400);
}

.aside-block p,
.aside-block a {
  margin-top: 12px;
  font-size: 15px;
}

.aside-block p {
  color: var(--grey-400);
}


/* 10. FOOTER ============================================================== */

.footer {
  margin-top: 96px;
  border-top: 1px solid var(--grey-800);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding: 52px 0;
}

.footer__tagline {
  max-width: 280px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--grey-400);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links a {
  color: var(--grey-400);
}

.footer__links a:hover {
  color: var(--accent);
}

.footer__legal {
  border-top: 1px solid var(--grey-800);
}

.footer__legal p {
  padding: 22px 0;
  font-size: 12px;
  color: var(--grey-600);
}


/* 11. RESPONSIVE ========================================================== */
/* Rules inside a media query only apply below that screen width. */

/* --- Tablet --- */
@media (max-width: 900px) {
  .h-hero { font-size: 46px; }
  .h-page { font-size: 38px; }

  /* Below 900px the overlay hero stops working — the column is too narrow to
     hold readable text on top of a photo. So it stacks instead: the photo
     becomes a full-width band across the top, faded out at the bottom, with
     the copy underneath. */
  .hero {
    display: flex;
    flex-direction: column;
  }

  /* Turn off the desktop scrim; the band gets its own fade below. */
  .hero::after {
    display: none;
  }

  .hero__inner {
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .hero__text {
    max-width: none;
    margin-left: 0;
  }

  .hero .h-hero { font-size: 46px; }

  .hero__photo {
    order: -1;              /* moves the photo above the copy */
    position: relative;
    inset: auto;
    width: 100%;
    height: 340px;
    background-image: url('../media/hero-1000.webp');
    background-position: 30% center;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }

  .cards,
  .quotes {
    grid-template-columns: 1fr;
  }

  .reels {
    grid-template-columns: repeat(2, 1fr);
  }

  .deflist__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .form-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* --- Phone --- */
@media (max-width: 640px) {
  .section      { padding: 52px 0; }
  .section--top { padding: 64px 0 40px; }

  .h-hero { font-size: 36px; }
  .h-page { font-size: 30px; }
  .h-section { font-size: 26px; }

  .hero .h-hero { font-size: 36px; }
  .hero__photo { height: 240px; }

  .copy { font-size: 16px; }

  /* Swap desktop nav for the hamburger */
  .nav        { display: none; }
  .nav-toggle { display: block; }

  /* Opened by js/site.js */
  .nav-mobile.is-open { display: block; }

  .panel iframe { height: 420px; }

  .cta { padding: 40px 24px; }

  .footer { margin-top: 64px; }
}

/* Respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}