/* ==========================================================================
   Engineer's Office for Commercial Mediation & Coordination
   Design system: "Terminal Board"
   Display: Archivo (expanded)  |  Body: IBM Plex Sans  |  Data: IBM Plex Mono
   ========================================================================== */

:root{
  /* Colour */
  --ink:        #050F24;
  --ink-2:      #0A1B38;
  --ink-3:      #14294E;
  --line-dark:  rgba(245,196,81,.18);
  --brass:      #C08B2C;
  --flare:      #F5C451;
  --bone:       #F4F1E8;
  --paper:      #FFFFFF;
  --mist:       #8A9AB5;
  --slate:      #52627C;
  --rule:       #E1DCCE;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space */
  --wrap: 1240px;
  --gut: 24px;
  --sect: clamp(72px, 9vw, 132px);

  --shadow: 0 24px 60px -32px rgba(5,15,36,.45);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:112%;
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

::selection{ background:var(--flare); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--flare);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); }
.section--tight{ padding-block:clamp(56px,6vw,88px); }
.section--dark{ background:var(--ink); color:var(--bone); }
.section--ink2{ background:var(--ink-2); color:var(--bone); }
.section--paper{ background:var(--paper); }

.lede{ font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--slate); max-width:62ch; }
.section--dark .lede,.section--ink2 .lede{ color:#B9C6DC; }

/* Eyebrow: a document reference, not decoration */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 22px;
}
.eyebrow::after{
  content:"";
  height:1px; flex:1;
  background:linear-gradient(90deg,var(--brass),transparent);
  max-width:180px;
}
.section--dark .eyebrow,.section--ink2 .eyebrow{ color:var(--flare); }
.section--dark .eyebrow::after,.section--ink2 .eyebrow::after{ background:linear-gradient(90deg,var(--flare),transparent); }

.sect-head{ max-width:820px; margin-bottom:clamp(40px,4.5vw,64px); }
.sect-head h2{ font-size:clamp(32px,4.4vw,54px); margin-bottom:18px; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--flare);
  --btn-fg:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--mono);
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--btn-bg);
  border-radius:2px;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(245,196,81,.7); }
.btn .arw{ transition:transform .18s ease; }
.btn:hover .arw{ transform:translateX(4px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:currentColor; border-color:rgba(255,255,255,.28); }
.btn--ghost:hover{ background:rgba(255,255,255,.08); box-shadow:none; }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:var(--bone); }
.btn--dark:hover{ box-shadow:0 12px 26px -14px rgba(5,15,36,.7); }
.btn--sm{ padding:11px 18px; font-size:11.5px; }

/* ---------- Header ---------- */
.site-head{ position:sticky; top:0; z-index:80; }
.topbar{ background:var(--ink); color:var(--mist); border-bottom:1px solid rgba(255,255,255,.07); }
.topbar-in{
  display:flex; align-items:center; gap:22px;
  min-height:38px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
}
.topbar a{ color:var(--mist); text-decoration:none; transition:color .15s; }
.topbar a:hover{ color:var(--flare); }
.topbar .push{ margin-inline-start:auto; }
.topbar .dot{ color:var(--brass); }

.nav-shell{
  background:rgba(10,27,56,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark);
}
.nav-in{ display:flex; align-items:center; gap:20px; min-height:84px; }

.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--bone); }
.brand-mark{ width:58px; height:58px; flex:none; object-fit:contain; }
.brand-text strong{
  display:block; font-family:var(--display); font-weight:700; font-stretch:118%;
  font-size:17.5px; letter-spacing:.01em; line-height:1.1; text-transform:uppercase;
}
.brand-text em{
  display:block; font-style:normal; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--brass); margin-top:4px;
}

.nav{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; }
.nav a{
  padding:9px 13px;
  font-size:14px; font-weight:500; color:#CBD6E8; text-decoration:none;
  border-radius:2px; position:relative; transition:color .15s;
}
.nav a:hover{ color:var(--flare); }
.nav a.is-active{ color:var(--flare); }
.nav a.is-active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:1px; background:var(--flare);
}
.nav .btn{ margin-inline-start:10px; }
.nav a.btn,.nav a.btn:hover{ color:var(--ink); }
.nav a.btn.is-active{ color:var(--ink); }
.nav a.btn.is-active::after{ display:none; }
.nav .btn:hover{ color:var(--ink); }

