:root{--navy:#061f4b;--navy2:#0a356a;--orange:#f56600;--text:#132543;--muted:#68768a;--line:#dfe5ec}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1440px,calc(100% - 52px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e7ebef}.nav{min-height:88px;display:grid;grid-template-columns:330px 1fr auto;align-items:center;gap:24px}.brand img{width:310px;height:72px;object-fit:contain;object-position:left center}.main-nav{display:flex;justify-content:center;gap:27px;font-size:12px;font-weight:800;text-transform:uppercase}.main-nav a{padding:36px 0}.main-nav a:hover{color:var(--orange)}.menu-btn{display:none;border:0;background:none;font-size:26px;color:var(--navy)}
.btn{min-height:48px;padding:0 22px;border-radius:4px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;text-transform:uppercase;cursor:pointer}.orange{background:linear-gradient(135deg,var(--orange),#ff8d00);color:#fff}.navy{background:var(--navy);color:#fff}.outline{background:#fff;border-color:#15345f;color:var(--navy)}.outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.hero{position:relative;min-height:370px;overflow:hidden;background:linear-gradient(90deg,#fff 0 43%,rgba(255,255,255,.86) 54%,transparent 72%),#dceaf4}.hero-image{position:absolute;inset:0 0 0 43%;background:url('assets/alpine-one-hero-v3.jpg') center right/cover no-repeat}.hero-inner{min-height:370px;display:flex;align-items:center;position:relative}.hero-copy{width:625px;padding:30px 0 18px}.hero h1{font-size:clamp(44px,4.5vw,70px);line-height:.98;letter-spacing:-.045em;text-transform:uppercase;margin:0 0 14px;color:var(--navy)}.hero h1 span{display:block;color:var(--orange)}.hero-copy>p{font-size:17px;line-height:1.5;margin:0}.actions{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.benefits div{display:flex;gap:9px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}.benefits b{font-size:27px}.benefits strong,.benefits small{display:block}.benefits small{font-size:11px;margin-top:3px}
.services{padding:22px 0 18px}.services-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:18px;align-items:center}.services-title{border-right:1px solid var(--line);padding-right:24px}em{font-style:normal;text-transform:uppercase;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.08em}h2{font-size:clamp(28px,3vw,42px);line-height:1.08;letter-spacing:-.03em;color:var(--navy);margin:7px 0 10px}.services article{text-align:center}.services i{font-style:normal;font-size:33px;color:var(--navy)}.services h3{font-size:13px;margin:6px 0}.services p{font-size:11px;color:var(--muted);line-height:1.4;margin:0}
.schedule{padding-bottom:20px}.schedule-card{background:linear-gradient(135deg,#06285b,#031a3d);color:#fff;border-radius:10px;padding:20px 24px;display:grid;grid-template-columns:260px 1fr;gap:26px}.schedule h2{color:#fff;text-transform:uppercase;font-size:27px;margin:0}.schedule h3{color:var(--orange);font-size:21px;margin:5px 0 12px}.schedule-title p{font-size:12px;color:#d5dfec;line-height:1.5}.fields{display:grid;grid-template-columns:1fr 1fr .9fr auto;gap:13px;align-items:end}.fields label{font-size:10px;text-transform:uppercase;font-weight:800}.fields select,.fields input{width:100%;height:42px;margin-top:6px;border:0;border-radius:4px;padding:0 12px;background:#fff;color:#263b5b}.route-box{margin-top:10px;border:1px solid rgba(255,255,255,.25);border-radius:6px;display:grid;grid-template-columns:1fr 1.2fr .8fr;overflow:hidden}.route-box>div{padding:13px 17px}.route-box>div:not(:last-child){border-right:1px solid rgba(255,255,255,.2)}.route-box small{text-transform:uppercase;font-size:9px;font-weight:800;color:#cbd6e7}.route-box p{font-size:11px;margin:5px 0}.next div{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:14px}.next strong{font-size:36px}.next span{font-size:24px}.route-box h4{margin:8px 0 2px;font-size:14px}
.equipment{padding:4px 0 22px}.equipment-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:16px}.equipment-title{border-right:1px solid var(--line);padding-right:18px}.equipment-title h2{font-size:29px}.equipment article{padding:0 11px;border-right:1px solid var(--line)}.equipment h3{font-size:14px;color:var(--navy);margin:7px 0}.equipment p{font-size:10px;line-height:1.5;margin:4px 0}.box{height:92px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 2px,transparent 2px 14px),#0e4279;border-radius:3px;box-shadow:0 8px 14px rgba(0,0,0,.15);transform:perspective(400px) rotateY(-7deg)}.b20{width:78%}.b40{width:100%}.reefer{width:82%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 14px),#eef0ee}
.trust{background:linear-gradient(135deg,#06285a,#031a3c);color:#fff;padding:22px 0}.trust-grid{display:grid;grid-template-columns:1.2fr 3fr;gap:32px;align-items:center}.trust h2{color:#fff;text-transform:uppercase;font-size:30px}.trust p{font-size:12px;color:#d4deec;line-height:1.5}.metrics{display:grid;grid-template-columns:repeat(4,1fr)}.metrics div{text-align:center;padding:10px 16px;border-left:1px solid rgba(255,255,255,.25)}.metrics strong{display:block;font-size:33px;color:var(--orange)}.metrics span{font-size:11px}
.offices{padding:54px 0}.offices-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}.map{height:260px;background:linear-gradient(135deg,#eaf0f6,#f8fafc);border-radius:14px;position:relative}.map b{position:absolute;bottom:18px;left:22px}.dot{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(245,102,0,.14)}.d1{left:35%;top:58%}.d2{left:48%;top:48%}.d3{left:64%;top:56%}.d4{left:78%;top:46%}
.contact{padding:0 0 60px}.contact-card{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:14px;padding:40px 44px;display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}.contact h2{color:#fff}.contact p{color:#d3deec;line-height:1.5}#quoteForm{display:grid;grid-template-columns:1fr 1fr;gap:11px}#quoteForm input{height:47px;border:0;border-radius:4px;padding:0 12px}.wide,#quoteMsg{grid-column:1/3}#quoteMsg{margin:0;font-size:11px}
footer{background:#041632;color:#bdc7d7;padding:23px 0}.footer{display:flex;justify-content:space-between;font-size:12px}
@media(max-width:1050px){.nav{grid-template-columns:260px 1fr auto}.brand img{width:250px}.main-nav{gap:16px;font-size:10px}.services-grid{grid-template-columns:1.5fr repeat(3,1fr)}.services article:nth-last-child(-n+2){display:none}.equipment-grid{grid-template-columns:1fr 1fr 1fr}.equipment article:nth-last-child(-n+2){display:none}}
@media(max-width:780px){.container{width:min(100% - 28px,720px)}.nav{min-height:74px;display:flex;justify-content:space-between}.brand img{width:210px}.menu-btn{display:block}.main-nav,.top-quote{display:none}.main-nav.open{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 22px}.main-nav.open a{padding:10px 0}.hero{min-height:690px;background:#fff}.hero-inner{min-height:690px;align-items:flex-start}.hero-copy{width:100%;padding-top:38px}.hero-image{inset:340px 0 0 0;background-position:center}.benefits{margin-top:320px}.benefits div{color:var(--navy);text-shadow:none}.services-grid,.equipment-grid,.trust-grid,.offices-grid,.contact-card{grid-template-columns:1fr}.services-title,.equipment-title{border-right:0;border-bottom:1px solid var(--line);padding-bottom:14px}.services article:nth-last-child(-n+2),.equipment article:nth-last-child(-n+2){display:block}.schedule-card{grid-template-columns:1fr}.fields{grid-template-columns:1fr 1fr}.route-box{grid-template-columns:1fr}.route-box>div:not(:last-child){border-right:0;border-bottom:1px solid rgba(255,255,255,.2)}.metrics{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hero h1{font-size:43px}.fields{grid-template-columns:1fr}.actions{flex-direction:column}.actions .btn{width:100%}.benefits{grid-template-columns:1fr 1fr}.metrics{grid-template-columns:1fr}#quoteForm{grid-template-columns:1fr}.wide,#quoteMsg{grid-column:auto}.footer{flex-direction:column;gap:8px}}

/* ---------- multi-page additions ---------- */
.main-nav a.active{color:#f97316}
.page-head{background:#0b2545;color:#fff;padding:56px 0 44px}
.page-head em{color:#f97316;font-style:normal;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}
.page-head h1{margin:.35em 0 .25em;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15}
.page-head p{margin:0;opacity:.85;max-width:62ch}
.prose{padding:56px 0}
.prose-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.prose h2{font-size:1.15rem;margin:0 0 .5em;color:#0b2545}
.prose p{margin:0;line-height:1.7;color:#334155}
.why{background:#f8fafc;padding:48px 0}
.why h2{margin:0 0 20px;color:#0b2545}
.why-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.why-grid div{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px}
.why-grid b{color:#f97316}
.why-grid p{margin:0;color:#334155}
.milestones{padding:56px 0}
.milestones h2{margin:0 0 16px;color:#0b2545}
.timeline{list-style:none;padding:0;margin:0;max-width:820px}
.timeline li{padding:10px 0 10px 14px;border-left:3px solid #e5e7eb;margin-left:8px;color:#334155;line-height:1.6}
.timeline .tl-year{font-weight:700;color:#0ea5e9;margin-right:8px}
.card-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding:48px 0}
.card-grid article{border:1px solid #e5e7eb;border-radius:14px;padding:18px;background:#fff}
.card-grid article i{font-style:normal;font-size:1.5rem;color:#f97316;display:block;margin-bottom:8px}
.card-grid h3{margin:0 0 .4em;font-size:1.02rem;color:#0b2545}
.card-grid p{margin:0;color:#475569;line-height:1.6;font-size:.94rem}
.equip-card img{width:100%;height:130px;object-fit:contain;background:#f8fafc;border-radius:10px;margin-bottom:10px}
.equip-card .badge{display:inline-block;background:#0b2545;color:#fff;border-radius:999px;padding:2px 10px;font-size:.72rem;margin-bottom:6px}
.equip-card .specs{margin-top:8px;font-size:.86rem;color:#475569}
.office-card h3{color:#0b2545;margin:0 0 .4em}
.office-card p{margin:0 0 8px;line-height:1.65;color:#475569;font-size:.94rem}
.office-meta{font-size:.88rem}
.footer-link{color:#2563eb;text-decoration:none;font-weight:600}
.footer-link:hover{text-decoration:underline}
.schedule-main.full{width:100%}
.fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:#0b2545}
.fields select,.fields input{padding:10px;border:1px solid #cbd5e1;border-radius:9px;font:inherit;background:#fff}
.msg{margin:14px 0 0;font-size:.92rem;color:#475569;min-height:1.2em}
.msg.err{color:#b91c1c}.msg.ok{color:#047857}
.sched-block{margin:26px 0}
.sched-block h3{margin:0 0 .2em;color:#0b2545;font-size:1.05rem}
.sched-block .lane{margin:0 0 10px;color:#64748b;font-size:.88rem}
.table-wrap{overflow-x:auto;border:1px solid #e5e7eb;border-radius:12px}
table.sched{border-collapse:collapse;width:100%;min-width:760px;font-size:.9rem;background:#fff}
table.sched th{background:#0b2545;color:#fff;text-align:left;padding:10px;font-weight:600;white-space:nowrap}
table.sched td{padding:10px;border-top:1px solid #e5e7eb;color:#334155}
table.sched tr:nth-child(even) td{background:#f8fafc}
.contact-page{padding:48px 0}
.contact-cols{display:grid;gap:26px;grid-template-columns:1.3fr 1fr;align-items:start}
@media(max-width:840px){.contact-cols{grid-template-columns:1fr}}
.form-card{border:1px solid #e5e7eb;border-radius:16px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:12px}
.form-card h2{margin:0;color:#0b2545;font-size:1.1rem}
.form-card label{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:600;color:#0b2545}
.form-card input,.form-card select,.form-card textarea{padding:10px;border:1px solid #cbd5e1;border-radius:9px;font:inherit;background:#fff}
.form-card textarea{resize:vertical}
.form-card .req{color:#dc2626}
.two-col{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.office-side{display:grid;gap:14px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- schedule search bar: one full-width row ---------- */
.schedule .schedule-card{grid-template-columns:1fr}
.schedule .fields{grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end}
.schedule .fields label{color:#fff}
.schedule .fields .btn{height:44px;white-space:nowrap;padding-inline:22px}
.schedule-card .msg{color:#cbd5e1}
.schedule-card .msg.ok{color:#4ade80}
.schedule-card .msg.err{color:#fca5a5}
@media(max-width:980px){.schedule .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schedule .fields .btn{grid-column:1/-1}}
@media(max-width:560px){.schedule .fields{grid-template-columns:1fr}}

/* lift the search bar off the page head so white shows around it */
.schedule{padding-top:38px;padding-bottom:34px}
.schedule .schedule-card{box-shadow:0 12px 30px rgba(2,17,43,.20);border-radius:14px}

/* ---------- equipment spec cards ---------- */
.equip-grid article{display:flex;flex-direction:column}
.equip-card .img-ph{height:130px;display:grid;place-items:center;background:#f1f5f9;border:1px dashed #cbd5e1;border-radius:10px;margin-bottom:10px;color:#94a3b8;font-size:2rem}
.spec-list{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;padding-top:12px;border-top:1px solid #e5e7eb;font-size:.84rem}
.spec-list dt{color:#64748b;white-space:nowrap}
.spec-list dd{margin:0;color:#0b2545;font-weight:600;text-align:right}


/* ---------- brand lockup: emblem + wordmark ---------- */
.nav{grid-template-columns:auto 1fr auto;min-height:92px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{width:auto;height:54px;display:block;border-radius:3px}
.brand-text strong{display:block;color:#0b2545;font-weight:800;font-size:1.04rem;
  letter-spacing:.01em;line-height:1.12;white-space:nowrap}
.brand-text small{display:block;color:#b8860b;font-size:.8rem;letter-spacing:.14em;
  margin-top:3px;white-space:nowrap}
@media(max-width:980px){
  .nav{min-height:78px}
  .brand img{height:44px}
  .brand-text strong{font-size:.88rem}
  .brand-text small{font-size:.68rem;letter-spacing:.1em}
}
@media(max-width:560px){.brand-text{display:none}}

/* ---------- hero: keep the mockup's full-bleed image, fix the benefits contrast ----------
   The mockup styles .benefits white because they were meant to sit on the photo, but the
   copy column overlaps the white gradient, so they vanish. Navy is what the mockup itself
   uses at narrow widths — apply it at all widths. */
.hero{min-height:430px}
.hero-inner{min-height:430px}
.benefits div{color:var(--navy);text-shadow:none}
.benefits b{color:var(--orange)}
.benefits small{color:#64748b}

/* services row (restored): title column + card row */
.services-grid{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;padding:54px 0}
.services-title{border-right:1px solid var(--line);padding-right:28px}
.service-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.service-cards article{text-align:left}
.service-cards i{font-style:normal;font-size:1.45rem;color:var(--orange);display:block;margin-bottom:8px}
.service-cards h3{margin:0 0 .35em;font-size:.97rem;color:var(--navy);line-height:1.3}
.service-cards p{margin:0;color:#475569;font-size:.89rem;line-height:1.55}
@media(max-width:980px){
  .services-grid{grid-template-columns:1fr;gap:24px}
  .services-title{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}
}
/* hero image is shorter now — keep it filling the band */
.hero-image{background-position:center top}
/* versioned so browsers pick up the re-cropped photo (old one had UI text baked in) */
.hero-image{background-image:url('assets/alpine-one-hero-v3.jpg')}
/* hero band: show the vessel fully, anchored to the ship rather than the sky */
.hero-image{background-position:center 45%}

/* ================= Container Solutions (equipment) ================= */
.cs{padding:52px 0 64px;background:#fff}
.cs-eyebrow{margin:0;text-align:center;color:var(--orange);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;font-size:.8rem}
.cs-title{margin:.25em 0 .3em;text-align:center;color:var(--navy);font-size:clamp(2rem,4.2vw,3rem);
  text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.cs-sub{margin:0 auto 34px;text-align:center;color:#475569;line-height:1.65;max-width:62ch;
  position:relative;padding-top:14px}
.cs-sub::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(560px,80%);height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.cs-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch}
.cs-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:0 4px 14px rgba(2,17,43,.05)}
.cs-badge{align-self:center;margin:16px 0 6px;background:var(--navy);color:#fff;border-radius:8px;
  padding:7px 20px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.86rem}
.cs-badge.hot{background:var(--orange)}
.cs-img{padding:6px 14px 10px;display:grid;place-items:center;min-height:150px}
.cs-img img{width:100%;height:auto;display:block}
.cs-spec-h{margin:6px 16px 0;color:var(--navy);font-size:.82rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding-bottom:8px;border-bottom:2px solid var(--orange);display:inline-block}
.cs-spec{margin:10px 16px 16px;display:grid;gap:0;font-size:.74rem;flex:1}
.cs-spec dt{color:#64748b;padding:8px 0 2px;border-top:1px solid #eef2f6}
.cs-spec dt:first-child{border-top:0}
.cs-spec dd{margin:0 0 6px;color:var(--navy);font-weight:600}
.cs-foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;background:var(--navy);color:#fff}
.cs-foot>div{padding:12px 10px;text-align:center}
.cs-foot>div+div{border-left:1px solid rgba(255,255,255,.18)}
.cs-foot span{display:block;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.cs-foot strong{display:block;margin-top:4px;color:var(--orange);font-size:1.15rem;line-height:1.1}
.cs-foot em{font-style:normal;font-size:.72rem;color:#fff;opacity:.9}
.cs-perform{margin-top:34px;background:#f6f9fc;border:1px solid #e5e7eb;border-radius:16px;padding:26px}
.cs-perform-lead{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #e2e8f0}
.cs-perform-lead h2{margin:0 0 .35em;color:var(--navy);font-size:1.1rem;text-transform:uppercase;letter-spacing:.01em}
.cs-perform-lead p{margin:0;color:#475569;line-height:1.6;font-size:.92rem;max-width:70ch}
.cs-perform-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.cs-perform-grid>div{text-align:center;padding:0 8px;border-left:1px solid #e2e8f0}
.cs-perform-grid>div:first-child{border-left:0}
.cs-perform-grid h4{margin:10px 0 .4em;color:var(--navy);font-size:.84rem;text-transform:uppercase;letter-spacing:.05em}
.cs-perform-grid p{margin:0;color:#475569;font-size:.84rem;line-height:1.55}
.ic,.ic-lg{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic{width:34px;height:34px}
.ic-lg{width:54px;height:54px;flex:none}
.cs-note{margin:20px 0 0;text-align:center;color:#94a3b8;font-size:.8rem;font-style:italic}
@media(max-width:1200px){.cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-perform-grid{grid-template-columns:1fr 1fr}
  .cs-perform-grid>div:nth-child(3){border-left:0}}
@media(max-width:540px){.cs-grid,.cs-perform-grid{grid-template-columns:1fr}
  .cs-perform-grid>div{border-left:0;border-top:1px solid #e2e8f0;padding-top:16px}
  .cs-perform-grid>div:first-child{border-top:0}
  .cs-perform-lead{grid-template-columns:1fr}}

/* ---------- hero benefits bar over the ocean (design 1) ---------- */
.hero{position:relative;min-height:520px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 62%)}
.hero-inner{min-height:520px;display:block;padding:44px 0 0;position:relative}
.hero-copy{width:min(560px,52%);padding:0}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:20px 0;
  background:linear-gradient(180deg,rgba(8,34,64,0) 0%,rgba(8,34,64,.55) 45%,rgba(8,34,64,.72) 100%)}
.benefits div{display:flex;gap:13px;align-items:center;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);
  padding:0 20px;border-left:1px solid rgba(255,255,255,.28)}
.benefits div:first-child{border-left:0}
.benefits .bi{width:38px;height:38px;flex:none;fill:none;stroke:#fff;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.benefits strong{display:block;font-size:1rem}
.benefits small{display:block;color:rgba(255,255,255,.88);font-size:.82rem;margin-top:2px;line-height:1.35}
@media(max-width:980px){
  .hero{min-height:auto;background:none}
  .hero-inner{min-height:auto;padding:26px 0 0}
  .hero-copy{width:100%}
  .benefits{position:static;grid-template-columns:1fr 1fr;gap:14px;padding:22px 0 6px;background:none}
  .benefits div{color:var(--navy);text-shadow:none;border-left:0;padding:0}
  .benefits .bi{stroke:var(--orange);width:32px;height:32px}
  .benefits small{color:#64748b}
}
@media(max-width:560px){.benefits{grid-template-columns:1fr}}

/* services icons (design 1) */
.service-cards article{text-align:center;padding:0 10px;border-left:1px solid var(--line)}
.service-cards article:first-child{border-left:0}
.service-cards .si{width:44px;height:44px;margin:0 auto 10px;display:block;fill:none;stroke:var(--navy);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.service-cards h3{text-align:center}
.service-cards p{text-align:center}
@media(max-width:980px){.service-cards article{border-left:0}}

/* hero: photo spans the full band (as design 1); scrim keeps the headline legible */
.hero{background:#dceaf4}
.hero-image{inset:0;background-position:center 42%;background-size:cover}
.hero-image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0 26%,rgba(255,255,255,.72) 40%,rgba(255,255,255,.15) 56%,rgba(255,255,255,0) 68%)}
.hero-inner{position:relative;z-index:1}
.benefits{background:linear-gradient(180deg,rgba(8,34,64,.35) 0%,rgba(8,34,64,.78) 55%,rgba(8,34,64,.88) 100%)}
@media(max-width:980px){.hero-image::after{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.65))}}

/* photo back to the right (our source is 736x375 — full-bleed over-crops it);
   benefits become a solid band so they read the same across the whole width */
.hero{background:linear-gradient(90deg,#ffffff 0 34%,#eaf2f8 52%,#dceaf4 100%)}
.hero-image{inset:0 0 0 38%;background-position:center center;background-size:cover}
.hero-image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.85) 0,rgba(255,255,255,.25) 14%,rgba(255,255,255,0) 32%)}
.benefits{background:rgba(8,34,64,.93)}
.benefits div{text-shadow:none}
@media(max-width:980px){.hero-image{inset:auto;position:relative;height:260px;margin-top:18px}
  .hero-image::after{background:none}
  .benefits{background:none}}


/* ================= Contact / Offices (merged) ================= */
.offices-page{padding:52px 0 64px}
.office-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.oc{border:1px solid #e5e7eb;border-radius:16px;background:#fff;overflow:hidden;display:flex;
  flex-direction:column;box-shadow:0 4px 16px rgba(2,17,43,.06)}
.oc-head{background:var(--navy);color:#fff;padding:16px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.oc-head h2{margin:0;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.25}
.oc-tag{background:var(--orange);color:#fff;font-size:.63rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
.oc-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.oc-co{font-weight:700;color:var(--navy);text-decoration:none;font-size:.98rem}
a.oc-co:hover{color:var(--orange)}
.ln{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:.88rem;color:#475569}
.ln svg{width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--orange);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ln b{display:block;color:#94a3b8;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;margin-bottom:2px}
.ln a{color:var(--navy);text-decoration:none;font-weight:600}
.ln a:hover{color:var(--orange);text-decoration:underline}
.ln.addr{padding-bottom:12px;border-bottom:1px solid #eef2f6;line-height:1.6}
.ln.addr span{color:var(--navy)}
.contact-cta{margin-top:30px;background:var(--navy);color:#fff;border-radius:16px;padding:26px 30px;
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.contact-cta h2{margin:0 0 .3em;font-size:1.25rem}
.contact-cta p{margin:0;color:rgba(255,255,255,.85);line-height:1.6;max-width:62ch}
@media(max-width:960px){.office-grid{grid-template-columns:1fr 1fr}
  .contact-cta{grid-template-columns:1fr}}
@media(max-width:640px){.office-grid{grid-template-columns:1fr}}
/* headings on navy panels must override the global navy h2 */
.oc-head h2{color:#fff;font-size:1rem;letter-spacing:.04em}
.contact-cta h2{color:#fff;font-size:1.25rem;letter-spacing:0}

/* ---- CTA card: let white show around it instead of butting the dark band ---- */
.contact{background:#fff;padding:46px 0 62px}
.contact .contact-card{box-shadow:0 14px 34px rgba(2,17,43,.18)}

/* ================= Quote form (own namespace, no inherited layout) ============ */
.qf-wrap{background:#f6f9fc;padding:48px 0 64px}
.qf{max-width:760px;margin:0 auto;background:#fff;border:1px solid #e2e8f0;border-radius:18px;
  padding:30px 32px 26px;box-shadow:0 10px 30px rgba(2,17,43,.07);display:block}
.qf-sec{margin:0 0 26px}
.qf-legend{margin:0 0 16px;color:var(--navy);font-size:.82rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding-bottom:9px;border-bottom:2px solid var(--orange);display:block}
.qf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.qf-field{display:block;margin:0}
.qf-lab{display:block;font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.qf-lab i{color:#dc2626;font-style:normal}
.qf-hint{display:block;font-size:.79rem;color:#64748b;line-height:1.5;margin:-2px 0 8px}
.qf input,.qf textarea{
  display:block;width:100%;box-sizing:border-box;font:inherit;color:var(--navy);
  background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:11px 13px;
  transition:border-color .15s,box-shadow .15s}
.qf input::placeholder,.qf textarea::placeholder{color:#9aa8b8}
.qf input:hover,.qf textarea:hover{border-color:#94a3b8}
.qf input:focus,.qf textarea:focus{outline:0;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(249,115,22,.16)}
.qf input.bad,.qf textarea.bad{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.qf textarea{resize:vertical;min-height:150px;line-height:1.55}
.qf-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid #eef2f6}
.qf-btn{appearance:none;border:0;cursor:pointer;background:var(--orange);color:#fff;
  font:inherit;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.84rem;
  padding:13px 26px;border-radius:10px;transition:filter .15s}
.qf-btn:hover{filter:brightness(1.06)}
.qf-btn:disabled{opacity:.6;cursor:default}
.qf-msg{margin:0;font-size:.9rem;color:#475569;min-height:1.1em}
.qf-msg.err{color:#b91c1c}
.qf-msg.ok{color:#047857;font-weight:600}
.qf-note{margin:16px 0 0;font-size:.78rem;color:#94a3b8}
.qf-note i{color:#dc2626;font-style:normal}
@media(max-width:620px){.qf{padding:24px 20px}.qf-grid{grid-template-columns:1fr}}

/* ---- ship photo as the full hero background, copy sits on it ---- */
.hero{background:#dbe9f4}
.hero-image{inset:0;background-image:url('assets/hero-wide-v1.jpg');
  background-position:center 38%;background-size:cover}
/* white wash on the left so the navy/orange headline stays legible on the photo */
.hero-image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.94) 0,
    rgba(255,255,255,.88) 26%,
    rgba(255,255,255,.60) 42%,
    rgba(255,255,255,.18) 58%,
    rgba(255,255,255,0) 72%)}
.hero-inner{position:relative;z-index:1}
@media(max-width:980px){
  .hero{background:#dbe9f4}
  .hero-image{inset:0;position:absolute;height:auto;margin:0;background-position:center 40%}
  .hero-image::after{background:linear-gradient(180deg,
    rgba(255,255,255,.93) 0,rgba(255,255,255,.86) 45%,rgba(255,255,255,.55) 100%)}
  .benefits{background:rgba(8,34,64,.90)}
  .benefits div{color:#fff}
  .benefits .bi{stroke:#fff}
  .benefits small{color:rgba(255,255,255,.88)}
}
/* frame the vessel, not the sky */
.hero-image{background-position:center 78%}
@media(max-width:980px){.hero-image{background-position:center 70%}}

/* show the VESSEL: bow-on shot, lighter wash so the ship reads behind the copy */
.hero{min-height:560px}
.hero-inner{min-height:560px}
.hero-image{background-image:url('assets/alpine-one-hero-v3.jpg');background-position:center 62%}
.hero-image::after{background:linear-gradient(90deg,
    rgba(255,255,255,.86) 0,
    rgba(255,255,255,.74) 22%,
    rgba(255,255,255,.42) 38%,
    rgba(255,255,255,.12) 52%,
    rgba(255,255,255,0) 66%)}
/* keep the headline crisp over the lightened photo */
.hero-copy h1{text-shadow:0 1px 0 rgba(255,255,255,.85),0 2px 14px rgba(255,255,255,.6)}
.hero-copy .lede,.hero-copy>p{text-shadow:0 1px 6px rgba(255,255,255,.9)}
@media(max-width:980px){.hero{min-height:0}.hero-inner{min-height:0}
  .hero-image{background-position:center 60%}}

/* ---- pull the vessel back: fit it by height, anchor right, sea/sky fills the left ---- */
.hero{background:linear-gradient(180deg,
  #d9ecf7 0%, #cfe6f4 30%, #a9cde6 48%, #5f97bd 62%, #35719b 80%, #27618a 100%)}
.hero-image{
  background-image:url('assets/alpine-one-hero-v3.jpg');
  background-size:auto 100%;
  background-position:right center;
  background-repeat:no-repeat;
  /* feather the left edge so the photo melts into the sea/sky gradient */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 8%,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 8%,#000 22%)}
.hero-image::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.80) 0,
    rgba(255,255,255,.62) 20%,
    rgba(255,255,255,.28) 34%,
    rgba(255,255,255,.06) 46%,
    rgba(255,255,255,0) 58%)}
@media(max-width:980px){
  .hero-image{background-size:cover;background-position:center 60%;
    -webkit-mask-image:none;mask-image:none}
}

/* 2026-10-07: keep all five service cards on one row on wide screens (Sep 15 fix was lost) */
@media(min-width:1051px){.service-cards{grid-template-columns:repeat(5,1fr)}}