:root {
  --magenta:#a3186f;
  --magenta-bright:#c8146f;
  --magenta-glow:#e0127f;
  --ink:#ffffff;
  --panel:#fafafa;
  --panel-2:#ffffff;
  --white:#121113;
  --white-soft:rgba(18,17,19,0.62);
  --line:rgba(18,17,19,0.1);
  --max:1180px;
  --on-dark:#f7f2f5;
  --on-dark-soft:rgba(247,242,245,0.68);
  --line-dark:rgba(255,255,255,0.1);
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
}
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body {
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:hidden;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img {
  max-width:100%;
  display:block;
}
a {
  color:inherit;
  text-decoration:none;
}
ul {
  list-style:none;
}
h1,h2,h3,h4 {
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-0.01em;
}
.wrap {
  max-width:var(--max);
  margin:0 auto;
  padding:0 5vw;
}
header.site-header {
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 16px rgba(28,20,32,0.04);
}
.nav-row {
  max-width:var(--max);
  margin:0 auto;
  padding:14px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand {
  display:flex;
  align-items:center;
}
.brand-logo {
  height:56px;
  width:auto;
  display:block;
}
nav.main-nav {
  display:flex;
  align-items:center;
  gap:34px;
}
nav.main-nav > a {
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--white);
  transition:color .2s ease;
  position:relative;
}
nav.main-nav > a:hover,nav.main-nav > a.active,.dropdown-trigger:hover,.dropdown-trigger.active {
  color:var(--magenta-glow);
}
nav.main-nav > a.active::after,.dropdown-trigger.active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:2px;
  background:var(--magenta-glow);
}
.nav-item-dropdown {
  position:relative;
}
.dropdown-trigger {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--white);
  transition:color .2s ease;
  cursor:pointer;
}
.dropdown-trigger svg {
  width:12px;
  height:12px;
  transition:transform .2s ease;
}
.nav-item-dropdown:hover .dropdown-trigger svg {
  transform:rotate(180deg);
}
.dropdown-menu {
  position:absolute;
  top:calc(100% + 20px);
  left:50%;
  transform:translateX(-50%);
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:500px;
  box-shadow:0 28px 60px rgba(28,20,32,0.16);
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:5;
}
.nav-item-dropdown:hover .dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 14px;
  border-radius:14px;
  font-size:14.5px;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--white);
  transition:background .15s ease,color .15s ease;
}
.dropdown-menu a:hover {
  background:rgba(224,18,127,0.08);
  color:var(--magenta-glow);
}
.dropdown-menu a .icon-badge {
  width:42px;
  height:42px;
  flex-shrink:0;
  border-radius:12px;
}
.dropdown-menu a .icon-badge svg {
  width:20px;
  height:20px;
}
.dropdown-view-all {
  grid-column:1 / -1;
  justify-content:center;
  color:var(--magenta-glow) !important;
  border-top:1px solid var(--line);
  margin-top:10px;
  padding-top:18px !important;
  border-radius:0 !important;
  font-weight:800 !important;
}
.dropdown-view-all:hover {
  background:transparent !important;
}
.nav-divider {
  width:1px;
  height:26px;
  background:var(--line);
}
.nav-socials {
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-socials a {
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1.5px solid var(--white);
  background:#ffffff;
  color:var(--white);
  transition:all .2s ease;
}
.nav-socials a svg {
  width:18px;
  height:18px;
}
.nav-socials a:hover {
  border-color:var(--magenta-glow);
  color:var(--magenta-glow);
}
.nav-cta {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:11px 22px;
  border-radius:999px;
  background:var(--magenta-glow);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .2s ease;
}
.nav-cta:hover {
  background:var(--magenta-bright);
}
.nav-cta svg {
  width:15px;
  height:15px;
  flex-shrink:0;
}
.nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span {
  width:24px;
  height:2px;
  background:var(--white);
  display:block;
}
.icon-badge {
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(224,18,127,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--magenta-glow);
  flex-shrink:0;
}
.icon-badge svg {
  width:22px;
  height:22px;
}
.icon-badge-lg {
  width:64px;
  height:64px;
  border-radius:14px;
  background:rgba(224,18,127,0.07);
}
.icon-badge-lg svg {
  width:30px;
  height:30px;
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn:hover {
  transform:translateY(-2px);
}
.btn svg {
  width:16px;
  height:16px;
  flex-shrink:0;
}
.btn-primary {
  background:var(--magenta-glow);
  color:#fff;
  box-shadow:0 4px 14px rgba(224,18,127,0.22);
}
.btn-primary:hover {
  background:var(--magenta-bright);
}
.btn-ghost {
  background:transparent;
  color:var(--white);
  border-color:rgba(28,20,32,0.25);
}
.btn-ghost:hover {
  border-color:rgba(28,20,32,0.5);
}
.btn-block {
  width:100%;
  justify-content:center;
}
.page-hero {
  position:relative;
  padding:64px 0 52px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--magenta-glow);
  font-weight:700;
  margin-bottom:16px;
}
.eyebrow::before {
  content:"";
  width:22px;
  height:1px;
  background:var(--magenta-glow);
}
h1 {
  font-size:clamp(32px,5vw,54px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:.005em;
  margin-bottom:16px;
  text-transform:uppercase;
  color:var(--white);
}
h1 span {
  color:var(--magenta-glow);
}
.page-hero p.lead {
  max-width:640px;
  color:var(--white-soft);
  font-size:clamp(14px,1.6vw,17px);
  font-weight:300;
}
.breadcrumb {
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--white-soft);
  margin-bottom:18px;
}
.breadcrumb a {
  color:var(--white-soft);
}
.breadcrumb a:hover {
  color:var(--white);
}
.breadcrumb .sep {
  margin:0 8px;
  opacity:.5;
}
.home-hero {
  position:relative;
  padding:80px 0 70px;
  display:flex;
  align-items:center;
  background-image:url('../images/hero-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--on-dark);
}
.home-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,8,10,0.58);
}
.home-hero .wrap {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:start;
  width:100%;
}
.home-hero .hero-copy {
  text-align:left;
  padding-top:14px;
}
.home-hero .eyebrow {
  color:var(--magenta-glow);
}
.home-hero .eyebrow::before {
  background:var(--magenta-glow);
}
.home-hero h1 {
  text-align:left;
  color:var(--on-dark);
}
.home-hero p.lead {
  margin:0 0 30px;
  color:var(--on-dark-soft);
  text-align:left;
}
.hero-btns {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-bottom:20px;
}
.hero-note {
  font-size:12px;
  color:var(--on-dark-soft);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-hero .btn-ghost {
  color:var(--on-dark);
  border-color:rgba(247,242,245,0.4);
}
.home-hero .btn-ghost:hover {
  border-color:rgba(247,242,245,0.7);
}
.glass-form-card {
  background:rgba(18,14,18,0.42);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:16px;
  padding:24px 26px;
  box-shadow:0 20px 50px rgba(15,10,15,0.28);
}
.glass-form-card h2 {
  font-size:19px;
  font-weight:800;
  color:#ffffff;
  margin-bottom:4px;
}
.glass-form-card > p {
  font-size:13px;
  color:rgba(255,255,255,0.82);
  margin-bottom:14px;
  font-weight:500;
}
.glass-form-card .form-field {
  margin-bottom:10px;
}
.glass-form-card .form-field label {
  color:rgba(255,255,255,0.88);
  font-weight:700;
  margin-bottom:4px;
  font-size:11px;
}
.glass-form-card .form-field label .opt {
  text-transform:none;
  letter-spacing:0;
  opacity:.7;
}
.glass-form-card .form-status {
  color:#ffffff;
}
.glass-form-card .form-status.ok {
  color:#4ade80;
}
.glass-form-card .form-status.err {
  color:#f87171;
}
.glass-form-card .form-field input,.glass-form-card .form-field select,.glass-form-card .form-field textarea {
  background:rgba(255,255,255,0.94);
  border:1px solid rgba(255,255,255,0.3);
  color:#1c1420;
  padding:10px 14px;
  font-size:13.5px;
}
.glass-form-card .form-field textarea {
  min-height:52px;
}
.glass-form-card .form-field input:focus,.glass-form-card .form-field select:focus,.glass-form-card .form-field textarea:focus {
  border-color:var(--magenta-glow);
  background:#ffffff;
}
.glass-form-card button[type="submit"] {
  padding:11px 28px;
}
.about-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about-split .visual {
  aspect-ratio:4/3;
  border-radius:18px;
  background:var(--panel);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-split .visual img {
  width:60%;
  max-width:260px;
  height:auto;
  opacity:.95;
}
.checklist li {
  position:relative;
  padding-left:28px;
  margin-bottom:14px;
  color:var(--white-soft);
  font-size:14.5px;
  font-weight:300;
}
.checklist li::before {
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(224,18,127,0.12);
  border:1px solid var(--magenta-glow);
}
.checklist li::after {
  content:"";
  position:absolute;
  left:6px;
  top:7px;
  width:6px;
  height:10px;
  border-right:2px solid var(--magenta-glow);
  border-bottom:2px solid var(--magenta-glow);
  transform:rotate(45deg);
}
.h-serif {
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.25;
  letter-spacing:0;
  margin-bottom:18px;
}
.h-serif em {
  font-style:italic;
  color:var(--magenta-glow);
  font-weight:700;
}
.section-lead {
  color:var(--white-soft);
  font-weight:400;
  margin-bottom:24px;
  max-width:520px;
}
.checklist-v2 {
  margin-bottom:28px;
}
.checklist-v2 li {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 0;
  margin-bottom:0;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
  font-weight:400;
  color:var(--white);
}
.checklist-v2 li:last-child {
  border-bottom:none;
}
.checklist-v2 .check-icon {
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--magenta-glow);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  margin-top:1px;
}
.checklist-v2 .check-icon svg {
  width:12px;
  height:12px;
}
.how-it-works-head {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:50px;
}
.how-it-works-head .h-serif {
  margin-bottom:0;
}
.how-it-works-divider {
  width:1px;
  align-self:stretch;
  background:var(--line);
  min-height:50px;
}
.how-it-works-note {
  font-size:14px;
  color:var(--white-soft);
  line-height:1.6;
}
.timeline {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  padding-top:22px;
}
.timeline-line {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--line);
}
.timeline-step {
  position:relative;
}
.timeline-dot {
  position:absolute;
  top:-27px;
  left:0;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--magenta-glow);
}
.timeline-num {
  font-family:var(--font-body);
  font-size:34px;
  font-weight:700;
  color:var(--magenta-glow);
  margin:18px 0 14px;
}
.timeline-icon {
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  margin-bottom:14px;
}
.timeline-icon svg {
  width:100%;
  height:100%;
}
.timeline-step h3 {
  font-size:17px;
  font-weight:700;
  margin-bottom:8px;
}
.timeline-step p {
  font-size:13.5px;
  color:var(--white-soft);
}
.how-it-works-strip {
  margin-top:56px;
  background:#121113;
  color:#fff;
  text-align:center;
  padding:18px 5vw;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
}
.section-head-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:44px;
}
.section-head-row .section-lead {
  margin-bottom:0;
}
.view-all-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  white-space:nowrap;
  padding-bottom:4px;
  border-bottom:1px solid var(--white);
}
.view-all-link:hover {
  color:var(--magenta-glow);
  border-color:var(--magenta-glow);
}
.view-all-link svg {
  width:13px;
  height:13px;
}
.photo-card-grid {
  gap:24px;
}
.photo-card {
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  position:relative;
  transition:transform .25s ease,box-shadow .25s ease;
}
.photo-card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(18,17,19,0.1);
}
.photo-card-img {
  aspect-ratio:4/3.2;
  overflow:hidden;
}
.photo-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo-card-num {
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  color:var(--magenta-glow);
  padding:16px 18px 0;
}
.photo-card h3 {
  font-size:17px;
  font-weight:700;
  padding:4px 18px 6px;
}
.photo-card-link {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--white);
  padding:0 18px 18px;
}
.photo-card-link svg {
  width:12px;
  height:12px;
}
.our-work-dark {
  background:#121113;
  color:var(--on-dark);
  padding:80px 0;
}
.our-work-grid {
  display:grid;
  grid-template-columns:0.85fr 1.6fr;
  gap:50px;
  align-items:center;
}
.our-work-copy .eyebrow {
  color:var(--magenta-glow);
}
.our-work-copy .eyebrow::before {
  background:var(--magenta-glow);
}
.our-work-copy .h-serif {
  color:var(--on-dark);
}
.our-work-copy p {
  color:var(--on-dark-soft);
  margin-bottom:30px;
  font-size:15px;
}
.btn-outline-light {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  border:1px solid var(--magenta-glow);
  color:var(--on-dark);
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:background .2s ease;
}
.btn-outline-light:hover {
  background:rgba(224,18,127,0.15);
}
.btn-outline-light svg {
  width:14px;
  height:14px;
}
.our-work-bento .bento-tile {
  background:#1c1b1e;
}
.our-work-bento .bento-label {
  opacity:1;
  bottom:18px;
}
.our-work-bento .bento-tile::after {
  opacity:1;
}
.our-work-bento .bento-label .num {
  display:block;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--magenta-glow);
  margin-bottom:4px;
}
.our-work-bento .bento-label .name {
  font-size:14px;
  font-weight:700;
  color:#fff;
}
.cta-band {
  position:relative;
  color:var(--on-dark);
  padding:76px 0;
  text-align:left;
  border:none;
  overflow:hidden;
  isolation:isolate;
}
.cta-band::before {
  content:"";
  position:absolute;
  inset:-20px;
  background-image:url('../images/hero-bg.jpg');
  background-size:cover;
  background-position:center;
  filter:blur(10px);
  transform:scale(1.08);
  z-index:-2;
}
.cta-band::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(12,9,12,0.72);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:-1;
}
.cta-band .wrap {
  position:relative;
  z-index:1;
}
.cta-band-grid {
  display:grid;
  grid-template-columns:1.3fr auto 1fr;
  gap:40px;
  align-items:center;
}
.cta-band .eyebrow {
  color:var(--magenta-glow);
}
.cta-band .eyebrow::before {
  background:var(--magenta-glow);
}
.cta-band h2 {
  font-family:var(--font-body);
  font-size:clamp(32px,4.2vw,52px);
  font-weight:700;
  color:var(--on-dark);
  margin-bottom:14px;
  line-height:1.15;
}
.cta-band h2 em {
  font-style:italic;
  color:var(--magenta-glow);
}
.cta-band p {
  color:var(--on-dark-soft);
  font-size:15px;
  font-weight:400;
}
.cta-band-divider {
  width:1px;
  align-self:stretch;
  background:var(--line-dark);
}
.cta-band-actions {
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
}
.cta-band-actions .btn {
  width:100%;
  justify-content:center;
}
.cta-band-actions .btn-ghost {
  color:var(--on-dark);
  border-color:rgba(247,242,245,0.3);
}
.cta-band-actions .btn-ghost:hover {
  border-color:rgba(247,242,245,0.6);
}
.cta-band-tag {
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-soft);
  margin-top:4px;
}
section {
  padding:70px 0;
}
section.alt {
  background:var(--panel);
}
.section-head {
  max-width:620px;
  margin-bottom:44px;
}
.section-head h2 {
  font-size:clamp(26px,3.4vw,38px);
  font-weight:700;
  line-height:1.25;
  margin-bottom:14px;
}
.section-head h2 span {
  color:var(--magenta-glow);
}
.section-head p {
  color:var(--white-soft);
  font-weight:300;
  font-size:15px;
}
.grid {
  display:grid;
  gap:26px;
}
.grid-2 {
  grid-template-columns:1fr 1fr;
}
.grid-3 {
  grid-template-columns:repeat(3,1fr);
}
.grid-4 {
  grid-template-columns:repeat(4,1fr);
}
.card {
  background:#ffffff;
  border:1px solid #ece3e9;
  border-radius:16px;
  padding:30px 26px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  box-shadow:0 2px 14px rgba(28,20,32,0.04);
  --white:#1c1420;
  --white-soft:rgba(28,20,32,0.62);
  --line:#ece3e9;
  color:var(--white);
}
.card:hover {
  transform:translateY(-4px);
  border-color:rgba(224,18,127,0.35);
  box-shadow:0 14px 28px rgba(28,20,32,0.08);
}
.card .icon {
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(224,18,127,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  color:var(--magenta-glow);
}
.card .icon svg {
  width:22px;
  height:22px;
}
.card h3 {
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:.01em;
}
.card p {
  color:var(--white-soft);
  font-size:14px;
  font-weight:300;
}
.card a.card-link {
  display:inline-block;
  margin-top:16px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--magenta-glow);
  font-weight:700;
}
.stats-band {
  background:linear-gradient(100deg,var(--magenta) 0%,var(--magenta-glow) 100%);
  padding:40px 0;
}
.stats-band .grid-4 {
  gap:20px;
  text-align:center;
}
.stats-band .stat b {
  display:block;
  font-size:clamp(26px,4vw,40px);
  font-weight:800;
}
.stats-band .stat span {
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.85;
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
.step {
  position:relative;
  padding-left:0;
}
.step .icon {
  width:46px;
  height:46px;
  border-radius:12px;
  background:rgba(224,18,127,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--magenta-glow);
}
.step .icon svg {
  width:22px;
  height:22px;
}
.step .num {
  font-size:13px;
  font-weight:800;
  color:var(--magenta-glow);
  letter-spacing:.1em;
  margin-bottom:10px;
}
.step h3 {
  font-size:16px;
  font-weight:700;
  margin-bottom:8px;
  text-transform:uppercase;
}
.step p {
  font-size:13.5px;
  color:var(--white-soft);
  font-weight:300;
}
.accordion-item {
  border:1px solid #ece3e9;
  border-radius:14px;
  margin-bottom:14px;
  background:#ffffff;
  overflow:hidden;
  --white:#1c1420;
  --white-soft:rgba(28,20,32,0.62);
  --line:#ece3e9;
  color:var(--white);
}
.accordion-item summary {
  list-style:none;
  cursor:pointer;
  padding:22px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:700;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.accordion-item summary::-webkit-details-marker {
  display:none;
}
.accordion-item summary .s-left {
  display:flex;
  align-items:center;
  gap:16px;
}
.accordion-item summary .s-icon {
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:10px;
  background:rgba(224,18,127,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--magenta-glow);
}
.accordion-item summary .s-icon svg {
  width:18px;
  height:18px;
}
.accordion-item summary .chev {
  width:22px;
  height:22px;
  flex-shrink:0;
  transition:transform .25s ease;
  color:var(--white-soft);
}
.accordion-item[open] summary .chev {
  transform:rotate(180deg);
}
.accordion-body {
  padding:0 26px 26px 80px;
  color:var(--white-soft);
  font-weight:300;
  font-size:14.5px;
}
.accordion-body p {
  margin-bottom:14px;
}
.accordion-body ul {
  margin-top:6px;
}
.accordion-body li {
  position:relative;
  padding-left:18px;
  margin-bottom:8px;
}
.accordion-body li::before {
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--magenta-glow);
}
.service-hero-split {
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:54px;
  align-items:center;
}
.service-image-placeholder {
  aspect-ratio:4/3.1;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--line-dark);
}
.service-image-placeholder img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.service-related {
  margin-top:10px;
}
.service-related a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--magenta-glow);
}
.bento-row {
  display:grid;
  gap:24px;
  margin-bottom:24px;
}
.bento-row-2 {
  grid-template-columns:1fr 1fr;
}
.bento-row-3 {
  grid-template-columns:repeat(3,1fr);
}
.bento-tile {
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#1c1420;
  cursor:pointer;
}
.bento-row-2 .bento-tile {
  aspect-ratio:1.32/1;
}
.bento-row-3 .bento-tile {
  aspect-ratio:1.05/1;
}
.bento-tile img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.bento-tile:hover img {
  transform:scale(1.06);
}
.bento-tile::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(6,4,7,0.85) 0%,rgba(6,4,7,0.25) 48%,transparent 72%);
  opacity:0;
  transition:opacity .35s ease;
}
.bento-tile:hover::after {
  opacity:1;
}
.bento-label {
  position:absolute;
  left:22px;
  right:22px;
  bottom:-30px;
  z-index:2;
  opacity:0;
  transition:bottom .35s ease,opacity .35s ease;
}
.bento-tile:hover .bento-label {
  bottom:20px;
  opacity:1;
}
.bento-label .loc {
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.8);
  margin-bottom:5px;
  font-weight:600;
}
.bento-label .name {
  font-family:var(--font-heading);
  font-size:clamp(18px,2vw,24px);
  font-weight:700;
  color:#fff;
}
.portfolio-tile {
  border-radius:16px;
  overflow:hidden;
  position:relative;
  aspect-ratio:4/3;
  border:1px solid var(--line);
  background:var(--panel);
  display:flex;
  align-items:flex-end;
  padding:22px;
  --white:#1c1420;
  --white-soft:rgba(28,20,32,0.62);
}
.portfolio-tile .tile-icon {
  position:absolute;
  top:22px;
  left:22px;
  width:44px;
  height:44px;
  border-radius:12px;
  background:rgba(224,18,127,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--magenta-glow);
}
.portfolio-tile .tile-icon svg {
  width:20px;
  height:20px;
}
.portfolio-tile .tile-label {
  position:relative;
  z-index:1;
}
.portfolio-tile .tile-label b {
  display:block;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:4px;
  color:var(--white);
}
.portfolio-tile .tile-label span {
  font-size:12px;
  color:var(--white-soft);
}
.portfolio-note {
  margin-top:30px;
  padding:18px 22px;
  border:1px dashed rgba(28,20,32,0.2);
  border-radius:12px;
  font-size:13px;
  color:var(--white-soft);
}
.filter-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:34px;
}
.filter-tabs button {
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--white-soft);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s ease;
}
.filter-tabs button.active,.filter-tabs button:hover {
  background:var(--magenta-glow);
  border-color:var(--magenta-glow);
  color:#fff;
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:start;
}
.form-narrow {
  max-width:600px;
  margin:0 auto;
}
.quote-card {
  background:linear-gradient(155deg,#0b0709 0%,#150d10 100%);
  border-radius:22px;
  padding:50px 46px;
  gap:50px;
  align-items:center;
  --white:var(--on-dark);
  --white-soft:var(--on-dark-soft);
  --line:var(--line-dark);
  color:var(--white);
}
.quote-card .checklist {
  margin-top:22px;
}
.quote-card .checklist li::before {
  background:rgba(224,18,127,0.18);
}
@media (max-width:600px) {
.quote-card {
  padding:34px 24px;
  border-radius:18px;
}
}
.form-field {
  margin-bottom:18px;
}
.form-field label {
  display:block;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--white-soft);
  margin-bottom:8px;
}
.form-field input,.form-field select,.form-field textarea {
  width:100%;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid #ece3e9;
  background:#ffffff;
  color:#1c1420;
  font-family:inherit;
  font-size:14px;
}
.form-field textarea {
  resize:vertical;
  min-height:120px;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus {
  outline:none;
  border-color:var(--magenta-glow);
}
.form-status {
  margin-top:14px;
  font-size:13px;
  display:none;
}
.form-status.show {
  display:block;
}
.form-status.ok {
  color:#4ade80;
}
.form-status.err {
  color:#f87171;
}
.contact-info-card {
  background:#ffffff;
  border:1px solid #ece3e9;
  border-radius:16px;
  padding:30px;
  margin-bottom:24px;
  --white:#1c1420;
  --white-soft:rgba(28,20,32,0.62);
  --line:#ece3e9;
  color:var(--white);
}
.contact-info-row {
  display:flex;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.contact-info-row:last-child {
  border-bottom:none;
}
.contact-info-row .ci-icon {
  width:38px;
  height:38px;
  flex-shrink:0;
  border-radius:10px;
  background:rgba(224,18,127,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--magenta-glow);
}
.contact-info-row .ci-icon svg {
  width:18px;
  height:18px;
}
.contact-info-row b {
  display:block;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:3px;
  color:var(--white);
}
.contact-info-row span {
  font-size:13.5px;
  color:var(--white-soft);
}
.map-embed {
  width:100%;
  height:340px;
  border:0;
  border-radius:16px;
}
footer.site-footer {
  background:#0b0709;
  padding:60px 0 26px;
  border-top:1px solid var(--line-dark);
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  margin-bottom:44px;
}
.footer-brand {
  margin-bottom:18px;
}
.footer-brand img {
  height:66px;
  width:auto;
}
.footer-socials {
  display:flex;
  gap:12px;
  margin-top:20px;
}
.footer-socials a {
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  color:var(--on-dark-soft);
  transition:all .2s ease;
}
.footer-socials a svg {
  width:16px;
  height:16px;
}
.footer-socials a:hover {
  color:var(--on-dark);
  border-color:var(--magenta-glow);
  background:rgba(224,18,127,0.15);
}
.footer-col p {
  color:var(--on-dark-soft);
  font-size:13.5px;
  font-weight:400;
  margin-bottom:8px;
}
.footer-col h4 {
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--magenta-glow);
  font-weight:800;
  margin-bottom:20px;
}
.footer-col li {
  margin-bottom:13px;
}
.footer-col a {
  font-size:14.5px;
  font-weight:700;
  color:var(--on-dark);
  transition:color .2s ease;
}
.footer-col a:hover {
  color:var(--magenta-glow);
}
.footer-contact-list li {
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.footer-contact-list svg {
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:3px;
  color:var(--magenta-glow);
}
.footer-contact-list span {
  font-size:14.5px;
  font-weight:700;
  color:var(--on-dark);
}
.footer-bottom {
  border-top:1px solid var(--line-dark);
  padding-top:22px;
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  font-size:12.5px;
  font-weight:600;
  color:var(--on-dark);
}
.quick-contact {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.quick-contact a {
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.45);
  color:#fff;
}
.quick-contact a svg {
  width:24px;
  height:24px;
}
.quick-contact .qc-call,
.quick-contact .qc-mail {
  background:#121113;
  border:1.5px solid var(--magenta-glow);
  color:#fff;
}
.quick-contact .qc-wa {
  background:linear-gradient(120deg,var(--magenta-glow),var(--magenta-bright));
}
@media (max-width:1024px) {
.grid-4 {
  grid-template-columns:repeat(2,1fr);
}
.grid-3 {
  grid-template-columns:repeat(2,1fr);
}
.steps {
  grid-template-columns:repeat(2,1fr);
}
.footer-grid {
  grid-template-columns:1fr 1fr;
}
.timeline {
  grid-template-columns:repeat(2,1fr);
  row-gap:40px;
}
.our-work-grid {
  grid-template-columns:1fr;
  gap:36px;
}
.our-work-copy {
  text-align:center;
}
.our-work-copy .eyebrow {
  justify-content:center;
}
.cta-band-grid {
  grid-template-columns:1fr;
  text-align:center;
  gap:28px;
}
.cta-band-divider {
  display:none;
}
.cta-band-actions {
  align-items:center;
}
.photo-card-grid {
  grid-template-columns:repeat(2,1fr);
}
}
@media (max-width:860px) {
.nav-divider {
  display:none;
}
.how-it-works-head {
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.how-it-works-divider {
  display:none;
}
.section-head-row {
  flex-direction:column;
  align-items:flex-start;
}
.bento-row-2,.bento-row-3 {
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
.bento-row-2 .bento-tile,.bento-row-3 .bento-tile {
  aspect-ratio:1/1;
}
.bento-tile::after {
  opacity:1;
  background:linear-gradient(0deg,rgba(6,4,7,0.82) 0%,rgba(6,4,7,0.1) 55%,transparent 75%);
}
.bento-label {
  bottom:14px;
  opacity:1;
  left:14px;
  right:14px;
}
.bento-label .name {
  font-size:14px;
}
.bento-label .loc {
  font-size:9px;
}
nav.main-nav {
  position:fixed;
  top:73px;
  left:0;
  right:0;
  bottom:0;
  background:#ffffff;
  flex-direction:column;
  align-items:flex-start;
  padding:20px 6vw 30px;
  border-bottom:1px solid var(--line);
  gap:0;
  transform:translateY(-140%);
  transition:transform .3s ease;
  overflow-y:auto;
}
nav.main-nav.open {
  transform:translateY(0);
}
nav.main-nav > a {
  padding:14px 0;
  width:100%;
  border-bottom:1px solid var(--line);
}
.nav-item-dropdown {
  width:100%;
}
.dropdown-trigger {
  padding:14px 0;
  width:100%;
  border-bottom:1px solid var(--line);
  justify-content:space-between;
}
.dropdown-menu {
  position:static;
  transform:none;
  opacity:1;
  visibility:visible;
  display:block;
  width:100%;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:6px 0 10px 14px;
  border-bottom:1px solid var(--line);
}
.dropdown-menu a {
  padding:10px 6px;
}
.dropdown-view-all {
  border-top:none;
  margin-top:0;
}
.nav-socials {
  margin-top:18px;
}
.nav-cta {
  margin-top:14px;
  width:100%;
  justify-content:center;
}
.nav-toggle {
  display:flex;
}
.grid-2 {
  grid-template-columns:1fr;
}
.contact-grid {
  grid-template-columns:1fr;
}
.service-hero-split {
  grid-template-columns:1fr;
  gap:34px;
}
.about-split {
  grid-template-columns:1fr;
  gap:34px;
}
.about-split .visual {
  order:-1;
}
.accordion-body {
  padding-left:26px;
}
.home-hero {
  background-image:url('../images/hero-bg-mobile.jpg');
  background-position:center top;
  min-height:auto;
  padding:70px 0 50px;
}
.home-hero .wrap {
  grid-template-columns:1fr;
  gap:40px;
}
.home-hero .hero-copy {
  text-align:center;
}
.home-hero .eyebrow {
  justify-content:center;
}
.home-hero h1 {
  text-align:center;
}
.home-hero p.lead {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.hero-btns {
  justify-content:center;
}
.glass-form-card {
  padding:28px 22px;
}
}
@media (max-width:600px) {
.grid-4 {
  grid-template-columns:1fr 1fr;
}
.grid-3 {
  grid-template-columns:1fr;
}
.steps {
  grid-template-columns:1fr;
}
.footer-grid {
  grid-template-columns:1fr;
  gap:30px;
}
section {
  padding:50px 0;
}
.timeline {
  grid-template-columns:1fr;
  gap:34px;
}
.timeline-dot {
  display:none;
}
.timeline-line {
  display:none;
}
.photo-card-grid {
  grid-template-columns:1fr;
}
.page-hero {
  padding:50px 0 40px;
}
.brand-logo {
  height:36px;
}
.nav-row {
  padding:12px 5vw;
}
nav.main-nav {
  top:61px;
}
.bento-row-3 {
  grid-template-columns:1fr;
}
}
/* ==========================================================================
   HOME REDESIGN — premium industrial editorial
   Colours are unchanged (pink accent, white base). New tokens are additive.
   ========================================================================== */
:root{
  --fs-hero:clamp(44px,6.2vw,88px);
  --fs-h2:clamp(32px,4vw,54px);
  --fs-lead:clamp(16.5px,1.25vw,18px);
  --sec-pad:clamp(72px,9.5vw,144px);
  --max-wide:1320px;
  --hair:rgba(18,17,19,.14);
  --hair-dark:rgba(255,255,255,.16);
  --r-sm:4px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--magenta-glow);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap-wide{max-width:var(--max-wide)}
.sec{padding:var(--sec-pad) 0}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
.col-5{grid-column:span 5}
.col-7{grid-column:span 7}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.sec-head-copy{max-width:780px}
.sec-head-copy .h-serif{margin-bottom:16px}
.sec-head-note{font-size:var(--fs-lead);color:var(--white-soft);max-width:340px;line-height:1.6}
.h-serif{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.012em}
.section-lead{font-size:var(--fs-lead);line-height:1.7;max-width:56ch;color:var(--white-soft);margin-bottom:0}
.craft-copy .section-lead{margin-bottom:22px}

/* ---- Scroll reveal (content is never hidden without JS or if main.js fails) ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out) var(--d,0s),transform .9s var(--ease-out) var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}
html.reveal-fallback:not([data-ready]) .reveal{opacity:1;transform:none}
@keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- Buttons / links ---- */
.btn{transition:transform .25s var(--ease-out),box-shadow .25s ease,background .2s ease,border-color .2s ease}
.link-underline{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:inherit;padding-bottom:5px}
.link-underline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right center;transition:transform .5s var(--ease-out)}
.link-underline:hover{color:var(--magenta-glow)}
.link-underline:hover::after{transform:scaleX(0)}
.link-underline svg{width:13px;height:13px}
.view-all-link{transition:color .2s ease,border-color .2s ease}

/* ---- Nav: hover underline sweep ---- */
nav.main-nav > a::after,.dropdown-trigger::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--magenta-glow);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-out)}
.dropdown-trigger{position:relative}
nav.main-nav > a:hover::after,.dropdown-trigger:hover::after,nav.main-nav > a.active::after,.dropdown-trigger.active::after{transform:scaleX(1)}
.nav-item-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---- Header: transparent over the hero, solid + blur after scroll (home only) ----
   The blur lives on ::before so no ancestor of the fixed mobile menu gets a filter. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);opacity:0;transition:opacity .35s ease;pointer-events:none}
