/* =====================================================================
   MAUI DIGITAL IMAGING
   Built to the Website Content & Design Guide (August 2026).

   The film-strip logo and its black/yellow identity are 19 years old and
   stay exactly as they are. Everything around them is the modernization:
   an editorial serif, a clean UI sans, big photography, and a yellow that
   is only ever used where it earns attention.

   1  Tokens              7  Buttons            13  Process & timeline
   2  Reset & base        8  Masthead & nav     14  Portfolio & figures
   3  Layout              9  Mobile actions     15  Tables
   4  Typography         10  Hero               16  Forms
   5  Rules & eyebrows   11  Cards & grids      17  CTA bands & footer
   6  Media              12  Icons & specs      18  Motion, print, a11y

   There are two dark grounds, .section--dark and .section--charcoal.
   Component overrides target both through :is(), so a section painted
   either way gets the right text, icon and border colors automatically.
   ===================================================================== */


/* ---------- 1. Tokens ------------------------------------------------ */
:root {
  /* Interface palette, straight from the guide */
  --black:        #0B0B0B;
  --charcoal:     #292929;
  --charcoal-2:   #1A1A1A;   /* between black and charcoal, for panels */
  --yellow:       #F2D32E;   /* MDI Yellow. Primary action, dark grounds only */
  --yellow-deep:  #D9B914;   /* pressed / hover state of the above */
  --warm-white:   #F7F6F2;
  --soft-gray:    #D9D7D0;

  /* Derived working colors the five brand values do not cover */
  --amber:        #E0A11B;   /* decorative icon strokes on light grounds */
  --gold-ink:     #8A6A00;   /* AA on warm white, for links and small text */
  --ink:          #1F1F1F;
  --ink-soft:     #55534E;
  --ink-faint:    #7C7A73;
  --line:         #E3E1DA;

  /* Yellow is unreadable as text on light grounds (1.4:1), so it never
     appears there. On light, --gold-ink carries the accent instead. */

  /* Type */
  --display: "Libre Baskerville", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --script:  "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Fluid scale */
  --fs-xs:    0.75rem;
  --fs-sm:    0.845rem;
  --fs-base:  clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --fs-lead:  clamp(1.09rem, 1.02rem + 0.34vw, 1.3rem);
  --fs-h4:    clamp(1.06rem, 1.01rem + 0.26vw, 1.24rem);
  --fs-h3:    clamp(1.28rem, 1.15rem + 0.62vw, 1.72rem);
  --fs-h2:    clamp(1.7rem, 1.4rem + 1.42vw, 2.75rem);
  /* Libre Baskerville sets much wider than a sans at the same size, so the
     display end of the scale is deliberately more restrained than it would
     be for Inter. */
  --fs-h1:    clamp(2rem, 1.55rem + 2.05vw, 3.3rem);
  --fs-hero:  clamp(2.2rem, 1.65rem + 2.5vw, 3.7rem);

  /* Rhythm */
  --gutter:      clamp(1.15rem, 0.7rem + 2.1vw, 2.5rem);
  --section:     clamp(3.5rem, 2.2rem + 5.6vw, 7rem);
  --maxw:        1240px;
  --maxw-narrow: 780px;
  --maxw-wide:   1480px;

  --radius:    6px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, .06), 0 3px 10px rgba(11, 11, 11, .05);
  --shadow-md: 0 2px 6px rgba(11, 11, 11, .07), 0 14px 34px rgba(11, 11, 11, .1);
  --shadow-lg: 0 4px 14px rgba(11, 11, 11, .1), 0 32px 74px rgba(11, 11, 11, .2);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Height the fixed masthead occupies. Heroes slide up beneath it. */
  --head-h: 5.25rem;
}

@media (max-width: 1040px) { :root { --head-h: 4.5rem; } }


/* ---------- 2. Reset & base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Locked while the mobile nav drawer is open. */
body.is-locked { overflow: hidden; }

