/* ═══════════════════════════════════════════════════
   Solrik , solrik.com
   Brand: Righteous (wordmark) · Lato 300/400/700
   Palette per Branding/solrik_brand_final.html
   ═══════════════════════════════════════════════════ */

/* ── Fonts ── */
@font-face {
  font-family: 'Righteous';
  src: url('assets/fonts/Righteous-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Lato-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Lato-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Lato-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('assets/fonts/Lato-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Tokens ── */
:root {
  /* fixed .header: 84px inner + the 4px color band above it */
  --header-h: 88px;
  --yellow:   #F5CC00;
  --red:      #E8383C;
  --pink:     #F0A0A8;
  --blue:     #2E86C8;
  --green:    #2A6B42;
  --terra:    #E87060;
  --wood:     #C8A46E;
  --greyblue: #7AAAB8;
  --darkwood: #8B6F5E;   /* brand palette; was referenced with no fallback and never defined */
  --warmgrey: #C8C0B4;
  --charcoal: #1E1E1C;
  --white:    #FFFFFF;
  --muted:    #A09C96;
  --rule:     #EBEBEB;
  --body:     #3A3A38;
  --tint:     #FAF8F5;
  --wash:     #EFF4F6;   /* pale grey-blue, drawn from the brand's grey blue */
  --rule-warm:#E6E0D4;

  --wrap: 1180px;
  --gut: 56px;
  --sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Righteous', var(--sans);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }

body {
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--charcoal); color: var(--white);
  padding: 12px 20px; font-size: 14px;
}
.skip:focus { left: 0; }

/* ── Brand color helpers ── */
.c-y { color: var(--yellow); } .c-r { color: var(--red); } .c-p { color: var(--pink); }
.c-b { color: var(--blue); }   .c-g { color: var(--green); } .c-t { color: var(--terra); }

/* ── Color bands ── */
.bands { display: flex; width: 100%; }
.bands i { flex: 1; display: block; }
.bands--thin { height: 4px; }
.bands--hero { height: 10px; margin-top: 88px; }

/* ── Logo ── */
.logo { text-decoration: none; display: inline-flex; align-items: baseline; }
.logo__mark {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
/* Optical kerning per brand guide , S–O, R–I and I–K tightened */
.logo__mark b { font-weight: 400; }
.logo__mark b:nth-child(1) { letter-spacing: -0.035em; }
.logo__mark b:nth-child(4) { letter-spacing: -0.045em; }
.logo__mark b:nth-child(5) { letter-spacing: -0.045em; }
.logo__mark--sm { font-size: 26px; }

/* ── Header ── */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow 0.3s var(--ease);
}
.header.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 8px 28px rgba(30,30,28,0.06); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.nav { display: flex; align-items: center; gap: 34px; }
.nav a:not(.btn) {
  font-size: 13px; font-weight: 400; text-decoration: none;
  letter-spacing: 0.06em; color: var(--body);
  transition: color 0.2s var(--ease);
}
.nav a:not(.btn):hover { color: var(--charcoal); }
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1.5px; background: var(--charcoal);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }

/* ── Buttons ── */
.btn {
  display: inline-block;
  background: var(--charcoal); color: var(--white);
  font-size: 14px; font-weight: 400; letter-spacing: 0.08em;
  padding: 15px 30px; border-radius: 100px;
  text-decoration: none; border: 1.5px solid var(--charcoal);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.btn--sm { padding: 10px 22px; font-size: 13px; }
.btn--ghost { background: transparent; color: var(--charcoal); }
.btn--ghost:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.btn--yellow {
  background: var(--yellow); border-color: var(--yellow); color: var(--charcoal);
  font-weight: 700; align-self: flex-start;
}
.btn--yellow:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }

/* ── Burger / mobile nav ── */
.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 9px 7px;
  flex-direction: column; justify-content: space-between;
}
.burger span {
  display: block; height: 1.5px; width: 100%; background: var(--charcoal);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

.mobilenav {
  display: none; flex-direction: column;
  border-top: 0.5px solid var(--rule); background: var(--white);
  padding: 8px var(--gut) 24px;
}
.mobilenav a {
  padding: 15px 0; text-decoration: none; font-size: 18px; font-weight: 300;
  border-bottom: 0.5px solid var(--rule);
}
.mobilenav.is-open { display: flex; }

/* ── Hero ── */
.hero { padding: 168px 0 0; }
.eyebrow {
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; margin-bottom: 40px;
}
.hero__title {
  font-weight: 300;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 17ch;
  margin-bottom: 36px;
}
.hero__title em { font-style: italic; color: var(--body); }
.hero__lede {
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.8; color: var(--body);
  max-width: 62ch; margin-bottom: 44px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 96px; }
.hero__tag {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; font-style: italic;
  color: var(--charcoal); padding-bottom: 72px;
}

/* ── Sections ── */
.section { padding: 128px 0; border-bottom: 0.5px solid var(--rule); }
.section--wash { background: var(--wash); border-bottom: none; }
.section--tint { background: var(--tint); border-bottom: none; }

.section-label {
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 36px;
}
.section-label--light { color: rgba(255,255,255,0.45); }

.section-title {
  font-weight: 300;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.15; letter-spacing: -0.02em;
  max-width: 20ch; margin-bottom: 28px;
}
.section-title--light { color: var(--white); }

.section-lede {
  font-size: 18px; line-height: 1.85; color: var(--body);
  max-width: 60ch; margin-bottom: 72px;
}
.section-lede--light { color: rgba(255,255,255,0.6); }

/* ── Services ── */
.services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.svc {
  background: var(--white); padding: 44px 36px 48px;
  position: relative; overflow: hidden;
  transition: background 0.35s var(--ease);
}
.svc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.svc:hover::before { transform: scaleX(1); }
.svc:hover { background: var(--tint); }
/* --accent-ink lets a card use a darker tone for small text where the
   flat brand color would fail contrast on white (yellow, pink). */
.svc__num {
  display: block; font-family: var(--display); font-size: 13px;
  color: var(--accent-ink, var(--accent)); margin-bottom: 22px; letter-spacing: 0.05em;
}
.svc h3 {
  font-size: 21px; font-weight: 400; line-height: 1.35;
  letter-spacing: -0.01em; margin-bottom: 14px;
}
.svc p { font-size: 15.5px; line-height: 1.8; color: var(--body); }

.svc__credit {
  margin-top: 16px; padding-top: 14px;
  border-top: 0.5px solid var(--rule);
  font-size: 13px !important; color: var(--muted) !important;
}
.svc__credit a {
  color: var(--accent-ink, var(--accent));
  text-decoration: none; border-bottom: 0.5px solid currentColor;
  padding-bottom: 1px;
}
.svc__credit a:hover { color: var(--charcoal); }

/* ── Also list ── */
.also { display: flex; gap: 48px; margin-top: 72px; align-items: baseline; flex-wrap: wrap; }
.also__label {
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--muted); flex-shrink: 0;
}
.also__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px;
}
.also__list li {
  font-size: 14.5px; color: var(--body);
  border: 0.5px solid var(--rule); border-radius: 100px;
  padding: 8px 20px;
}

