/* SS Traders design tokens. Change a value here and it changes site-wide. */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  color-scheme: light;
  --orange-500: #ff6a00; --orange-600: #e85d00; --orange-700: #b84700; --orange-100: #fff1e6;
  --black: #0b0b0c; --charcoal-900: #161618; --charcoal-800: #26262a;
  --gray-500: #77777d; --gray-600: #5c5c62; --gray-400: #a9a9ae; --gray-200: #e4e4e1; --gray-100: #f4f4f2; --white: #ffffff;
  --danger-600: #c62828; --danger-300: #ff8a80; --success-600: #1b7a3d; --whatsapp-500: #25d366;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-10: 40px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 999px;
  --shadow-header: 0 1px 0 #26262a; --shadow-float: 0 8px 24px rgba(11, 11, 12, 0.28);
  --container-max: 1160px; --header-height: 64px; --tap-min: 44px;
  --font-display: Archivo, "Arial Black", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* SS Traders component styles. Every value is a token from tokens.css.
   Dark sections set class "ss-dark" on the section; components inside adapt. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; }

.ss-dark { background: var(--black); color: var(--white); }
.ss-alt { background: var(--gray-100); }
.ss-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .ss-container { padding: 0 var(--space-6); } }

/* Focus: solid ring on every ground */
.ss-btn:focus-visible, .ss-nav a:focus-visible, .ss-input:focus-visible, .ss-footer a:focus-visible, .ss-link:focus-visible, .ss-fab:focus-visible, .ss-menu-btn:focus-visible {
  outline: 3px solid var(--orange-700); outline-offset: 2px; border-radius: var(--radius-sm);
}
.ss-dark .ss-btn:focus-visible, .ss-dark a:focus-visible, .ss-dark .ss-input:focus-visible, .ss-dark .ss-menu-btn:focus-visible, .ss-fab:focus-visible { outline-color: var(--orange-500); }
.ss-dark .ss-btn--primary:focus-visible { outline-color: var(--white); }

/* Type helpers */
.ss-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-700); }
.ss-dark .ss-label { color: var(--orange-500); }
.ss-h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
@media (min-width: 768px) { .ss-h2 { font-size: 34px; } }
.ss-link { color: var(--orange-700); font-weight: 600; text-underline-offset: 3px; }
.ss-dark .ss-link { color: var(--orange-500); }

/* Button */
.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-3) var(--space-6); border: 1.5px solid transparent; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.ss-btn svg { width: 20px; height: 20px; flex: none; }
.ss-btn--primary { background: var(--orange-500); color: var(--black); }
.ss-btn--primary:hover { background: var(--orange-600); }
.ss-btn--secondary { background: transparent; color: var(--black); border-color: var(--gray-500); }
.ss-btn--secondary:hover { border-color: var(--black); }
.ss-dark .ss-btn--secondary { color: var(--white); }
.ss-dark .ss-btn--secondary:hover { border-color: var(--white); }
.ss-btn--whatsapp { background: var(--whatsapp-500); color: var(--black); }
.ss-btn--sm { padding: var(--space-2) var(--space-3); font-size: 14px; white-space: nowrap; }
.ss-btn--block { display: flex; width: 100%; }
.ss-btn[disabled], .ss-btn[aria-disabled="true"] { background: var(--gray-200); color: var(--gray-600); border-color: transparent; cursor: not-allowed; }

/* Floating WhatsApp button (phones only in the site: hide from 768px up) */
.ss-fab { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--whatsapp-500); color: var(--black); box-shadow: var(--shadow-float); text-decoration: none; }
.ss-fab svg { width: 28px; height: 28px; }

/* Header */
.ss-header { background: var(--black); color: var(--white); position: sticky; top: 0; z-index: 50; }
.ss-header.is-scrolled { box-shadow: var(--shadow-header); }
.ss-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-height); }
.ss-header__logo { display: inline-flex; }
.ss-header__logo img { height: 28px; width: auto; display: block; }
.ss-nav { display: none; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.ss-nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--gray-400); text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: color 150ms ease; }
.ss-nav a:hover { color: var(--white); }
.ss-nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--orange-500); }
.ss-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.ss-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); background: transparent; color: var(--white); border: 1.5px solid var(--gray-500); border-radius: var(--radius-md); cursor: pointer; }
.ss-menu-btn svg { width: 22px; height: 22px; }
@media (min-width: 1040px) {
  .ss-nav { display: flex; }
  .ss-menu-btn { display: none; }
  .ss-header__logo img { height: 32px; }
}

