/* ==========================================================================
   MUSEO INDUSTRY design system
   Tokens, layout, components, motion. Mobile-first. Logical properties
   throughout so [dir="rtl"] mirrors without a second stylesheet.
   ========================================================================== */

/* Tokens */
:root {
  /* Colour */
  --ink:        #151515;
  --deep:       #0B1012;
  --grey-60:    #6E6E6E;   /* body secondary, 5.1:1 on white */
  --grey-45:    #8E8E8E;   /* 24px and up only */
  --grey-30:    #B3B3B3;   /* display de-emphasis only */
  --surface:    #F6F6F6;
  --surface-2:  #EBEBEB;
  --line:       #D9D9D9;
  --line-dark:  #3A3A3A;
  --white:      #FFFFFF;
  --accent:     #C2410C;   /* deep orange, 5.2:1 on white */
  --accent-ink: #9A3412;
  --accent-sub: #FDF1EA;

  /* Type */
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --t-mega:    clamp(3.5rem, 11vw, 11rem);
  --t-display: clamp(2.5rem, 7vw,  8.5rem);
  --t-h1:      clamp(2rem,   5vw,  4.5rem);
  --t-h2:      clamp(1.625rem, 3.2vw, 3rem);
  --t-h3:      clamp(1.25rem, 2vw,  2rem);
  --t-lead:    clamp(1.125rem, 1.6vw, 1.625rem);
  --t-body:    clamp(1.0625rem, 1.15vw, 1.3125rem);
  --t-sm:      clamp(1rem, 1.05vw, 1.1875rem);
  --t-xs:      clamp(0.9375rem, 0.95vw, 1.0625rem);
  --t-label:   clamp(0.8125rem, 0.8vw, 0.9375rem);

  /* Space, 8pt */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;    --s-8: 10rem;
  --gutter: clamp(1.5rem, 3.4vw, 4.5rem);
  --section: clamp(4rem, 9vw, 13rem);
  --maxw: 108rem;           /* 1728, so a 27in display is not a 1440 column */

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 26px; --r-pill: 999px;

  /* Motion */
  --d-quick:  180ms;
  --d-settle: 420ms;
  --d-reveal: 720ms;
  --d-draw:   1200ms;
  --e-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --e-both: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 76px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.37;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
a { color: inherit; }
button, input, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--white); }

.skip {
  position: absolute; inset-inline-start: var(--gutter); top: -4rem;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: var(--r-sm);
  text-decoration: none; z-index: 100; transition: top var(--d-quick) var(--e-out);
}
.skip:focus { top: 0.75rem; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tint { background: var(--surface); }
.section--dark { background: var(--deep); color: var(--white); }
.rule { height: 1px; background: var(--line); border: 0; }
.section--dark .rule { background: var(--line-dark); }

.grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.split > .split__main { flex: 999 1 34rem; min-width: 0; }
.split > .split__side { flex: 1 1 20rem; min-width: 0; }

.head { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; justify-content: space-between; }

/* Type helpers */
.mega    { font-size: var(--t-mega);    line-height: 0.85; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.display { font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.015em; }
.h1      { font-size: var(--t-h1);      line-height: 1.0;  letter-spacing: -0.01em; }
.h2      { font-size: var(--t-h2);      line-height: 1.2;  letter-spacing: -0.01em; font-weight: 500; }
.h3      { font-size: var(--t-h3);      line-height: 1.25; letter-spacing: -0.005em; font-weight: 500; }
.lead    { font-size: var(--t-lead);    line-height: 1.35; color: var(--grey-60); }
.sm      { font-size: var(--t-sm);      line-height: 1.32; color: var(--grey-60); }
.xs      { font-size: var(--t-xs);      line-height: 1.35; color: var(--grey-60); }
.muted   { color: var(--grey-30); }
.section--dark .lead, .section--dark .sm, .section--dark .xs { color: var(--grey-30); }
.measure { max-width: 38ch; }
.measure-wide { max-width: 62ch; }
.num { font-variant-numeric: tabular-nums; }

.label {
  font-size: var(--t-label); line-height: 1.25; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-60); font-weight: 500;
}
.section--dark .label { color: var(--grey-45); }
.idx { font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.02em; }

/* Buttons & links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.75rem;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--t-sm); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color var(--d-quick) var(--e-out),
              color var(--d-quick) var(--e-out),
              border-color var(--d-quick) var(--e-out);
}
.btn--solid   { background: var(--ink);    color: var(--white); }
.btn--solid:hover   { background: #000; }
.btn--accent  { background: var(--accent); color: var(--white); }
.btn--accent:hover  { background: var(--accent-ink); }
.btn--ghost   { background: transparent;   color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover   { background: var(--ink); color: var(--white); }
.section--dark .btn--ghost { color: var(--white); border-color: var(--white); }
.section--dark .btn--ghost:hover { background: var(--white); color: var(--ink); }
.btn[disabled] { background: var(--surface); color: var(--grey-45); border-color: var(--line); cursor: not-allowed; }

/* --- The one button that matters ---------------------------------------
   At rest it carries an accent badge, so it is identifiable at a glance
   among the ghost buttons. On hover the fill wipes up, the label swaps
   behind a mask (the same device as the display headlines) and the arrow
   travels out and back in. */
.btn--cta {
  position: relative; isolation: isolate; overflow: hidden;
  padding-inline-end: 0.6rem; gap: 1rem;
}
.btn--cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--d-settle) var(--e-out);
}
.btn--cta:hover::before,
.btn--cta:focus-visible::before { transform: none; }
.btn--accent.btn--cta::before { background: var(--ink); }

