/* ─────────────────────────────────────────────
   858creatives — Alisha Sharma
   ───────────────────────────────────────────── */

:root {
  --ink:        #f3f7fb;
  --paper:      #0f1722;
  --paper-dim:  #65738a;
  --rule:       rgba(15, 23, 34, 0.14);
  --accent:     #2456d6;
  --sand:       #4e7fd0;

  --display: "Instrument Serif", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

em { font-style: italic; color: var(--sand); }

a { color: inherit; }

/* ── Nav ─────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem var(--gut);
  background: rgba(243, 247, 251, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav__mark {
  font-family: var(--display);
  font-size: 1.5rem; letter-spacing: 0.02em;
  text-decoration: none; margin-right: auto;
}
.nav__mark span { color: var(--accent); font-size: 0.75em; vertical-align: super; margin-left: 2px; }
.nav__links { display: flex; gap: 1.75rem; }
.nav__links a {
  font-size: 0.83rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--paper-dim); transition: color .2s;
}
.nav__links a:hover { color: var(--paper); }

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  background: var(--accent); color: #fff;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; border-radius: 100px;
  transition: transform .2s, opacity .2s;
}
.btn:hover { transform: translateY(-2px); opacity: 0.92; }
.btn--ghost { background: transparent; color: var(--paper); border: 1px solid var(--rule); }
.btn--ghost:hover { border-color: var(--paper); }
.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.78rem; }

/* ── Hero ────────────────────────────────── */
.hero { padding: clamp(4rem, 12vh, 9rem) var(--gut) clamp(3rem, 8vh, 5rem); max-width: var(--max); }
.eyebrow {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-dim); margin: 0 0 2rem; line-height: 1.9;
}
/* Name on its own line, title beneath. The name carries full ink so it leads;
   the title stays dim so it reads as a caption rather than competing. */
.eyebrow b { font-weight: 500; color: var(--paper); }
/* The title holds one line at every width so the eye drops straight to the
   headline instead of reading a two-line label. It shrinks rather than wraps. */
@media (max-width: 700px) { .eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; } }
@media (max-width: 345px) { .eyebrow { font-size: 0.62rem; letter-spacing: 0.07em; } }
.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 4.9vw, 4.15rem);
  line-height: 1.06; letter-spacing: -0.015em;
  margin: 0 0 1.75rem; max-width: 30ch;
}
/* Desktop gets all three lines at full size. On a phone the headline stays big
   and the black line wraps: a headline that clearly outranks the subhead matters
   more there than holding the three-line shape. Tuned so the italic still lands
   on two lines rather than orphaning "would." on a third. Four lines total. */
/* This break only exists on phones, where one long black line leaves "reason."
   stranded on a line of its own. Desktop ignores it and keeps the single line. */
.brk-m { display: none; }
@media (max-width: 686px) {
  .brk-m { display: inline; }
  .hero h1 { font-size: clamp(1.4rem, 7.6vw, 2.1rem); }
  /* Tighten the hero top and bottom so the marquee shows above the fold. */
  .hero { padding-top: 2.25rem; padding-bottom: 1.75rem; }
  .eyebrow { margin-bottom: 1.25rem; }
}
.hero__sub {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--paper-dim); max-width: 48ch; margin: 0 0 2.75rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero__avail {
  margin: 1.1rem 0 0; font-size: 0.85rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--paper-dim);
}

/* ── Marquee ─────────────────────────────── */
.marquee {
  overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0; background: rgba(15, 23, 34, 0.025);
}
.marquee__track { display: flex; width: max-content; animation: slide 68s linear infinite; }
.marquee__set { display: flex; align-items: center; gap: 1.1rem; padding-right: 1.1rem; }
.marquee__set span {
  font-family: var(--display); font-size: 1.5rem; white-space: nowrap;
}
.marquee__set i { color: var(--accent); font-style: normal; font-size: 0.7rem; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ── Stats ───────────────────────────────── */
/* Fixed column counts so six cells never leave an orphan. */
.stats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--ink); padding: 2.4rem 1.5rem; text-align: center; }
.stat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; color: var(--sand);
}
.stat span {
  display: block; margin-top: 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper-dim);
}

/* ── Sections ────────────────────────────── */
.section {
  padding: clamp(3.25rem, 7.5vh, 5.75rem) var(--gut);
  max-width: var(--max);
  border-bottom: 1px solid var(--rule);
}
.label {
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.5rem;
}
.section__h {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.8vw, 3.6rem); line-height: 1.08; letter-spacing: -0.01em;
  margin: 0 0 2.5rem; max-width: 22ch;
}
/* About only. Same size as every other section heading, just a wider measure,
   so the italic lands on two lines instead of orphaning "twice." on a third.
   Below ~700px the column is narrower than this anyway, so it changes nothing. */
