/* ==========================================================================
   madebyruby — single-page portfolio
   Palette: Paper #FAF7F2 · Paper-2 #F1ECE4 · Ink #231A1E · Ruby #8E1F3A
            Garnet #6F1830 · Ash #5D5358 · Linen #E8E1D8
   Type:    Big Shoulders Display (display) · Source Serif 4 (body)
            Hanken Grotesk (ui / labels)
   Red is used sparingly: eyebrow diamonds, primary CTAs, links,
   the live-demo dot, and the interactive comparison slider.
   ========================================================================== */

@font-face{
  font-family:"Big Shoulders Display"; font-style:normal; font-weight:700;
  font-display:swap; src:url("assets/fonts/big-shoulders-display-700-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Big Shoulders Display"; font-style:normal; font-weight:800;
  font-display:swap; src:url("assets/fonts/big-shoulders-display-800-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url("assets/fonts/source-serif-4-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:italic; font-weight:400;
  font-display:swap; src:url("assets/fonts/source-serif-4-italic-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400;
  font-display:swap; src:url("assets/fonts/hanken-grotesk-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:600;
  font-display:swap; src:url("assets/fonts/hanken-grotesk-600-latin.woff2") format("woff2");
}

:root{
  --paper:#FAF7F2;
  --paper-2:#F1ECE4;
  --card:#FFFFFF;
  --ink:#231A1E;
  --ash:#5D5358;
  --linen:#E8E1D8;
  --ruby:#8E1F3A;
  --garnet:#6F1830;
  --f-display:"Big Shoulders Display", Impact, "Haettenschweiler", sans-serif;
  --f-body:"Source Serif 4", Georgia, "Times New Roman", serif;
  --f-ui:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:72rem;
  --wrap-text:42rem;
  --radius:16px;
  --shadow:0 30px 70px -40px rgba(111,24,48,.5);
  --lift:0 18px 40px -26px rgba(35,26,30,.4);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.7 var(--f-body);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--ruby); color:#fff; }

h1, h2, h3{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(3rem, 9vw, 6rem); line-height:.9; letter-spacing:-.02em; }
h2{ font-size:clamp(1.9rem, 4.6vw, 3rem); }
h3{ font-family:var(--f-display); font-weight:700; font-size:1.5rem; line-height:1.02; }

p{ margin:0 0 1em; }

a{ color:var(--ruby); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--garnet); text-decoration-thickness:2px; }

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

.skip-link{
  position:absolute; left:-999px; top:0; z-index:60;
  background:var(--ink); color:#fff; padding:.7em 1.2em;
  font-family:var(--f-ui); font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:.75rem; top:.75rem; }

.container{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.dmd{
  width:.5em; height:.5em; background:var(--ruby);
  transform:rotate(45deg); flex:none; display:inline-block;
}

/* --- Eyebrow / section rhythm ------------------------------------------- */

.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-ui); font-weight:600; font-size:.74rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ash);
  margin:0 0 1.1rem;
}
.eyebrow .dmd{ width:.55rem; height:.55rem; }

.section{ padding-block:clamp(3.5rem, 8vw, 6rem); border-top:1px solid var(--linen); }
section[id]{ scroll-margin-top:1.5rem; }
.lead{ font-family:var(--f-body); font-size:1.15rem; max-width:var(--wrap-text); color:var(--ink); }

/* --- Buttons ------------------------------------------------------------ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-ui); font-weight:600; font-size:1rem; line-height:1;
  padding:.95em 1.5em; border:1.5px solid var(--ruby); border-radius:999px;
  background:var(--ruby); color:#fff; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ background:var(--garnet); border-color:var(--garnet); color:#fff; transform:translateY(-2px); box-shadow:0 16px 34px -18px rgba(111,24,48,.55); }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--linen); }
.btn.ghost:hover{ background:transparent; color:var(--ink); border-color:var(--ruby); box-shadow:none; }
.btn-lg{ font-size:1.1rem; padding:1.05em 1.7em; }

/* --- Header / nav ------------------------------------------------------- */

.site-head{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid transparent; }
.site-head.is-stuck{ border-bottom-color:var(--linen); }
.site-head .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 0; }
.brand{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--f-ui); font-weight:600; font-size:1.15rem; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none;
}
.brand:hover{ color:var(--ink); }
.nav-links{ display:flex; gap:1.6rem; }
.nav-links a{ font-family:var(--f-ui); font-weight:500; font-size:.92rem; color:var(--ash); text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
.site-head .btn{ padding:.65em 1.05em; font-size:.9rem; }
@media (max-width:720px){ .nav-links{ display:none; } }

/* --- Hero --------------------------------------------------------------- */

.hero{ padding-block:clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); }
.hero h1{ max-width:15ch; margin-bottom:.35em; }
.hero .sub{ font-family:var(--f-body); font-size:clamp(1.12rem, 2vw, 1.35rem); max-width:42ch; margin:0; color:var(--ink); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero-trust{ font-family:var(--f-ui); font-size:.9rem; color:var(--ash); margin:1.3rem 0 0; }

/* --- Signature: browser-framed live demo -------------------------------- */

.demo{ padding-block:clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
.frame{
  border:1px solid var(--linen); border-radius:var(--radius); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
}
.frame-bar{ display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem; background:var(--paper-2); border-bottom:1px solid var(--linen); }
.frame-bar .dots{ display:flex; gap:.4rem; flex:none; }
.frame-bar .dots i{ width:.7rem; height:.7rem; border-radius:50%; background:var(--linen); display:block; }
.addr{
  flex:1; min-width:0; display:flex; align-items:center;
  font-family:var(--f-ui); font-size:.82rem; color:var(--ash);
  background:var(--card); border:1px solid var(--linen); border-radius:999px; padding:.4rem .85rem;
}
.addr span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.live{
  flex:none; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--f-ui); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ruby);
}
.live::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--ruby); box-shadow:0 0 0 3px color-mix(in srgb, var(--ruby) 22%, transparent); }
.frame-shot{ display:block; }
.frame-shot img{ width:100%; height:clamp(320px, 46vw, 560px); object-fit:cover; object-position:top center; }
.frame-shot:focus-visible{ outline:3px solid var(--ruby); outline-offset:-4px; }
.demo-cap{ display:flex; align-items:center; gap:.55rem; font-family:var(--f-ui); font-size:.9rem; color:var(--ash); margin:1rem 0 0; }