.btn__label { display: block; position: relative; overflow: hidden; }
.btn__label > span { display: block; transition: transform var(--d-settle) var(--e-out); }
.btn__label > span + span { position: absolute; inset: 0; transform: translateY(105%); }
.btn--cta:hover .btn__label > span,
.btn--cta:focus-visible .btn__label > span { transform: translateY(-105%); }
.btn--cta:hover .btn__label > span + span,
.btn--cta:focus-visible .btn__label > span + span { transform: none; }

.btn__badge {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--white); overflow: hidden;
  transition: background-color var(--d-settle) var(--e-out), color var(--d-settle) var(--e-out);
}
.btn--accent.btn--cta .btn__badge { background: var(--white); color: var(--accent); }
.btn--cta:hover .btn__badge,
.btn--cta:focus-visible .btn__badge { background: var(--white); color: var(--accent); }
.btn--accent.btn--cta:hover .btn__badge { background: var(--ink); color: var(--white); }

/* One arrow, not two. It flies out at the top right and a fresh one
   arrives from the bottom left, so the motion reads as departure without
   ever showing a second arrowhead. */
.btn__arrows { display: block; width: 16px; height: 16px; }
.btn__arrows svg { width: 16px; height: 16px; display: block; }
.btn--cta:hover .btn__arrows svg,
.btn--cta:focus-visible .btn__arrows svg { animation: arrowgo var(--d-settle) var(--e-out); }
@keyframes arrowgo {
  0%   { transform: none; opacity: 1; }
  45%  { transform: translate(14px, -14px); opacity: 0; }
  55%  { transform: translate(-14px, 14px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
[dir="rtl"] .btn__arrows svg { transform: scaleX(-1); }
[dir="rtl"] .btn--cta:hover .btn__arrows svg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .btn--cta::before { transform: none; opacity: 0; transition: opacity 1ms; }
  .btn--cta:hover::before { opacity: 1; }
  .btn__label > span + span { display: none; }
  .btn--cta:hover .btn__label > span { transform: none; }
  .btn__arrows { transform: none !important; }
}

.link {
  display: inline-block; text-decoration: none; font-size: var(--t-sm);
  padding-bottom: 3px; background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px;
  transition: background-size var(--d-settle) var(--e-out), color var(--d-quick) var(--e-out);
}
.link:hover { color: var(--accent); }
[dir="rtl"] .link { background-position: 100% 100%; }

.tag {
  display: inline-block; font-size: var(--t-xs); color: var(--grey-60);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.4rem 0.9rem;
}
.section--dark .tag { border-color: var(--line-dark); color: var(--grey-30); }
.trust { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag--note { border-color: var(--accent); color: var(--accent); }

/* Header */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--white) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-settle) var(--e-out),
              padding var(--d-settle) var(--e-out);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-block: 1.125rem; transition: padding-block var(--d-settle) var(--e-out);
}
.hdr.is-stuck { border-bottom-color: var(--line); }
.hdr.is-stuck .hdr__in { padding-block: 0.625rem; }
.hdr.is-hidden { transform: translateY(-100%); }
.hdr { transition: transform var(--d-settle) var(--e-out), border-color var(--d-settle) var(--e-out); }

.brand { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.nav { display: none; gap: 1.625rem; }
.nav a { text-decoration: none; font-size: var(--t-sm); position: relative; padding-block: 0.25rem; }
.nav a::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform var(--d-settle) var(--e-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr__end { display: flex; align-items: center; gap: var(--s-2); }
.hdr__cta { display: none; }

.round {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--white);
  display: grid; place-items: center; text-decoration: none; border: 0; cursor: pointer;
  transition: background-color var(--d-quick) var(--e-out), transform var(--d-settle) var(--e-out);
}
.round:hover { background: var(--accent-ink); transform: rotate(45deg); }
.round svg { width: 18px; height: 18px; }

.burger {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 1px; background: var(--ink); position: relative; transition: background var(--d-quick); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: var(--ink);
  transition: transform var(--d-settle) var(--e-out);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--white);
  border-bottom: 1px solid var(--line); padding: var(--s-3) 0 var(--s-5);
  transform: translateY(-8px); opacity: 0; visibility: hidden; z-index: 49;
  transition: opacity var(--d-settle) var(--e-out), transform var(--d-settle) var(--e-out), visibility var(--d-settle);
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; }
.drawer a { display: block; text-decoration: none; font-size: 1.5rem; padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: var(--s-3); width: 100%; }

@media (min-width: 62rem) {
  .nav { display: flex; }
  .hdr__cta { display: inline-block; }
  .burger { display: none; }
  .drawer { display: none; }
}

/* Hero */
.hero { padding-top: clamp(2.5rem, 6vw, 6rem); padding-bottom: var(--section); }
.hero__grid { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-end; }
.hero__copy { flex: 999 1 34rem; min-width: 0; }
.hero__media { flex: 1 1 20rem; min-width: 0; }
/* On a wide display the copy would otherwise eat the row and leave the
   image a thumbnail. Fix the proportions once there is room for both. */
@media (min-width: 64rem) {
  .hero__copy { flex: 1 1 58%; }
  .hero__media { flex: 0 0 36%; }
}
.hero .btnrow { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: var(--s-5); }

/* Media */
.bed { background: var(--surface); border-radius: var(--r-md); overflow: hidden; }
.bed img { width: 100%; height: 100%; object-fit: cover; }
.bed--tall img  { aspect-ratio: 3 / 4; }
.bed--wide img  { aspect-ratio: 16 / 10; }
.bed--sq img    { aspect-ratio: 1 / 1; }
.bed--hero img  { aspect-ratio: 4 / 5; }
@media (min-width: 48rem) { .bed--hero img { aspect-ratio: 3 / 4; } }
.bed img { transition: transform var(--d-draw) var(--e-out); }
.bed:hover img { transform: scale(1.03); }

/* Cards */
.card { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: 0.875rem; }
.card--pad { padding: clamp(1.5rem, 3vw, 2.25rem); }
.card .link { margin-top: auto; align-self: flex-start; }

/* Bordered service grid, hairlines, no double borders */
.hairgrid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .hairgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .hairgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hairgrid > * {
  background: var(--white); padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex; flex-direction: column; gap: 0.75rem; min-height: 11rem;
  transition: background-color var(--d-settle) var(--e-out);
}
.hairgrid > *:hover { background: var(--surface); }
.hairgrid__more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--d-settle) var(--e-out), opacity var(--d-settle) var(--e-out); }
.hairgrid > *:hover .hairgrid__more, .hairgrid > *:focus-within .hairgrid__more { max-height: 10rem; opacity: 1; }

/* Stats */
.stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stat { border-top: 1px solid var(--line); padding-top: var(--s-2); }
.section--dark .stat { border-top-color: var(--line-dark); }
.stat__n { font-size: clamp(2.75rem, 5.4vw, 4.75rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: var(--t-sm); color: var(--grey-60); margin-top: var(--s-2); }
.section--dark .stat__l { color: var(--grey-30); }

/* Accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: start;
  display: flex; gap: var(--s-3); justify-content: space-between; align-items: center;
  padding-block: 1.375rem; font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.005em;
  transition: color var(--d-quick) var(--e-out);
}
.acc__btn:hover { color: var(--accent); }
.acc__sign { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
  transition: transform var(--d-settle) var(--e-out);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-settle) var(--e-out); }
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 1.375rem; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field > label { font-size: var(--t-sm); font-weight: 500; }
.field input, .field textarea, .field select {
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.875rem 1rem; font-size: var(--t-body); min-height: 48px;
  transition: border-color var(--d-quick) var(--e-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--grey-45); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline-offset: 1px; }
.field textarea { resize: vertical; }
.field__hint { font-size: var(--t-xs); color: var(--grey-60); }
.field__err { font-size: var(--t-xs); color: #B3261E; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E; }

/* Chip choices, real radios/checkboxes, visually a pill */
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: block; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.7rem 1.1rem; font-size: var(--t-sm); min-height: 44px;
  display: flex; align-items: center;
  transition: border-color var(--d-quick) var(--e-out), background-color var(--d-quick) var(--e-out), color var(--d-quick) var(--e-out);
}
.chip input:hover + span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.drop {
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: var(--s-4); text-align: center;
  transition: border-color var(--d-quick) var(--e-out), background-color var(--d-quick) var(--e-out);
}
.drop.is-over { border-color: var(--accent); background: var(--accent-sub); }

.steps { display: flex; align-items: center; gap: 0.5rem; }
.steps__bar { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.steps__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--d-settle) var(--e-out); }

/* Timeline (Process) */
.tl__rail { display: grid; gap: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr; }
.tl__step {
  position: relative; text-align: start; background: none; border: 0; cursor: pointer;
  padding: 1.5rem 1rem 1.5rem 0; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.4rem;
  transition: color var(--d-quick) var(--e-out);
}
.tl__dot { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--line); margin-top: -1.9rem; margin-bottom: 1.1rem; transition: background-color var(--d-settle) var(--e-out), transform var(--d-settle) var(--e-out); }
.tl__step:hover .tl__dot { background: var(--grey-45); }
.tl__step[aria-selected="true"] .tl__dot { background: var(--accent); transform: scale(1.6); }
.tl__step[aria-selected="true"] { color: var(--ink); }
.tl__name { font-size: var(--t-sm); font-weight: 500; }
.tl__dur  { font-size: var(--t-xs); color: var(--grey-60); }
@media (min-width: 48rem) {
  .tl__rail { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; }
  .tl__step { border-bottom: 0; border-inline-end: 1px solid var(--line); padding-inline: 1rem; }
  .tl__step:first-child { padding-inline-start: 0; }
  .tl__step:last-child  { border-inline-end: 0; padding-inline-end: 0; }
}
.tl__panel[hidden] { display: none; }
.tl__panel { animation: fadeUp var(--d-reveal) var(--e-out) both; }
.tl__facts { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Matrix (Materials) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.matrix { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--t-sm); }
.matrix th, .matrix td { text-align: start; padding: 1rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.matrix thead th { font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-60); }
.matrix thead button {
  background: none; border: 0; cursor: pointer; padding: 0.25rem 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; display: inline-flex; align-items: center; gap: 0.35rem;
}
.matrix thead button:hover { color: var(--ink); }
.matrix thead button::after { content: "↕"; font-size: 0.8em; opacity: 0.5; }
.matrix th[aria-sort="ascending"] button::after  { content: "↑"; opacity: 1; color: var(--accent); }
.matrix th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; color: var(--accent); }
.matrix tbody tr { transition: background-color var(--d-quick) var(--e-out); }
.matrix tbody tr:hover { background: var(--surface); }