/* Service card */
.ss-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.ss-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--orange-100); color: var(--black); }
.ss-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ss-card__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.005em; margin: 0; }
.ss-card__text { margin: 0; color: var(--gray-600); }
.ss-card__action { margin-top: auto; padding-top: var(--space-2); }
.ss-dark .ss-card { background: var(--charcoal-900); border-color: var(--charcoal-800); }
.ss-dark .ss-card__icon { background: var(--black); color: var(--orange-500); }
.ss-dark .ss-card__text { color: var(--gray-400); }

/* Steps */
.ss-steps { display: grid; gap: var(--space-6); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ss-step { position: relative; padding-left: 60px; }
.ss-step__num { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--orange-500); color: var(--black); font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.ss-step__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; margin: 0 0 var(--space-1); padding-top: 9px; }
.ss-step__text { margin: 0; color: var(--gray-600); }
.ss-dark .ss-step__text { color: var(--gray-400); }
@media (min-width: 768px) {
  .ss-steps { grid-template-columns: repeat(4, 1fr); }
  .ss-step { padding-left: 0; padding-top: var(--space-6); border-top: 1px solid var(--gray-200); }
  .ss-dark .ss-step { border-top-color: var(--charcoal-800); }
  .ss-step__num { position: static; margin-bottom: var(--space-4); }
  .ss-step__title { padding-top: 0; }
}

/* Form field */
.ss-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ss-field__label { font-weight: 600; font-size: 15px; }
.ss-field__req { color: var(--orange-700); }
.ss-dark .ss-field__req { color: var(--orange-500); }
.ss-input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--white); color: var(--black); border: 1.5px solid var(--gray-500); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 16px; line-height: 1.4; }
textarea.ss-input { min-height: 112px; resize: vertical; }
.ss-input::placeholder { color: var(--gray-600); opacity: 1; }
.ss-input:hover { border-color: var(--black); }
.ss-field__help { font-size: 14px; line-height: 1.5; color: var(--gray-600); margin: 0; }
.ss-field__error { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--danger-600); margin: 0; }
.ss-field.is-invalid .ss-input { border-color: var(--danger-600); border-width: 2px; }
.ss-dark .ss-input { background: var(--charcoal-900); color: var(--white); }
.ss-dark .ss-input::placeholder, .ss-dark .ss-field__help { color: var(--gray-400); }
.ss-dark .ss-input:hover { border-color: var(--white); }
.ss-dark .ss-field__error { color: var(--danger-300); }
.ss-dark .ss-field.is-invalid .ss-input { border-color: var(--danger-300); }
.ss-choice { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ss-choice label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); border: 1.5px solid var(--gray-500); border-radius: var(--radius-md); font-weight: 600; cursor: pointer; }
.ss-choice input { accent-color: var(--orange-700); width: 18px; height: 18px; margin: 0; }
.ss-choice label:has(input:checked) { border-color: var(--black); background: var(--orange-100); }
.ss-choice label:has(input:focus-visible) { outline: 3px solid var(--orange-700); outline-offset: 2px; }

/* Image placeholder */
.ss-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6); aspect-ratio: 4 / 3; background-color: var(--gray-100); background-image: linear-gradient(var(--gray-200) 1px, transparent 1px), linear-gradient(90deg, var(--gray-200) 1px, transparent 1px); background-size: 24px 24px; border: 1.5px dashed var(--gray-500); border-radius: var(--radius-lg); color: var(--gray-600); text-align: center; }
.ss-placeholder--wide { aspect-ratio: 16 / 9; }
.ss-placeholder svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ss-placeholder__label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); background: var(--gray-100); padding: 0 var(--space-2); }
.ss-placeholder__note { font-size: 14px; line-height: 1.4; background: var(--gray-100); padding: 0 var(--space-2); }
.ss-dark .ss-placeholder { background-color: var(--charcoal-900); background-image: linear-gradient(var(--charcoal-800) 1px, transparent 1px), linear-gradient(90deg, var(--charcoal-800) 1px, transparent 1px); color: var(--gray-400); }
.ss-dark .ss-placeholder__label { color: var(--white); background: var(--charcoal-900); }
.ss-dark .ss-placeholder__note { background: var(--charcoal-900); }

