/* ══ Brushive blocks ══════════════════════════════════════════════
   The styles for everything that can be dropped onto the canvas.

   This file is the contract between the builder and the live site:
   the canvas loads it, and so does the page it produces, which is why
   what you arrange in the dashboard is what a visitor sees. It uses
   the site's own tokens — the rem scale, the typefaces, the palette —
   rather than inventing a second design system alongside the first.

   Every rule is prefixed bru- so nothing here can reach into the
   hand-built pages, and nothing there can reach into these.         */

.bruPage{position:relative;z-index:1}

/* ── the band: every block sits in one ─────────────────────────── */
.bruBlock{position:relative;padding:12rem 8rem;background:var(--black,#000);color:var(--white,#fff)}
.bruBlock--tight{padding:6rem 8rem}
.bruBlock--flush{padding:0}
.bruBlock--light{background:var(--cream-warm,#e9e4d9);color:var(--black,#000)}
.bruBlock--cream{background:var(--cream,#e9e9e9);color:var(--black,#000)}
.bruBlock__inner{max-width:152rem;margin:0 auto}

/* ── type ──────────────────────────────────────────────────────── */
.bruEyebrow{display:block;font-family:var(--mon,monospace);font-size:1rem;line-height:160%;
  letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin:0 0 2.4rem}
.bruHeading{font-family:var(--swear,Georgia,serif);font-weight:500;line-height:.92;
  font-size:min(9rem,10vw);letter-spacing:-.01em;margin:0 0 3.2rem}
.bruHeading--xl{font-size:min(12.5rem,13vw);line-height:.9;margin-bottom:5rem}
.bruHeading--sm{font-size:min(4.6rem,7vw);line-height:1.02;margin-bottom:2.2rem}
.bruStatement{font-family:var(--druk,"Arial Narrow",sans-serif);text-transform:uppercase;
  font-size:min(13rem,13.5vw);line-height:.88;letter-spacing:-.005em;margin:0 0 3.4rem}
.bruText{font-family:var(--book,Arial,sans-serif);font-size:1.8rem;line-height:1.6;
  max-width:62rem;margin:0 0 2rem}
.bruText--wide{max-width:none}
.bruText:last-child{margin-bottom:0}
.bruText a{color:inherit;text-decoration:underline;text-underline-offset:.35em}

/* ── button ────────────────────────────────────────────────────── */
/* The site's pill: two halves that part on hover behind a gold dot. */
.bruBtn{position:relative;display:inline-block;height:4.6rem;border-radius:2.3rem;
  padding:1.55rem 2.2rem 1.65rem 3.4rem;overflow:hidden;text-decoration:none}
.bruBtn__label{color:var(--black,#000);font-family:var(--mon,monospace);font-size:1.5rem;
  font-weight:400;line-height:.95;position:relative;z-index:2;display:inline-block;
  transition:transform 150ms var(--ease,ease)}
.bruBtn__dot{position:absolute;display:block;left:.8rem;top:1rem;width:2.6rem;height:2.6rem;
  border-radius:1.3rem;background-color:var(--gold,#b4a88f);transform:translateX(0) scale(.2);
  z-index:2;transition:transform .45s var(--ease,ease)}
.bruBtn::before,.bruBtn::after{content:"";display:inline-block;position:absolute;top:0;bottom:0;
  min-width:75%;max-width:75%;background-color:var(--white,#fff);z-index:1}
.bruBtn::before{left:0;border-radius:2.2rem 0 0 2.2rem;transition:transform .2s var(--ease,ease)}
.bruBtn::after{right:0;border-radius:0 2.2rem 2.2rem 0;transition:transform 250ms var(--ease,ease)}
.bruBtn:hover .bruBtn__dot{transform:translateX(0) scale(1)}
.bruBtn:hover .bruBtn__label{transform:translateX(.6rem)}
.bruBtn:hover::before{transform:translateX(-.5rem)}
.bruBtn:hover::after{transform:translateX(.5rem)}
.bruBtn--ghost::before,.bruBtn--ghost::after{background-color:transparent;
  box-shadow:inset 0 0 0 1px currentColor}
.bruBtn--ghost .bruBtn__label{color:inherit}
.bruBtns{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1rem}

/* ── hero ──────────────────────────────────────────────────────── */
.bruHero{padding-top:22rem}
.bruHero__lead{font-family:var(--book,Arial,sans-serif);font-size:2.2rem;line-height:1.5;
  max-width:74rem;margin:0 0 4rem;opacity:.85}
.bruHero__meta{display:flex;flex-wrap:wrap;gap:0 9rem;border-top:1px solid var(--hair,rgba(255,255,255,.25));
  padding-top:3rem;margin-top:6rem}
.bruHero__meta>div{display:flex;flex-direction:column;max-width:34rem}
.bruHero__meta .bruEyebrow{margin-bottom:1.2rem}

/* ── media ─────────────────────────────────────────────────────── */
.bruFigure{margin:0}
.bruFigure img{display:block;width:100%;height:auto;border-radius:1rem}
.bruFigure figcaption{font-family:var(--mon,monospace);font-size:1.1rem;letter-spacing:.18em;
  text-transform:uppercase;opacity:.5;margin-top:1.6rem}
.bruFigure--full img{border-radius:0}
.bruPair{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center}
.bruPair--flip{grid-template-columns:1fr 1.4fr}

/* text beside a picture */
.bruSplit{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:center}
.bruSplit--flip .bruSplit__media{order:2}
.bruSplit__body{max-width:56rem}

/* ── columns ───────────────────────────────────────────────────── */
.bruCols{display:grid;gap:4rem}
.bruCols--2{grid-template-columns:repeat(2,1fr)}
.bruCols--3{grid-template-columns:repeat(3,1fr)}
.bruCols--4{grid-template-columns:repeat(4,1fr)}
.bruCol{min-width:0}

/* ── list rows: services, capabilities, process ────────────────── */
.bruRows{border-top:1px solid currentColor}
.bruRow{display:grid;grid-template-columns:8rem 1fr 1.2fr;gap:4rem;align-items:baseline;
  padding:3.4rem 0;border-bottom:1px solid currentColor}
.bruRow__num{font-family:var(--mon,monospace);font-size:1.2rem;letter-spacing:.2em;opacity:.5}
.bruRow__name{font-family:var(--swear,Georgia,serif);font-size:3.6rem;line-height:1.05;margin:0}
.bruRow__note{font-family:var(--book,Arial,sans-serif);font-size:1.6rem;line-height:1.6;
  opacity:.75;margin:0}

/* ── figures and statistics ────────────────────────────────────── */
.bruStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:4rem}
.bruStat b{display:block;font-family:var(--swear,Georgia,serif);font-weight:500;
  font-size:6.4rem;line-height:1;margin-bottom:1.2rem}
.bruStat span{font-family:var(--book,Arial,sans-serif);font-size:1.5rem;line-height:1.55;opacity:.7}

/* ── quote ─────────────────────────────────────────────────────── */
.bruQuote{max-width:104rem;margin:0 auto;text-align:center}
.bruQuote__text{font-family:var(--swear,Georgia,serif);font-size:min(5.2rem,7vw);line-height:1.12;
  margin:0 0 3rem}
.bruQuote__who{font-family:var(--mon,monospace);font-size:1.2rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.6}
.bruQuote__face{width:9rem;height:9rem;border-radius:50%;object-fit:cover;margin:0 auto 3rem;display:block}

/* ── marquee ───────────────────────────────────────────────────── */
.bruMarquee{overflow:hidden;border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  padding:2.6rem 0;white-space:nowrap}
.bruMarquee__track{display:inline-block;animation:bruSlide 26s linear infinite}
.bruMarquee__track span{font-family:var(--swear,Georgia,serif);font-size:4.2rem;padding:0 3rem}
@keyframes bruSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bruMarquee__track{animation:none}}

/* ── question and answer ───────────────────────────────────────── */
.bruFaq details{border-bottom:1px solid currentColor;padding:2.8rem 0}
.bruFaq summary{font-family:var(--swear,Georgia,serif);font-size:2.8rem;line-height:1.2;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:2rem}
.bruFaq summary::-webkit-details-marker{display:none}
.bruFaq summary::after{content:"+";font-family:var(--mon,monospace);font-size:2.2rem;opacity:.5}
.bruFaq details[open] summary::after{content:"–"}
.bruFaq p{font-family:var(--book,Arial,sans-serif);font-size:1.7rem;line-height:1.65;
  max-width:76rem;margin:1.8rem 0 0;opacity:.8}

/* ── the live collections ──────────────────────────────────────── */
.bruWorkGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(30rem,1fr));gap:3rem}
.bruWorkCard{display:block;text-decoration:none;color:inherit}
.bruWorkCard__art{display:block;position:relative;aspect-ratio:3/4;border-radius:1rem;
  overflow:hidden;margin-bottom:1.8rem;background:
    repeating-linear-gradient(105deg,rgb(255 255 255/.045) 0 1px,transparent 1px 13px),
    radial-gradient(110% 78% at 20% 14%,hsl(var(--h,30) 36% 44%),transparent 64%),
    radial-gradient(95% 72% at 84% 84%,hsl(var(--h2,200) 28% 30%),transparent 62%),
    linear-gradient(150deg,#1a1a1a,#000)}
.bruWorkCard__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease,ease)}
.bruWorkCard:hover .bruWorkCard__art img{transform:scale(1.06)}
.bruWorkCard__name{display:block;font-family:var(--swear,Georgia,serif);font-size:2.8rem;line-height:1.1}
.bruWorkCard__line{display:block;font-family:var(--book,Arial,sans-serif);font-size:1.5rem;
  line-height:1.5;opacity:.7;margin-top:.6rem}

.bruPostList{display:grid;gap:0;border-top:1px solid currentColor}
.bruPost{display:grid;grid-template-columns:16rem 1fr 1.1fr;gap:4rem;align-items:baseline;
  padding:3.2rem 0;border-bottom:1px solid currentColor;text-decoration:none;color:inherit}
.bruPost__date{font-family:var(--mon,monospace);font-size:1.2rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.5}
.bruPost__title{font-family:var(--swear,Georgia,serif);font-size:3rem;line-height:1.1}
.bruPost__stand{font-family:var(--book,Arial,sans-serif);font-size:1.5rem;line-height:1.6;opacity:.7}

/* ── spacer and rule ───────────────────────────────────────────── */
.bruSpacer{display:block;height:8rem}
.bruSpacer--sm{height:4rem}
.bruSpacer--lg{height:16rem}
.bruRule{border:0;border-top:1px solid currentColor;opacity:.35;margin:0}

/* ── video ─────────────────────────────────────────────────────── */
.bruVideo{position:relative;width:100%;aspect-ratio:16/9;border-radius:1rem;overflow:hidden;
  background:#111}
.bruVideo video,.bruVideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:cover}

/* ── phones ────────────────────────────────────────────────────── */
@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .bruBlock{padding:7rem 2.5rem}
  .bruBlock--tight{padding:4rem 2.5rem}
  .bruHero{padding-top:14rem}
  .bruHeading{font-size:min(6.4rem,13vw)}
  .bruHeading--xl{font-size:min(7.2rem,16vw);margin-bottom:3rem}
  .bruHeading--sm{font-size:min(3.4rem,8vw)}
  .bruStatement{font-size:min(7rem,15vw)}
  .bruHero__lead{font-size:1.9rem}
  .bruHero__meta{gap:3rem 4rem;padding-top:2.4rem;margin-top:4rem}
  .bruSplit,.bruPair,.bruPair--flip{grid-template-columns:1fr;gap:3rem}
  .bruSplit--flip .bruSplit__media{order:0}
  .bruCols--2,.bruCols--3,.bruCols--4{grid-template-columns:1fr;gap:3rem}
  .bruRow{grid-template-columns:1fr;gap:1.2rem;padding:2.6rem 0}
  .bruRow__name{font-size:2.8rem}
  .bruStats{grid-template-columns:1fr;gap:3rem}
  .bruStat b{font-size:4.8rem}
  .bruQuote__text{font-size:min(3.2rem,8vw)}
  .bruMarquee__track span{font-size:2.8rem;padding:0 1.8rem}
  .bruFaq summary{font-size:2rem}
  .bruPost{grid-template-columns:1fr;gap:1rem;padding:2.4rem 0}
  .bruPost__title{font-size:2.4rem}
  .bruSpacer{height:5rem}
  .bruSpacer--lg{height:9rem}
}

/* ══ the Studio page's own sections ═══════════════════════════════
   Phase two: the hand-built pages become things that can be arranged
   on the canvas. These are the Studio page's bands, lifted from its
   template rather than reinvented, so a page built out of them is the
   same page — same proportions, same type, same rules — only now it
   can be reordered, duplicated and used on other pages too.        */

.bruPageHead{position:relative;min-height:56rem;padding:14rem 5.8rem 6rem 5.2rem;
  display:flex;flex-direction:column;justify-content:flex-end}
.bruPageHead__eyebrow{display:block;font-family:var(--mon,monospace);font-size:1rem;
  line-height:160%;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(255 255 255/.55);margin-bottom:3rem}
.bruPageHead__heading{font-family:var(--swear,Georgia,serif);font-weight:500;line-height:.9;
  font-size:min(12.5rem,13vw);margin:0 0 8rem}
.bruPageHead__heading span{display:block}
.bruPageHead__meta{display:flex;flex-wrap:wrap;gap:0 9rem;
  border-top:1px solid var(--hair,rgba(255,255,255,.25));padding-top:3rem}
.bruPageHead__meta>div{display:flex;flex-direction:column;max-width:34rem}
.bruPageHead__meta .bruEyebrow{color:rgb(255 255 255/.5);margin-bottom:1.4rem}
.bruPageHead__meta p{margin:0;font-family:var(--book,Arial,sans-serif);
  font-size:1.6rem;line-height:1.6}

/* a band inside the page, rather than a full-bleed block */
.bruBand{padding:12rem 5.2rem 0;max-width:152rem}
.bruBand__head{display:flex;align-items:baseline;gap:3rem;flex-wrap:wrap;
  border-top:1px solid var(--hair,rgba(255,255,255,.25));padding-top:3rem;margin-bottom:6rem}
.bruBand__head h2{font-family:var(--swear,Georgia,serif);font-weight:500;font-size:5rem;
  line-height:1;margin:0}
.bruBand__head p{margin:0;color:rgb(255 255 255/.5);
  font-family:var(--mon,monospace);font-size:1rem;line-height:160%;
  letter-spacing:.2em;text-transform:uppercase}

.bruLead{font-family:var(--book,Arial,sans-serif);font-weight:400;font-size:4.2rem;
  line-height:1.35;letter-spacing:.03em;margin:0;max-width:96rem}
.bruLead em{font-style:normal;font-family:var(--swear,Georgia,serif)}

.bruFigures{display:flex;flex-wrap:wrap;gap:6rem 8rem;margin-top:8rem}
.bruFigure2{min-width:24rem}
.bruFigure2 b{display:block;font-family:var(--mon,monospace);font-weight:300;font-size:5rem;
  line-height:1;letter-spacing:.03em;margin-bottom:1.4rem;font-variant-numeric:tabular-nums}
.bruFigure2 span{display:block;font-family:var(--book,Arial,sans-serif);font-size:1.7rem;
  line-height:1.5;color:rgb(255 255 255/.6);max-width:24rem}

.bruSteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(28rem,1fr));gap:5rem 6rem}
.bruStep .bruEyebrow{display:block;color:var(--gold,#b4a88f);margin-bottom:1.6rem;opacity:1}
.bruStep p{margin:0;font-family:var(--book,Arial,sans-serif);font-size:1.8rem;line-height:1.6;
  letter-spacing:.03em;color:rgb(255 255 255/.8)}

.bruTeam{display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:4rem}
.bruPerson figure{margin:0 0 1.8rem;aspect-ratio:4/5;overflow:hidden;background:#111}
.bruPerson img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);
  transition:filter .6s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1)}
.bruPerson:hover img{filter:grayscale(0);transform:scale(1.03)}
.bruPerson b{display:block;font-family:var(--book,Arial,sans-serif);font-size:2.1rem;
  font-weight:400;margin-bottom:.4rem}
.bruPerson span{display:block;color:rgb(255 255 255/.5);font-size:1.5rem;letter-spacing:.04em}

.bruClose{margin-top:12rem;display:flex;gap:4rem;align-items:flex-start;flex-wrap:wrap}
.bruClose p{margin:0;max-width:70rem;font-family:var(--book,Arial,sans-serif);font-size:2.4rem;
  line-height:1.5;letter-spacing:.03em}

/* a light band flips the half-transparent whites to half-transparent blacks */
.bruBlock--light .bruPageHead__eyebrow,.bruBlock--light .bruBand__head p,
.bruBlock--light .bruFigure2 span,.bruBlock--light .bruStep p,
.bruBlock--light .bruPerson span{color:rgb(0 0 0/.6)}
.bruBlock--light .bruBand__head,.bruBlock--light .bruPageHead__meta{border-top-color:rgb(0 0 0/.2)}

@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .bruPageHead{min-height:38rem;padding:11rem 1.5rem 3rem}
  .bruPageHead__eyebrow{margin-bottom:2rem}
  .bruPageHead__heading{font-size:min(6.4rem,17vw);letter-spacing:.02em;margin-bottom:4rem}
  .bruPageHead__meta{gap:3rem 4rem;padding-top:2.4rem}
  .bruPageHead__meta>div{max-width:none;min-width:12rem;flex:1 1 12rem}
  .bruPageHead__meta p{margin-top:1rem;font-size:1.4rem}
  .bruBand{padding:7rem 1.5rem 0}
  .bruLead{font-size:2.2rem}
  .bruFigures{gap:4rem 3rem;margin-top:5rem}
  .bruFigure2{min-width:45%}
  .bruFigure2 b{font-size:3.6rem}
  .bruBand__head h2{font-size:3rem}
  .bruSteps{gap:3.5rem}
  .bruTeam{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  .bruClose{margin-top:7rem}
  .bruClose p{font-size:1.8rem}
}

/* ══════════════════════════════════════════════════════════════════
   COMPONENTS LIFTED FROM THE HAND-BUILT PAGES

   The work filter, the journal list and the contact form are moving
   onto the canvas as live blocks, and their markup needs the same CSS
   it has always had. These rules are copied verbatim out of work.php,
   journal.php and contact.php rather than retyped, so a band built on
   the canvas is the band from the page, not an approximation of it.

   This stylesheet is linked by page.php and by nothing else, so what
   is added here cannot reach a page that is already serving.
   ══════════════════════════════════════════════════════════════════ */

/* ── from work.php ─────────────────────────────────────────────── */
/* ── filtering the grid ─────────────────────────────────────────
   Chips rather than a select: the whole set of disciplines is worth
   seeing at a glance, and one tap is fewer than three.           */
/* The grid below is positioned and is pulled up over this bar by the
   negative margin, so without a stacking context of its own the bar
   ends up underneath it and only the top few pixels of each chip can
   be clicked. Found by testing the canvas version; /work has the same
   problem and wants the same two properties. */
.workFilter{display:flex;flex-wrap:wrap;gap:1rem;padding:0 5rem;margin:0 0 -2rem;
  position:relative;z-index:2}
.workFilter__chip{appearance:none;background:none;cursor:pointer;
  border:1px solid rgb(255 255 255/.22);border-radius:4rem;
  padding:.9rem 2rem;color:rgb(255 255 255/.65);
  font-family:var(--mono,ui-monospace,monospace);font-size:1.3rem;letter-spacing:.12em;
  text-transform:uppercase;line-height:1;
  transition:color .3s ease,border-color .3s ease,background-color .3s ease}
.workFilter__chip:hover{color:#fff;border-color:rgb(255 255 255/.5)}
.workFilter__chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#000}
.workFilter__count{align-self:center;margin-left:auto;color:rgb(255 255 255/.4);
  font-family:var(--mono,ui-monospace,monospace);font-size:1.3rem;letter-spacing:.12em;
  text-transform:uppercase}
.workCard.is-filtered{display:none}

@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .workFilter{padding:0 1.5rem;gap:.8rem;margin-bottom:1rem}
  .workFilter__chip{padding:.8rem 1.4rem;font-size:1.1rem}
  .workFilter__count{width:100%;margin:.6rem 0 0}
}

/* ── from journal.php ──────────────────────────────────────────── */
/* ── the journal ───────────────────────────────────────────────── */
.journal{padding:0 5rem 14rem;position:relative;z-index:1}
.journal__list{display:grid;gap:0;max-width:140rem;margin-top:10rem;
  border-top:1px solid var(--hair)}
.journal__item{display:grid;grid-template-columns:28rem 1fr auto;gap:4rem;align-items:start;
  padding:5rem 0;border-bottom:1px solid var(--hair);position:relative}
.journal__item:hover .journal__title{color:var(--gold)}
.journal__cover{aspect-ratio:4/3;overflow:hidden;background:#111}
.journal__cover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.23,1,.32,1)}
.journal__item:hover .journal__cover img{transform:scale(1.04)}
.journal__title{font-family:var(--swear);font-weight:500;font-size:4rem;line-height:1.05;
  margin:0 0 1.8rem;transition:color .4s ease}
.journal__stand{margin:0 0 2.2rem;font-family:var(--book);font-size:1.8rem;line-height:1.6;
  letter-spacing:.03em;color:rgb(255 255 255/.72);max-width:72rem}
.journal__tags{display:flex;flex-wrap:wrap;gap:.8rem}
.journal__tag{border:1px solid rgb(255 255 255/.2);border-radius:4rem;padding:.5rem 1.4rem;
  font-family:var(--mono,ui-monospace,monospace);font-size:1.1rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgb(255 255 255/.55)}
.journal__meta{text-align:right;white-space:nowrap;color:rgb(255 255 255/.45)}
.journal__link{position:absolute;inset:0;z-index:2}
.journal__empty{margin-top:10rem;max-width:70rem;font-family:var(--book);font-size:2.4rem;
  line-height:1.5;color:rgb(255 255 255/.7)}

@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .journal{padding:0 1.5rem 8rem}
  .journal__list{margin-top:5rem}
  .journal__item{grid-template-columns:1fr;gap:2rem;padding:3.5rem 0}
  .journal__title{font-size:2.6rem}
  .journal__stand{font-size:1.6rem}
  .journal__meta{text-align:left}
}

/* ── from contact.php ──────────────────────────────────────────── */
/* ══ CONTACT PAGE ══════════════════════════════════════════════
   The cream band the culture and services sections already use, so the
   page reads as part of the same site rather than a bolt-on form.    */

.contact{background:var(--cream-warm);color:var(--black);
  padding:12rem 5.8rem 14rem 5.2rem;position:relative}
.contact__inner{display:grid;grid-template-columns:1fr 34rem;gap:0 9rem;
  align-items:start;max-width:160rem}
.contact__intro{grid-column:1 / -1;margin-bottom:9rem;max-width:96rem}
.contact__lead{font-family:var(--swear);font-weight:500;
  font-size:min(5rem,5.2vw);line-height:125.1%;letter-spacing:.15rem;margin:0 0 3rem}
.contact__note{font-size:1.8rem;line-height:3rem;letter-spacing:.05rem;
  margin:0;max-width:66rem;opacity:.75}

/* ── form ───────────────────────────────────────────────────── */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem 5rem}
.field{display:flex;flex-direction:column;position:relative}
.field--full{margin-top:4rem}
.field__label{display:block;color:rgb(0 0 0/.55);margin-bottom:1.4rem;padding:0}
.field__input{
  width:100%;border:0;border-bottom:1px solid rgb(0 0 0/.25);background:none;
  color:var(--black);font-family:var(--book);font-size:1.8rem;line-height:1.5;
  padding:1.2rem 0;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field__input:hover{border-bottom-color:rgb(0 0 0/.5)}
.field__input:focus{outline:none;border-bottom-color:var(--black)}
.field__textarea{resize:vertical;min-height:14rem;font-family:var(--book)}
.field__selectWrap{position:relative;display:block}
.field__selectWrap::after{content:"";position:absolute;right:.4rem;top:50%;
  width:.8rem;height:.8rem;border-right:1px solid rgb(0 0 0/.5);
  border-bottom:1px solid rgb(0 0 0/.5);transform:translateY(-70%) rotate(45deg);
  pointer-events:none}
.field__select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:3rem}
.field.is-invalid .field__input{border-bottom-color:#c0392b}
.field__error{display:block;min-height:1.8rem;margin-top:.8rem;
  font-family:var(--mon);font-size:1.1rem;letter-spacing:.06em;color:#c0392b}

/* ── discipline chips: the pill language from the services bubbles ── */
.contact__chips{border:0;padding:0;margin:4rem 0 0}
.contact__chips legend{margin-bottom:1.8rem}
.contact__chipRow{display:flex;flex-wrap:wrap;gap:1.2rem}
.chip{position:relative;cursor:pointer;display:inline-block}
/* the box is invisible but keeps its full hit area, so it stays clickable
   and focusable rather than being collapsed out of the page */
.chip input{position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer}
.chip span{
  display:inline-block;font-family:var(--mon);font-size:1.3rem;line-height:1;
  letter-spacing:.08em;padding:1.4rem 2.2rem;border-radius:10rem;
  border:1px solid rgb(0 0 0/.25);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.chip:hover span{border-color:var(--black)}
.chip input:checked+span{background:var(--black);border-color:var(--black);color:var(--cream-warm)}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}

.contact__submit{display:flex;align-items:center;gap:3rem;margin-top:6rem;flex-wrap:wrap}
.contact__submit .button .button__label{color:var(--cream-warm)}
.contact__submit .button::before,.contact__submit .button::after{background-color:var(--black)}
.contact__status{margin:0;font-family:var(--mon);font-size:1.3rem;letter-spacing:.06em}
.contact__status.is-ok{color:#1e7a46}
.contact__status.is-bad{color:#c0392b}

/* ── aside ──────────────────────────────────────────────────── */
.contact__aside{display:flex;flex-direction:column;gap:5rem;
  border-left:1px solid rgb(0 0 0/.15);padding-left:5rem}
.contact__block .smallUpper{display:block;color:rgb(0 0 0/.55);margin-bottom:1.8rem}
.contact__block .textBlock{margin:0 0 1.6rem;font-size:1.6rem;line-height:2.6rem}
.contact__block .textLink{font-family:var(--swear);font-size:2.4rem;line-height:1.2;
  display:inline-block;margin-top:.6rem}
.contact .underHover{border-bottom:1px solid rgb(0 0 0/.3)}
.contact .underHover:hover{border-color:var(--black)}

@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .contact{padding:7rem 1.5rem 9rem}
  .contact__inner{grid-template-columns:1fr;gap:0}
  .contact__intro{margin-bottom:5rem}
  .contact__lead{font-size:min(3rem,8vw);line-height:125.1%;letter-spacing:.09rem;margin-bottom:2rem}
  .contact__note{font-size:1.6rem;line-height:2.5rem}
  .contact__grid{grid-template-columns:1fr;gap:3rem}
  .field--full{margin-top:3rem}
  .field__input{font-size:1.6rem}
  .contact__chips{margin-top:3rem}
  .chip span{font-size:1.2rem;padding:1.2rem 1.8rem}
  .contact__submit{margin-top:4rem;gap:2rem}
  .contact__aside{border-left:0;border-top:1px solid rgb(0 0 0/.15);
    padding-left:0;padding-top:5rem;margin-top:7rem;gap:4rem}
}

/* ── the three-column drifting grid, from work.php ─────────────── */
   The card itself (.workCard, .cardType, tags) is already defined by the
   shell, because the home grid uses the same component. Only the page's
   own three-column layout lives here.

   Columns drift vertically against the page scroll at their own rates —
   the same shear as the home grid — but the page scrolls normally, which
   is the one place this deliberately departs from the reference.      */

.workGrid--infinite{position:relative;padding:6rem 3rem 14rem 9.8rem;overflow:hidden}
.workGrid--infinite .workGrid__inner{display:flex;gap:5.2rem;align-items:flex-start;
  justify-content:space-between}
/* columns cap at their design width but shrink rather than clip, so the
   same three-up layout survives every width down to the phone break */
.workGrid--infinite .workGrid__col{flex:1 1 0;min-width:0;max-width:52rem;
  will-change:transform}
.workGrid--infinite .workGrid__col:nth-child(2){padding-top:11rem}
.workGrid--infinite .workGrid__col:nth-child(3){padding-top:5rem}
.workGrid--infinite .workCard{width:100%;margin:0 0 14rem}

/* a real image, once one is uploaded, sits over the plate */
.workCard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.workCard__img[src^="data:image/gif"]{display:none}

@media screen and (orientation:portrait) and (max-width:800px),
       screen and (orientation:landscape) and (max-width:1200px) and (max-height:600px){
  .workGrid--infinite{padding:4rem 1.5rem 6rem}
  .workGrid--infinite .workGrid__inner{display:block}
  .workGrid--infinite .workGrid__col{width:100%;flex:none;max-width:none;padding-top:0!important}
  .workGrid--infinite .workCard{margin-bottom:6rem;transform:none!important}
  .workCard__imageWrap{height:auto;aspect-ratio:52/74;border-radius:.5rem}
  .workCard__content{margin-top:1rem;padding:0 .8rem}
  .workCard__title{font-size:1.6rem;line-height:1.5}
  .cardType{font-size:.7rem;margin:.5rem;padding:.5rem .7rem;border-radius:.3rem}
}