:root {
  --navy-950: #061725;
  --navy-900: #0A2238;
  --navy-800: #0E2A47;
  --navy-700: #123A5B;
  --teal: #2E8B8B;
  --teal-light: #59A9A6;
  --wood: #C49A6C;
  --white: #FFFFFF;
  --mist: #D9E1E8;
  --muted: #9FB0BE;
  --line: rgba(255,255,255,.12);
  --shadow: 0 28px 70px rgba(0,0,0,.24);
  --shell: min(1180px, calc(100% - 44px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--navy-950);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto 0;
  background: linear-gradient(to bottom, rgba(5,18,30,.82), rgba(5,18,30,.24), transparent);
  transition: background .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: rgba(6,23,37,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-shell {
  width: var(--shell);
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .06em; }
.brand-mark {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 11px; color: var(--teal-light);
}
.brand-name { font-size: 13px; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 650; }
.site-nav a { color: rgba(255,255,255,.82); transition: color .2s ease; }
.site-nav a:hover { color: var(--white); }
.nav-cta { border: 1px solid rgba(255,255,255,.3); padding: 9px 16px; border-radius: 999px; }
.menu-button { display: none; background: none; border: 0; padding: 8px; }
.menu-button span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; }

.hero {
  min-height: 780px;
  height: 92vh;
  max-height: 920px;
  position: relative;
  display: flex;
  align-items: center;
  background: url("assets/hero-port.jpg") center center / cover no-repeat;
  overflow: hidden;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,22,36,.9) 0%, rgba(9,38,61,.76) 40%, rgba(9,38,61,.28) 74%, rgba(9,38,61,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(6,23,37,.08) 60%, rgba(6,23,37,.62));
}
.hero-fade { position:absolute; inset:auto 0 0 0; height:160px; background:linear-gradient(to bottom,transparent,var(--navy-950)); }
.hero-content { position: relative; z-index: 2; padding-top: 80px; }
.eyebrow {
  margin: 0 0 20px;
  color: var(--teal-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 920px;
  margin-bottom: 28px;
  font-size: clamp(54px, 7.4vw, 112px);
  line-height: .92;
  letter-spacing: -.055em;
  text-transform: uppercase;
  font-weight: 850;
}
h1 span { color: var(--white); }
.hero-copy { max-width: 650px; color: rgba(255,255,255,.88); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top: 38px; }
.button {
  display: inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height: 52px; padding: 0 24px; border-radius: 7px;
  border: 1px solid transparent; font-weight: 800; font-size: 13px; letter-spacing: .05em;
  text-transform: uppercase; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--teal); color: #fff; box-shadow: 0 16px 34px rgba(46,139,139,.18); }
.button-primary:hover { background: #277d7d; }
.button-ghost { border-color: rgba(255,255,255,.28); background: rgba(4,20,33,.18); }
.button-ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(4,20,33,.36); }

.section { padding: 120px 0; }
.products-section { background: var(--navy-950); }
.section-intro { max-width: 830px; margin-bottom: 54px; }
.section-intro.compact { margin-bottom: 38px; }
h2 { font-size: clamp(38px, 4.5vw, 66px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 24px; }
.section-intro > p:last-child, .about-section p, .value-copy > p, .markets-section .section-intro p, .contact-section > .shell > div > p {
  color: var(--mist); font-size: 18px; max-width: 760px;
}

.product-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.product-card {
  position: relative;
  padding: 38px;
  background: linear-gradient(145deg, rgba(18,58,91,.72), rgba(10,34,56,.82));
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 440px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.product-card::after {
  content:""; position:absolute; width:160px; height:160px; border-radius:50%;
  right:-60px; top:-70px; background:rgba(46,139,139,.07); border:1px solid rgba(89,169,166,.12);
}
.feature-card { background: linear-gradient(145deg, rgba(46,139,139,.22), rgba(10,34,56,.92)); }
.card-number { color: var(--wood); font-size: 12px; font-weight: 800; letter-spacing: .16em; margin-bottom: 22px; }
.product-card h3 { font-size: 34px; letter-spacing: -.025em; margin-bottom: 14px; }
.product-card > p { color: var(--mist); max-width: 540px; }
.product-card ul { list-style: none; padding: 0; margin: 26px 0 28px; display:grid; gap: 8px; }
.product-card li { color: rgba(255,255,255,.86); padding-left: 18px; position:relative; }
.product-card li::before { content:""; width:5px; height:5px; background:var(--teal-light); border-radius:50%; position:absolute; left:0; top:.72em; }
.text-link { background:none; border:0; padding:0; color:var(--teal-light); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.text-link span { display:inline-block; margin-left:7px; font-size:18px; vertical-align:-1px; transition:transform .2s ease; }
.text-link[aria-expanded="true"] span { transform:rotate(45deg); }
.product-details { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); color:var(--mist); font-size:14px; }
.product-details p:last-child { margin-bottom:0; }

.value-section { background: var(--navy-900); border-block:1px solid var(--line); }
.value-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items:start; }
.value-points { margin-top:42px; display:grid; gap:30px; }
.value-points > div { display:grid; grid-template-columns: 42px 1fr; column-gap:18px; }
.value-points span { color:var(--wood); font-weight:800; }
.value-points strong { font-size:18px; }
.value-points p { grid-column:2; color:var(--muted); margin:4px 0 0; }

.about-section { background: linear-gradient(120deg,var(--navy-950),var(--navy-800)); }
.about-grid { display:grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items:start; }
.about-kicker { color:rgba(255,255,255,.16); font-size:clamp(34px,5.4vw,82px); font-weight:850; line-height:.95; letter-spacing:-.055em; }

.markets-section { background: var(--navy-950); }
.market-list { display:flex; flex-wrap:wrap; gap:12px; }
.market-list span { padding:10px 15px; border:1px solid var(--line); border-radius:999px; color:var(--mist); background:rgba(255,255,255,.025); font-size:14px; }

.contact-section { background: linear-gradient(145deg,#0A2238,#103B5C); border-top:1px solid var(--line); }
.contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items:start; }
.contact-direct { display:grid; gap:16px; margin-top:38px; }
.contact-direct a, .contact-direct > div { display:flex; flex-direction:column; gap:3px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.contact-direct span { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; }
.contact-direct strong { font-size:16px; }
.contact-form { background:rgba(5,23,37,.55); border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:grid; gap:7px; margin-bottom:14px; color:var(--mist); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; }
input, textarea { width:100%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); color:#fff; border-radius:8px; padding:13px 14px; outline:none; text-transform:none; letter-spacing:normal; font-weight:500; }
input:focus, textarea:focus { border-color:var(--teal-light); box-shadow:0 0 0 3px rgba(46,139,139,.13); }
textarea { resize:vertical; min-height:130px; }
.contact-form .button { width:100%; margin-top:4px; }
.form-note { margin:12px 0 0; color:var(--muted); font-size:11px; }

.site-footer { background:#04131f; border-top:1px solid var(--line); padding:42px 0; }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; }
.footer-brand { margin-bottom:14px; }
.site-footer p { color:var(--muted); margin:0; font-size:13px; }
.footer-links { display:flex; gap:20px; font-size:13px; color:var(--mist); }
.copyright { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:22px; margin-top:4px !important; }

@media (max-width: 900px) {
  :root { --shell: min(100% - 34px, 720px); }
  .menu-button { display:block; }
  .site-nav {
    display:none; position:absolute; top:72px; left:17px; right:17px; padding:18px;
    flex-direction:column; align-items:stretch; gap:5px;
    background:rgba(6,23,37,.98); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  }
  .site-nav.open { display:flex; }
  .site-nav a { padding:11px 12px; }
  .nav-cta { border:0; padding:11px 12px; }
  .hero { min-height:700px; height:auto; padding:120px 0 95px; background-position:62% center; }
  .hero-overlay { background:linear-gradient(90deg,rgba(5,22,36,.92),rgba(9,38,61,.68) 70%,rgba(9,38,61,.45)); }
  h1 { font-size:clamp(48px,11vw,78px); max-width:690px; }
  .product-grid, .value-grid, .about-grid, .contact-grid { grid-template-columns:1fr; }
  .value-grid, .about-grid, .contact-grid { gap:44px; }
  .section { padding:90px 0; }
  .about-kicker { max-width:520px; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); }
  .nav-shell { min-height:68px; }
  .brand-name { font-size:12px; }
  .hero { min-height:660px; padding-top:110px; background-position:67% center; }
  .hero-content { padding-top:20px; }
  .eyebrow { font-size:10px; letter-spacing:.14em; }
  h1 { font-size:48px; line-height:.95; }
  .hero-copy { font-size:16px; }
  .hero-actions { display:grid; width:100%; }
  .button { width:100%; }
  h2 { font-size:38px; }
  .product-card { padding:26px; min-height:auto; }
  .product-card h3 { font-size:29px; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .contact-form { padding:22px; }
  .footer-grid { grid-template-columns:1fr; align-items:start; }
  .footer-links { flex-wrap:wrap; }
}

/* ===== Austral Comex brand refinements ===== */
.brand {
  line-height: 0;
}
.brand-logo {
  display: block;
  width: 190px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  object-position: left center;
}
.footer-logo {
  width: 220px;
  max-height: 58px;
}

/* Keep the two key hero statements on two intentional lines on desktop. */
#hero-title {
  max-width: none;
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: .98;
}
.hero-title-line {
  display: block;
  white-space: nowrap;
}

/* Keep the Products statement to two intentional lines on desktop. */
.products-section .section-intro {
  max-width: 1040px;
}
.products-heading {
  font-size: clamp(36px, 3.6vw, 52px);
}
.heading-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .brand-logo { width: 168px; max-height: 43px; }
  #hero-title { font-size: clamp(45px, 8.8vw, 70px); }
  .hero-title-line,
  .heading-line { white-space: normal; }
}

@media (max-width: 560px) {
  .brand-logo { width: 150px; max-height: 38px; }
  #hero-title { font-size: 45px; }
  .footer-logo { width: 190px; }
}


/* ===== Product category photography ===== */
.product-image-wrap {
  position: relative;
  height: 220px;
  margin: -38px -38px 30px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--navy-900);
}
.product-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,23,37,.04), rgba(6,23,37,.24));
  pointer-events: none;
}
.product-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(.88) contrast(1.02);
}
.product-card:hover .product-image {
  transform: scale(1.025);
  filter: saturate(.96) contrast(1.04);
}
.product-card {
  min-height: 650px;
}
@media (max-width: 560px) {
  .product-image-wrap {
    height: 190px;
    margin: -26px -26px 24px;
  }
  .product-card { min-height: auto; }
}