::selection { background: var(--yellow); color: var(--black); }


/* ---------- 3. Layout ------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide   { max-width: var(--maxw-wide); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }
.section--flush-top { padding-top: 0; }

/* Ground tones. Alternating these is what gives the page its rhythm. */
.section--white    { background: #fff; }
.section--gray     { background: #F0EEE8; }
.section--dark     { background: var(--black); }
.section--charcoal { background: var(--charcoal-2); }

:is(.section--dark, .section--charcoal) { color: rgba(255, 255, 255, .82); }
:is(.section--dark, .section--charcoal) :is(h1, h2, h3, h4) { color: #fff; }

/* Two-column split. Media and body swap order at the breakpoint. */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right .split__media { order: 2; }
  .split--wide-body { grid-template-columns: 1fr 1.18fr; }
  .split--wide-media { grid-template-columns: 1.18fr 1fr; }
}

.center { text-align: center; }
.measure { max-width: 66ch; }
.center .measure { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }


/* ---------- 4. Typography -------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.16;
  margin: 0 0 .6em;
  color: var(--black);
  letter-spacing: -.012em;
}
h1 { font-size: var(--fs-h1); line-height: 1.09; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.24; }
h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; }

/* Spec and UI headings read as interface, not as editorial. */
.h-ui {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}
:is(.section--dark, .section--charcoal, .hero, .cta) .lede { color: rgba(255, 255, 255, .8); }

.small { font-size: var(--fs-sm); }
.muted { color: var(--ink-faint); }
:is(.section--dark, .section--charcoal, .hero, .cta) .muted { color: rgba(255, 255, 255, .6); }

a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--black); }

/* Links on a dark ground turn yellow -- but buttons are excluded. A bare
   descendant `a` selector outweighs `.btn`, which would repaint a yellow
   button's own label yellow and make it vanish. */
:is(.section--dark, .section--charcoal) a:not(.btn) { color: var(--yellow); }
:is(.section--dark, .section--charcoal) a:not(.btn):hover { color: #fff; }

strong, b { font-weight: 700; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li + li { margin-top: .4em; }
ul.plain { list-style: none; padding: 0; }

blockquote { margin: 0; }

/* The handwritten accent. Used sparingly: an eyebrow, or a signature line
   under a section. Never for anything a visitor has to read carefully. */
.script {
  font-family: var(--script);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: .005em;
  color: var(--gold-ink);
}
:is(.section--dark, .section--charcoal) .script, .hero .script { color: var(--yellow); }


/* ---------- 5. Rules & eyebrows -------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .85rem;
}
:is(.section--dark, .section--charcoal) .eyebrow, .hero .eyebrow { color: var(--yellow); }

/* Short yellow underscore that sits below a heading, as in the comps. */
.rule {
  width: 3.5rem;
  height: 3px;
  background: var(--amber);
  border: 0;
  margin: 0 0 1.6rem;
  border-radius: 2px;
}
.center .rule, .rule--center { margin-inline: auto; }
:is(.section--dark, .section--charcoal) .rule { background: var(--yellow); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
:is(.section--dark, .section--charcoal) .divider { background: rgba(255, 255, 255, .13); }


/* ---------- 6. Media -------------------------------------------------- */
img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

figure { margin: 0; }

figcaption {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: .7rem;
}
:is(.section--dark, .section--charcoal) figcaption { color: rgba(255, 255, 255, .58); }

/* Photography sits in a soft frame rather than bleeding to a hard edge. */
.framed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--soft-gray);
}
.framed img { width: 100%; }

.framed--tall  { aspect-ratio: 4 / 5; }
.framed--wide  { aspect-ratio: 16 / 9; }
.framed--card  { aspect-ratio: 4 / 3; }
.framed--step  { aspect-ratio: 3 / 2; }
/* Same circularity as .card__media above: the picture must come out of flow. */
:is(.framed--tall, .framed--wide, .framed--card, .framed--step) :is(picture, img) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------- 7. Buttons ------------------------------------------------ */
.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--black);
  --btn-bd: var(--yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .82em 1.6em;
  min-height: 2.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover {
  background: var(--yellow-deep);
  border-color: var(--yellow-deep);
  color: var(--black);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

/* Secondary: outlined. Inherits its color from the ground it sits on. */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--black);
  --btn-bd: var(--black);
}
.btn--outline:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}
:is(.section--dark, .section--charcoal, .hero, .cta) .btn--outline {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .5);
}
:is(.section--dark, .section--charcoal, .hero, .cta) .btn--outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--black);
}

