/* BUTIGAL Ocean Freight V1.7.11 — additive, Ocean-scoped visual layer.
 * Pure CSS: no external CDN, no API call, no changes to transaction logic.
 */
:root {
  --oc-green:#075b43; --oc-green-2:#0b7655; --oc-yellow:#f3c51d;
  --oc-ink:#152b27; --oc-muted:#657770; --oc-line:#e4ede9;
  --oc-soft:#f2f8f5; --oc-paper:#ffffff;
}
html {scroll-behavior:smooth}
body:has(.oc-shell) {background:#f8faf8; margin:0; color:var(--oc-ink)}
.oc-shell {max-width:1240px; padding:0 30px 54px; margin:auto; font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5; box-sizing:border-box}
.oc-shell *, .oc-shell *::before, .oc-shell *::after {box-sizing:border-box}
.oc-shell a, .oc-shell button, .oc-shell input, .oc-shell select, .oc-shell textarea {font-family:inherit}
.oc-shell a:focus-visible, .oc-shell button:focus-visible, .oc-shell input:focus-visible, .oc-shell select:focus-visible, .oc-shell textarea:focus-visible, .oc-shell summary:focus-visible {outline:3px solid #e8b31a;outline-offset:3px}
.oc-shell [hidden] {display:none !important}
/* Ocean-wide branded nav, carrying its own logo from the existing portal asset. */
.oc-nav {position:relative;z-index:8;display:flex;gap:22px;justify-content:space-between;align-items:center;min-height:90px;padding:14px 20px;border:1px solid #f0e9c8;border-top:0;border-radius:0 0 14px 14px;background:linear-gradient(105deg,#fff9e5,#f9f9ef)}
.oc-nav-brand {display:flex;align-items:center;gap:15px;min-width:0;text-decoration:none;color:var(--oc-ink);font-size:15px;line-height:1.2}
.oc-nav-brand img {width:128px;height:49px;max-width:100%;object-fit:contain;object-position:left center}
.oc-brand-separator {width:1px;height:30px;flex:none;background:#cfddd5}
.oc-nav-brand .oc-nav-brand-service {max-width:118px;color:#0b5941;font-size:13px;font-weight:900;line-height:1.25;letter-spacing:.015em}
.oc-nav nav {display:flex;gap:5px;align-items:center;justify-content:flex-end}
.oc-nav nav a {display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:9px 13px;border-radius:10px;color:#435c53;white-space:nowrap;font-size:12px;font-weight:850;text-decoration:none;transition:background .16s ease,color .16s ease}
.oc-nav nav a:hover,.oc-nav nav a[aria-current="page"] {background:#e9f4ee;color:#075b43}
.oc-nav nav .oc-nav-cta {margin-left:6px;padding:10px 17px;background:#075b43;color:#fff;box-shadow:0 4px 10px #063e2c1f}
.oc-nav nav .oc-nav-cta:hover,.oc-nav nav .oc-nav-cta[aria-current="page"] {background:#0c7454;color:#fff}
.oc-nav .oc-nav-admin {color:#5d6f6a}
/* Page mastheads and shared controls. */
.oc-page-head {padding:49px 0 26px;border-bottom:1px solid #e6ede8;margin-bottom:24px}
.oc-page-head .oc-eyebrow,.oc-eyebrow {font-size:11px;letter-spacing:.16em;font-weight:950;color:#147457;text-transform:uppercase}
.oc-page-head h1 {font-size:clamp(32px,4vw,51px);letter-spacing:-.045em;line-height:1.06;color:#153c31;margin:6px 0 14px;overflow-wrap:anywhere}
.oc-page-head p {font-size:15px;color:#677b72;line-height:1.65;margin:0}
.oc-btn {min-height:43px;border-radius:11px;padding:10px 17px;font-weight:900;letter-spacing:.005em;transition:background .16s ease,transform .16s ease,box-shadow .16s ease}
.oc-btn:hover {transform:translateY(-1px)}
.oc-btn-primary {background:#086a4b;color:white;box-shadow:0 7px 17px #064b3624}
.oc-btn-primary:hover {background:#09563e;color:#fff}
.oc-btn-secondary {border-color:#cdded4;color:#14503e;background:#fff}
.oc-btn-secondary:hover {background:#f2f9f5;border-color:#a3c3b2}
.oc-btn-lg {min-height:51px;padding:14px 21px;gap:15px;font-size:13px}
.oc-alert {border-radius:13px;border:1px solid transparent;line-height:1.6}
.oc-alert-success {border-color:#c9e8d7}
.oc-alert-error {border-color:#f3ccc5}
.oc-form {gap:20px}
.oc-form-card,.oc-admin-section,.oc-table-card {border:1px solid #e1eae5;border-radius:19px;background:#fff;box-shadow:0 8px 30px #193f3010}
.oc-form-card {padding:clamp(17px,3vw,29px)}
.oc-form-card h2 {font-size:clamp(18px,2.2vw,24px);color:#173e33;line-height:1.3}
.oc-form-card p {font-size:13px;line-height:1.65}
.oc-form label,.oc-admin-section label {font-weight:850;line-height:1.5;gap:8px}
.oc-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.oc-form select,.oc-form textarea,.oc-admin-section input:not([type="checkbox"]):not([type="radio"]),.oc-admin-section select,.oc-admin-section textarea {
  min-height:43px;background:#fbfdfc;border-color:#ccdcd3;border-radius:10px;padding:10px 12px;font-size:13px;
}
.oc-form input:focus,.oc-form select:focus,.oc-form textarea:focus {border-color:#0c7954;background:white}
.oc-check input {accent-color:#07724f}
.oc-summary-grid {gap:14px}
.oc-summary-grid>div {background:#fff;border:1px solid #e3ece7;border-radius:15px;padding:17px 19px;box-shadow:0 6px 18px #183f3010}
.oc-summary-grid strong {color:#183b31;overflow-wrap:anywhere}
.oc-summary-grid span {font-weight:800;letter-spacing:.015em}
.oc-table-card {overflow-x:auto;overscroll-behavior-x:contain}
.oc-table th {background:#ecf5ef;color:#48685b;padding:14px 16px}
.oc-table td {padding:16px;font-size:12px;color:#234036}
.oc-table tr:hover td {background:#f9fdfa}
.oc-table a {text-underline-offset:3px}
.oc-badge {background:#e4f3eb;color:#086042;border:1px solid #c8e5d5;font-size:10px}
.oc-breakdown {background:#fff;border-radius:16px;box-shadow:0 5px 19px #173f300c}
.oc-timeline {position:relative;padding-left:3px;gap:0}
.oc-timeline-row {position:relative;grid-template-columns:22px 1fr;gap:13px;padding:0 0 25px}
.oc-timeline-row:not(:last-child):before {content:"";position:absolute;top:17px;bottom:0;left:7px;width:2px;background:#d9eade}
.oc-dot {height:14px;width:14px;margin-top:3px;border:3px solid #d4eade;background:#137c55;box-shadow:0 0 0 3px #f4faf6;z-index:1}
.oc-timeline-row strong {font-size:14px;color:#244a3c}
.oc-timeline-row small {font-size:11px;line-height:1.55}
.oc-invoice-banner {border-radius:15px}
.oc-quote-total {border:1px solid #234e3f;box-shadow:0 11px 27px #15362824}
.oc-shell .pagination {margin-top:18px}
/* Ocean customer homepage, designed for clear conversion and visual hierarchy. */
.oc-home-v1711 .oc-hero {display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;gap:54px;padding:76px 0 72px}
.oc-home-v1711 .oc-hero-copy {min-width:0}
.oc-hero-kicker {display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;font-size:10px;color:#647a6c;font-weight:900;letter-spacing:.16em}
.oc-live-dot {width:8px;height:8px;border-radius:50%;background:#e8b928;box-shadow:0 0 0 4px #fff1be}
.oc-home-v1711 .oc-hero h1 {font-size:clamp(41px,4.7vw,67px);line-height:1.055;letter-spacing:-.052em;font-weight:950;max-width:660px;color:#123e30;margin:14px 0 22px}
.oc-home-v1711 .oc-hero p {color:#65776e;font-size:16px;line-height:1.75;max-width:575px;margin:0}
.oc-home-v1711 .oc-hero .oc-actions {margin-top:30px;gap:12px}
.oc-hero-proof {display:flex;flex-wrap:wrap;gap:10px 21px;margin-top:30px}
.oc-hero-proof>span {color:#576b60;font-size:11px;font-weight:850;display:inline-flex;gap:7px;align-items:center}
.oc-hero-proof>span>span {color:#0d8a5c;font-size:16px}
.oc-visual {position:relative;overflow:hidden;min-height:480px;border-radius:27px;padding:26px;background:linear-gradient(145deg,#103d32 0%,#0a5345 42%,#082a28 100%);box-shadow:0 30px 65px #163c312d;isolation:isolate;color:#fff}
.oc-visual:before {content:"";position:absolute;inset:-80px -120px auto auto;width:390px;height:360px;border-radius:50%;background:radial-gradient(circle,#60a98e30,transparent 69%);z-index:-1}
.oc-visual-glow {position:absolute;width:250px;height:250px;bottom:24px;left:0;border-radius:50%;background:#0f886b31;filter:blur(40px)}
.oc-visual-top,.oc-visual-bottom {position:relative;z-index:2;display:flex;justify-content:space-between;gap:15px;color:#bad5c8;font-size:10px;font-weight:900;letter-spacing:.11em}
.oc-visual-mark {border:1px solid #ffffff42;padding:5px 9px;border-radius:999px}
.oc-visual-route {position:relative;display:grid;grid-template-columns:1fr 72px 1fr;gap:10px;align-items:center;margin-top:37px;z-index:2}
.oc-visual-route>div:last-child {text-align:right}
.oc-visual-route small {display:block;color:#a9cbbf;font-size:9px;font-weight:900;letter-spacing:.14em}
.oc-visual-route strong {display:block;color:#fff;font-size:31px;letter-spacing:-.04em;line-height:1.15;margin-top:5px}
.oc-visual-route div>span {display:block;color:#cadfd7;font-size:10px;margin-top:4px}
.oc-visual-travel {display:flex;align-items:center;gap:6px;color:#e8c94e}
.oc-visual-travel>span {display:block;flex:1;border-top:1px dashed #b3d0b5}
.oc-container-art {position:relative;height:225px;margin:6px 0 0;overflow:hidden}
.oc-art-crane {position:absolute;z-index:0;top:25px;right:25px;width:2px;height:148px;background:#90b5a544;transform:skew(-11deg)}
.oc-art-crane:before {content:"";position:absolute;top:4px;right:-16px;height:2px;width:175px;background:#a7ccbe55}
.oc-art-crane:after {content:"";position:absolute;top:5px;right:125px;width:2px;height:47px;background:#a7ccbe55}
.oc-art-stack {display:grid;position:absolute;left:50%;grid-template-columns:repeat(3,1fr);gap:5px;width:77%;height:63px;transform:translateX(-50%);z-index:2}
.oc-art-stack i {border:1px solid #f4f3df33;background:repeating-linear-gradient(90deg,transparent 0 7px,#ffffff1c 8px 9px,transparent 10px 13px),linear-gradient(145deg,#d7a635,#e3c85a);border-radius:3px 3px 1px 1px;box-shadow:0 5px 10px #071a1d20}
.oc-art-stack-back {bottom:88px;width:62%;left:49%;height:47px}
.oc-art-stack-back i {background:repeating-linear-gradient(90deg,transparent 0 7px,#ffffff21 8px 9px,transparent 10px 13px),linear-gradient(145deg,#269178,#197159)}
.oc-art-stack-front {bottom:29px}
.oc-art-hull {position:absolute;bottom:5px;left:4%;width:92%;height:37px;background:linear-gradient(145deg,#0c202a,#172b38);clip-path:polygon(0 0,100% 0,94% 100%,9% 100%);z-index:3}
.oc-art-hull span {position:absolute;top:8px;left:16%;font-size:10px;font-weight:950;letter-spacing:.18em;color:#d8e5e2}
.oc-art-sea {position:absolute;bottom:-18px;left:0;width:100%;height:40px;background:linear-gradient(to bottom,#2c8b7b63,#114e5977);border-radius:52% 48% 0 0;z-index:1}
.oc-art-sea i {position:absolute;left:12%;top:12px;width:30%;height:1px;background:#acc7cc6c}
.oc-art-sea i:nth-child(2) {left:55%;top:20px;width:28%}
.oc-art-sea i:nth-child(3) {left:43%;top:6px;width:16%}
.oc-visual-bottom {padding-top:20px;border-top:1px solid #ffffff22}
.oc-trust-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:22px 0;border-top:1px solid #e0e9e4;border-bottom:1px solid #e0e9e4}
.oc-trust-row>div {display:grid;grid-template-columns:45px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:9px 26px}
.oc-trust-row>div+div {border-left:1px solid #dee9e2}
.oc-trust-row>div:first-child {padding-left:0}
.oc-trust-symbol {grid-row:1/3;width:39px;height:39px;border-radius:11px;display:grid;place-items:center;background:#e5f2e9;color:#0d7453;font-size:11px;font-weight:950}
.oc-trust-row strong {color:#244f3e;font-size:12px;font-weight:950}
.oc-trust-row small {color:#7a8b7e;font-size:11px}
.oc-home-v1711 .oc-section {padding:100px 0 85px}
.oc-section-top {display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:34px}
.oc-section-top>div {max-width:680px}
.oc-section-top h2 {font-size:clamp(30px,3.3vw,43px);line-height:1.16;letter-spacing:-.04em;color:#143e30;margin:10px 0 0}
.oc-section-top>p {max-width:315px;line-height:1.75;color:#64776b;font-size:13px;margin:0 0 3px}
.oc-home-v1711 .oc-cards {gap:19px}
.oc-service-card {position:relative;display:flex;flex-direction:column;min-height:309px;padding:28px 26px;border:1px solid #e4ede7;border-radius:21px;box-shadow:0 9px 22px #193f2f0b;transition:transform .15s ease,box-shadow .15s ease}
.oc-service-card:hover {transform:translateY(-3px);box-shadow:0 16px 33px #193f2f1b}
.oc-service-card .oc-card-icon {width:53px;height:53px;background:#e5f3e9;color:#0a6950;font-size:25px}
.oc-service-number {position:absolute;right:26px;top:37px;font-size:10px;font-weight:950;color:#81938a;letter-spacing:.1em}
.oc-service-card h3 {font-size:19px;letter-spacing:-.025em;color:#183f32;margin:26px 0 10px}
.oc-service-card p {margin:0;font-size:13px;line-height:1.75;color:#687c70;flex:1}
.oc-service-foot {display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e9f0ec;padding-top:15px;margin-top:20px;color:#24634b;font-size:10px;font-weight:950;letter-spacing:.08em}
.oc-service-foot b {font-size:18px;font-weight:700}
.oc-journey {padding:62px 48px 66px;border-radius:28px;background:#eaf3ed;border:1px solid #dce9df}
.oc-journey-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;list-style:none;padding:18px 0 0;margin:0;counter-reset:none}
.oc-journey-steps li {position:relative;border-top:2px solid #bdd7c8;padding-top:20px}
.oc-journey-steps li:before {content:"";position:absolute;top:-5px;left:0;height:8px;width:8px;border-radius:50%;background:#0d7755;box-shadow:0 0 0 4px #d2e8d9}
.oc-journey-steps li>span {font-size:12px;font-weight:950;color:#237257;letter-spacing:.11em}
.oc-journey-steps h3 {font-size:15px;color:#153e31;margin:10px 0 7px;line-height:1.4}
.oc-journey-steps p {font-size:12px;color:#60746a;line-height:1.7;margin:0}
.oc-bottom-cta {margin-top:70px;padding:44px 50px;background:linear-gradient(115deg,#08452f,#0b6144);color:#fff;border-radius:23px;display:flex;justify-content:space-between;align-items:center;gap:26px;overflow:hidden;position:relative}
.oc-bottom-cta:after {content:"";position:absolute;right:-20px;top:-70px;width:260px;height:230px;border:30px solid #ffffff08;border-radius:50%;pointer-events:none}
.oc-bottom-cta .oc-eyebrow {color:#f8d76b}
.oc-bottom-cta h2 {font-size:clamp(23px,3vw,35px);max-width:630px;letter-spacing:-.035em;line-height:1.2;margin:9px 0}
.oc-bottom-cta p {font-size:13px;color:#cfdfd3;margin:0}
.oc-btn-bright {flex:none;background:#f3c51d;color:#163528;gap:22px;z-index:1}
.oc-btn-bright:hover {background:#ffe26a;color:#163528}
.oc-footer {padding-top:30px;margin-top:33px;border-top:1px solid #e1eae4;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#85968b;font-size:10px;font-weight:800;letter-spacing:.06em}
/* Page accents / tiny progression heading, no modifications to form machinery. */
.oc-v1711-form-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;list-style:none;margin:0 0 24px;padding:0}
.oc-v1711-form-steps li {display:flex;align-items:center;gap:8px;border:1px solid #e4eee7;background:#fff;border-radius:12px;padding:12px 13px;color:#496d5d;font-size:11px;font-weight:850}
.oc-v1711-form-steps b {display:grid;place-items:center;height:24px;width:24px;min-width:24px;border-radius:50%;background:#e7f3eb;color:#0e6a4d;font-size:10px}
.oc-v1711-index-top {display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.oc-v1711-index-top p {font-size:12px;line-height:1.6;margin:0;color:#64796e}
.oc-v1711-empty {text-align:center;padding:40px 20px !important;color:#728479 !important}
@media(max-width:1080px) {
  .oc-home-v1711 .oc-hero {gap:32px}
  .oc-home-v1711 .oc-hero h1 {font-size:clamp(38px,4.65vw,56px)}
  .oc-nav nav {gap:0}
  .oc-nav nav a {padding:9px 10px}
  .oc-trust-row>div {padding-left:16px;padding-right:16px}
}
@media(max-width:900px) {
  .oc-shell {padding:0 21px 45px}
  .oc-nav {min-height:auto;flex-direction:column;align-items:stretch;gap:8px;padding:16px 0 12px}
  .oc-nav nav {justify-content:flex-start;overflow-x:auto;white-space:nowrap;max-width:100%;padding:6px 0;flex-wrap:nowrap;scrollbar-width:thin}
  .oc-home-v1711 .oc-hero {grid-template-columns:1fr;padding:46px 0 52px;gap:36px}
  .oc-home-v1711 .oc-hero h1 {max-width:720px;font-size:clamp(39px,6.4vw,60px)}
  .oc-visual {max-width:720px;width:100%;margin:auto;min-height:440px}
  .oc-home-v1711 .oc-cards {grid-template-columns:repeat(3,minmax(0,1fr))}
  .oc-service-card {padding:24px 20px}
  .oc-service-card h3 {font-size:17px}
  .oc-trust-row strong {font-size:11px}
  .oc-trust-row small {font-size:10px}
  .oc-journey {padding:40px 29px}
  .oc-journey-steps {grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
}
@media(max-width:700px) {
  .oc-trust-row {grid-template-columns:1fr 1fr}
  .oc-trust-row>div {padding:12px !important}
  .oc-trust-row>div:nth-child(3) {grid-column:1/3;border-top:1px solid #e0e9e4;border-left:0;margin-top:8px;padding-left:0 !important}
  .oc-home-v1711 .oc-cards {grid-template-columns:1fr}
  .oc-service-card {min-height:235px}
  .oc-section-top {flex-direction:column;align-items:flex-start;gap:12px}
  .oc-section-top>p {max-width:600px}
  .oc-home-v1711 .oc-section {padding:64px 0}
  .oc-bottom-cta {flex-direction:column;align-items:flex-start;padding:36px 30px;margin-top:44px}
  .oc-v1711-form-steps {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px) {
  .oc-shell {padding:0 15px 38px}
  .oc-nav-brand img {width:113px;height:45px}
  .oc-nav nav .oc-nav-cta {margin-left:0}
  .oc-home-v1711 .oc-hero {padding-top:33px;gap:28px}
  .oc-hero-kicker {margin-bottom:19px;letter-spacing:.1em;font-size:9px}
  .oc-home-v1711 .oc-hero h1 {font-size:clamp(35px,10vw,46px);letter-spacing:-.042em}
  .oc-home-v1711 .oc-hero p {font-size:14px}
  .oc-home-v1711 .oc-hero .oc-actions {display:grid;grid-template-columns:1fr}
  .oc-hero-proof {gap:7px 16px}
  .oc-visual {min-height:367px;padding:19px;border-radius:20px}
  .oc-visual-route {grid-template-columns:1fr 46px 1fr;margin-top:29px}
  .oc-visual-route strong {font-size:25px}
  .oc-visual-route div>span {font-size:9px}
  .oc-container-art {height:183px}
  .oc-art-stack {height:51px}
  .oc-art-stack-back {bottom:80px;height:42px}
  .oc-art-hull {height:31px}
  .oc-art-hull span {font-size:8px}
  .oc-visual-bottom {font-size:8px}
  .oc-trust-row {grid-template-columns:1fr}
  .oc-trust-row>div,.oc-trust-row>div:nth-child(3) {grid-column:auto;border:0;border-top:1px solid #e0e9e4;margin:0;padding:12px 0 !important}
  .oc-trust-row>div:first-child {border-top:0}
  .oc-section-top h2 {font-size:30px}
  .oc-journey {padding:30px 19px;border-radius:20px}
  .oc-journey-steps {grid-template-columns:1fr;gap:24px}
  .oc-page-head {padding:29px 0 18px}
  .oc-form-card {padding:18px}
  .oc-v1711-index-top {align-items:flex-start;flex-direction:column}
  .oc-footer {flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .oc-shell *, .oc-shell *::before, .oc-shell *::after {transition:none !important;animation:none !important}
}
@media print {
  .oc-nav, .oc-bottom-cta, .oc-footer, .oc-v1711-form-steps {display:none !important}
  body:has(.oc-shell) {background:white}
  .oc-shell {max-width:none;padding:0}
  .oc-form-card,.oc-table-card,.oc-summary-grid>div {box-shadow:none}
}