.meter { display: flex; gap: 3px; }
.meter i { width: 22px; height: 3px; background: var(--line); border-radius: 2px; }
.meter i.on { background: var(--ink); }
.meter--accent i.on { background: var(--accent); }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.filters button {
  border: 1px solid var(--line); background: var(--white); color: var(--grey-60);
  border-radius: var(--r-pill); padding: 0.7rem 1.1rem; min-height: 44px; cursor: pointer; font-size: var(--t-sm);
  transition: border-color var(--d-quick) var(--e-out), background-color var(--d-quick) var(--e-out), color var(--d-quick) var(--e-out);
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.tile { display: flex; flex-direction: column; gap: 0.75rem; }
.tile[hidden] { display: none; }
.tile.is-filtering { animation: fadeUp var(--d-settle) var(--e-out) both; }

/* Diagrams */
.figure { margin: 0; }
.figure svg { width: 100%; height: auto; }
.figure figcaption { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--grey-60); }
.dgm-line { fill: none; stroke: var(--line); stroke-width: 1; }
.dgm-line--ink { stroke: var(--grey-45); }
.dgm-line--accent { stroke: var(--accent); }
.dgm-fill { fill: var(--white); stroke: var(--line); stroke-width: 1; }
.dgm-label { font-family: var(--font); font-size: 13px; letter-spacing: 0.01em; fill: var(--ink); }
.dgm-label--sm { font-size: 11px; fill: var(--grey-60); }
.dgm-label--lg { font-size: 16px; font-weight: 500; fill: var(--ink); }

/* Scroll draw-in */
.js .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.is-in .draw { animation: draw var(--d-draw) var(--e-out) forwards; }
.is-in .draw:nth-of-type(2) { animation-delay: 80ms; }
.is-in .draw:nth-of-type(3) { animation-delay: 160ms; }
.is-in .draw:nth-of-type(4) { animation-delay: 240ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Reveal on scroll */
.rv { transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); }
.js .rv { opacity: 0; transform: translateY(18px); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 80ms; }  .rv-d2 { transition-delay: 160ms; }
.rv-d3 { transition-delay: 240ms; } .rv-d4 { transition-delay: 320ms; }

/* Masked line reveal for display headings */
.rvline { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.rvline > span { display: block; transition: transform var(--d-reveal) var(--e-out); }
.js .rvline > span { transform: translateY(100%); }
.is-in .rvline > span { transform: none; }
.is-in .rvline:nth-child(2) > span { transition-delay: 90ms; }
.is-in .rvline:nth-child(3) > span { transition-delay: 180ms; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Masked rise, for figures and big numbers. Same device as the headlines. */
.js .rise { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.js .rise > span { display: block; transform: translateY(110%); transition: transform var(--d-reveal) var(--e-out); }
.is-in .rise > span, .rise.is-in > span { transform: none; }

/* Image wipe: the picture uncovers from the bottom and settles out of a
   slight scale. Cheap, GPU only, and it reads as craft rather than flash. */
.js .bed.imgrv img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path var(--d-draw) var(--e-out), transform var(--d-draw) var(--e-out);
}
.js .bed.imgrv.is-in img { clip-path: inset(0 0 0 0); transform: none; }
.js .bed.imgrv.is-in:hover img { transform: scale(1.03); }

/* Reading progress, a hairline under the sticky header. */
.hdr::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; background: var(--accent);
  transform: scaleX(var(--progress, 0)); transform-origin: left;
  transition: transform 120ms linear;
}
[dir="rtl"] .hdr::after { transform-origin: right; }

@media (prefers-reduced-motion: reduce) {
  .js .rise > span { transform: none; }
  .js .bed.imgrv img { clip-path: none; transform: none; }
  .hdr::after { display: none; }
}

/* Footer */
.ftr { background: var(--deep); color: var(--white); padding-block: var(--s-7) var(--s-4); }
.ftr a { text-decoration: none; font-size: var(--t-sm); transition: color var(--d-quick) var(--e-out); }
.ftr a:hover { color: var(--grey-30); }
.ftr__cols { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ftr__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.ftr__list { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.125rem; }
.ftr__base { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line-dark); }
.ftr__base, .ftr__base a { font-size: var(--t-xs); color: var(--grey-45); }

/* RTL */
[dir="rtl"] body { letter-spacing: 0; }
[dir="rtl"] .round:hover { transform: rotate(-45deg); }
[dir="rtl"] .round svg { transform: scaleX(-1); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1; transform: none; }
  .js .rvline > span { transform: none; }
  .js .draw { stroke-dashoffset: 0; }
  .bed:hover img { transform: none; }
  .round:hover { transform: none; }
}

