/* Seven Infra — site design system v3.1 ("photo-led", ink and teal)
   Direction: full-bleed machine photography, white sections, rounded cards, Proxima Nova headlines,
   mono eyebrows, black text, teal as the action colour. */

:root {
  --hair: rgba(18,26,25,.12);
  --hair-dark: rgba(255,255,255,.18);
  --ink-soft: #585F5D;
  --surface-2: #F1F4F3;
  --display-xl: clamp(2.6rem, 6.2vw, 4.6rem);
  --display-lg: clamp(2rem, 3.8vw, 3rem);
  --display-md: clamp(1.5rem, 2.4vw, 1.9rem);
}
html:root:root {
  color-scheme: light;
  --bg: #FFFFFF; --bg-alt: var(--surface-2); --surface: #FFFFFF;
  --text: var(--ink); --text-muted: var(--ink-soft); --heading: var(--navy);
  --link: var(--blue-700); --border: var(--grey-200);
  --shadow-sm: 0 1px 2px rgba(18,26,25,.06); --shadow: 0 8px 24px rgba(18,26,25,.08); --shadow-lg: 0 20px 60px rgba(18,26,25,.14);
}
body { background: #fff; color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-weight: 700; } h2 { font-weight: 700; } h3 { font-weight: 700; }
.ac { font-family: var(--font-display); font-style: normal; font-weight: inherit; letter-spacing: inherit; font-size: 1em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.on-dark .eyebrow, .hero .eyebrow, .dark .eyebrow { color: rgba(255,255,255,.75); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.grain::before { display: none; }

/* Buttons --------------------------------------------------------------- */
.btn { min-height: 46px; padding: 0 20px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; gap: 8px; }
.btn::after { content: none; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: #17625B; border-color: #17625B; color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: rgba(18,26,25,.3); }
.btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-whatsapp { background: transparent; color: var(--navy); border-color: rgba(18,26,25,.3); }
.btn-whatsapp:hover { background: var(--navy); color: #fff; }
.hero .btn-outline, .hero .btn-whatsapp, .on-dark .btn-outline, .on-dark .btn-whatsapp { color: #fff; border-color: rgba(255,255,255,.45); }
.hero .btn-outline:hover, .hero .btn-whatsapp:hover, .on-dark .btn-outline:hover, .on-dark .btn-whatsapp:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* Header ----------------------------------------------------------------- */
.site-header { position: absolute; left: 0; right: 0; top: 0; z-index: 40; background: transparent; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--s-5); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.brand img { height: 34px; width: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .site-nav { display: flex; align-items: center; gap: var(--s-5); } }
.site-nav > ul { display: flex; gap: 26px; align-items: center; }
.site-nav > ul > li > a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; font-size: 14px; padding: 28px 0; display: inline-block; }
.site-nav > ul > li > a:hover { color: #fff; }
.has-menu { position: relative; }
.has-menu .menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 280px; background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; z-index: 50; }
.has-menu .menu.wide { min-width: 560px; column-count: 2; column-gap: 0; }
.has-menu:hover .menu, .has-menu:focus-within .menu { display: block; }
.menu li { break-inside: avoid; }
.menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 500; }
.menu a:hover { background: var(--surface-2); }
.nav-cta { display: flex; align-items: center; gap: var(--s-4); }
.nav-cta .phone { color: rgba(255,255,255,.85); text-decoration: none; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
@media (max-width: 1299px) { .nav-cta .phone { display: none; } }
.nav-cta .btn { min-height: 40px; padding: 0 16px; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: #fff; margin: 6px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .nav-cta .phone { display: inline; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--midnight); padding: var(--s-4) var(--gutter) var(--s-6); max-height: calc(100vh - 76px); overflow: auto; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .site-nav.open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li > a { padding: 14px 0; display: block; border-bottom: 1px solid var(--hair-dark); font-size: 20px; font-weight: 700; }
  .has-menu .menu { display: block; position: static; background: transparent; border: 0; box-shadow: none; padding: 4px 0 10px; min-width: 0; column-count: 1; }
  .menu a { padding: 7px 0; color: rgba(255,255,255,.8); }
  .menu a:hover { background: none; color: #fff; }
  .nav-cta { margin: var(--s-5) 0 0; justify-content: space-between; }
}
.site-header.solid { position: fixed; background: rgba(12,18,17,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair-dark); }
.site-header.solid .container { min-height: 64px; }
.site-header.solid .site-nav > ul > li > a { padding: 22px 0; }

/* Hero ------------------------------------------------------------------- */
.hero { position: relative; color: #fff; background: var(--navy) var(--hero) center/cover no-repeat; padding: calc(76px + var(--s-8)) 0 var(--s-7); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,17,.55) 0%, rgba(12,18,17,.35) 40%, rgba(12,18,17,.85) 100%); }
.hero canvas { display: none; }
.hero .container { position: relative; }
.hero-home { min-height: min(86vh, 760px); display: flex; align-items: flex-end; padding-bottom: var(--s-7); }
.hero-inner { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 960px) { .hero-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero h1 { color: #fff; font-size: var(--display-lg); max-width: 22ch; margin: var(--s-3) 0 var(--s-4); }
.hero-home h1 { font-size: var(--display-xl); max-width: 16ch; line-height: 1.02; }
.hero-intro { font-size: 17px; max-width: 54ch; color: rgba(255,255,255,.8); line-height: 1.6; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }
.breadcrumb { font-family: var(--font-mono); font-size: 11.5px; margin: 0 0 var(--s-4); color: rgba(255,255,255,.6); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--blue); }
.breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.spec-strip { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: flex; flex-wrap: wrap; gap: 10px; counter-reset: spec; }
.spec-strip li { padding: 9px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); font-size: 13px; color: #fff; background: rgba(12,18,17,.35); backdrop-filter: blur(4px); }
.spec-strip li::before { content: none; }
/* Floating stat card */
.stat-card { background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px; display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; max-width: 420px; justify-self: end; }
.stat-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; display: block; }
.stat-card b { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.stat-card b small { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--blue-700); margin-left: 6px; }
.stat-card p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.hero-photo { display: none; }

/* Trusted strip under the hero ------------------------------------------ */
.trusted { background: #fff; border-bottom: 1px solid var(--hair); }
.trusted .container { display: flex; align-items: center; gap: var(--s-6); padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.trusted .label-t { font-size: 13px; font-weight: 600; color: var(--navy); max-width: 16ch; line-height: 1.3; }
.trusted .logos { display: flex; align-items: center; gap: 18px clamp(20px, 3vw, 44px); flex: 1; flex-wrap: wrap; }
.trusted img { height: 28px; width: auto; max-width: 130px; filter: grayscale(1); opacity: .7; }
.trusted .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--navy); opacity: .7; }

/* Sections --------------------------------------------------------------- */
.section { padding: var(--s-9) 0; }
@media (max-width: 719px) { .section { padding: var(--s-8) 0; } }
.section-alt { background: var(--surface-2); }
.section-navy, .section-midnight { background: var(--navy); color: rgba(255,255,255,.82); }
.section-midnight { background: var(--midnight); }
.section-navy h2, .section-navy h3, .section-midnight h2, .section-midnight h3 { color: #fff; }
.section-head { display: grid; gap: var(--s-4) var(--s-7); margin-bottom: var(--s-6); align-items: end; }
@media (min-width: 960px) { .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.section-head h2 { font-size: var(--display-lg); margin: var(--s-3) 0 0; max-width: 22ch; }
.section-head h2 .grey { color: inherit; font-weight: 600; }
.section-head .lead { margin: 0; font-size: 16.5px; color: var(--ink-soft); max-width: 50ch; line-height: 1.6; }
.section-navy .section-head .lead, .section-midnight .section-head .lead { color: rgba(255,255,255,.72); }

/* About block ------------------------------------------------------------ */
.about-block { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .about-block { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.about-block .big { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--navy); margin: var(--s-3) 0 0; }
.about-block .big .grey { color: inherit; font-weight: 500; }
.about-stats { display: grid; gap: var(--s-5); align-content: start; }
.about-stats div { border-top: 1px solid var(--hair); padding-top: 12px; }
.about-stats b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.about-stats span { font-size: 13px; color: var(--ink-soft); }
.about-photos { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-6); }
@media (min-width: 720px) { .about-photos { grid-template-columns: 3fr 2fr; } }
.about-photos img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.about-photos figure { margin: 0; }

/* Machines (product cards) ------------------------------------------------ */
.machines { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-6); background: none; border: 0; }
@media (min-width: 600px) { .machines { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .machines { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .machines.seven { grid-template-columns: repeat(4, 1fr); } }
.machine { display: block; background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.section-alt .machine { border-color: transparent; }
.machine figure { margin: 0; }
.machine .img-wrap { overflow: hidden; border-bottom: 0; }
.machine img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); transition: transform .6s ease; }
@media (hover: hover) { .machine:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .machine:hover img { transform: scale(1.04); } }
.machine figcaption { padding: 18px 20px 22px; }
.machine .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); display: flex; justify-content: space-between; margin-bottom: 10px; }
.machine h3 { font-size: 1.2rem; margin: 0 0 6px; }
.machine p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.machine.wide { grid-column: span 1; }
@media (min-width: 960px) { .machine.wide { grid-column: span 2; } .machine.wide img { aspect-ratio: 2 / 1; } }

/* Index list (fallback lists) --------------------------------------------- */
.index { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: idx; display: grid; gap: var(--s-3); }
.index li { border: 1px solid var(--hair); border-radius: var(--radius); background: #fff; }
.index a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--s-4); padding: 18px 20px; text-decoration: none; color: inherit; align-items: baseline; }
@media (min-width: 720px) { .index a { grid-template-columns: 44px minmax(0, 5fr) minmax(0, 5fr) auto 24px; gap: var(--s-4); } }
.index .n { font-family: var(--font-mono); font-size: 12px; color: var(--blue-700); }
.index .n::before { counter-increment: idx; content: counter(idx, decimal-leading-zero); }
.index h3 { font-size: 1.15rem; margin: 0; }
.index p { margin: 0; color: var(--ink-soft); font-size: 14px; grid-column: 2; }
@media (min-width: 720px) { .index p { grid-column: auto; } }
.index .price { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); grid-column: 2; max-width: 26ch; }
@media (min-width: 720px) { .index .price { grid-column: auto; text-align: right; justify-self: end; } }
.index .arrow { display: none; color: var(--blue-700); }
@media (min-width: 720px) { .index .arrow { display: block; } }

/* Figures, process, plans, sell/install ---------------------------------- */
.figures { display: grid; gap: var(--s-5) var(--s-5); grid-template-columns: repeat(2, 1fr); margin-top: var(--s-6); }
@media (min-width: 960px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figure { background: var(--surface-2); border-radius: var(--radius-lg); padding: var(--s-5); }
.section-alt .figure { background: #fff; }
.section-navy .figure, .section-midnight .figure { background: rgba(255,255,255,.06); }
.figure b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--navy); }
.section-navy .figure b, .section-midnight .figure b { color: #fff; }
.figure b small { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; font-weight: 400; margin-left: 6px; color: var(--blue-700); }
.section-navy .figure b small, .section-midnight .figure b small { color: var(--blue-light); }
.figure span { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.section-navy .figure span, .section-midnight .figure span { color: rgba(255,255,255,.7); }

.process { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-6); counter-reset: step; }
@media (min-width: 720px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process { grid-template-columns: repeat(4, 1fr); } .process.three { grid-template-columns: repeat(3, 1fr); } }
.step { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: var(--s-5); counter-increment: step; }
.section-alt .step { border-color: transparent; }
.section-navy .step, .section-midnight .step { background: rgba(255,255,255,.06); border-color: var(--hair-dark); }
.step::before { content: "0" counter(step); font-family: var(--font-mono); font-size: 12px; color: var(--blue-700); display: block; margin-bottom: var(--s-4); }
.section-navy .step::before, .section-midnight .step::before { color: var(--blue-light); }
.step h3 { font-size: 1.15rem; margin: 0 0 8px; }
.step h3 a { color: inherit; text-decoration: none; }
.step p { margin: 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.section-navy .step p, .section-midnight .step p { color: rgba(255,255,255,.7); }

.plans { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-top: var(--s-6); border: 0; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.plan.featured { background: var(--navy); color: rgba(255,255,255,.85); border-color: var(--navy); margin: 0; padding: var(--s-6) var(--s-5); }
.plan .tier-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); }
.plan.featured .tier-name { color: var(--blue); }
.plan h3 { font-size: 1.5rem; margin: 0; }
.plan.featured h3 { color: #fff; }
.plan .price { font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); }
.plan.featured .price { color: rgba(255,255,255,.75); }
.plan .price b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; margin-right: 6px; color: var(--navy); }
.plan.featured .price b { color: #fff; }
.plan ul { list-style: none; padding: 0; margin: 0; font-size: 14px; flex: 1; }
.plan li { padding: 9px 0; border-top: 1px solid var(--hair); display: flex; gap: 12px; align-items: baseline; }
.plan.featured li { border-color: var(--hair-dark); }
.plan li::before { content: "●"; font-size: 7px; color: var(--blue-700); }
.plan.featured li::before { color: var(--blue); }
.plan .btn { align-self: flex-start; }
.plan.featured .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.plan.featured .btn-outline:hover { background: #fff; color: var(--navy); }

.sell-install { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); background: none; border: 0; }
@media (min-width: 900px) { .sell-install { grid-template-columns: repeat(3, 1fr); } }
.sell-install > div { background: var(--navy); color: rgba(255,255,255,.8); border-radius: var(--radius-lg); padding: var(--s-6) var(--s-5); }
.sell-install .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; line-height: 1; color: #fff; margin: 14px 0 18px; }
.sell-install .big em { font-style: normal; color: var(--blue-light); }
.sell-install ul { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.sell-install li { padding: 9px 0; border-top: 1px solid var(--hair-dark); display: flex; gap: 12px; align-items: baseline; }
.sell-install li::before { content: "●"; font-size: 7px; color: var(--blue-light); }

/* Brand wall, client wall, cases ------------------------------------------ */
.brand-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-6); background: none; border: 0; }
@media (min-width: 600px) { .brand-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .brand-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1300px) { .brand-wall { grid-template-columns: repeat(6, 1fr); } }
.brand-wall > div { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 18px 16px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.brand-wall .logo { display: flex; align-items: center; min-height: 44px; }
.brand-wall .logo img { max-height: 34px; max-width: 150px; width: auto; height: auto; filter: grayscale(1); opacity: .85; transition: filter .25s, opacity .25s; }
.brand-wall > div:hover .logo img { filter: none; opacity: 1; }
.section-alt .brand-wall > div { border-color: transparent; }
.brand-wall .n { font-family: var(--font-mono); font-size: 11px; color: var(--blue-700); }
.brand-wall b { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy); line-height: 1.1; }
.brand-wall small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }

.client-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-6); background: none; border: 0; }
@media (min-width: 600px) { .client-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .client-wall { grid-template-columns: repeat(6, 1fr); } }
.client-wall > div { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 24px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 140px; }
.section-alt .client-wall > div { border-color: transparent; }
.client-wall .logo { height: 48px; display: flex; align-items: center; justify-content: center; width: 100%; }
.client-wall img { max-height: 48px; max-width: 150px; width: auto; height: auto; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
@media (hover: hover) { .client-wall > div:hover img { filter: none; opacity: 1; } }
.client-wall .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--navy); }
.client-wall small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; line-height: 1.5; margin-top: auto; }
.client-wall .next { background: var(--navy); color: #fff; justify-content: center; border-color: var(--navy); }
.client-wall .next b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-align: center; line-height: 1.15; }
.client-wall .next small { color: var(--blue); margin-top: 0; }

