/* =============================================
   HJ STUDIO — Photographic Edition
   Real photography as the design language
   ============================================= */

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

/* ---- DESIGN TOKENS ---- */
:root {
  /* Base palette — warm neutral, lets photography breathe */
  --bg:           #0d0c0a;   /* warm near-black */
  --bg-2:         #141210;   /* secondary panels */
  --bg-3:         #1c1a17;   /* cards */
  --bg-warm:      #f4f1ec;   /* warm off-white for light sections */

  --line:         rgba(255,255,255,0.08);
  --line-mid:     rgba(255,255,255,0.13);
  --line-warm:    rgba(0,0,0,0.1);

  --text:         #f2ede8;   /* warm white */
  --text-muted:   #8a8278;
  --text-faint:   #4a4540;

  --text-dark:    #1a1714;   /* for light section text */
  --text-dark-m:  #6a6560;

  /* Accent — one confident warm tone */
  --accent:       #5b5bd6;
  --accent-on:    #ffffff;

  /* Font stack */
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-body:  'DM Sans', system-ui, sans-serif;
  --f-mono:  'SF Mono', 'Fira Code', monospace;

  /* Spacing */
  --max-w:  1260px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --sec-v:  clamp(5rem, 9vw, 8rem);

  /* Motion */
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--sec-v) 0; }
.d-br { display: none; }
@media(min-width:768px){ .d-br { display: inline; } }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 99px; }
::selection { background: var(--accent); color: #fff; }

/* =============================================
   TYPOGRAPHY
   ============================================= */
.section-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.1rem;
}

.section-title {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 1.4rem;
}