/* --- Stat strip --------------------------------------------------------- */

.stats{ padding-block:clamp(1rem, 3vw, 1.5rem) clamp(3rem, 7vw, 4.5rem); }
.stat-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--linen); border:1px solid var(--linen); border-radius:var(--radius); overflow:hidden;
}
@media (min-width:760px){ .stat-grid{ grid-template-columns:repeat(4, 1fr); } }
.stat{ background:var(--card); padding:1.7rem 1.5rem; }
.stat .num{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem, 5vw, 3.4rem); line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat .lab{ font-family:var(--f-ui); font-weight:500; font-size:.9rem; color:var(--ash); margin-top:.55rem; }

/* --- Services ----------------------------------------------------------- */

.services-grid{ display:grid; gap:1.4rem; margin-top:2.2rem; }
@media (min-width:720px){ .services-grid{ grid-template-columns:1fr 1fr; } }
.svc{
  background:var(--card); border:1px solid var(--linen); border-radius:var(--radius);
  padding:1.9rem 1.8rem; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.svc h3{ margin-bottom:.35rem; }
.price{ font-family:var(--f-display); font-weight:800; font-size:2rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.price-meta{ font-family:var(--f-ui); color:var(--ash); font-size:.92rem; }
.svc-lead{ font-family:var(--f-body); margin:.9rem 0 0; }
.svc ul{ list-style:none; margin:1.1rem 0 1.5rem; padding:0; }
.svc li{ position:relative; padding-left:1.35rem; margin:.6rem 0; font-size:.99rem; }
.svc li::before{ content:""; position:absolute; left:.1rem; top:.62em; width:.4em; height:.4em; background:var(--ash); transform:rotate(45deg); }
.svc-link{ margin-top:auto; font-family:var(--f-ui); font-weight:600; font-size:.98rem; align-self:start; }

@media (hover:hover){
  .svc:hover, .work:hover, .feature:hover{ transform:translateY(-3px); box-shadow:var(--lift); }
}

/* --- Before / after comparison (interactive) ---------------------------- */

.compare-wrap{ width:min(100% - 2.5rem, var(--wrap)); margin:2.4rem auto 0; }
.compare{
  position:relative; aspect-ratio:3 / 2; border:2px solid var(--ruby); border-radius:var(--radius);
  overflow:hidden; background:var(--card); box-shadow:var(--shadow);
}
.compare figure{ margin:0; position:absolute; inset:0; }
.compare img{ width:100%; height:100%; object-fit:cover; }
.pane-after{ clip-path:inset(0 0 0 var(--pos, 50%)); }
.compare-divider{
  position:absolute; top:0; bottom:0; left:var(--pos, 50%); width:2px;
  background:var(--ruby); transform:translateX(-50%); pointer-events:none; z-index:2;
}
.compare-handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:46px; height:46px; border-radius:50%; background:var(--ruby); color:#fff;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(35,26,30,.35);
}
.compare-range{
  position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none;
}
.compare-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:46px; height:990px; }
.compare-range::-moz-range-thumb{ width:46px; height:990px; border:0; }
.compare:has(.compare-range:focus-visible){ outline:3px solid var(--garnet); outline-offset:4px; }
.tag{
  position:absolute; top:14px; z-index:3; pointer-events:none;
  font-family:var(--f-ui); font-weight:600; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.5em .9em; border-radius:999px;
}
.tag-before{ left:14px; background:rgba(250,247,242,.94); color:var(--ink); border:1px solid var(--linen); }
.tag-after{ right:14px; background:var(--ruby); color:#fff; }
@media (max-width:560px){ .tag .tag-more{ display:none; } }
.compare-caption{ text-align:center; font-family:var(--f-ui); color:var(--ash); font-size:.92rem; margin:1.1rem auto 0; max-width:46em; }

html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
html.js .reveal.is-in{ opacity:1; transform:none; }

/* --- Selected work ------------------------------------------------------ */

.sec-head{ display:flex; justify-content:space-between; align-items:end; gap:1.5rem; flex-wrap:wrap; }
.sec-head .lead{ margin:.9rem 0 0; }
.work-list{ display:grid; gap:1.2rem; margin-top:2.2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .work-list{ grid-template-columns:repeat(3, 1fr); } }
.work{
  background:var(--card); border:1px solid var(--linen); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.work-media{ position:relative; aspect-ratio:8 / 5; background:var(--paper-2); }
.work-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.media-link{ position:absolute; inset:0; display:block; }
.media-link:focus-visible{ outline:3px solid var(--ruby); outline-offset:-4px; }

.play-btn{ position:absolute; inset:0; display:block; width:100%; border:0; background:transparent; cursor:pointer; padding:0; }
.play-btn:hover{ background:rgba(35,26,30,.14); }
.play-btn:focus-visible{ outline:3px solid var(--ruby); outline-offset:-4px; }
.pb{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:58px; height:58px; border-radius:50%; background:var(--ruby); display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(35,26,30,.5); transition:transform .15s ease, background .15s ease; }
.play-btn:hover .pb{ background:var(--garnet); transform:translate(-50%, -50%) scale(1.07); }
.pb-label{ position:absolute; left:12px; bottom:12px; background:rgba(250,247,242,.94); border:1px solid var(--linen); border-radius:999px; font-family:var(--f-ui); font-weight:600; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); padding:.5em .9em; }
.work-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-note{ position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:2rem; text-align:center; background:var(--paper); color:var(--ash); font-family:var(--f-ui); font-size:.95rem; cursor:pointer; }

.work-body{ padding:1.2rem 1.35rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.badge{
  align-self:start; font-family:var(--f-ui); font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash); background:var(--paper); border:1px solid var(--linen); border-radius:999px; padding:.4em .8em;
}
.work-body h3{ margin:0; }
.work-body p{ margin:0; font-size:.96rem; }
.work-links{ margin-top:auto; padding-top:.3rem; display:flex; gap:1.3rem; flex-wrap:wrap; }
.work-links a{ font-family:var(--f-ui); font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:.4em; }
.work-links svg{ flex:none; }

/* --- Features that convert ---------------------------------------------- */

.feature-grid{ display:grid; gap:1.4rem; margin-top:2.2rem; }
@media (min-width:560px){ .feature-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:940px){ .feature-grid{ grid-template-columns:repeat(4, 1fr); } }
.feature{
  background:var(--card); border:1px solid var(--linen); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.feature-stage{
  background:linear-gradient(160deg, #FBF9F5 0%, #F1ECE4 100%);
  border-bottom:1px solid var(--linen); padding:1.7rem 1.4rem; min-height:200px;
  display:flex; align-items:center; justify-content:center;
}
.feature-text{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.feature-cat{ font-family:var(--f-ui); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); margin:0; }
.feature-text h3{ margin:0; font-size:1.4rem; }
.feature-text > p{ margin:0; font-size:.98rem; }
.feature-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 0; padding:0; }
.feature-tags li{ font-family:var(--f-ui); font-weight:600; font-size:.72rem; color:var(--ash); background:var(--paper); border:1px solid var(--linen); border-radius:999px; padding:.4em .75em; line-height:1; }

/* mini feature mockups (decorative) */
.feature-stage .fx{ width:100%; max-width:250px; font-family:var(--f-ui); }
.fx-shop{ position:relative; background:#fff; border:1px solid var(--linen); border-radius:10px; overflow:hidden; min-height:152px; box-shadow:0 12px 26px -18px rgba(35,26,30,.45); }
.fx-bar{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--linen); }
.fx-logo{ font-weight:700; font-size:10.5px; letter-spacing:.18em; color:var(--ink); }
.fx-dot{ width:12px; height:12px; border:1.5px solid var(--ash); border-radius:3px; }
.fx-faint{ display:flex; gap:9px; padding:12px 11px 24px; opacity:.5; }
.fx-thumb{ width:46px; height:54px; border-radius:6px; background:var(--linen); flex:none; }
.fx-col{ flex:1; display:flex; flex-direction:column; gap:6px; justify-content:center; }
.fx-col i{ height:7px; border-radius:4px; background:var(--linen); }
.fx-col i:nth-child(2){ width:80%; }
.fx-col i:nth-child(3){ width:55%; }
.fx-pop{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); width:calc(100% - 26px); background:#fff; border:1px solid var(--linen); border-radius:9px; box-shadow:0 16px 30px -12px rgba(35,26,30,.5); padding:12px; text-align:center; }
.fx-pop-ey{ margin:0; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ruby); font-weight:600; }
.fx-pop-h{ margin:3px 0 8px; font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-.01em; }
.fx-field{ display:block; font-family:var(--f-body); font-size:10px; color:var(--ash); background:var(--paper); border:1px solid var(--linen); border-radius:6px; padding:6px 8px; text-align:left; margin-bottom:6px; }
.fx-btn{ display:block; background:var(--ruby); color:#fff; font-weight:600; font-size:10.5px; border-radius:6px; padding:7px 10px; text-align:center; }
.fx-card{ background:#fff; border:1px solid var(--linen); border-radius:10px; box-shadow:0 12px 26px -18px rgba(35,26,30,.45); padding:13px; }
.fx-h{ margin:0 0 10px; font-weight:700; font-size:11.5px; color:var(--ink); }
.fx-fbt{ display:flex; align-items:center; justify-content:center; gap:6px; }
.fx-tile{ width:42px; height:46px; border-radius:6px; background:var(--linen); flex:none; }
.fx-plus{ color:var(--ash); font-family:var(--f-body); font-size:14px; }
.fx-foot{ margin:11px 0 10px; font-family:var(--f-body); font-size:11px; color:var(--ash); text-align:center; }
.fx-foot b{ font-family:var(--f-display); color:var(--ink); font-size:13.5px; }
.fx-save{ color:var(--ruby); font-weight:600; font-family:var(--f-ui); }
.fx-sub{ text-align:left; }
.fx-opt{ display:flex; align-items:center; gap:7px; font-family:var(--f-body); font-size:11px; color:var(--ink); padding:8px 9px; border:1px solid var(--linen); border-radius:8px; margin-bottom:6px; }
.fx-opt.sel{ border-color:var(--ruby); background:var(--paper); }
.fx-radio{ width:12px; height:12px; border:1.5px solid var(--ash); border-radius:50%; flex:none; }
.fx-radio.on{ border:4px solid var(--ruby); }
.fx-badge{ margin-left:auto; font-family:var(--f-ui); font-weight:600; font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--garnet); background:#fff; border:1px solid var(--linen); border-radius:999px; padding:2px 6px; }
.fx-subnote{ margin:4px 0 0; font-family:var(--f-body); font-size:10px; color:var(--ash); }
.fx-rewards{ padding:0; overflow:hidden; }
.fx-rw-head{ background:var(--ruby); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; }
.fx-rw-t{ font-weight:700; font-size:11.5px; }
.fx-rw-pts{ font-weight:700; font-size:13px; }
.fx-rw-body{ padding:13px 12px; }
.fx-prog{ height:7px; background:var(--linen); border-radius:99px; overflow:hidden; margin-bottom:11px; }
.fx-prog i{ display:block; height:100%; width:72%; background:var(--ruby); }
.fx-redeem{ margin:0; display:flex; align-items:center; justify-content:space-between; font-family:var(--f-body); font-size:11px; color:var(--ink); }
.fx-redeem b{ color:var(--garnet); font-family:var(--f-display); }

/* --- About -------------------------------------------------------------- */

.about-text{ max-width:var(--wrap-text); }
.about-text p{ font-size:1.08rem; }

/* --- Stack strip -------------------------------------------------------- */

.stack{ padding-block:2.4rem; border-top:1px solid var(--linen); }
.stack .container{ display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap; }
.stack-label{ font-family:var(--f-ui); font-weight:600; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ash); }
.stack ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.15rem; margin:0; padding:0; }
.stack li{ display:flex; align-items:center; gap:1.15rem; font-family:var(--f-ui); font-weight:600; font-size:.95rem; }
.stack li + li::before{ content:""; width:.4em; height:.4em; background:var(--ruby); transform:rotate(45deg); opacity:.85; }

/* --- Contact (dark garnet CTA band) ------------------------------------- */

.contact{ padding-block:clamp(3rem, 7vw, 5rem); border-top:1px solid var(--linen); }
.contact-inner{
  background:var(--ink); color:var(--paper); border-radius:24px;
  padding:clamp(2.2rem, 5vw, 3.6rem);
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
}
.contact-inner .eyebrow{ color:color-mix(in srgb, var(--paper) 70%, transparent); }
.contact-inner .eyebrow .dmd{ background:var(--paper); }
.contact-copy{ max-width:34ch; }
.contact-inner h2{ color:var(--paper); margin-bottom:.4rem; }
.contact-inner p{ font-family:var(--f-ui); color:color-mix(in srgb, var(--paper) 74%, transparent); margin:0; }
.contact .btn{ background:var(--ruby); border-color:var(--ruby); color:#fff; }
.contact .btn:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.contact-alt{ font-family:var(--f-ui); font-size:.9rem; color:var(--ash); margin:1.2rem 0 0; }

/* --- Footer ------------------------------------------------------------- */

.site-foot{ border-top:1px solid var(--linen); padding:2.2rem 0 3rem; color:var(--ash); font-family:var(--f-ui); font-size:.9rem; }
.site-foot .container{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.site-foot p{ margin:0; }

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
  .svc:hover, .work:hover, .feature:hover{ transform:none; box-shadow:none; }
  .btn:hover{ transform:none; }
  .play-btn:hover .pb{ transform:translate(-50%, -50%); }
  html.js .reveal{ opacity:1; transform:none; }
}