/* ==========================================================================
   Masader Group — corporate site styles
   Palette taken from the Masader logo: navy wordmark + red arc
   ========================================================================== */

:root{
  --navy:        #232a75;
  --navy-deep:   #151a4d;
  --navy-ink:    #0d1136;
  --navy-soft:   #eef0fa;
  --red:         #e2231a;
  --red-deep:    #b8150e;

  --ink:         #12141c;
  --body:        #4d5366;
  --muted:       #767c90;
  --line:        #e3e7f0;
  --line-soft:   #eff2f8;
  --white:       #ffffff;
  --surface:     #f5f7fc;
  --sand:        #faf8f4;

  --ff-display:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ff:          "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --maxw:        1300px;
  --gutter:      32px;
  --radius:      14px;
  --radius-lg:   22px;

  --shadow-sm:   0 2px 8px rgba(17,22,60,.06);
  --shadow-md:   0 14px 34px -18px rgba(17,22,60,.28);
  --shadow-lg:   0 34px 70px -34px rgba(17,22,60,.42);

  --ease:        cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--ff);
  font-size:16.5px;
  line-height:1.78;
  font-weight:400;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.4rem,5vw,3.9rem); line-height:1.12; }
h2{ font-size:clamp(1.85rem,3.3vw,2.6rem); }
h3{ font-size:clamp(1.2rem,1.8vw,1.42rem); }
h4{ font-size:1.02rem; font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--navy); color:#fff; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(64px,8vw,116px) 0; }
.section--tight{ padding:clamp(52px,6vw,80px) 0; }
.section--surface{ background:var(--surface); }
.section--sand{ background:var(--sand); }
.section--navy{ background:var(--navy-ink); color:#c3c8e6; }
.section--navy h2,.section--navy h3,.section--navy h4{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); margin:0 0 18px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); display:block; }
.section--navy .eyebrow{ color:#ff6a60; }
.section--navy .eyebrow::before{ background:#ff6a60; }

.lead{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--body); }
.section--navy .lead{ color:#b5bcdf; }

.head{ max-width:820px; margin-bottom:clamp(36px,4vw,56px); }
.head--center{ margin-inline:auto; text-align:center; }
.head--center .eyebrow{ justify-content:center; }

.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:.94rem; font-weight:600; letter-spacing:.01em; text-decoration:none;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease),
    color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:var(--red); color:#fff; box-shadow:0 12px 28px -14px rgba(226,35,26,.9); }
.btn--primary:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn--navy{ background:var(--navy); color:#fff; }
.btn--navy:hover{ background:var(--navy-deep); transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(255,255,255,.36); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn--outline{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--outline:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-2px); }

.arrow-link{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:600; font-size:.92rem; color:var(--navy);
}
.arrow-link svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.arrow-link:hover svg{ transform:translateX(4px); }
.arrow-link::after{ content:""; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:80; }

.topbar{ background:var(--navy-ink); color:#a8b0d8; font-size:.82rem; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; flex-wrap:wrap; }
.topbar__group{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.topbar a{ text-decoration:none; color:inherit; transition:color .2s var(--ease); }
.topbar a:hover{ color:#fff; }
.topbar__item{ display:inline-flex; align-items:center; gap:8px; }
.topbar__item svg{ width:14px; height:14px; color:var(--red); flex:none; }
.topbar__phone{ font-weight:600; color:#fff !important; }

.nav{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s var(--ease);
}
.site-header.is-stuck .nav{ box-shadow:0 10px 30px -22px rgba(17,22,60,.55); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:104px; }
.brand{ display:flex; align-items:center; gap:15px; text-decoration:none; flex:none; }
.brand img{ height:65px; width:auto; }
.brand:hover img{ opacity:.88; transition:opacity .2s var(--ease); }
.brand__tag{ display:none; }

.nav__links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0 0 0 auto; padding:0; }
.nav__links a{
  display:block; padding:11px 16px; border-radius:8px; text-decoration:none;
  font-size:1.12rem; font-weight:500; color:#3a4059;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:hover{ color:var(--navy); background:var(--navy-soft); }
.nav__links a[aria-current="page"]{ color:var(--navy); font-weight:600; }
.nav__links a[aria-current="page"]::after{
  content:""; display:block; height:2px; width:18px; margin:4px auto -2px; background:var(--red); border-radius:2px;
}
.nav__cta{ flex:none; }
.nav__cta-mobile{ display:none; }
.nav__toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff;
  border-radius:10px; cursor:pointer; padding:0; place-items:center;
}
.nav__toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:background .2s var(--ease); }
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .28s var(--ease), top .2s var(--ease);
}
.nav__toggle span::before{ top:-6px; }
.nav__toggle span::after{ top:6px; }
body.nav-open .nav__toggle span{ background:transparent; }
body.nav-open .nav__toggle span::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav__toggle span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1024px){
  /* backdrop-filter creates a containing block for fixed children,
     which would trap the drawer inside the nav bar — drop it here. */
  .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; }
  .nav__toggle{ display:grid; }
  .nav__cta{ display:none; }
  .nav__links{
    position:fixed; inset:auto 0 0 0; top:var(--nav-offset,120px);
    flex-direction:column; align-items:stretch; gap:0; margin:0; background:#fff;
    padding:12px var(--gutter) 34px; border-top:1px solid var(--line);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
    overflow-y:auto; box-shadow:var(--shadow-lg);
  }
  body.nav-open .nav__links{ opacity:1; transform:none; pointer-events:auto; }
  .nav__links a{ padding:15px 6px; border-bottom:1px solid var(--line-soft); border-radius:0; font-size:1rem; }
  .nav__cta-mobile{ display:block; margin-top:22px; }
  .nav__cta-mobile a{ width:100%; padding:15px 26px; border-bottom:0; color:#fff; font-size:.95rem; }
  .nav__cta-mobile a[aria-current="page"]{ color:#fff; }
  .nav__links a[aria-current="page"]::after{ display:none; }
  .nav__links a[aria-current="page"]{ color:var(--red); }
}
@media (max-width:640px){
  .nav__in{ min-height:88px; }
  .brand img{ height:49px; }
  .topbar__group--left{ display:none; }
  .topbar__group .topbar__item:not(.topbar__phone){ display:none; }
  .topbar__in{ justify-content:center; }
  .topbar{ font-size:.78rem; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--navy-ink); color:#fff; isolation:isolate;
  display:flex; align-items:center;
  aspect-ratio:1920 / 960;   /* taller than the photo; `cover` fills it, no navy band */
  min-height:680px;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    /* overlay keeps the white headline legible over the bright sunrise side */
    linear-gradient(97deg,
      rgba(11,15,48,.93) 0%,
      rgba(11,15,48,.84) 28%,
      rgba(11,15,48,.56) 50%,
      rgba(11,15,48,.26) 72%,
      rgba(11,15,48,.20) 100%),
    url("../img/banner.jpg") center 42% / cover no-repeat,
    linear-gradient(155deg,#0d1136 0%,#1a2060 52%,#0f1440 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.hero__arc{ display:none; }
.hero__in{ position:relative; width:100%; padding-block:clamp(48px,5vw,76px); }
.hero__badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.06);
  font-size:.8rem; letter-spacing:.04em; color:#d6daf5; margin-bottom:26px;
}
.hero__badge b{ background:var(--red); color:#fff; font-weight:600; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.hero h1{ color:#fff; max-width:15ch; margin-bottom:24px; }
.hero h1 em{ font-style:normal; color:#ff6a60; }
.hero__sub{ max-width:52ch; font-size:clamp(1.05rem,1.6vw,1.22rem); color:#b9c0e6; margin-bottom:36px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.stats{ background:#fff; border-bottom:1px solid var(--line-soft); }
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr); align-items:stretch;
  padding-block:clamp(38px,4.5vw,58px);
}
.stats__item{ position:relative; padding:4px 26px; display:flex; flex-direction:column; }
.stats__item:first-child{ padding-left:0; }
.stats__item + .stats__item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:64px; background:var(--line);
}
.stats__item b{
  display:block; font-family:var(--ff-display); font-size:clamp(2rem,3.2vw,2.7rem);
  font-weight:600; color:var(--navy); line-height:1; letter-spacing:-.035em;
}
.stats__item > span{ display:block; margin-top:10px; font-size:.9rem; color:var(--muted); }
.stats__item b > span{ font:inherit; letter-spacing:inherit; color:inherit; display:inline; }

@media (max-width:900px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  .stats__item:nth-child(odd){ padding-left:0; }
  .stats__item:nth-child(odd)::before{ display:none; }
}
@media (max-width:520px){
  .stats__grid{ grid-template-columns:1fr; row-gap:26px; }
  .stats__item{ padding-inline:0; }
  .stats__item::before{ display:none; }
}
@media (max-width:900px){
  .hero{ aspect-ratio:auto; min-height:auto; }
  .hero__in{ padding-block:clamp(64px,9vw,96px); }
  .hero::before{ background-position:center, center 42%, center; }
}

/* ---------- page hero (inner pages) ---------- */
.pagehero{ position:relative; background:var(--navy-ink); color:#fff; overflow:hidden; isolation:isolate; }
.pagehero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(97deg,
               rgba(11,15,48,.95) 0%,
               rgba(11,15,48,.90) 34%,
               rgba(11,15,48,.74) 60%,
               rgba(11,15,48,.58) 100%),
             url("../img/banner.jpg") center 62% / cover no-repeat,
             linear-gradient(140deg,#0d1136,#1c2368 70%,#121646);
}
.pagehero__in{ position:relative; }
.pagehero__arc{ display:none; }
.pagehero__in{ padding:clamp(56px,7vw,92px) 0 clamp(60px,7vw,96px); max-width:820px; }
.pagehero h1{ color:#fff; font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:18px; }
.pagehero p{ color:#b9c0e6; font-size:clamp(1rem,1.5vw,1.15rem); max-width:60ch; }
.crumbs{ display:flex; gap:10px; align-items:center; font-size:.83rem; color:#8b93c4; margin-bottom:20px; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ color:#fff; }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--red);
  transition:width .35s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:#d6dcec; }
.card:hover::after{ width:100%; }
.card p{ font-size:.97rem; color:var(--body); }
.card h3{ font-family:var(--ff); font-size:1.08rem; font-weight:600; letter-spacing:-.01em; }

.ico{
  width:52px; height:52px; display:grid; place-items:center; border-radius:13px;
  background:var(--navy-soft); color:var(--navy); margin-bottom:20px;
}
.ico svg{ width:24px; height:24px; }
.card:hover .ico{ background:var(--navy); color:#fff; transition:background .3s var(--ease), color .3s var(--ease); }

/* ---------- about split ---------- */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.split--reverse .split__media{ order:-1; }
.split__media{ position:relative; }

.panel{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(150deg,#1b2266,#0e1238); color:#fff; padding:clamp(30px,4vw,46px);
  box-shadow:var(--shadow-lg);
}
.panel::after{
  content:""; position:absolute; right:-30%; top:-40%; width:110%; aspect-ratio:1;
  background:radial-gradient(circle,rgba(226,35,26,.4),transparent 62%);
}
.panel > *{ position:relative; z-index:1; }
.panel h3{ color:#fff; }
.panel p{ color:#b9c0e6; }

.badge-year{
  display:flex; align-items:flex-end; gap:14px; margin-bottom:24px;
  font-family:var(--ff-display); font-weight:600; font-size:clamp(2.8rem,5.4vw,4rem);
  color:#fff; line-height:.95; letter-spacing:-.04em;
}
.badge-year small{
  font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:#ff6a60; line-height:1.5; padding-bottom:6px;
}

.factlist{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.factlist li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; }
.factlist svg{ width:19px; height:19px; flex:none; color:var(--red); margin-top:3px; }

/* ---------- values strip ---------- */
.strip{ border-block:1px solid var(--line); background:var(--sand); }
.strip__grid{
  list-style:none; margin:0; padding-block:clamp(34px,4vw,50px);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.strip__item{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:15px; padding:6px 20px;
}
.strip__item + .strip__item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:62px; background:var(--line);
}
.strip__ico{
  width:56px; height:56px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--navy);
  box-shadow:0 1px 2px rgba(17,22,60,.04);
  transition:background .3s var(--ease), color .3s var(--ease),
    border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.strip__ico svg{ width:25px; height:25px; }
.strip__item:hover .strip__ico{
  background:var(--navy); border-color:var(--navy); color:#fff;
  transform:translateY(-4px); box-shadow:0 14px 26px -14px rgba(35,42,117,.75);
}
.strip__label{
  font-weight:600; font-size:.97rem; line-height:1.4; letter-spacing:-.01em;
  color:var(--ink); max-width:19ch;
}

@media (max-width:1080px){
  .strip__grid{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .strip__item + .strip__item::before{ display:none; }
}
@media (max-width:640px){
  .strip__grid{ grid-template-columns:repeat(2,1fr); row-gap:28px; }
  .strip__item{ padding-inline:8px; gap:12px; }
  .strip__ico{ width:50px; height:50px; }
  .strip__label{ font-size:.9rem; }
}

/* ---------- vision / mission ---------- */
/* one card, split in two — icon, label, claim, statement */
.vm{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
.vm::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 50%,var(--navy) 50%,var(--navy) 100%);
}
.vm__col{ position:relative; padding:clamp(34px,4vw,56px); }
.vm__col + .vm__col::before{
  content:""; position:absolute; left:0; top:clamp(34px,4vw,56px); bottom:clamp(34px,4vw,56px);
  width:1px; background:var(--line);
}
.vm__ico{
  width:58px; height:58px; display:grid; place-items:center; border-radius:16px;
  background:var(--navy-soft); color:var(--navy); margin-bottom:24px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.vm__ico svg{ width:27px; height:27px; }
.vm__col:hover .vm__ico{ background:var(--navy); color:#fff; transform:translateY(-4px); }
.vm__col:first-child:hover .vm__ico{ background:var(--red); }
.vm__num{
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); display:block; margin-bottom:12px; font-weight:600;
}
.vm__col + .vm__col .vm__num{ color:var(--navy); }
.vm__col h3{ margin-bottom:14px; }
.vm__col p{ font-size:1.03rem; color:var(--body); margin:0; }

@media (max-width:820px){
  .vm{ grid-template-columns:1fr; }
  .vm::before{ background:linear-gradient(90deg,var(--red),var(--navy)); }
  .vm__col + .vm__col::before{
    left:clamp(34px,4vw,56px); right:clamp(34px,4vw,56px);
    top:0; bottom:auto; width:auto; height:1px;
  }
}

/* ---------- product list ---------- */
.prod{
  display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
  padding:30px 28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease),
    background .3s var(--ease), border-color .3s var(--ease);
}
.prod + .prod{ margin-top:14px; }
.prod__num{ font-family:var(--ff-display); font-size:1.35rem; color:var(--red); font-weight:600; min-width:46px; letter-spacing:-.02em; }
.prod h3{ margin-bottom:6px; font-family:var(--ff); font-size:1.12rem; font-weight:600; }
.prod p{ margin:0; font-size:.96rem; }
.prod__go{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--navy); flex:none; transition:all .3s var(--ease);
}
.prod__go svg{ width:16px; height:16px; }
.prod:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#d6dcec; }
.prod:hover .prod__go{ background:var(--red); border-color:var(--red); color:#fff; }
@media (max-width:640px){
  .prod{ grid-template-columns:auto 1fr; gap:16px; padding:24px 20px; }
  .prod__go{ display:none; }
}

/* ---------- article blocks ---------- */
.article{ display:grid; grid-template-columns:260px 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
.article + .article{ margin-top:clamp(50px,6vw,84px); padding-top:clamp(50px,6vw,84px); border-top:1px solid var(--line); }
.article__aside{ position:sticky; top:150px; }
.article__aside h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:14px; }
.article__aside .tagline{ font-size:.9rem; color:var(--muted); }
.article__body{ max-width:78ch; }
.article__body p{ font-size:1.02rem; }
@media (max-width:900px){
  .article{ grid-template-columns:1fr; }
  .article__aside{ position:static; }
}

.tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; padding:0; list-style:none; }
.tags li{
  font-size:.82rem; font-weight:500; color:var(--navy); background:var(--navy-soft);
  padding:7px 14px; border-radius:999px;
}

/* ---------- timeline ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:var(--line); }
.tl{ position:relative; padding-bottom:38px; }
.tl:last-child{ padding-bottom:0; }
.tl::before{
  content:""; position:absolute; left:-31px; top:7px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--red);
}
.tl b{ display:block; font-family:var(--ff-display); font-size:1.35rem; font-weight:600; letter-spacing:-.02em; color:var(--navy); line-height:1; margin-bottom:8px; }
.tl p{ font-size:.97rem; margin:0; }

/* ---------- cta ---------- */
.cta{ position:relative; overflow:hidden; background:var(--navy-ink); color:#fff; isolation:isolate; }
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(620px 320px at 82% 18%,rgba(226,35,26,.32),transparent 60%),
             linear-gradient(120deg,#131842,#242c7e);
}
.cta__in{ display:flex; gap:32px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding-block:clamp(52px,6vw,78px); }
.cta h2{ color:#fff; max-width:18ch; margin:0; }
.cta p{ color:#b9c0e6; max-width:46ch; margin:14px 0 0; }
.cta__actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:start; }
.info-card{ display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--line); }
.info-card:first-of-type{ padding-top:0; }
.info-card__ico{ width:46px; height:46px; border-radius:12px; background:var(--navy-soft); color:var(--navy);
  display:grid; place-items:center; flex:none; }
.info-card__ico svg{ width:20px; height:20px; }
.info-card h4{ margin:0 0 4px; }
.info-card p,.info-card a{ margin:0; font-size:.97rem; color:var(--body); text-decoration:none; }
.info-card a{ display:inline-block; padding:10px 0; margin:-10px 0; }
.info-card a:hover{ color:var(--red); }


.map{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; line-height:0; }
.map iframe{ width:100%; height:420px; border:0; display:block; }
.contact-map{ display:flex; flex-direction:column; gap:16px; }
.contact-map .map iframe{ height:clamp(360px,42vw,540px); }
.contact-map__link{ align-self:flex-start; }

/* ---------- footer ---------- */
.footer{ background:var(--navy-ink); color:#9aa2cf; padding-top:clamp(56px,6vw,82px); font-size:.94rem; }
.footer a{ text-decoration:none; transition:color .2s var(--ease); }
.footer a:hover{ color:#fff; }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:38px; padding-bottom:48px; }
.footer__brand img{ height:62px; width:auto; }
.footer__brand p{ margin-top:20px; max-width:34ch; color:#8f97c7; }
.footer h4{ color:#fff; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer__contact li{ display:flex; gap:11px; align-items:flex-start; }
.footer__contact svg{ width:16px; height:16px; color:var(--red); flex:none; margin-top:4px; }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-block:22px 30px;
  display:flex; justify-content:center; text-align:center; gap:14px; flex-wrap:wrap; font-size:.86rem; color:#7d85b5;
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .split,.contact-grid{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  :root{ --gutter:20px; }
  body{ font-size:16px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:32px; }
  .btn{ width:100%; }
  .hero__actions .btn{ width:auto; flex:1 1 auto; }
}


/* ---------- About Us banner ---------- */
.pagehero--about::before{
  background:linear-gradient(97deg,
      rgba(11,15,48,.93) 0%,
      rgba(11,15,48,.86) 32%,
      rgba(11,15,48,.66) 58%,
      rgba(11,15,48,.44) 100%),
    url("../img/about-us.jpg") center 42% / cover no-repeat,
    linear-gradient(140deg,#0d1136,#1c2368 70%,#121646);
}
.pagehero--about .pagehero__in{ padding-block:clamp(74px,8.5vw,118px) clamp(78px,9vw,124px); }

/* ---------- Commodities banner ---------- */
.pagehero--commodities::before{
  background:linear-gradient(97deg,
      rgba(11,15,48,.94) 0%,
      rgba(11,15,48,.87) 34%,
      rgba(11,15,48,.64) 60%,
      rgba(11,15,48,.40) 100%),
    url("../img/commodities.jpg") center 72% / cover no-repeat,
    linear-gradient(140deg,#0d1136,#1c2368 70%,#121646);
}
.pagehero--commodities .pagehero__in{ padding-block:clamp(74px,8.5vw,118px) clamp(78px,9vw,124px); }

/* ---------- steel banner ---------- */
.pagehero--steel::before{
  background:linear-gradient(97deg,
      rgba(11,15,48,.94) 0%,
      rgba(11,15,48,.87) 34%,
      rgba(11,15,48,.66) 60%,
      rgba(11,15,48,.44) 100%),
    url("../img/steel-banner.jpg") center 45% / cover no-repeat,
    linear-gradient(140deg,#0d1136,#1c2368 70%,#121646);
}
.pagehero--steel .pagehero__in{ padding-block:clamp(74px,8.5vw,118px) clamp(78px,9vw,124px); }

/* ---------- trade banner ---------- */
.pagehero--trade::before{
  background:linear-gradient(97deg,
      rgba(11,15,48,.94) 0%,
      rgba(11,15,48,.87) 34%,
      rgba(11,15,48,.66) 60%,
      rgba(11,15,48,.44) 100%),
    url("../img/trade-banner.jpg") center 34% / cover no-repeat,
    linear-gradient(140deg,#0d1136,#1c2368 70%,#121646);
}
.pagehero--trade .pagehero__in{ padding-block:clamp(74px,8.5vw,118px) clamp(78px,9vw,124px); }

/* ---------- contact banner ---------- */
.pagehero--contact::before{
  background:linear-gradient(97deg,
      rgba(11,15,48,.94) 0%,
      rgba(11,15,48,.87) 34%,
      rgba(11,15,48,.66) 60%,
      rgba(11,15,48,.44) 100%),
    url("../img/contact-banner.jpg") center 38% / cover no-repeat,
    linear-gradient(140deg,#0d1136,#1c2368 70%,#121646);
}
.pagehero--contact .pagehero__in{ padding-block:clamp(74px,8.5vw,118px) clamp(78px,9vw,124px); }

/* ---------- mobile refinements ---------- */
@media (max-width:640px){
  /* the top bar scrolls away; only the logo bar stays pinned */
  .site-header{ top:-42px; }
  .nav__in{ min-height:72px; }
  .brand img{ height:44px; }
  .contact-map .map iframe{ height:340px; }
}
@media (max-width:900px){
  /* text spans the full width here, so the left-weighted overlay isn't enough */
  .hero::after{
    background:rgba(11,15,48,.42); opacity:1;
    -webkit-mask-image:none; mask-image:none;
  }
  .pagehero::after{
    content:""; position:absolute; inset:0; z-index:-1; background:rgba(11,15,48,.34);
  }
  .hero::before{ background-position:center, 64% 40%, center; }
}