@charset "utf-8";
/* ==========================================================================
   7MARDENA — MACHINERY ILLUSTRATION
   Design world: "WARM SHEET".
   Warm-white ground, soft corners, one signal-yellow accent on buttons and
   banners, warm-charcoal bands for contrast. Roboto throughout — display,
   body copy and annotation labels all share the one family, set apart only
   by weight and size.
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- ground / ink ---------------------------------------------------- */
  --paper:      #FAF8F2;   /* warm white ground             */
  --paper-lift: #FFFFFF;   /* raised card / plate           */
  --paper-deep: #F2EDE3;   /* recessed / tint band          */
  --ink:        #33312E;   /* headings                      */
  --ink-2:      #474542;   /* body copy                     */
  --ash:        #6E6A64;   /* tertiary / annotation         */
  --ash-2:      #6F6A5F;   /* faintest annotation (AA on tint) */

  /* --- single accent: signal yellow ------------------------------------ */
  --accent:     #F9B700;   /* banner + button fill          */
  --accent-hi:  #FFCF4A;   /* hover lift                    */
  --accent-deep:#E6A900;   /* pressed                       */
  --accent-ink: #33312E;   /* text sitting ON the yellow    */
  --accent-txt: #8A6200;   /* yellow used AS text on paper  */
  --accent-dim: rgba(249,183,0,.16);

  /* --- semantic danger (form errors only, never brand) ------------------ */
  --danger:     #C0370A;
  --danger-dim: rgba(192,55,10,.09);

  /* --- inverted band --------------------------------------------------- */
  --void:       #3A3631;
  --void-2:     #45403A;
  --bone:       #FAF8F2;
  --bone-dim:   #C3BCB1;

  /* --- footer ------------------------------------------------------------ */
  --footer-bg:  #303030;

  /* --- rules ----------------------------------------------------------- */
  --hair:       rgba(71,69,66,.15);
  --hair-soft:  rgba(71,69,66,.07);
  --hair-bone:  rgba(250,248,242,.20);
  --hair-bone-s:rgba(250,248,242,.10);

  /* --- type ------------------------------------------------------------ */
  --display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* --- metrics --------------------------------------------------------- */
  --maxw:   1460px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --radius: 10px;
  --radius-sm: 6px;
  --ease:   cubic-bezier(.2,.8,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  font-weight:350;
  line-height:1.62;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
/* deter casual image saving: no drag-out, no long-press "save image" callout */
img{ -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; }
[hidden]{ display:none !important; }

::selection{ background:var(--ink); color:var(--paper); }

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.012em;
  text-transform:none;
  margin:0;
  text-wrap:balance;
}

.t-hero{
  font-size:clamp(2.1rem, 6vw, 5.2rem);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.016em;
}
.t-xl{ font-size:clamp(2rem, 5.4vw, 4.2rem); }
.t-lg{ font-size:clamp(1.6rem, 3.4vw, 2.7rem); }
.t-md{ font-size:clamp(1.2rem, 2vw, 1.55rem); font-stretch:106%; }
.t-sm{ font-size:1.02rem; font-stretch:104%; letter-spacing:-.005em; }

/* mono annotation — the voice of the drawing sheet */
.mono{
  font-family:var(--mono);
  font-size:.665rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:none;
  color:var(--ash);
  font-variant-numeric:tabular-nums;
}
.mono--ink{ color:var(--ink); }
.mono--hazard{ color:var(--accent-txt); }

.lede{
  font-size:clamp(1.06rem, 1.7vw, 1.32rem);
  line-height:1.55;
  font-weight:300;
  color:var(--ink-2);
  max-width:44ch;
  text-wrap:pretty;
}
p{ margin:0 0 1.05em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
.measure{ max-width:62ch; }
.measure-tight{ max-width:48ch; }

a{ color:inherit; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative; z-index:2;
}

section{ position:relative; z-index:2; }

.band{ padding-block:clamp(64px, 9vw, 132px); }
.band--tight{ padding-block:clamp(48px, 6vw, 82px); }
.band--rule{ border-top:1px solid var(--hair); }
.band--tint{ background:var(--paper-deep); }

/* inverted graphite band */
.band--void{
  background:var(--void);
  color:var(--bone);
}
.band--void h1,.band--void h2,.band--void h3,.band--void h4{ color:var(--bone); }
.band--void .lede{ color:var(--bone-dim); }
.band--void .mono{ color:var(--bone-dim); }
.band--void .mono--ink{ color:var(--bone); }

/* photographic band — same img+scrim pattern as .hero--photo, sized to the
   section's own content instead of a fixed hero height */
.band--photo{ position:relative; overflow:hidden; color:var(--bone); }
.band--photo .band__bg{ position:absolute; inset:0; z-index:0; }
.band--photo .band__bg-img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.band--photo .band__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,26,26,.60) 0%, rgba(26,26,26,.86) 100%);
}
.band--photo h1,.band--photo h2,.band--photo h3,.band--photo h4{ color:var(--paper-lift); }
.band--photo .lede{ color:var(--paper-lift); }
.band--photo .mono{ color:var(--paper-lift); }
.band--photo .mono--ink{ color:var(--paper-lift); }
.band--photo .shead{ border-bottom-color:var(--hair-bone); }
.band--photo .btn--ghost{ background:transparent; color:var(--bone); border-color:var(--hair-bone); }
.band--photo .btn--ghost:hover{ background:var(--bone); border-color:var(--bone); color:var(--void); }
.band--photo .ulist li{ border-bottom:0; color:var(--paper-lift); }
.band--photo .ulist li::before{ background:var(--paper-lift); }
.band--photo .tags li{ color:var(--paper-lift); border-color:var(--hair-bone); }