.nav-toggle{
  margin-inline-start:auto; display:none;
  width:44px; height:40px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-dark); border-radius:2px; color:var(--bone); cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:1.5px; background:currentColor; position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor; transition:transform .2s;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink);
  color:var(--bone);
  padding-block:clamp(64px,8vw,104px) 0;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 88% 8%, rgba(245,196,81,.16), transparent 62%),
    radial-gradient(700px 520px at 6% 88%, rgba(20,41,78,.9), transparent 60%);
  pointer-events:none;
}
/* pipeline hairlines */
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 96px);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  pointer-events:none;
}
.hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:56px; align-items:end; }

.hero h1{
  font-size:clamp(40px,6.6vw,88px);
  font-stretch:118%;
  letter-spacing:-.025em;
  margin-bottom:26px;
}
.hero h1 .gold{ color:var(--flare); }
.hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(245,196,81,.75);
}
.hero-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin:0 0 24px; display:flex; align-items:flex-start; gap:12px;
}
.hero-tag .pin{ width:6px; height:6px; flex:none; margin-top:8px; background:var(--flare); border-radius:50%; }
.hero p.lede{ color:#B9C6DC; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* Availability card — the berth board */
.berth{
  border:1px solid var(--line-dark);
  background:linear-gradient(180deg,rgba(20,41,78,.75),rgba(5,15,36,.55));
  border-radius:3px;
  padding:26px;
  backdrop-filter:blur(4px);
}
.berth-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist); padding-bottom:14px; border-bottom:1px solid var(--line-dark);
}
.live{ display:inline-flex; align-items:center; gap:7px; color:var(--flare); }
.live i{ width:7px; height:7px; border-radius:50%; background:var(--flare); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }
.berth-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px dashed rgba(255,255,255,.09);
}
.berth-row:last-of-type{ border-bottom:0; }
.berth-row b{
  font-family:var(--display); font-stretch:112%; font-weight:600; font-size:17px; letter-spacing:0;
}
.berth-row span{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); white-space:nowrap; }
.berth-note{ font-family:var(--mono); font-size:11px; line-height:1.7; color:var(--mist); margin:18px 0 0; letter-spacing:.04em; }

/* Ticker — signature element */
.ticker{
  position:relative; z-index:2;
  margin-top:clamp(52px,6vw,84px);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  background:rgba(5,15,36,.6);
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker-item{
  display:flex; align-items:center; gap:12px;
  padding:15px 30px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#C5D2E6; white-space:nowrap;
}
.ticker-item::after{ content:""; width:5px; height:5px; background:var(--brass); transform:rotate(45deg); }

/* ---------- Stats strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border-block:1px solid var(--rule); }
.stat{ background:var(--bone); padding:30px 26px; }
.stat b{
  display:block; font-family:var(--display); font-stretch:118%; font-weight:700;
  font-size:clamp(28px,3vw,40px); line-height:1; color:var(--ink);
}
.stat span{ display:block; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }

/* ---------- Generic grids ---------- */
.grid{ display:grid; gap:26px; }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5vw,72px); align-items:start; }
.split--lean{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }

/* ---------- Cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:30px 28px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#D3C9AE; }
.card h3{ font-size:20px; margin-bottom:12px; }
.card p{ margin:0; color:var(--slate); font-size:15.5px; }
.card .ico{ width:42px; height:42px; margin-bottom:20px; color:var(--brass); }
.section--dark .card,.section--ink2 .card{
  background:rgba(255,255,255,.035); border-color:var(--line-dark); color:var(--bone);
}
.section--dark .card p,.section--ink2 .card p{ color:#B0BFD6; }
.section--dark .card:hover,.section--ink2 .card:hover{ border-color:rgba(245,196,81,.4); box-shadow:none; background:rgba(255,255,255,.06); }
.section--dark .card .ico,.section--ink2 .card .ico{ color:var(--flare); }

/* Numbered card (only used where order is real) */
.card--step{ position:relative; padding-left:30px; }
.step-no{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--brass);
  display:block; margin-bottom:14px;
}