/* Utility: call, directions, email. Quieter than either of the above. */
.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--soft-gray);
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
}
.btn--quiet:hover {
  background: var(--warm-white);
  border-color: var(--ink);
  color: var(--black);
}

.btn--sm { padding: .6em 1.15em; min-height: 2.4rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1em 2em; min-height: 3.3rem; font-size: var(--fs-base); letter-spacing: .06em; }
.btn--block { width: 100%; }

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.btn-row--center { justify-content: center; }

/* Inline text link with a small arrow, for "Learn more". */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-ink);
}
.link-more svg { width: .95em; height: .95em; transition: transform .2s var(--ease); }
.link-more:hover svg { transform: translateX(3px); }
:is(.section--dark, .section--charcoal) .link-more { color: var(--yellow); }


/* ---------- 8. Masthead & nav ---------------------------------------- */
.skip-link {
  position: absolute;
  left: .75rem;
  top: -4rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: .75rem; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--head-h);
}

.brand { margin-right: auto; flex: none; text-decoration: none; }
.brand img { width: clamp(200px, 21vw, 292px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.5vw, 1.9rem); }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.5vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .45rem 0;
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"],
.nav__link.is-active { color: var(--yellow); }
.nav__link[aria-current="page"]::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* Nav items that are <button> elements. Set font properties individually:
   the `font` shorthand would reset font-size to the inherited value and
   undo .nav__link, and `color: inherit` would pull in the body ink. */
.nav__toggle-sub {
  background: none;
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  text-align: left;
}

.nav__caret { width: .6em; height: .6em; transition: transform .2s var(--ease); }

/* Submenus. Open on hover with a pointer, on click with a keyboard or touch. */
.nav__item--has-menu { position: relative; }

.nav__menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 16.5rem;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--charcoal-2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__menu a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__menu a:hover, .nav__menu a:focus-visible {
  background: rgba(242, 211, 46, .14);
  color: var(--yellow);
}
.nav__menu li + li { margin-top: 1px; }