/* card goes transparent on a photo band — the scrim behind it already
   carries the contrast, so icon/heading/copy read light instead of the
   ordinary dark-on-paper styling */
.band--photo .card{ background:transparent; border-color:var(--hair-bone); color:var(--bone); }
.band--photo .card h3{ color:var(--bone); }
.band--photo .card p{ color:var(--bone-dim); }

/* muted photo band — same img+scrim structure as .band--photo: solid white
   text over a translucent black wash on the photo */
.band--tint-photo{ position:relative; overflow:hidden; color:#fff; }
.band--tint-photo .band__bg{ position:absolute; inset:0; z-index:0; }
.band--tint-photo .band__bg-img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.band--tint-photo .band__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.85);
}
.band--tint-photo h1,.band--tint-photo h2,.band--tint-photo h3,.band--tint-photo h4{ color:#fff; }
.band--tint-photo p{ color:#fff; }
.band--tint-photo .shead{ border-bottom-color:var(--hair-bone); }
.band--tint-photo .ulist li{ border-bottom-color:var(--hair-bone-s); color:#fff; }
.band--tint-photo .ulist li::before{ background:var(--accent-hi); }
.band--tint-photo .rates{ border-top-color:var(--hair-bone); }
.band--tint-photo .rate{ border-bottom-color:var(--hair-bone-s); }
.band--tint-photo .rate__fmt,
.band--tint-photo .rate__price{ color:#fff; }
.band--tint-photo .rate__desc{ color:#fff; }
.band--tint-photo .rate__price--quote,
.band--tint-photo .tlink{ color:var(--accent-hi); border-bottom-color:var(--hair-bone); }
.band--tint-photo .rate__price--quote:hover,
.band--tint-photo .tlink:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.band--tint-photo .specs{ border-top-color:var(--hair-bone); }
.band--tint-photo .specs li{ border-bottom-color:var(--hair-bone-s); }
.band--tint-photo .specs .k{
  color:#fff; font-family:var(--body); font-size:.93rem;
  font-weight:350; letter-spacing:normal; text-transform:none;
}
.band--tint-photo .specs .v{ color:#fff; font-size:.93rem; }
.band--tint-photo .plate__stage:not(.plate__stage--bleed){
  background-image:
    linear-gradient(to right, var(--hair-bone-s) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-bone-s) 1px, transparent 1px);
}

/* inert CTA slot — a label, not a link; no href, no hover, no pointer */
.btn--disabled{ pointer-events:none; opacity:.6; cursor:default; }

/* section head: mono index + rule + title */
.shead{
  display:block;
  padding-bottom:18px;
  margin-bottom:clamp(28px, 4vw, 52px);
  border-bottom:1px solid var(--hair);
}
.band--void .shead{ border-bottom-color:var(--hair-bone); }
.shead__meta{ margin-top:14px; }

/* generic grids */
.grid{ display:grid; gap:clamp(18px,2.4vw,30px); }
.g-2{ grid-template-columns:1fr; }
.g-3{ grid-template-columns:1fr; }
.g-4{ grid-template-columns:1fr 1fr; }
@media (min-width:760px){
  .g-2{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .g-4{ grid-template-columns:repeat(4,1fr); }
}

.split{ display:grid; gap:clamp(28px,4vw,72px); grid-template-columns:1fr; }
@media (min-width:960px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:start; }
  .split--sticky > :first-child{ position:sticky; top:104px; }
}

/* ==========================================================================
   NAV
   ========================================================================== */

.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hair);
}
@supports not (backdrop-filter: blur(4px)){ .nav{ background:var(--paper); } }

.nav__in{
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  height:62px;
  display:flex; align-items:center; gap:clamp(16px,3vw,42px);
}
@media (min-width:1080px){ .nav__in{ height:70px; } }

.brand{
  display:flex; align-items:center;
  text-decoration:none; flex:0 0 auto;
}
.brand__logo{ height:34px; width:auto; display:block; }
@media (min-width:1080px){ .brand__logo{ height:38px; } }

.nav__links{ display:none; }
@media (min-width:1080px){
  .nav__links{
    display:flex; align-items:center; gap:clamp(14px,1.8vw,26px);
    margin-left:auto;
  }
}
.nav__link{
  font-family:var(--body); font-size:.92rem; font-weight:400;
  letter-spacing:0; text-transform:none;
  text-decoration:none; color:var(--ink-2);
  padding:6px 0;
  position:relative;
  transition:color .18s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--accent-txt);
  transition:right .26s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ right:0; }
.nav__link[aria-current="page"]{ color:var(--ink); }
.nav__link[aria-current="page"]::after{ right:0; background:var(--ink); }

.nav__in .nav__cta{ display:none; }
@media (min-width:1080px){ .nav__in .nav__cta{ display:inline-flex; margin-left:8px; } }

.nav__burger{
  margin-left:auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none; border:1px solid var(--hair); border-radius:var(--radius);
  cursor:pointer; color:var(--ink);
  transition:background .18s var(--ease);
}
.nav__burger:hover{ background:var(--paper-lift); }
@media (min-width:1080px){ .nav__in .nav__burger{ display:none; } }
.nav__burger svg{ width:18px; height:18px; }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70;
  background:var(--void); color:var(--bone);
  display:flex; flex-direction:column;
  padding:18px var(--gutter) 34px;
  overflow-y:auto;
  transform:translateY(-100%);
  transition:transform .42s var(--ease-out);
}
.drawer[data-open="true"]{ transform:translateY(0); }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; height:44px; margin-bottom:26px; }
.drawer__close{
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:1px solid var(--hair-bone); color:var(--bone); cursor:pointer;
}
.drawer__close svg{ width:18px; height:18px; }
.drawer__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair-bone-s); }
.drawer__list li{ border-bottom:1px solid var(--hair-bone-s); }
.drawer__list a{
  display:flex; align-items:baseline; gap:12px;
  padding:16px 2px; min-height:52px;
  text-decoration:none; color:var(--bone);
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:1.5rem; text-transform:none; letter-spacing:-.01em;
}
.drawer__list a[aria-current="page"]{ color:var(--accent); }
.drawer__foot{ margin-top:26px; display:grid; gap:12px; }