/* [TO CONFIRM] tag */
.ss-confirm { display: inline; padding: 1px 6px; background: var(--orange-100); color: var(--black); border: 1px dashed var(--orange-700); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.82em; font-weight: 500; letter-spacing: 0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* CTA band */
.ss-cta { background: var(--orange-500); color: var(--black); padding: var(--space-10) 0; }
.ss-cta__inner { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.ss-cta__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.ss-cta__text { margin: var(--space-2) 0 0; font-size: 17px; }
.ss-cta .ss-btn--primary { background: var(--black); color: var(--white); }
.ss-cta .ss-btn--primary:hover { background: var(--charcoal-900); }
.ss-cta .ss-btn:focus-visible { outline-color: var(--black); }
@media (min-width: 768px) {
  .ss-cta { padding: var(--space-16) 0; }
  .ss-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .ss-cta__title { font-size: 40px; }
}

/* Footer */
.ss-footer { background: var(--black); color: var(--gray-400); padding: var(--space-16) 0 var(--space-6); font-size: 15px; }
.ss-footer__grid { display: grid; gap: var(--space-10); }
.ss-footer__logo img { height: 32px; width: auto; display: block; margin-bottom: var(--space-4); }
.ss-footer h2 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin: 0 0 var(--space-3); }
.ss-footer ul { list-style: none; margin: 0; padding: 0; }
.ss-footer li a { display: inline-flex; align-items: center; min-height: 36px; }
.ss-footer a { color: var(--gray-400); text-decoration: none; }
.ss-footer a:hover { color: var(--white); text-decoration: underline; }
.ss-footer address { font-style: normal; }
.ss-footer__legal { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--charcoal-800); font-size: 14px; display: flex; flex-direction: column; gap: var(--space-2); }
.ss-footer__legal p { margin: 0; }
@media (min-width: 768px) {
  .ss-footer__grid { grid-template-columns: 1.4fr 1.6fr 1fr 1.2fr; }
  .ss-footer__legal { flex-direction: row; justify-content: space-between; }
}

/* Scroll reveal: add .is-visible from an IntersectionObserver */
.ss-reveal { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; }
.ss-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ss-reveal { opacity: 1; transform: none; transition: none; }
  .ss-btn, .ss-nav a { transition: none; }
}

/* Site-level layout: sections, hero and Home page blocks. Components live in components.css. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.ss-icon { width: 24px; height: 24px; flex: none; }
.ss-btn .ss-icon { width: 20px; height: 20px; }
.ss-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--orange-500); color: var(--black); font-weight: 700; border-radius: var(--radius-md); }
.ss-skip:focus { top: var(--space-2); }
.ss-header { top: env(safe-area-inset-top, 0px); }

/* Mobile menu sheet */
@media (max-width: 1039px) {
  .ss-nav.is-open { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-2) var(--space-4) var(--space-4); background: var(--charcoal-900); border-top: 1px solid var(--charcoal-800); box-shadow: var(--shadow-float); }
  .ss-nav.is-open a { width: 100%; min-height: 52px; font-size: 15px; border-bottom: 1px solid var(--charcoal-800); }
  .ss-nav.is-open a[aria-current="page"] { border-bottom-color: var(--orange-500); }
}

/* Floating WhatsApp button: phones only */
.ss-fab--float { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: 40; }
@media (min-width: 768px) { .ss-fab--float { display: none; } }
.ss-footer__mail { margin: var(--space-2) 0 0; }
.ss-footer { padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .ss-footer { padding-bottom: var(--space-6); } }