@media (min-width: 1041px) {
  .nav__item--has-menu:hover .nav__menu,
  .nav__item--has-menu:focus-within .nav__menu,
  .nav__toggle-sub[aria-expanded="true"] + .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__item--has-menu:hover .nav__caret,
  .nav__toggle-sub[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
}

/* Header upload button: the guide's single highlighted action. */
.nav__cta { flex: none; }

.navtoggle {
  display: none;
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: .6rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
}
.navtoggle svg { width: 100%; height: 100%; }
.navtoggle__close { display: none; }
.navtoggle[aria-expanded="true"] .navtoggle__open { display: none; }
.navtoggle[aria-expanded="true"] .navtoggle__close { display: block; }

@media (max-width: 1040px) {
  .navtoggle { display: block; }

  .nav {
    position: fixed;
    inset: var(--head-h) 0 0 auto;
    width: min(24rem, 100%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem var(--gutter) 6rem;
    background: var(--black);
    border-left: 1px solid rgba(255, 255, 255, .1);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid rgba(255, 255, 255, .09); }

  .nav__link { padding: .95rem 0; font-size: .95rem; justify-content: space-between; }
  .nav__link::after { display: none; }
  .nav__toggle-sub { width: 100%; }

  .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 .6rem;
    padding: .25rem 0 .25rem .9rem;
    background: transparent;
    border: 0;
    border-left: 2px solid rgba(242, 211, 46, .35);
    box-shadow: none;
    display: none;
  }
  .nav__toggle-sub[aria-expanded="true"] + .nav__menu { display: block; }
  .nav__toggle-sub[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
  .nav__menu a { padding: .55rem 0; }

  .nav__cta { margin-top: 1.4rem; }
  .nav__cta .btn { width: 100%; }
}


/* ---------- 9. Mobile sticky actions --------------------------------- */
/* Call, Upload and Directions stay one tap away on phones, as the guide
   asks. Hidden entirely on wider screens. */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;
  background: var(--black);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.actionbar__list li { margin: 0; }
.actionbar__list li + li { border-left: 1px solid rgba(255, 255, 255, .12); }

.actionbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  padding: .62rem .3rem .7rem;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.actionbar a svg { width: 1.32rem; height: 1.32rem; color: var(--yellow); }
.actionbar a:active { background: rgba(242, 211, 46, .16); }

@media (max-width: 860px) {
  .actionbar { display: block; }
  body { padding-bottom: 4.4rem; }
}


/* ---------- 10. Hero -------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 76vh, 46rem);
  margin-top: calc(var(--head-h) * -1);
  padding-top: var(--head-h);
  background: var(--black);
  color: #fff;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Two gradients: one horizontal so the copy column always has a dark
   ground, one vertical so the masthead never floats on a bright sky. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(11, 11, 11, .96) 0%, rgba(11, 11, 11, .88) 32%,
                    rgba(11, 11, 11, .55) 58%, rgba(11, 11, 11, .28) 100%),
    linear-gradient(to bottom, rgba(11, 11, 11, .72) 0%, rgba(11, 11, 11, 0) 32%);
}
@media (max-width: 760px) {
  .hero__media::after {
    background: linear-gradient(to bottom, rgba(11, 11, 11, .84) 0%,
                rgba(11, 11, 11, .76) 45%, rgba(11, 11, 11, .9) 100%);
  }
}

.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero__inner { max-width: 44rem; padding-block: clamp(3.5rem, 8vw, 6rem); }

.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  margin-bottom: .5rem;
  text-wrap: balance;
}
.hero__proof {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.92rem, .85rem + .35vw, 1.12rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.1rem;
}
.hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
  max-width: 34rem;
}

/* Address / hours strip under the hero buttons. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .78);
}
.hero__meta li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.hero__meta svg { width: 1.05rem; height: 1.05rem; color: var(--yellow); flex: none; }
/* These carry the artists' own phone numbers, emails and websites, so they
   have to look clickable. They used to be text-decoration:none, which read as
   plain text and hid the fact that anything could be followed. A faint
   underline is enough to mark them without turning the line into four bright
   links; the ground is always dark here, so the rule can assume white. */
.hero__meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .38);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.hero__meta a:hover,
.hero__meta a:focus-visible { color: #fff; text-decoration-color: currentColor; }

/* Compact hero for interior pages: same language, less height. */
.hero--page { min-height: clamp(20rem, 42vh, 27rem); }
.hero--page .hero__inner { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.hero--page h1 { font-size: var(--fs-h1); }

/* Material pages lead with a black band and a floating print, not a photo. */
.hero--material {
  min-height: auto;
  background: linear-gradient(140deg, #131313 0%, var(--black) 55%, #050505 100%);
}
.hero--material .hero__inner { max-width: none; padding-block: clamp(3rem, 6vw, 5rem); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .6);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.breadcrumb a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--yellow); }
.breadcrumb svg { width: .7rem; height: .7rem; opacity: .5; }


/* ---------- 11. Cards & grids ---------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1.25rem, .7rem + 1.9vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); }
.grid--6 { grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); }
.grid--tight { gap: 1rem; }

/* The three homepage service cards. Photo, then a short benefit, then a link. */
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--soft-gray);
}
/* The image is taken out of flow so it cannot feed its own intrinsic height
   back into the box: with the picture in flow, the box height depends on the
   image and the image height depends on the box, and browsers break that
   circularity by ignoring aspect-ratio, which leaves every card a different
   height and object-fit with nothing to crop against. */
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--soft-gray);
}
.card__media picture, .card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Artwork cards keep the card grid tidy without cropping the painting. */
.card__media--art { background: #fff; border-bottom: 1px solid var(--line); }
.card__media--art picture, .card__media--art img {
  inset: clamp(.6rem, .4rem + .5vw, 1rem);
  width: auto;
  height: auto;
  max-width: calc(100% - clamp(1.2rem, .8rem + 1vw, 2rem));
  max-height: calc(100% - clamp(1.2rem, .8rem + 1vw, 2rem));
  margin: auto;
  object-fit: contain;
}
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.5rem 1.7rem; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.62; }
.card__body .link-more { margin-top: auto; padding-top: 1.1rem; }