.section-desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 520px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.82rem 1.65rem;
  border-radius: 4px;
  font-family: var(--f-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: background 0.2s var(--ease), transform 0.2s var(--spring), box-shadow 0.2s;
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover {
  background: #6a6ae0;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(91,91,214,0.35);
}
.btn--primary:active { transform: none; }

.btn--outline-light {
  background: transparent;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn--outline-light:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn--outline:hover {
  background: rgba(91,91,214,0.08);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn--white {
  background: #fff;
  color: #111;
}
.btn--white:hover {
  background: #f0ede8;
  transform: translateY(-1px);
}

.btn--lg { padding: 1rem 2rem; font-size: 0.95rem; }
.btn--full { width: 100%; justify-content: center; }

/* =============================================
   NAVBAR
   ============================================= */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 1.4rem 0;
  transition: padding 0.4s var(--spring), background 0.4s;
}

.navbar.scrolled {
  background: rgba(13,12,10,0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =============================================
   HJ MONOGRAM
   An interlocking H and J set in the site's own headline face, so the
   mark and the headlines share one voice. The J is oversized so it rises
   above the H's cap line and hooks below its baseline, and it sits dead
   centre so the H's crossbar splits either side of its stem.
   Scales with font-size — use it anywhere.
   ============================================= */
.hj-mark {
  position: relative;
  display: inline-block;
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1;
  color: currentColor;
  /* Room for the J's ascender and descender, which overflow the H */
  padding: 0.19em 0 0.23em;
}

.hj-mark i { font-style: normal; display: block; }

.hj-mark .hj-j {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 1.42em;
  transform: translate(-50%, -0.19em);
}

.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.logo-lockup .hj-mark { font-size: 1.5rem; }

.logo-wordmark {
  font-family: var(--f-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.nav-links { display: none; align-items: center; gap: 0.1rem; }

.nav-link {
  padding: 0.45rem 0.9rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.87rem;
  font-weight: 400;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover, .nav-link.active {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.nav-cta-link {
  padding: 0.55rem 1.2rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 4px;
  margin-left: 0.4rem;
  transition: background 0.2s, transform 0.2s var(--spring);
}
.nav-cta-link:hover { background: #6a6ae0; transform: translateY(-1px); }

/* Hamburger */
.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: 4px;
  z-index: 901; border-radius: 4px;
  transition: background 0.15s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.06); }

.nav-toggle span {
  display: block; height: 1.5px;
  background: rgba(255,255,255,0.8); border-radius: 2px;
  transition: all 0.3s var(--spring);
}
.nav-toggle span:first-child { width: 22px; }
.nav-toggle span:last-child  { width: 16px; }
.nav-toggle.open span:first-child { width: 20px; transform: translateY(3.75px) rotate(45deg); }
.nav-toggle.open span:last-child  { width: 20px; transform: translateY(-3.75px) rotate(-45deg); }

.nav-links.mobile-open {
  display: flex; flex-direction: column;
  position: fixed; inset: 0;
  background: rgba(13,12,10,0.97);
  backdrop-filter: blur(20px);
  justify-content: center; align-items: center;
  gap: 0.4rem; z-index: 900;
  animation: fadeIn 0.2s ease;
}
.nav-links.mobile-open .nav-link {
  font-size: 1.8rem;
  font-family: var(--f-serif);
  font-weight: 400;
  color: var(--text);
  padding: 0.6rem 2rem;
  letter-spacing: -0.01em;
}
.nav-links.mobile-open .nav-cta-link {
  font-size: 1rem; padding: 0.85rem 2.5rem; margin: 0.75rem 0 0;
  border-radius: 4px;
}

@media(min-width:900px){
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

/* =============================================
   HERO — full-bleed photograph + Ken Burns
   ============================================= */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;        /* text sits in lower half */
  overflow: hidden;
}

/* Photograph */
.hero-photo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: kenBurns 20s ease-out forwards;
  will-change: transform;
}

@keyframes kenBurns {
  0% { transform: scale(1.12); opacity: 0.95; }
  100% { transform: scale(1); opacity: 1; }
}

/* Gradient — weighted to the bottom so the top of the frame stays
   photographic, but strong enough behind the text to hold contrast. */
.hero-photo-gradient {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(13,12,10,0.95) 0%,
      rgba(13,12,10,0.72) 30%,
      rgba(13,12,10,0.35) 55%,
      rgba(13,12,10,0.05) 80%,
      transparent 100%);
}

/* On narrow screens the headline block covers most of the frame, so the
   scrim has to reach higher or the copy sits on bright highlights. */
@media(max-width:767px){
  /* Intentional mobile crop: the portrait frame takes a narrow vertical
     slice, and centring it lands on blank wall. Biasing right keeps the
     shopfront signage in shot so the first screen still reads as a real
     business. Measured contrast is also better here than centred. */
  .hero-photo { object-position: 85% 30%; }

  .hero-photo-gradient {
    background:
      linear-gradient(to top,
        rgba(13,12,10,0.96) 0%,
        rgba(13,12,10,0.85) 40%,
        rgba(13,12,10,0.6)  70%,
        rgba(13,12,10,0.3)  90%,
        rgba(13,12,10,0.15) 100%);
  }
}

/* Text content — lower portion of hero */
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 760px;
}

.hero-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  animation: fadeUp 0.9s 0.3s var(--spring) both;
}

.hero-headline {
  font-family: var(--f-serif);
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #fff;
  animation: fadeUp 0.9s 0.45s var(--spring) both;
}

.hero-headline em {
  font-style: italic;
  color: rgba(255,255,255,0.74);
}

.hero-subtext {
  font-size: clamp(0.97rem, 2vw, 1.1rem);
  color: rgba(255,255,255,0.75);
  line-height: 1.75;
  max-width: 440px;
  animation: fadeUp 0.9s 0.6s var(--spring) both;
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  animation: fadeUp 0.9s 0.72s var(--spring) both;
}

.hero-tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  animation: fadeUp 0.9s 0.84s var(--spring) both;
}

.hero-tags span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 0.18rem 0.55rem;
  transition: color 0.15s, border-color 0.15s;
}
.hero-tags span:hover {
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.25);
}

/* Scroll indicator */
.hero-scroll-hint {
  position: absolute;
  bottom: 1.75rem;
  right: var(--gutter);
  z-index: 2;
  color: rgba(255,255,255,0.3);
}

