/* ==========================================================================
   components.css: reusable building blocks
   Buttons, eyebrow, highlight, hero, drop cap, photo collage, device frame,
   steps, circle badge, word slider, story cards, service list, project row,
   tags, FAQ, contact list, quotes, packages, contact form,
   case-study and About pieces, reveal-on-scroll.
   Naming: .block, .block__part, .block--variant  (the "BEM" convention)
   ========================================================================== */

/* ---------- Buttons ---------- */
/* Outlined button with a separate arrow box, e.g. [ See my work | → ] */
.button {
  display: inline-flex;
  align-items: stretch;
  min-height: 48px;
  border: 1px solid var(--color-teal);
  background: transparent;
  color: var(--color-teal-deep);
  font: 600 var(--text-xs) / 1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.button__label {
  display: flex;
  align-items: center;
  padding: 0 1.6rem;
}

.button__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  border-left: 1px solid var(--color-teal);
  transition: transform 0.3s var(--ease-out);
}

.button:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

.button:hover .button__arrow { transform: translateX(3px); }

/* Solid teal (the header's "Get in touch") */
.button--solid {
  border-color: var(--color-teal-deep);
  background: var(--color-teal-deep);
  color: var(--color-white);
}

.button--solid .button__arrow { border-left-color: rgba(255, 255, 255, 0.4); }
.button--solid:hover { background: var(--color-ink); border-color: var(--color-ink); }

/* White version for use on photos */
.button--light {
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--color-white);
}

.button--light .button__arrow { border-left-color: rgba(255, 255, 255, 0.8); }
.button--light:hover { background: var(--color-white); color: var(--color-ink); }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- Eyebrow: thin line + spaced capitals, e.g. "—— THE JOURNEY" ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.eyebrow::before {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--color-ink-faint);
}

.eyebrow--teal { color: var(--color-teal-deep); }