body[data-lock="true"]{ overflow:hidden; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:50px; padding:0 26px;
  font-family:var(--body); font-size:.94rem; font-weight:500;
  letter-spacing:0; text-transform:none;
  text-decoration:none; cursor:pointer;
  border:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--accent); color:var(--accent-ink);
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg{ width:13px; height:13px; flex:0 0 auto; transition:transform .26s var(--ease); }
.btn:hover{ background:var(--accent-hi); border-color:var(--accent-hi); color:var(--accent-ink); }
.btn:active{ background:var(--accent-deep); border-color:var(--accent-deep); }
.btn:hover svg{ transform:translateX(4px); }

/* quiet alternate — hairline on the warm ground */
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hair); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* loudest CTA: same yellow, kept as an alias so existing markup still reads */
.btn--hazard{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn--hazard:hover{ background:var(--accent-hi); border-color:var(--accent-hi); color:var(--accent-ink); }

/* on the warm-charcoal bands the yellow carries even harder */
.band--void .btn{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.band--void .btn:hover{ background:var(--accent-hi); border-color:var(--accent-hi); color:var(--accent-ink); }
.band--void .btn--ghost{ background:transparent; color:var(--bone); border-color:var(--hair-bone); }
.band--void .btn--ghost:hover{ background:var(--bone); border-color:var(--bone); color:var(--void); }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* text link with drawn underline */
.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:none;
  text-decoration:none; color:var(--ink);
  padding-bottom:4px;
  border-bottom:1px solid var(--hair);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tlink svg{ width:12px; height:12px; transition:transform .26s var(--ease); }
.tlink:hover{ color:var(--accent-txt); border-bottom-color:var(--accent-txt); }
.tlink:hover svg{ transform:translateX(4px); }
.band--void .tlink{ color:var(--bone); border-bottom-color:var(--hair-bone); }
.band--void .tlink:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* focus — visible, on-style, never removed */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-txt);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
.band--void :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--accent);
}

/* ==========================================================================
   PLATE — the artwork frame. Registration corners + spec caption.
   Placeholder machine line art lives inside until real artwork replaces it.
   ========================================================================== */