:is(.section--dark, .section--charcoal) .card {
  background: var(--charcoal-2);
  border-color: rgba(255, 255, 255, .1);
}
:is(.section--dark, .section--charcoal) .card__body p { color: rgba(255, 255, 255, .72); }

/* Whole card is clickable, without nesting interactive elements. */
.card--linked { position: relative; }
.card--linked .stretched::after { content: ""; position: absolute; inset: 0; }

/* Material cards on the Fine Art Printing hub: a swatch and a spec line. */
.matcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.matcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.matcard__swatch {
  aspect-ratio: 16 / 7;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.matcard__body { flex: 1; display: flex; flex-direction: column; padding: 1.35rem 1.4rem 1.5rem; }
.matcard__body h3 { font-size: var(--fs-h4); margin-bottom: .3rem; }
.matcard__kicker {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .7rem;
}
.matcard__body p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
.matcard__body .link-more { margin-top: auto; padding-top: 1rem; }

/* A plain bordered panel, for notes and asides. */
.panel {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.panel--accent { border-left: 4px solid var(--amber); }
.panel--dark {
  background: var(--charcoal-2);
  border-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .84);
}
.panel--dark :is(h2, h3, h4) { color: #fff; }

/* ---------- Artwork -------------------------------------------------- */
/* Artists' work is laid out at its own proportions: no fixed footprint, no
   mat, no letterbox, nothing added around it and nothing taken off it. Work
   arrives anywhere from 0.25 (Hamish's tall Maui Celtic Ocean) to 4.0 (his
   Dragon panorama) in ratio, so tiles in a row finish at wildly different
   heights, which is what a real gallery wall looks like. */
.art { display: block; line-height: 0; }
.art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
:is(.section--dark, .section--charcoal) .art img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
}

/* A tall portrait would otherwise tower over the hero column, so cap the
   height and let the width follow. The whole image is still shown. */
.art--hero img { max-height: 34rem; width: auto; margin-inline: auto; }
@media (max-width: 900px) {
  .art--hero img { max-height: 26rem; }
}

/* Tiles are the same width and whatever height their work happens to be.

   The cap is for the extreme verticals: Maui Celtic Ocean is 1:4, which at a
   full tile width would run to about 1700px and push everything beside it off
   the screen. Capping the height and letting the width follow keeps the whole
   image visible, just smaller, which is the one thing that must not change. */
.gallery--art { align-items: start; }
.art--tile img { max-height: 30rem; width: auto; margin-inline: auto; }
@media (max-width: 900px) {
  .art--tile img { max-height: 24rem; }
}

.art-figure figcaption {
  text-align: center;
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
:is(.section--dark, .section--charcoal) .art-figure figcaption { color: rgba(255, 255, 255, .72); }

/* Pull quote, as on the canvas comp. */
.quote {
  padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
  background: var(--black);
  border-radius: var(--radius-lg);
  color: #fff;
}
.quote__mark {
  display: block;
  font-family: var(--display);
  font-size: 3rem;
  line-height: .6;
  color: var(--yellow);
  margin-bottom: .6rem;
}
.quote p { font-family: var(--display); font-size: var(--fs-lead); line-height: 1.5; }
.quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--yellow);
}