.brand{transition:background .35s ease,padding .35s ease}
body.home .site-header{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;box-shadow:none;transition:border-color .35s ease,box-shadow .35s ease}
body.home .site-header.is-scrolled,body.home.nav-open .site-header{border-bottom-color:var(--line);box-shadow:0 2px 18px rgba(18,17,19,.06)}
body.home .site-header.is-scrolled::before,body.home.nav-open .site-header::before{opacity:1}
body.home .nav-row{max-width:var(--max-wide)}
body.home:not(.nav-open) .site-header:not(.is-scrolled){--white:#fff;--white-soft:rgba(255,255,255,.78);--line:rgba(255,255,255,.3)}
body.home .dropdown-menu{--white:#121113;--white-soft:rgba(18,17,19,.68);--line:rgba(18,17,19,.1)}
body.home:not(.nav-open) .site-header:not(.is-scrolled) .nav-socials a{background:transparent;border-color:rgba(255,255,255,.6)}
body.home:not(.nav-open) .site-header:not(.is-scrolled) .brand{background:#fff;padding:6px 12px;border-radius:8px}

/* ---- Hero ---- */
.home-hero{position:relative;min-height:100vh;min-height:100svh;padding:clamp(112px,14vh,150px) 0 96px;display:flex;align-items:center;background:#0b0709;background-image:none;color:var(--on-dark);overflow:hidden}
.home-hero::before{content:none}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{position:absolute;left:0;top:-6%;width:100%;height:112%;max-width:none;object-fit:cover;object-position:center;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,9,.55) 0%,rgba(8,6,9,0) 24%),linear-gradient(0deg,rgba(8,6,9,.7) 0%,rgba(8,6,9,0) 34%),rgba(8,6,9,.5)}
.hero-grain{position:absolute;inset:0;z-index:1;background-image:var(--grain);pointer-events:none}
.home-hero .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(32px,5vw,88px);align-items:center;width:100%}
.hero-copy{text-align:left;padding-top:0}
.home-hero .hero-title{font-size:var(--fs-hero);line-height:.98;letter-spacing:-.03em;font-weight:800;text-transform:uppercase;margin:6px 0 clamp(20px,2.6vw,32px);color:#fff;text-align:left}
.hero-title .line{display:block;overflow:hidden;padding:.04em 0 .09em}
.hero-title .line-inner{display:block;color:#fff}
.hero-title .accent{color:var(--magenta-glow)}
.home-hero p.lead{font-size:var(--fs-lead);line-height:1.65;max-width:52ch;margin:0 0 32px;color:rgba(255,255,255,.88);text-align:left;text-shadow:none}
.home-hero .hero-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .hero-title .line-inner{animation:lineUp 1.05s var(--ease-out) both}
  .hero-title .line:nth-child(2) .line-inner{animation-delay:.14s}
  .hero-fx{animation:fadeUp .9s var(--ease-out) both;animation-delay:var(--fx,.5s)}
}
.hero-marquee{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid var(--hair-dark);background:rgba(8,6,9,.42);overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee-track ul{display:flex;flex-shrink:0;list-style:none;margin:0;padding:0}
.marquee-track li{display:flex;align-items:center;padding:19px 0;white-space:nowrap;font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.marquee-track li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--magenta-glow);margin:0 clamp(24px,3vw,44px)}

/* ---- Proof strip ---- */
.proof{padding:0;border-bottom:1px solid var(--hair);background:#fff}
.proof-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0}
.proof-row li{padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,44px);border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:10px}
.proof-row li:first-child{border-left:none;padding-left:0}
.proof-fig{font-family:var(--font-body);font-size:clamp(21px,2.1vw,28px);font-weight:700;line-height:1.15;color:var(--white)}
.proof-cap{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--white-soft)}