.plate{
  position:relative;
  display:block;
  background:var(--paper-lift);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  text-decoration:none; color:inherit;
  overflow:hidden;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
a.plate{ cursor:pointer; }
a.plate:hover{ border-color:var(--ash-2); box-shadow:0 6px 22px rgba(71,69,66,.09); }

/* flush plate — no white background/border showing at the image edges;
   used where the slider already sits on a photographic section and any
   surrounding white would read as an unwanted outline */
.plate--flush{ background:transparent; border:0; }

.plate__stage{
  position:relative;
  aspect-ratio:4/3;
  display:grid; place-items:center;
  padding:clamp(18px, 3.2vw, 52px);
  /* drafting grid */
  background-image:
    linear-gradient(to right, var(--hair-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-soft) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:center;
}
.plate__stage--tall{ aspect-ratio:3/4; }
.plate__stage--portrait{ aspect-ratio:4/5; }
.plate__stage--wide{ aspect-ratio:16/10; }
.plate__stage--pano{ aspect-ratio:5/4; }
@media (min-width:700px){ .plate__stage--pano{ aspect-ratio:16/9; } }
@media (min-width:1100px){ .plate__stage--pano{ aspect-ratio:64/23; } }

.plate__art{
  width:100%; height:100%;
  color:var(--ink-2);
  transition:transform .5s var(--ease-out), color .3s var(--ease);
}
a.plate:hover .plate__art{ transform:scale(1.035); color:var(--ink); }

.plate__cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 15px;
  border-top:1px solid var(--hair);
}
.plate__name{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:.96rem; text-transform:none; letter-spacing:-.005em;
  line-height:1.15;
}
.plate__meta{
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:none; color:var(--ash);
  white-space:nowrap; flex:0 0 auto;
}
.plate__cap--center{ justify-content:center; text-align:center; }

/* overlay caption — the name sits inside the frame, bottom-left, lifted off
   a dark vignette rather than living in a separate info bar below the image */
.plate--overlay .plate__cap{
  position:absolute; left:0; right:0; bottom:0;
  border-top:0;
  padding:16px 18px;
}
.plate--overlay .plate__vignette{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(15,15,15,.82) 100%);
  pointer-events:none;
}
.plate--overlay .plate__name{ color:#fff; }

/* real artwork in a plate, replacing the placeholder line art ------------- */
/* the stage centres its children, so the picture has to opt back into
   stretching or its height:100% never resolves and the artwork's intrinsic
   height pushes the plate taller than its aspect-ratio box */
.plate__stage picture{
  display:block;
  width:100%; height:100%;
  align-self:stretch; justify-self:stretch;
  min-height:0; min-width:0;
}
.plate__img{
  display:block;
  width:100%; height:100%;
  object-fit:contain;                 /* artwork carrying its own transparent ground */
  transition:transform .5s var(--ease-out);
}
/* an <img> placed straight in the stage (no <picture> wrapper) needs the
   same stretch the wrapper otherwise gives it, or the grid's place-items:
   center leaves it sized to its own content instead of filling the frame */
.plate__stage > .plate__img{ align-self:stretch; justify-self:stretch; }
/* a photograph or a framed shot fills the frame rather than floating inside it */
.plate__stage--bleed{ padding:0; background-image:none; }
.plate__stage--bleed .plate__img{ object-fit:cover; }
a.plate:hover .plate__img{ transform:scale(1.035); }

.band--void .plate{ background:var(--void-2); border-color:var(--hair-bone); }
.band--void a.plate:hover{ border-color:var(--bone); background:#4D473F; }
.band--void .plate__stage{
  background-image:
    linear-gradient(to right, var(--hair-bone-s) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-bone-s) 1px, transparent 1px);
}
.band--void .plate__art{ color:var(--bone-dim); }
.band--void a.plate:hover .plate__art{ color:var(--bone); }
.band--void .plate__cap{ border-top-color:var(--hair-bone); }
.band--void .plate__name{ color:var(--bone); }
.band--void .plate__meta{ color:var(--bone-dim); }

/* ==========================================================================
   SAMPLE SLIDER — one-at-a-time plate with prev/next controls.
   assets/site.js drives the slide/caption swap via [data-slider].
   ========================================================================== */

.sample-slider{ margin-top:22px; }
.sample-slider__viewport{ position:relative; overflow:hidden; }
.sample-slider__track{
  display:flex;
  transition:transform .45s var(--ease-out);
}
.sample-slider__slide{ flex:0 0 100%; min-width:0; }

/* corner caption chip — sits inside the slide, top-left, instead of a
   caption bar below the image. Decorative only (pointer-events:none) so
   it never steals a click meant for the nav button underneath it. */
.sample-slider__cap{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:7px 13px;
  background:rgba(20,19,17,.7);
  border-radius:999px;
  pointer-events:none;
}
.sample-slider__cap .plate__name{ color:#fff; font-size:.8rem; }

/* thick, high-contrast circular nav — inset from the frame edge instead of
   a large invisible click zone, so it actually reads over a photo */
.sample-slider__nav{
  position:absolute; top:50%; margin-top:-22px;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:rgba(20,19,17,.55);
  border:2px solid #fff;
  border-radius:999px;
  color:#fff;
  cursor:pointer;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.sample-slider__nav svg{ width:20px; height:20px; stroke-width:3; }
.sample-slider__nav:hover{ background:rgba(20,19,17,.85); transform:scale(1.06); }
.sample-slider__nav--prev{ left:12px; }
.sample-slider__nav--next{ right:12px; }

/* ==========================================================================
   SERVICE / INFO CARD
   ========================================================================== */

.card{
  display:flex; flex-direction:column;
  padding:clamp(22px,2.6vw,32px);
  background:var(--paper-lift);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  position:relative;
}
.card--plain{ background:transparent; border:0; border-top:2px solid var(--ink); border-radius:0; padding-inline:0; }
.card__idx{
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.16em; color:var(--accent-txt); margin-bottom:16px;
}
.card h3{ margin-bottom:12px; }
.card p{ color:var(--ink-2); font-size:.97rem; }
.card__foot{ margin-top:auto; padding-top:22px; }

.band--void .card{ background:var(--void-2); border-color:var(--hair-bone); }
.band--void .card--plain{ background:transparent; border:0; border-top:2px solid var(--bone); border-radius:0; }
.band--void .card p{ color:var(--bone-dim); }

/* icon sizing — SVG only, consistent stroke */
.ico{ width:24px; height:24px; stroke-width:1.5; }

/* ==========================================================================
   LISTS
   ========================================================================== */

.ulist{ list-style:none; margin:0; padding:0; }
.ulist li{
  position:relative;
  padding:11px 0 11px 22px;
  border-bottom:1px solid var(--hair-soft);
  font-size:.97rem; color:var(--ink-2);
}
.ulist li::before{
  content:''; position:absolute; left:0; top:20px;
  width:9px; height:1px; background:var(--accent-txt);
}
.band--void .ulist li{ border-bottom-color:var(--hair-bone-s); color:var(--bone-dim); }

/* tag row */
.tags{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:0; padding:0; }
.tags li{
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  letter-spacing:.06em; text-transform:none; color:var(--ink-2);
  border:1px solid var(--hair); border-radius:var(--radius-sm); padding:9px 15px;
}
.band--void .tags li{ color:var(--bone-dim); border-color:var(--hair-bone); }

/* numbered process steps */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:0; }
.steps li{
  counter-increment:s;
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  align-items:start;
  padding:20px 0;
  border-top:1px solid var(--hair);
}
.steps li:last-child{ border-bottom:1px solid var(--hair); }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; color:var(--accent-txt); padding-top:4px;
}
.steps h4{ font-size:1.05rem; font-stretch:106%; margin-bottom:5px; }
.steps p{ font-size:.94rem; color:var(--ash); margin:0; }
.band--void .steps li{ border-color:var(--hair-bone); }
.band--void .steps p{ color:var(--bone-dim); }

/* ==========================================================================
   PRICE TABLE — mono, tabular, dotted leaders. Readable at 360px.
   ========================================================================== */

.rates{ border-top:2px solid var(--ink); }
.rates .rate:last-child{ border-bottom:0; }
.rate{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:6px 16px;
  align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--hair);
}
.rate__fmt{
  grid-column:1; grid-row:1;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:1.3rem; text-transform:none; line-height:1;
  min-width:2.7em;
}
.rate__desc{
  grid-column:1 / -1; grid-row:2;
  font-size:.93rem; color:var(--ash); line-height:1.5;
  max-width:52ch;
}
.rate__lead{ display:none; }
.rate__price{
  grid-column:3; grid-row:1;
  justify-self:end;
  font-family:var(--mono); font-size:1.06rem; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  white-space:nowrap;
}
.rate__price--quote{ font-size:.7rem; letter-spacing:.14em; text-transform:none; color:var(--accent-txt); }