/* ---------- Product spec sheets ---------- */
.spec{
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.spec:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.spec-head{
  padding:24px 26px 20px;
  background:var(--ink); color:var(--bone);
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.spec-head h3{ font-size:20px; line-height:1.15; }
.spec-head .code{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--flare);
  border:1px solid var(--line-dark); padding:4px 8px; border-radius:2px; white-space:nowrap;
}
.spec-body{ padding:22px 26px 26px; }
.spec-body p{ margin:0 0 18px; color:var(--slate); font-size:15px; }
.spec-list{ list-style:none; margin:0; padding:0; }
.spec-list li{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px dashed var(--rule);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
}
.spec-list li:last-child{ border-bottom:0; }
.spec-list li span:first-child{ color:var(--slate); text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; }
.spec-list li span:last-child{ color:var(--ink); font-weight:500; text-align:right; }

.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(245,196,81,.14); color:var(--brass);
  border:1px solid rgba(192,139,44,.35);
  padding:5px 10px; border-radius:2px;
}
.badge i{ width:6px; height:6px; border-radius:50%; background:var(--brass); }

/* ---------- Catalogue table ---------- */
.tablewrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--paper); }
table.cat{ width:100%; border-collapse:collapse; min-width:640px; }
table.cat th,table.cat td{ text-align:left; padding:15px 22px; border-bottom:1px solid var(--rule); }
table.cat th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); background:var(--ink); font-weight:500;
}
table.cat td{ font-size:15px; color:var(--slate); }
table.cat td:first-child{ color:var(--ink); font-weight:600; font-family:var(--display); font-stretch:110%; }
table.cat tbody tr:last-child td{ border-bottom:0; }
table.cat tbody tr:hover{ background:#FBF9F4; }
table.cat td .mono{ font-family:var(--mono); font-size:12.5px; }

/* ---------- Process rail ---------- */
.rail{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.rail li{
  display:grid; grid-template-columns:96px 1fr; gap:28px;
  padding:30px 0; border-top:1px solid var(--rule);
  align-items:start;
}
.rail li:last-child{ border-bottom:1px solid var(--rule); }
.rail .n{
  font-family:var(--display); font-stretch:120%; font-weight:700; font-size:38px; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px var(--brass);
}
.rail h3{ font-size:21px; margin-bottom:8px; }
.rail p{ margin:0; color:var(--slate); max-width:62ch; }
.section--dark .rail li{ border-color:rgba(255,255,255,.1); }
.section--dark .rail p{ color:#B0BFD6; }
.section--dark .rail .n{ -webkit-text-stroke-color:var(--flare); }

/* ---------- Market list ---------- */
.market{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:24px 0; border-bottom:1px solid var(--rule);
}
.market:last-child{ border-bottom:0; }
.market .mk{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--brass);
  border:1px solid var(--rule); padding:6px 10px; border-radius:2px; white-space:nowrap;
}
.market h3{ font-size:19px; margin-bottom:6px; }
.market p{ margin:0; color:var(--slate); font-size:15.5px; }
.section--dark .market{ border-color:rgba(255,255,255,.1); }
.section--dark .market p{ color:#B0BFD6; }
.section--dark .market .mk{ border-color:var(--line-dark); color:var(--flare); }

/* ---------- Quote / statement ---------- */
.statement{
  font-family:var(--display); font-stretch:112%; font-weight:600;
  font-size:clamp(24px,3.2vw,40px); line-height:1.18; letter-spacing:-.015em;
  max-width:20ch;
}
.statement .gold{ color:var(--flare); }

/* ---------- Callout / CTA band ---------- */
.cta-band{
  background:var(--ink-2); color:var(--bone);
  border-top:1px solid var(--line-dark);
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(680px 320px at 82% 30%,rgba(245,196,81,.15),transparent 65%);
}
.cta-in{ position:relative; display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between; }
.cta-in h2{ font-size:clamp(28px,3.6vw,44px); max-width:16ch; }
.cta-in p{ color:#B9C6DC; max-width:48ch; margin:14px 0 0; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(36px,5vw,64px); align-items:start; }
.cinfo{ list-style:none; margin:0; padding:0; }
.cinfo li{ display:grid; grid-template-columns:44px 1fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--rule); }
.cinfo li:first-child{ padding-top:0; }
.cinfo .ico{ width:40px; height:40px; color:var(--brass); }
.cinfo b{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-bottom:5px; }
.cinfo a,.cinfo span{ font-size:17px; color:var(--ink); text-decoration:none; font-weight:500; word-break:break-word; }
.cinfo a:hover{ color:var(--brass); }

.form{
  background:var(--paper); border:1px solid var(--rule); border-radius:3px;
  padding:clamp(26px,3vw,38px);
}
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px;
  font-family:var(--body); font-size:16px; color:var(--ink);
  background:#FCFBF7; border:1px solid var(--rule); border-radius:2px;
  transition:border-color .15s, background .15s;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brass); background:var(--paper); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--slate); margin:16px 0 0; }
