/*
  Coraltec site layer, loaded after the taste-skill kit (assets/kit). The kit holds the system:
  tokens, grid, type, buttons, nav, footer.closing, cards, forms and motion. This file adds only what
  the kit has no part for and the TENDERJO brief requires: the top bar inside the fixed header, the
  hero with its quote card above the fold, spec tables, product catalogs, the WhatsApp button, the
  footer map and Arabic (RTL) pages.
*/

/* ---------------------------------------------------------------- dealt tokens (start.mjs css) */
:root {
  --p-bg: #ffffff; --p-surface: #f2f2f2; --p-ink: #0a0a0a; --p-muted: #6b6b6b;
  --p-accent: #d92b21; --p-accent-ink: #ffffff; --p-action: #d92b21; --p-action-ink: #ffffff;
  --p-inv-bg: #000000; --p-inv-surface: #010101; --p-inv-ink: #ffffff; --p-inv-muted: #868686;
  --p-inv-accent: #d92b21; --p-inv-accent-ink: #ffffff; --p-inv-action: #d92b21; --p-inv-action-ink: #ffffff;
  --font-display: "Rethink Sans", system-ui, sans-serif;
  --font-text: "Rethink Sans", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.025em;
  --display-tracking-xl: -0.035em;
  --wa: #25d366;
  --wa-ink: #0b3d1f;
}
html[lang^="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Rethink Sans", system-ui, sans-serif;
  --font-text: "IBM Plex Sans Arabic", "Rethink Sans", system-ui, sans-serif;
  --display-tracking: 0; --display-tracking-xl: 0;
}

/* ---------------------------------------------------------------- the header: top bar + bar
   The brief's sticky top bar lives inside the one fixed header, so nothing else on the page is fixed
   and every section still offsets by --nav. */