/* ── Selected work ── */
.work { list-style: none; border-top: 0.5px solid var(--rule); }
.work__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 48px; align-items: center;
  padding: 44px 0 44px 24px;
  border-bottom: 0.5px solid var(--rule);
  position: relative;
}
.work__item::before {
  content: ''; position: absolute; left: 0; top: 44px; bottom: 44px;
  width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s var(--ease);
}
.work__item:hover::before { transform: scaleY(1); }
.work__text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.work__head { display: flex; flex-direction: column; gap: 8px; }
.work__item h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 300; letter-spacing: -0.015em; }
.work__item h3 a { text-decoration: none; transition: color 0.25s var(--ease); }
.work__item h3 a:hover { color: var(--accent); }
.work__role {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--muted); line-height: 1.9;
}
.work__text > p { font-size: 15.5px; line-height: 1.8; color: var(--body); }
.work__url { font-size: 13px; color: var(--muted); }

.work__more {
  font-size: 13px; letter-spacing: 0.02em; text-decoration: none;
  color: var(--accent-ink, var(--accent));
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity 0.25s var(--ease);
}
.work__more:hover { opacity: 0.65; }

/* A work entry with no screenshot: we run the marcomm but not their website, so
   showing a site shot would claim work we did not do. Text spans the full width
   rather than leaving an empty image column. */
.work__item--text { grid-template-columns: minmax(0, 1fr); }
.work__item--text .work__text { max-width: 68ch; }

