/* Abdullah Processing: one stylesheet for every page.
   White pages; products, photos and grouped content sit in soft-cornered cards. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}

:root {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --frame: #f4f6f9;
  --surface: #f4f6f9;
  --card-line: #e2e6ee;
  --card-line-hover: #c4cee6;
  --radius: 16px;
  --shadow-rest: 0 1px 2px rgb(19 24 58 / .05);
  --shadow-hover: 0 22px 44px -26px rgb(19 24 58 / .4), 0 2px 8px -4px rgb(19 24 58 / .1);
  --field: #ffffff;
  --ink: #13183a;
  --navy: #252f69;
  --text: #3c4160;
  --muted: #5c6076;
  --blue: #1f58c4;
  --line: #d9dde6;
  --line-strong: #a0a6b5;
  --dark: #13183a;
  --on-dark: #ffffff;
  --on-dark-soft: #aeb3c9;
  --line-dark: rgb(255 255 255 / .16);
  --error: #b42318;
  --whatsapp: #168a43;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1320px;
  --gutter: 40px;
  --header-h: 72px;
  --section: clamp(56px, 6vw, 88px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 12px 18px; background: var(--ink); color: var(--on-dark); }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- Type */
h1, h2, h3 { color: var(--ink); font-weight: 600; }
h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2.25rem); line-height: 1.15; letter-spacing: -.015em; }
h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.005em; }
.label { display: block; margin-bottom: 14px; font-size: .75rem; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.lead { max-width: 560px; font-size: 1.0625rem; line-height: 1.65; color: var(--text); }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: block; }

/* ---------------------------------------------------------------- Layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding: var(--section) 0; }
.section--tight { padding-top: clamp(32px, 4vw, 48px); }
.band { background: var(--paper-2); }
.band-dark { background: var(--dark); color: var(--on-dark-soft); }
.band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark .label { color: #8fb0f0; }
.head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 32px; margin-bottom: clamp(32px, 4vw, 48px); padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.band-dark .head { border-color: var(--line-dark); }
.head .lead { justify-self: end; color: var(--muted); }
.band-dark .head .lead { color: var(--on-dark-soft); }


/* Image frames double as loading placeholders. */
.frame { position: relative; overflow: hidden; background: var(--frame); }
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.js .frame > img:not(.is-loaded) { opacity: 0; animation: img-fallback .3s 3s forwards; }
.frame > img.is-loaded { opacity: 1; transition: opacity .6s var(--ease); }
@keyframes img-fallback { to { opacity: 1; } }

/* ---------------------------------------------------------------- Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); font-size: .9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.btn-paper { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.btn-paper:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn-line-light { background: transparent; border-color: rgb(255 255 255 / .5); color: var(--on-dark); }
.btn-line-light:hover { border-color: var(--on-dark); background: transparent; }
.link { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 6px; transition: color .15s; }
.link:hover { color: var(--blue); }
.band-dark .link, .cta .link { color: var(--on-dark); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }

/* ---------------------------------------------------------------- Top bar and header */
.topbar { background: var(--dark); color: var(--on-dark-soft); font-size: .8125rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; }
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-contact { display: flex; gap: 28px; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 36px; min-height: var(--header-h); }
.brand { margin-right: auto; }
.brand img { width: 168px; }
.site-nav ul { display: flex; gap: 28px; }
.site-nav a { display: flex; align-items: center; min-height: var(--header-h); border-bottom: 2px solid transparent; font-size: .9375rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.site-nav a:hover { color: var(--blue); }
.site-nav a[aria-current="page"] { border-color: var(--ink); }
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); background: transparent; }
.menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; left: 11px; width: 20px; height: 2px; background: var(--ink); }
.menu-toggle::before { top: 16px; }
.menu-toggle::after { top: 24px; }
.menu-close::before { top: 20px; transform: rotate(45deg); }
.menu-close::after { top: 20px; transform: rotate(-45deg); }
.mobile-nav { display: none; }