@media (min-width:720px){
  .rate{ grid-template-columns:auto 1fr auto; gap:0 22px; }
  .rate__desc{
    grid-column:2; grid-row:1;
    max-width:46ch; padding-right:20px;
  }
  .rate__fmt{ font-size:1.5rem; }

  /* rate tables where labels differ a lot in length ("Core"/"Detailed",
     "A5"/"Signature") — give the label column a shared min-width so every
     row's description lines up instead of drifting with the label width */
  .rates--vector .rate__fmt,
  .rates--pencil .rate__fmt{ min-width:5.2em; }
}

.note{
  margin-top:24px; padding:20px 22px;
  background:var(--paper-lift);
  border:1px solid var(--hair);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
}
.note h4{ font-size:.95rem; font-stretch:106%; margin-bottom:9px; }
.note p{ font-size:.92rem; color:var(--ink-2); margin-bottom:.7em; }
.band--void .note{ background:var(--void-2); border-color:var(--hair-bone); border-left-color:var(--accent); }
.band--void .note p{ color:var(--bone-dim); }

/* spec pair rows (lead times etc.) */
.specs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.specs li{
  display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--hair-soft);
}
.specs dt,.specs .k{
  font-family:var(--mono); font-size:.63rem; font-weight:500;
  letter-spacing:.15em; text-transform:none; color:var(--ash);
}
.specs .v{ font-size:.94rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.specs .v--right{ text-align:right; }
.band--void .specs li{ border-bottom-color:var(--hair-bone-s); }
.band--void .specs .v{ color:var(--bone); }

/* ==========================================================================
   AUDIENCE ROWS — a definition list, not a card grid.
   These items are answers to one question ("who?"), and they do not all carry
   the same weight, so rows beat equal-sized cards: they scale past four without
   a ragged last row, and they keep each term beside its own answer.
   ========================================================================== */

.who-group + .who-group{ margin-top:clamp(36px,5vw,60px); }

.who-group h3{ font-size:clamp(1.15rem,2vw,1.5rem); font-stretch:106%; }
.who-group__note{ margin-top:10px; }

.deflist{ margin:0; }
/* rules sit ABOVE each row, so two stacked groups never leave a phantom
   empty row between group 1's closing rule and group 2's opening one */
.deflist > div{
  display:grid;
  grid-template-columns:1fr;
  gap:6px 30px;
  padding:17px 0;
  border-top:1px solid var(--hair);
}
.who-group:last-child .deflist > div:last-child{ border-bottom:1px solid var(--hair); }
@media (min-width:680px){
  .deflist > div{
    grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
    gap:0 30px;
    align-items:start;
  }
}
.deflist dt{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:1.02rem; line-height:1.2;
  text-transform:none; letter-spacing:-.004em;
  color:var(--ink);
}
.deflist dd{
  margin:0;
  font-size:.95rem; line-height:1.55; color:var(--ink-2);
}
.deflist__more{ display:block; margin-top:13px; }

.band--void .deflist > div{ border-color:var(--hair-bone); }
.band--void .deflist dt{ color:var(--bone); }
.band--void .deflist dd{ color:var(--bone-dim); }

/* ==========================================================================
   CLIENT LOGO MARQUEE
   Auto-scrolling content, so it carries the obligations that come with that:
   a real pause control (WCAG 2.2.2), pause on hover and on keyboard focus, and
   a fully static wrapped layout when the visitor asks for reduced motion.
   The strip is decorative repetition — each logo's company name lives in its
   alt text, and the second track is hidden from assistive tech.
   ========================================================================== */

.logos{ --logo-gap:clamp(16px,2.4vw,32px); position:relative; }

.logos__viewport{
  overflow:hidden;
  /* fade the ends so logos enter and leave instead of being guillotined */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

/* manual nudge layer — arrow clicks offset this; the tracks inside keep
   running their own independent keyframe animation underneath it */
.logos__rail{
  display:flex;
  gap:var(--logo-gap);
  transition:transform .4s var(--ease-out);
}

/* edge arrows, overlaid on the fade zones like the sample slider's nav */
.logos__nav{
  position:absolute; top:0; bottom:0;
  width:44px; z-index:2;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--ink);
  transition:color .18s var(--ease);
}
.logos__nav svg{ width:15px; height:15px; }
.logos__nav:hover{ color:var(--accent-txt); }
.logos__nav--prev{ left:-8px; }
.logos__nav--next{ right:-8px; }

/* when arrows are present, give them clean space instead of overlaying
   the logo strip — the scroll area narrows to make room on each side */
.logos[data-arrows] .logos__viewport{ margin:0 44px; }
.logos[data-arrows] .logos__nav--prev{ left:0; }
.logos[data-arrows] .logos__nav--next{ right:0; }
.logos__nav--prev svg{ transform:scaleX(-1); }
.band--void .logos__nav{ color:var(--bone); }
.band--void .logos__nav:hover{ color:var(--accent); }

/* arrow reaches the end of the strip — no more content that direction */
.logos__nav:disabled{ opacity:.3; cursor:default; pointer-events:none; }

.logos__track{
  display:flex; align-items:center;
  gap:var(--logo-gap);
  flex:0 0 auto;
  list-style:none; margin:0; padding:0;
  animation:logo-marquee var(--logo-dur,46s) linear infinite;
}
/* the -100% - gap offset is what makes the hand-off between the two
   identical tracks seamless rather than jumping by one gap each cycle */
@keyframes logo-marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-100% - var(--logo-gap))); }
}