.section__h--about { max-width: 24.5ch; }
/* On phones the measure is the viewport, not max-width, and the second italic
   line lands 8px too long, orphaning "twice." A hair more tracking closes it.
   Same font size as every other heading; only the letter-spacing moves. */
@media (max-width: 600px) {
  .section__h--about { letter-spacing: -0.025em; }
}

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; }
.col p { margin: 0 0 1.2rem; color: var(--paper-dim); }
.col p.lead { color: var(--paper); font-size: 1.16rem; }

.pull {
  margin: 2.25rem 0 0; padding: 0 0 0 1.6rem;
  border-left: 2px solid var(--accent);
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.25;
  max-width: 26ch;
}
.pull span { display: block; margin-top: 0.6rem; color: var(--sand); }

/* ── Case studies ────────────────────────── */
.case {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 2.5rem; padding: 3rem 0; border-top: 1px solid var(--rule);
}
.case:first-of-type { border-top: none; padding-top: 0; }
.case__body { min-width: 0; }
.case__client { font-family: var(--display); font-size: 1.7rem; margin: 0 0 0.35rem; }
.case__role { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-dim); margin: 0; }
.case__body h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.1rem); line-height: 1.18;
  margin: 0 0 1.8rem; color: var(--sand);
}
.case dl { margin: 0; display: grid; gap: 1.15rem; }
.case dt {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.3rem;
}
.case dd { margin: 0; color: var(--paper-dim); max-width: 62ch; }
.case dd.todo {
  color: var(--accent); border: 1px dashed rgba(36, 86, 214, 0.45);
  padding: 0.7rem 0.9rem; border-radius: 6px; font-size: 0.92rem;
}
/* Every Result reads the same: an accent rule on the left, body-coloured text.
   No boxes, no blue type, so the eye learns one shape across all five. */
.case dd.win {
  color: var(--paper-dim);
  border-left: 2px solid var(--accent); padding-left: 0.9rem;
}
.case dd b { color: var(--paper); font-weight: 600; }
/* DIGI runs two paragraphs under one Execution label; the copy carries the order. */
.case dd p { margin: 0 0 0.9rem; }
.case dd p:last-child { margin-bottom: 0; }
/* Roadblocks: plain list, not a callout box. The admission carries itself. */
.rocks { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.55rem; }
.rocks li { max-width: 60ch; }
.case dd.honest {
  font-size: 0.94rem; color: var(--paper-dim);
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 0.85rem 1rem; background: rgba(15, 23, 34, 0.025);
}

/* Stills sit two-up so they cost half the scroll; click opens full size. */


/* Desktop screenshot */
.shot { margin: 2.25rem 0 0; }
.shot a { display: block; }
.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: 8px;
  transition: opacity .2s;
}
.shot a:hover img { opacity: 0.88; }
.shot figcaption,
.reel figcaption {
  margin-top: 0.6rem; font-size: 0.8rem; color: var(--paper-dim);
}

/* Clip grids. Verticals share one 9:16 frame so rows line up; landscape clips
   keep their own native ratio, so they are never cropped at all. */
.reel {
  display: grid; gap: 1.1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-auto-flow: dense;          /* small clips backfill the gaps wide ones leave */
  align-items: start;
}
/* At 390px the content box is 350px, so a 170px minimum plus the gap only fits
   one column. Force two so clips pair up instead of stacking. */
@media (max-width: 560px) { .reel { grid-template-columns: repeat(2, 1fr); } }
.reel figure { margin: 0; min-width: 0; }

/* Fixed rows: one landscape (2 cols) plus two verticals (1 col each) = 4.
   At narrow widths it halves cleanly: landscape full width, then the pair. */
.reel--rows { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row;
               align-items: center; }   /* landscape sits centred against the verticals */
@media (max-width: 900px) {
  .reel--rows { grid-template-columns: repeat(2, 1fr); }
  /* Keep the landscape-then-pair rhythm when the grid halves: the wide clip in
     row two sits after its pair in the DOM, so pull it forward on small screens. */
  .reel--rows > :nth-child(1) { order: 1; }
  .reel--rows > :nth-child(2) { order: 2; }
  .reel--rows > :nth-child(3) { order: 3; }
  .reel--rows > :nth-child(6) { order: 4; }
  .reel--rows > :nth-child(4) { order: 5; }
  .reel--rows > :nth-child(5) { order: 6; }
  .reel--rows > :nth-child(7) { order: 7; }
  .reel--rows > :nth-child(8) { order: 8; }
  .reel--rows > :nth-child(9) { order: 9; }
}