/* ---------- Highlight: teal marker bar behind the bottom of words ---------- */
.highlight {
  background: linear-gradient(transparent 72%, var(--color-teal) 72%, var(--color-teal) 96%, transparent 96%);
  padding-inline: 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.highlight--blush {
  background: linear-gradient(transparent 72%, var(--color-blush) 72%, var(--color-blush) 96%, transparent 96%);
}

/* A link in spaced capitals with a highlight, e.g. "VIEW LIVE SITE →" */
.link-highlight {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;   /* keeps the bar tight to the letters, even when the link is a block */
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(transparent 55%, var(--color-teal) 55%, var(--color-teal) 95%, transparent 95%) no-repeat 0 0 / 100% 100%;
  transition: background-size 0.4s var(--ease-out);
}

.link-highlight:hover { background-size: 100% 160%; }

/* ---------- Titles ---------- */
/* Elegant serif title, e.g. "Some of my recent websites" */
.title-serif {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Spaced serif capitals, e.g. "RED RIDGE RECEPTIONS" */
.title-caps {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Bold sans headline, e.g. "A site that scaled new heights" */
.title-bold {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Hero: full-screen photo, white headline bottom-left ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: calc(var(--header-height) + var(--space-6)) var(--space-7);
  color: var(--color-white);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-zoom 14s var(--ease-out) both;
}

/* Shade the photo so white text stays readable on even the brightest picture:
   a soft dark wash rising from the bottom, stronger on the left where the headline sits,
   plus a light band at the top behind the menu. Photos stay bright elsewhere. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(15, 20, 24, 0.4), transparent 22%),
    linear-gradient(to top, rgba(15, 20, 24, 0.78) 0%, rgba(15, 20, 24, 0.45) 40%, transparent 72%),
    linear-gradient(to right, rgba(15, 20, 24, 0.45), transparent 60%);
}

.hero__title,
.hero__lead { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }

/* ---------- Hero slideshow (home page; driven by js/main.js) ---------- */
/* Slides sit on top of each other and cross-fade; only .is-current is visible */
.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.hero-slide.is-current { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slow zoom while a slide is showing */
.hero-slide.is-current img { animation: hero-zoom 8s var(--ease-out) both; }

/* Caption: whose wedding this is, linking to their story (bottom right) */
.hero-slide__caption {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-5);
  z-index: 2;
  max-width: 60%;
  text-align: right;
}

.hero-slide__caption a {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.hero-slide__caption a span { font-weight: 400; opacity: 0.85; }
.hero-slide__caption a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Pause / play button (required for anything that moves on its own) */
.hero__pause {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--space-5) + 2.2rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(15, 20, 24, 0.35);
  color: var(--color-white);
  cursor: pointer;
}

.hero__pause:hover { background: rgba(15, 20, 24, 0.6); }

/* Two bars = pause; a triangle when paused = play */
.hero__pause-icon {
  width: 10px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.hero__pause[aria-pressed="true"] .hero__pause-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}

@media (max-width: 599px) {
  .hero-slide__caption { bottom: var(--space-3); max-width: 70%; }
  .hero-slide__caption a span { display: none; }   /* names only on phones, so the caption stays on one line */
  .hero__pause { bottom: calc(var(--space-3) + 2rem); }
  .hero { padding-bottom: var(--space-7); }
}

@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.hero > .container { position: relative; z-index: 2; }

.hero__title {
  max-width: 22ch;
  margin-bottom: var(--space-4);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.12;
}

.hero__lead {
  max-width: 46ch;
  font-size: var(--text-lg);
  opacity: 0.92;
}

/* ---------- Drop cap: large faint serif first letter ---------- */
/* .drop-cap on a paragraph, or .drop-cap-first on a block (styles its first paragraph) */
.drop-cap::first-letter,
.drop-cap-first > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-serif);
  font-size: 4.6em;
  font-weight: 300;
  line-height: 0.75;
  color: var(--color-ink-faint);
}

.prose { color: var(--color-ink-soft); }
.prose a { color: var(--color-teal-deep); text-underline-offset: 3px; }

/* ---------- Photo frames and collage ---------- */
.photo {
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.photo:hover img { transform: scale(1.035); }

.photo--portrait  { aspect-ratio: 3 / 4; }

/* Three photos of different sizes, overlapping like an editorial layout */
.collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}

.collage__a { grid-column: 1 / 8;  grid-row: 1; margin-top: 12%; }
.collage__b { grid-column: 6 / 13; grid-row: 1; z-index: 1; box-shadow: var(--shadow-soft); }
.collage__c { grid-column: 3 / 7;  grid-row: 1; align-self: end; margin-bottom: -18%; z-index: 2; box-shadow: var(--shadow-soft); }

/* ---------- Device frame: a website shown on a tablet or laptop ---------- */
.device {
  position: relative;
  padding: 3.2% 3.2% 4.2%;
  border-radius: clamp(14px, 2.4vw, 28px);
  background: #1F2124;
  box-shadow: var(--shadow-device), inset 0 0 0 2px #3A3D42;
}

.device__screen {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: clamp(4px, 0.6vw, 8px);
  background: var(--color-mist);
}

.device__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Laptop: wider screen and a base */
.device--laptop {
  padding: 2% 2% 2.6%;
  border-radius: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) 0 0;
}

.device--laptop .device__screen { aspect-ratio: 16 / 10; }

.device--laptop::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -4.5%;
  height: 4.5%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#D5D8DC, #A9AEB4);
  box-shadow: var(--shadow-device);
}

/* ---------- Steps: 01 / 02 / 03 with a pale teal block behind the number ---------- */
.steps {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step__number {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: var(--space-4) 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  isolation: isolate;   /* keeps the teal block behind the number, not behind the section */
}

.step__number::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 1.6em;
  height: 2.6em;
  background: var(--color-teal-mist);
}

.step__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
}

.step p { color: var(--color-ink-soft); }

/* ---------- Circle badge: text running round a circle, slowly turning ---------- */
.circle-badge {
  width: 7.5rem;
  height: 7.5rem;
  color: var(--color-teal);
  animation: circle-spin 22s linear infinite;
}

.circle-badge text {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  fill: currentColor;
}

@keyframes circle-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Word slider: one big word that keeps changing (driven by js/main.js) ---------- */
.word-slider {
  position: relative;
  display: grid;
  min-height: 2.3em;
  font-family: var(--font-serif);
  font-size: var(--text-giant);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.word-slider__word {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity 0.4s ease, transform 0.4s ease;   /* the old word leaves quickly… */
}

.word-slider__word.is-active {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out) 0.4s, transform 0.8s var(--ease-out) 0.4s;   /* …then the new one arrives */
}

/* Without JavaScript, show only the first word */
.no-js .word-slider__word:first-child { opacity: 1; transform: none; }

/* ---------- Story card (project summary with image) ---------- */
.story-card {
  display: grid;
  align-content: start;   /* stack from the top, even when a neighbouring card is taller */
  gap: var(--space-3);
  text-align: center;
  text-decoration: none;
}

.story-card .photo { margin-bottom: var(--space-3); }
.story-card .link-highlight { justify-self: center; }
.story-card p { color: var(--color-ink-soft); }

.card-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
}

@media (min-width: 760px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid > :nth-child(2) { margin-top: var(--space-6); }   /* staggered like Hawthorn */
}

/* ---------- Service list: what I make, in a row of small items ---------- */
.service-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.service-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.service-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
}

/* ---------- Project row: device frame beside the project details ---------- */
.project-row + .project-row { margin-top: var(--space-7); }

.project-row__device {
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.project-row__device:hover { transform: translateY(-6px); }

.project-row__meta {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* "Concept project": marks a made-up business built to show what a site can do */
.concept-badge {
  display: inline-block;
  margin-right: var(--space-3);
  padding: 0.25rem 0.7rem;
  background: var(--color-blush);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Two or more highlighted links side by side */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

/* ---------- Tags: small labels for what a site includes ---------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tag-list li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--color-line);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

/* ---------- FAQ: questions that open and close (uses <details>, no JavaScript needed) ---------- */
.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
  border-top: 1px solid var(--color-line);
}

.faq__item { border-bottom: 1px solid var(--color-line); }

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

/* A plus that turns into a cross when open */
.faq__question::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-teal);
  transition: transform 0.3s var(--ease-out);
}

.faq__item[open] .faq__question::after { transform: rotate(45deg); }

.faq__answer {
  padding-bottom: var(--space-4);
  color: var(--color-ink-soft);
}

.faq__answer p { margin: 0; }

/* ---------- Contact list: email, phone, Instagram, place ---------- */
.contact-list {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.contact-list dt {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.contact-list dd {
  margin: 0;
  font-size: var(--text-lg);
}

.contact-list a {
  text-decoration: none;
  transition: color 0.3s;
}

.contact-list a:hover { color: var(--color-teal-deep); }

/* ---------- Quotes (testimonials) ---------- */
.quote-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.quote__text { margin: 0; font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.5; }
.quote__text p { margin: 0; }
.quote__text p::before { content: "“"; display: block; font-size: 3em; line-height: 0.6; color: var(--color-teal); }
.quote__who { margin-top: auto; font-size: var(--text-sm); color: var(--color-ink-soft); }
.quote__who strong { display: block; color: var(--color-ink); }

/* ---------- Package cards ---------- */
.packages {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
}

@media (min-width: 900px) {
  .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-4);
  background: var(--color-white);
  border-top: 3px solid var(--color-line);
}

.package--popular {
  border-top-color: var(--color-teal);
  box-shadow: var(--shadow-soft);
}

.package__badge {
  position: absolute;
  top: 0;
  right: var(--space-4);
  margin: 0;
  padding: 0.3rem 0.8rem;
  background: var(--color-blush);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.package__name {
  margin-bottom: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
}

.package__price {
  margin-bottom: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-teal-deep);
}

.package__price span { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-ink-soft); }

.package__summary { color: var(--color-ink-soft); }

.package__includes {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.package__includes li {
  position: relative;
  padding-left: 1.4em;
}

.package__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-teal-deep);
}

.package__button { align-self: flex-start; margin-top: auto; }

/* ---------- Terms under the prices ---------- */
.price-stay {
  margin: var(--space-4) 0 0;
  text-align: center;
  color: var(--color-ink-soft);
}

.price-terms {
  display: grid;
  gap: var(--space-2);
  max-width: var(--container-narrow);
  margin: var(--space-5) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.price-terms li { position: relative; padding-left: 1.2em; }
.price-terms li::before { content: "·"; position: absolute; left: 0.3em; font-weight: 700; }

.business-pointer {
  margin: var(--space-5) 0 0;
  text-align: center;
}

/* ---------- Business care plan ---------- */
.care-plan {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  max-width: var(--container-narrow);
  margin: var(--space-5) auto 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-teal);
  text-align: center;
}

.care-plan__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-teal-deep);
}

.care-plan__price span { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-ink-soft); }
.care-plan__text { margin: 0; color: var(--color-ink-soft); }

/* ---------- "Your business could be next" card ---------- */
.next-slot {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-4);
  border: 1.5px dashed var(--color-teal);
  text-align: center;
  text-decoration: none;
  transition: background 0.3s;
}

.next-slot:hover { background: var(--color-white); }

.next-slot__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
}

.next-slot__text { max-width: 44ch; color: var(--color-ink-soft); }

/* ---------- Small link under the hero buttons ---------- */
.hero__aside { margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.hero__aside a { color: var(--color-white); text-underline-offset: 4px; }

/* ---------- Contact form (underlined fields, like Hawthorn) ---------- */
.contact-form {
  display: grid;
  gap: var(--space-4);
}

.contact-form__intro {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
}

.field-row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  transition: border-color 0.3s;
}

.field textarea { resize: vertical; }

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

.contact-form__estimate {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-teal-mist);
  font-size: var(--text-sm);
}

.contact-form .button { justify-self: start; }

/* ======================= Case study pages ======================= */

/* ---------- Intro: "Case study: Name" label and heading ---------- */
.case-intro { align-items: start; }

.case-intro__label {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-ink-faint);
}

.case-intro__label strong { display: block; color: var(--color-ink); font-weight: 600; }
.case-intro__label .concept-badge { display: table; margin: 0 0 var(--space-3); }   /* on its own line */

@media (min-width: 900px) {
  .case-intro > :first-child { text-align: right; }
  .case-intro__label .concept-badge { margin-left: auto; }
  .case-intro__heading { margin-left: auto; max-width: 16ch; }
}

/* ---------- Facts: label + value pairs in two columns ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.facts dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.facts dd { margin: 0; }

/* ---------- Gallery row: three photos of different heights ---------- */
.gallery-row {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.3fr;
  gap: var(--space-3);
  align-items: end;
}

.gallery-row__item:nth-child(1) { aspect-ratio: 3 / 4; }
.gallery-row__item:nth-child(2) { aspect-ratio: 2 / 3; align-self: start; }
.gallery-row__item:nth-child(3) { aspect-ratio: 4 / 3; }

/* ---------- Photo band: one wide photo across the page ---------- */
.photo-band {
  height: clamp(16rem, 45vw, 34rem);
  overflow: hidden;
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Device group: laptop with a tablet and phone in front ---------- */
.device-group {
  position: relative;
  padding: 0 0 18% 12%;
}

.device-group__tablet {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 38%;
}

.device-group__phone {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 17%;
}

/* Phone frame: tall screen, rounder corners */
.device--phone {
  padding: 5% 5% 6%;
  border-radius: clamp(14px, 2vw, 26px);
}

.device--phone .device__screen {
  aspect-ratio: 390 / 844;
  border-radius: clamp(8px, 1.2vw, 16px);
}

/* ---------- Palette: the client's colours as large circles ---------- */
.palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.palette__colour {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.palette__colour::before {
  content: "";
  width: clamp(4.25rem, 6.5vw, 6.25rem);
  aspect-ratio: 1;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  border: 6px solid var(--color-white);
  background: var(--swatch);
  box-shadow: var(--shadow-soft);
}

.palette__colour code { font-size: var(--text-xs); color: var(--color-ink-faint); }

/* ---------- Call-to-action band ---------- */
.cta-band { text-align: center; }
.cta-band .title-bold { margin-inline: auto; max-width: 20ch; margin-bottom: var(--space-5); }

/* ======================= About page ======================= */

/* ---------- Intro: name and details beside the portrait ---------- */
.about-hero {
  position: relative;
  padding-block: var(--space-6) var(--section-pad);
}

.about-hero__name {
  margin-bottom: var(--space-4);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
}

.about-hero__lede { max-width: 52ch; font-size: var(--text-lg); }

.about-hero__media {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
}

@media (min-width: 1100px) {
  .about-hero__media .circle-badge { left: -2.5rem; }   /* room to hang over the edge on wide screens */
}

.about-hero__portrait {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
}

.about-hero__portrait img { object-position: center 30%; }

/* Badge sits over the bottom-left corner of the portrait */
.about-hero__media .circle-badge {
  position: absolute;
  left: -0.75rem;
  bottom: 2rem;
  padding: 0.4rem;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.contact-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.contact-inline a { text-decoration: none; }
.contact-inline a:hover { color: var(--color-teal-deep); }

.button-row--center { justify-content: center; margin-top: var(--space-6); }

/* ---------- Statement: three short lines, centred ---------- */
.statement {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1.35;
  text-align: center;
}

.statement > span { display: block; }

/* ---------- Focus: small list beside the big changing word ---------- */
.focus {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 900px) {
  .focus { grid-template-columns: 14rem minmax(0, 1fr); }
}

.focus__list {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  text-transform: lowercase;
  color: var(--color-ink-soft);
}

/* ---------- Stats: four numbers in a row ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

@media (min-width: 600px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat__value {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-teal-deep);
}

.stat__label {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-ink-soft);
}

/* ---------- Organisation wall: names set like logos ---------- */
.org-intro .circle-badge { margin-bottom: var(--space-4); }

.org-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  align-items: center;
}

@media (min-width: 760px) {
  .org-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .org-wall li { font-size: var(--text-sm); letter-spacing: 0.06em; }
}

.org-wall li {
  overflow-wrap: anywhere;   /* very long names wrap instead of spilling out */
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink-soft);
}

/* ---------- Band card: wide photo with a white card overlapping its bottom ---------- */
.band-card__card {
  position: relative;
  max-width: 34rem;
  margin-top: -7rem;
  padding: var(--space-5);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.band-card__card .prose { margin: 0; }

/* ---------- Experience: dates on the left, details on the right ---------- */
.experience {
  display: grid;
  gap: var(--space-6);
}

.job {
  display: grid;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

@media (min-width: 900px) {
  .job { grid-template-columns: 14rem minmax(0, 1fr); }
}

.job__when {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.job__when--now::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-blush-deep);
  vertical-align: middle;
}

.job__role { font-size: var(--text-xl); margin-bottom: var(--space-1); }

.job__org { margin-bottom: var(--space-3); }
.job__org span { color: var(--color-ink-soft); }

.job__points {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-ink-soft);
}

.job__points li {
  position: relative;
  padding-left: 1.25em;
}

.job__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-teal);
}

.job__note {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-teal-deep);
}

/* ---------- Skills: four groups of tags ---------- */
.skill-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
}

@media (min-width: 760px) {
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.languages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.languages dt { font-weight: 600; }
.languages dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ---------- Education cards ---------- */
.edu-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (min-width: 760px) {
  .edu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.edu-card {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-teal);
  transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.edu-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-4px); }

.edu-card__years {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

.edu-card__title { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.edu-card__school span { color: var(--color-ink-soft); }
.edu-card .prose { margin: 0; }

/* ---------- Reveal on scroll (driven by js/main.js) ---------- */
/* Add data-reveal="up|left|right|fade" to any element */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
  transition-delay: var(--delay, 0s);
}

[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* If JavaScript is off, show everything */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}