/* ==========================================================================
   Kuwaiti 3 Lines Co.
   Design system: the company is called Three Lines, so three rules of
   decreasing weight are the structural device throughout. No monospace,
   no numbered eyebrows, no card grids. Information density is the point.
   One stylesheet for both languages; RTL comes from logical properties.
   ========================================================================== */

:root {
  /* Warm neutrals biased toward the brand red, so the greys read as chosen. */
  --ink:       #14100E;
  --ink-2:     #3C342E;
  --slate:     #6E645C;
  --rule:      #DCD5CD;
  --rule-2:    #EDE8E2;
  --paper:     #FFFFFF;
  --paper-2:   #F7F4F0;
  --red:       #A81F1F;
  --oxblood:   #6B1717;
  --oxblood-2: #521111;
  --red-soft:  #F6EAE8;

  --lat: Archivo, "Helvetica Neue", sans-serif;
  --ar-display: "Noto Kufi Arabic", sans-serif;
  --ar-body: "Noto Sans Arabic", sans-serif;

  --display: var(--lat);
  --body: var(--lat);

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 4rem);
  --sec: clamp(4rem, 8vw, 7.5rem);
}

[lang="ar"] {
  --display: var(--ar-display);
  --body: var(--ar-body);
  /* Re-declare, don't just redefine. A custom property resolves against the
     element where font-family is *declared* (body), so redefining --body further
     down the tree alone leaves Arabic text inheriting the computed Latin face. */
  font-family: var(--ar-body);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; inset-inline-start: 0; top: -100px;
  background: var(--ink); color: #fff; padding: .8rem 1.4rem; z-index: 99;
}
.skip:focus { top: 0; }

/* ---------- type ---------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--display); }

/* Expanded, heavy, tightly tracked: the authority of a machine nameplate. */
.display {
  font-size: clamp(2.5rem, 6.4vw, 5.1rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: .96;
  letter-spacing: -.033em;
  text-wrap: balance;
}
[lang="ar"] .display {
  font-stretch: normal;
  line-height: 1.34;
  letter-spacing: 0;
  font-size: clamp(2rem, 5vw, 3.9rem);
}

.h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}
[lang="ar"] .h2 { font-stretch: normal; line-height: 1.36; letter-spacing: 0; font-size: clamp(1.5rem, 2.7vw, 2.2rem); }

.h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.28; }
[lang="ar"] .h3 { letter-spacing: 0; line-height: 1.5; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.09rem, 1.5vw, 1.32rem);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 54ch;
}
[lang="ar"] .lede { line-height: 1.85; }

.prose p { max-width: 62ch; }
[lang="ar"] .prose p { line-height: 1.95; }

.eyebrow {
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--red);
  text-transform: none;
  margin: 0 0 .9rem;
}

.small { font-size: .875rem; line-height: 1.55; color: var(--slate); }

/* ---------- the three lines: the site's structural signature -------------- */

.rules { display: grid; gap: 3px; }
.rules i { display: block; background: var(--red); height: 4px; }
.rules i:nth-child(2) { height: 2px; opacity: .55; }
.rules i:nth-child(3) { height: 1px; opacity: .3; }