/* ---- Services tiles ---- */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.svc-tile{position:relative;display:flex;flex-direction:column;border-radius:var(--r-sm);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 2px 14px rgba(18,17,19,.05);transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .3s ease}
.svc-tile:hover,.svc-tile:focus-visible{transform:translateY(-4px);box-shadow:0 20px 36px rgba(18,17,19,.12);border-color:rgba(224,18,127,.25)}
.svc-tile-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:#1a1719;isolation:isolate}
.svc-tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.svc-body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.8vw,24px)}
.svc-num{display:block;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--magenta-glow);margin-bottom:10px}
.svc-name{font-family:var(--font-body);font-size:clamp(20px,1.7vw,24px);font-weight:700;line-height:1.2;color:var(--white);margin-bottom:8px}
.svc-desc{font-size:13.5px;line-height:1.55;color:var(--white-soft);margin:0}
.svc-line{display:block;height:2px;width:36px;background:var(--magenta-glow);margin-top:18px;transition:width .6s var(--ease-out)}
.svc-tile:hover .svc-tile-img img,.svc-tile:focus-visible .svc-tile-img img{transform:scale(1.06)}
.svc-tile:hover .svc-line,.svc-tile:focus-visible .svc-line{width:100%}

/* ---- Process stepper (progressive enhancement: static grid by default) ---- */
.process-nav{display:none}
.process-stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.process-step figure{position:relative;margin:0 0 20px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);background:#e9eaec}
.process-step figure img{width:100%;height:100%;object-fit:cover}
.ps-num{font-family:var(--font-body);font-size:44px;font-weight:700;line-height:1;color:var(--magenta-glow);margin-bottom:10px}
.process-step h3{font-size:20px;margin-bottom:8px}
.process-step p{font-size:15px;color:var(--white-soft);margin:0}
.process.is-enhanced .process-track{height:calc(100vh + (var(--steps) - 1) * 62vh)}
.process.is-enhanced .process-sticky{position:sticky;top:0;height:100vh;padding:104px 0 32px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.process.is-enhanced .sec-head{margin-bottom:clamp(18px,3vh,36px)}
.process.is-enhanced .h-serif{font-size:clamp(34px,4vw,52px)}
.process.is-enhanced .process-nav{display:block;position:relative;border-top:1px solid var(--hair);margin-bottom:clamp(20px,3.4vh,40px)}
.process-nav-fill{position:absolute;top:-1px;left:0;height:2px;background:var(--magenta-glow);width:calc(var(--progress,0) * 100%)}
.process-nav ol{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0;padding:0}
.process-nav li{display:flex;gap:12px;align-items:baseline;padding-top:16px;color:var(--white-soft);transition:color .4s ease}
.pn-num{font-family:var(--font-body);font-size:15px;font-weight:700}
.pn-label{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}
.process-nav li.is-done,.process-nav li.is-active{color:var(--white)}
.process-nav li.is-active .pn-num{color:var(--magenta-glow)}
.process.is-enhanced .process-stage{position:relative;display:block;height:clamp(300px,48vh,480px)}
.process.is-enhanced .process-step{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:center;opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.process.is-enhanced .process-step.is-active{opacity:1;pointer-events:auto;transform:none}
.process.is-enhanced .process-step figure{margin:0;height:100%;aspect-ratio:auto}
.process.is-enhanced .ps-num{font-size:clamp(56px,7vw,96px)}
.process.is-enhanced .process-step h3{font-family:var(--font-body);font-size:clamp(26px,2.6vw,38px);margin-bottom:12px}
.process.is-enhanced .process-step p{font-size:var(--fs-lead);max-width:34ch}

/* ---- Workshop / craft ---- */
.craft-grid{align-items:center;row-gap:48px}
.craft-founder{font-family:var(--font-body);font-style:italic;font-size:clamp(20px,1.9vw,26px);line-height:1.35;color:var(--white);margin:0 0 26px;padding-left:18px;border-left:2px solid var(--magenta-glow)}
.craft-founder strong{font-weight:700}
.craft-collage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:12px;aspect-ratio:6/7}
.craft-collage figure{margin:0;overflow:hidden;border-radius:var(--r-sm);background:#e9eaec}
.craft-collage img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.craft-collage figure:hover img{transform:scale(1.05)}
.c-a{grid-column:1/4;grid-row:1/6}
.c-b{grid-column:4/7;grid-row:2/5}
.c-c{grid-column:4/6;grid-row:5/9}
.c-d{grid-column:1/4;grid-row:6/9}
.craft-caption{grid-column:4/7;grid-row:1/2;align-self:end;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--white-soft)}
.checklist-v2 li::before,.checklist-v2 li::after{content:none}

/* ---- Projects ---- */
.filter-bar{display:none;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.4vw,44px)}
.js .filter-bar{display:flex}
.filter-btn{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--hair);background:#fff;color:var(--white);border-radius:999px;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.filter-btn:hover{border-color:var(--white)}
.filter-btn.is-active{background:var(--white);color:#fff;border-color:var(--white)}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.6vw,40px) clamp(16px,2vw,28px);list-style:none;margin:0;padding:0}
.project[hidden]{display:none}
.project:not([hidden]){animation:fadeUp .6s var(--ease-out) both}
.project-media{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm);background:#e9eaec}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.project:hover .project-media img{transform:scale(1.06)}
.project-tag{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(18,17,19,.86);color:#fff;padding:5px 9px;border-radius:2px}
.project-cap{padding-top:16px}
.project-cap h3{font-family:var(--font-body);font-size:22px;font-weight:700;margin-bottom:4px}
.project-cap p{font-size:13.5px;letter-spacing:.02em;color:var(--white-soft);margin:0}

/* ---- Final CTA (home) ---- */
.cta-band-home .cta-band-grid{align-items:center}
.cta-meta{margin-top:28px;padding-top:22px;border-top:1px solid var(--hair-dark);display:grid;gap:12px;list-style:none}
.cta-meta li{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:600;color:rgba(255,255,255,.88)}
.cta-meta svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--magenta-glow)}
.cta-meta .placeholder{opacity:.72;font-style:italic;font-weight:500}
.cta-band-actions .link-underline{color:#fff;margin-top:6px;align-self:flex-start}

/* ---- Grain on the dark surfaces only ---- */
.cta-band::after{background-image:var(--grain)}
footer.site-footer{background-image:var(--grain)}

/* ---- Footer map ---- */
.footer-map{margin:clamp(32px,4vw,56px) 0 clamp(28px,3vw,40px);border:1px solid var(--line-dark);border-radius:var(--r-sm);overflow:hidden;height:clamp(200px,24vw,280px);background:#151214}
.footer-map iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.95)}