.logos:hover .logos__track,
.logos:focus-within .logos__track,
.logos[data-paused="true"] .logos__track{ animation-play-state:paused; }

.logos__track li{ flex:0 0 auto; display:flex; align-items:center; }
.logos__track img{
  height:clamp(26px,3.1vw,38px);
  width:auto; max-width:none;
  filter:grayscale(1);
  opacity:.75;
  transition:opacity .2s var(--ease), filter .2s var(--ease);
}
.logos__track li:hover img{ filter:none; opacity:1; }

.logos__toggle{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(20px,2.6vw,28px);
  min-height:44px; padding:0 15px;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--hair); border-radius:var(--radius);
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.15em; text-transform:none;
  cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.logos__toggle:hover{ border-color:var(--ink); color:var(--ink); }
.logos__toggle svg{ width:13px; height:13px; }
.logos__toggle .is-play{ display:none; }
.logos[data-paused="true"] .logos__toggle .is-play{ display:block; }
.logos[data-paused="true"] .logos__toggle .is-pause{ display:none; }

.band--void .logos__toggle{ color:var(--bone-dim); border-color:var(--hair-bone); }
.band--void .logos__toggle:hover{ color:var(--bone); border-color:var(--bone); }

/* ==========================================================================
   FILTER RAIL (work page)
   ========================================================================== */

.filters{
  display:flex; gap:8px; flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:30px;
  border-bottom:1px solid var(--hair);
}
.filter{
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  letter-spacing:.14em; text-transform:none;
  min-height:44px; padding:0 15px;
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--hair); border-radius:var(--radius); cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.filter:hover{ border-color:var(--ink); color:var(--ink); }
.filter[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.filter span{ font-size:.85em; opacity:.6; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   FORM
   ========================================================================== */

.form{ display:grid; gap:24px; }
.fieldset{ border:0; margin:0; padding:0; }
.fieldset > legend{
  font-family:var(--mono); font-size:.65rem; font-weight:600;
  letter-spacing:.16em; text-transform:none; color:var(--accent-txt);
  padding:0 0 14px; margin-bottom:20px; width:100%;
  border-bottom:1px solid var(--hair);
}
.frow{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:660px){ .frow--2{ grid-template-columns:1fr 1fr; } }

.field{ display:grid; gap:7px; }
.field > label{
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.15em; text-transform:none; color:var(--ink);
  display:flex; align-items:center; gap:6px;
}
.field > label em{ color:var(--danger); font-style:normal; }
.field > label .opt{ color:var(--ash); font-weight:500; letter-spacing:.13em; }
.hint{ font-size:.82rem; color:var(--ash); line-height:1.45; }

.input,.select,.textarea{
  font-family:var(--body); font-size:16px; font-weight:350;
  color:var(--ink); background:var(--paper-lift);
  border:1px solid var(--hair); border-radius:var(--radius);
  min-height:50px; padding:13px 15px;
  width:100%;
  transition:border-color .18s var(--ease), background .18s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.textarea{ min-height:122px; resize:vertical; line-height:1.55; }
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236C7278' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  padding-right:42px;
}
.input:hover,.select:hover,.textarea:hover{ border-color:var(--ash-2); }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--ink); background:var(--paper); outline-offset:2px; }
.input::placeholder,.textarea::placeholder{ color:var(--ash-2); }