.rules--sec { margin-block: 0 2.6rem; max-width: 76px; }
.rules--div { margin-block: 0; }
.rules--light i { background: #E9B4B0; }

/* ---------- utility strip + masthead -------------------------------------- */

.util {
  background: var(--ink);
  color: #A9A099;
  font-size: .82rem;
}
.util-in {
  max-width: var(--wrap); margin-inline: auto; padding: .55rem var(--gut);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem;
}
.util a { text-decoration: none; transition: color .16s; }
.util a:hover { color: #fff; }
.util .sep { color: #4A423C; }
.util .push { margin-inline-start: auto; }
.util strong { color: #fff; font-weight: 600; }

.mast { border-block-end: 2px solid var(--ink); background: var(--paper); }
.mast-in {
  max-width: var(--wrap); margin-inline: auto; padding: 1.15rem var(--gut);
  display: flex; align-items: center; gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-inline-end: auto; min-width: 0; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand-name {
  font-family: var(--display);
  font-size: 1.06rem; font-weight: 700; font-stretch: 106%;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.15;
}
[lang="ar"] .brand-name { font-stretch: normal; letter-spacing: 0; font-size: 1.02rem; }
.brand-sub { font-size: .78rem; color: var(--slate); margin-block-start: .1rem; line-height: 1.3; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: .95rem; font-weight: 500; text-decoration: none; color: var(--ink-2);
  padding-block: .45rem; position: relative; white-space: nowrap; transition: color .16s;
}
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1.15rem;
  height: 3px; background: var(--red); transform: scaleY(0); transform-origin: bottom;
  transition: transform .2s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after, .nav a:hover::after { transform: scaleY(1); }

/* Native disclosure: the site ships no navigation JavaScript. */
.menu { display: none; }
.menu > summary { list-style: none; cursor: pointer; padding: .5rem; margin-inline-end: -.5rem; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; display: block; width: 24px; height: 13px;
  border-block: 2.5px solid var(--ink);
}
.menu[open] > summary::after { border-block-color: var(--red); }
.menu-panel {
  position: absolute; inset-inline: 0; top: 100%; z-index: 30;
  background: var(--paper); border-block-end: 2px solid var(--ink);
  padding: .25rem var(--gut) 1.25rem; display: grid;
  box-shadow: 0 24px 40px -26px rgba(20,16,14,.45);
}
.menu-panel a {
  padding: .9rem 0; border-block-end: 1px solid var(--rule-2);
  text-decoration: none; font-size: 1.02rem; font-weight: 500; color: var(--ink);
}

@media (max-width: 940px) {
  .nav { display: none; }
  .menu { display: block; }
  .mast { position: relative; }
  .brand img { width: 38px; height: 38px; }
  .brand-name { font-size: .95rem; }
  .brand-sub { display: none; }
}

/* ---------- buttons ------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--body); font-size: .97rem; font-weight: 600;
  text-decoration: none; padding: .95rem 1.6rem;
  /* Brand red is the primary action across the site; on the oxblood bands it
     inverts to .btn--light, since red on red would disappear. */
  background: var(--red); color: #fff; border: 2px solid var(--red);
  transition: background .18s, border-color .18s, color .18s;
}
.btn:hover { background: var(--oxblood); border-color: var(--oxblood); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--red); color: var(--red); }
.btn--light { background: #fff; color: var(--oxblood); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; border-color: #fff; }

/* ---------- masthead block (page opener) ---------------------------------- */

/* Bottom padding so the call to action never sits flush against the colour
   change of the band below it. */
.opener { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.75rem, 5vw, 4.5rem); }
.opener-grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 900px) { .opener-grid { grid-template-columns: 1fr; } }

.opener .display { margin-block-end: 1.6rem; }
.opener .lede { margin-block-end: 2.2rem; }
.opener-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 2.4rem; }

/* The introduction continues under the headline rather than restarting as its
   own titled section. Lede sets the first beat, this carries the rest. */
.opener-prose { max-width: 60ch; }
.opener-prose p + p { margin-block-start: 1.15em; }
[lang="ar"] .opener-prose { line-height: 1.95; }

/* Quick-reference panel: the four facts a buyer checks first. */
.facts { border-block-start: 4px solid var(--ink); padding-block-start: 1.5rem; }
.facts dl { margin: 0; display: grid; gap: 1.35rem; }
.facts dt { font-size: .8rem; font-weight: 600; color: var(--slate); margin-block-end: .2rem; }
.facts dd { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.facts a { color: var(--red); text-decoration: none; }
.facts a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- sections ------------------------------------------------------ */

.sec { padding-block: var(--sec); }
.sec--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.sec--alt { background: var(--paper-2); }

.sechead { margin-block-end: 2.8rem; }
.sechead .h2 { max-width: 22ch; }
.sechead p { margin-block-start: 1rem; max-width: 58ch; color: var(--slate); }

/* ---------- catalogue index: the signature layout ------------------------- */

.index { border-block-start: 4px solid var(--ink); }

.idx-row {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  gap: 1rem 3rem;
  padding-block: 2.1rem;
  border-block-end: 1px solid var(--rule);
}
@media (max-width: 780px) { .idx-row { grid-template-columns: 1fr; gap: 1.1rem; } }

.idx-cat .h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700; font-stretch: 106%; letter-spacing: -.022em;
  color: var(--oxblood);
}
[lang="ar"] .idx-cat .h3 { font-stretch: normal; letter-spacing: 0; }
.idx-cat p { margin-block-start: .5rem; font-size: .875rem; color: var(--slate); line-height: 1.5; }

/* Multi-column term list, the way a printed index actually sets. */
.idx-items {
  columns: 3 170px;
  column-gap: 2.5rem;
  margin: 0; padding: 0; list-style: none;
}
.idx-items li {
  break-inside: avoid;
  font-size: .95rem;
  padding-block: .3rem;
  padding-inline-start: .95rem;
  position: relative;
  color: var(--ink-2);
}
.idx-items li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .95em;
  width: 5px; height: 2px; background: var(--red);
}

/* Home shows one summary line per family instead of the full index. */
.idx-line { margin: 0; font-size: 1.02rem; line-height: 1.62; color: var(--ink-2); max-width: 62ch; }
[lang="ar"] .idx-line { line-height: 1.9; }