.scroll-dot-anim {
  animation: scrollDrop 2s ease-in-out infinite;
}

@keyframes scrollDrop {
  0%,100% { cy: 7; opacity: 0.6; }
  50%      { cy: 16; opacity: 0.2; }
}

/* =============================================
   MARQUEE TRUST BAR
   ============================================= */
.marquee-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: 0.85rem 0;
  overflow: hidden;
}

.marquee-track {
  display: flex; gap: 2.5rem;
  white-space: nowrap;
  animation: marquee 35s linear infinite;
  width: max-content;
}

.marquee-track span {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-weight: 400;
  letter-spacing: 0.06em;
}

.mdot { color: var(--accent) !important; opacity: 0.4; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media(prefers-reduced-motion:reduce){ .marquee-track { animation: none; } }

/* =============================================
   STORY BRIDGE — Business → Website
   ============================================= */
.story-section {
  background: var(--bg-2);
  overflow: hidden;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 480px;
}

@media(min-width:900px){
  .story-grid { grid-template-columns: 1fr auto 1fr; }
}

/* Photo col */
.story-photo-col {
  position: relative;
  overflow: hidden;
  height: 380px;
}

@media(min-width:900px){ .story-photo-col { height: auto; min-height: 520px; } }

.story-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s var(--ease);
  will-change: transform;
}

.story-photo-col:hover .story-photo {
  transform: scale(1.04);
}

.story-photo-label {
  position: absolute;
  bottom: 2rem; left: 2rem;
  font-family: var(--f-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
  opacity: 0;
  animation: fadeUp 0.7s 0.4s var(--spring) both;
}

/* Connector */
.story-connector {
  display: none;
}

@media(min-width:900px){
  .story-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    background: var(--bg-2);
    gap: 0.75rem;
    color: var(--text-faint);
  }

  .story-arrow-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--line-mid), transparent);
  }

  .story-arrow-icon {
    color: var(--text-faint);
  }
}

/* Mockup col */
.story-mockup-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem var(--gutter);
  background: var(--bg-2);
  gap: 1rem;
}

@media(min-width:900px){
  .story-mockup-col { padding: 3rem 4rem; }
}