.formmsg{ padding:14px 16px; border-radius:2px; font-size:15px; margin-bottom:20px; }
.formmsg--ok{ background:#EDF7EF; border:1px solid #BFE0C6; color:#1E5B2E; }
.formmsg--err{ background:#FBECEC; border:1px solid #E5C1C1; color:#8B2020; }

/* ---------- Page header (inner pages) ---------- */
.phead{
  background:var(--ink); color:var(--bone);
  padding-block:clamp(56px,6.5vw,92px);
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-dark);
}
.phead::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(760px 400px at 84% 10%,rgba(245,196,81,.14),transparent 62%);
}
.phead::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 96px);
  mask-image:linear-gradient(180deg,transparent,#000 40%,#000 100%);
}
.phead-in{ position:relative; z-index:2; max-width:820px; }
.phead h1{ font-size:clamp(34px,5.2vw,64px); margin-bottom:18px; }
.phead p{ color:#B9C6DC; font-size:clamp(17px,1.4vw,19px); max-width:60ch; margin:0; }
.crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin:0 0 20px;
}
.crumb a{ text-decoration:none; color:var(--mist); }
.crumb a:hover{ color:var(--flare); }

/* ---------- Footer ---------- */
.site-foot{ background:var(--ink); color:var(--bone); padding-top:clamp(56px,6vw,80px); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:52px; }
.foot-brand .brand{ margin-bottom:20px; }
.foot-grid p{ color:#93A3BC; font-size:15px; margin:0 0 16px; max-width:38ch; }
.foot-grid h4{
  font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin-bottom:18px;
}
.foot-links{ list-style:none; margin:0; padding:0; }
.foot-links li{ margin-bottom:11px; }
.foot-links a{ color:#B0BFD6; text-decoration:none; font-size:15px; transition:color .15s; }
.foot-links a:hover{ color:var(--flare); }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--mist);
}
.foot-bottom a{ color:var(--flare); text-decoration:none; }
.foot-bottom a:hover{ text-decoration:underline; }

/* WhatsApp float */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff; box-shadow:0 12px 28px -10px rgba(37,211,102,.75);
  transition:transform .2s;
}
.wa:hover{ transform:scale(1.07); }
.wa svg{ width:28px; height:28px; }