/* Sections */
.section { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-16); }
@media (min-width: 768px) { .section { padding-block: var(--space-24); } .section--tight { padding-block: var(--space-16); } }
.section__head { display: grid; gap: var(--space-3); max-width: 720px; margin-bottom: var(--space-10); }
.section__head > * { margin: 0; }
.section__lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--gray-600); max-width: 60ch; }
.section__more { margin: var(--space-10) 0 0; }

/* Hero */
.hero { overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-10); padding-block: var(--space-10) 0; }
.hero__text { display: grid; gap: var(--space-6); min-width: 0; }
.hero__text > * { margin: 0; }
.hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 9.5vw, 72px); line-height: 0.98; letter-spacing: -0.02em; }
.hero__accent { color: var(--orange-500); }
.hero__lead { font-size: 19px; line-height: 1.55; color: var(--gray-400); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__art { height: 168px; margin-right: calc(-1 * var(--space-4)); }
.hero__art svg { display: block; width: 100%; height: 100%; }
.hero__art rect { rx: 4px; }
.t-o5 { fill: var(--orange-500); } .t-o7 { fill: var(--orange-700); } .t-o1 { fill: var(--orange-100); }
.t-wh { fill: var(--white); } .t-c9 { fill: var(--charcoal-900); } .t-c8 { fill: var(--charcoal-800); }
.t-plus { stroke: var(--orange-500); stroke-width: 1.5; fill: none; }
.t-plane { fill: var(--black); }
.hero__ticker { border-top: 1px solid var(--charcoal-800); margin-top: var(--space-10); }
.hero__scope { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0 auto; padding-block: var(--space-4); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); }
.hero__scope li::before { content: "+"; color: var(--orange-500); margin-right: var(--space-2); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-16); padding-block: var(--space-24) var(--space-16); }
  .hero__art { height: 360px; margin-right: calc(-1 * var(--space-6)); }
  .hero__ticker { margin-top: 0; }
}

/* Services overview */
.svc-group + .svc-group { margin-top: var(--space-10); }
.svc-group__name { margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--gray-200); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); }
.svc-grid { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc { display: flex; gap: var(--space-4); align-items: flex-start; height: 100%; padding: var(--space-4); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); color: var(--black); text-decoration: none; transition: border-color 150ms ease, background-color 150ms ease; }
.svc:hover { border-color: var(--black); }
.svc:hover .ss-card__icon { background: var(--orange-500); }
.svc:focus-visible { outline: 3px solid var(--orange-700); outline-offset: 2px; }
.svc .ss-card__icon { flex: none; transition: background-color 150ms ease; }
.svc__body { display: grid; gap: var(--space-1); min-width: 0; }
.svc__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.svc__text { color: var(--gray-600); font-size: 15px; line-height: 1.5; }

/* Why choose us */
.why { display: grid; gap: var(--space-10); }
.why__intro { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.why__intro > * { margin: 0; }
.why__intro .ss-placeholder { margin-top: var(--space-4); }
.why__list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; min-width: 0; }
.why__list li { display: flex; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--gray-200); }
.why__list li:last-child { border-bottom: 1px solid var(--gray-200); }
.why__list .ss-card__icon { flex: none; }
.why__list h3, .contact-strip h3 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.why__list p, .contact-strip p { margin: 0; color: var(--gray-600); }
@media (min-width: 900px) { .why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }

/* Airport highlight */
.airport__grid { display: grid; gap: var(--space-10); align-items: center; }
.airport__grid > * { min-width: 0; }
.airport__title { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6.5vw, 48px); line-height: 1.04; letter-spacing: -0.02em; }
.airport__lead { margin: var(--space-6) 0 0; font-size: 19px; line-height: 1.55; color: var(--gray-400); max-width: 50ch; }
.airport__facts { display: grid; gap: var(--space-4); margin: var(--space-10) 0 0; }
.airport__facts div { padding-top: var(--space-4); border-top: 1px solid var(--charcoal-800); }
.airport__facts dt { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); }
.airport__facts dd { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.airport__facts dd .ss-confirm { font-size: 13px; }
@media (min-width: 600px) { .airport__facts { grid-template-columns: 1.6fr 1fr; gap: var(--space-6); } }
@media (min-width: 900px) { .airport__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-16); } }