/* Story editorial panel — typography, not a mockup */
.story-panel {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.story-panel-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.story-panel-title {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

.story-panel-text {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.story-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  font-size: 0.88rem;
  color: var(--text);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-mid);
  transition: border-color 0.2s, gap 0.2s var(--spring);
}

.story-panel-link:hover {
  border-bottom-color: var(--accent);
  gap: 0.75rem;
}

/* Story statement */
.story-statement {
  padding: clamp(4rem, 6vw, 6rem) 0;
  border-top: 1px solid var(--line);
  opacity: 0;
}

.story-statement.revealed {
  animation: fadeUp 0.9s 0.2s var(--spring) both;
}

.story-statement p {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  max-width: 720px;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

/* =============================================
   OFFERS — services list
   ============================================= */
.offers-section { background: var(--bg); }

.offers-intro { max-width: 600px; margin-bottom: clamp(3rem,6vw,5rem); }
.offers-intro .section-title { margin-bottom: 1.25rem; }

.offers-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

@media(min-width:768px){ .offers-list { grid-template-columns: repeat(2,1fr); } }

.offer-item {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}

@media(min-width:768px){
  .offer-item { padding: 2rem 1.5rem 2rem 0; border-right: 1px solid var(--line); }
  .offer-item:nth-child(2n) { border-right: none; padding-right: 0; padding-left: 1.5rem; }
  /* With an odd number of services the last one sits alone in the left
     column; without this it keeps a divider pointing at empty space. */
  .offer-item:last-child:nth-child(odd) { border-right: none; }
}

.offer-item:hover { background: rgba(255,255,255,0.02); }

.offer-number {
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--accent);
  letter-spacing: 0.04em; padding-top: 0.2rem; flex-shrink: 0; min-width: 26px;
}

.offer-body h3 {
  font-size: 0.97rem; font-weight: 500; color: var(--text);
  margin-bottom: 0.4rem; letter-spacing: -0.01em;
}

.offer-body p {
  font-size: 0.86rem; color: var(--text-muted); line-height: 1.65;
}

.offer-tag {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(91,91,214,0.3);
  border-radius: 3px; padding: 0.18rem 0.5rem;
  flex-shrink: 0; align-self: flex-start; margin-top: 0.1rem;
}

/* =============================================
   PHOTO EDITORIAL BREAK
   Full-width atmospheric photograph
   ============================================= */
.photo-break {
  position: relative;
  height: clamp(340px, 50vw, 580px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.photo-break--short {
  height: clamp(260px, 35vw, 420px);
}

.pb-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.photo-break:hover .pb-photo {
  transform: scale(1.02);
}

.pb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(13,12,10,0.9) 0%,
    rgba(13,12,10,0.35) 45%,
    rgba(13,12,10,0.05) 80%,
    transparent 100%
  );
  will-change: opacity;
}

.pb-overlay--lighter {
  background: linear-gradient(
    to top,
    rgba(13,12,10,0.85) 0%,
    rgba(13,12,10,0.15) 60%,
    transparent 100%
  );
}

.pb-text {
  position: relative; z-index: 2;
  padding-bottom: clamp(2rem,4vw,3.5rem);
  opacity: 0;
  transform: translateY(24px);
}

.photo-break.photo-visible .pb-text {
  animation: fadeUp 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pb-text--bottom { align-self: flex-end; }

.pb-eyebrow {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.75rem;
  display: block;
}

.pb-headline {
  font-family: var(--f-serif);
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 600px;
}

.pb-headline em {
  font-style: italic;
  color: rgba(255,255,255,0.5);
}

.pb-headline--sm { font-size: clamp(1.3rem, 3vw, 2rem); }

/* =============================================
   PORTFOLIO — case studies with photo headers
   ============================================= */
.portfolio-section { background: var(--bg); }

.portfolio-header { padding: var(--sec-v) 0 clamp(3rem,5vw,4rem); }
.portfolio-header .section-title { margin-bottom: 1rem; }

/* Each case study */
.case-study {
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* Large photograph header */
.cs-photo-header {
  position: relative;
  height: clamp(280px, 45vw, 520px);
  overflow: hidden;
  cursor: default;
  background: #0d0c0a;
}

.cs-photo-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

.cs-photo-header:hover .cs-photo-bg {
  transform: scale(1.03);
}

.cs-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(13,12,10,0.9) 0%,
    rgba(13,12,10,0.25) 55%,
    rgba(13,12,10,0) 100%
  );
  will-change: opacity;
}

.cs-photo-caption {
  position: absolute;
  bottom: 2rem; left: 0; right: 0;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.7s 0.3s var(--spring) both;
}

.cs-photo-type {
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.cs-photo-name {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400;
  font-style: italic; color: rgba(255,255,255,0.85);
  letter-spacing: -0.01em;
}

/* Case study body */
.cs-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: clamp(3rem,5vw,4.5rem) 0;
  align-items: center;
}

@media(min-width:900px){
  /* The work gets the larger share of the row */
  .cs-body { grid-template-columns: 4fr 8fr; gap: 4.5rem; }
  .cs-body--reverse { direction: rtl; }
  .cs-body--reverse > * { direction: ltr; }
}

.cs-text { display: flex; flex-direction: column; gap: 1.25rem; }

/* Keep the CTA sized to its label instead of stretching edge-to-edge */
.cs-text .btn { align-self: flex-start; }

.cs-title {
  font-family: var(--f-serif);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.025em; color: var(--text);
}

.cs-title em {
  font-style: italic; color: var(--text-muted); display: block;
}

.cs-desc {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.8;
}

.cs-features { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.cs-features span {
  font-size: 0.75rem; color: var(--text-faint);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0.22rem 0.6rem;
}

/* Project mockup.
   The source images are already photographs of a laptop in a real
   setting, so they are framed as photographs — no fake browser chrome,
   no simulated phone. The photograph IS the presentation. */
.cs-screens {
  position: relative;
  margin: 0;
  opacity: 0;
}

.cs-screens.revealed {
  animation: fadeUp 0.9s 0.35s var(--spring) both;
}

.cs-screens img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow:
    0 2px 10px rgba(0,0,0,0.3),
    0 30px 80px rgba(0,0,0,0.55);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

.cs-screens:hover img { transform: translateY(-4px) scale(1.006); }

.cs-screens-url {
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-align: right;
}

.case-study--alt .cs-screens-url { text-align: left; }

@media(max-width:899px){
  .cs-screens-url { text-align: left; }
}

/* Portfolio bottom CTA */
.portfolio-cta {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 1.25rem;
  padding: clamp(3rem,5vw,4rem) 0;
  border-top: 1px solid var(--line);
}

.portfolio-cta p { font-size: 1rem; color: var(--text-muted); }

@media(min-width:600px){
  .portfolio-cta { flex-direction: row; align-items: center; }
}

/* =============================================
   GYMS & FITNESS — industry specialism
   ============================================= */
.gyms-section { background: var(--bg-2); }

.gyms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media(min-width:900px){
  .gyms-grid { grid-template-columns: 5fr 6fr; }
}

.gyms-photo {
  overflow: hidden;
  border-radius: 8px;
  will-change: transform;
}

.gyms-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.9s var(--ease);
}
.gyms-photo:hover img { transform: scale(1.03); }

@media(max-width:899px){
  .gyms-photo img { aspect-ratio: 16/10; }
}

.gyms-text { display: flex; flex-direction: column; align-items: flex-start; }
.gyms-text .section-title { margin-bottom: 1.25rem; }
.gyms-text .section-title em { font-style: italic; color: var(--text-muted); }
.gyms-text .section-desc { margin-bottom: 1rem; max-width: 460px; }

/* Feature list — two columns, quiet ticks, no cards */
.gyms-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem 1.5rem;
  margin: 1.5rem 0 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  width: 100%;
}
@media(min-width:480px){ .gyms-features { grid-template-columns: 1fr 1fr; } }