.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--danger);
  background:var(--danger-dim);
}
.err{
  display:none;
  align-items:center; gap:7px;
  font-family:var(--mono); font-size:.63rem; font-weight:500;
  letter-spacing:.1em; text-transform:none; color:var(--danger);
}
.err svg{ width:13px; height:13px; flex:0 0 auto; }
.err[data-on="true"]{ display:flex; }

/* file drop */
.drop{
  position:relative;
  border:1px dashed var(--ash-2);
  border-radius:var(--radius);
  background:var(--paper-lift);
  padding:26px 20px;
  text-align:center;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.drop:hover,.drop[data-hot="true"]{ border-color:var(--accent-deep); background:var(--paper); }
.drop input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.drop__ico{ width:26px; height:26px; margin:0 auto 12px; color:var(--ash); stroke-width:1.4; }
.drop__t{
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:none; color:var(--ink);
}
.drop__s{ font-size:.83rem; color:var(--ash); margin-top:7px; }
.drop__files{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; text-align:left; }
.drop__files li{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.08em;
  color:var(--ink-2); padding:7px 10px; background:var(--paper-deep); border-radius:var(--radius-sm);
  display:flex; justify-content:space-between; gap:12px;
}

.checkline{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:.92rem; color:var(--ink-2);
  cursor:pointer; padding:4px 0;
}
.checkline input{
  width:20px; height:20px; margin:2px 0 0;
  accent-color:var(--ink); cursor:pointer;
}

.form__submit{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.form__status{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.12em; text-transform:none; color:var(--ash);
}

.form-sent{
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--paper-lift);
  padding:clamp(26px,4vw,44px);
  text-align:left;
}
.form-sent__ico{ width:34px; height:34px; color:var(--accent-txt); stroke-width:1.4; margin-bottom:18px; }

.formnote{
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.13em; text-transform:none; color:var(--accent-txt);
  border:1px dashed rgba(230,169,0,.55); background:var(--accent-dim);
  border-radius:var(--radius-sm);
  padding:10px 13px; line-height:1.6;
}

/* ==========================================================================
   HERO
   ========================================================================== */

/* full-bleed photo hero, text overlaid at the base — image behind, scrim for
   legibility, content pinned to the bottom like a photographic title card */
.hero--photo{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:clamp(440px, 82vh, 780px);
  padding-top:clamp(40px,6vw,74px);
  padding-bottom:clamp(40px,6vw,68px);
  overflow:hidden;
  color:var(--bone);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg-img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }

/* mobile-only crop override — the desktop object-fit:cover rule above is
   untouched. The source photo is a very wide 4015x1910 shot of two framed
   prints on a console; on a narrow/tall phone viewport, cover's automatic
   height-driven scale can't show the whole main frame's width at once (the
   frame alone is ~1300px of the photo's 4015px width — wider than what
   fits once the image is scaled to fill the hero's height). So instead of
   auto-fit, the image is manually zoomed with an explicit width% (which,
   because both width and left are percentages of the same container, keeps
   the same native-pixel crop window at 375/390/430px alike) and panned so
   the crop starts just left of the large frame's outer edge and ends just
   inside the small frame — roughly half the main frame, more of the
   second frame revealed. The photo is bottom-anchored so any shortfall in height
   lands as a strip of matched wall-tone at the very top, not a hard cut
   through the frames, and the existing dark scrim still does the work of
   keeping the bottom-left text card legible over whatever content ends up
   there. */
@media (max-width:640px){
  .hero__bg{ background:linear-gradient(180deg, #E8E5E4 0%, #929292 100%); }
  .hero__bg-img{
    width:250%; height:auto;
    max-width:none;
    position:absolute; left:-80%; top:0;
    object-fit:unset; object-position:unset;
  }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(58,54,49,.65) 0%, rgba(58,54,49,.2) 42%, transparent 68%),
    linear-gradient(180deg, rgba(58,54,49,.05) 0%, rgba(58,54,49,.3) 55%, rgba(58,54,49,.8) 100%);
}
/* text reads as a compact card in the clear wall/floor space to the left of
   the framed prints, not a banner spanning the photo. `.hero__content` shares
   its element with `.wrap` (for the gutter/max-width), so it must cancel
   `.wrap`'s auto side-margins here or the flex item centers itself instead
   of sitting at the left edge. */
.hero__content{
  position:relative; z-index:1;
  max-width:clamp(230px, 28vw, 400px);
  margin-inline:0;
}
.hero--photo .t-hero{
  font-size:clamp(1.5rem, 2.7vw, 2.4rem);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--bone);
}
.hero__lede{
  margin-top:12px; color:var(--bone-dim);
  font-size:clamp(.88rem,1.1vw,1.02rem);
  line-height:1.5;
}
.hero__ctas{ margin-top:clamp(18px,2.2vw,24px); gap:10px; }
.hero--photo .btn{ min-height:42px; padding:0 18px; font-size:.82rem; }
.hero--photo .btn--ghost{ background:transparent; color:var(--bone); border-color:var(--hair-bone); }
.hero--photo .btn--ghost:hover{ background:var(--bone); border-color:var(--bone); color:var(--void); }

/* quick-facts strip, now a plain band under the photo hero */
.hero__stats{
  display:grid; grid-template-columns:1fr 1fr; gap:24px 0;
  text-align:center;
}
@media (min-width:820px){ .hero__stats{ grid-template-columns:repeat(4,1fr); } }
.hero__stats > div{ padding:0 20px; }
.hero__stats .v{
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:clamp(1.2rem,2.2vw,1.7rem); text-transform:none; line-height:1;
  display:block; margin-bottom:6px;
}
.hero__stats .k{
  font-family:var(--mono); font-size:.58rem; font-weight:500;
  letter-spacing:.15em; text-transform:none; color:var(--ash);
  display:block;
}

/* "Trusted by" heading above the partner-logo marquee — centered, sized to
   match the hero stat values just above it rather than a full section title */
.trusted-by{
  text-align:center;
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:clamp(1.2rem,2.2vw,1.7rem); text-transform:none;
  letter-spacing:-.01em; line-height:1;
  margin:0 0 clamp(22px,3vw,34px);
}

/* Home page only: no rule lines — the full-bleed photo hero calls for a
   cleaner page, free of the drafting-sheet divider lines used elsewhere */
body[data-page="index"] .shead{ border-bottom:0; padding-bottom:0; }
body[data-page="index"] .tlink{ border-bottom:0; padding-bottom:0; }
body[data-page="index"] .band--rule{ border-top:0; }

/* About page only: solid white ground instead of the warm-white paper tone */
body[data-page="about"]{ --paper: #FFFFFF; --paper-deep: #FFFFFF; }

/* FAQ section (contact page): no divider lines — section rule, heading
   underline and the rules between question/answer rows all removed */
#general.band--rule{ border-top:0; }
#general .shead{ border-bottom:0; padding-bottom:0; }
#general .deflist > div{ border-top:0; }

/* Shop page only: photo-band scrim goes pure black instead of dark grey */
body[data-page="shop"] .band--photo .band__scrim{
  background:linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.86) 100%);
}

