/* =========================================================
   Giorgia Ramella — Studio site
   Design tokens
   ========================================================= */
:root{
  /* Cinematic near-black ground, warm off-white text — not generic "dark mode" */
  --paper: #0b0b09;
  --paper-deep: #050504;
  --raised: #161510;
  --raised-line: rgba(242,237,226,0.09);
  --ink: #f2ede2;
  --ink-soft: #c9c2b2;
  --ink-faint: #a39c8a;
  --line: rgba(242,237,226,0.10);
  --line-strong: rgba(242,237,226,0.20);
  --night: #050504;
  --night-soft: #f2ede2;

  /* Per project accents, brightened to AA contrast on the near-black ground */
  --accent-hagd: #e3b563;
  --accent-lasttrain: #c93f50;
  --accent-groupproject: #8fb9ac;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 9rem;

  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{ margin: 0; }
img, svg{ display: block; max-width: 100%; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a{ color: inherit; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,p,figure{ margin: 0; }
input, select, textarea{ font: inherit; color: inherit; }

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

/* =========================================================
   Base
   ========================================================= */
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: var(--night-soft);
  padding: 0.9em 1.4em;
  z-index: 1000;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.skip-link:focus{
  left: var(--gutter);
  top: var(--space-2);
}

:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

/* Visually hidden but still present for assistive tech and search context —
   used on the .eyebrow section labels ("About", "Services", "Contact"…),
   which read as template-y once visible but still mark each section's
   purpose for a screen reader landing on it directly via the nav. Removed
   from normal flow entirely, so nothing it would have occupied leaves a gap. */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* headings share the display face */
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

section{
  padding: var(--space-6) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}

.section-intro{
  max-width: 640px;
  margin-bottom: var(--space-5);
}
.section-intro h2{
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.section-intro__text{
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 46ch;
}
.section-intro__note{
  color: var(--accent-hagd);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  max-width: 46ch;
  margin-top: var(--space-2);
}

/* Selected Work's intro no longer has a visible h2 (see the sr-only class
   on it in the markup) — the paragraph is the section's opening line now,
   so it gets a wider measure to sit on two lines instead of three, and
   the confidentiality note enough room for one, rather than the narrower
   measure suited to a paragraph that used to follow a heading. Scoped to
   .work only; Services and Process keep the original 46ch measure. (Max-
   width now set below, on the band-scoped selector, since .section-intro
   moved inside .work-intro-band.) */
.work .section-intro__text{ max-width: none; }
.work .section-intro__note{ max-width: none; }

/* A quiet separation from the hero — a thin rule and extra room above
   the intro text and below it, before the first deck grid — rather than
   a full-bleed colour band. Keeps the dark, restrained palette intact;
   the confidentiality note stays gold as the section's one accent. */
.work .section-intro{
  max-width: 850px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

/* Services' intro paragraph wraps to five lines at the default 46ch
   measure — a touch narrower keeps it at four, still well short of the
   640px .section-intro container. */
.services .section-intro__text{ max-width: 520px; }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: var(--space-2) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease);
}
/* The blur lives on a pseudo-element, not on .site-header itself, so the
   header never becomes a containing block for its fixed-position mobile
   nav overlay (a backdrop-filter on an ancestor would trap it in place). */
.site-header::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5,5,4,0.72);
  opacity: 0;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: opacity var(--dur-med) var(--ease);
}
.site-header.is-scrolled::before{ opacity: 1; }
.site-header.is-scrolled{
  border-bottom-color: var(--line);
}

.site-header__inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.primary-nav ul{
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.primary-nav a{
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0.3em 0.1em;
  position: relative;
}
.primary-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-fast) var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after{ right: 0; }

.primary-nav__cta{
  border: 1px solid currentColor;
  padding: 0.55em 1.1em !important;
  border-radius: 999px;
}
.primary-nav__cta::after{ display: none; }

/* Enquiry link in the header's top-left corner, phone/tablet widths only
   (see the 900px breakpoint below) — sits where the wordmark used to,
   giving the header a persistent way to reach Contact without opening the
   menu, but scrolling with the page instead of floating over content the
   way an earlier, fixed-position version of this did. Hidden on desktop,
   where the nav's own "Enquire" pill already does this job. */
.header-enquire{
  display: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.5em 1em;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.nav-toggle{
  display: none;
  align-items: center;
  gap: 0.6em;
}
.nav-toggle__label{ font-size: 0.8rem; letter-spacing: 0.04em; }
.nav-toggle__icon{
  position: relative;
  width: 20px; height: 1px;
  background: var(--ink);
}
.nav-toggle__icon::before, .nav-toggle__icon::after{
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 1px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__icon::before{ top: -6px; }
.nav-toggle__icon::after{ top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon{ background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{ transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6) var(--gutter) var(--space-5);
  overflow: hidden;
  isolation: isolate;
}
.hero__media{
  position: absolute; inset: 0;
  z-index: -1;
}
.hero__frame{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1800ms ease;
}
.hero__frame.is-active{ opacity: 1; }
.hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,4,0.62) 0%, rgba(5,5,4,0.48) 32%, rgba(5,5,4,0.94) 100%),
    linear-gradient(90deg, rgba(5,5,4,0.5) 0%, rgba(5,5,4,0.08) 45%, rgba(5,5,4,0.08) 100%);
}

.hero__content{
  max-width: 840px;
  color: var(--night-soft);
}
.hero__content .eyebrow{ color: rgba(243,241,234,0.78); }
.hero__headline{
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.05;
  font-weight: 500;
  margin-bottom: var(--space-3);
  color: var(--night-soft);
  text-shadow: 0 2px 28px rgba(0,0,0,0.35);
}
.hero__sub{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(243,241,234,0.86);
  max-width: 46ch;
  font-weight: 400;
}

.scroll-cue{
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--night-soft);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.scroll-cue svg{ animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(5px); }
}