.gyms-features li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.gyms-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.gyms-who {
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--text-faint);
  margin: 1.5rem 0 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  width: 100%;
}

/* =============================================
   PRICING NOTE — quiet, no cards, no numbers
   ============================================= */
.quote-section { background: var(--bg); }

.quote-inner {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}

.quote-inner .section-title { margin-bottom: 0; }

.quote-note-body p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.85;
}

/* =============================================
   PROCESS
   ============================================= */
.process-section { background: var(--bg-2); }

.process-header { max-width: 580px; margin-bottom: clamp(3rem,6vw,5rem); }
.process-header .section-title { margin-bottom: 1.25rem; }

.process-grid {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

@media(min-width:640px) { .process-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .process-grid { grid-template-columns: repeat(4,1fr); } }

.process-step {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1rem;
}

@media(min-width:640px){
  .process-step { padding: 2.5rem 2rem 2.5rem 0; border-right: 1px solid var(--line); }
  .process-step:nth-child(2n) { border-right: none; padding-left: 2rem; padding-right: 0; }
}
@media(min-width:1024px){
  .process-step { padding: 2.5rem 2rem 2.5rem 0; }
  .process-step:nth-child(2n) { border-right: 1px solid var(--line); padding: 2.5rem 2rem 2.5rem 0; }
  .process-step:nth-child(4n) { border-right: none; }
}

.step-num {
  font-family: var(--f-mono); font-size: 0.68rem;
  color: var(--accent); letter-spacing: 0.05em;
}

.step-body h3 {
  font-size: 0.97rem; font-weight: 500; color: var(--text);
  margin-bottom: 0.5rem; letter-spacing: -0.01em; line-height: 1.3;
}

.step-body p {
  font-size: 0.86rem; color: var(--text-muted); line-height: 1.7;
}

/* =============================================
   BENEFITS
   ============================================= */
.benefits-section { background: var(--bg); }

.benefits-header { max-width: 580px; margin-bottom: clamp(3rem,6vw,5rem); }
.benefits-header .section-title { margin-bottom: 0; }

.benefits-grid {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

@media(min-width:768px) { .benefits-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1100px) { .benefits-grid { grid-template-columns: repeat(3,1fr); } }

.benefit-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 2rem 0; border-bottom: 1px solid var(--line);
}

@media(min-width:768px){
  .benefit-row { padding: 2rem 1.75rem 2rem 0; border-right: 1px solid var(--line); }
  .benefit-row:nth-child(2n) { border-right: none; padding-left: 1.75rem; padding-right: 0; }
}
@media(min-width:1100px){
  .benefit-row { padding: 2.25rem 2rem 2.25rem 0; }
  .benefit-row:nth-child(2n) { border-right: 1px solid var(--line); padding: 2.25rem 2rem 2.25rem 0; }
  .benefit-row:nth-child(3n) { border-right: none; }
}

.benefit-num {
  font-size: 0.9rem; color: var(--accent); flex-shrink: 0;
  padding-top: 0.1rem; opacity: 0.5;
}

.benefit-body h3 {
  font-size: 0.97rem; font-weight: 500; color: var(--text);
  margin-bottom: 0.45rem; letter-spacing: -0.01em;
}

.benefit-body p {
  font-size: 0.86rem; color: var(--text-muted); line-height: 1.7;
}

/* =============================================
   PHOTO CTA — full-bleed photograph section
   ============================================= */
.photo-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(6rem, 12vw, 10rem) 0;
  display: flex; align-items: center;
}

.photo-cta-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}

.photo-cta-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
}

.photo-cta-overlay {
  position: absolute; inset: 0;
  background: rgba(10,9,7,0.72);
}

.photo-cta-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 1.5rem; max-width: 640px;
}

.photo-cta-headline {
  font-family: var(--f-serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.025em; color: #fff;
  margin-top: 0.25rem;
}

.photo-cta-sub {
  font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.8;
}

.photo-cta-sub strong { color: rgba(255,255,255,0.85); font-weight: 500; }

.photo-cta-note {
  font-size: 0.78rem; color: rgba(255,255,255,0.35);
}

/* =============================================
   ENQUIRY FORM
   ============================================= */
.enquiry-section { background: var(--bg); }

.enquiry-header { max-width: 540px; margin-bottom: clamp(3rem,6vw,4.5rem); }
.enquiry-header .section-title { margin-bottom: 1.25rem; }

.form-wrap { max-width: 660px; }

.enquiry-form { display: flex; flex-direction: column; gap: 1.05rem; }

.form-row { display: grid; grid-template-columns: 1fr; gap: 1.05rem; }
@media(min-width:560px){ .form-row--2 { grid-template-columns: repeat(2,1fr); } }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }

.form-label {
  font-size: 0.8rem; font-weight: 500;
  color: var(--text-muted); letter-spacing: 0.01em;
}

.required { color: var(--accent); }
.optional  { color: var(--text-faint); font-weight: 400; font-size: 0.75rem; }

.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--f-body);
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
}

.form-input, .form-select { padding: 0.78rem 0.95rem; }

.form-textarea {
  padding: 0.78rem 0.95rem;
  resize: vertical; min-height: 95px; line-height: 1.6;
}

.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(91,91,214,0.18);
}

.form-input.error, .form-select.error, .form-textarea.error {
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgba(248,113,113,0.12);
}

.form-error {
  font-size: 0.75rem; color: #f87171;
  min-height: 1.1em; display: block;
}

.select-wrap { position: relative; }
.form-select { cursor: pointer; padding-right: 2.2rem; }
.form-select option { background: #1c1a17; color: var(--text); }

.select-arrow {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%); color: var(--text-faint);
  pointer-events: none;
}