.cases { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); background: none; border: 0; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.case { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: 14px; color: var(--ink-soft); }
.section-navy .case, .section-midnight .case { background: rgba(255,255,255,.06); border-color: var(--hair-dark); color: rgba(255,255,255,.78); }
.case .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); display: flex; justify-content: space-between; gap: 12px; }
.section-navy .case .meta, .section-midnight .case .meta { color: var(--blue-light); }
.case .cap { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: .95; color: var(--navy); }
.section-navy .case .cap, .section-midnight .case .cap { color: #fff; }
.case .cap small { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; font-weight: 400; margin-left: 8px; color: var(--blue-700); }
.section-navy .case .cap small, .section-midnight .case .cap small { color: var(--blue-light); }
.case h3 { font-size: 1.25rem; margin: 0; color: var(--navy); }
.section-navy .case h3, .section-midnight .case h3 { color: #fff; }
.case p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.case .result { border-top: 1px solid var(--hair); padding-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: #1F9D61; margin-top: auto; }
.section-navy .case .result, .section-midnight .case .result { border-color: var(--hair-dark); color: #7EDCA8; }

/* Feature band (full-bleed photo with achievement card) ------------------ */
.feature { position: relative; min-height: 520px; display: flex; align-items: center; color: #fff; background: var(--navy) var(--photo) center/cover no-repeat; padding: var(--s-9) 0; }
.feature::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,18,17,.85) 0%, rgba(12,18,17,.45) 60%, rgba(12,18,17,.25) 100%); }
.feature .container { position: relative; display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 960px) { .feature .container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.feature h2 { color: #fff; font-size: var(--display-lg); max-width: 18ch; margin: var(--s-3) 0 var(--s-4); }
.feature p { color: rgba(255,255,255,.8); max-width: 48ch; }
.feature .ach { background: rgba(12,18,17,.75); backdrop-filter: blur(8px); border: 1px solid var(--hair-dark); border-radius: var(--radius-lg); padding: var(--s-5); justify-self: end; max-width: 420px; width: 100%; }
.feature .ach .eyebrow { color: rgba(255,255,255,.7); }
.feature .ach b { display: block; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 12px 0 8px; }
.feature .ach b small { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0; margin-left: 8px; color: var(--blue-light); }
.feature .ach p { margin: 0; font-size: 14px; color: rgba(255,255,255,.8); }
.feature .ach a { color: #fff; }

/* Photo band and galleries ---------------------------------------------- */
.photo-band { position: relative; margin: 0; height: clamp(260px, 56vh, 620px); overflow: hidden; background: var(--midnight); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 0; background: linear-gradient(transparent, rgba(12,18,17,.7)); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.photo-band figcaption .container { display: flex; justify-content: space-between; gap: 12px; }
.gallery { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin: var(--s-6) 0; }
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; }
.gallery figure.span { grid-column: 1 / -1; }
.gallery figure.span img { aspect-ratio: 21 / 9; }
.credit { display: block; font-size: 9.5px; letter-spacing: .06em; opacity: .7; margin-top: 2px; }
.gallery figcaption span:last-child { text-align: right; }

/* Content pages ------------------------------------------------------------ */
.two-col { display: grid; gap: var(--s-8); }
@media (min-width: 960px) { .two-col { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } .two-col > aside { position: sticky; top: 96px; align-self: start; } }
.content { max-width: 66ch; }
.content > p:first-child { font-size: 17px; color: var(--ink-soft); }
.content h2 { font-size: var(--display-md); margin: var(--s-7) 0 var(--s-4); }
.content h2:first-child { margin-top: 0; }
.content h3 { font-size: 1.25rem; margin: var(--s-6) 0 var(--s-3); }
.content table { display: block; overflow-x: auto; font-variant-numeric: tabular-nums; }
.content th { background: transparent; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--navy); }
.content td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.content td.num { font-family: var(--font-mono); font-size: 13.5px; }
@media (min-width: 720px) { .content td.num { white-space: nowrap; } }
.content li { margin-bottom: var(--s-2); }
.content blockquote { margin: var(--s-6) 0; padding: 0 0 0 var(--s-5); border-left: 3px solid var(--blue); color: var(--navy); font-weight: 500; font-style: normal; font-size: 1.5rem; line-height: 1.3; }
@media (max-width: 719px) {
  .content table, .content table tbody, .content table tr, .content table td { display: block; width: 100%; }
  .content table thead, .content table colgroup { display: none; }
  .content table tr { border-bottom: 1px solid var(--navy); padding: 10px 0 12px; }
  .content table td { border: 0; padding: 4px 0; font-size: 15px; }
  .content table td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0 2px; }
  .content table td:first-child { font-weight: 700; color: var(--heading); font-size: 1.05rem; padding-top: 6px; }
  .content table td:first-child::before { display: none; }
}

/* FAQ ---------------------------------------------------------------------- */
.faq-wrap { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .faq-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-weight: 400; color: var(--blue-700); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; font-size: 15px; max-width: 60ch; color: var(--ink-soft); }
.faq-photo { margin: 0; }
.faq-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.faq-photo figcaption { padding: 12px 4px 0; font-size: 14px; color: var(--ink-soft); }
.faq-photo figcaption b { display: block; color: var(--navy); font-family: var(--font-display); font-size: 1.05rem; }

/* Panel (sticky consultation aside) ------------------------------------- */
.panel { border: 1px solid var(--hair); border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.panel .panel-head { background: var(--navy); color: #fff; padding: 14px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; }
.panel .panel-head span:last-child { color: var(--blue-light); }
.panel .panel-body { padding: var(--s-5); }
.panel h3 { font-size: 1.3rem; margin: 0 0 var(--s-3); }
.panel ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); font-size: 14px; }
.panel li { padding: 9px 0; border-top: 1px solid var(--hair); display: flex; gap: 12px; }
.panel li::before { content: "●"; font-size: 7px; color: var(--blue-700); align-self: center; }
.panel li a, .contact-list a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.panel .btn { width: 100%; justify-content: center; }
.panel .btn + .btn { margin-top: 10px; }
.panel .notice { margin: var(--s-4) 0 0; }
.panel .tel { text-align: center; margin: 12px 0 0; font-size: 14px; }
.panel .tel a { font-family: var(--font-mono); color: var(--navy); font-weight: 500; }
.notice { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }

/* CTA block with embedded form ------------------------------------------- */
.statement { background: #fff; color: var(--ink); padding: 0 0 var(--s-9); }
.statement.has-photo { background-image: none; }
.cta-block { background: var(--navy); border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6); color: #fff; display: grid; gap: var(--s-6); position: relative; overflow: hidden; }
@media (min-width: 960px) { .cta-block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: var(--s-8); } }
.cta-block h2 { color: #fff; font-size: var(--display-lg); margin: var(--s-3) 0 var(--s-4); max-width: 14ch; }
.cta-block h2 .ac { color: var(--blue-light); }
.cta-block p { color: rgba(255,255,255,.78); max-width: 40ch; }
.cta-block .meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); font-size: 13px; color: rgba(255,255,255,.8); }
.cta-block .meta b { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 6px; font-weight: 500; }
.cta-block .meta a { color: #fff; }
.cta-form { background: var(--midnight); border-radius: var(--radius); padding: var(--s-5); }
.cta-form h3 { color: #fff; font-size: 1.2rem; margin: 0 0 4px; }
.cta-form > p { color: rgba(255,255,255,.65); font-size: 13.5px; margin: 0 0 var(--s-4); }
.cta-form .form-grid label { color: rgba(255,255,255,.7); }
.cta-form .input { background: rgba(255,255,255,.06); border: 1px solid var(--hair-dark); border-radius: 8px; color: #fff; padding: 0 12px; min-height: 44px; }
.cta-form textarea.input { padding-top: 10px; }
.cta-form .input::placeholder { color: rgba(255,255,255,.4); }
.cta-form .input:focus { border-color: var(--blue); box-shadow: none; }
.cta-form select.input option { color: var(--ink); }
.cta-form .notice { color: rgba(255,255,255,.55); }
.cta-form .btn-primary { background: var(--blue); color: #fff; }

/* Booking form (contact page) ---------------------------------------------- */
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-grid label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.form-grid .input { margin-top: 6px; border-radius: 8px; font-size: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.form-status:empty { display: none; }
.form-status { margin: 12px 0 0; color: var(--navy); }
.cta-form .form-status { color: #fff; }
select.input { appearance: auto; }
textarea.input { min-height: 100px; padding-top: 10px; }

/* Emirates strip ------------------------------------------------------------ */
.emirates { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-6); border: 0; }
@media (min-width: 720px) { .emirates { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .emirates { grid-template-columns: repeat(7, 1fr); } }
.emirate { display: block; padding: 18px 16px 20px; border: 1px solid var(--hair-dark); border-radius: var(--radius); text-decoration: none; color: inherit; transition: background .2s; background: rgba(255,255,255,.04); }
.section:not(.section-navy):not(.section-midnight) .emirate { border-color: var(--hair); background: #fff; }
@media (hover: hover) { .emirate:hover { background: rgba(255,255,255,.08); color: inherit; } }
.emirate .code { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--blue-light); }
.emirate b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; margin: 22px 0 6px; line-height: 1.1; }
.section:not(.section-navy):not(.section-midnight) .emirate b { color: var(--navy); }
.emirate span { font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.45; display: block; }
.section:not(.section-navy):not(.section-midnight) .emirate span { color: var(--ink-soft); }

/* WhatsApp FAB ------------------------------------------------------------ */
.wa-fab { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 10px; background: var(--whatsapp); color: #062B12; font-weight: 700; font-size: 13px; text-decoration: none; padding: 12px 18px; border-radius: var(--radius-pill); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.wa-fab:hover { background: #1FB85A; color: #062B12; }
.wa-fab svg { width: 20px; height: 20px; }
@media (max-width: 719px) { .wa-fab span { display: none; } .wa-fab { padding: 14px; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); } }

/* Footer ------------------------------------------------------------------ */
.site-footer { background: var(--midnight); color: rgba(255,255,255,.7); padding: var(--s-8) 0 0; font-size: 14px; overflow: hidden; }
.site-footer .tagline { display: none; }
.site-footer h4 { color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-4); font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand img { height: 36px; width: auto; margin-bottom: var(--s-4); }
.footer-brand p { max-width: 34ch; }
.contact-list li { font-family: var(--font-mono); font-size: 13px; }
.footer-legal { border-top: 1px solid var(--hair-dark); margin-top: var(--s-7); padding: var(--s-4) 0; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4); display: grid; gap: 6px; }
.footer-legal p { margin: 0; }
.giant { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 17vw, 15rem); letter-spacing: -0.05em; line-height: .78; color: rgba(255,255,255,.07); text-align: left; margin: var(--s-6) 0 -0.12em; white-space: nowrap; user-select: none; }

/* Motion ------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.js .hero .w > span { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.7,.1,1); }
.js .hero.play .w > span { transform: none; }
.js .hero .eyebrow, .js .hero .breadcrumb, .js .hero .hero-intro, .js .hero .hero-cta, .js .hero .spec-strip, .js .hero .stat-card { opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform .8s ease; }
.js .hero.play .eyebrow, .js .hero.play .breadcrumb { opacity: 1; transform: none; transition-delay: .2s; }
.js .hero.play .hero-intro { opacity: 1; transform: none; transition-delay: .8s; }
.js .hero.play .hero-cta { opacity: 1; transform: none; transition-delay: 1s; }
.js .hero.play .spec-strip { opacity: 1; transform: none; transition-delay: 1.15s; }
.js .hero.play .stat-card { opacity: 1; transform: none; transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) {
  .js:not(.motion) .reveal, .js:not(.motion) .hero .w > span, .js:not(.motion) .hero .eyebrow, .js:not(.motion) .hero .breadcrumb, .js:not(.motion) .hero .hero-intro, .js:not(.motion) .hero .hero-cta, .js:not(.motion) .hero .spec-strip, .js:not(.motion) .hero .stat-card { opacity: 1; transform: none; transition: none; }
}
@media (hover: none) { .machine:hover { transform: none; } }

/* Small phones --------------------------------------------------------------- */
@media (max-width: 374px) {
  :root { --display-xl: 2.3rem; --display-lg: 1.8rem; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .stat-card { grid-template-columns: 72px 1fr; }
  .stat-card img { width: 72px; height: 72px; }
}
@media (max-width: 719px) {
  .hero { padding-top: calc(76px + var(--s-6)); }
  .hero-home { min-height: 0; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .section-head h2 { max-width: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .trusted .container { flex-direction: column; align-items: flex-start; gap: 18px; }
  .trusted .label-t { max-width: none; }
  .trusted .logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 18px; width: 100%; justify-items: center; align-items: center; }
  .trusted img { height: 24px; max-width: 100%; }
  .cta-block { padding: var(--s-6) var(--s-5); }
  .cta-block .meta { grid-template-columns: 1fr; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .index a { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 24px; }
  .index .price { grid-column: 2; justify-self: start; text-align: left; }
  .hero-inner { grid-template-columns: 1fr; }
  .stat-card { justify-self: start; }
  .plans { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) { :root { --max-w: 1240px; } }