/* ---------- 12. Icons & spec grids ----------------------------------- */
/* Every icon is drawn inline in the page's own <svg> sprite, so there is no
   icon font to download and each glyph inherits currentColor. */
.icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* Circular icon medallion, black disc with a yellow glyph. */
.medallion {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
}
.medallion svg { width: 1.7rem; height: 1.7rem; }
.medallion--outline { background: transparent; border: 2px solid var(--amber); color: var(--amber); }
:is(.section--dark, .section--charcoal, .cta) .medallion--outline {
  border-color: var(--yellow);
  color: var(--yellow);
}
.medallion--lg { width: 4.6rem; height: 4.6rem; }
.medallion--lg svg { width: 2.3rem; height: 2.3rem; }

/* The yellow icon row that sits under a material hero. */
.iconrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 45%), 1fr));
  gap: 1.5rem 1rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
.iconrow li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin: 0;
  text-align: center;
}
.iconrow svg { width: 2.15rem; height: 2.15rem; color: var(--yellow); }
.iconrow span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(255, 255, 255, .88);
}

/* Bordered specification tiles, as on every material comp. Five to a row on
   wide screens, which is how the comps lay out a ten-item spec set. */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1080px) {
  .specs { grid-template-columns: repeat(5, 1fr); }
}
.spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: 1.35rem 1rem 1.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.spec svg { width: 1.9rem; height: 1.9rem; color: var(--amber); }
.spec__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.35;
}
.spec__value { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.45; }

/* Benefit column: icon above a short heading and a sentence. */
.benefits {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin: 0;
  text-align: center;
}
.benefit svg { width: 2.1rem; height: 2.1rem; color: var(--amber); }
.benefit :is(h2, h3, h4) {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0;
}
.benefit p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
:is(.section--dark, .section--charcoal) .benefit svg { color: var(--yellow); }
:is(.section--dark, .section--charcoal) .benefit p { color: rgba(255, 255, 255, .74); }

/* Divided variant, matching the comps' vertical hairlines. */
.benefits--divided .benefit { padding-inline: 1.25rem; }
@media (min-width: 720px) {
  .benefits--divided .benefit + .benefit { border-left: 1px solid var(--line); }
  :is(.section--dark, .section--charcoal) .benefits--divided .benefit + .benefit {
    border-left-color: rgba(255, 255, 255, .14);
  }
}

/* Feature list: icon on the left, heading and copy on the right. */
.features { margin: 0; padding: 0; list-style: none; }
.features li {
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.features li:first-child { padding-top: 0; }
.features li:last-child { border-bottom: 0; padding-bottom: 0; }
.features svg { width: 1.85rem; height: 1.85rem; flex: none; color: var(--amber); margin-top: .1rem; }
.features :is(h3, h4) {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 .3rem;
}
.features p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
:is(.section--dark, .section--charcoal) .features li { border-bottom-color: rgba(255, 255, 255, .12); }
:is(.section--dark, .section--charcoal) .features svg { color: var(--yellow); }
:is(.section--dark, .section--charcoal) .features p { color: rgba(255, 255, 255, .74); }

/* Ticked list, as in the comps' "Why choose ..." columns. */
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 0;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.ticks li:last-child { border-bottom: 0; }
.ticks svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--amber); margin-top: .18rem; }
:is(.section--dark, .section--charcoal) .ticks li { border-bottom-color: rgba(255, 255, 255, .12); }
:is(.section--dark, .section--charcoal) .ticks svg { color: var(--yellow); }

@media (min-width: 760px) {
  .ticks--2 { columns: 2; column-gap: 3rem; }
  .ticks--2 li { break-inside: avoid; }
}