:root { --topbar: 36px; --nav: calc(72px + var(--topbar)); --padt: calc(120px + var(--topbar)); }
@media (max-width: 639px) { :root { --topbar: 32px; --nav: calc(56px + var(--topbar)); --padt: calc(96px + var(--topbar)); } }
.nav { display: flex; flex-direction: column; }
.nav > .nav__bar { flex: 1 1 auto; height: auto; min-height: 0; }
.nav__top { flex: none; height: var(--topbar); background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--t-label); color: var(--muted); }
.nav__top-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav__top p { display: flex; align-items: center; gap: var(--s-3); white-space: nowrap; overflow: hidden; min-width: 0; }
.nav__top p > span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-inline-end: var(--s-3); background: var(--line-strong); vertical-align: -1px; }
.nav__top a { color: var(--ink); font-weight: 500; }
.nav__top a:hover { color: var(--action); }
.nav__lang { flex: none; display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; color: var(--ink); }
@media (max-width: 1023px) { .nav__top .topbar-showroom { display: none; } }
@media (max-width: 639px) { .nav__top .topbar-partner { display: none; } .nav__top p > span + span::before { display: none; } }
.nav__logo img { height: 44px; width: auto; }
@media (max-width: 639px) { .nav__logo img { height: 32px; } }
.nav__logo { gap: 14px; }
.nav__partner-logo { display: inline-flex; align-items: center; gap: 14px; }
.nav__partner-logo::before { content: ""; width: 1px; height: 28px; background: var(--line-strong); }
.nav__logo .nav__partner-logo img { height: 21px; width: auto; }
@media (max-width: 639px) {
  .nav__logo, .nav__partner-logo { gap: 10px; }
  .nav__partner-logo::before { height: 22px; }
  .nav__logo .nav__partner-logo img { height: 15px; }
}
.nav.is-open .nav__links { top: var(--nav); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------------------------------------------------------------- the hero: the photograph full-bleed
   behind the words (as the old site had it), the brief's quote card beside them, above the fold */
main > .hero--quote { height: auto; min-height: 100svh; display: flex; align-items: center; overflow: clip; isolation: isolate; background: #0b0b0b; }
.hero--quote > .wrap { height: auto; }
.hero--quote .hero-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); align-items: center; }
.hero--quote .hero-main { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--s-5); }
.hero--quote .hero-aside { grid-column: 8 / -1; display: flex; }
.hero--quote h1 { color: #fff; font-size: clamp(34px, 2vw + 20px, 58px); line-height: 1.06; letter-spacing: var(--display-tracking-xl); max-width: 20ch; text-wrap: balance; }
.hero--quote .hero-notice { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; padding: 7px 14px; border-radius: 999px;
  background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: var(--t-small); font-weight: 500; }
.hero--quote .hero-notice::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgb(217 43 33 / .3); animation: coral-pulse 2.4s ease-in-out infinite; }
.hero--quote .hero__lead { font-size: var(--t-lead); line-height: 1.55; max-width: 56ch; color: rgb(255 255 255 / .86); }
/* layout-components.js moves the photograph to the section itself, behind the .wrap */
.hero__photo { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden; background: #111; }
.hero__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(8 8 8 / .88) 0%, rgb(8 8 8 / .66) 45%, rgb(8 8 8 / .3) 100%), linear-gradient(0deg, rgb(8 8 8 / .5), transparent 45%); }
[dir="rtl"] .hero__photo::after { background: linear-gradient(270deg, rgb(8 8 8 / .88) 0%, rgb(8 8 8 / .66) 45%, rgb(8 8 8 / .3) 100%), linear-gradient(0deg, rgb(8 8 8 / .5), transparent 45%); }
.hero__photo :is(img, picture) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hero__photo picture img { position: static; animation: coral-drift 22s ease-out both; }
.hero__photo > img { animation: coral-drift 22s ease-out both; }
.hero--quote .quote-card { background: #fff; box-shadow: 0 40px 90px -30px rgb(0 0 0 / .65), 0 0 0 1px rgb(255 255 255 / .08); }
.hero--quote .quote-card .field :is(input, select) { background: var(--surface); }
/* the secondary button on a dark photograph: frosted glass */
:is(.hero--quote, .foot-cta) .btn--secondary { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:is(.hero--quote, .foot-cta) .btn--secondary:hover { background: #fff; color: var(--ink); border-color: #fff; }
@keyframes coral-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes coral-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgb(217 43 33 / .35); } 50% { box-shadow: 0 0 0 7px rgb(217 43 33 / 0); } }
@media (prefers-reduced-motion: reduce) { .hero__photo img, .hero--quote .hero-notice::before { animation: none; } }
@media (max-width: 1023px) {
  .hero--quote .hero-text { row-gap: var(--s-5); }
  /* phone and tablet: the buttons and the form come straight after the lead */
  .hero--quote .hero-main { display: contents; }
  .hero--quote .hero-text > *, .hero--quote .hero-main > * { grid-column: 1 / -1; }
  .hero--quote .hero-notice { order: 1; } .hero--quote h1 { order: 2; } .hero--quote .hero__lead { order: 3; }
  .hero--quote .btn-row { order: 4; } .hero--quote .hero-aside { order: 5; }
  .hero__photo::after { background: linear-gradient(180deg, rgb(8 8 8 / .72) 0%, rgb(8 8 8 / .82) 60%, rgb(8 8 8 / .9) 100%); }
}

/* the quote card (layout-components.js fills [data-quote-form]) */
.quote-card { width: 100%; display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.quote-card h2 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: var(--display-tracking); }
.quote-card .quote-sub { margin-top: calc(-1 * var(--s-3)); color: var(--ink); font-size: var(--t-small); }
.quote-card .form { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.quote-card .field :is(input, select) { background: var(--bg); }
.quote-card .btn-row .btn { width: 100%; }
.quote-card .quote-alt { margin-top: auto; font-size: var(--t-small); color: var(--muted); }
.quote-card .quote-alt a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
@media (min-width: 640px) and (max-width: 1023px) { .quote-card .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .quote-card { padding: var(--s-5); } }
.field select { appearance: none; -webkit-appearance: none; padding-inline-end: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 12px; background-position: right 14px center; }
[dir="rtl"] .field select { background-position: left 14px center; }

/* the WhatsApp button inside a row: its own green, never a third button style elsewhere */
.btn.btn--wa { background: var(--wa); color: var(--wa-ink); border-color: transparent; }
.btn.btn--wa:hover { background: color-mix(in oklab, var(--wa) 88%, black); }
.btn svg.wa-glyph, .wa-float svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ---------------------------------------------------------------- sections that hold long content
   (catalogs, tables with their notes): at least one screen, taller when the content is */
main > :is(section, .section):not(.hero) { height: auto; min-height: 0; padding: clamp(80px, 9vw, 136px) 0; overflow: clip; scroll-margin-top: calc(var(--nav) - 32px); }
main > :is(section, .section) > :is(.wrap, .container) { height: auto; }
@media (max-width: 639px) { main > :is(section, .section):not(.hero) { padding: 72px 0; } }
.section-head h2 { max-width: 24ch; }
.prose { display: grid; gap: var(--s-4); max-width: 68ch; font-size: var(--t-lead); line-height: 1.6; }
.prose a, .faq a { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--action) 50%, transparent); text-underline-offset: 3px; }
.prose a:hover, .faq a:hover { color: var(--action); text-decoration-color: currentColor; }
.ground-inverse .prose a:hover { color: var(--ink); }
.sub-head { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; margin: var(--s-7) 0 var(--s-5); }