/* Shop page mobile: each banner photo crops toward a different edge instead
   of the default center, so the wide 3840x1500 source shows the side of
   the machine that matters on a narrow viewport */
@media (max-width:640px){
  body[data-page="shop"] #prints .band__bg-img{ object-position:left center; }
  body[data-page="shop"] #merch .band__bg-img{ object-position:left center; }
  body[data-page="shop"] #stock .band__bg-img{ object-position:right center; }
}

/* About page portrait: no border stroke around the figure */
#sapta .plate{ border:0; }

/* page header for sub-pages */
.phead{
  padding-top:clamp(34px,5vw,62px);
  padding-bottom:clamp(30px,4vw,54px);
  border-bottom:1px solid var(--hair);
}
.phead__crumb{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:clamp(18px,2.6vw,26px); }
.phead__crumb a{ text-decoration:none; }
.phead__crumb a:hover{ color:var(--accent-txt); }
.phead__grid{ display:grid; gap:clamp(22px,3vw,48px); grid-template-columns:1fr; align-items:end; }
@media (min-width:920px){ .phead__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{
  background:var(--footer-bg); color:var(--bone);
  padding-block:clamp(48px,6vw,80px) 0;
  position:relative; z-index:2;
}
.foot__top{
  display:grid; gap:clamp(30px,4vw,56px);
  grid-template-columns:1fr;
  padding-bottom:clamp(36px,4vw,56px);
}
@media (min-width:720px){ .foot__top{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .foot__top{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.foot__logo{ height:40px; width:auto; display:block; margin-bottom:16px; }
@media (min-width:1080px){ .foot__logo{ height:46px; } }
.foot h4{
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.16em; color:var(--bone-dim);
  margin-bottom:16px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.foot ul a{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; color:var(--bone);
  font-size:.92rem; padding:7px 0; min-height:36px;
  transition:color .18s var(--ease);
}
.foot ul a:hover{ color:var(--accent); }
.foot ul a svg{ width:12px; height:12px; opacity:.5; }
.foot__bottom{
  border-top:1px solid var(--hair-bone-s);
  padding-block:22px 26px;
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
  justify-content:space-between;
}
.foot__bottom p{ margin:0; }

.social{ display:flex; gap:9px; margin-top:20px; }
.social a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--hair-bone); border-radius:var(--radius); color:var(--bone);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.social a:hover{ background:var(--bone); border-color:var(--bone); color:var(--void); }
.social svg{ width:17px; height:17px; }

/* ==========================================================================
   MOTION — one orchestrated reveal per section, nothing decorative
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){
  .rise{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .66s var(--ease-out), transform .66s var(--ease-out);
    transition-delay:var(--d,0ms);
  }
  .rise.is-in{ opacity:1; transform:none; }

  /* hero rule draws itself */
  .drawline{
    transform-origin:left center;
    animation:draw 1.05s var(--ease-out) both;
  }
  @keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}
.rule{ height:1px; background:var(--hair); border:0; margin:0; }
.band--void .rule{ background:var(--hair-bone); }

/* print: it is a drawing set, let it print like one */
@media print{
  .nav,.drawer,.sheet-frame,.foot__bottom{ display:none; }
  body{ background:#fff; }
  body::before{ display:none; }
  .band--void{ background:#fff; color:#000; }
}

.vh{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:absolute; top:-100px; left:var(--gutter); z-index:90;
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius); padding:12px 18px;
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:none; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:12px; }