/* ---------------------------------------------------------------- Home hero */
.hero { border-bottom: 1px solid var(--line); }
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; }
.js .hero-slide:not(.is-active) { visibility: hidden; }
html:not(.js) .hero-slide:not(:first-child) { display: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; min-height: clamp(480px, calc(100svh - var(--header-h) - 36px - 64px), 640px); padding-block: 40px; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; }
.hero-title { font-size: clamp(2.125rem, 1.5rem + 1.9vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; color: var(--ink); }
/* Each word sits in its own mask so the heading can rise word by word. */
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-title .w > span { display: inline-block; }
.hero .lead { margin-top: 20px; }
.hero-stage { display: flex; flex-direction: column; background: var(--paper-2); }
.stage-items { position: relative; flex: 1; min-height: 340px; }
.garment { position: absolute; bottom: 7%; width: 47%; }
.garment img { width: 100%; }
.garment--a { left: 5%; z-index: 2; }
.garment--b { right: 5%; bottom: 11%; width: 43%; }
.stage-caption { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
.stage-caption li { padding: 12px 18px; font-size: .875rem; color: var(--text); }
.stage-caption li + li { border-left: 1px solid var(--line-strong); }
.stage-caption strong { display: block; color: var(--ink); font-weight: 600; }
.hero-controls { display: flex; align-items: stretch; padding-right: 80px; border-top: 1px solid var(--line); }
.hero-tab { position: relative; flex: 1; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 20px 0 0; border: 0; background: transparent; text-align: left; font-size: .875rem; font-weight: 500; color: var(--muted); transition: color .15s; }
.hero-tab + .hero-tab { padding-left: 20px; border-left: 1px solid var(--line); }
.hero-tab span { font-size: .75rem; letter-spacing: .1em; }
.hero-tab em { font-style: normal; }
.hero-tab:hover, .hero-tab[aria-current="true"] { color: var(--ink); }
.hero-tab i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero-tab[aria-current="true"] i { transform: scaleX(1); }
.hero-pause { min-width: 92px; border: 0; border-left: 1px solid var(--line); background: transparent; font-size: .875rem; font-weight: 600; color: var(--ink); }
.hero-pause:hover { color: var(--blue); }

/* ---------------------------------------------------------------- Capability band */
.capabilities { background: var(--dark); color: var(--on-dark-soft); }
.capability-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.capability { padding: 26px 20px 28px; border-left: 1px solid var(--line-dark); }
.capability:first-child { border-left: 0; padding-left: 0; }
.capability .n { display: block; font-size: .75rem; letter-spacing: .12em; color: #8fb0f0; }
.capability h3 { margin-top: 10px; font-size: 1rem; color: var(--on-dark); }
.capability p { margin-top: 4px; font-size: .875rem; line-height: 1.55; }

/* ---------------------------------------------------------------- Stitched seam (process steps)
   Steps sit either side of a stitched seam. As the page scrolls, a needle sews the seam
   from step to step; --p (0 to 1) is how far it has got. Without motion it is fully sewn. */
.seam { position: relative; --node-y: 30px; --gap: 96px; }
.seam-steps { display: grid; grid-template-columns: minmax(0, 1fr) var(--gap) minmax(0, 1fr); grid-auto-rows: minmax(56px, auto); }
.seam-step { position: relative; grid-row: var(--row) / span 2; padding-bottom: 20px; }
.seam-step:nth-child(odd) { grid-column: 1; }
.seam-step:nth-child(even) { grid-column: 3; }
.seam-card { height: 100%; padding: 20px 22px 22px; border: 1px solid var(--line-strong); background: var(--paper); transition: opacity .5s var(--ease), border-color .5s var(--ease); }
.seam-card .n { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--blue); }
.seam-card h3 { margin-top: 8px; }
.seam-card p { margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.seam-step::before { content: ""; position: absolute; z-index: 2; top: calc(var(--node-y) - 7px); width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--paper); transition: background-color .3s; }
.band .seam-step::before { background: var(--paper-2); }
.seam-step::after { content: ""; position: absolute; top: calc(var(--node-y) - 1px); width: calc(var(--gap) / 2 - 7px); border-top: 2px dashed var(--line-strong); transition: border-color .3s; }
.seam-step:nth-child(odd)::before { right: calc(var(--gap) / -2 - 7px); }
.seam-step:nth-child(even)::before { left: calc(var(--gap) / -2 - 7px); }
.seam-step:nth-child(odd)::after { right: calc(var(--gap) / -2 + 7px); }
.seam-step:nth-child(even)::after { left: calc(var(--gap) / -2 + 7px); }
.seam-step.is-on::before, html:not(.motion) .seam-step::before { background: var(--ink); }
.seam-step.is-on::after, html:not(.motion) .seam-step::after { border-top-color: var(--ink); }
.seam-step.is-on .seam-card { border-color: var(--ink); }
.motion .seam-step:not(.is-on) .seam-card { opacity: .45; }
.seam-rail { --p: 1; position: absolute; z-index: 1; left: 50%; top: var(--node-y); bottom: var(--node-y); width: 2px; transform: translateX(-50%); }
.seam-thread, .seam-sewn { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--stitch) 0 9px, transparent 9px 15px); }
.seam-thread { --stitch: var(--line-strong); }
.seam-sewn { --stitch: var(--ink); clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0); }
.seam-needle { display: none; position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 12px; height: 64px; fill: var(--ink); transform: translate(-50%, -12px); }
.motion .seam-needle { display: block; }