/* the spec table: a model per row, hairlines only; a phone stacks each row with its labels */
.spec-wrap { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.spec-table th { font: 500 var(--t-label)/1.4 var(--font-text); color: var(--muted); text-align: start; padding: 0 var(--s-5) var(--s-3) 0; border-bottom: 1px solid var(--line-strong); }
.spec-table td { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
[dir="rtl"] .spec-table :is(th, td) { padding-right: 0; padding-left: var(--s-5); }
.spec-table td:first-child { font-weight: 500; width: 38%; }
.spec-table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.spec-table td small { display: block; margin-top: var(--s-1); font-size: var(--t-small); font-weight: 400; color: var(--muted); }
.spec-table caption { caption-side: top; text-align: start; font: 500 var(--t-card)/1.3 var(--font-text); padding-bottom: var(--s-4); }
.spec-table + .spec-table { margin-top: var(--s-7); }
@media (max-width: 639px) {
  .spec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; width: 100%; }
  .spec-table tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .spec-table td { padding: var(--s-1) 0; border: 0; white-space: normal; }
  .spec-table td:first-child { width: 100%; font-size: var(--t-card); padding-bottom: var(--s-2); }
  .spec-table td:not(:first-child)::before { content: attr(data-label); display: block; font-size: var(--t-label); font-weight: 500; color: var(--muted); }
}
.brochure-row { margin-top: var(--s-6); }

/* info cards on the surface (the kit's .card), one height per row */
.card-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.card-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card .t-label { color: var(--muted); }
.card ul, .card-list { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
:is(.card, .card-list) li { position: relative; padding-inline-start: var(--s-5); line-height: 1.5; }
:is(.card, .card-list) li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 8px; height: 2px; border-radius: 2px; background: var(--accent); }
@media (max-width: 1023px) { .card-row--3, .card-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .card-row, .card-row--3, .card-row--4 { grid-template-columns: minmax(0, 1fr); } }

.card-row--spaced { margin-top: var(--s-7); }

/* numbered steps (MPS): a row each, the number in the accent */
.steps-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); counter-reset: step; }
.steps-list > li { counter-increment: step; display: grid; align-content: start; gap: var(--s-3); padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.steps-list > li::before { content: counter(step, decimal-leading-zero); font: var(--display-weight) var(--t-h3)/1 var(--font-display); color: var(--accent); }
.steps-list h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
@media (max-width: 1023px) { .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); } }
@media (max-width: 639px) { .steps-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); } }

/* the FAQ: the heading on the left line, the open answers from the split line */
.faq-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq-split > .section-head { grid-column: 1 / span 7; }
.faq-split > .faq { grid-column: 8 / -1; }
@media (max-width: 1023px) { .faq-split > :is(.section-head, .faq) { grid-column: 1 / -1; } }

/* the statement band (word-highlight), its links under it */
.statement .mo-wh__text { max-width: 30ch; }
.statement__prose { margin-top: var(--s-7); font-size: var(--t-body); max-width: 72ch; }
.statement .related-links { margin-top: var(--s-5); }

/* related links: plain arrows on the left line */
.related-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-6); }

/* facts in a row (the home page's figures): small exact objects, not a stat strip */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: var(--s-7) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.facts > div { display: grid; gap: var(--s-1); }
.facts dt { order: 2; font-size: var(--t-small); color: var(--muted); }
.facts dd { margin: 0; font: var(--display-weight) var(--t-stat)/1.05 var(--font-display); letter-spacing: var(--display-tracking); }

/* a split: words left, the photograph right, top-aligned (the page's one split pair, 6/6) */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7); align-items: stretch; flex: 1 1 auto; min-height: 0; }
.split > .split__text { grid-column: 1 / span 7; display: flex; flex-direction: column; }
.split > .split__media { grid-column: 8 / -1; position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); min-height: 420px; }
.split__media :is(img, picture) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.split__media picture img { position: static; }
@media (max-width: 1023px) { .split > :is(.split__text, .split__media) { grid-column: 1 / -1; } .split > .split__media { min-height: 0; aspect-ratio: 4 / 3; } }

