:root {
  --ink: #070d24;
  --ink-soft: #102b6b;
  --cream: #eef2f8;
  --paper: #fbfcff;
  --red: #e21b22;
  --red-dark: #b70e15;
  --blue: #0756d8;
  --blue-bright: #1e80ff;
  --gold: #e1a21b;
  --gold-soft: #f5c552;
  --line: rgba(7, 45, 125, 0.16);
  --muted: #5b6780;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  width: min(1240px, calc(100% - 48px));
  height: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font: 700 16px/1 "Manrope", sans-serif; letter-spacing: .08em; }
.brand > span:last-child { color:var(--red); }
.brand b { color: var(--blue-bright); }
.brand-logo { width:48px; height:48px; flex:none; display:block; object-fit:cover; border-radius:8px; background:white; box-shadow:0 7px 18px rgba(0,0,0,.22); }
.site-header nav { display: flex; gap: 36px; font-size: 14px; color: rgba(255,255,255,.74); }
.site-header nav a { transition: color .2s ease; }
.site-header nav a:hover { color: white; }
.header-cta { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.3); padding: 13px 16px 13px 20px; font-size: 13px; font-weight: 700; transition:border-color .2s ease, background .2s ease; }
.header-cta:hover { border-color:var(--gold); background:rgba(7,86,216,.16); }
.header-cta span { color: var(--gold); font-size: 18px; }