/* ---------------------------------------------------------------- Product rail and tiles */
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.rail-buttons { display: flex; align-items: center; gap: 20px; }
.rail-btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); background: transparent; font-size: .9375rem; font-weight: 600; color: var(--ink); transition: background-color .15s, color .15s; }
.rail-btn + .rail-btn { margin-left: -19px; }
.rail-btn:hover:not(:disabled) { background: var(--ink); color: var(--on-dark); }
.rail-btn:disabled { color: var(--line-strong); cursor: default; }
.rail-count { font-size: .9375rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.tile { display: block; scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.tile .frame { aspect-ratio: 4 / 5; }
.tile .frame > img { position: absolute; left: 10%; top: 8%; width: 80%; height: 84%; object-fit: contain; }
.tile .n { position: absolute; top: 14px; left: 16px; z-index: 1; font-size: .8125rem; letter-spacing: .1em; color: var(--muted); }
.tile-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink); }
.tile-meta h3 { font-size: 1rem; }
.tile-meta span { font-size: .875rem; color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------- Units (facilities) */
.units { border-top: 1px solid var(--line); }
.unit { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.unit .n { font-size: 2rem; font-weight: 300; line-height: 1; color: var(--blue); }
.unit h3 { font-size: clamp(1.375rem, 1.15rem + .6vw, 1.625rem); }
.unit p { max-width: 460px; margin-top: 12px; color: var(--muted); }
.unit .tags { margin-top: 16px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.unit .frame { aspect-ratio: 3 / 2; }

/* ---------------------------------------------------------------- Statements (why choose) */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split-head { position: sticky; top: calc(var(--header-h) + 32px); }
.split-head .lead { margin-top: 16px; color: var(--muted); }
.statements { border-top: 1px solid var(--line); }
.statements li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.statements .n { padding-top: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--blue); }
.statements p { margin-top: 6px; font-size: .9375rem; color: var(--muted); }

/* ---------------------------------------------------------------- Packaging */
.pack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.pack .frame { aspect-ratio: 4 / 3; }
.pack figcaption { padding-top: 12px; font-size: .875rem; color: var(--muted); }
.pack-list { border-top: 1px solid var(--line); }
.pack-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pack-list .n { padding-top: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--blue); }
.pack-list p { margin-top: 4px; font-size: .9375rem; color: var(--muted); }

/* ---------------------------------------------------------------- Dispatch (dark) */
.dispatch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dispatch-grid .lead { margin-top: 16px; color: var(--on-dark-soft); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--line-dark); }
.facts div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line-dark); }
.facts div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line-dark); }
.facts dt { font-weight: 600; color: var(--on-dark); }
.facts dd { margin-top: 2px; font-size: .875rem; }
.dispatch-grid .frame { aspect-ratio: 4 / 3; background: #262c52; }

/* ---------------------------------------------------------------- Call to action */
.cta { background: var(--navy); color: #c9cdea; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(56px, 6vw, 88px); }
.cta .label { color: #a9c1f5; }
.cta h2 { color: var(--on-dark); }
.cta p { max-width: 520px; margin-top: 16px; font-size: 1.0625rem; }
.cta .frame { aspect-ratio: 3 / 2; background: #2f3a78; }

/* ---------------------------------------------------------------- FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-grid .lead { margin-top: 16px; color: var(--muted); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 18px 44px 18px 0; list-style: none; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--ink); transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 2px; background: currentColor; }
.faq summary::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq-answer { overflow: hidden; }
.faq-answer p { max-width: 620px; padding: 0 44px 20px 0; font-size: .9375rem; color: var(--muted); }

/* ---------------------------------------------------------------- Inner page header */
.page-head { border-bottom: 1px solid var(--line); }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: clamp(36px, 4vw, 56px); }
.page-head-grid--single { grid-template-columns: minmax(0, 900px); }
.page-head-grid--centered,
.page-head-grid--stacked { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.page-head-grid--stacked { gap: clamp(28px, 4vw, 40px); }
.page-head-grid--centered > div,
.page-head-grid--stacked > .page-head-copy { width: 100%; max-width: 760px; }
.page-head .page-head-grid--stacked > .frame { width: min(100%, 880px); aspect-ratio: 2 / 1; }
.page-head-grid--stacked > .shop-stage { width: min(100%, 680px); min-height: 0; aspect-ratio: 17 / 9; }
.page-head-grid--centered .lead,
.page-head-grid--stacked .lead { margin-inline: auto; }
.page-head .lead { margin-top: 16px; color: var(--muted); }
.page-head .frame { aspect-ratio: 16 / 10; }

/* Products page */
.shop-stage { position: relative; min-height: 340px; background: var(--paper-2); }
.shop-stage img { position: absolute; bottom: 8%; }
.shop-stage .g1 { left: 2%; width: 34%; }
.shop-stage .g2 { left: 24%; bottom: 5%; z-index: 2; width: 38%; }
.shop-stage .g3 { right: 20%; bottom: 10%; z-index: 1; width: 32%; }
.shop-stage .g4 { right: 2%; bottom: 4%; z-index: 3; width: 26%; }
.filters { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; margin-bottom: 32px; border: 1px solid var(--line-strong); }
.filter { min-height: 44px; padding: 0 18px; border: 0; background: transparent; font-size: .9375rem; font-weight: 600; color: var(--ink); transition: background-color .15s, color .15s; }
.filter + .filter { border-left: 1px solid var(--line-strong); }
.filter:hover { color: var(--blue); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; }
.product .frame { aspect-ratio: 4 / 5; }
.product .frame > img { position: absolute; left: 10%; top: 8%; width: 80%; height: 84%; object-fit: contain; }
.product-body { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink); }
.product-body .cat { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.product-body h3 { margin-top: 6px; }
.product-body p { margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.product-body .link { display: inline-block; margin-top: 14px; font-size: .9375rem; }
.note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted); }

/* About */
.prose-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); }
.prose p { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.prose p + p { margin-top: 16px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.details { border-top: 1px solid var(--line); }
.details div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.details dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.details dd { margin-top: 4px; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.details a { color: inherit; text-decoration: none; }
.details a:hover { color: var(--blue); text-decoration: underline; }
.details .small { display: block; margin-top: 2px; font-size: .875rem; font-weight: 400; color: var(--muted); }
.form { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line-strong); background: var(--field); }
.form-head { margin-bottom: 22px; }
.form-head h2 { font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); }
.form-head p { margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.field label small { font-size: .875rem; font-weight: 400; color: var(--muted); }
.field input, .field select { height: 48px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #8a8f9e; background: #fff; color: var(--ink); transition: border-color .15s; }
.field input::placeholder, .field textarea::placeholder { color: #6b6f80; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.field textarea { min-height: 140px; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .hint { font-size: .8125rem; color: var(--muted); }
.field .error { font-size: .875rem; font-weight: 600; color: var(--error); }
.field .error:empty { display: none; }
.field .suggest { justify-self: start; padding: 0; border: 0; background: none; font-size: .875rem; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.field-foot { display: flex; justify-content: space-between; gap: 16px; }
.counter { margin-left: auto; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.form-foot p { flex: 1 1 260px; font-size: .875rem; color: var(--muted); }
.form-status { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line-strong); font-weight: 600; color: var(--ink); }
.form-status.is-error { border-color: var(--error); color: var(--error); }
.form-status:empty { display: none; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Policy pages */
.policy { max-width: 760px; }
.policy h2 { margin: 36px 0 10px; font-size: 1.25rem; letter-spacing: -.01em; }
.policy p + p { margin-top: 16px; }
.policy ul { margin-top: 12px; padding-left: 20px; list-style: square; }
.policy li + li { margin-top: 6px; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: var(--dark); color: var(--on-dark-soft); font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.4fr; gap: 32px; padding-block: 56px 40px; }
.footer-brand > a { display: block; width: min(100%, 320px); padding: 22px 12px; border-radius: 14px; background: var(--paper); }
.footer-brand img { width: 100%; }
.footer-brand p { max-width: 280px; margin-top: 18px; }
.site-footer h3 { margin-bottom: 14px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8fb0f0; }
.site-footer li + li { margin-top: 6px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-contact dt { font-size: .8125rem; }
.footer-contact dd { overflow-wrap: anywhere; }
.footer-contact dd + dt { margin-top: 10px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 20px 0 24px; border-top: 1px solid var(--line-dark); font-size: .875rem; }
.footer-bottom nav { display: flex; gap: 24px; padding-right: 72px; }

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; place-items: center; width: 50px; height: 50px; background: var(--whatsapp); color: #fff; transition: background-color .15s; }
.wa-float:hover { background: #0f6b33; }
.wa-float svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- Home introduction: the original full brand artwork */
.site-splash { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; padding: 32px 20px 84px; background: var(--paper); }
.splash-pending { overflow: hidden; }
.splash-pending .site-splash { display: flex; }
.splash-art { display: block; width: min(600px, 92vw, 76svh); height: auto; overflow: visible; }
.splash-pending.motion [data-splash-part] { opacity: 0; }
.splash-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 10px 20px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: .875rem; }
.splash-skip:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------- Cards and surfaces
   The page stays white. Products, photos and grouped content sit in soft-cornered cards on a
   cool grey surface, so each item reads as one unit. On hover a card lifts and its image eases
   forward; movement runs only while animations are on, colour and shadow changes always do. */
.frame { border-radius: var(--radius); isolation: isolate; }
.frame > img.is-loaded { transition: opacity .6s var(--ease), scale .7s var(--ease), translate .7s var(--ease); }
:is(.tile, .product, .seam-card, .statements li, .pack-list li, .unit, .faq details, .details > div) {
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-rest);
  transition: border-color .4s var(--ease), box-shadow .45s var(--ease), translate .45s var(--ease), opacity .5s var(--ease);
}

/* Product cards: image on the grey surface, details below a hairline. */
.tile, .product { display: flex; flex-direction: column; overflow: hidden; }
:is(.tile, .product) .frame { border-radius: 0; }
.tile-meta { margin: 0; padding: 14px 16px 16px; border-top: 1px solid var(--card-line); }
.product-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; margin: 0; padding: 16px 18px 18px; border-top: 1px solid var(--card-line); }
.product-body .link { margin-top: auto; padding-top: 14px; }
:is(.tile, .product) h3 { transition: color .3s; }
.track { padding: 10px 2px 30px; margin: -10px -2px -30px; scroll-padding-inline: 2px; }

/* Stitched seam steps */
.seam-step::before { border-radius: 50%; }

/* Why choose us: a two-column grid of cards */
.statements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border-top: 0; }
.statements li { display: block; padding: 20px 20px 22px; }
.statements li > div { margin-top: 14px; }
:is(.statements, .pack-list) .n { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--surface); }

/* Packing steps */
.pack-list { display: grid; gap: 12px; border-top: 0; }
.pack-list li { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; }

/* Facility units */
.units { display: grid; gap: 16px; border-top: 0; }
.units .unit { align-items: center; padding: 22px; }
.unit .frame { border-radius: 12px; }

/* FAQ */
.faq { display: grid; gap: 10px; border-top: 0; }
.faq details { padding: 0 20px; }
.faq details[open] { border-color: var(--card-line-hover); }
.faq summary { padding: 18px 32px 18px 0; }
.faq summary::before, .faq summary::after { right: 2px; }
.faq-answer p { padding: 0 0 20px; }

/* Contact */
.details { display: grid; gap: 12px; border-top: 0; }
.details > div { padding: 16px 18px; }
.form { border-color: var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-rest); }
:is(.field input, .field select, .field textarea, .form-status) { border-radius: 10px; }

/* Stages behind the floating garments */
.hero-stage, .shop-stage { overflow: hidden; border-radius: 20px; background: var(--surface); }
.stage-caption, .stage-caption li + li { border-color: var(--card-line); }

/* Controls */
:is(.btn, .menu-toggle, .splash-skip) { border-radius: 10px; }
.filters { overflow: hidden; border-radius: 12px; }
.rail-btn:first-child { border-radius: 10px 0 0 10px; }
.rail-btn:last-child { border-radius: 0 10px 10px 0; }
.wa-float { border-radius: 14px; }

/* Hover and focus */
:is(.tile, .product):focus-within { border-color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  :is(.tile, .product, .seam-card, .statements li, .pack-list li, .unit, .faq details, .details > div):hover { border-color: var(--card-line-hover); box-shadow: var(--shadow-hover); }
  :is(.tile, .product):hover h3 { color: var(--blue); }
}
html[data-motion="on"] :is(.tile, .product):focus-within .frame > img { scale: 1.07; translate: 0 -6px; }
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] :is(.tile, .product, .seam-card, .statements li, .pack-list li):hover { translate: 0 -6px; }
  html[data-motion="on"] :is(.tile, .product):hover .frame > img { scale: 1.07; translate: 0 -6px; }
  html[data-motion="on"] .frame:hover > img:where(:not([data-parallax])) { scale: 1.045; }
}
@media (hover: none) {
  html[data-motion="on"] :is(.tile, .product):active { scale: .985; }
}

/* ---------------------------------------------------------------- Motion: hidden only until revealed */
.motion [data-reveal], .motion [data-stagger] > * { opacity: 0; }
.motion [data-lines] .line > span, .motion .hero-title .w > span { transform: translateY(105%); }
.motion [data-intro], .motion [data-garment] { opacity: 0; }
.motion:not(.motion-ready) :is([data-reveal], [data-stagger] > *, [data-intro], [data-garment], .seam-card) { animation: reveal-fallback .5s 2.5s forwards; }
.motion:not(.motion-ready) :is([data-lines] .line > span, .hero-title .w > span) { animation: lines-fallback .5s 2.5s forwards; }
@keyframes reveal-fallback { to { opacity: 1; } }
@keyframes lines-fallback { to { transform: none; } }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1240px) {
  :root { --gutter: 32px; }
  .site-nav ul { gap: 20px; }
  .header-inner { gap: 24px; }
  .brand img { width: 156px; }
}
@media (max-width: 1080px) {
  .site-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .mobile-nav { position: fixed; inset: 0; z-index: 100; display: block; visibility: hidden; }
  .mobile-nav.is-open { visibility: visible; }
  .mobile-nav-panel { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) 32px; background: var(--paper); opacity: 0; transition: opacity .25s var(--ease); }
  .mobile-nav.is-open .mobile-nav-panel { opacity: 1; }
  .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); border-bottom: 1px solid var(--line); }
  .mobile-nav-head img { width: 156px; }
  .mobile-nav-panel nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
  .mobile-nav-panel nav a[aria-current="page"] { color: var(--blue); }
  .mobile-nav-panel .btn { margin-top: 28px; }
  .mobile-nav-contact { display: grid; gap: 6px; margin-top: 24px; }
  .mobile-nav-contact a { color: var(--ink); }
  .capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capability:nth-child(4) { padding-left: 0; border-left: 0; }
  .capability:nth-child(n+4) { border-top: 1px solid var(--line-dark); }
  .seam { --gap: 72px; }
  .track { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; }
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unit { grid-template-columns: 64px minmax(0, 1fr); }
  .unit .frame { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-block: 24px 32px; }
  .hero-stage { order: -1; } /* stacked: the floating garments come first, then the heading */
  .stage-items { min-height: clamp(280px, 56vw, 460px); }
}
@media (max-width: 860px) {
  .page-head-grid, .split, .pack, .dispatch-grid, .cta-grid, .faq-grid, .prose-split, .contact-grid, .head { grid-template-columns: 1fr; }
  .stage-items { min-height: clamp(260px, 74vw, 460px); }
  .head { gap: 20px; }
  .head .lead { justify-self: start; }
  .split-head { position: static; }
  .facts { grid-template-columns: 1fr; }
  .facts div:nth-child(even) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; --header-h: 64px; }
  .topbar-inner { justify-content: center; }
  .topbar-inner > p:first-child { display: none; }
  .brand img { width: 140px; }
  .hero-controls { flex-wrap: wrap; padding-right: 0; }
  .hero-tab { flex: 1 1 33%; min-height: 52px; padding: 0 8px 0 0; font-size: .875rem; }
  .hero-tab + .hero-tab { padding-left: 8px; }
  .hero-tab em { display: none; }
  .hero-pause { flex: 1 1 100%; min-height: 48px; border-top: 1px solid var(--line); border-left: 0; }
  .stage-caption li { padding: 10px 12px; font-size: .8125rem; }
  .actions .btn { flex: 1 1 100%; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability, .capability:first-child, .capability:nth-child(4) { padding: 18px 0; border-left: 0; }
  .capability + .capability { border-top: 1px solid var(--line-dark); }
  /* One column: the seam runs down the left edge. */
  .seam-steps { grid-template-columns: minmax(0, 1fr); padding-left: 40px; }
  .seam-step:nth-child(n) { grid-column: 1; grid-row: auto; padding-bottom: 14px; }
  .seam-step:nth-child(n)::before { left: -37px; right: auto; }
  .seam-step:nth-child(n)::after { left: -23px; right: auto; width: 23px; }
  .seam-rail { left: 10px; }
  .rail-head { flex-wrap: wrap; }
  .track { grid-auto-columns: 74%; gap: 16px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .product-body p { display: none; }
  .filters { width: 100%; }
  .filter { flex: 1 1 50%; border-bottom: 1px solid var(--line-strong); }
  .filter + .filter { border-left: 0; }
  .filter:nth-child(even) { border-left: 1px solid var(--line-strong); }
  .unit { grid-template-columns: 1fr; gap: 16px; }
  .unit .frame { grid-column: auto; }
  .statements { grid-template-columns: minmax(0, 1fr); }
  .units .unit { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 48px 32px; }
  .footer-bottom { padding-bottom: 88px; }
  .footer-bottom nav { padding-right: 0; }
  .wa-float { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .shop-stage { min-height: 260px; }
}