/* ---------- Reveal on scroll ---------- */
.js .rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .rv.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-in{ grid-template-columns:1fr; gap:44px; align-items:start; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .foot-links a{ display:inline-block; padding:6px 0; }
  .topbar-in a{ padding:7px 0; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--line-dark);
    padding:10px 16px 20px;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 6px; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav a.is-active::after{ display:none; }
  .nav .btn{ margin:14px 0 0; justify-content:center; }
  .nav-in{ position:relative; }
  .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split,.split--lean,.contact-grid{ grid-template-columns:minmax(0,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .topbar-in{ gap:14px; font-size:10.5px; }
  .topbar .hide-sm{ display:none; }
}
@media (max-width:620px){
  body{ font-size:16px; }

  /* Catalogue table restacks into cards */
  .tablewrap{ border:0; background:transparent; overflow:visible; }
  table.cat{ min-width:0; display:block; }
  table.cat thead{ display:none; }
  table.cat tbody,table.cat tr,table.cat td{ display:block; width:100%; }
  table.cat tr{
    background:var(--paper); border:1px solid var(--rule); border-radius:3px;
    margin-bottom:14px; padding:6px 0;
  }
  table.cat tbody tr:hover{ background:var(--paper); }
  table.cat td{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:9px 16px; border-bottom:1px dashed var(--rule); text-align:right;
  }
  table.cat tr td:last-child{ border-bottom:0; }
  table.cat td::before{
    content:attr(data-label);
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--slate); text-align:left; flex:none;
  }
  table.cat td:first-child{
    background:var(--ink); color:var(--bone); border-radius:2px 2px 0 0;
    margin:-6px 0 0; padding:14px 18px; font-size:17px; border-bottom:0;
  }
  table.cat td:first-child::before{ display:none; }
  table.cat td:first-child{ text-align:left; }
  .brand-text em{ display:none; }
  .brand-mark{ width:50px; height:50px; }
  .brand-text strong{ font-size:16px; }
  .wa{ width:48px; height:48px; right:14px; bottom:14px; }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:32px; }
  .rail li{ grid-template-columns:1fr; gap:10px; }
  .rail .n{ font-size:28px; }
  .field-row{ grid-template-columns:1fr; }
  .cinfo li{ grid-template-columns:1fr; gap:8px; }
  .cinfo .ico{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:22px 18px; }
  .market{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .market .mk{ justify-self:start; }
  .berth{ padding:20px 18px; }
  :root{ --gut:18px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .rv{ opacity:1; transform:none; }
}

@media print{
  .site-head,.wa,.cta-band,.ticker{ display:none; }
  body{ background:#fff; }
}


/* ==========================================================================
   Photography
   ========================================================================== */

/* Hero with a photographic backdrop */
.hero--photo{
  background-image:url("../img/crude-pour-wide.jpg");
  background-size:cover;
  background-position:72% center;
}
.hero--photo::before{
  background:
    linear-gradient(100deg, rgba(5,15,36,.96) 0%, rgba(5,15,36,.9) 32%, rgba(5,15,36,.45) 58%, rgba(5,15,36,.38) 100%),
    linear-gradient(180deg, rgba(5,15,36,.5) 0%, rgba(5,15,36,0) 34%, rgba(5,15,36,.55) 78%, rgba(5,15,36,.9) 100%);
}
.hero--photo::after{ opacity:.35; }

/* Page header with a photographic backdrop */
.phead--photo{
  background-size:cover; background-position:center;
  padding-block:clamp(70px,8vw,120px);
}
.phead--photo::after{ opacity:.35; }
.phead--photo::before{
  background:
    linear-gradient(100deg, rgba(5,15,36,.93) 0%, rgba(5,15,36,.78) 36%, rgba(5,15,36,.3) 70%, rgba(5,15,36,.2) 100%),
    linear-gradient(180deg, rgba(5,15,36,.4) 0%, rgba(5,15,36,.18) 45%, rgba(5,15,36,.75) 100%);
}

/* Full-width image band */
.band{
  position:relative;
  min-height:clamp(320px,42vw,480px);
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  color:var(--bone);
  overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,15,36,.55) 0%, rgba(5,15,36,.12) 26%, rgba(5,15,36,.82) 66%, rgba(5,15,36,.97) 100%),
    linear-gradient(90deg, rgba(5,15,36,.72) 0%, rgba(5,15,36,.28) 42%, transparent 70%);
}
.band-in{ position:relative; z-index:2; width:100%; padding-block:clamp(38px,5vw,56px); }
.band h2{ font-size:clamp(26px,3.4vw,42px); max-width:20ch; margin-bottom:14px; }
.band p{ color:#C7D3E6; max-width:56ch; margin:0; font-size:clamp(16px,1.3vw,18px); }
.band .eyebrow{ color:var(--flare); }
.band .eyebrow::after{ background:linear-gradient(90deg,var(--flare),transparent); }

/* Photo tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.tile{
  position:relative; margin:0; overflow:hidden;
  border-radius:3px; aspect-ratio:4/3;
  background:var(--ink-3);
}
.tile--wide{ grid-column:span 2; aspect-ratio:auto; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.tile:hover img{ transform:scale(1.06); }
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 22px 20px;
  background:linear-gradient(180deg,transparent,rgba(5,15,36,.9) 55%);
  color:var(--bone);
}
.tile figcaption b{
  display:block; font-family:var(--display); font-stretch:112%; font-weight:700;
  font-size:19px; line-height:1.15; letter-spacing:-.01em;
}
.tile figcaption span{
  display:block; margin-top:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--flare);
}

/* Photo on a spec sheet */
.spec-photo{ aspect-ratio:16/9; overflow:hidden; background:var(--ink-3); }
.spec-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.spec:hover .spec-photo img{ transform:scale(1.05); }

@media (max-width:900px){
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile--wide{ grid-column:span 2; aspect-ratio:2.2/1; }
  .hero--photo{ background-position:70% center; }
}
@media (max-width:620px){
  .tiles{ grid-template-columns:1fr; }
  .tile--wide{ grid-column:span 1; aspect-ratio:16/9; }
}


/* Visually hidden (honeypot) — safe in both directions */
.hp{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Language chooser
   ========================================================================== */
.lang{ position:relative; }

.lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px;
  background:transparent;
  border:1px solid rgba(245,196,81,.32); border-radius:2px;
  color:var(--flare);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.lang-btn:hover{ background:rgba(245,196,81,.12); border-color:var(--flare); }
.lang-ico{ width:14px; height:14px; flex:none; }
.lang-chev{ width:12px; height:12px; flex:none; transition:transform .2s ease; }
.lang-btn[aria-expanded="true"] .lang-chev{ transform:rotate(180deg); }
.lang-btn[aria-expanded="true"]{ background:rgba(245,196,81,.12); border-color:var(--flare); }

.lang-menu{
  position:absolute; z-index:90;
  top:calc(100% + 8px); inset-inline-end:0;
  min-width:170px; margin:0; padding:6px;
  list-style:none;
  background:var(--ink-2);
  border:1px solid var(--line-dark); border-radius:3px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:none; }

.lang-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px;
  color:#CBD6E8 !important; text-decoration:none;
  font-family:var(--body); font-size:14.5px; letter-spacing:0;
  border-radius:2px;
  transition:background .14s, color .14s;
}
.lang-menu a:hover{ background:rgba(255,255,255,.07); color:var(--flare) !important; }
.lang-menu a.is-current{ color:var(--flare) !important; }
.lang-tick{ width:15px; height:15px; flex:none; color:var(--flare); }
.lang-menu a[lang="ar"]{ font-family:var(--ar-body); font-size:15.5px; }
.lang-menu a[lang="en"]{ font-family:var(--body); }

/* Language block inside the mobile menu (hidden on desktop) */
.nav-lang{ display:none; }
.nav-lang-label{
  display:flex; align-items:center; gap:8px;
  padding:6px 6px 10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass);
}
[dir="rtl"] .nav-lang-label{ font-family:var(--ar-body); font-size:13px; letter-spacing:0; text-transform:none; font-weight:600; }
.nav-lang a{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 6px !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:15px;
}
.nav-lang a.is-current{ color:var(--flare); }
.nav-lang a[lang="ar"]{ font-family:var(--ar-body); font-size:16px; }
.nav-lang a[lang="en"]{ font-family:var(--body); }

@media (max-width:900px){
  .nav-lang{ display:block; margin-top:18px; border-top:1px solid var(--line-dark); padding-top:14px; }
}

/* ==========================================================================
   Arabic / right-to-left
   ========================================================================== */
:root{
  --ar-display:"Cairo", "Segoe UI", Tahoma, sans-serif;
  --ar-body:"IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] body{ font-family:var(--ar-body); line-height:1.85; }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:var(--ar-display);
  font-weight:800; font-stretch:normal;
  letter-spacing:0; line-height:1.35;
}
[dir="rtl"] .hero h1{ line-height:1.28; }
[dir="rtl"] .statement{ max-width:24ch; line-height:1.4; }

/* Arabic does not take tracking or uppercase well */
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-tag,
[dir="rtl"] .berth-top,
[dir="rtl"] .berth-row span,
[dir="rtl"] .berth-note,
[dir="rtl"] .stat span,
[dir="rtl"] .spec-head .code,
[dir="rtl"] .spec-list li span,
[dir="rtl"] .market .mk,
[dir="rtl"] .tile figcaption span,
[dir="rtl"] .badge,
[dir="rtl"] .crumb,
[dir="rtl"] .step-no,
[dir="rtl"] .foot-grid h4,
[dir="rtl"] .field label,
[dir="rtl"] .cinfo b,
[dir="rtl"] .form-note,
[dir="rtl"] .btn,
[dir="rtl"] table.cat th,
[dir="rtl"] .foot-bottom,
[dir="rtl"] .lang-btn,
[dir="rtl"] .topbar-in{
  font-family:var(--ar-body);
  letter-spacing:0;
  text-transform:none;
}
[dir="rtl"] .eyebrow{ font-size:13px; font-weight:600; }
[dir="rtl"] .btn{ font-size:14px; font-weight:600; }
[dir="rtl"] .btn--sm{ font-size:13px; }
[dir="rtl"] .topbar-in{ font-size:12.5px; }
[dir="rtl"] .lang-btn{ font-size:13px; font-weight:600; }
[dir="rtl"] .brand-text strong{ font-family:var(--ar-display); font-weight:800; font-size:19px; letter-spacing:0; }
[dir="rtl"] .brand-text em{ font-family:var(--ar-body); font-size:11.5px; letter-spacing:0; text-transform:none; }
[dir="rtl"] .nav a{ font-size:15px; }
[dir="rtl"] .stat span{ font-size:12.5px; }
[dir="rtl"] .market .mk{ font-size:12px; font-weight:600; }
[dir="rtl"] .field label{ font-size:12.5px; font-weight:600; }
[dir="rtl"] .cinfo b{ font-size:12.5px; font-weight:600; }
[dir="rtl"] .foot-grid h4{ font-size:13px; font-weight:700; }
[dir="rtl"] .spec-list li span:first-child{ font-size:12.5px; }
[dir="rtl"] .spec-head .code{ font-size:12px; font-weight:600; }
[dir="rtl"] table.cat th{ font-size:13px; font-weight:600; }
[dir="rtl"] .tile figcaption b{ font-family:var(--ar-display); font-weight:800; letter-spacing:0; }
[dir="rtl"] .tile figcaption span{ font-size:12px; }
[dir="rtl"] .berth-row b{ font-family:var(--ar-display); font-weight:700; letter-spacing:0; }
[dir="rtl"] .berth-row span,[dir="rtl"] .berth-top{ font-size:12.5px; }
[dir="rtl"] .berth-note,[dir="rtl"] .form-note{ font-size:13px; line-height:1.85; }
[dir="rtl"] .crumb,[dir="rtl"] .step-no{ font-size:13px; font-weight:600; }
[dir="rtl"] .rail .n{ font-family:var(--display); font-stretch:120%; }
[dir="rtl"] .foot-bottom{ font-size:13px; }
[dir="rtl"] .badge{ font-size:12px; font-weight:600; }

/* Latin fragments inside Arabic pages keep the mono face */
[dir="rtl"] [dir="ltr"]{ font-family:var(--mono); }
[dir="rtl"] .brand-text [dir="ltr"]{ font-family:inherit; }

/* Mirror the directional gradients */
[dir="rtl"] .eyebrow::after{ background:linear-gradient(270deg,var(--brass),transparent); }
[dir="rtl"] .section--dark .eyebrow::after,
[dir="rtl"] .section--ink2 .eyebrow::after,
[dir="rtl"] .band .eyebrow::after{ background:linear-gradient(270deg,var(--flare),transparent); }

[dir="rtl"] .hero--photo{ background-position:28% center; }
[dir="rtl"] .hero--photo::before{
  background:
    linear-gradient(260deg, rgba(5,15,36,.96) 0%, rgba(5,15,36,.9) 32%, rgba(5,15,36,.45) 58%, rgba(5,15,36,.38) 100%),
    linear-gradient(180deg, rgba(5,15,36,.5) 0%, rgba(5,15,36,0) 34%, rgba(5,15,36,.55) 78%, rgba(5,15,36,.9) 100%);
}
[dir="rtl"] .phead--photo{ background-position:30% center; }
[dir="rtl"] .phead--photo::before{
  background:
    linear-gradient(260deg, rgba(5,15,36,.93) 0%, rgba(5,15,36,.78) 36%, rgba(5,15,36,.3) 70%, rgba(5,15,36,.2) 100%),
    linear-gradient(180deg, rgba(5,15,36,.4) 0%, rgba(5,15,36,.18) 45%, rgba(5,15,36,.75) 100%);
}
[dir="rtl"] .band::before{
  background:
    linear-gradient(180deg, rgba(5,15,36,.55) 0%, rgba(5,15,36,.12) 26%, rgba(5,15,36,.82) 66%, rgba(5,15,36,.97) 100%),
    linear-gradient(270deg, rgba(5,15,36,.72) 0%, rgba(5,15,36,.28) 42%, transparent 70%);
}

/* Ticker runs the other way */
[dir="rtl"] .ticker-track{ animation-name:slide-rtl; }
@keyframes slide-rtl{ to{ transform:translateX(50%); } }

/* Spec sheet and table alignment */
[dir="rtl"] .spec-list li span:last-child{ text-align:left; }
[dir="rtl"] table.cat th,[dir="rtl"] table.cat td{ text-align:right; }

@media (max-width:620px){
  [dir="rtl"] table.cat td{ text-align:left; }
  [dir="rtl"] table.cat td::before{ text-align:right; }
  [dir="rtl"] table.cat td:first-child{ text-align:right; }
}

@media (max-width:620px){
  .topbar .push{ display:none; }
  html:not([dir="rtl"]) .lang{ margin-left:auto; }
  html[dir="rtl"] .lang{ margin-right:auto; }
}