/* Landscape across the top, three verticals in a row beneath it. */
.reel--ls { grid-template-columns: repeat(3, 1fr); }
.reel--ls .wide { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .reel--ls { grid-template-columns: repeat(2, 1fr); }
  /* three verticals in a two-column grid leaves one alone: centre it */
  .reel--ls > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.55rem); }
}
.reel video {
  position: absolute; display: block; border: 0;
  max-width: none;                 /* width is set per clip below, in frame units */
}
/* Each clip sits in a fixed frame that shows only its live pixels. Several
   recordings ship with letterboxing baked into the file, so the offsets below
   push those bars outside the frame. Measured from eight frames per clip and
   taking the smallest bar, so nothing that ever animates gets cut. Content is
   pinned to the TOP of the frame: brand logos survive, trims come off the bottom. */
.fr {
  position: relative; overflow: hidden;
  background: #fff;                /* any residual sliver reads as page, not a grey bar */
  border: 1px solid var(--rule); border-radius: 12px;
}
.phone  { }
.square .fr { aspect-ratio: 1 / 1; }
.wide   { grid-column: span 2; }
.square { grid-column: span 2; }

/* per-clip frames */
.c-digi-blue-me-away { aspect-ratio: 0.5625; }
.c-digi-blue-me-away video { width: 102.82%; left: -2.34%; top: -0.53%; }
.c-digi-collection { aspect-ratio: 0.5625; }
.c-digi-collection video { width: 100.00%; left: -0.00%; top: -1.08%; }
.c-digi-glue-pdp { aspect-ratio: 0.5625; }
.c-digi-glue-pdp video { width: 102.85%; left: -2.38%; top: -0.27%; }
.c-digi-how-to-apply { aspect-ratio: 0.5625; }
.c-digi-how-to-apply video { width: 105.38%; left: -2.69%; top: 0.00%; }
.c-flaus-page-scroll { aspect-ratio: 0.5625; }
.c-flaus-page-scroll video { width: 105.16%; left: -2.82%; top: -0.53%; }
.c-flaus-plaque { aspect-ratio: 0.5625; }
.c-flaus-plaque video { width: 100.00%; left: -0.00%; top: 0.00%; }
.c-flaus-ugc { aspect-ratio: 2.1429; }
.c-flaus-ugc video { width: 103.00%; left: -1.50%; top: -0.00%; }
.c-halfdays { aspect-ratio: 0.5625; }
.c-halfdays video { width: 100.00%; left: -0.00%; top: 0.00%; }
.c-higherdose { aspect-ratio: 0.5625; }
.c-higherdose video { width: 100.00%; left: -0.00%; top: -0.00%; }
.c-hone-ads { aspect-ratio: 1.4545; }
.c-hone-ads video { width: 100.00%; left: -0.00%; top: -0.00%; }
.c-jolie { aspect-ratio: 0.5625; }
.c-jolie video { width: 100.00%; left: -0.00%; top: -0.00%; }
.c-laundry-sauce-bright-twist { aspect-ratio: 0.5625; }
.c-laundry-sauce-bright-twist video { width: 167.93%; left: -33.71%; top: -6.67%; }
.c-laundry-sauce-reviews { aspect-ratio: 0.5625; }
.c-laundry-sauce-reviews video { width: 103.00%; left: -1.50%; top: -0.00%; }
.c-laundry-sauce-scent { aspect-ratio: 1.8045; }
.c-laundry-sauce-scent video { width: 100.00%; left: -0.00%; top: 0.00%; }
.c-laundry-sauce-sexy { aspect-ratio: 0.5625; }
.c-laundry-sauce-sexy video { width: 103.00%; left: -1.50%; top: -0.00%; }
.c-little-words-collabs { aspect-ratio: 1.7778; }
.c-little-words-collabs video { width: 100.00%; left: -0.00%; top: -0.00%; }
.c-little-words-lilo { aspect-ratio: 0.5625; }
.c-little-words-lilo video { width: 175.26%; left: -38.42%; top: -10.10%; }
.c-momentous { aspect-ratio: 0.5625; }
.c-momentous video { width: 190.62%; left: -45.60%; top: -14.37%; }
.c-set-active-1 { aspect-ratio: 1.7181; }
.c-set-active-1 video { width: 100.00%; left: -0.00%; top: -22.41%; }
.c-the-class { aspect-ratio: 0.5625; }
.c-the-class video { width: 100.00%; left: -0.00%; top: -0.00%; }


.more { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.more h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.6rem;
  margin: 0; color: var(--paper);
}
.more__note {
  margin: 0.6rem 0 0; color: var(--paper-dim);
  font-size: 0.95rem; max-width: 56ch;
}

/* Email screenshots: the entire send, scaled to fit. No cropping, no scrolling. */
.emails {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem; margin-top: 1.75rem;
}
.email { margin: 0; min-width: 0; }
.email__frame {
  display: flex; justify-content: center;
  border: 1px solid var(--rule); border-radius: 8px;
  background: rgba(15, 23, 34, 0.04); padding: 0.5rem;
}
.email__frame img {
  max-height: 620px; width: auto; max-width: 100%;
  height: auto; display: block; border-radius: 4px;
}
.email figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--paper-dim); }


/* ── What I do: three authored capability areas, not a card grid ── */
.caps { list-style: none; margin: 0; padding: 0; }
.caps li {
  display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
  gap: 1.5rem; padding: 2.1rem 0; border-top: 1px solid var(--rule);
}
.caps li:first-child { border-top: none; padding-top: 0; }
/* A word, not a numeral. 01/02/03 read as a closed set of three services;
   these name what each area is for, so the column earns its width. */
.caps b {
  font-family: var(--sans); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); line-height: 1.35; padding-top: 0.6rem;
  display: block;
}
.caps h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15;
  margin: 0 0 0.7rem; color: var(--paper);
}
.caps p { margin: 0; color: var(--paper-dim); max-width: 60ch; }
.caps__eg {
  margin-top: 0.9rem !important; font-size: 0.86rem;
  letter-spacing: 0.02em; color: var(--paper-dim);
}
.caps__eg a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.caps__eg a:hover { border-bottom-color: var(--accent); }
@media (max-width: 600px) {
  .caps li { grid-template-columns: 1fr; gap: 0.35rem; }
  .caps b { padding-top: 0; }
}

/* hero: role line leads, the psychology line sits under it */
/* The subhead above this is gone, so it no longer needs pulling up. */
.hero__note {
  margin: 0 0 2.4rem; color: var(--paper-dim);
  font-size: 1.05rem;
}

/* ── Brand wall ──────────────────────────── */
.wall__note {
  margin: -1.75rem 0 2.25rem; color: var(--paper-dim);
  font-size: 0.92rem; max-width: 60ch;
}

/* Logo row. Files are pre-normalised to flat black on transparency at a
   uniform height, so no filters or blend modes are needed here. */
.logos {
  list-style: none; margin: 0 0 2.5rem; padding: 0 0 2.1rem;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.35rem clamp(1.75rem, 3.4vw, 3rem);
}
.logos li { display: flex; align-items: center; }
.logos img {
  height: 20px; width: auto; display: block;
  opacity: 0.6; transition: opacity .25s ease;
}
.logos li:hover img { opacity: 1; }

.wall {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem;
}
.wall li {
  font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.3; color: var(--paper-dim); transition: color .18s ease;
}
.wall li.is-key { color: var(--paper); }
.wall li:hover { color: var(--accent); }
.wall li:not(:last-child)::after {
  content: "·"; color: var(--accent); opacity: 0.55; margin-left: 0.85rem;
}

/* ── Portrait ────────────────────────────── */
.portrait { margin: 0 0 2rem; max-width: 320px; }
.portrait img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
}


/* ── Timeline ────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.timeline li {
  position: relative; padding: 0 0 1.6rem 1.6rem;
  border-left: 1px solid var(--rule);
}
.timeline li::before {
  content: ""; position: absolute; left: -4.5px; top: 0.55rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0.5rem; }
.timeline b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.timeline time { display: block; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); margin: 0.15rem 0 0.4rem; }
.timeline p { margin: 0; color: var(--paper-dim); font-size: 0.95rem; }
.timeline__note {
  margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.35rem; color: var(--sand);
}

/* ── Contact ─────────────────────────────── */
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; }
.contact h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 0.75rem; }
.contact p { color: var(--paper-dim); margin: 0 0 1.6rem; max-width: 46ch; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 3rem; }
.contact__secondary { padding-left: 3rem; border-left: 1px solid var(--rule); }
/* Three separate openings, not a paragraph. Same accent rule as every Result. */
.contact__kicker {
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.9rem !important;
}
.openings {
  margin: 0; padding-left: 2.1rem; display: grid; gap: 0.55rem;
  border-left: 2px solid var(--accent); color: var(--paper-dim); max-width: 46ch;
}
.footer span { line-height: 1.9; }
.link { color: var(--accent); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────── */
.footer {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  padding: 2.25rem var(--gut);
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-dim);
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 860px) {
  .case { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__secondary { padding-left: 0; padding-top: 2.5rem; border-left: none; border-top: 1px solid var(--rule); }
  .nav__links { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .btn:hover { transform: none; }
}