/* =========================================================
   Selected Work
   ========================================================= */
/* Tighter than other sections' top padding: with the visible heading
   gone (see .work .section-intro h2 below), the intro paragraph now
   sits closer beneath the hero, which is what reads as this section's
   opening rather than a second, unlabelled heading-sized gap. */
.work{ padding-top: var(--space-6); }

.project{
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.project + .project{ margin-top: var(--space-6); }

/* Per project accent, used sparingly on the tagline and index */
.project--hagd .project__tagline{ color: var(--accent-hagd); }
.project--lasttrain .project__tagline{ color: var(--accent-lasttrain); }
.project--groupproject .project__tagline{ color: var(--accent-groupproject); }

/* =========================================================
   Deck layout: project info beside a curated grid of slides
   ========================================================= */
.project__layout{
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(2rem, 5vw, var(--space-6));
  align-items: start;
}

.project__info{
  position: sticky;
  top: calc(64px + var(--space-4));
  max-width: 380px;
  padding-bottom: var(--space-2);
}
.project__title{
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 0.35em;
}
.project__tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}
.project__description{
  color: var(--ink-soft);
  max-width: 42ch;
}

/* Curated, editorial grid of individual slide thumbnails. A "feature" item
   spans two of the three columns, giving each project a hand composed
   rhythm of larger and smaller tiles rather than a uniform contact sheet. */
.deck-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: clamp(0.9rem, 2vw, var(--space-3));
}
.deck-grid__item--feature{ grid-column: span 2; }

.deck-grid__thumb{
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--raised-line);
  box-shadow: 0 20px 40px -26px rgba(0,0,0,0.55);
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.deck-grid__thumb img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
/* Hover/focus: a small, contained enlarge of the image within its fixed
   frame — never the tile itself, so nothing reflows the grid or takes
   over the screen. Restrained on purpose. */
@media (hover: hover){
  .deck-grid__thumb:hover{
    box-shadow: 0 26px 54px -24px rgba(0,0,0,0.65);
  }
  .deck-grid__thumb:hover img{ transform: scale(1.045); }
}
.deck-grid__thumb:focus-visible{
  box-shadow: 0 26px 54px -24px rgba(0,0,0,0.65);
}
.deck-grid__thumb:focus-visible img{ transform: scale(1.045); }
.deck-grid__thumb:active img{ transform: scale(1.015); }
@media (prefers-reduced-motion: reduce){
  .deck-grid__thumb, .deck-grid__thumb img{ transition: none; }
  .deck-grid__thumb:hover img, .deck-grid__thumb:focus-visible img{ transform: none; }
}

/* =========================================================
   Slide preview (lightbox)
   ========================================================= */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 5vw, var(--space-6));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
}
.lightbox.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease), visibility 0s linear 0s;
}
.lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5,5,4,0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__panel{
  position: relative;
  z-index: 1;
  max-width: min(880px, 88vw);
  max-height: 84vh;
  transform: scale(0.97);
  transition: transform var(--dur-med) var(--ease);
}
.lightbox.is-open .lightbox__panel{ transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox__panel{ transition: none; }
}
.lightbox__figure{
  margin: 0;
  min-width: 0;
  background: var(--raised);
  border: 1px solid var(--raised-line);
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.75);
  overflow: hidden;
}
.lightbox__img{
  display: block;
  width: 100%;
  max-height: calc(84vh - 3rem);
  height: auto;
  object-fit: contain;
  background: var(--night);
}
.lightbox__caption{
  padding: 0.8em 1.1em;
  font-size: 0.8rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--raised-line);
}
/* Close and prev/next overlay the panel as small, restrained circular
   controls — consistent placement across every breakpoint, touch friendly,
   never requiring extra room outside the panel itself. */
.lightbox__close,
.lightbox__nav{
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 999px;
  background: rgba(5,5,4,0.55);
  color: var(--night-soft);
  opacity: 0.85;
  transform: translateY(-50%);
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lightbox__close:hover, .lightbox__close:focus-visible,
.lightbox__nav:hover, .lightbox__nav:focus-visible{
  opacity: 1;
  background: rgba(5,5,4,0.75);
}
.lightbox__close{
  top: 0.6em;
  right: 0.6em;
  transform: none;
}
.lightbox__nav--prev{ left: 0.6em; }
.lightbox__nav--next{ right: 0.6em; }

/* =========================================================
   About
   ========================================================= */
.about{
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: var(--space-5);
  align-items: center;
  padding-top: var(--space-7);
}
.about__media{
  aspect-ratio: 3 / 4.4;
  overflow: hidden;
  border-radius: var(--radius);
}
.about__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.about__text{ max-width: 52ch; }
.about__heading h2{
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.about__body p{
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.about__body p:last-child{ margin-bottom: 0; }

/* =========================================================
   Previous experience (credibility banner)
   A deliberate light section — the only one on the site — used as a
   quiet transition and credibility marker between About and Services.
   Reuses the site's own ink/paper tones, simply inverted, so the
   palette stays intact even though the ground flips to light.
   ========================================================= */
.clients{
  background: var(--ink);
  max-width: none;
  padding: var(--space-5) var(--gutter);
}
.clients__inner{
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
}
.clients__label{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.15vw, 0.98rem);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(5,5,4,0.62);
  margin-bottom: var(--space-4);
}
.clients__logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}
/* Equal height, natural width — the honest way to keep a mixed set of
   marks (a wide wordmark next to a compact one) from letting any single
   logo read as more prominent than the others. */
.clients__logo{
  display: flex;
  align-items: center;
  justify-content: center;
}
.clients__logo-img{
  display: block;
  height: 1.5rem;
  width: auto;
  opacity: 0.88;
}

/* =========================================================
   Services
   ========================================================= */
.packages{
  border-top: 1px solid var(--line);
}
.package{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.package__head{ max-width: 320px; }
.package__name{
  font-size: 1.4rem;
  margin-bottom: 0.4em;
}
.package__price{
  color: var(--ink-faint);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.package__price span{
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-soft);
}
.package__description{
  color: var(--ink-soft);
  max-width: 54ch;
  align-self: center;
}
.package__detail{
  grid-column: 2;
  margin-top: 0.6em;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--accent-hagd);
}

.packages__addons{
  margin-top: var(--space-3);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: right;
}

/* =========================================================
   Invest statement
   A third cream beat in the same rhythm as the credibility banner and
   Contact — pulled out of Services into its own quiet, full-width
   moment so the line gets room to breathe rather than closing out the
   packages as one more paragraph.
   ========================================================= */
.invest{
  background: var(--ink);
  max-width: none;
  padding: var(--space-4) var(--gutter);
}
.invest__statement{
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  max-width: 46ch;
  text-align: center;
  color: var(--paper-deep);
  white-space: nowrap;
}

/* =========================================================
   Process
   ========================================================= */
.process__list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}
.process__number{
  font-family: var(--font-display);
  color: var(--ink-faint);
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}
.process__title{
  font-size: 1.35rem;
  margin-bottom: 0.5em;
}
.process__text{
  color: var(--ink-soft);
  font-size: 0.96rem;
}

/* =========================================================
   Contact
   ========================================================= */
/* Same muted cream ground as the credibility banner — a second light
   beat late in the page that gives the closing sections more deliberate
   rhythm instead of one unbroken stretch of near-black. */