/* ---------- 13. Process & timeline ----------------------------------- */
/* Numbered production steps with a consistent 3:2 photo on each. */
.steps {
  display: grid;
  gap: clamp(1.25rem, .7rem + 1.6vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.step { margin: 0; }
.step__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft-gray);
  margin-bottom: .95rem;
}
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__n {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--amber);
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  vertical-align: -.32rem;
}
.step h3 {
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: .45rem;
}
.step p { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); }
:is(.section--dark, .section--charcoal) .step__n { background: var(--yellow); }
:is(.section--dark, .section--charcoal) .step p { color: rgba(255, 255, 255, .74); }

/* Compact numbered list without photography. */
.steplist { margin: 0; padding: 0; list-style: none; counter-reset: sl; }
.steplist li {
  display: flex;
  gap: .9rem;
  margin: 0;
  padding: .8rem 0;
  counter-increment: sl;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.steplist li::before {
  content: counter(sl);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--amber);
  color: var(--black);
  font-weight: 700;
  font-size: var(--fs-xs);
}
:is(.section--dark, .section--charcoal) .steplist li::before { background: var(--yellow); }

/* About-page history timeline. */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li {
  position: relative;
  display: grid;
  gap: .3rem 1.4rem;
  grid-template-columns: 3.4rem 1fr;
  margin: 0;
  padding: 0 0 2.25rem 0;
}
.timeline li:last-child { padding-bottom: 0; }
/* The connecting line runs behind the medallions. */
.timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.65rem;
  top: 3.6rem;
  bottom: .25rem;
  width: 2px;
  background: var(--line);
}
.timeline__mark { grid-row: span 2; }
.timeline__when {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-ink);
  padding-top: .55rem;
}
.timeline__body h3 { font-size: var(--fs-h4); margin-bottom: .35rem; }
.timeline__body p { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-soft); }

@media (min-width: 760px) {
  .timeline li { grid-template-columns: 3.4rem 9rem 1fr; }
  .timeline__when { grid-row: span 2; }
  .timeline__body { grid-column: 3; }
}