/* ---------- ordered procedure (numbering only where order is real) -------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2.5rem 2.4rem; counter-reset: st; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: st; }
.steps li::before {
  content: counter(st);
  font-family: var(--display);
  display: block; font-size: 2.5rem; font-weight: 700; font-stretch: 112%;
  line-height: 1; color: var(--red); letter-spacing: -.04em;
  padding-block-end: .8rem; margin-block-end: 1rem;
  border-block-end: 2px solid currentColor;
}
[lang="ar"] .steps li::before { font-stretch: normal; letter-spacing: 0; }
.steps .h3 { margin-block-end: .45rem; }
.steps p { font-size: .93rem; color: var(--slate); }

/* ---------- oxblood statement band ---------------------------------------- */

.band { background: var(--oxblood); color: #E6CFCC; padding-block: var(--sec); }
.band .h2, .band .h3 { color: #fff; }
.band .eyebrow { color: #E9B4B0; }
.band .lede { color: #EBD9D6; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .band-grid { grid-template-columns: 1fr; } }

/* ---------- specification table ------------------------------------------- */

.spec { border-block-start: 4px solid var(--ink); }
.spec-row {
  display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr);
  gap: .35rem 2.5rem; padding-block: 1.15rem; border-block-end: 1px solid var(--rule);
}
@media (max-width: 620px) { .spec-row { grid-template-columns: 1fr; } }
.spec dt { font-size: .875rem; font-weight: 600; color: var(--slate); }
.spec dd { margin: 0; color: var(--ink); font-weight: 500; }
.spec dd a { color: var(--red); text-decoration: none; }
.spec dd a:hover { text-decoration: underline; text-underline-offset: 4px; }

.band .spec { border-block-start-color: rgba(255,255,255,.5); }
.band .spec-row { border-block-end-color: rgba(255,255,255,.18); }
.band .spec dt { color: #C29B98; }
.band .spec dd { color: #fff; }
.band .spec dd a { color: #F0C0BC; }

/* ---------- contact ------------------------------------------------------- */

.callbar {
  border-block: 4px solid var(--ink);
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.callbar .h2 { max-width: 18ch; }
.tel {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 700; font-stretch: 112%; letter-spacing: -.035em;
  color: var(--red); text-decoration: none; direction: ltr;
  border-block-end: 4px solid transparent; transition: border-color .18s;
}
[lang="ar"] .tel { font-stretch: normal; letter-spacing: -.02em; }
.tel:hover { border-block-end-color: var(--red); }

.reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 0; border-block-start: 1px solid var(--rule); }
.reach > * {
  padding: 1.9rem 1.9rem 1.9rem 0; text-decoration: none; display: block;
  border-block-end: 1px solid var(--rule);
  border-inline-end: 1px solid var(--rule);
}
.reach > *:last-child { border-inline-end: 0; }
@media (max-width: 720px) { .reach > * { border-inline-end: 0; padding-inline-end: 0; } }
.reach a:hover .rv-v { color: var(--red); }
.reach .rv-k { display: block; font-size: .8rem; font-weight: 600; color: var(--slate); margin-block-end: .7rem; }
.reach .rv-v { display: block; font-size: 1.09rem; font-weight: 600; color: var(--ink); line-height: 1.35; word-break: break-word; transition: color .16s; }
.reach .rv-v.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .reach .rv-v.ltr { text-align: right; }
.reach .addr { display: block; margin-block-start: .55rem; font-size: .84rem; line-height: 1.55; color: var(--slate); font-weight: 400; }

/* ---------- footer -------------------------------------------------------- */

.foot { background: var(--ink); color: #918880; padding-block: clamp(3rem, 5vw, 4.5rem) 1.75rem; font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 2.5rem; padding-block-end: 2.5rem; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: 2.25rem; } }
.foot h4 { font-size: .82rem; font-weight: 600; color: #6E645C; margin-block-end: 1.1rem; font-family: var(--body); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot a { text-decoration: none; color: #B4ABA3; transition: color .16s; }
.foot a:hover { color: #fff; }
.foot .brand-name { color: #fff; }
.foot .brand-sub { color: #6E645C; }
.foot .blurb { max-width: 36ch; margin-block-start: 1.15rem; line-height: 1.65; }
.foot-btm {
  padding-block-start: 1.6rem; border-block-start: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: #635A53; line-height: 1.6;
}
.foot .ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- load reveal (one orchestrated moment, CSS only) --------------- */

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rv { animation: rise .72s cubic-bezier(.16,.8,.3,1) both; animation-delay: calc(var(--d, 0) * 85ms); }
@media (prefers-reduced-motion: reduce) { .rv { animation: none; } }

@media print {
  .util, .menu, .nav { display: none; }
  body { background: #fff; }
}