/* Contact strip */
.contact-strip { display: grid; gap: var(--space-6); list-style: none; margin: var(--space-10) 0 0; padding: 0; }
.contact-strip li { display: flex; gap: var(--space-4); min-width: 0; }
.contact-strip li > div { min-width: 0; overflow-wrap: anywhere; }
.contact-strip .ss-card__icon { flex: none; }
.contact-strip__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-10) 0 0; }
@media (min-width: 640px) { .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .contact-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Scroll reveal only hides content when JavaScript is running */
html:not(.js) .ss-reveal { opacity: 1; transform: none; }

/* Inner page heading band */
.page-head { padding-block: var(--space-10) var(--space-10); }
.page-head .ss-container { display: grid; gap: var(--space-4); }
.page-head .ss-container > * { margin: 0; }
.page-head__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 7.5vw, 48px); line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; }
.page-head__lead { font-size: 19px; line-height: 1.55; color: var(--gray-400); max-width: 56ch; }
@media (min-width: 768px) { .page-head { padding-block: var(--space-16); } }

/* Forms */
.ss-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section--form { padding-block: var(--space-6) var(--space-16); }
@media (min-width: 768px) { .section--form { padding-block: var(--space-16) var(--space-24); } }
.quote { display: grid; gap: var(--space-10); align-items: start; }
.quote > * { min-width: 0; }
@media (min-width: 1000px) { .quote { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-16); } .quote__aside { position: sticky; top: calc(var(--header-height) + var(--space-6)); } }
.form-card { background: var(--white); border: 1px solid var(--gray-200); border-top: 4px solid var(--orange-500); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); }
@media (min-width: 600px) { .form-card { padding: var(--space-10); } }
.form-card__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; }
.form-card__note { margin: var(--space-2) 0 0; font-size: 14px; color: var(--gray-600); }
.ss-form { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.ss-form__row { display: grid; gap: var(--space-6); }
.ss-form__row > * { min-width: 0; }
@media (min-width: 600px) { .ss-form__row { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
.ss-field__opt { font-weight: 400; color: var(--gray-600); }
select.ss-input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; text-overflow: ellipsis; }
.ss-phone { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: var(--space-2); }
@media (min-width: 600px) { .ss-phone { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); } }
.ss-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ss-fieldset legend { padding: 0; margin-bottom: var(--space-3); }
.ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ss-chip { position: relative; display: inline-flex; cursor: pointer; }
.ss-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ss-chip span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-2) var(--space-4); border: 1.5px solid var(--gray-500); border-radius: var(--radius-md); font-weight: 600; font-size: 15px; line-height: 1.25; background: var(--white); transition: background-color 150ms ease, border-color 150ms ease; }
.ss-chip span::before { content: ""; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--gray-500); border-radius: var(--radius-sm); background: var(--white) center / 12px no-repeat; }
.ss-chip:hover span { border-color: var(--black); }
.ss-chip input:checked + span { background: var(--orange-100); border-color: var(--black); }
.ss-chip input:checked + span::before { border-color: var(--black); background-color: var(--orange-500); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.ss-chip input:focus-visible + span, .ss-check input:focus-visible { outline: 3px solid var(--orange-700); outline-offset: 2px; }
.ss-fieldset.is-invalid .ss-chip span { border-color: var(--danger-600); }
.ss-details { border: 1.5px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--gray-100); }
.ss-details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-4); font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.ss-details summary::-webkit-details-marker { display: none; }
.ss-details summary:focus-visible { outline: 3px solid var(--orange-700); outline-offset: 2px; }
.ss-details summary .ss-icon { transition: transform 150ms ease; }
.ss-details[open] summary .ss-icon { transform: rotate(180deg); }
.ss-details__body { display: grid; gap: var(--space-6); padding: var(--space-2) var(--space-4) var(--space-6); }
.ss-check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; line-height: 1.5; }
.ss-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--orange-700); }
.ss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ss-btn--lg { min-height: 56px; font-size: 17px; }
.ss-form__summary { margin: 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--danger-600); border-radius: var(--radius-md); color: var(--danger-600); font-weight: 600; background: var(--white); }
.ss-form__status { margin: 0; min-height: 0; font-size: 15px; color: var(--gray-600); }
.ss-form__status:empty { display: none; }
.ss-form__status.is-error { color: var(--danger-600); font-weight: 600; }
.ss-success { display: grid; gap: var(--space-4); justify-items: start; outline: none; }
.ss-success > * { margin: 0; }
.ss-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--orange-500); color: var(--black); }
.ss-success__icon .ss-icon { width: 28px; height: 28px; stroke-width: 2.5; }
.ss-success__urgent { font-weight: 700; padding-top: var(--space-2); }
.ss-success__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Quote page side column */
.quote__aside { display: grid; gap: var(--space-10); }
.quote__aside-title { margin: 0 0 var(--space-4); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); }
.quote__next { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.quote__next li { display: flex; gap: var(--space-4); align-items: flex-start; }
.quote__next .ss-step__num { position: static; flex: none; width: 36px; height: 36px; font-size: 13px; }
.quote__next p { margin: 0; padding-top: 5px; }
.quote__contact { padding: var(--space-6); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.quote__contact ul { display: grid; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.quote__contact li { display: flex; gap: var(--space-3); align-items: center; min-width: 0; overflow-wrap: anywhere; }
.quote__notice { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gray-600); }
@media (prefers-reduced-motion: reduce) { .ss-chip span, .ss-details summary .ss-icon { transition: none; } }

/* Standard rule: running text is justified. Headings, labels, buttons, form text and tags stay left-aligned. */
main p, .ss-footer address { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: wrap; }
main .ss-label, main .form-card__note, main .ss-field__help, main .ss-field__error, main .ss-form__summary, main .ss-form__status,
main .section__more, main .contact-strip__actions, main .ss-success__actions, main .hero__actions, main .ss-footer address { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
main p:has(> .ss-confirm:only-child) { text-align: left; }

/* ---------- Inner pages ---------- */
.page-head a, .ss-label a { color: inherit; text-underline-offset: 3px; }
.split { display: grid; gap: var(--space-10); align-items: start; }
.split > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } .split--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.prose { display: grid; gap: var(--space-4); align-content: start; }
.prose > * { margin: 0; }
.prose p { max-width: 68ch; }
.prose h3 { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; }
.values { display: grid; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.values li { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-6); border-top: 1px solid var(--gray-200); }
.values .ss-step__num { position: static; }
.values h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; }
.values p { margin: 0; color: var(--gray-600); }
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts { display: grid; margin: var(--space-4) 0 0; max-width: 760px; }
.facts div { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--gray-200); }
.facts div:last-child { border-bottom: 1px solid var(--gray-200); }
.facts dt { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); }
.facts dd { margin: 0; font-weight: 600; }
@media (min-width: 640px) { .facts div { grid-template-columns: 260px 1fr; gap: var(--space-6); align-items: baseline; } }