/* Print */
@media print {
  .hdr, .drawer, .round, .burger { display: none !important; }
  body { color: #000; }
  .rv { opacity: 1; transform: none; }
}

/* --- Library: tabbed catalogues ----------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 1rem 1.5rem 1.125rem; margin-bottom: -1px;
  font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.005em;
  color: var(--grey-45); border-bottom: 2px solid transparent;
  transition: color var(--d-quick) var(--e-out), border-color var(--d-settle) var(--e-out);
}
.tabs button:first-child { padding-inline-start: 0; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs__count { font-size: var(--t-xs); color: var(--grey-45); font-weight: 400; margin-inline-start: 0.5rem; }
.tabpanel[hidden] { display: none; }

/* Catalogue grid: tighter than the marketing grids, this is a reference tool */
.cat { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .cat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 90rem) { .cat { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.item { display: flex; flex-direction: column; gap: 0.625rem; }
.item[hidden] { display: none; }
.item__fig { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); }
.item__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item__sw { position: absolute; inset: 0; display: grid; place-items: center; padding: 0.75rem; text-align: center; }
.item__sw span { font-size: var(--t-xs); color: var(--ink); opacity: 0.55; }
.item__cat { font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-60); }
.item__name { font-size: var(--t-sm); font-weight: 500; line-height: 1.25; }
.item__desc { font-size: var(--t-xs); color: var(--grey-60); line-height: 1.4; }
.item__ref { font-size: var(--t-xs); color: var(--grey-45); font-variant-numeric: tabular-nums; }
.item__fig::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(21,21,21,0.08); pointer-events: none;
}

/* A swatch tile stands in until the real photograph exists. It is a flat
   tone taken from the material, never a grey box, so the grid still reads. */
.sw-leather   { background: #8A5A3B; } .sw-leather-dk { background: #5C3A26; }
.sw-tan       { background: #B07A4E; } .sw-natural    { background: #D9C7A8; }
.sw-veg       { background: #C08E55; } .sw-suede      { background: #9C7B63; }
.sw-black     { background: #2A2724; } .sw-navy       { background: #2E3A4C; }
.sw-canvas    { background: #CFC6B2; } .sw-hemp       { background: #B9B191; }
.sw-denim     { background: #4A5C73; } .sw-nylon      { background: #3C4349; }
.sw-poly      { background: #6E7B82; } .sw-cork       { background: #C9A775; }
.sw-cactus    { background: #7E8C6A; } .sw-apple      { background: #A89465; }
.sw-coffee    { background: #6B4F3A; }
.sw-myco      { background: #B8A48C; } .sw-raffia     { background: #D6C49A; }
.sw-paper     { background: #BCA98C; } .sw-gold       { background: #B08D57; }
.sw-brass     { background: #9A7B4F; } .sw-nickel     { background: #A8ABAE; }
.sw-gun       { background: #4E5257; } .sw-palladium  { background: #C2C6C9; }
.sw-white     { background: #E8E4DC; } .sw-wool       { background: #8E8678; }


/* --- WhatsApp, fixed bottom right -------------------------------------- */
.wa {
  position: fixed; inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem); z-index: 60;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: #25D366; color: #FFFFFF;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 6px 20px -6px rgba(21, 21, 21, 0.4);
  transition: transform var(--d-settle) var(--e-out), box-shadow var(--d-settle) var(--e-out);
}
.wa svg { width: 30px; height: 30px; display: block; }
.wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(21, 21, 21, 0.45); }
.wa:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media print { .wa { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa:hover { transform: none; } }

/* --- Footer social + photography note ----------------------------------- */
.ftr__social {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-xs); color: var(--grey-45); text-decoration: none;
  transition: color var(--d-quick) var(--e-out);
}
.ftr__social:hover { color: var(--white); }
.ftr__note {
  margin-top: var(--s-3); padding-top: var(--s-2);
  font-size: 0.75rem; line-height: 1.5; color: #6B6B6B; max-width: 62ch;
}

/* --- hidden must win -----------------------------------------------------
   The UA stylesheet gives [hidden] display:none, but any author rule with a
   display beats it: .btn is inline-flex, so every "hidden" button in the
   wizard (Back, Send the brief) stayed on screen from step 1. */
[hidden] { display: none !important; }