/* Screenshot: decorative here , the site name above is the real link. */
.work__shot {
  display: block; border: 0.5px solid var(--rule); border-radius: 3px;
  overflow: hidden; background: var(--tint);
  box-shadow: 0 1px 2px rgba(30,30,28,0.04);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.work__shot img { display: block; width: 100%; height: auto; }
.work__item:hover .work__shot {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30,30,28,0.11);
}

/* ── Before / after comparison ──
   The clipped layer sits on top of the current site and is revealed by --pos.
   The control is a real range input: draggable, keyboard-operable, and with no
   JavaScript it simply renders at its initial position as a split view. */
.ba {
  position: relative; overflow: hidden;
  border: 0.5px solid var(--rule); border-radius: 3px; background: var(--tint);
  box-shadow: 0 1px 2px rgba(30,30,28,0.04);
  line-height: 0;
}
.ba__img { display: block; width: 100%; height: auto; }
.ba__clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__line {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--white);
  box-shadow: 0 0 0 1px rgba(30,30,28,0.22);
  transform: translateX(-1px); pointer-events: none;
}
.ba__line::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 6px rgba(30,30,28,0.3);
}
.ba__tag {
  position: absolute; bottom: 10px; z-index: 2;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1; padding: 6px 10px; border-radius: 100px;
  background: rgba(30,30,28,0.72); color: var(--white);
  pointer-events: none;
}
.ba__tag--a { left: 10px; }
.ba__tag--b { right: 10px; }
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; z-index: 3;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ba__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }
.ba__range:focus-visible { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Page by page ──
   Tall tearsheets of the same page before and after. Both halves of a pair are
   cropped to the same depth, so the comparison is like for like. The foot fade is
   on .sheet--cut only: it means the real page carries on below the crop, so a page
   short enough to be shown whole must not have it. */
.pages { margin-top: 96px; padding-top: 76px; border-top: 0.5px solid var(--rule); }
.pages__head { max-width: 62ch; margin-bottom: 52px; }
.pages__head h3 {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 300;
  letter-spacing: -0.015em; line-height: 1.25; margin: 14px 0 16px;
}
.pages__head p { font-size: 16px; line-height: 1.85; color: var(--body); }
.pages__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 48px; align-items: start;
}
.pair { margin: 0; }
.pair__name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 0.5px solid var(--rule);
}
.pair__name b { font-weight: 400; font-size: 16px; letter-spacing: -0.01em; }
.pair__name span { font-size: 12px; color: var(--muted); }
.pair__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sheet {
  position: relative; line-height: 0;
  border: 0.5px solid var(--rule); border-radius: 3px;
  overflow: hidden; background: var(--tint);
  box-shadow: 0 1px 2px rgba(30,30,28,0.04);
  transition: box-shadow 0.45s var(--ease);
}
.sheet:hover { box-shadow: 0 10px 28px rgba(30,30,28,0.10); }
.sheet img { display: block; width: 100%; height: auto; }
.sheet--cut::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events: none;
}
.sheet__tag {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  padding: 5px 9px; border-radius: 100px;
  background: rgba(30,30,28,0.72); color: var(--white);
}
.pages__foot { margin-top: 44px; font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
  .pages { margin-top: 64px; padding-top: 52px; }
  .pages__grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ── Case study pages ── */
.cs__back { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.cs__back:hover { color: var(--blue); border-color: currentColor; }
.cs { display: block; }
.cs__body { max-width: 68ch; }
.cs__body .section-title { margin-top: 0; }
.cs__body .section-title + p { margin-top: -8px; }
.cs__body p { font-size: 17px; line-height: 1.85; color: var(--body); margin-bottom: 22px; }
.cs__body h2 + p { margin-top: 0; }
.cs__body .section-title:not(:first-child) { margin-top: 56px; }
.cs__sub {
  font-size: clamp(19px, 2vw, 24px); font-weight: 300; letter-spacing: -0.01em;
  line-height: 1.3; margin: 44px 0 14px;
}
.cs__body .section-title + .cs__sub { margin-top: 28px; }

.cs__note {
  margin-top: 8px; padding: 20px 22px;
  background: var(--tint); border-left: 3px solid var(--greyblue); border-radius: 0 3px 3px 0;
  font-size: 15.5px !important; line-height: 1.8; color: var(--body);
}

/* Spec table at the top of a case study. Named .spec because .facts already
   exists for the About page's stacked definition list.
   KEEP IT TO FOUR CELLS. auto-fit gives up to five columns at the full wrap
   width, so a fifth cell wraps to a second row and the three empty tracks show
   the grid's own rule-colored background as grey blanks. */
.spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin: 0;
}
.spec > div { background: var(--white); padding: 18px 20px; }
.spec dt {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px;
}
.spec dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body); }