/* the home page's four categories: linked open tiles */
.tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); flex: 1 1 auto; }
.tile-row { align-items: start; flex: none; }
.tile-row > .tile { grid-template-rows: auto auto 1fr; align-content: start; min-width: 0; }
.tile-row .tile__media { aspect-ratio: 4 / 5; min-height: 0; width: 100%; height: auto; overflow: hidden; isolation: isolate; contain: paint; }
.tile-row .tile__media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; }
.tile-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-7); }
.tile-row--3 > .tile { grid-template-rows: auto auto 1fr; align-content: start; }
.tile-row--3 .tile__media { aspect-ratio: 4 / 3; min-height: 0; width: 100%; height: auto; }
.tile h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.tile p { color: var(--muted); font-size: var(--t-body); }
@media (max-width: 1023px) { .tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); } .tile-row .tile__media { aspect-ratio: 4 / 3; min-height: 0; } }
@media (max-width: 639px) { .tile-row, .tile-row--3 { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); } .tile-row > .tile { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s-4); row-gap: var(--s-1); align-items: start; } .tile-row > .tile > .tile__media { grid-row: 1 / span 2; aspect-ratio: 1; } .tile p { font-size: var(--t-small); } .btn-row > .btn { white-space: normal; text-align: center; justify-content: center; max-width: 100%; } }

/* ---------------------------------------------------------------- product catalogs (catalog.js) */
.filter-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.category-card { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.category-card:hover { border-color: var(--ink); }
.category-card.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--card-gap); }
.product-card { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.product-media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; margin-bottom: var(--s-3); }
.product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform 600ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .product-card:hover .product-media img { transform: scale(1.03); } }
.product-tag { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.product-card h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.product-meta { color: var(--muted); font-size: var(--t-small); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .link { margin-top: auto; padding-top: var(--s-2); font-size: var(--t-small); }
.products-empty { color: var(--muted); }
@media (max-width: 1023px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--card-gap); } .product-card h3 { font-size: var(--t-body); } }