/* ---------- 14. Portfolio & figures ---------------------------------- */
.gallery {
  display: grid;
  gap: clamp(1rem, .6rem + 1.3vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.gallery figure { display: flex; flex-direction: column; }
.gallery .framed { flex: none; }

/* Two wider tiles at the top on large screens, so the grid is not a flat
   matrix of identical cells. */
@media (min-width: 900px) {
  .gallery--feature { grid-template-columns: repeat(6, 1fr); }
  .gallery--feature > * { grid-column: span 2; }
  .gallery--feature > :first-child { grid-column: span 3; }
  .gallery--feature > :nth-child(2) { grid-column: span 3; }
}

.caption-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: .35rem;
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
}
:is(.section--dark, .section--charcoal) .caption-meta { color: var(--yellow); }

/* Exploded-construction caption list. */
.layers { margin: 0; padding: 0; list-style: none; }
.layers li {
  display: flex;
  gap: .85rem;
  margin: 0;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.layers li:last-child { border-bottom: 0; }
.layers__dot {
  width: .65rem;
  height: .65rem;
  flex: none;
  margin-top: .55rem;
  border-radius: 50%;
  background: var(--amber);
}
.layers strong { display: block; }
.layers p { margin: .15rem 0 0; color: var(--ink-soft); line-height: 1.55; }
:is(.section--dark, .section--charcoal) .layers li { border-bottom-color: rgba(255, 255, 255, .12); }
:is(.section--dark, .section--charcoal) .layers p { color: rgba(255, 255, 255, .74); }


/* ---------- 15. Tables ------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  padding-bottom: .8rem;
}
th, td {
  padding: .72rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
thead th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
tbody tr:nth-child(even) { background: rgba(11, 11, 11, .022); }
td.num, th.num { text-align: right; }
tbody th { font-weight: 600; }


/* ---------- 16. Forms ------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }

.field { display: grid; gap: .4rem; }
.field--wide { grid-column: 1 / -1; }

.field label, .fieldset__legend {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.5; }
.req { color: #A8321E; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .78rem .9rem;
  background: #fff;
  border: 1px solid var(--soft-gray);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1.05rem;
  padding-right: 2.6rem;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(242, 211, 46, .45);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: #A8321E; }
.field .error { font-size: var(--fs-xs); color: #A8321E; font-weight: 600; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: .25rem; accent-color: var(--black); }
.field--check label {
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 720px) {
  .form--2col { grid-template-columns: 1fr 1fr; }
}

/* Honeypot. Positioned off-screen rather than display:none, which some bots
   know to skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  padding: .95rem 1.1rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form-note--ok { background: #EAF3E7; border: 1px solid #BBD6B2; color: #2A4620; }
.form-note--bad { background: #FBECE9; border: 1px solid #E8C0B7; color: #7A2415; }
[hidden] { display: none !important; }

/* The Hightail upload frame. */
.embed {
  position: relative;
  width: 100%;
  min-height: 46rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.embed iframe { width: 100%; height: 100%; min-height: 46rem; border: 0; }


/* ---------- 17. CTA bands & footer ----------------------------------- */
/* The contextual call to action that ends every page, so nobody has to go
   back to the homepage to start a project. */
.cta {
  background: var(--black);
  border-top: 3px solid var(--yellow);
  color: #fff;
}
.cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  padding-block: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}
.cta__icon { flex: none; }
.cta__body { flex: 1 1 22rem; }
.cta__body h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.05vw, 2.1rem);
  color: #fff;
  margin-bottom: .45rem;
}
.cta__body p { color: rgba(255, 255, 255, .76); font-size: var(--fs-sm); line-height: 1.6; }
.cta .btn-row { margin-top: 0; flex: none; }
@media (max-width: 640px) {
  .cta .btn-row { width: 100%; }
  .cta .btn { flex: 1 1 12rem; }
}

.footer { background: var(--black); color: rgba(255, 255, 255, .74); }

/* The four-column contact strip that closes every comp. */
.footer__contact {
  display: grid;
  gap: 1.6rem clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  padding-block: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer__block { display: flex; gap: .95rem; }
.footer__block svg { width: 1.7rem; height: 1.7rem; flex: none; color: var(--yellow); margin-top: .1rem; }
.footer__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: .3rem;
}
.footer__block p, .footer__block address {
  margin: 0;
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: 1.55;
}
.footer__block a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.footer__block a:hover { color: var(--yellow); text-decoration: underline; }

.footer__main {
  display: grid;
  gap: 2.25rem clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  padding-block: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__brand { grid-column: span 2; max-width: 26rem; } }
.footer__brand img { width: 15.5rem; margin-bottom: 1.1rem; }
.footer__brand p { font-size: var(--fs-sm); line-height: 1.65; color: rgba(255, 255, 255, .66); }

.footer h2 {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin: 0 0 .55rem; }
.footer__list a { color: rgba(255, 255, 255, .7); font-size: var(--fs-sm); text-decoration: none; }
.footer__list a:hover { color: var(--yellow); text-decoration: underline; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
}
.footer__legal p { margin: 0; }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-left: auto; }
.footer__legal a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.footer__legal a:hover { color: var(--yellow); text-decoration: underline; }


/* ---------- 18. Motion, print, accessibility ------------------------- */
/* Focus. Visible on every ground, never removed. */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 2px;
}
:is(.section--white, .section--gray, .form, .section:not([class*="--"])) :focus-visible {
  outline-color: var(--black);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Entrance animation. Applied by site.js only; without JS everything is
   simply visible, which is the correct fallback. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .masthead, .actionbar, .nav, .cta, .hero__media, .skip-link { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .hero { min-height: 0; margin-top: 0; padding-top: 0; background: #fff; color: #000; }
  .hero h1, .hero__sub { color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}