/* A wide before/after, for a case study rather than a list row */
.ba--wide { max-width: 1060px; }

/* The page-by-page block sits directly in a section here, so it needs no top rule */
.pages--flush { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Structure comparison ──
   Every page is rendered at the same scale and the same display width, so the
   heights are directly comparable. That comparison is the whole point of the
   graphic: one endless page against the pages that replaced it. */
.struct {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 48px; align-items: start; margin-top: 8px;
}
.struct__col { min-width: 0; }
.struct__label {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.struct__count {
  font-size: 19px; font-weight: 300; letter-spacing: -0.01em;
  color: var(--charcoal); margin-bottom: 18px;
}
.struct__pages { display: flex; gap: 10px; align-items: flex-start; flex-wrap: nowrap; }
.struct__col--new .struct__pages { flex-wrap: wrap; row-gap: 18px; }
.struct__page { display: block; width: 80px; height: auto; background: var(--tint); }
/* Caption above the image: the pages are all different lengths, so captions
   placed underneath would sit at nine different heights and read as untidy.
   Above, they align, and the page tops stay aligned too, which is the
   comparison the graphic is actually making. */
.struct__fig { margin: 0; display: flex; flex-direction: column-reverse; }
.struct__fig figcaption {
  margin-bottom: 7px; font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); width: 80px; line-height: 1.5;
  /* Reserve two lines: a caption that wraps would otherwise push its page down
     and break the top alignment the whole comparison depends on. */
  min-height: 2lh; display: flex; align-items: flex-end;
}
.struct__pages--wrap { flex-wrap: wrap; row-gap: 22px; }

.struct__note { margin-top: 18px; font-size: 13px; color: var(--muted); max-width: 40ch; }

@media (max-width: 760px) {
  .struct { grid-template-columns: 1fr; gap: 40px; }
  .struct__page { width: 62px; }
  .struct__fig figcaption { width: 62px; }
}

/* ── Scope grid ──
   What we actually run for a client, stated before any single deliverable, so a
   case study about one project does not read as the whole engagement. */
.scope {
  list-style: none; display: grid;
  /* Fixed 3 columns rather than auto-fit: there are nine items, so three columns
     always fill exactly three rows. auto-fit gave four columns and left three
     empty cells showing the grid's own background as grey blanks. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
}
.scope li {
  background: var(--white); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 7px;
}
.scope b {
  font-weight: 400; font-size: 15.5px; letter-spacing: -0.01em; color: var(--charcoal);
}
.scope span { font-size: 13.5px; line-height: 1.7; color: var(--body); }
.scope li::before {
  content: ''; display: block; width: 18px; height: 2px;
  background: var(--green); margin-bottom: 4px;
}

@media (max-width: 900px) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .scope { grid-template-columns: 1fr; } }

/* ── Retouching grid ── */
.shots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.shots figure { margin: 0; }
.shots img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 3px; background: var(--rule);
}
.shots figcaption {
  margin-top: 10px; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}

/* Retouching page: fewer, larger frames than the 3-up teaser on the Work page */
.shots--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.shots--lg figcaption { font-size: 10.5px; }
@media (max-width: 900px) { .shots--lg { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } }
@media (max-width: 560px) { .shots--lg { grid-template-columns: 1fr; } }

/* ── Social ── */
.social { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: 64px; align-items: start; }
.social__text .section-lede { margin-bottom: 40px; }
.social__shot {
  margin: 0; border: 0.5px solid var(--rule); border-radius: 4px;
  overflow: hidden; background: var(--card, var(--white));
  box-shadow: 0 1px 2px rgba(30,30,28,0.04);
}
.social__shot img { display: block; width: 100%; height: auto; }

/* ── Steps ── */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.step__num {
  display: block; font-family: var(--display); font-size: 38px;
  line-height: 1; margin-bottom: 24px;
}
.step h3 {
  color: var(--charcoal); font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em; margin-bottom: 14px;
}
.step p { color: var(--body); font-size: 15.5px; line-height: 1.8; }

/* ── Clients ── */
.clients {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--rule);
}
.clients li {
  font-size: clamp(20px, 2.1vw, 27px); font-weight: 300;
  letter-spacing: -0.015em; color: var(--charcoal);
  padding: 30px 0; border-bottom: 0.5px solid var(--rule);
  padding-right: 24px;
}
.clients__note { margin-top: 40px; color: var(--muted); font-size: 15px; }