/* ---- Full-screen mobile menu ---- */
.nav-toggle span{transition:transform .35s var(--ease-out),opacity .2s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open{overflow:hidden}
body.nav-open .quick-contact{opacity:0;pointer-events:none}

/* ==================== Responsive ==================== */
@media (max-width:1100px){
  .home-hero .hero-inner{grid-template-columns:minmax(0,1fr) 360px}
}
@media (max-width:1024px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-5,.col-7{grid-column:span 12}
  .craft-collage{max-width:680px}
  .process-stage{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .brand,.nav-toggle{position:relative;z-index:3}
  nav.main-nav{position:fixed;inset:0;top:0;left:0;right:0;bottom:0;width:auto;height:auto;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:104px 7vw 48px;transform:none;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;overflow-y:auto;z-index:2;border:0}
  nav.main-nav.open{opacity:1;visibility:visible;transform:none}
  nav.main-nav > a,.dropdown-trigger{font-family:var(--font-body);font-size:clamp(28px,8vw,36px);font-weight:700;letter-spacing:-.01em;text-transform:none;padding:14px 0;border-bottom:1px solid var(--line);width:100%;color:var(--white)}
  nav.main-nav > a.active,.dropdown-trigger.active{color:var(--magenta-glow)}
  nav.main-nav > a::after,.dropdown-trigger::after{display:none}
  .dropdown-trigger svg{width:18px;height:18px}
  .dropdown-menu a{font-size:16px;font-weight:700;padding:8px 6px;gap:14px}
  .dropdown-menu a .icon-badge{width:38px;height:38px}
  .dropdown-menu a .icon-badge svg{width:18px;height:18px}
  .nav-socials{margin-top:26px}
  .nav-cta{margin-top:16px}
  .home-hero{background-image:none;min-height:auto;padding:112px 0 84px}
  .home-hero .hero-inner{grid-template-columns:1fr;gap:40px}
  .home-hero .hero-copy,.home-hero .hero-title,.home-hero p.lead{text-align:left}
  .home-hero p.lead{margin-left:0;margin-right:0}
  .home-hero .eyebrow{justify-content:flex-start}
  .home-hero .hero-btns{justify-content:flex-start}
  .hero-media img{top:0;height:100%;transform:none;will-change:auto}
  .proof-row{grid-template-columns:1fr}
  .proof-row li,.proof-row li:first-child{border-left:none;border-top:1px solid var(--hair);padding:22px 0}
  .proof-row li:first-child{border-top:none}
  .sec-head{align-items:flex-start}
}
@media (max-width:600px){
  .process-stage{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .marquee-track li{padding:15px 0;font-size:11.5px}
}
@media (max-width:520px){
  .svc-grid{grid-template-columns:1fr}
  .svc-tile{aspect-ratio:3/2}
}

/* ==================== Reduced motion / print ==================== */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-title .line-inner,.hero-fx,.project:not([hidden]){animation:none}
  .marquee-track{animation:none}
  .hero-media img{transform:none;will-change:auto}
  .svc-tile-img img,.project-media img,.craft-collage img,.svc-line,.btn{transition:none}
}
@media print{
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ---- fixes: stepper width + title leading ---- */
.process-sticky > .wrap{width:100%}
.process-step h3{line-height:1.15}
.process.is-enhanced .process-step h3{line-height:1.12}

/* ---- fixes: proof strip proportions + workshop gutter ---- */
.proof-row{grid-template-columns:1fr 1fr 1.4fr}
.craft-grid{column-gap:clamp(40px,5vw,88px)}

/* ---- fix: 12-col grid must collapse (gaps x 11 columns overflowed phones) ---- */
@media (max-width:1024px){
  .grid-12,.craft-grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .col-5,.col-7{grid-column:auto}
}

/* ---- fix: proof strip must stack on phones (later 3-col rule had overridden it) ---- */
@media (max-width:860px){
  .proof-row{grid-template-columns:1fr}
}
@media (max-width:520px){
  .home-hero .hero-btns .btn{width:100%;justify-content:center}
}

/* ==========================================================================
   INNER PAGES + MEGA MENU (same tokens as the homepage; no new colours/fonts)
   ========================================================================== */

/* ---- Mega menu (desktop: full-width panel; mobile: accordion in the overlay) ---- */
.mega-scrim{position:fixed;inset:0;z-index:58;background:rgba(10,8,10,.32);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.mega-scrim.is-visible{opacity:1;visibility:visible;transition-delay:0s}
.mega-eyebrow{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--magenta-glow);margin:0 0 16px}
.mega-list,.mega-tiles{list-style:none;margin:0;padding:0}
.mega-name{position:relative;align-self:flex-start;font-size:15px;font-weight:800;color:var(--white);line-height:1.25}
.mega-name::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--magenta-glow);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease-out)}
.mega-link:hover .mega-name::after,.mega-link:focus-visible .mega-name::after,.mega-tile:hover .mega-name::after,.mega-tile:focus-visible .mega-name::after{transform:scaleX(1)}
.mega-desc{font-size:13px;line-height:1.45;color:var(--white-soft)}
.mega-txt{display:flex;flex-direction:column;gap:3px}
.mega-link{display:flex;gap:14px;align-items:flex-start;padding:12px 10px;border-radius:4px;transition:background .2s ease}
.mega-link:hover,.mega-link:focus-visible{background:rgba(224,18,127,.06)}
.mega-ico .icon-badge{width:40px;height:40px;border-radius:4px}
.mega-ico .icon-badge svg{width:19px;height:19px}
.mega-all{margin-top:18px}
.mega-feature{display:flex;flex-direction:column;gap:8px}
.mega-feature-img,.mega-tile-img{display:block;overflow:hidden;border-radius:var(--r-sm);background:#e9eaec}
.mega-feature-img{aspect-ratio:3/2}
.mega-tile-img{aspect-ratio:3/2;margin-bottom:6px}
.mega-feature-img img,.mega-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.mega-feature:hover img,.mega-tile:hover img{transform:scale(1.05)}
.mega-feature-name{font-family:var(--font-body);font-size:24px;font-weight:700;color:var(--white);line-height:1.15}
.mega-feature-desc{font-size:13.5px;color:var(--white-soft)}
.mega-quote{align-self:flex-start}
.mega-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mega-tile{display:flex;flex-direction:column;gap:3px}
@media (min-width:861px){
  .nav-item-dropdown{position:static}
  .dropdown-trigger::before{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:36px}
  .mega-panel{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(18,17,19,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .3s var(--ease-out),visibility 0s linear .3s;z-index:5;--white:#121113;--white-soft:rgba(18,17,19,.68);--line:rgba(18,17,19,.1)}
  .nav-item-dropdown.is-open .mega-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  html:not(.js) .nav-item-dropdown:hover .mega-panel,html:not(.js) .nav-item-dropdown:focus-within .mega-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav-item-dropdown.is-open .dropdown-trigger svg{transform:rotate(180deg)}
  .mega-inner{max-width:var(--max-wide);margin:0 auto;padding:34px 5vw 32px}
  .mega-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(32px,4vw,64px)}
  .mega-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
  .mega-col-feature{display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--line);padding-left:clamp(24px,3vw,44px)}
  .nav-item-dropdown .mega-col{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .45s var(--ease-out)}
  .nav-item-dropdown.is-open .mega-col{opacity:1;transform:none}
  .nav-item-dropdown.is-open .mega-col:nth-child(1){transition-delay:.05s}
  .nav-item-dropdown.is-open .mega-col:nth-child(2){transition-delay:.13s}
}
@media (prefers-reduced-motion:reduce){
  .mega-panel{transform:none!important;transition:opacity .2s ease,visibility 0s linear .2s}
  .nav-item-dropdown .mega-col{transform:none!important;transition:opacity .2s ease}
}

/* ---- Interior page header ---- */
.page-hero.xl{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px)}
.page-hero.xl .breadcrumb{margin-bottom:clamp(28px,4vw,48px)}
.page-title{font-size:clamp(36px,5.6vw,80px);line-height:1;letter-spacing:-.03em;font-weight:800;text-transform:uppercase;margin:6px 0 clamp(18px,2.4vw,28px);color:var(--white)}
.page-title .pt-line{display:block;overflow:hidden;padding:.04em 0 .1em;color:inherit}
.page-title .pt-inner{display:block;color:inherit}
.page-title .accent,.nf-code .accent{color:var(--magenta-glow)}
.page-hero.xl p.lead{font-size:var(--fs-lead);max-width:60ch;color:var(--white-soft);line-height:1.65}
@media (prefers-reduced-motion:no-preference){
  .page-title .pt-inner,.nf-code .pt-inner{animation:lineUp 1.05s var(--ease-out) both}
}
.ph{color:var(--white-soft);font-style:italic}
.timeline-num.ph,.timeline-step h3.ph{font-style:italic}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}

/* ---- About ---- */
.founder-grid,.story-grid,.spot-grid,.feature-grid,.detail-grid,.contact-grid-2,.policy-grid{column-gap:clamp(40px,5vw,88px);row-gap:36px}
.founder-grid,.spot-grid,.feature-grid{align-items:center}
.story-grid,.detail-grid,.contact-grid-2,.policy-grid{align-items:start}
.founder-photo,.story-photo,.feature-media,.spot-media{position:relative;display:block;margin:0;overflow:hidden;border-radius:var(--r-sm);background:#e9eaec}
.founder-photo,.story-photo{aspect-ratio:4/5}
.feature-media,.spot-media{aspect-ratio:4/3}
.founder-photo img,.story-photo img,.feature-media img,.spot-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.spot-media:hover img,.feature-media:hover img{transform:scale(1.05)}
.founder-copy .h-serif{margin-bottom:24px}
.founder-copy .craft-founder{font-size:clamp(22px,2.4vw,32px);margin-bottom:22px}
.story-photo{position:sticky;top:104px}
.story-text .h-serif{margin-bottom:26px}
.story-cols{column-count:2;column-gap:clamp(28px,3.4vw,52px)}
.story-cols p{break-inside:avoid;margin:0 0 18px;font-size:var(--fs-lead);line-height:1.75;color:var(--white-soft)}
.story-cols strong{color:var(--white)}
@media (max-width:860px){
  .about-timeline{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:30px;border-left:1px solid var(--hair);margin-left:6px}
  .about-timeline .timeline-line{display:none}
  .about-timeline .timeline-step{padding:0 0 34px}
  .about-timeline .timeline-dot{display:block;top:8px;left:-36px}
}
.principle-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.principle{padding:clamp(28px,3.4vw,48px) clamp(20px,2.6vw,40px) clamp(28px,3.4vw,48px) 0}
.principle + .principle{border-left:1px solid var(--hair);padding-left:clamp(20px,2.6vw,40px)}
.principle-num{display:block;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--magenta-glow);margin-bottom:18px}
.principle h3{font-family:var(--font-body);font-size:clamp(28px,3.2vw,46px);line-height:1.08;letter-spacing:-.01em;font-weight:700;margin-bottom:16px}
.principle p{font-size:var(--fs-lead);color:var(--white-soft);max-width:30ch;margin:0}
@media (max-width:860px){
  .principle-list{grid-template-columns:1fr}
  .principle,.principle + .principle{border-left:0;border-top:1px solid var(--hair);padding:28px 0}
  .principle:first-child{border-top:0}
}
.craft-collage figure{position:relative}
.craft-collage .project-tag,.founder-photo .project-tag,.story-photo .project-tag,.feature-media .project-tag,.spot-media .project-tag,.svc-hero-visual .project-tag,.svc-tile-img .project-tag,.process-step figure .project-tag{z-index:3}
.proof.numbers .numbers-title{padding-top:clamp(56px,7vw,104px);margin:0 0 clamp(8px,1vw,16px)}
.proof-row.is-four{grid-template-columns:1fr 1fr 1.4fr 1fr}
@media (max-width:1024px){
  .proof-row.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-row.is-four li{border-left:0;border-top:1px solid var(--hair);padding-left:0}
}
@media (max-width:600px){.proof-row.is-four{grid-template-columns:1fr}}
.spec-grid{column-gap:clamp(40px,5vw,88px);row-gap:56px}
.h-serif.h-sm{font-size:clamp(26px,2.8vw,36px)}
.spec-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--hair)}
.spec-list li{padding:18px 0;border-bottom:1px solid var(--hair)}
.spec-list strong{display:block;font-size:16px;margin-bottom:4px;color:var(--white)}
.spec-list span{font-size:14.5px;color:var(--white-soft);line-height:1.6}

/* ---- Marquee band + cross-link band ---- */
.marquee-band{position:relative;overflow:hidden;background:#0b0709;background-image:var(--grain);border-top:1px solid var(--hair-dark);border-bottom:1px solid var(--hair-dark)}
.xlink-band{border-bottom:1px solid var(--hair);background:#fff}
.xlink-inner{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-top:clamp(36px,4.4vw,60px);padding-bottom:clamp(36px,4.4vw,60px)}
.xlink-title{font-family:var(--font-body);font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.15;margin-bottom:8px}
.xlink-inner p{color:var(--white-soft);font-size:var(--fs-lead);max-width:62ch;margin:0}

/* ---- Services + service detail ---- */
.spot-copy .h-serif{margin-bottom:18px}
.spot-copy p{font-size:var(--fs-lead);color:var(--white-soft);margin:0 0 26px;max-width:46ch}
.svc-grid.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-grid.is-two .svc-tile{aspect-ratio:3/2}
.svc-grid.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.svc-grid.is-two{grid-template-columns:1fr}.svc-grid.is-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.svc-grid.is-three{grid-template-columns:1fr}}
.detail-visual{padding:clamp(28px,4vw,56px) 0 0}
.svc-hero-visual{position:relative;margin:0;aspect-ratio:21/9;overflow:hidden;border-radius:var(--r-sm);background:#e9eaec}
.svc-hero-visual img{width:100%;height:100%;object-fit:cover}
.detail-copy .h-serif{margin-bottom:18px}
.detail-copy .section-lead{max-width:60ch;margin-bottom:28px}
.facts-card{position:sticky;top:104px;border:1px solid var(--hair);border-radius:var(--r-sm);padding:clamp(22px,2.4vw,34px);background:#fff;align-self:start}
.facts-card h2{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--magenta-glow);margin-bottom:6px}
.facts-list{margin:0}
.facts-list > div{padding:14px 0;border-bottom:1px solid var(--hair)}
.facts-list dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--white-soft);margin-bottom:4px}
.facts-list dd{margin:0;font-size:15px;color:var(--white);line-height:1.5}
.facts-list dd.ph{color:var(--white-soft);font-style:italic}
.facts-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.facts-actions .btn{justify-content:center;width:100%}

/* ---- Portfolio ---- */
.portfolio-main{padding:0}
.filter-sticky{position:sticky;top:85px;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);padding:14px 0}
html:not(.js) .filter-sticky{display:none}
.filter-sticky .filter-bar{margin:0}
.portfolio-body{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(56px,7vw,104px)}
.masonry{column-count:3;column-gap:clamp(16px,2vw,28px);list-style:none;margin:0;padding:0}
.masonry .project{display:block;break-inside:avoid;margin:0 0 clamp(22px,2.4vw,34px)}
.masonry .project[hidden]{display:none}
.project-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;font:inherit;color:inherit}
.project-open .project-media{display:block}
.project-media.is-tall{aspect-ratio:3/4}
.project-media.is-wide{aspect-ratio:4/3}
.project-media.is-sq{aspect-ratio:1/1}
.portfolio-note{margin-top:clamp(28px,4vw,48px);padding:16px 20px;border:1px dashed var(--hair);border-radius:var(--r-sm);font-size:13.5px;color:var(--white-soft)}
@media (max-width:1024px){.masonry{column-count:2}}
@media (max-width:600px){
  .masonry{column-count:1}
  .filter-sticky{top:61px}
  .filter-sticky .filter-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .filter-sticky .filter-btn{flex:0 0 auto}
}
.lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:100%;margin:auto;color:#fff;overflow:visible}
.lightbox::backdrop{background:rgba(10,8,10,.86)}
.lb-figure{position:relative;margin:0}
.lb-figure img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:var(--r-sm);background:#1a1719}
.lb-cap{display:flex;justify-content:space-between;gap:16px;padding-top:14px;font-size:14px;color:rgba(255,255,255,.86)}
.lb-cap strong{display:block;font-family:var(--font-body);font-size:20px;color:#fff}
.lb-btn{position:absolute;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(18,17,19,.65);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.lb-btn:hover{background:var(--magenta-glow);border-color:var(--magenta-glow)}
.lb-btn svg{width:20px;height:20px}
.lb-close{top:-58px;right:0}
.lb-prev{left:12px;top:calc(50% - 46px)}
.lb-next{right:12px;top:calc(50% - 46px)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.feature-copy .h-serif{margin-bottom:16px}
.feature-copy .result{border-top:1px solid var(--hair);padding-top:18px;margin-top:22px}

/* ---- Contact ---- */
.form-title{font-family:var(--font-body);font-size:clamp(26px,2.8vw,38px);font-weight:700;margin-bottom:8px}
.form-help{font-size:13px;color:var(--white-soft);margin:6px 0 20px}
.form-field .form-help{margin:6px 0 0}
.req{color:var(--magenta-glow);font-weight:800}
.contact-form .form-field{margin-bottom:20px}
.contact-form .form-field label .opt{text-transform:none;letter-spacing:0;opacity:.7}
.contact-form .form-field input,.contact-form .form-field select,.contact-form .form-field textarea{border:1px solid var(--hair);border-radius:4px;padding:14px 16px;font-size:15px}
.contact-form .form-field input[type="file"]{padding:12px 14px;background:#fafafa}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:600px){.form-row-2{grid-template-columns:1fr}}
.field-error{margin:6px 0 0;font-size:12.5px;font-weight:700;color:#c62828}
.form-field.is-invalid input,.form-field.is-invalid select,.form-field.is-invalid textarea{border-color:#c62828}
.contact-form .form-status.show{padding:14px 16px;border-radius:4px;border:1px solid;margin-top:18px;font-weight:600}
.contact-form .form-status.ok{color:#15803d;border-color:rgba(21,128,61,.35);background:rgba(21,128,61,.06)}
.contact-form .form-status.err{color:#b91c1c;border-color:rgba(185,28,28,.35);background:rgba(185,28,28,.05)}
.contact-card{border:1px solid var(--hair);border-radius:var(--r-sm);padding:clamp(24px,2.6vw,38px);background:#fff}
.contact-card h2{font-family:var(--font-body);font-size:clamp(26px,2.6vw,36px);line-height:1.12;font-weight:700;margin-bottom:22px}
.contact-card h2 em{font-style:italic;color:var(--magenta-glow)}
.wa-big{width:100%;justify-content:center;padding:18px 28px;font-size:15px}
.contact-lines{list-style:none;margin:24px 0 24px;padding:0;border-top:1px solid var(--hair)}
.contact-lines li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--hair)}
.contact-lines svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--magenta-glow)}
.contact-lines b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--white-soft);margin-bottom:3px}
.contact-lines a,.contact-lines .val{font-size:15.5px;font-weight:600}
.contact-lines a:hover{color:var(--magenta-glow)}
.contact-card .map-embed{height:260px;border-radius:var(--r-sm)}
.faq-list{border-top:1px solid var(--hair);max-width:860px}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--font-body);font-size:clamp(20px,2vw,26px);font-weight:700}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:20px;height:20px;flex-shrink:0;transition:transform .3s var(--ease-out)}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-body{padding:0 0 24px;color:var(--white-soft);font-size:var(--fs-lead);max-width:62ch}

/* ---- Privacy policy ---- */
.toc{position:sticky;top:104px}
.toc summary{display:none}
.toc-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair)}
.toc-list a{display:block;padding:8px 0 8px 16px;margin-left:-1px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--white-soft);border-left:2px solid transparent;transition:color .2s ease,border-color .2s ease}
.toc-list a:hover{color:var(--white)}
.toc-list a.is-active{color:var(--magenta-glow);border-left-color:var(--magenta-glow)}
.policy{max-width:740px}
.policy-section{padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--hair);scroll-margin-top:104px}
.policy-section:first-child{border-top:0;padding-top:0}
.policy h2{font-family:var(--font-body);font-size:clamp(26px,2.6vw,36px);line-height:1.15;margin-bottom:16px}
.policy h3{font-size:17px;margin:22px 0 8px}
.policy p,.policy li{font-size:17px;line-height:1.75;color:var(--white)}
.policy p{margin:0 0 14px}
.policy ul{margin:0 0 14px 1.2em;list-style:disc}
.policy a{color:var(--magenta-glow);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s ease}
.policy a:hover,.policy a:focus-visible{text-decoration-color:currentColor}
.policy .ph{color:var(--white-soft)}
.back-top{margin-top:32px;color:var(--white)}
.footer-legal{font-size:12.5px;font-weight:600;color:var(--on-dark)}
.footer-legal:hover{color:var(--magenta-glow)}
.footer-bottom{justify-content:space-between}
@media (max-width:1024px){
  .grid-12{grid-template-columns:minmax(0,1fr);column-gap:0}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:auto}
  .story-cols{column-count:1}
  .story-photo,.facts-card{position:static}
  .toc{position:static;border:1px solid var(--hair);border-radius:4px;padding:0 18px}
  .toc summary{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-weight:800;cursor:pointer;list-style:none}
  .toc summary::-webkit-details-marker{display:none}
  .toc summary svg{width:18px;height:18px;transition:transform .3s var(--ease-out)}
  .toc[open] summary svg{transform:rotate(180deg)}
  .toc-list{margin-bottom:12px}
}

/* ---- 404 ---- */
.nf{min-height:calc(100vh - 85px);display:flex;align-items:center;padding:clamp(56px,9vw,120px) 0}
.nf-code{font-size:clamp(120px,26vw,360px);line-height:.85;letter-spacing:-.05em;font-weight:800;text-transform:uppercase;color:var(--white);margin:0 0 clamp(20px,3vw,36px)}
.nf-code .pt-line{display:block;overflow:hidden;padding:.02em 0 .06em}
.nf-code .pt-inner{display:block;color:inherit}
.nf-title{font-family:var(--font-body);font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.012em;font-weight:700;text-transform:none;margin-bottom:16px}
.nf .hero-btns{margin-top:28px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .page-title .pt-inner,.nf-code .pt-inner{animation:none}
  .spot-media img,.founder-photo img,.story-photo img,.feature-media img,.mega-feature-img img,.mega-tile-img img{transition:none}
}

/* ==========================================================================
   ROUND 3: solid header bar, new logos, mobile menu, responsiveness fixes
   Baseline: iOS/iPadOS 14.5+, Chrome/Edge/Firefox 90+, Samsung Internet 15+.
   Older browsers still get every link and all content, with simpler visuals.
   ========================================================================== */
:root{--header-h:101px}
@media (max-width:600px), (max-height:559px){:root{--header-h:71px}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
img,svg,video,iframe{max-width:100%}

/* ---- Solid white header bar on scroll: the header's OWN background, same as the inner pages ---- */
.site-header::before{display:none}
body.home .site-header{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
body.home .site-header.is-scrolled,body.home.nav-open .site-header,body.home .site-header.mega-open{background:#ffffff;border-bottom-color:rgba(18,17,19,.1);box-shadow:0 2px 16px rgba(28,20,32,.04)}

/* ---- Logos: colour on white, white over the hero photo (no white box any more) ---- */
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand-logo{height:72px;width:auto;max-width:none;flex:none;display:block}
.brand-logo-white{display:none}
body.home:not(.nav-open) .site-header:not(.is-scrolled) .brand{background:transparent;padding:0;border-radius:0}
body.home:not(.nav-open) .site-header:not(.is-scrolled) .brand-logo-color{display:none}
body.home:not(.nav-open) .site-header:not(.is-scrolled) .brand-logo-white{display:block}
@media (max-width:600px), (max-height:559px){.brand-logo{height:46px}}
.footer-brand img{height:84px;width:auto;max-width:none}

/* ---- Desktop menu bar must fit between 861px and ~1120px ---- */
@media (min-width:861px) and (max-width:1120px){
  nav.main-nav{gap:clamp(14px,2vw,26px)}
  nav.main-nav > a,.dropdown-trigger{font-size:13px}
  .nav-divider{display:none}
  .nav-socials{gap:8px}
  .nav-socials a{width:36px;height:36px}
  .nav-cta{padding:11px 16px;font-size:12.5px}
}
@media (min-width:861px) and (min-height:560px){
  .mega-panel{max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
}
.menu-bar{display:none}
.nav-toggle{transition:opacity .2s ease}

/* ---- Everything pinned under the header follows its real height ---- */
.filter-sticky{top:var(--header-h)}
.toc,.facts-card,.story-photo{top:calc(var(--header-h) + 20px)}
.policy-section{scroll-margin-top:calc(var(--header-h) + 20px)}
.process.is-enhanced .process-sticky{padding-top:calc(var(--header-h) + 16px)}
.nf{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h))}

/* ---- Notch / home-indicator safe areas (padding falls back cleanly where env() is unsupported) ---- */
.wrap{padding-left:max(5vw,env(safe-area-inset-left,0px));padding-right:max(5vw,env(safe-area-inset-right,0px))}
.nav-row{padding-left:max(5vw,env(safe-area-inset-left,0px));padding-right:max(5vw,env(safe-area-inset-right,0px))}
.site-footer{padding-bottom:env(safe-area-inset-bottom,0px)}
.quick-contact{right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));transition:opacity .2s ease}
body.is-typing .quick-contact{opacity:0;pointer-events:none}

/* ---- Small-screen text safety ---- */
.craft-caption{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
@media (max-width:600px){.craft-caption{letter-spacing:.06em}}
.contact-lines a,.contact-lines .val,.footer-contact-list a,.footer-contact-list span,.policy a,.policy li,.cta-meta span{overflow-wrap:anywhere}

/* ---- Minimum text size 12px ---- */
.project-tag,.form-field label,.glass-form-card .form-field label,.form-field label .opt,.glass-form-card .form-field label .opt,.cta-band-tag,.eyebrow,.marquee-track li,.breadcrumb,.contact-lines b,.mega-eyebrow,.footer-legal{font-size:12px}
.marquee-track li{font-size:12px}

/* ---- iPhone/iPad: fields under 16px make Safari zoom the page on tap ---- */
@media (max-width:1024px), (pointer:coarse){
  .form-field input,.form-field select,.form-field textarea,
  .glass-form-card .form-field input,.glass-form-card .form-field select,.glass-form-card .form-field textarea,
  .contact-form .form-field input,.contact-form .form-field select,.contact-form .form-field textarea{font-size:16px}
}

/* ---- Touch targets: at least 44px on phones/tablets/touch screens (desktop unchanged) ---- */
@media (max-width:1024px), (pointer:coarse){
  .btn{min-height:48px}
  .filter-btn{min-height:44px}
  .form-field input,.form-field select,.form-field textarea{min-height:48px}
  .form-field textarea{min-height:120px}
  .glass-form-card .form-field textarea{min-height:88px}
  .footer-col li{margin-bottom:0}
  .footer-col li a,.footer-contact-list a{display:inline-block;padding:12px 0}
  .footer-contact-list li{align-items:center}
  .footer-legal{display:inline-flex;align-items:center;min-height:44px}
  .footer-socials a{width:44px;height:44px}
  .breadcrumb a{display:inline-block;padding:14px 4px}
  .page-hero.xl .breadcrumb{margin-bottom:clamp(14px,3vw,32px)}
  .contact-lines a{display:inline-block;padding:10px 0}
  .view-all-link,.link-underline,.mega-all{display:inline-flex;align-items:center;min-height:44px}
  .toc-list a{padding:12px 0 12px 16px}
  .faq-item summary{min-height:56px}
}

/* ---- Floating contact buttons: smaller, tucked in, never under the footer text ---- */
@media (max-width:600px){
  .quick-contact{right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));gap:10px}
  .quick-contact a{width:46px;height:46px}
  .quick-contact a svg{width:21px;height:21px}
  .footer-bottom{padding-bottom:72px}
}
@media (max-width:380px){.quick-contact .qc-mail{display:none}}

/* ==========================================================================
   MOBILE MENU (phones, tablets in portrait, and any short/landscape-phone screen)
   Full-screen white sheet: numbered serif rows, text-only Services accordion,
   and a pinned action bar (Get a Quote, Call, socials). No images or icon tiles.
   ========================================================================== */