/* Services overview */
.card-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ss-card__title a { color: inherit; text-decoration: none; }
.ss-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss-card__title a:focus-visible { outline: 3px solid var(--orange-700); outline-offset: 2px; }
.ss-card__action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ss-card[id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }

/* Service page */
.hero--inner .hero__grid { padding-block: var(--space-10) 0; }
.hero--inner .hero__art { height: 150px; }
.hero--inner { padding-bottom: 0; }
@media (min-width: 900px) { .hero--inner .hero__grid { padding-block: var(--space-16); } .hero--inner .hero__art { height: 300px; } }
.t-icon { fill: none; stroke: var(--black); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.need-card { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--gray-100); border-radius: var(--radius-lg); border-top: 4px solid var(--orange-500); }
.need-card .quote__aside-title { margin: 0; }
.checklist { display: grid; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checklist .ss-icon { width: 20px; height: 20px; margin-top: 3px; color: var(--orange-700); stroke-width: 2.5; }
.ss-step__text--solo { color: var(--black); font-weight: 600; padding-top: 10px; }
@media (min-width: 768px) {
  .ss-step__text--solo { padding-top: 0; }
  .ss-steps--5 { grid-template-columns: repeat(5, 1fr); }
  .ss-steps--3 { grid-template-columns: repeat(3, 1fr); }
}
.related ul { display: grid; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.related p { margin: 0; }

/* FAQ accordion */
.faq-wrap { display: grid; gap: var(--space-10); align-items: start; }
.faq-wrap > * { min-width: 0; }
@media (min-width: 1000px) { .faq-wrap { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-16); } .faq__aside, .related { position: sticky; top: calc(var(--header-height) + var(--space-6)); } }
.faq__item { border-top: 1px solid var(--gray-200); }
.faq__item:last-child { border-bottom: 1px solid var(--gray-200); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding-block: var(--space-4); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 3px solid var(--orange-700); outline-offset: 2px; }
.faq__item summary h2, .faq__item summary h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; }
.faq__item summary .ss-icon { color: var(--orange-700); transition: transform 150ms ease; }
.faq__item[open] summary .ss-icon { transform: rotate(180deg); }
.faq__body { padding-bottom: var(--space-6); }
.faq__body p { margin: 0; color: var(--gray-600); max-width: 68ch; }
.faq__aside { background: var(--gray-100); border: 0; }

