/* Printable product guide (A4). Also readable on screen. */

:root {
  --ink: #14181d;
  --muted: #56616d;
  --line: #dde3e9;
  --soft: #f3f5f7;
  --dark: #0b0d10;
  --molten: #ff6b1a;
  --molten-2: #ffb347;
  --deep: #c24d0a;
  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
}

@page { size: A4; margin: 14mm 13mm 16mm; }
@page cover { margin: 0; }
@page {
  @bottom-left { content: 'Aspire Dream Steel Trading LLC  ·  +971 50 213 2786  ·  steel@aspire-power.com'; font: 8pt var(--body); color: #8a95a1; }
  @bottom-right { content: counter(page); font: 700 9pt var(--body); color: #c24d0a; }
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: #fff; font-size: 10.5pt; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }
p { margin: 0 0 0.8em; }

.kicker { margin: 0 0 6px; font-size: 8.5pt; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--deep); }

/* Screen-only toolbar */
.screen-bar {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: rgba(11, 13, 16, 0.92); backdrop-filter: blur(8px);
}
.screen-bar a { color: #e9edf1; text-decoration: none; font-weight: 600; font-size: 14px; }
.screen-bar .dl { padding: 9px 18px; border-radius: 999px; color: #1a0d03; background: linear-gradient(120deg, var(--molten), var(--molten-2)); }

/* Cover */
.cover {
  page: cover; position: relative; overflow: hidden; height: 297mm; color: #e9edf1; background: var(--dark);
  break-after: page;
}
/* Yard photo across the top 62%, cut with a diagonal edge and an orange accent strip. */
.cv-photo,
.cv-shade { position: absolute; left: 0; right: 0; top: 32mm; height: calc(62% - 32mm); clip-path: polygon(0 0, 100% 0, 100% 85.5%, 0 100%); }
.cv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; filter: brightness(0.5) contrast(1.08) saturate(1.1); }
.cv-shade { background: linear-gradient(180deg, rgba(11, 13, 16, 0.3) 0%, rgba(11, 13, 16, 0.05) 18%, rgba(11, 13, 16, 0.55) 38%, rgba(11, 13, 16, 0.8) 60%, rgba(11, 13, 16, 0.95) 100%); }
.cover::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 64%; background: #ff8a2b;
  clip-path: polygon(0 96.9%, 100% 85.3%, 100% 87.6%, 0 99.2%);
}
.cv-top { position: absolute; top: 5mm; left: 14mm; right: 14mm; display: flex; justify-content: space-between; align-items: center; }
.cv-brand { display: flex; align-items: center; gap: 4mm; }
.cover-logo { width: 22mm; height: 22mm; padding: 1.5mm; border-radius: 4mm; background: #fff; object-fit: contain; }
.cv-brand strong { display: block; font: 800 22pt/1 var(--head); letter-spacing: 0.04em; }
.cv-brand span { font-size: 8.5pt; font-weight: 700; letter-spacing: 0.24em; color: var(--molten-2); }
.cv-edition { display: grid; justify-items: center; padding: 2.5mm 5mm; border: 0.4mm solid rgba(255, 255, 255, 0.6); border-radius: 3mm; background: rgba(11, 13, 16, 0.45); }
.cv-edition span { font-size: 7pt; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #c7d0d9; }
.cv-edition strong { font: 800 20pt/1 var(--head); color: var(--molten-2); }
.cv-title { position: absolute; left: 14mm; right: 14mm; top: 100mm; }
.cv-kicker { display: inline-block; margin-bottom: 4mm; padding: 1.6mm 4mm; border-radius: 99px; font-size: 8.5pt; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #1a0d03; background: #ff8a2b; }
.cover h1 { margin: 0 0 4mm; font: 800 44pt/0.92 var(--head); text-transform: uppercase; color: var(--molten-2); }
.cv-outline { font-size: 104pt; line-height: 0.85; color: #fff; }
.cv-sub { max-width: 128mm; margin: 0; font-size: 10.5pt; line-height: 1.5; color: #d5dce3; }
.cv-band { position: absolute; left: 14mm; right: 14mm; top: 197mm; }
.cv-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3mm; }
.cv-tiles figure { margin: 0; padding: 2.5mm 2mm 2mm; border-radius: 3mm; background: #161b21; border: 0.3mm solid rgba(255, 255, 255, 0.12); text-align: center; }
.cv-tiles .render { height: 18mm; display: grid; place-items: center; }
.cv-tiles .render svg { height: 100%; width: auto; max-width: 100%; }
.cv-tiles figcaption { margin-top: 1.5mm; font-size: 7.5pt; font-weight: 700; color: #e9edf1; }
.cv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-top: 6mm; padding-top: 5mm; border-top: 0.3mm solid rgba(255, 255, 255, 0.15); }
.cv-stats strong { display: block; font: 800 22pt/1 var(--head); color: #fff; }
.cv-stats span { font-size: 7.5pt; color: #aab4be; }
.cv-promise { display: flex; justify-content: center; align-items: center; gap: 4mm; margin: 8mm 0 0; font: 700 12pt var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: #e9edf1; }
.cv-promise i { font-style: normal; font-size: 7pt; color: #ff8a2b; }
.cv-contact {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.1fr 1.3fr; gap: 6mm;
  padding: 6mm 14mm; background: #ff8a2b; color: #1a0d03;
}
.cv-contact small { display: block; font-size: 7pt; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.cv-contact strong { font-size: 10.5pt; }
.cover-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 12mm 12mm;
}

/* Contents page */
.toc { break-after: page; padding-top: 2mm; }
.toc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; margin-bottom: 6mm; padding-bottom: 5mm; border-bottom: 0.6mm solid var(--molten); }
.toc-head h2 { font: 800 30pt/1 var(--head); text-transform: uppercase; }
.toc-tip { max-width: 85mm; margin: 0; padding: 3mm 4mm; border-radius: 3mm; background: var(--soft); border-left: 1mm solid var(--molten); font-size: 8.8pt; color: #36414c; }
.toc-cols { column-count: 2; column-gap: 10mm; }
.toc-row { display: flex; align-items: baseline; gap: 2mm; padding: 1mm 0; color: var(--ink); text-decoration: none; break-inside: avoid; }
.toc-row.lvl-1 { margin-top: 2.8mm; font: 700 11.5pt/1.2 var(--head); text-transform: uppercase; break-after: avoid; }
.toc-row.lvl-1 .toc-page { color: var(--deep); }
.toc-row.lvl-2 { padding-left: 4mm; font-size: 9.2pt; color: #36414c; }
.toc-dots { flex: 1; min-width: 4mm; border-bottom: 0.3mm dotted #b0bac4; transform: translateY(-1mm); }
.toc-page { min-width: 7mm; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.contents a { color: var(--molten-2); }

/* Shared section heads */
.sec-head { margin-bottom: 7mm; }
.sec-head h2,
.intro h2 { font: 800 28pt/1 var(--head); text-transform: uppercase; margin-bottom: 3mm; }
.sec-head p:not(.kicker) { color: var(--muted); max-width: 165mm; }

/* Intro */
.intro { break-after: page; padding-top: 4mm; }
.intro-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10mm; }
.intro-grid > div:first-child > p { color: #36414c; }
.intro-points { list-style: none; padding: 0; margin: 6mm 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.intro-points li { padding: 4mm; border-radius: 3mm; background: var(--soft); font-size: 9pt; color: var(--muted); border-left: 1mm solid var(--molten); }
.intro-points strong { display: block; color: var(--ink); font-size: 10pt; }
.contents { padding: 6mm; border-radius: 4mm; background: var(--dark); color: #e9edf1; }
.contents .kicker { color: var(--molten-2); }
.contents ol { margin: 3mm 0 0; padding-left: 7mm; display: grid; gap: 1.6mm; font-size: 10pt; }
.contents li::marker { color: var(--molten-2); font-weight: 700; }

/* Overview */
.overview { break-after: page; }
.ov-cat { margin-bottom: 6mm; break-inside: avoid; }
.ov-cat h3 { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 2mm; margin-bottom: 3mm; border-bottom: 0.6mm solid var(--molten); }
.ov-cat h3 span { font: 800 15pt var(--head); text-transform: uppercase; }
.ov-cat h3 em { font-style: normal; font-size: 8.5pt; color: var(--muted); }
.ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.ov-card { break-inside: avoid; border: 1px solid var(--line); border-radius: 3mm; overflow: hidden; background: #fff; }
.ov-vis { position: relative; overflow: hidden; height: 26mm; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #e9edf1, #f8fafb); }
.ov-vis img,
.fam-vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-vis .render { height: 100%; padding: 2mm 5mm; display: grid; place-items: center; }
.ov-vis .render svg { height: 100%; width: auto; }
.ov-card h4 { padding: 2.5mm 3mm 0; font: 700 11pt/1.1 var(--head); text-transform: uppercase; }
.ov-card p { padding: 1mm 3mm 0; margin: 0; font-size: 7.5pt; color: var(--muted); line-height: 1.35; }
.ov-card ul { list-style: none; margin: 0; padding: 1.5mm 3mm 3mm; display: flex; flex-wrap: wrap; gap: 1mm; }
.ov-card li { font-size: 6.8pt; padding: 0.5mm 1.6mm; border-radius: 1mm; background: var(--soft); color: #36414c; }

/* Size tables */
.tables-sec > .sec-head { break-after: avoid; }
/* A product section never starts at the foot of a page: if it does not fit, it moves to the next page.
   Long tables still continue onto following pages; the picture and drawing always stay in one piece. */
.fam { margin-bottom: 8mm; break-inside: avoid; }
.fam-side,
.fam-vis,
.fam-sec { break-inside: avoid; }
.fam-head { break-after: avoid; }
.fam tr { break-inside: avoid; }
.group-banner {
  display: flex; justify-content: space-between; align-items: baseline; margin: 4mm 0 5mm; padding: 3mm 5mm; border-radius: 3mm;
  background: linear-gradient(120deg, var(--molten), var(--molten-2)); color: #1a0d03; break-after: avoid;
}
.group-banner:not(:first-child) { break-before: page; }
.group-banner span { font: 800 20pt var(--head); text-transform: uppercase; }
.group-banner em { font-style: normal; font-weight: 700; font-size: 9pt; }
.contents li small { display: block; color: #8a95a1; font-size: 8pt; line-height: 1.35; }
.fam-head { display: flex; align-items: center; gap: 4mm; padding: 3mm 4mm; border-radius: 3mm 3mm 0 0; background: var(--dark); color: #fff; }
.fam-num { font: 800 22pt/1 var(--head); color: transparent; -webkit-text-stroke: 0.3mm var(--molten-2); }
.fam-head h3 { font: 800 16pt var(--head); text-transform: uppercase; }
.fam-head p { margin: 0; font-size: 8.5pt; color: #aab4be; }
.fam-body { display: grid; grid-template-columns: 52mm 1fr; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 3mm 3mm; }
.fam-side { padding: 3mm; border-right: 1px solid var(--line); display: grid; gap: 3mm; align-content: start; background: #fafbfc; }
.fam-vis { position: relative; height: 32mm; border-radius: 2mm; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #e9edf1, #f8fafb); }
/* The drawing fills the box inside a small margin, scaled to fit, so tall sections are never cropped. */
.fam-vis .render { position: absolute; inset: 2.5mm 5mm; }
.fam-vis .render svg { height: 100%; width: 100%; }
.fam-sec { margin: 0; }
.fam.wide .fam-body { grid-template-columns: 1fr; }
.fam.wide .fam-side { grid-template-columns: 40mm 52mm 1fr; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
.fam.wide table { font-size: 7.4pt; }
.fam.wide th,
.fam.wide td { padding: 1.2mm 1.6mm; }
.fam tr.band-1 { background: #f2f5f8; }
.fam tr.band-0 { background: #fff; }
.fam tr.group-start td { border-top: 0.5mm solid #ff8a2b; }
.fam-sec svg { width: 100%; height: auto; }
.fam-sec figcaption { text-align: center; font-size: 7.5pt; color: var(--muted); }
.sec-fill { fill: #8fa3b8; fill-opacity: 0.35; stroke: var(--molten); stroke-width: 1.4; }
.sec-dim line { stroke: #8a95a1; stroke-width: 1; }
.sec-text { fill: #36414c; font: 600 11px var(--body); }
.fam table,
.conv table { width: 100%; border-collapse: collapse; font-size: 8.5pt; font-variant-numeric: tabular-nums; }
.fam th,
.conv th { text-align: left; vertical-align: bottom; padding: 1.8mm 2.5mm; font-size: 7.4pt; line-height: 1.25; font-weight: 700; color: #1a0d03; background: #ff8a2b; white-space: normal; }
.fam td,
.conv td { padding: 1.4mm 2.5mm; border-top: 1px solid #edf0f3; white-space: nowrap; }
.fam td:first-child { font-weight: 700; }
.fam tbody tr:nth-child(even),
.conv tbody tr:nth-child(even) { background: #f6f8fa; }
.fam td.w { color: var(--deep); font-weight: 700; }

/* Formulas */
.formulas { break-before: page; }
.f-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm; margin-bottom: 8mm; }
.f-card { padding: 4mm 5mm; border-radius: 3mm; border: 1px solid var(--line); border-left: 1.2mm solid var(--molten); break-inside: avoid; }
.f-card h4 { font: 800 13pt var(--head); text-transform: uppercase; margin-bottom: 1.5mm; }
.f-card .f { margin: 0 0 1mm; font: 600 11pt 'Consolas', 'Courier New', monospace; color: var(--deep); }
.f-card small { color: var(--muted); font-size: 8pt; }
.conv { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.conv table { border: 1px solid var(--line); }

/* Material grades */
.grades-sec { break-before: page; }
.grd-read { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5mm; margin-bottom: 7mm; break-inside: avoid; }
.grd-card { padding: 4mm 5mm; border-radius: 3mm; border: 1px solid var(--line); border-left: 1.2mm solid var(--molten); }
.grd-card h3 { margin-bottom: 2.5mm; font: 800 13pt var(--head); text-transform: uppercase; }
.grd-example { display: flex; gap: 1.5mm; margin: 0 0 3mm; }
.grd-example span { padding: 1.2mm 2.6mm; border-radius: 1.5mm; font: 800 15pt/1 var(--head); color: #fff; background: #4f6274; }
.grd-example span:first-child { background: #e2580c; }
.grd-example span:nth-child(3) { background: #2f7da8; }
.grd-example span:last-child { background: #a3430a; }
.grd-card dl { display: grid; grid-template-columns: 22mm 1fr; gap: 1mm 3mm; margin: 0; font-size: 8pt; }
.grd-card dt { font-weight: 800; color: var(--deep); }
.grd-card dd { margin: 0; color: #36414c; }
.grd-small { margin: -1mm 0 2.5mm; font-size: 8pt; color: var(--muted); }
.grd { margin-bottom: 7mm; break-inside: avoid; }
.grd h3 { padding-bottom: 1.5mm; margin-bottom: 2mm; border-bottom: 0.6mm solid var(--molten); font: 800 14pt var(--head); text-transform: uppercase; }
.grd h4 { margin: 3mm 0 1.5mm; font: 800 11pt var(--head); text-transform: uppercase; }
.grd-applies { margin: 0 0 1mm; font-size: 8.5pt; }
.grd-applies strong { color: var(--deep); }
.grd-intro { margin: 0 0 2.5mm; font-size: 8.5pt; color: var(--muted); }
.grd-table { width: 100%; border-collapse: collapse; font-size: 7.6pt; }
.grd-table th,
.grd-table td { padding: 1.3mm 2mm; text-align: left; vertical-align: top; border-top: 1px solid #edf0f3; }
.grd-table thead th { font-weight: 700; color: #1a0d03; background: #ff8a2b; border-top: 0; }
.grd-table tbody th { font-weight: 800; white-space: nowrap; }
.grd-table tbody tr:nth-child(even) { background: #f6f8fa; }

/* Back cover */
.back {
  break-before: page; position: relative; overflow: hidden; padding: 16mm 14mm; border-radius: 5mm; min-height: 240mm;
  color: #e9edf1; background: radial-gradient(110mm 80mm at 85% 15%, rgba(255, 107, 26, 0.3), transparent 70%), linear-gradient(160deg, #1b2129, var(--dark) 70%);
}
.back > * { position: relative; }
.back h2 { margin: 10mm 0 3mm; font: 800 44pt/0.95 var(--head); text-transform: uppercase; }
.back > p { color: #aab4be; font-size: 12pt; }
.back-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin: 10mm 0; }
.back-grid div { padding: 5mm; border-radius: 3mm; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.back-grid small { display: block; color: var(--molten-2); font-size: 8pt; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1mm; }
.back-grid strong { font-size: 11pt; font-weight: 600; }
.back-note { font-size: 8.5pt !important; color: #8a95a1 !important; }

/* On screen: show the guide as a centred document */
@media screen {
  body { background: #d9dee3; }
  .cover,
  .toc,
  .intro,
  .overview,
  .tables-sec,
  .grades-sec,
  .formulas,
  .back { width: min(210mm, 100%); margin: 24px auto; background-color: #fff; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.35); }
  .toc,
  .intro,
  .overview,
  .tables-sec,
  .grades-sec,
  .formulas { padding: 14mm 13mm; }
  .cover { height: 297mm; background-color: var(--dark); }
  .back { border-radius: 0; background-color: var(--dark); }
}
@media screen and (max-width: 700px) {
  body { font-size: 15px; }
  /* Keep the A4 cover layout and scale it down to the phone width. */
  .cover { width: 210mm; zoom: 0.46; margin: 12px auto; }

  .intro-grid,
  .conv,
  .back-grid,
  .f-grid { grid-template-columns: 1fr; display: grid; }
  .ov-grid { grid-template-columns: repeat(2, 1fr); }
  .fam-body { grid-template-columns: 1fr; }
  .fam-side { border-right: 0; grid-template-columns: 1fr 1fr; }
  .fam table { display: block; overflow-x: auto; }
  .toc,
  .intro,
  .overview,
  .tables-sec,
  .grades-sec,
  .formulas { padding: 22px 16px; }
  .grd-read { grid-template-columns: 1fr; }
  .grd-table { display: block; overflow-x: auto; }
}
@media print {
  .screen-bar { display: none; }
  /* Soft shadows and filters are rasterised in PDFs; drop them to keep the file small. */
  .render svg ellipse,
  .cover-beam svg ellipse { display: none; }
  .cover-beam { filter: none; }
  /* CSS gradients also become images in print; use solid colours. */
  .fam th,
  .conv th { background: #ff8a2b; }
  .ov-vis,
  .fam-vis { background: #eef1f4; }
  .group-banner,
  .cover-kicker { background: #ff8a2b; }
  .fam-side { background: #fafbfc; }
}
.back-grid div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.nw { white-space: nowrap; }