/* ---------------------------------------------------------------- contact page: details beside the map */
.contact-list { display: grid; gap: var(--s-5); }
.contact-list > div { display: grid; gap: var(--s-1); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.contact-list dt { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.contact-list dd { margin: 0; font-size: var(--t-lead); line-height: 1.5; }
.contact-list a:hover { color: var(--action); }
.map-frame { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(.35); }

/* ---------------------------------------------------------------- WhatsApp: a quiet floating button on
   a desktop (the brief's floating WhatsApp); on a phone the action bar carries it */
.wa-float { position: fixed; z-index: 40; right: var(--s-6); bottom: var(--s-6); display: inline-flex; align-items: center; gap: var(--s-2);
  height: 48px; padding: 0 var(--s-5) 0 var(--s-4); border-radius: 999px; background: var(--wa); color: var(--wa-ink); font: 500 15px/1 var(--font-text);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.wa-float:hover { background: color-mix(in oklab, var(--wa) 88%, black); transform: translateY(-2px); }
.wa-float:active { transform: translateY(1px) scale(.985); }
.wa-float svg { width: 20px; height: 20px; }
[dir="rtl"] .wa-float { right: auto; left: var(--s-6); }
@media (max-width: 639px) { .wa-float { display: none; } }

/* ---------------------------------------------------------------- RTL (Arabic pages) */
[dir="rtl"] .link::after { content: "\2190"; }
[dir="rtl"] .m-arrow { transform: scaleX(-1); }
[dir="rtl"] .nav--split .nav__links > .nav__item:nth-child(1 of .nav__item) > .nav__link { padding-left: var(--s-3); padding-right: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.3; }
[dir="rtl"] .hero--quote h1 { line-height: 1.3; }

/* a cut-out on white (a press, a label line): whole in its frame, on the surface */
.split__media--contain :is(img, picture) { object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.spec-table--pairs td:first-child { width: 34%; }

/* ---------------------------------------------------------------- brand layer: the dividers, the
   watermark logo, soft grounds, white cards, the heading mark, the reveal and the footer */

/* the red and grey slanted strip from the old site (Dash.PNG redrawn as SVG): under the header, above the footer */
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: url("/assets/images/opt/dash.svg") center / cover no-repeat; pointer-events: none; }
.nav.is-open::after { display: none; }
.dash { height: 14px; background: url("/assets/images/opt/dash2.svg") center / cover no-repeat; }
@media (max-width: 639px) { .nav::after { height: 6px; } .dash { height: 10px; } }

/* the low-opacity Coral logo in the background, as before */
:is(#about, #faq, #showroom, #steps, #models, main > #contact:not(.hero))::before, .site-foot::before {
  content: ""; position: absolute; z-index: 0; top: -120px; right: -140px; width: 520px; aspect-ratio: 1;
  background: url("/assets/images/CORALWM.svg") center / contain no-repeat; opacity: .07; pointer-events: none; }
#faq::before, .site-foot::before { top: auto; bottom: -160px; right: auto; left: -160px; }
[dir="rtl"] :is(#about, #showroom, #steps, #models, main > #contact:not(.hero))::before { right: auto; left: -140px; }
[dir="rtl"] :is(#faq, .site-foot)::before { left: auto; right: -160px; }
@media (max-width: 639px) { :is(#about, #faq, #showroom, #steps, #models, main > #contact:not(.hero))::before, .site-foot::before { width: 300px; } }

/* soft grounds: every other section carries a faint red glow and a cool grey fade */
main > section:not(.hero, .ground-inverse):nth-of-type(even) {
  background: radial-gradient(circle at 92% 6%, rgb(217 43 33 / .08), transparent 36%), linear-gradient(180deg, #fff 0%, #f4f5f7 100%); }
.ground-inverse { background: radial-gradient(circle at 85% 0%, rgb(217 43 33 / .28), transparent 42%), radial-gradient(circle at 0% 100%, rgb(255 255 255 / .06), transparent 40%), #070707; }

/* white cards with a hairline; they lift a little on hover */
.card { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(0 0 0 / .03);
  transition: box-shadow 400ms var(--ease), border-color 400ms var(--ease); }
.card:hover { box-shadow: 0 24px 48px -24px rgb(0 0 0 / .18); border-color: transparent; }
.card .t-label { color: var(--accent); font-weight: 600; }
.ground-inverse .card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .1); }

/* the heading mark: a short slanted strip in the brand colours above every section heading */
main > section:not(.hero) .section-head::before { content: ""; display: block; width: 64px; height: 6px; margin-bottom: var(--s-5);
  background: linear-gradient(90deg, #cb0102 0 58%, #616866 58% 79%, #a3a3a3 79%); clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); }
[dir="rtl"] main > section:not(.hero) .section-head::before { background: linear-gradient(270deg, #cb0102 0 58%, #616866 58% 79%, #a3a3a3 79%); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.section-head h2 { text-wrap: balance; }

/* scroll reveal (layout-components.js adds .rv and .is-in): translate, so the kit's hover transforms still work */
.rv { opacity: 0; translate: 0 28px; transition: opacity 800ms cubic-bezier(.2, .7, .2, 1), translate 800ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rv-i, 0) * 80ms); }
.rv.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; transition: none; } }

/* a photo mosaic beside the words (home: the showroom and the team) */
.mosaic { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s-3); min-height: 520px; }
.split > .mosaic { grid-column: 8 / -1; }
.mosaic > figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); }
.mosaic > figure:first-child { grid-row: 1 / span 2; }
.mosaic :is(img, picture) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.mosaic picture img { position: static; transition: transform 1200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .mosaic figure:hover img { transform: scale(1.04); } }
@media (max-width: 1023px) { .split > .mosaic { grid-column: 1 / -1; min-height: 0; aspect-ratio: 4 / 3; } }
@media (max-width: 639px) { .split > .mosaic { aspect-ratio: 1; } }
.facts dd { color: var(--ink); }
.facts > div:first-child dd { color: var(--accent); }

/* ---------------------------------------------------------------- the footer: the divider, a photo panel
   with the page's close, the link columns, the map, the legal line */
.site-foot { position: relative; overflow: clip; isolation: isolate; background: linear-gradient(180deg, #fff 0%, #f4f5f7 100%);
  padding: clamp(48px, 6vw, 88px) 0 var(--s-7); font-size: var(--t-small); }
.site-foot > .wrap { position: relative; z-index: 1; }
.foot-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 360px; border-radius: 28px; color: #fff; background: #111; }
.foot-cta__bg, .foot-cta__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.foot-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 8 8 / .88) 0%, rgb(8 8 8 / .55) 55%, rgb(8 8 8 / .2) 100%); }
[dir="rtl"] .foot-cta::after { background: linear-gradient(270deg, rgb(8 8 8 / .88) 0%, rgb(8 8 8 / .55) 55%, rgb(8 8 8 / .2) 100%); }
.foot-cta__in { position: relative; z-index: 1; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6); padding: clamp(28px, 5vw, 64px); }
.foot-cta h2 { color: #fff; font-size: var(--t-h2); line-height: 1.1; letter-spacing: var(--display-tracking); max-width: 18ch; text-wrap: balance; }
.foot-cta p { margin-top: var(--s-3); max-width: 50ch; color: rgb(255 255 255 / .84); font-size: var(--t-lead); line-height: 1.5; }
.foot-cta p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-cta .btn-row { flex: none; }
.foot-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: var(--s-7) var(--gutter); padding: clamp(48px, 6vw, 80px) 0 var(--s-7); }
.foot-brand img { height: 52px; width: auto; }
.foot-tag { margin: var(--s-4) 0 var(--s-5); max-width: 30ch; color: var(--muted); line-height: 1.55; }
.foot-social { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.foot-social:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.foot-social svg { width: 16px; height: 16px; fill: currentColor; }
.foot-social svg.is-stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.foot-social svg.is-stroke .dot { fill: currentColor; stroke: none; }
.foot-socials { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.foot-col h3 { margin-bottom: var(--s-4); font: 600 var(--t-label)/1.4 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html[lang^="ar"] .foot-col h3 { letter-spacing: 0; text-transform: none; }
.foot-col ul { display: grid; gap: var(--s-3); }
.foot-col a { color: var(--ink); transition: color var(--dur) var(--ease); }
.foot-col a:hover { color: var(--action); }
.foot-visit address { display: grid; gap: var(--s-3); font-style: normal; line-height: 1.55; }
.foot-visit address span { display: block; }
.foot-visit b { display: block; font-weight: 500; color: var(--muted); font-size: var(--t-label); }
.foot-map { position: relative; height: 300px; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.foot-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.02); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); padding-inline-end: 190px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-label); }
@media (max-width: 1023px) {
  .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-legal { padding-inline-end: 0; }
}
@media (max-width: 639px) {
  .foot-cta { min-height: 420px; border-radius: 20px; }
  .foot-cta::after { background: linear-gradient(180deg, rgb(8 8 8 / .35) 0%, rgb(8 8 8 / .9) 70%); }
  .foot-cta .btn-row { width: 100%; }
  .foot-cta .btn-row .btn { flex: none; width: 100%; justify-content: center; }
  .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand, .foot-visit { grid-column: 1 / -1; }
  .foot-map { height: 240px; }
  .site-foot { padding-bottom: calc(var(--s-7) + 76px); }
}
.form__trap { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
h2 .ltr { white-space: nowrap; }
.card-row + .prose { margin-top: var(--s-6); }

/* About photo: the whole picture, never cropped */
#about .split > .split__media { min-height: 0; align-self: center; aspect-ratio: auto; }
#about .split__media :is(img, picture) { position: static; display: block; width: 100%; height: auto; object-fit: contain; }

/* ---------------------------------------------------------------- privacy policy and thank-you pages */
main > section.legal:not(.hero) { padding: calc(var(--nav) + var(--s-8)) 0 var(--s-9); }
.legal__eyebrow { color: var(--action); font-size: var(--t-label); font-weight: 500; margin-bottom: var(--s-3); }
.legal h1 { font-size: var(--t-h2); max-width: 22ch; }
.legal__body { max-width: 72ch; margin-top: var(--s-7); color: var(--ink); }
.legal__body h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.legal__body h3 { font-size: var(--t-body); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.legal__body p, .legal__body li { color: var(--muted); line-height: 1.65; }
.legal__body p + p { margin-top: var(--s-3); }
.legal__body ul { list-style: disc; margin: var(--s-3) 0 0; padding-inline-start: 1.2em; display: grid; gap: var(--s-1); }
.legal__body ul + p { margin-top: var(--s-3); }
main > section.legal--thanks:not(.hero) { padding-bottom: var(--s-10); }
.legal--thanks .btn-row { margin-top: var(--s-6); }
.ty-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--action); color: #fff; margin-bottom: var(--s-5); }
.ty-lead { max-width: 52ch; margin-top: var(--s-4); font-size: var(--t-lead); color: var(--muted); }
.foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a:hover { color: var(--action); }