/* Contact */
.contact-main { display: grid; gap: var(--space-6); }
.contact-main > * { margin: 0; }
.contact-list { display: grid; gap: var(--space-6); list-style: none; padding: 0; }
.contact-list li { display: flex; gap: var(--space-4); }
.contact-list .ss-card__icon { flex: none; background: var(--white); }
.contact-list h2 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.contact-list p { margin: 0; }
@media (min-width: 600px) { .contact-list { grid-template-columns: 1fr 1fr; } }
.contact-main .contact-strip__actions { margin: 0; }
.contact-main .ss-placeholder { background-color: var(--white); }

/* Gallery */
.gallery { display: grid; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery figure { margin: 0; display: grid; gap: var(--space-2); }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--gray-100); }
.gallery figcaption { font-size: 14px; line-height: 1.5; color: var(--gray-600); }
.gallery__note { margin: var(--space-10) 0 0; }

/* Policy pages */
.legal { max-width: 800px; }
.legal h2 { margin: var(--space-10) 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; }
.legal p { margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-4); padding-left: 1.2em; display: grid; gap: var(--space-2); }
.legal li::marker { color: var(--orange-700); }
.legal__meta { color: var(--gray-600); font-size: 14px; }
.draft-banner { margin-bottom: var(--space-6); padding: var(--space-4); background: var(--orange-100); border: 1.5px dashed var(--orange-700); border-radius: var(--radius-md); font-size: 15px; line-height: 1.5; }
.notice-box { padding: var(--space-6); background: var(--black); color: var(--white); border-radius: var(--radius-lg); border-left: 0; border-top: 4px solid var(--orange-500); }
.notice-box h2 { margin-top: 0; }
.notice-box p { margin: 0; color: var(--gray-400); }
.notfound { padding-block: var(--space-24); }
.notfound .hero__actions { margin-top: var(--space-4); }
.ss-dark .ss-btn--whatsapp { color: var(--black); }

/* Footer service list in two columns */
@media (min-width: 768px) { .ss-footer__services ul { columns: 2; column-gap: var(--space-6); } .ss-footer__services li { break-inside: avoid; } }

/* Left-aligned exceptions to the justified-text rule */
main .legal__meta, main .gallery__note, main .contact-map-link, main .ss-card__action, main .related p, main .ss-step__text--solo, main .ss-label { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
@media (prefers-reduced-motion: reduce) { .faq__item summary .ss-icon { transition: none; } }

.ss-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--orange-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ss-linkbtn:focus-visible { outline: 3px solid var(--orange-700); outline-offset: 2px; }

.ss-footer__copy a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .ss-footer__legal { flex-direction: column; } }

/* Photographs outside the gallery */
.photo { margin: 0; display: grid; gap: var(--space-2); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--gray-100); }
.photo figcaption { font-size: 14px; line-height: 1.5; color: var(--gray-600); }
.why__intro .photo { margin-top: var(--space-4); }

/* Embedded map */
.map-embed { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-100); border: 1px solid var(--gray-200); }
.ss-dark .map-embed { border-color: var(--charcoal-800); background: var(--charcoal-900); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }