@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/Archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Pinyon Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/PinyonScript.woff2") format("woff2");
}

/* ==========================================================================
   Faymous Events. Warm charcoal and bone with a single bronze accent used
   only on small caps labels. A neutral grotesk carries the structure; a
   formal script is held back for names, so it stays an event and never a
   decoration. Photography is monochrome throughout.
   ========================================================================== */

:root {
  --ink:#262424; --paper:#f8f7f6; --oat:#e5e3dd; --bronze:#78543a;
  --ink70:rgba(38,36,36,.72); --ink60:rgba(38,36,36,.62); --ink45:rgba(38,36,36,.45);
  --line:rgba(38,36,36,.14);
  --gro:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --scr:"Pinyon Script","Snell Roundhand",cursive;
  --gut:clamp(1.25rem,5vw,4rem);
  --maxw:84rem;
}

*,*::before,*::after { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--gro);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
h1,h2,h3,p,dl,dd,figure,fieldset,legend { margin:0; padding:0; }
ul { margin:0; padding:0; list-style:none; }
fieldset { border:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection { background:var(--ink); color:var(--paper); }
:focus-visible { outline:2px solid var(--bronze); outline-offset:3px; }

.vh, .skip {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; white-space:nowrap; border:0; clip-path:inset(50%);
}
.skip:focus {
  position:fixed; top:0; left:0; z-index:100; width:auto; height:auto; margin:0;
  padding:.75rem 1.25rem; clip-path:none; background:var(--ink); color:var(--paper);
}

.eyebrow { font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze); }
.h2 { font-size:clamp(1.6rem,3.6vw,2.6rem); font-weight:400; letter-spacing:-.012em; text-wrap:balance; }
.h2--script { font-family:var(--scr); font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.05; letter-spacing:0; }

/* --- header ------------------------------------------------------------- */
.head {
  position:absolute; inset:0 0 auto 0; z-index:10; display:flex; align-items:center;
  justify-content:space-between; gap:2rem; padding:clamp(1.25rem,3vw,2.25rem) var(--gut);
  color:var(--paper);
}
.brand { font-size:.85rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; }
.brand--dark { color:var(--ink); }
.head__nav { display:none; gap:2rem; }
.head__nav a { font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; transition:opacity .2s; }
.head__nav a:hover { opacity:1; }
.head__cta { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; padding-bottom:.3rem; border-bottom:1px solid currentColor; }

/* --- hero ---------------------------------------------------------------- */
.hero { position:relative; height:92svh; min-height:32rem; overflow:hidden; background:var(--ink); }
.hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.9); }
.hero__veil { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(38,36,36,.42) 0%,rgba(38,36,36,.12) 34%,rgba(38,36,36,.9) 100%); }
.hero__type { position:absolute; inset:auto 0 0 0; padding:0 var(--gut) clamp(2.5rem,6vw,4.5rem); color:var(--paper); }
.hero h1 { font-size:clamp(2.4rem,8.2vw,8rem); font-weight:600; line-height:.9; letter-spacing:-.02em; text-transform:uppercase; }
.hero__ind { display:inline-block; padding-left:clamp(0rem,3vw,3.5rem); }

/* --- studio statement ----------------------------------------------------- */
.studio { max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,10vw,8rem) var(--gut); text-align:center; }
.studio__line { margin-top:1.75rem; font-size:clamp(1.4rem,3.4vw,2.6rem); line-height:1.24; letter-spacing:-.01em; }
.studio__body { max-width:42rem; margin:1.75rem auto 0; color:var(--ink60); font-size:1.05rem; line-height:1.75; }
.studio__body + .studio__body { margin-top:1.25rem; }

/* --- pillars --------------------------------------------------------------- */
.pillars { display:grid; gap:1px; background:var(--oat); border-block:1px solid var(--oat); }
.pillar { display:block; background:var(--paper); padding-bottom:2.25rem; text-align:center; }
.pillar__fr { display:block; overflow:hidden; }
.pillar__fr img { width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:transform .9s cubic-bezier(.22,1,.36,1),filter .6s; }
.pillar:hover .pillar__fr img { transform:scale(1.04); }
.pillar__nm { display:block; margin-top:1.6rem; font-family:var(--scr); font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1; }
.pillar__nt { display:block; margin-top:.8rem; padding-inline:1.4rem; font-size:.85rem; color:var(--ink60); }

/* --- full bleed plate ------------------------------------------------------- */
.plate { position:relative; isolation:isolate; min-height:60svh; display:grid; place-items:center; overflow:hidden; }
.plate__img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.78); }
.plate__veil { position:absolute; inset:0; z-index:-1; background:rgba(38,36,36,.34); }
.plate__inner { padding:clamp(4rem,9vw,7rem) var(--gut); text-align:center; }
.plate__quote { max-width:26ch; margin:0 auto; font-family:var(--scr); font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.18; color:var(--paper); }

/* --- approach ---------------------------------------------------------------- */
.approach { max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,10vw,8rem) var(--gut); }
.approach__head { text-align:center; }
.approach__head .h2 { margin-top:1.25rem; }
.steps { display:grid; gap:3rem; margin-top:4rem; }
.step__nm { display:block; font-family:var(--scr); font-size:clamp(1.7rem,2.8vw,2.2rem); line-height:1; }
.step p { margin-top:1rem; max-width:34ch; color:var(--ink60); line-height:1.8; }

/* --- selected work ------------------------------------------------------------ */
.work { max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,10vw,8rem) var(--gut); }
.work__head { text-align:center; }
.work__head .h2 { margin-top:1.25rem; }
.case { margin-top:4.5rem; padding-top:4.5rem; border-top:1px solid var(--line); }
.case:first-of-type { margin-top:4rem; padding-top:0; border-top:0; }
.case__grid { display:grid; gap:1rem; }
.case__grid img { width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.04); }
.case__meta { margin-top:2.25rem; text-align:center; }
.case__nm { font-family:var(--scr); font-size:clamp(2rem,4vw,3rem); line-height:1.05; }
.case__where { margin-top:.6rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink45); }
.case__story { max-width:42rem; margin:1.25rem auto 0; color:var(--ink60); line-height:1.85; }

.case__feature { margin-top:3.5rem; text-align:center; }
.case__feature img {
  width:min(100%,30rem); margin:0 auto; aspect-ratio:2/3; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
}
.case__feature figcaption {
  margin-top:1rem; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink45);
}


/* --- about ---------------------------------------------------------------------- */
.about { background:var(--oat); padding:clamp(4.5rem,10vw,8rem) var(--gut); }
.about__inner { max-width:var(--maxw); margin:0 auto; display:grid; gap:3rem; }
.about__media img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; filter:grayscale(1) contrast(1.04); }
.about__copy .h2 { margin-top:1.25rem; }
.about__copy p { margin-top:1.25rem; max-width:56ch; color:var(--ink60); line-height:1.85; }
.about__copy .eyebrow + .h2 { margin-top:1rem; }

/* --- enquiry ---------------------------------------------------------------------- */
.enquire { background:var(--ink); color:var(--paper); padding:clamp(4.5rem,10vw,8rem) var(--gut); }
.enquire .eyebrow { color:#c2966f; }
.enquire__intro { max-width:var(--maxw); margin:0 auto; text-align:center; }
.enquire__intro .h2 { margin-top:1.25rem; }
.enquire__lede { max-width:38rem; margin:1.25rem auto 0; color:rgba(248,247,246,.66); }
.enquire__body { max-width:var(--maxw); margin:3.5rem auto 0; display:grid; gap:3.5rem; }

.form { display:grid; gap:2rem; }
.form__pair { display:grid; gap:2rem; }
.field label, .chips legend { display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(248,247,246,.6); }
.field input, .field select, .field textarea {
  width:100%; margin-top:.5rem; padding:.7rem 0; border:0; border-bottom:1px solid rgba(248,247,246,.24);
  border-radius:0; background:transparent; color:var(--paper); font:inherit; font-size:1rem; transition:border-color .2s;
}
.field select { height:2.9rem; -webkit-appearance:none; appearance:none; }
.field select option { background:var(--ink); color:var(--paper); }
.field textarea { resize:vertical; min-height:7rem; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:#c2966f; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color:#e8a87c; }
.field__err { margin-top:.5rem; font-size:.8rem; color:#e8a87c; }
.chips__row { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.chip { padding:.6rem 1rem; border:1px solid rgba(248,247,246,.24); font-size:.85rem; color:rgba(248,247,246,.72); transition:color .2s,border-color .2s,background-color .2s; }
.chip:hover { color:var(--paper); border-color:var(--paper); }
.chip[aria-pressed="true"] { background:var(--paper); border-color:var(--paper); color:var(--ink); }
.form__status { margin-top:1rem; font-size:.875rem; color:#e8a87c; }
.form__status:empty { display:none; }

.btn { display:inline-block; padding:1rem 2.4rem; border:1px solid var(--ink); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; transition:background-color .3s,color .3s; }
.btn:hover { background:var(--ink); color:var(--paper); }
.btn--solid { border-color:var(--paper); background:var(--paper); color:var(--ink); }
.btn--solid:hover { background:transparent; color:var(--paper); }
.btn--solid:active { transform:translateY(1px); }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

.sent { border:1px solid #c2966f; padding:2.5rem; }
.sent__title { margin-top:1rem; font-family:var(--scr); font-size:1.9rem; line-height:1.1; }
.sent__body { margin-top:.75rem; max-width:44ch; color:rgba(248,247,246,.66); line-height:1.75; }
.sent__again { margin-top:1.75rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:underline; text-decoration-color:#c2966f; text-underline-offset:6px; }

.details { padding-top:2rem; border-top:1px solid rgba(248,247,246,.18); }
.details dl { display:grid; gap:1.75rem; }
.details dt { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(248,247,246,.6); }
.details dd { margin-top:.5rem; font-size:1.05rem; }
.details dd a { border-bottom:1px solid rgba(248,247,246,.3); transition:border-color .2s; }
.details dd a:hover { border-color:#c2966f; }
.details__sub { font-size:.9rem; color:rgba(248,247,246,.6); }

/* --- footer -------------------------------------------------------------------------- */
.foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:2.5rem var(--gut); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink45); }

/* Photography sits monochrome at rest and comes up in colour under the cursor.
   Guarded on (hover:hover): on a touch screen a tap can latch :hover and leave
   an image stranded half way, so touch devices keep the monochrome treatment.
   The hero and the quote plate are deliberately excluded, since both carry
   white type and need to stay dark and flat to keep it readable. */
@media (hover: hover) {
  .pillar__fr img,
  .case__grid img,
  .case__feature img,
  .about__media img {
    transition:filter .6s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
  }
  .pillar:hover .pillar__fr img,
  .case__grid img:hover,
  .case__feature img:hover,
  .about__media img:hover {
    filter:grayscale(0) contrast(1.04);
  }
}

/* --- breakpoints ---------------------------------------------------------------------- */
@media (min-width:40rem) {
  .pillars { grid-template-columns:repeat(2,1fr); }
  .case__grid { grid-template-columns:repeat(3,1fr); }
  .form__pair { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:repeat(3,1fr); gap:2.5rem; }
}
@media (min-width:64rem) {
  .head__nav { display:flex; }
  .about__inner { grid-template-columns:.8fr 1.2fr; gap:5rem; align-items:start; }
  .about__media { position:sticky; top:6rem; }
  .enquire__body { grid-template-columns:1.5fr .5fr; gap:5rem; align-items:start; }
  .details { padding-top:0; padding-left:3rem; border-top:0; border-left:1px solid rgba(248,247,246,.18); }
}
/* Very narrow screens (Galaxy Fold cover screen and similar, ~280px). The
   brand lockup plus the Enquire link, and the indented hero line, both run
   past the edge below about 24rem. */
@media (max-width:24rem) {
  .head { gap:1rem; }
  .brand { font-size:.72rem; letter-spacing:.18em; }
  .head__cta { font-size:.62rem; letter-spacing:.12em; }
  .hero h1 { font-size:clamp(1.85rem,9vw,8rem); }
  .hero__ind { padding-left:0; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .pillar__fr img { transition:none; }
}

/* Blog. The index lists every post; each post is a single narrow column. */
.djband { background:var(--oat); padding:clamp(2.5rem,6vw,4rem) var(--gut); }
.djband__inner { max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1.5rem; }
.djband__copy { max-width:38rem; }
.djband__line { font-family:var(--scr); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; margin-top:.4rem; }
.djband__nt { font-size:.95rem; color:var(--ink70); margin-top:.6rem; }

.blog { padding:clamp(4rem,10vw,7rem) var(--gut) clamp(3rem,7vw,5rem); max-width:var(--maxw); margin:0 auto; }
.blog__head { max-width:44rem; margin-bottom:clamp(2.5rem,6vw,4rem); }
.blog__lede { margin-top:1rem; color:var(--ink70); font-size:1.05rem; }
.blog__year { font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze);
  padding-top:2rem; margin-top:2rem; border-top:1px solid var(--line); }
.blog__list { display:grid; gap:0; }
.entry { display:block; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.entry:first-of-type { border-top:1px solid var(--line); }
.entry__date { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink45); }
.entry__ttl { font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:400; margin-top:.5rem; text-wrap:balance;
  transition:color .2s; }
.entry:hover .entry__ttl { color:var(--bronze); }
.entry__ex { margin-top:.6rem; color:var(--ink70); font-size:.98rem; max-width:52rem; }

.post { padding:clamp(4rem,10vw,7rem) var(--gut) clamp(2rem,5vw,3rem); }
.post__inner { max-width:44rem; margin:0 auto; }
.post__date { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink45); }
.post__ttl { font-size:clamp(1.8rem,4.4vw,2.9rem); font-weight:400; line-height:1.15; letter-spacing:-.012em;
  margin-top:.8rem; text-wrap:balance; }
.post__body { margin-top:2.2rem; }
.post__body p { margin-bottom:1.15rem; font-size:1.05rem; line-height:1.72; }
.post__body h2 { font-size:clamp(1.2rem,2.6vw,1.5rem); font-weight:400; margin:2.2rem 0 .9rem; letter-spacing:-.008em; }
.post__body ul { margin:0 0 1.15rem 1.1rem; }
.post__body li { margin-bottom:.5rem; font-size:1.05rem; line-height:1.7; }
.post__body strong { font-weight:600; }
.post__end { max-width:44rem; margin:0 auto; padding:2rem var(--gut) clamp(4rem,8vw,6rem);
  border-top:1px solid var(--line); }
.post__back { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink45); }
.post__back:hover { color:var(--ink); }
.post__cta { margin-top:1.4rem; font-size:1.05rem; }
/* Blog pages have no hero behind the header, so it needs to sit in the flow
   with ink type rather than floating white over an image. */
.head--solid { position:static; color:var(--ink); border-bottom:1px solid var(--line); }
.blog__note { display:block; margin-top:.5rem; font-size:.9rem; letter-spacing:0;
  text-transform:none; color:var(--ink70); }