#form-submit-btn { margin-top: 0.5rem; }

.spinner { animation: spin 0.75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

.form-privacy {
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; font-size: 0.75rem;
  color: var(--text-faint); text-align: center;
}

.form-success {
  text-align: center; padding: 4rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 8px;
  animation: fadeUp 0.5s var(--spring) both;
}

.success-icon { color: #4ade80; }

.form-success h3 {
  font-family: var(--f-serif); font-size: 1.9rem;
  font-weight: 400; color: var(--text);
}

.form-success p {
  color: var(--text-muted); font-size: 0.95rem;
  max-width: 400px; line-height: 1.75;
}

.success-sub { font-size: 0.82rem !important; color: var(--text-faint) !important; }

/* Fallback link inside the success panel (global `a` has no underline) */
.form-success a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.form-success a:hover { color: var(--text); }

/* =============================================
   BROCHURE — printed piece, offered as a PDF
   ============================================= */
.brochure-section { background: var(--bg-2); }

.brochure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media(min-width:900px){
  .brochure-grid { grid-template-columns: 5fr 7fr; }
}

.brochure-text { display: flex; flex-direction: column; align-items: flex-start; }
.brochure-text .section-title { margin-bottom: 1.25rem; }
.brochure-text .section-desc { margin-bottom: 1.75rem; }

.brochure-meta {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 1rem;
}

.brochure-meta a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.brochure-meta a:hover { color: var(--text); }

/* The A4 sheet is portrait — cap it so it does not tower over the column */
.brochure-sheet--a4 { max-width: 420px; }
@media(min-width:900px){ .brochure-sheet--a4 { max-width: 460px; } }

/* The two sheets, offset like paper on a desk */
.brochure-sheets {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media(min-width:900px){
  .brochure-sheets { gap: 1.75rem; }
  .brochure-sheets .brochure-sheet:last-child {
    margin-left: 8%;
  }
}

.brochure-sheet {
  width: 100%;
  height: auto;
  border-radius: 6px;
  /* The hairline matters: the outside sheet is nearly the same value as the
     page behind it, so without it the paper has no visible edge. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 1px 4px rgba(0,0,0,0.3),
    0 18px 50px rgba(0,0,0,0.5);
  transition: transform 0.7s var(--ease);
  will-change: transform;
}

.brochure-sheets:hover .brochure-sheet { transform: translateY(-3px); }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding: 3rem 0 2rem;
}

.footer-inner { display: flex; flex-direction: column; gap: 2rem; }

.footer-top { display: flex; flex-direction: column; gap: 0.4rem; }

.footer-logo .logo-wordmark { font-size: 1rem; color: var(--text-muted); }
.footer-logo:hover .logo-wordmark { color: var(--text); }

.footer-tagline {
  font-size: 0.83rem; color: var(--text-faint);
  font-style: italic; font-family: var(--f-serif);
}

.footer-mid nav { display: flex; flex-wrap: wrap; gap: 0.1rem; }

.footer-link {
  padding: 0.35rem 0.75rem; font-size: 0.83rem;
  color: var(--text-faint); border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.footer-link:hover { color: var(--text); background: rgba(255,255,255,0.04); }

.footer-bottom {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.footer-bottom p { font-size: 0.75rem; color: var(--text-faint); }

/* =============================================
   LEGAL PAGES — privacy, terms, cookies
   ============================================= */
.legal-main { padding: 8rem 0 4rem; }

.legal-wrap { max-width: 760px; }

.legal-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.legal-head .section-title { margin-bottom: 1rem; }

.legal-updated {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* Draft banner — remove once a solicitor has signed the document off */
.legal-notice {
  border: 1px solid rgba(214, 164, 0, 0.4);
  background: rgba(214, 164, 0, 0.07);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 2.5rem;
}
.legal-notice p { font-size: 0.85rem; line-height: 1.7; color: #d8c9a4; }
.legal-notice strong { color: #f0e2be; font-weight: 500; }

.legal-toc {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  margin-bottom: 3rem;
  columns: 2;
  column-gap: 2rem;
}
@media(max-width:640px){ .legal-toc { columns: 1; } }
.legal-toc a {
  display: block;
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--text-muted);
  transition: color 0.15s;
  break-inside: avoid;
}
.legal-toc a:hover { color: var(--text); }

.legal-body h2 {
  font-family: var(--f-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 3rem 0 1rem;
  scroll-margin-top: 6rem;
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body h3 {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin: 1.75rem 0 0.6rem;
  letter-spacing: -0.005em;
}

.legal-body p,
.legal-body li {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-muted);
}
.legal-body p { margin-bottom: 1rem; }

.legal-body ul, .legal-body ol { margin: 0 0 1.25rem 1.25rem; }
.legal-body li { margin-bottom: 0.45rem; padding-left: 0.3rem; }
.legal-body ul li { list-style: disc; }
.legal-body ol li { list-style: decimal; }

.legal-body strong { color: var(--text); font-weight: 500; }
.legal-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Placeholders the owner must fill in before publishing */
.ph {
  font-family: var(--f-mono);
  font-size: 0.85em;
  color: #9a9aff;
  background: rgba(91, 91, 214, 0.12);
  border: 1px solid rgba(91, 91, 214, 0.3);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  white-space: nowrap;
}

/* Callout for "confirm this with a professional" */
.legal-flag {
  border-left: 2px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.1rem;
  margin: 1.5rem 0;
}
.legal-flag p { font-size: 0.87rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.legal-flag p:last-child { margin-bottom: 0; }

.legal-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--text-muted);
  transition: color 0.15s;
}
.legal-back:hover { color: var(--text); }

/* =============================================
   SCROLL ANIMATIONS
   ============================================= */
.js-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.75s var(--spring), transform 0.75s var(--spring);
}

.js-reveal.visible { opacity: 1; transform: none; }

/* Image clip reveal */
.js-reveal-slide {
  opacity: 0;
  clip-path: inset(0 0 12% 0);
  transition: opacity 0.8s var(--spring), clip-path 0.8s var(--spring);
}
.js-reveal-slide.visible { opacity: 1; clip-path: inset(0 0 0% 0); }

/* Scale reveal for device mockups */
.js-reveal-scale {
  opacity: 0; transform: scale(0.97) translateY(16px);
  transition: opacity 0.8s var(--spring), transform 0.8s var(--spring);
}
.js-reveal-scale.visible { opacity: 1; transform: none; }

/* Stagger helpers */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* =============================================
   KEYFRAMES
   ============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =============================================
   MOBILE PHOTOGRAPHY OPTIMIZATION
   ============================================= */
@media(max-width:768px) {
  .story-grid { gap: 0; }
  .story-photo-col { height: 340px; }
  .story-mockup-col { padding: 2.5rem var(--gutter) 3rem; }
  .cs-photo-header { height: 240px; }
  .photo-break { height: clamp(280px, 50vw, 420px); }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */
:focus-visible {
  outline: 2px solid rgba(139,139,240,0.8);
  outline-offset: 3px; border-radius: 3px;
}

/* =============================================
   REDUCED MOTION
   Anything that starts at opacity:0 and is revealed by JS must be
   forced visible here, or the content never appears.
   ============================================= */
@media(prefers-reduced-motion: reduce) {
  .hero-photo,
  .hero-kicker, .hero-headline, .hero-subtext, .hero-ctas, .hero-tags,
  .cs-photo-caption, .story-photo-label { animation: none; }

  .pb-photo,
  .story-photo,
  .cs-photo-bg,
  .cs-screens img { transition: none; }

  .cs-screens,
  .pb-text,
  .story-statement,
  .js-reveal,
  .js-reveal-scale,
  .js-reveal-slide {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    clip-path: none !important;
  }

  .marquee-track { animation: none; }
  .scroll-dot-anim { animation: none; }
  html { scroll-behavior: auto; }
}