.contact{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
  background: var(--ink);
  color: var(--paper-deep);
  max-width: none;
  padding: var(--space-7) var(--gutter);
}
.contact__intro{ max-width: 46ch; }
.contact .eyebrow{ color: rgba(5,5,4,0.55); }
.contact h2{
  color: var(--paper-deep);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  margin-bottom: var(--space-3);
}
.contact__text{
  color: rgba(5,5,4,0.72);
  margin-bottom: var(--space-4);
  max-width: 42ch;
}
.contact__links{ display: flex; flex-direction: column; gap: 0.6em; }
.contact__links a{
  text-decoration: none;
  border-bottom: 1px solid rgba(5,5,4,0.32);
  padding-bottom: 0.15em;
  width: fit-content;
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.contact__links a:hover, .contact__links a:focus-visible{
  border-color: var(--paper-deep);
}

.contact__form{ max-width: 520px; }
.form-row{ margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: 0.5em; }
/* Honeypot: present for bots, invisible and unreachable for people */
.form-row--hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.form-row label{
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: rgba(5,5,4,0.62);
}
.form-row input,
.form-row select,
.form-row textarea{
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(5,5,4,0.32);
  padding: 0.6em 0.1em;
  color: var(--paper-deep);
  transition: border-color var(--dur-fast) var(--ease);
}
.form-row select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23050504' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2em center;
}
.form-row select option{ color: var(--paper-deep); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: none;
  border-color: var(--paper-deep);
}
.form-row textarea{ resize: vertical; min-height: 6em; }

.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.9em;
  border-radius: 999px;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.button--primary{
  background: var(--paper-deep);
  color: var(--ink);
}
.button--primary:hover, .button--primary:focus-visible{
  transform: translateY(-1px);
}
.button--primary:disabled{
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.form-status{
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: rgba(5,5,4,0.72);
  min-height: 1.2em;
}
.form-status.is-success{ color: #3f6b52; }
.form-status.is-error{ color: #8a3f47; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  background: var(--paper);
  color: var(--ink);
  max-width: none;
  padding: var(--space-7) var(--gutter) var(--space-6);
}
.faq__inner{
  max-width: var(--container);
  margin: 0 auto;
}
.faq .section-intro{ margin-bottom: var(--space-4); }

.faq-group + .faq-group{ margin-top: var(--space-5); }
.faq-group__title{ color: var(--accent-hagd); margin-bottom: var(--space-2); }

.faq-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item__heading{ margin: 0; font-family: var(--font-body); font-weight: 400; }

.faq-item__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.faq-item__question{
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease);
}
.faq-item__trigger:hover .faq-item__question,
.faq-item__trigger:focus-visible .faq-item__question{
  color: var(--ink-soft);
}
.faq-item__trigger:focus-visible{
  outline: 1px solid var(--line-strong);
  outline-offset: 4px;
}

.faq-item__icon{
  position: relative;
  flex: none;
  width: 16px; height: 16px;
}
.faq-item__icon::before, .faq-item__icon::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ink-soft);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item__icon::before{ width: 16px; height: 1px; }
.faq-item__icon::after{ width: 1px; height: 16px; }
.faq-item.is-open .faq-item__icon::after{ transform: translate(-50%, -50%) rotate(90deg); }

/* Smooth expand/collapse without JS height measurement: the panel is a
   single-row grid animating between 0fr and 1fr, with an overflow-hidden
   inner wrapper — the row itself never needs a pixel height. */
.faq-item__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease);
}
.faq-item.is-open .faq-item__panel{ grid-template-rows: 1fr; }
.faq-item__panel-inner{
  overflow: hidden;
  min-height: 0;
}
.faq-item__answer{
  color: var(--ink-soft);
  max-width: 62ch;
  padding-bottom: var(--space-3);
}
.faq-item__answer + .faq-item__answer{ margin-top: 1em; }

@media (prefers-reduced-motion: reduce){
  .faq-item__panel{ transition: none; }
  .faq-item__icon::after{ transition: none; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: var(--night);
  color: rgba(243,241,234,0.55);
  padding: var(--space-6) var(--gutter) var(--space-5);
  font-size: 0.85rem;
}
.site-footer__cta{
  max-width: var(--container);
  margin: 0 auto;
  padding-bottom: var(--space-5);
  text-align: center;
}
.site-footer__cta-line{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--ink);
}
.site-footer__cta-link{
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(243,241,234,0.4);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.site-footer__cta-link:hover,
.site-footer__cta-link:focus-visible{
  text-decoration-color: currentColor;
}
.site-footer__inner{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  justify-content: space-between;
  border-top: 1px solid rgba(243,241,234,0.14);
  padding-top: var(--space-3);
}

/* =========================================================
   Reveal on scroll
   ========================================================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .about{ grid-template-columns: 1fr; }
  .about__media{ aspect-ratio: 3 / 3.6; max-width: 460px; order: 2; }
  /* Headline reads before the photo, paragraphs follow it. .about__text
     itself stays a normal box on desktop (see base rules); display:contents
     here only lets its two children take part in .about's own grid so they
     can be reordered around the photo, without any markup duplication. */
  .about__text{ display: contents; }
  .about__heading{ order: 1; }
  .about__body{ order: 3; }

  .contact{ grid-template-columns: 1fr; }
  /* Same technique: .contact__left is a single grid item on desktop (see
     base rules) so the two-column layout is untouched; here its children
     take part in .contact's grid directly so the links can drop below the
     form without moving the intro copy. */
  .contact__left{ display: contents; }
  .contact__intro{ order: 1; }
  .contact__form{ order: 2; }
  .contact__links{ order: 3; }

  /* Quieter, footer-like treatment now that the links sit below the form */
  .contact__links{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(5,5,4,0.14);
  }
  .contact__links a{
    font-size: 0.8rem;
    border-bottom: none;
    color: rgba(5,5,4,0.55);
  }
  .contact__links a:hover, .contact__links a:focus-visible{
    color: var(--paper-deep);
    border-bottom: none;
  }

  .process__list{ grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
}

@media (max-width: 900px){
  .site-header__inner{ justify-content: space-between; }
  .header-enquire{ display: inline-flex; align-items: center; }

  .primary-nav{
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform var(--dur-med) var(--ease);
    z-index: 400;
  }
  .primary-nav.is-open{ transform: translateY(0); }
  .primary-nav ul{
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
  .primary-nav a{ font-size: 1.4rem; font-family: var(--font-display); }
  .nav-toggle{ display: flex; position: relative; z-index: 410; }

  .package{ grid-template-columns: 1fr; }
  .package__description{ align-self: auto; }
  /* Base rule pins this to the second column of the desktop 2-col layout;
     once .package collapses to a single track above, that explicit
     placement creates an unwanted implicit second column, squeezing
     everything else into a cramped sliver. Reset it back to the flow. */
  .package__detail{ grid-column: 1; }

  /* Grid stacks below its info panel once there is no room for two columns;
     the info panel stops being sticky since it no longer sits alongside a
     tall scrolling column. */
  .project__layout{ grid-template-columns: 1fr; gap: var(--space-4); }
  .project__info{
    position: static;
    max-width: none;
  }
  .project__description{ max-width: 60ch; }

  /* Two columns of thumbnails on touch/tablet widths — still curated via
     the feature span, just against a shorter row. Hover states are moot
     here (see the (hover: hover) guard above); tapping opens the preview
     directly, same as desktop. */
  .deck-grid{ grid-template-columns: repeat(2, 1fr); }
  .deck-grid__item--feature{ grid-column: span 2; }

  .clients__logos{ gap: var(--space-4) var(--space-5); }

  /* The desktop request was a single line; on phone widths there isn't
     room for that without shrinking the type past legibility, so it
     wraps normally here instead of forcing an overflow. */
  .invest__statement{ white-space: normal; }
}

@media (max-width: 700px){
  section{ padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .work{ padding-top: var(--space-6); }
  .about, .contact, .faq{ padding-top: var(--space-5); padding-bottom: var(--space-5); }

  /* Right-aligned add-ons text wraps to a ragged two-line block on narrow
     screens; centred reads as intentional whether it wraps or not. */
  .packages__addons{ text-align: center; }

  .project__title{ margin-bottom: 0.3em; }
  .project__tagline{ margin-bottom: var(--space-2); }

  /* Two thumbnails per row keeps phone browsing compact and gallery-like —
     more of the deck visible at once, less vertical scrolling — while the
     feature span still lets a title card, collage or divider take the
     full row, so the grid keeps an editorial rhythm instead of reading
     as a flat, generic thumbnail wall. */
  .deck-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .deck-grid__item--feature{ grid-column: span 2; }

  .process__list{ grid-template-columns: 1fr; row-gap: var(--space-4); }

  .hero{ padding-bottom: var(--space-6); }
  .scroll-cue{ right: var(--gutter); bottom: var(--space-3); }
  .hero__frame{ object-position: center 30%; }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(5,5,4,0.68) 0%, rgba(5,5,4,0.6) 30%, rgba(5,5,4,0.95) 100%);
  }

  .lightbox__panel{ max-width: 92vw; }
  .lightbox__close, .lightbox__nav{ width: 2.1em; height: 2.1em; }

  .clients__logo-img{ height: 1.3rem; }
}

@media (max-width: 380px){
  /* Below this width two columns start to squeeze the thumbnails too
     small to appreciate the design, so the grid gracefully drops back
     to one generous column rather than staying cramped. */
  .deck-grid{ grid-template-columns: 1fr; }
  .deck-grid__item--feature{ grid-column: span 1; }
}