/* ── About ── */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.about .section-title { margin-bottom: 0; }
.about__body p { color: var(--body); font-size: 17px; line-height: 1.9; margin-bottom: 22px; }
.about__who {
  font-size: 21px; font-weight: 400; letter-spacing: -0.01em;
  margin: 44px 0 16px; color: var(--charcoal);
}
.about__body strong { font-weight: 700; color: var(--charcoal); }

.about__tag {
  font-size: 24px !important; font-weight: 300; font-style: italic;
  color: var(--charcoal) !important; margin-top: 34px !important; margin-bottom: 0 !important;
}

/* ── Contact ── */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact .section-lede { margin-bottom: 40px; }
.contact__direct { font-size: 21px; font-weight: 300; }
.contact__direct a {
  color: var(--yellow); text-decoration: none;
  border-bottom: 1px solid rgba(245,204,0,0.35); padding-bottom: 3px;
  transition: border-color 0.25s var(--ease);
}
.contact__direct a:hover { border-color: var(--yellow); }
.contact__direct--note {
  font-size: 16px; font-style: italic; color: var(--muted);
  max-width: 42ch; line-height: 1.8;
}

.form { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; font-weight: 300;
  color: var(--charcoal); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-warm);
  padding: 10px 0; border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.field textarea { resize: vertical; line-height: 1.7; }
.field select option { color: var(--charcoal); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--charcoal);
}
.hp { position: absolute; left: -9999px; }

/* ── Footer ── */
.footer { background: var(--tint); color: var(--body); padding-top: 80px; border-top: 0.5px solid var(--rule-warm); }
.footer__inner {
  display: flex; justify-content: space-between; gap: 48px;
  flex-wrap: wrap; padding-bottom: 56px;
}
.footer__desc { font-style: italic; font-weight: 300; font-size: 17px; margin-top: 14px; color: var(--muted); }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a {
  text-decoration: none; font-size: 14.5px;
  transition: color 0.2s var(--ease);
}
.footer__links a:hover { color: var(--charcoal); }
.footer__base {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 0.5px solid var(--rule-warm);
  padding-top: 26px; padding-bottom: 30px;
  font-size: 12.5px; color: var(--muted);
}

.footer__social { display: inline-flex; align-items: center; gap: 7px; }
.footer__social svg { flex-shrink: 0; opacity: 0.75; }
.footer__social:hover svg { opacity: 1; }

/* ── Legal pages ── */
.legal { max-width: 68ch; }
.legal__date {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 48px;
}
.legal h2 {
  font-size: 21px; font-weight: 400; letter-spacing: -0.01em;
  margin: 46px 0 14px; color: var(--charcoal);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: 16.5px; line-height: 1.85; color: var(--body); margin-bottom: 16px; }
.legal a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; }
.legal strong { font-weight: 700; color: var(--charcoal); }

.footer__fine { margin-left: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ── Reveal on scroll ── */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ═══ Responsive ═══ */
@media (max-width: 1000px) {
  :root { --gut: 40px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .work__item { grid-template-columns: 1fr; gap: 26px; }
  .social { grid-template-columns: 1fr; gap: 36px; }
  .work__item::before { top: 36px; bottom: 36px; }
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .clients { grid-template-columns: repeat(2, 1fr); }
  .about, .contact { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 720px) {
  :root { --gut: 24px; }
  body { font-size: 16px; }
  .nav { display: none; }
  .burger { display: flex; }
  :root { --header-h: 72px; }
  .header__inner { height: 68px; }
  .bands--hero { margin-top: 72px; }
  .hero { padding-top: 124px; }
  .hero__title { max-width: none; margin-bottom: 28px; }
  .br-lg { display: none; }
  .hero__cta { margin-bottom: 64px; }
  .hero__tag { padding-bottom: 56px; }
  .section { padding: 84px 0; }
  .section-lede { margin-bottom: 48px; }
  .services { grid-template-columns: 1fr; }
  .shots { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .svc { padding: 36px 28px 40px; }
  .clients { grid-template-columns: 1fr; }
  .clients li { padding: 22px 0; }
  .also { gap: 20px; margin-top: 48px; }
  .footer__inner { flex-direction: column; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ═══ Multi-page additions ═══ */

/* Sub-page header block. Sits under the fixed site header, so it carries the
   same top offset the home hero does. */
.pagehead { padding: 168px 0 0; }
.pagehead__title {
  font-weight: 300;
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1.12; letter-spacing: -0.025em;
  max-width: 18ch; margin-bottom: 26px;
  text-wrap: balance;
}
.pagehead__lede {
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.85;
  color: var(--body); max-width: 60ch;
}
.pagehead + .section { padding-top: 88px; }

/* A dark section that opens a page needs the header offset itself. */
.section--first { padding-top: 168px; }

/* Current page in the nav */
.nav a[aria-current="page"] { color: var(--charcoal); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent-nav, var(--charcoal)); }
.mobilenav a[aria-current="page"] { color: var(--charcoal); font-weight: 400; }
.footer__links a[aria-current="page"] { color: var(--charcoal); }

/* "See all" links */
.more { margin-top: 56px; }
.more a {
  font-size: 14px; letter-spacing: 0.06em; text-decoration: none;
  color: var(--charcoal); border-bottom: 1px solid var(--rule);
  padding-bottom: 4px; transition: border-color 0.25s var(--ease);
}
.more a:hover { border-color: var(--charcoal); }

/* Closing call to action */
.cta { display: flex; flex-direction: column; align-items: flex-start; }
.cta .section-title { margin-bottom: 24px; }
.cta .section-lede { margin-bottom: 40px; }

/* About: facts list */
.facts { display: flex; flex-direction: column; gap: 0; border-top: 0.5px solid var(--rule); }
.facts > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 18px;
  padding: 18px 0; border-bottom: 0.5px solid var(--rule);
}
.facts dt {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--muted); padding-top: 5px;
}
.facts dd { font-size: 16.5px; line-height: 1.7; color: var(--charcoal); }

@media (max-width: 720px) {
  .pagehead { padding-top: 124px; }
  .section--first { padding-top: 124px; }
  .pagehead + .section { padding-top: 64px; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
}


/* Derek Ahlberg Digital band, directly under the hero.
   Its job is recognition before anyone has to search: a client who knows Derek but
   not Solrik should see the connection on arrival, so a Solrik invoice is expected.
   Deliberately not a .svc or .section--wash card: it is an announcement, not a service.

   TRANSITIONAL, see the .dadbar note below. Revisit around April 2027. */
.dad {
  background: var(--tint);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 44px 0;
}
.dad__inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 11fr);
  gap: 20px 56px; align-items: start;
}
.dad__eyebrow {
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.dad__name {
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
}
.dad__body p { margin: 0 0 12px; max-width: 58ch; }
.dad__lead { font-weight: 600; color: var(--ink); }
.dad__links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; }
.dad__links a { font-weight: 600; }

@media (max-width: 760px) {
  .dad { padding: 34px 0; }
  .dad__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}


/* Slim strip under the header, homepage only.
   Derek's existing clients arrive knowing him and not Solrik, often with an invoice
   in hand, so the connection has to be legible before any scrolling. Kept to one
   quiet line; the .dad band below carries the explanation.

   TRANSITIONAL. Added 2026-10-05. Teresa's call was to run the strip and the .dad
   band together while the handover is still new, and to revisit around April 2027.
   Both are deliberate duplication, not an oversight. Remove or reduce them together. */
.dadbar {
  margin-top: var(--header-h);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--tint); border-bottom: 1px solid var(--rule);
  padding: 11px 20px; text-align: center;
  font-size: 14px; color: var(--body); text-decoration: none;
}
.dadbar strong { color: var(--ink); }
.dadbar:hover { background: var(--wash); }
.dadbar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--terra); flex: 0 0 7px;
}
.dadbar__go { color: var(--muted); }
.dadbar + .hero { padding-top: 80px; }
.dadbar + .pagehead { padding-top: 72px; }

@media (max-width: 720px) {
  .dadbar + .hero { padding-top: 52px; }
  .dadbar + .pagehead { padding-top: 48px; }
}
@media (max-width: 560px) {
  .dadbar { font-size: 13px; gap: 9px; padding: 10px 16px; }
  .dadbar__go { display: none; }
}