.hero {
  position: relative;
  min-height: 790px;
  padding: 180px max(24px, calc((100vw - 1240px) / 2)) 100px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(25deg, transparent 70%, rgba(226,27,34,.11)),
    var(--ink);
  color: white;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: 60px;
  align-items: center;
  overflow: hidden;
}
.hero::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:
    linear-gradient(90deg, rgba(5,12,36,.95) 0%, rgba(5,12,36,.8) 46%, rgba(5,12,36,.52) 100%),
    linear-gradient(180deg, rgba(5,12,36,.12), rgba(5,12,36,.6)),
    url("assets/container-ship-hero.webp") 62% center / cover no-repeat;
}
.hero::before { content:""; position:absolute; z-index:1; inset:auto 0 0; height:120px; background:linear-gradient(transparent, rgba(0,0,0,.3)); }
.hero-glow { position:absolute; z-index:1; width:440px; height:440px; right:8%; top:19%; border-radius:50%; background:rgba(7,86,216,.2); filter:blur(90px); }
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.eyebrow { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.62); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow span { width:26px; height:2px; background:var(--gold); }
.eyebrow.dark { color:#596783; }
.hero h1, .section-heading h2, .request-intro h2 {
  margin: 25px 0 25px;
  font: 800 clamp(48px, 5.3vw, 79px)/.98 "Manrope", sans-serif;
  letter-spacing: -.058em;
}
.hero h1 em { color: var(--red); font-style: normal; }
.hero-lead { max-width: 600px; margin:0; color:rgba(255,255,255,.66); font-size:18px; line-height:1.67; }
.hero-actions { display:flex; align-items:center; gap:31px; margin-top:39px; }
.button { min-height:54px; border:0; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:20px; cursor:pointer; font-weight:700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background:var(--red); color:white; box-shadow:0 11px 30px rgba(226,27,34,.24); }
.button-primary:hover { background:var(--red-dark); }
.text-link { font-size:14px; font-weight:600; color:rgba(255,255,255,.82); }
.text-link span { margin-left:9px; color:var(--red); }
.trust-row { margin-top:54px; display:flex; gap:24px; color:rgba(255,255,255,.53); font-size:12px; }
.trust-row i { color:var(--gold-soft); font-style:normal; margin-right:5px; }

.hero-visual { min-height: 520px; display:grid; place-items:center; }
.auction-carousel {
  position:relative;
  width:min(570px, 100%);
  aspect-ratio:16 / 10;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink-soft);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 38px 80px rgba(0,0,0,.42);
  outline:none;
}
.auction-carousel::before { content:""; position:absolute; z-index:8; inset:0; border:1px solid rgba(255,255,255,.05); pointer-events:none; }
.auction-carousel:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.auction-slides, .auction-slide { position:absolute; inset:0; }
.auction-slide {
  z-index:0;
  visibility:hidden;
  opacity:0;
  transform:scale(1.035);
  transition:opacity .7s ease, transform 1s ease, visibility .7s;
}
.auction-slide.active { z-index:1; visibility:visible; opacity:1; transform:scale(1); }
.auction-slide img { width:100%; height:100%; display:block; object-fit:cover; }
.slide-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,9,28,.08) 28%, rgba(3,9,28,.9) 100%), linear-gradient(90deg, rgba(3,9,28,.3), transparent 65%); }
.slide-content { position:absolute; z-index:2; left:34px; right:110px; bottom:60px; color:white; }
.slide-kicker { display:block; margin-bottom:9px; color:var(--gold-soft); font-size:10px; font-weight:800; letter-spacing:.14em; }
.slide-content h2 { margin:0; font:800 clamp(28px,3vw,38px)/1.04 "Manrope",sans-serif; letter-spacing:-.045em; }
.slide-content p { max-width:420px; margin:10px 0 15px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.55; }
.slide-content a { display:inline-flex; align-items:center; gap:10px; color:white; font-size:12px; font-weight:800; }
.slide-content a span { color:var(--red); font-size:17px; transition:transform .2s ease; }
.slide-content a:hover span { transform:translateX(3px); }
.carousel-topline { position:absolute; z-index:4; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:17px 19px; background:linear-gradient(rgba(3,9,28,.66), transparent); color:white; font-size:9px; font-weight:800; letter-spacing:.14em; }
.carousel-topline span:last-child { color:rgba(255,255,255,.58); letter-spacing:.04em; text-transform:none; }
.carousel-playback { position:absolute; z-index:6; top:37px; right:18px; padding:5px 7px; border:1px solid rgba(255,255,255,.24); background:rgba(7,22,61,.64); color:rgba(255,255,255,.78); font-size:8px; font-weight:800; letter-spacing:.1em; cursor:pointer; }
.carousel-playback:hover, .carousel-playback:focus-visible { border-color:var(--gold); color:var(--gold-soft); outline:0; }
.carousel-arrow { position:absolute; z-index:5; bottom:56px; width:39px; height:39px; padding:0; border:1px solid rgba(255,255,255,.28); background:rgba(7,22,61,.76); color:white; cursor:pointer; font-size:18px; transition:background .2s ease, border-color .2s ease; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background:var(--blue); border-color:var(--blue-bright); outline:0; }
.carousel-prev { right:58px; }
.carousel-next { right:18px; }
.carousel-dots { position:absolute; z-index:5; left:34px; bottom:25px; display:flex; gap:7px; }
.carousel-dots button { width:22px; height:3px; padding:0; border:0; background:rgba(255,255,255,.34); cursor:pointer; transition:width .25s ease, background .25s ease; }
.carousel-dots button[aria-current="true"] { width:38px; background:var(--red); }
.carousel-dots button:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.carousel-disclaimer { position:absolute; z-index:5; right:18px; bottom:21px; margin:0; color:rgba(255,255,255,.48); font-size:9px; }

.about {
  padding:115px max(24px, calc((100vw - 1240px) / 2));
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:105px;
  align-items:start;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.about-aside { position:sticky; top:45px; }
.about-statement { margin:34px 0 38px; font:800 clamp(42px,4.4vw,66px)/1.02 "Manrope",sans-serif; letter-spacing:-.055em; color:var(--ink); }
.about-statement strong { color:var(--blue); }
.about-categories { display:flex; flex-wrap:wrap; gap:9px; }
.about-categories span { padding:9px 12px; border:1px solid var(--line); color:#55637d; background:var(--cream); font-size:12px; font-weight:700; }
.about-copy { padding:4px 0 0 52px; border-left:3px solid var(--gold); }
.about-kicker { margin:0 0 17px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:.16em; }
.about-copy h2 { margin:0 0 28px; font:800 clamp(40px,4vw,61px)/1.02 "Manrope",sans-serif; letter-spacing:-.052em; }
.about-copy p { max-width:680px; margin:0 0 20px; color:var(--muted); font-size:16px; line-height:1.78; }
.about-copy .about-lead { color:var(--ink-soft); font-size:20px; font-weight:600; line-height:1.55; }
.about-copy .button { margin-top:18px; }

.services { padding:130px max(24px, calc((100vw - 1240px) / 2)); background:var(--cream); }
.section-heading { display:grid; grid-template-columns: 1fr 1fr; column-gap:80px; align-items:end; }
.section-heading .eyebrow { grid-column:1/-1; }
.section-heading h2 { font-size:clamp(43px,4vw,64px); margin-bottom:0; }
.section-heading > p { max-width:500px; margin:0 0 4px; color:var(--muted); font-size:17px; line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:67px; }
.service-card { position:relative; min-height:340px; padding:35px 31px; border:1px solid var(--line); background:rgba(255,255,255,.34); overflow:hidden; transition:transform .25s ease, background .25s ease; }
.service-card:hover { transform:translateY(-5px); background:white; }
.service-card.featured { background:linear-gradient(145deg, var(--ink), var(--ink-soft)); color:white; box-shadow:inset 0 3px 0 var(--gold); }
.service-number { position:absolute; right:24px; top:21px; font:800 42px/1 "Manrope",sans-serif; color:rgba(7,13,36,.09); }
.featured .service-number { color:rgba(255,255,255,.08); }
.service-icon { width:59px; height:59px; display:grid; place-items:center; border:1px solid var(--line); background:var(--paper); }
.featured .service-icon { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.service-icon svg { width:31px; fill:none; stroke:var(--blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.service-card h3 { margin:51px 0 15px; font:700 24px/1.15 "Manrope",sans-serif; letter-spacing:-.03em; }
.service-card p { max-width:320px; margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.featured p { color:rgba(255,255,255,.55); }
.process-strip { margin-top:40px; padding:28px 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.process-strip div { display:flex; align-items:center; gap:13px; font-size:13px; font-weight:600; }
.process-strip b { color:var(--red); }
.process-strip i { flex:0 1 130px; height:1px; background:var(--line); position:relative; }
.process-strip i::after { content:""; position:absolute; right:0; top:-2px; width:5px; height:5px; border-top:1px solid #687899; border-right:1px solid #687899; transform:rotate(45deg); }

.request-section { position:relative; padding:130px max(24px, calc((100vw - 1240px) / 2)) 0; background:linear-gradient(145deg, var(--ink) 0%, #0a1b48 100%); color:white; display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; overflow:hidden; }
.request-section::before { content:""; position:absolute; width:600px; height:600px; left:-300px; top:-50px; border-radius:50%; border:1px solid rgba(255,255,255,.06); box-shadow:0 0 0 100px rgba(255,255,255,.018), 0 0 0 200px rgba(255,255,255,.012); }
.request-intro, .request-form { position:relative; z-index:2; }
.request-intro h2 { font-size:clamp(47px,4.5vw,70px); }
.request-intro > p { max-width:410px; color:rgba(255,255,255,.58); line-height:1.7; }
.request-note { max-width:390px; margin-top:45px; padding:18px 18px 18px 0; border-top:1px solid rgba(255,255,255,.12); display:flex; gap:15px; }
.request-note span { align-self:flex-start; padding:5px 8px; background:var(--gold); color:var(--ink); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.request-note p { margin:0; color:rgba(255,255,255,.67); font-size:13px; line-height:1.55; }
.direct-contact { max-width:410px; margin-top:31px; border-top:1px solid rgba(255,255,255,.12); }
.direct-contact > p { margin:18px 0 10px; color:rgba(255,255,255,.47); font-size:13px; }
.direct-contact a { min-height:54px; padding:11px 0; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid rgba(255,255,255,.1); transition:border-color .2s ease, color .2s ease; }
.direct-contact a:hover { color:var(--gold-soft); border-bottom-color:rgba(225,162,27,.48); }
.direct-contact a span { color:var(--blue-bright); font-size:12px; font-weight:800; letter-spacing:.1em; }
.direct-contact a strong { font-size:15px; letter-spacing:.02em; }
.request-form { padding:42px; background:var(--paper); color:var(--ink); box-shadow:0 30px 70px rgba(0,0,0,.2); }
.request-switch { display:grid; grid-template-columns:1fr 1fr; margin:-42px -42px 35px; background:#e1e6f0; }
.request-tab { position:relative; min-height:68px; padding:0 22px; border:0; border-bottom:3px solid transparent; background:transparent; color:#67738a; text-align:left; font-size:14px; font-weight:800; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease; }
.request-tab span { margin-right:9px; color:#8e99ae; font-size:12px; }
.request-tab:hover { color:var(--ink); background:rgba(255,255,255,.45); }
.request-tab.active { background:var(--paper); border-bottom-color:var(--red); color:var(--ink); }
.request-tab.active span { color:var(--red); }
.form-type-heading { margin-bottom:27px; padding-bottom:18px; border-bottom:1px solid #d7ddea; }
.form-type-heading strong { display:block; font:700 22px/1.2 "Manrope",sans-serif; letter-spacing:-.025em; }
.form-type-heading span { display:block; margin-top:7px; color:#667189; font-size:14px; }
.request-panel { margin:0; padding:0; border:0; min-width:0; }
.request-panel[hidden] { display:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.request-form label { display:block; margin-bottom:21px; color:#56627a; font-size:12px; font-weight:800; letter-spacing:.08em; }
.request-form label > span { font-weight:500; color:#8e99ae; }
.request-form input, .request-form textarea, .request-form select { width:100%; margin-top:8px; padding:14px 0; border:0; border-bottom:1px solid #c8d0e0; border-radius:0; outline:0; background:transparent; color:var(--ink); font-size:16px; font-weight:500; letter-spacing:0; resize:vertical; transition:border-color .2s ease; }
.request-form select { padding-right:28px; cursor:pointer; }
.request-form input:focus, .request-form textarea:focus, .request-form select:focus { border-color:var(--red); }
.request-form input::placeholder, .request-form textarea::placeholder { color:#97a2b6; }
.submit-button { width:100%; margin-top:6px; }
.form-disclaimer { margin:13px 0 0; color:#7c879b; font-size:11px; text-align:center; }
footer { position:relative; z-index:2; grid-column:1/-1; margin-top:74px; padding:32px 0 38px; border-top:1px solid rgba(255,255,255,.12); display:grid; grid-template-columns:.75fr 1.25fr; gap:54px; color:rgba(255,255,255,.43); font-size:12px; }
.footer-summary { display:flex; align-items:flex-start; flex-direction:column; gap:14px; }
.footer-summary p { margin:0; }
.footer-contact-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.footer-contact-links a { min-width:0; padding:13px 15px; border:1px solid rgba(255,255,255,.12); transition:border-color .2s ease, background .2s ease; }
.footer-contact-links a:hover { border-color:rgba(225,162,27,.58); background:rgba(7,86,216,.1); }
.footer-contact-links span { display:block; margin-bottom:7px; color:var(--blue-bright); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.footer-contact-links strong { display:block; color:rgba(255,255,255,.82); font-size:13px; white-space:nowrap; }
.footer-brand { color:white; }

dialog { width:min(620px,calc(100% - 32px)); border:0; padding:40px; background:var(--paper); color:var(--ink); box-shadow:0 40px 100px rgba(0,0,0,.5); }
dialog::backdrop { background:rgba(3,8,24,.78); backdrop-filter:blur(7px); }
.dialog-close { position:absolute; right:18px; top:15px; border:0; background:transparent; font-size:28px; cursor:pointer; color:#647087; }
.dialog-kicker { color:var(--red); font-size:10px; font-weight:800; letter-spacing:.14em; }
dialog h2 { margin:12px 0 8px; font:800 32px/1.1 "Manrope",sans-serif; letter-spacing:-.04em; }
dialog > p { margin:0 0 20px; color:var(--muted); }
dialog pre { max-height:330px; overflow:auto; padding:20px; background:#eef1f7; border-left:3px solid var(--red); white-space:pre-wrap; font:500 13px/1.65 "DM Sans",sans-serif; }
.dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
.dialog-actions > :first-child { grid-column:1/-1; }
.button-whatsapp { background:#23c763; color:white; }
.button-whatsapp.secondary { background:#169b4d; }
.button-email { background:var(--blue); color:white; }
.button-email.secondary { background:var(--ink-soft); }
dialog small { display:block; margin-top:12px; color:#6f7b91; }
.toast { position:fixed; z-index:50; left:50%; bottom:30px; transform:translate(-50%,25px); padding:12px 18px; background:var(--gold); color:var(--ink); font-size:12px; font-weight:800; opacity:0; pointer-events:none; transition:.25s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .site-header { width:calc(100% - 36px); height:78px; }
  .site-header nav { display:none; }
  .header-cta { padding:11px 13px; }
  .hero { min-height:auto; padding-top:145px; grid-template-columns:1fr; gap:35px; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(5,12,36,.92) 0%, rgba(5,12,36,.72) 45%, rgba(5,12,36,.8) 100%),
      linear-gradient(90deg, rgba(5,12,36,.74), rgba(5,12,36,.36)),
      url("assets/container-ship-hero.webp") 72% center / cover no-repeat;
  }
  .hero-copy { max-width:680px; }
  .hero-visual { min-height:440px; }
  .trust-row { flex-wrap:wrap; }
  .about { grid-template-columns:1fr; gap:55px; }
  .about-aside { position:static; }
  .about-copy { padding-left:34px; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading > p { margin-top:25px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:280px; }
  .request-section { grid-template-columns:1fr; gap:45px; }
  footer { margin-top:20px; }
  .footer-contact-links { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .site-header { width:calc(100% - 28px); }
  .brand { gap:8px; font-size:14px; }
  .brand-logo { width:40px; height:40px; border-radius:7px; }
  .header-cta { font-size:0; width:43px; height:43px; padding:0; justify-content:center; }
  .header-cta span { font-size:18px; }
  .hero { padding:130px 20px 80px; }
  .hero h1 { font-size:44px; }
  .hero-lead { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .trust-row { gap:13px 18px; margin-top:42px; }
  .hero-visual { min-height:0; margin-top:14px; }
  .auction-carousel { aspect-ratio:4 / 4.55; }
  .slide-content { left:22px; right:22px; bottom:80px; }
  .slide-content h2 { font-size:30px; }
  .slide-content p { font-size:12px; }
  .carousel-topline { padding:15px; }
  .carousel-arrow { bottom:22px; }
  .carousel-prev { right:62px; }
  .carousel-next { right:22px; }
  .carousel-dots { left:22px; bottom:39px; }
  .carousel-disclaimer { right:auto; left:22px; bottom:17px; }
  .about, .services, .request-section { padding-left:20px; padding-right:20px; }
  .about { padding-top:82px; padding-bottom:82px; gap:44px; }
  .about-statement { font-size:43px; }
  .about-copy { padding-left:22px; }
  .about-copy h2 { font-size:40px; }
  .about-copy .about-lead { font-size:18px; }
  .services { padding-top:90px; padding-bottom:90px; }
  .section-heading h2, .request-intro h2 { font-size:43px; }
  .process-strip { padding:20px 0; align-items:flex-start; gap:12px; }
  .process-strip div { flex-direction:column; align-items:flex-start; gap:5px; }
  .process-strip i { margin-top:8px; }
  .request-section { padding-top:90px; }
  .request-form { padding:28px 20px; }
  .request-switch { margin:-28px -20px 28px; }
  .request-tab { min-height:62px; padding:0 12px; font-size:12px; }
  .request-tab span { display:none; }
  .form-row { grid-template-columns:1fr; gap:0; }
  footer { grid-template-columns:1fr; gap:28px; }
  footer p { margin:0; }
  dialog { padding:31px 20px 24px; }
  .dialog-actions { grid-template-columns:1fr; }
  .dialog-actions > :first-child { grid-column:auto; }
}

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