@keyframes menuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:860px), (max-height:559px){
  html body{--menu-px:max(6vw,env(safe-area-inset-left,0px))}
  html body .brand,html body .nav-toggle{position:relative;z-index:3}
  html body .nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;margin-right:-8px}
  html body .nav-toggle span{display:block;width:24px;height:2px}
  html body .mega-scrim{display:none}
  html body nav.main-nav{position:fixed;top:0;right:0;bottom:0;left:0;width:auto;height:auto;transform:none;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:calc(var(--header-h) + 6px) 0 0;background:linear-gradient(rgba(18,17,19,.1),rgba(18,17,19,.1)) 0 var(--header-h)/100% 1px no-repeat,#fff;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;z-index:2;border:0;counter-reset:mi}
  html body nav.main-nav.open{opacity:1;visibility:visible;transition-delay:0s}

  /* rows */
  html body nav.main-nav > a:not(.nav-cta),html body .nav-item-dropdown > .dropdown-trigger{display:flex;align-items:center;gap:16px;width:auto;min-height:64px;margin:0 var(--menu-px);padding:14px 0;border-bottom:1px solid rgba(18,17,19,.1);font-family:var(--font-body);font-size:clamp(28px,8vw,38px);font-weight:700;letter-spacing:-.01em;text-transform:none;line-height:1.15;color:#121113;cursor:pointer}
  html body nav.main-nav > a:not(.nav-cta)::before,html body .nav-item-dropdown > .dropdown-trigger::before{counter-increment:mi;content:counter(mi,decimal-leading-zero);position:static;display:block;flex:none;width:30px;height:auto;top:auto;left:auto;right:auto;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.18em;line-height:1;color:#e0127f}
  html body nav.main-nav > a::after,html body .dropdown-trigger::after{display:none}
  html body nav.main-nav > a.active,html body .dropdown-trigger.active,html body nav.main-nav > a:hover,html body .dropdown-trigger:hover{color:#e0127f}
  html body .dropdown-trigger svg{margin-left:auto;width:20px;height:20px;transition:transform .3s var(--ease-out)}
  html body .nav-item-dropdown.is-open .dropdown-trigger svg{transform:rotate(180deg)}
  html body .nav-item-dropdown{width:auto;position:static}

  /* services accordion: text only, animated open/close */
  html body .nav-item-dropdown .mega-panel,html body .nav-item-dropdown.is-open .mega-panel{position:static;display:grid;grid-template-rows:0fr;opacity:1;visibility:hidden;transform:none;box-shadow:none;border:0;background:transparent;max-height:none;overflow:visible;z-index:auto;transition:grid-template-rows .35s var(--ease-out),visibility 0s linear .35s}
  html body .nav-item-dropdown.is-open .mega-panel{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
  html body .mega-inner{min-height:0;overflow:hidden;margin:0 var(--menu-px);padding:0;max-width:none}
  html body .mega-grid{display:block}
  html body .mega-col-feature,html body .mega-eyebrow,html body .mega-desc,html body .mega-ico{display:none}
  html body .nav-item-dropdown .mega-col{opacity:1;transform:none;transition:none}
  html body .mega-list{display:block;padding:4px 0 2px}
  html body .mega-link{display:block;padding:0;border-radius:0;background:none}
  html body .mega-list li + li .mega-link{border-top:1px solid rgba(18,17,19,.06)}
  html body .mega-name{display:block;padding:13px 0 13px 46px;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-size:17px;font-weight:700;line-height:1.3;color:#121113}
  html body .mega-name::after{display:none}
  html body .mega-link:hover .mega-name,html body .mega-link:focus-visible .mega-name{color:#e0127f}
  html body .mega-all{margin:2px 0 14px 46px}
  html body [data-mobile="link"] .mega-panel{display:none!important}
  html body [data-mobile="link"] .dropdown-trigger svg{display:none}

  /* pinned action bar */
  html body .nav-divider,html body .nav-socials,html body nav.main-nav > a.nav-cta{display:none}
  html body .menu-bar{display:block;position:sticky;bottom:0;margin-top:auto;padding:16px var(--menu-px) calc(16px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid rgba(18,17,19,.1);z-index:1}
  html body .menu-bar-btns{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}
  html body .menu-bar .btn{justify-content:center;min-height:52px;padding:0 14px;font-size:13px;white-space:nowrap}
  html body .menu-socials{display:flex;gap:10px;margin-top:14px}
  html body .menu-socials a{width:44px;height:44px;border:1.5px solid #121113;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#121113;background:#fff}
  html body .menu-socials svg{width:18px;height:18px}
}
@media (min-width:641px) and (max-width:860px), (min-width:861px) and (max-height:559px){
  html body{--menu-px:max(8vw,calc((100vw - 620px) / 2))}
}
@media (max-height:520px){
  html body .menu-socials{display:none}
  html body .menu-bar{padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  html body .menu-bar .btn{min-height:46px}
  html body nav.main-nav > a:not(.nav-cta),html body .nav-item-dropdown > .dropdown-trigger{min-height:54px;padding:10px 0;font-size:28px}
}
@media (prefers-reduced-motion:no-preference) and (max-width:860px), (prefers-reduced-motion:no-preference) and (max-height:559px){
  html body nav.main-nav.open > a:not(.nav-cta),html body nav.main-nav.open > .nav-item-dropdown{animation:menuIn .55s var(--ease-out) both}
  html body nav.main-nav.open > :nth-child(2){animation-delay:.04s}
  html body nav.main-nav.open > :nth-child(3){animation-delay:.08s}
  html body nav.main-nav.open > :nth-child(4){animation-delay:.12s}
  html body nav.main-nav.open > :nth-child(5){animation-delay:.16s}
  html body nav.main-nav.open .menu-bar{animation:menuIn .5s .22s var(--ease-out) both}
}

/* ---- If main.js is old/cached/blocked, the desktop menu still opens on hover / keyboard focus ---- */
@media (min-width:861px) and (min-height:560px){
  html:not([data-ready]) .nav-item-dropdown:hover .mega-panel,html:not([data-ready]) .nav-item-dropdown:focus-within .mega-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  html:not([data-ready]) .nav-item-dropdown:hover .mega-col,html:not([data-ready]) .nav-item-dropdown:focus-within .mega-col{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html body nav.main-nav.open > a,html body nav.main-nav.open > .nav-item-dropdown,html body nav.main-nav.open .menu-bar{animation:none}
  html body .nav-item-dropdown .mega-panel{transition:none}
}

/* ---- Fallback for browsers without aspect-ratio (iOS 14.x, old Android WebView): padding-top box ---- */
@supports not (aspect-ratio:1 / 1){
  .about-split .visual{height:0;padding-top:75.000%;overflow:hidden}
  .photo-card-img{height:0;padding-top:80.000%;overflow:hidden}
  .service-image-placeholder{height:0;padding-top:77.500%;overflow:hidden}
  .bento-row-2 .bento-tile{height:0;padding-top:75.758%;overflow:hidden}
  .bento-row-3 .bento-tile{height:0;padding-top:95.238%;overflow:hidden}
  .portfolio-tile{height:0;padding-top:75.000%;overflow:hidden}
  .svc-tile-img{height:0;padding-top:66.667%;overflow:hidden}
  .process-step figure{height:0;padding-top:75.000%;overflow:hidden}
  .project-media{height:0;padding-top:75.000%;overflow:hidden}
  .mega-feature-img{height:0;padding-top:62.500%;overflow:hidden}
  .mega-tile-img{height:0;padding-top:75.000%;overflow:hidden}
  .founder-photo,.story-photo{height:0;padding-top:125.000%;overflow:hidden}
  .feature-media,.spot-media{height:0;padding-top:75.000%;overflow:hidden}
  .svc-grid.is-two .svc-tile-img{height:0;padding-top:66.667%;overflow:hidden}
  .svc-hero-visual{height:0;padding-top:42.857%;overflow:hidden}
  .project-media.is-tall{height:0;padding-top:133.333%;overflow:hidden}
  .project-media.is-wide{height:0;padding-top:75.000%;overflow:hidden}
  .project-media.is-sq{height:0;padding-top:100.000%;overflow:hidden}
  @media (max-width:860px){
    .bento-row-2 .bento-tile,.bento-row-3 .bento-tile{height:0;padding-top:100.000%;overflow:hidden}
  }
  @media (max-width:520px){
    .svc-tile-img{height:0;padding-top:66.667%;overflow:hidden}
  }
  .about-split .visual > img,.about-split .visual > picture,.bento-row-2 .bento-tile > img,.bento-row-2 .bento-tile > picture,.bento-row-3 .bento-tile > img,.bento-row-3 .bento-tile > picture,.feature-media > img,.feature-media > picture,.founder-photo > img,.founder-photo > picture,.mega-feature-img > img,.mega-feature-img > picture,.mega-tile-img > img,.mega-tile-img > picture,.photo-card-img > img,.photo-card-img > picture,.portfolio-tile > img,.portfolio-tile > picture,.process-step figure > img,.process-step figure > picture,.project-media > img,.project-media > picture,.project-media.is-sq > img,.project-media.is-sq > picture,.project-media.is-tall > img,.project-media.is-tall > picture,.project-media.is-wide > img,.project-media.is-wide > picture,.service-image-placeholder > img,.service-image-placeholder > picture,.spot-media > img,.spot-media > picture,.story-photo > img,.story-photo > picture,.svc-grid.is-two .svc-tile-img > img,.svc-grid.is-two .svc-tile-img > picture,.svc-hero-visual > img,.svc-hero-visual > picture,.svc-tile-img > img,.svc-tile-img > picture{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
  .craft-collage{height:min(108vw,780px)}
  .svc-tile-img,.project-media,.founder-photo,.story-photo,.feature-media,.spot-media,.svc-hero-visual,.photo-card-img,.mega-feature-img,.mega-tile-img,.process-step figure{position:relative}
}
@supports not (aspect-ratio:1 / 1){
  .process.is-enhanced .process-step figure{padding-top:0;height:100%}
}
@media (max-width:860px), (max-height:559px){
  html body .nav-item-dropdown > .dropdown-trigger{justify-content:flex-start}
}
@media (max-width:1024px), (pointer:coarse){
  .footer-col li a{min-width:44px}
}

/* Truly solid white bar on every page (no content ghosting through it) */
html body header.site-header{background:#ffffff}

/* ==========================================================================
   LIVE CLOCK — server-synced date/time, top-right, mirrors .quick-contact
   Adaptive theme: dark glass over the transparent hero photo, white pill
   once the header goes solid (scroll, inner pages) — same trigger the
   header logo swap already uses, so both change together.
   ========================================================================== */
@keyframes lcGlow{0%,100%{opacity:1}50%{opacity:.55}}
.live-clock{
  position:fixed;
  top:calc(var(--header-h) + 16px);
  right:max(20px,env(safe-area-inset-right,0px));
  z-index:40;
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 22px;
  border-radius:999px;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(18,17,19,.1);
  box-shadow:0 12px 28px rgba(18,17,19,.1),0 0 0 1px rgba(224,18,127,.04);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  transition:opacity .25s ease,transform .25s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease,top .2s ease;
}
body.nav-open .live-clock,.site-header.mega-open ~ .live-clock,body.footer-in-view .live-clock{opacity:0;pointer-events:none;transform:translateY(-6px)}
.lc-group{display:flex;align-items:center;gap:9px}
.lc-ico{
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid var(--magenta-glow);
  color:var(--magenta-glow);
}
.lc-ico svg{width:14px;height:14px}
.lc-date{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--white-soft)}
.lc-div{width:1px;height:22px;flex:none;background:var(--line)}
.lc-time{font-family:var(--font-body);font-size:19px;font-weight:700;color:var(--white)}
.lc-tz{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--magenta-glow);padding:3px 7px;border-radius:999px}

/* Dark variant: only while the home header is still transparent over the photo.
   The pink glow is deliberately a dark-background-only effect — the same
   colour as a soft shadow on white just looks like a smudge, not a glow. */
body.home:not(.nav-open) .site-header:not(.is-scrolled) ~ .live-clock{
  background:rgba(15,10,15,.55);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(224,18,127,.3),0 14px 30px rgba(0,0,0,.4);
  isolation:isolate;
}
body.home:not(.nav-open) .site-header:not(.is-scrolled) ~ .live-clock::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 22px 2px rgba(224,18,127,.35),0 0 46px 6px rgba(224,18,127,.16);
  z-index:-1;
  pointer-events:none;
}
body.home:not(.nav-open) .site-header:not(.is-scrolled) ~ .live-clock .lc-date{color:rgba(255,255,255,.85)}
body.home:not(.nav-open) .site-header:not(.is-scrolled) ~ .live-clock .lc-time{color:#fff}
body.home:not(.nav-open) .site-header:not(.is-scrolled) ~ .live-clock .lc-div{background:rgba(255,255,255,.24)}
@media (prefers-reduced-motion:no-preference){
  body.home:not(.nav-open) .site-header:not(.is-scrolled) ~ .live-clock::after{animation:lcGlow 3.6s ease-in-out infinite}
}

/* Desktop-only feature: below the site's existing mobile/desktop split
   (861px, the same width the nav switches at) the clock is removed
   entirely, not just shrunk — main.js also skips fetching server-time.php
   below this width, so mobile visitors never load a widget they'll never
   see. */
@media (max-width:860px){.live-clock{display:none !important}}

/* Short laptop screens: there isn't enough clear space between the bottom of
   the quote form and the materials marquee to shift the widget into (as
   little as 19px at the shortest heights tested, against the widget's own
   ~50px height) — so instead of trying to fit it in there, it simply waits.
   It starts hidden on the home page (see body_class in page_shell) so there
   is never a flash of overlap on load, then a scroll-driven observer reveals
   it — in its normal white "scrolled" state — the moment the real quote-form
   card has actually scrolled out of view. Tall viewports never engage this
   at all: the form never reaches the widget's zone, so it's simply always
   visible there, at every scroll position. */
@media (min-width:861px) and (max-height:800px){
  body.home.form-in-view .live-clock{opacity:0;pointer-events:none;transform:translateY(-6px)}
}

/* Merged Call/WhatsApp line (single number, two actions) */
.footer-contact-list li .sep,.policy li .sep{opacity:.5;margin:0 2px}
.footer-contact-list li a + .sep + a,.policy li a + .sep + a{font-weight:700;color:var(--magenta-glow)}

.founder-title{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-glow);margin:-10px 0 20px}

/* ==========================================================================
   BRANDS WE'VE WORKED WITH — two-tier real-logo wall
   Featured: larger white cards, full-opacity logos.
   Standard: smaller, denser grid, slightly muted until hovered.
   ========================================================================== */
.sec.brands{padding-top:0}
.brand-featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;list-style:none;margin:0 0 20px;padding:0}
.brand-card{display:flex;align-items:center;justify-content:center;height:108px;padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 2px 14px rgba(18,17,19,.04);transition:transform .3s var(--ease-out),box-shadow .3s ease}
.brand-card:hover{transform:translateY(-3px);box-shadow:0 16px 28px rgba(18,17,19,.1)}
.brand-card img{max-width:100%;max-height:56px;object-fit:contain}
.brand-standard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.brand-card-sm{display:flex;align-items:center;justify-content:center;height:72px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);opacity:.82;transition:opacity .25s ease,transform .25s ease}
.brand-card-sm:hover{opacity:1;transform:translateY(-2px)}
.brand-card-sm img{max-width:100%;max-height:32px;object-fit:contain;filter:grayscale(.15)}
@media (max-width:700px){
  .brand-featured-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
  .brand-card{height:84px;padding:14px 16px}
  .brand-card img{max-height:42px}
  .brand-standard-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
  .brand-card-sm{height:58px;padding:10px 12px}
  .brand-card-sm img{max-height:24px}
}

/* ---- Image pass ---- */
/* brand-pink fade on selected imagery (gallery photos stay untinted) */
.svc-tile-img::after,.svc-hero-visual::after,.process-step figure::after,.mega-feature-img::after,.spot-media::after,
.feature-media::after,.founder-photo::after,.story-photo::after,.craft-collage figure::after,.studio-fig::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(224,18,127,0) 52%,rgba(224,18,127,.17) 100%),linear-gradient(120deg,rgba(224,18,127,.11) 0%,rgba(224,18,127,0) 44%);
  transition:opacity .5s ease}
.svc-tile:hover .svc-tile-img::after,.svc-tile:focus-visible .svc-tile-img::after,.craft-collage figure:hover::after,.spot-media:hover::after{opacity:.5}
.founder-photo,.story-photo,.studio-fig,.mach-img{position:relative}
.photo-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 18px 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,rgba(18,17,19,0),rgba(18,17,19,.72))}
.project-media.is-pano{aspect-ratio:21/9}
.studio-fig{display:block;margin:0 0 22px;overflow:hidden;border-radius:var(--r-sm);aspect-ratio:3/2;background:#1a1719}
.studio-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .project-media.is-pano{height:0;padding-top:42.857%;overflow:hidden}
  .studio-fig{height:0;padding-top:66.667%}
}

/* Lit after dark */
.night-band{background:#120c10;color:#fff;padding:clamp(56px,7vw,104px) 0}
.night-band .eyebrow{color:#ff5fb0}
.night-band .h-serif{color:#fff}
.night-band .h-serif em{color:#ff5fb0}
.night-band .section-lead{color:rgba(255,255,255,.74);max-width:520px;margin-bottom:22px}
.night-head{margin-bottom:clamp(28px,4vw,48px)}
.night-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.night-card{position:relative;margin:0}
.night-img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-sm);background:#000}
.night-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.night-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,12,16,0) 40%,rgba(18,12,16,.82) 100%),linear-gradient(135deg,rgba(224,18,127,.20),rgba(224,18,127,0) 50%)}
.night-card:hover .night-img img{transform:scale(1.05)}
.night-cap{position:absolute;left:18px;bottom:16px;z-index:2;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff}
@media (max-width:860px){
  .night-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -16px;padding:0 16px 8px;-webkit-overflow-scrolling:touch}
  .night-card{flex:0 0 74%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.night-img img{transition:none}}

/* Machines we use */
.machines{background:#fff}
.mach-head{text-align:center;max-width:640px;margin:0 auto clamp(22px,3vw,34px)}
.mach-head .section-lead{margin-left:auto;margin-right:auto}
.mach-stat{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto clamp(26px,3.4vw,44px);text-align:left}
.mach-num{font-family:var(--font-body);font-size:clamp(46px,6vw,84px);font-weight:700;line-height:1;color:var(--magenta-glow)}
.mach-unit{display:flex;flex-direction:column;font-size:clamp(16px,1.6vw,22px);font-weight:700;color:#121113;line-height:1.2}
.mach-unit small{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6b6770;margin-top:4px}
.mach-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2vw,26px)}
.mach-card{flex:0 1 calc((100% - 2*clamp(16px,2vw,26px))/3);min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line);box-shadow:0 2px 14px rgba(18,17,19,.05);transition:transform .3s var(--ease-out),box-shadow .3s ease}
.mach-card:hover{transform:translateY(-4px);box-shadow:0 20px 36px rgba(18,17,19,.12)}
.mach-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:#1a1719}
.mach-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mach-img.is-icon{background:radial-gradient(120% 120% at 20% 10%,#3a1328 0%,#17101a 60%,#0f0b12 100%)}
.mach-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ff5fb0}
.mach-icon svg{width:68px;height:68px}
.mach-body{padding:clamp(16px,1.6vw,22px)}
.mach-body h3{font-family:var(--font-body);font-size:clamp(19px,1.6vw,23px);font-weight:700;line-height:1.2;color:#121113;margin-bottom:8px}
.mach-spec{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-glow);margin-bottom:8px}
.mach-desc{font-size:13.5px;line-height:1.55;color:#5c5860;margin:0}
.machines.is-compact{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.machines.is-compact .mach-desc{display:none}
.mach-more{text-align:center;margin:clamp(22px,3vw,34px) 0 0}
@media (max-width:860px){
  .mach-grid{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 10px;-webkit-overflow-scrolling:touch}
  .mach-card{flex:0 0 76%;scroll-snap-align:start}
}

/* Brands wall: no orphan cells at any width */
.brand-featured-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.brand-standard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1100px){.brand-standard-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media (max-width:700px){.brand-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Round 3: story, map, quote band, zoom, projects ---- */
.story-v2 .story-head{margin-bottom:clamp(28px,4vw,52px);max-width:760px}
.story-v2 .story-head .h-serif{margin:0}
.story-v2 .story-grid{align-items:center}
.story-v2 .story-photo{position:relative;top:auto}
.story-v2 .story-text > p{font-size:var(--fs-lead);line-height:1.75;color:var(--white-soft);margin:0 0 16px;max-width:60ch}
.story-v2 .story-text strong{color:#121113}
.story-v2 .story-lead{font-family:var(--font-body);font-size:clamp(22px,2.3vw,31px)!important;line-height:1.35!important;font-weight:600;color:#121113!important;padding-left:22px;border-left:3px solid var(--magenta-glow);margin:0 0 26px!important;max-width:30ch!important}
.story-facts{list-style:none;margin:30px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);max-width:600px}
.story-facts li{padding:20px 18px 18px;display:flex;flex-direction:column;gap:6px}
.story-facts li + li{border-left:1px solid var(--hair)}
.story-facts li:first-child{padding-left:0}
.sf-fig{font-family:var(--font-body);font-size:clamp(22px,2.4vw,32px);font-weight:700;line-height:1.1;color:var(--magenta-glow)}
.sf-cap{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6770}
@media (max-width:520px){
  .story-facts{grid-template-columns:1fr}
  .story-facts li{padding:16px 0}
  .story-facts li + li{border-left:0;border-top:1px solid var(--hair)}
}

.map-full{background:#e9eaec;line-height:0;border-top:1px solid var(--hair)}
.map-full .map-embed{display:block;width:100%;height:clamp(300px,34vw,460px);border:0;border-radius:0}

.xlink-band{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);background:#0c090c;border-bottom:0}
.xlink-band::before{content:"";position:absolute;inset:-20px;background:url('../images/hero-bg.jpg') center/cover;filter:blur(10px);transform:scale(1.08);z-index:-2}
.xlink-band::after{content:"";position:absolute;inset:0;background:rgba(12,9,12,.72);background-image:var(--grain);z-index:-1}
.xlink-inner{position:relative;z-index:1}
.xlink-title{color:var(--on-dark)}
.xlink-inner p{color:var(--on-dark-soft)}
.xlink-band + .cta-band{border-top:1px solid rgba(255,255,255,.08)}

.svc-hero-visual img,.process-step figure img,.mach-img img{transition:transform 1.1s var(--ease-out)}
@media (hover:hover){
  .svc-hero-visual:hover img{transform:scale(1.04)}
  .process-step figure:hover img{transform:scale(1.05)}
  .mach-card:hover .mach-img img{transform:scale(1.06)}
  .night-card:hover .night-img img{transform:scale(1.06)}
}
@media (prefers-reduced-motion:no-preference){
  .js .zoom-frame img{scale:1.09;transition:scale 1.6s var(--ease-out),transform 1.1s var(--ease-out)}
  .js .zoom-frame.is-in img{scale:1}
}
@media (prefers-reduced-motion:reduce){
  .svc-hero-visual img,.process-step figure img,.mach-img img{transition:none}
  .svc-hero-visual:hover img,.process-step figure:hover img,.mach-card:hover .mach-img img{transform:none}
}

.proj-count{margin-top:16px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6770}
.proj-count strong{color:var(--magenta-glow)}
.filter-count{margin:0 0 20px;font-size:13px;color:#6b6770}

/* ---- Round 4: Inter everywhere (no serif) ---- */
:root{--font-head:var(--font-body)}
h1,h2,h3,h4,.h-serif,.story-lead,.sf-fig,.mach-num,.ps-num,.proof-fig,.svc-name,.xlink-title,.form-title,.nf-title,.principle h3,.project-cap h3,.mach-body h3,.lc-time{font-family:var(--font-body);letter-spacing:-.015em}
.h-serif em,h1 em,h2 em,h3 em,.contact-card h2 em,.craft-founder,.story-lead em,.hero-title em,.page-hero em{font-style:normal!important}
.cta-band h2 em,.xlink-title em,.night-band .h-serif em{font-style:normal!important}
button,input,select,textarea{font-family:var(--font-body)}

/* ==========================================================================
   Round 5: live-site responsive pass
   ========================================================================== */
.addr-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(224,18,127,.55);transition:color .2s ease,border-color .2s ease}
.addr-link:hover,.addr-link:focus-visible{color:var(--magenta-glow);border-bottom-color:var(--magenta-glow)}
.policy a[href^="https://share.google"]{overflow-wrap:anywhere}

/* Service tiles must never shrink inside their flex card (was collapsing to a thin strip on phones) */
.svc-tile-img{flex:none}

/* Machines: product photos are shown whole on a light panel */
.mach-img.is-fit{background:#e6e6e6}
.mach-img.is-fit img{object-fit:contain}

/* Service-page banner: whole photo on phones, 16:9 on tablets, wide banner on desktop */
.svc-hero-visual picture{position:absolute;inset:0;display:block}
.svc-hero-visual picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.svc-hero-visual{aspect-ratio:3/2}}
@media (min-width:768px) and (max-width:1023px){.svc-hero-visual{aspect-ratio:16/9}}

/* Footer: everything centred on phones */
@media (max-width:767px){
  .site-footer .footer-grid{grid-template-columns:1fr;gap:34px;text-align:center;justify-items:center}
  .site-footer .footer-col{width:100%;display:flex;flex-direction:column;align-items:center}
  .site-footer .footer-brand{margin-bottom:16px;display:flex;justify-content:center;width:100%}
  .site-footer .footer-brand img{margin-inline:auto}
  .site-footer .footer-col p{max-width:34ch;margin-inline:auto}
  .site-footer .footer-socials{justify-content:center}
  .site-footer .footer-col h4{margin-bottom:12px;text-align:center}
  .site-footer .footer-col ul{padding:0;margin:0;width:100%;display:flex;flex-direction:column;align-items:center}
  .site-footer .footer-col li{display:flex;justify-content:center;text-align:center}
  .site-footer .footer-contact-list li{flex-direction:column;align-items:center;gap:6px;margin-bottom:10px}
  .site-footer .footer-contact-list svg{margin-top:0}
  .site-footer .footer-contact-list a,.site-footer .footer-contact-list span{text-align:center}
  .site-footer .footer-map{margin-left:0;margin-right:0}
  .site-footer .footer-bottom{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding-top:18px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .site-footer .footer-legal{justify-content:center}
  body.footer-in-view .quick-contact{opacity:0;pointer-events:none;transform:translateY(8px)}
  .quick-contact{transition:opacity .25s ease,transform .25s ease}
}

/* Safety nets for every viewport */
img,video,svg,iframe{max-width:100%}
.timeline{min-width:0}
@media (max-width:480px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}

/* Service tiles size to their content: image on top, then number, name, description and the underline */
.svc-tile,.svc-grid.is-two .svc-tile{aspect-ratio:auto;height:auto}

/* ==========================================================================
   Round 6: bigger header logo (phones +70%, tablet/desktop +50%)
   ========================================================================== */
:root{--header-h:137px}
.brand-logo{height:108px}
@media (max-width:600px), (max-height:559px){
  :root{--header-h:103px}
  .brand-logo{height:78px}
}

/* ==========================================================================
   Round 7: About story collage, large index numerals, typography polish
   ========================================================================== */

/* --- About "Our Story": 3-image mosaic (shop front main, team, machine) --- */
.story-collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-self:center}
.story-collage figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-sm);background:#e9eaec;aspect-ratio:4/3}
.story-collage .sc-main{grid-column:1/-1}
.story-collage img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.story-collage figure:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.story-collage img{transition:none}.story-collage figure:hover img{transform:none}}
@media (max-width:900px){.story-collage{max-width:680px}}
@media (max-width:480px){.story-collage{gap:8px}}

/* --- Large premium index numerals (one style everywhere) --- */
.principle-num,.svc-num{
  display:block;font-family:var(--font-body);font-weight:800;line-height:.95;
  letter-spacing:-.035em;color:var(--magenta-glow);font-variant-numeric:lining-nums tabular-nums;
}
.principle-num{font-size:clamp(44px,5vw,64px);margin-bottom:clamp(16px,2vw,24px)}
.svc-num{font-size:clamp(40px,3.8vw,56px);margin-bottom:clamp(10px,1.4vw,16px)}
.pn-num{font-size:clamp(22px,2.4vw,28px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.process-nav li{align-items:center}

/* --- Typography polish (Inter kept; hierarchy, rhythm and measure refined) --- */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
.h-serif{font-weight:800;line-height:1.05;letter-spacing:-.028em}
.h-serif.h-sm{letter-spacing:-.022em;line-height:1.12}
h3{letter-spacing:-.02em;line-height:1.18}
.eyebrow{font-size:12px;letter-spacing:.26em;font-weight:800;margin-bottom:clamp(14px,1.6vw,20px);gap:12px}
.eyebrow::before{width:30px;height:2px}
.eyebrow + .h-serif,.eyebrow + h1,.eyebrow + h2{margin-top:0}
.section-lead,.page-hero.xl p.lead,.story-v2 .story-text > p,.story-cols p{font-size:clamp(16.5px,1.3vw,19px);line-height:1.75;color:var(--white-soft)}
.section-lead{margin-top:clamp(14px,1.8vw,22px)}
.h-serif + p,.h-serif + .section-lead{margin-top:clamp(14px,1.8vw,22px)}
.principle p,.faq-body,.xlink-inner p,.spot-copy p{line-height:1.7}
.btn,.filter-btn{letter-spacing:.1em}
.photo-cap,.craft-caption,.project-tag{letter-spacing:.16em}
@media (max-width:600px){
  body{font-size:16px}
  .section-lead,.story-cols p,.story-v2 .story-text > p{font-size:16.5px;line-height:1.7}
  .h-serif{line-height:1.08}
}