/* BUYCONTAINERS.NOW — corporate maritime system.
   Ink #1D2833 · Sea #3D5A6C · Mist #F5F5F3 · Slate #5F6E79 · Sand #B9A488 */

:root{
  --navy:#152B3D;
  --navy-2:#1D3A52;
  --navy-3:#264A66;
  --blue:#20618F;
  --blue-d:#1A5079;
  --cyan:#6E9BB8;
  --ink:#1B2B38;
  --slate:#5C6B76;
  --mist:#F4F2ED;
  --white:#FFFFFF;
  --line:#E4E1DA;
  --line-d:#2C4759;
  --ok:#33704F;
  --rust:#A8562F;
  --sand:#C29A5B;
  --maxw:1160px;
  --r:12px;
  --shadow:0 1px 2px rgba(25,35,45,.04),0 8px 24px rgba(25,35,45,.05);
  --shadow-lg:0 1px 3px rgba(25,35,45,.05),0 16px 40px rgba(25,35,45,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light only;background:#FFFFFF}
body{overflow-x:hidden}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Inter",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.022em;line-height:1.14;color:var(--navy)}
h1{font-size:clamp(2.2rem,4.8vw,3.55rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.14rem;letter-spacing:-.01em}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rust);margin-bottom:16px;
}
.sub{color:var(--slate);max-width:58ch;font-size:1.05rem}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;text-decoration:none;
  font-weight:600;font-size:.95rem;padding:13px 26px;border:none;border-radius:980px;
  cursor:pointer;white-space:nowrap;letter-spacing:-.01em;
  transition:opacity .15s ease;
}
.btn:hover{opacity:.9;background:var(--blue-d)}
.btn.lg{padding:16px 32px;font-size:1rem}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #AEB2AD;font-weight:600}
.btn.ghost:hover{border-color:var(--ink);background:transparent;opacity:1}
.btn.onDark.ghost{border-color:rgba(255,255,255,.32);color:#fff}
.btn.onDark.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* header */
.utility{
  background:var(--navy);color:#B9C7D2;font-size:.74rem;letter-spacing:.02em;
  text-align:center;padding:7px 14px;
}
.utility strong{color:#fff;font-weight:600}
.utility a{color:#fff;text-decoration:none;font-weight:600}
.utility a:hover{text-decoration:underline}
header.site{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex;align-items:center;gap:26px;height:58px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
.brand .word{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--ink)}
.brand .word em{font-style:normal;color:var(--slate)}
nav.main{display:flex;gap:28px;margin-left:auto;align-items:center}
nav.main a{color:#41505B;text-decoration:none;font-size:.88rem;font-weight:500;transition:color .12s}
nav.main a:hover{color:var(--navy)}
nav.main a.used{color:var(--slate);font-size:.85rem;font-weight:500;border-left:1px solid var(--line);padding-left:26px}
nav.main a.btn{padding:9px 18px;font-size:.84rem;color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--navy);border-radius:8px;padding:8px 13px;font-size:1.05rem;cursor:pointer}

/* hero */
.hero{
  position:relative;overflow:hidden;color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F2ED 100%);
  padding:84px 0 92px;
}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero h1{color:var(--ink)}
.hero .sub{color:var(--slate);margin:22px 0 34px;font-size:1.12rem}
.heroCtas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .kicker{display:none}
.heroFacts{display:flex;gap:38px;margin-top:44px;flex-wrap:wrap}
.hf .v{font-weight:700;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em}
.hf .k{font-size:.78rem;color:var(--slate);font-weight:500;margin-top:2px}

/* hero illustration */
.heroArt{position:relative}
.heroArt .photo{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-lg)}
.heroArt .photo img{width:100%;max-width:440px;margin:0 auto;height:auto;display:block}
.cardPhoto{background:#fff;border-radius:10px;margin:2px 0 20px;border:1px solid var(--line);padding:10px}
.cardPhoto img{width:100%;height:170px;max-width:340px;margin:0 auto;object-fit:contain;display:block}
.heroArt .glass{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 16px;color:var(--ink);
}
.glass .t{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.glass .v{font-weight:600;font-size:.92rem;color:var(--ink);letter-spacing:-.01em}
.glass.g1{top:6%;right:-2%}
.glass.g2{bottom:10%;left:-4%}

/* trust bar */
.trustbar{background:var(--white);border-bottom:1px solid var(--line)}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tb{display:flex;gap:14px;align-items:flex-start;padding:26px 26px 26px 0;border-left:1px solid var(--line);padding-left:26px}
.tb:first-child{border-left:none;padding-left:0}
.tb svg{width:26px;height:26px;flex:none;stroke:var(--blue);margin-top:2px}
.tb b{display:block;font-size:.92rem;color:var(--navy);letter-spacing:-.01em}
.tb span{font-size:.8rem;color:var(--slate);line-height:1.45;display:block;margin-top:2px}

/* sections */
section{padding:96px 0;background:var(--white)}
section.tight{padding:76px 0}
section.mistbg{background:var(--mist)}
.mistbg{background:var(--mist)}
.navybg{background:linear-gradient(165deg,#152B3D,#1D3A52);color:#fff}
.navybg h2{color:#fff}
.navybg .sub{color:#AEB9C0}
.navybg .eyebrow{color:#D9A183}

/* product cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px 26px;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);position:relative;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#CFD2CE}
.card .code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.72rem;color:var(--slate);letter-spacing:.06em}
.card h3{font-size:1.42rem;margin:10px 0 2px}
.card .dims{font-weight:600;font-size:.9rem;color:var(--slate);margin-bottom:20px}
.card .art{margin:2px 0 20px;background:var(--mist);border-radius:10px;padding:18px 16px}
.card ul{list-style:none;border-top:1px solid var(--line)}
.card li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.card li span:first-child{color:var(--slate)}
.card li span:last-child{font-weight:700;color:var(--navy);text-align:right}
.card .go{margin-top:20px;font-weight:700;color:var(--blue);font-size:.93rem;display:flex;align-items:center;gap:6px}
.card .flag{
  position:absolute;top:22px;right:22px;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:var(--navy);color:#fff;border-radius:999px;padding:5px 12px;
}

/* first-trip panel */
.tripPanel{
  border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;
  background:linear-gradient(140deg,#1A5079,#20618F 60%,#2B6F9E);color:#fff;
  box-shadow:var(--shadow-lg);
}
.tripCopy{padding:64px 58px}
.tripCopy h2{color:#fff}
.tripCopy .sub{color:#D6E4EF;margin-top:16px;max-width:none;font-size:1.08rem}
.tripNote{margin-top:26px;font-size:.85rem;color:#CFE0ED;border-left:2px solid var(--sand);padding-left:16px;line-height:1.55}
.tripSteps{background:rgba(9,32,52,.35);padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.tstep{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.tstep:last-child{border-bottom:none}
.tstep .n{
  width:32px;height:32px;flex:none;border-radius:50%;background:#fff;
  color:#1A5079;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;
}
.tstep b{display:block;color:#fff;font-size:.98rem;letter-spacing:-.01em}
.tstep p{font-size:.87rem;color:#C4D6E4;margin-top:2px}

/* process timeline */
.timeline{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px}
.pstep{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow)}
.pstep .n{
  font-weight:800;font-size:.76rem;letter-spacing:.1em;color:var(--blue);
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.pstep .n::after{content:"";height:1px;flex:1;background:var(--line)}
.pstep h3{font-size:1.02rem;margin-bottom:8px}
.pstep p{font-size:.87rem;color:var(--slate)}

/* pricing */
.priceRow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch;margin-top:52px}
.pricePart{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px 28px;box-shadow:var(--shadow)}
.pricePart .ic{width:34px;height:34px;stroke:var(--blue);margin-bottom:16px}
.pricePart h3{margin-bottom:8px}
.pricePart p{font-size:.88rem;color:var(--slate)}
.plus{display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#B7C6D6;padding:0 18px;font-weight:300}
.priceFoot{
  margin-top:30px;font-size:.94rem;color:var(--navy);font-weight:600;
  background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:18px 22px;
}

/* trust grid */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.plate{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:var(--shadow)}
.plate svg{width:30px;height:30px;stroke:var(--blue);margin-bottom:16px}
.plate h3{font-size:1rem;margin-bottom:8px}
.plate p{font-size:.88rem;color:var(--slate)}
.plate p + p{margin-top:8px}
.plate .mono{font-size:.78rem;color:#7A8CA0}
.standards{
  margin-top:44px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
}
.standards span{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.74rem;font-weight:600;color:var(--slate);
  border:1px solid var(--line);border-radius:999px;padding:8px 18px;background:var(--white);
}

/* spec tables (detail pages) */
.dHero{background:linear-gradient(180deg,#FFFFFF 0%,#F1EEE8 100%);padding:60px 0 64px;border-bottom:1px solid #E0DCD3;position:relative}
.dHero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--rust),var(--blue) 55%,transparent 85%)}
.dHero .photo{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-lg)}
.dHero .photo img{width:100%;max-width:460px;margin:0 auto;height:auto;display:block}
.dHero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.crumb{font-size:.82rem;color:var(--slate);margin-bottom:24px;font-weight:500}
.crumb a{color:var(--blue);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.dHero .iso{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--blue);font-size:.8rem;letter-spacing:.08em;margin-bottom:14px;font-weight:600}
.keyFacts{display:grid;grid-template-columns:repeat(4,auto);gap:14px;margin-top:34px}
.kf{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow)}
.kf .v{font-weight:800;font-size:1.18rem;color:var(--navy);letter-spacing:-.02em}
.kf .k{font-size:.7rem;color:var(--slate);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.dArt{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}

.specGrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px}
.specTable{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.specTable .tt{
  font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--navy);color:#fff;padding:13px 22px;
}
.specTable table{width:100%;border-collapse:collapse}
.specTable td{padding:12px 22px;font-size:.9rem;border-top:1px solid var(--line);vertical-align:top}
.specTable tr:first-child td{border-top:none}
.specTable td:first-child{color:var(--slate);width:46%;font-weight:500}
.specTable td:last-child{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.84rem;font-weight:600;color:var(--navy)}
.specNote{font-size:.82rem;color:var(--slate);margin-top:18px}

/* included lists */
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:8px}
.tick{list-style:none;margin-top:22px}
.tick li{padding:12px 0 12px 34px;border-bottom:1px solid var(--line);position:relative;font-size:.94rem}
.tick li::before{
  content:"";position:absolute;left:0;top:15px;width:19px;height:19px;border-radius:50%;
  background:#E7F2EC;
}
.tick li::after{
  content:"";position:absolute;left:5px;top:20px;width:9px;height:5px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}

/* quote form */
.quoteShell{
  display:grid;grid-template-columns:.9fr 1.35fr;gap:0;margin-top:52px;
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);
}
.quoteSide{background:linear-gradient(165deg,#152B3D,#1D3A52);color:#fff;padding:46px 42px}
.quoteSide h3{color:#fff;font-size:1.3rem;margin-bottom:10px}
.quoteSide p{color:#AEB9C0;font-size:.9rem}
.qnext{list-style:none;margin-top:30px}
.qnext li{display:flex;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.10);font-size:.88rem;color:#C6CFD5}
.qnext .n{width:26px;height:26px;flex:none;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid #5F6E79;color:#C6CFD5;font-weight:700;font-size:.76rem;display:flex;align-items:center;justify-content:center;margin-top:-1px}
.qnext b{color:#fff}
.quoteSide .sig{margin-top:34px;font-size:.78rem;color:#8994A0;border-top:1px solid rgba(255,255,255,.10);padding-top:20px}
form.quote{background:var(--white);padding:46px 44px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.78rem;font-weight:700;color:var(--navy);letter-spacing:.01em}
.field{min-width:0}
.frow>*{min-width:0}
.quoteShell,.quoteSide,form.quote{min-width:0}
.qnext li>div{min-width:0}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;min-width:0;
  font-family:inherit;font-size:.95rem;color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;background:#FBFCFE;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(61,90,108,.12);
}
form.quote .btn{width:100%;margin-top:28px;justify-content:center;padding:16px;font-size:1rem}
.formFoot{text-align:center;font-size:.8rem;color:var(--slate);margin-top:14px}
.sent{display:none;background:#EAF5EF;border:1.5px solid var(--ok);color:var(--ok);border-radius:10px;padding:14px 18px;margin-top:20px;font-size:.92rem;font-weight:600}

/* faq */
.faq{max-width:840px;margin:44px auto 0}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;padding:19px 24px;font-size:.98rem;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:16px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-weight:500;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 24px 20px;font-size:.9rem;color:var(--slate)}

/* CTA band */
.ctaBand{text-align:center}
.ctaBand h2{margin-bottom:14px}

/* footer */
footer{background:#152B3D;color:#8FA2B2;padding:70px 0 44px;font-size:.87rem}
.fGrid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;gap:48px}
footer .brand .word{color:#fff}
footer .fAbout{margin-top:16px;line-height:1.65;max-width:34ch}
footer h4{font-size:.74rem;font-weight:600;letter-spacing:.14em;color:#C6CFD5;margin-bottom:16px;text-transform:uppercase}
footer a{color:#93A0A9;text-decoration:none;display:block;padding:4px 0;transition:color .12s}
footer a:hover{color:#fff}
.fLegal{border-top:1px solid #2A455C;margin-top:52px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.77rem;color:#7A8791}

/* responsive */
@media (max-width:1080px){
  .hero .wrap,.dHero .wrap,.tripPanel,.quoteShell,.twoCol,.specGrid{grid-template-columns:1fr}
  .cards,.plates,.timeline{grid-template-columns:1fr 1fr}
  .trustbar .wrap{grid-template-columns:1fr 1fr}
  .tb{border-left:none;padding-left:0;border-top:1px solid var(--line)}
  .tb:nth-child(-n+2){border-top:none}
  .priceRow{grid-template-columns:1fr}
  .plus{padding:10px 0}
  .fGrid{grid-template-columns:1fr 1fr}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:20px 28px 28px;gap:18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg)}
  nav.main.open{display:flex}
  nav.main a.used{border-left:none;padding-left:0}
  .burger{display:block}
  .heroArt{max-width:520px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .heroArt svg{width:100%}
  .heroArt .glass{position:static}
  .keyFacts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .card .flag{position:static;display:inline-block;margin:0 0 12px;align-self:flex-start}
  .msBar{flex-direction:column;height:auto}
  .msBar .m1,.msBar .m2{padding:14px;font-size:.92rem}
  .keyFacts{grid-template-columns:1fr 1fr}
  .specTable td{padding:10px 14px;font-size:.85rem}
  .specTable td:first-child{width:40%}
  .cards,.plates,.timeline,.frow,.fGrid,.trustbar .wrap{grid-template-columns:1fr}
  .tb{border-top:1px solid var(--line)}
  .tb:first-child{border-top:none}
  section{padding:68px 0}
  .hero{padding:72px 0 84px}
  .tripCopy,.tripSteps,.quoteSide,form.quote{padding:36px 26px}
}

/* ===== additions: pages, person card, network, milestones, lang ===== */
select.lang{
  font-family:inherit;font-size:.82rem;font-weight:600;color:#33475C;
  border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;cursor:pointer;
}
.hero select.lang{display:none}

.pageHero{background:linear-gradient(180deg,#FFFFFF 0%,#F1EEE8 100%);padding:66px 0 58px;border-bottom:1px solid #E0DCD3;position:relative}
.pageHero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--rust),var(--blue) 55%,transparent 85%)}
.pageHero h1{font-size:clamp(2rem,4vw,2.9rem)}
.pageHero .sub{margin-top:16px}

.navyHero{background:linear-gradient(165deg,#13293D,#1B3B55);color:#fff;padding:72px 0 80px}
.navyHero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.1rem)}
.navyHero .sub{color:#AEB9C0;margin-top:18px}

.vtl{margin-top:52px;position:relative;padding-left:34px}
.vtl::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.vstep{position:relative;padding:0 0 38px 26px}
.vstep:last-child{padding-bottom:0}
.vstep::before{
  content:"";position:absolute;left:-27px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:4px solid var(--blue);
}
.vstep h3{margin-bottom:8px}
.vstep p{font-size:.93rem;color:var(--slate);max-width:64ch}
.vstep .docs{
  margin-top:14px;background:var(--mist);border:1px solid var(--line);border-radius:10px;
  padding:13px 17px;font-size:.84rem;color:var(--navy);
}
.vstep .docs b{color:var(--blue);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}

.milestones{margin-top:40px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.msBar{display:flex;border-radius:10px;overflow:hidden;margin:18px 0 10px;height:52px}
.msBar .m1{background:#3D5A6C;flex:7;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.msBar .m2{background:#1B2833;flex:3;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.msLegend{display:flex;justify-content:space-between;font-size:.84rem;color:var(--slate);gap:16px;flex-wrap:wrap}
.msNote{font-size:.8rem;color:var(--slate);margin-top:14px}

.person{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;letter-spacing:.02em}
.person h3{font-size:1.25rem}
.person .role{color:var(--slate);font-size:.9rem;margin:2px 0 12px}
.person .pc{display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem}
.person .pc a{color:var(--blue);text-decoration:none;font-weight:700}
.person .pc a:hover{text-decoration:underline}
.phNote{font-size:.76rem;color:#9AA9B8;margin-top:10px}

.factCard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.factCard h3{margin-bottom:14px}
.factCard table{width:100%;border-collapse:collapse}
.factCard td{padding:10px 0;font-size:.9rem;border-top:1px solid var(--line);vertical-align:top}
.factCard tr:first-child td{border-top:none}
.factCard td:first-child{color:var(--slate);width:40%}
.factCard td:last-child{font-weight:700;color:var(--navy)}
.factCard td .mono{font-weight:500;font-size:.82rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}

.netStats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.ns{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 22px;box-shadow:var(--shadow);text-align:center}
.ns .v{font-weight:800;font-size:1.7rem;color:var(--navy);letter-spacing:-.02em}
.ns .k{font-size:.78rem;color:var(--slate);font-weight:600;margin-top:4px}
.netList{margin-top:36px}

.routeDiag{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:0;align-items:center;margin-top:44px}
.rNode{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 18px;text-align:center;box-shadow:var(--shadow)}
.rNode b{display:block;color:var(--navy);font-size:.95rem}
.rNode span{font-size:.78rem;color:var(--slate)}
.rArrow{color:var(--blue);font-size:1.3rem;padding:0 12px;font-weight:700}

.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.inclCard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.inclCard.head-ok h3{color:var(--ok)}
.inclCard.head-no h3{color:var(--slate)}
.xlist{list-style:none;margin-top:14px}
.xlist li{padding:10px 0 10px 30px;border-bottom:1px solid var(--line);position:relative;font-size:.9rem;color:var(--slate)}
.xlist li::before{content:"—";position:absolute;left:2px;color:#B7C6D6;font-weight:700}

.honest{margin-top:44px;border-left:4px solid var(--blue);background:var(--mist);border-radius:0 14px 14px 0;padding:26px 30px}
.honest h3{margin-bottom:10px}
.honest p{font-size:.92rem;color:var(--slate)}
.honest p + p{margin-top:10px}
.honest b{color:var(--navy)}

.stack{margin:0 auto}

@media (max-width:1080px){
  .grid2,.split{grid-template-columns:1fr}
  .netStats{grid-template-columns:1fr 1fr}
  .routeDiag{grid-template-columns:1fr;gap:8px}
  .rArrow{transform:rotate(90deg);text-align:center;padding:2px 0}
}
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .card .flag{position:static;display:inline-block;margin:0 0 12px;align-self:flex-start}
  .msBar{flex-direction:column;height:auto}
  .msBar .m1,.msBar .m2{padding:14px;font-size:.92rem}
  .keyFacts{grid-template-columns:1fr 1fr}
  .specTable td{padding:10px 14px;font-size:.85rem}
  .specTable td:first-child{width:40%}
  .netStats{grid-template-columns:1fr 1fr}
  .person{grid-template-columns:1fr;text-align:left}
}

.fSilknet{text-align:center;margin-top:20px;font-size:.82rem;color:#A9BCCB}
.fSilknet a{color:#D6E4EF;text-decoration:none;font-weight:600}
.fSilknet a:hover{text-decoration:underline}

/* ===== motion & card polish ===== */
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
.hero .wrap>div:first-child>*{animation:riseIn .8s cubic-bezier(.16,.84,.3,1) both}
.hero .wrap>div:first-child>*:nth-child(1){animation-delay:.05s}
.hero .wrap>div:first-child>*:nth-child(2){animation-delay:.15s}
.hero .wrap>div:first-child>*:nth-child(3){animation-delay:.25s}
.hero .wrap>div:first-child>*:nth-child(4){animation-delay:.35s}
.heroArt{animation:riseIn .9s .2s cubic-bezier(.16,.84,.3,1) both}


.card{overflow:hidden}
.cardPhoto{overflow:hidden}
.cardPhoto img{transition:transform .5s cubic-bezier(.16,.84,.3,1)}
.card:hover .cardPhoto img{transform:scale(1.06)}
.card .go{transition:transform .25s ease}
.card:hover .go{transform:translateX(5px)}



.btn{transition:transform .18s ease,opacity .15s ease,box-shadow .18s ease}
.btn:hover{transform:none;box-shadow:none}
.faq details{transition:transform .2s ease}
.faq details[open]{transform:none;box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){
  .hero .wrap>div:first-child>*,.heroArt,.heroArt .photo,.heroArt .glass{animation:none}
  .tripPanel::after{animation:none;display:none}
  .cardPhoto img,.card .go,.plate,.ns,.pstep,.inclCard,.btn{transition:none}
}

/* ===== how-it-works: steps as cards ===== */
.vtl{padding-left:38px}
.vtl::before{left:16px;background:linear-gradient(180deg,var(--blue),#B9D2E6)}
.vstep{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px;margin-bottom:26px;box-shadow:var(--shadow)}
.vstep:last-child{margin-bottom:0}
.vstep::before{left:-31px;top:30px;border-color:var(--blue)}


/* ===== comparison (responsive cards) ===== */
.cmp{margin-top:48px;display:flex;flex-direction:column;gap:14px}
.cmpHead{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:14px}
.cmpHead>div{font-size:.82rem;font-weight:700;color:var(--navy);padding:14px 18px;background:var(--mist);border:1px solid var(--line);border-radius:12px}
.cmpHead>div span{display:block;font-weight:500;color:var(--slate);font-size:.76rem}
.cmpHead .us{background:var(--blue);color:#fff;border-color:var(--blue)}
.cmpHead .us span{color:#CFE2F0}
.cmpRow{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:14px}
.cmpRow .crit{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rust);grid-column:1/-1;margin:8px 2px 0}
.cmpRow>div:not(.crit){background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;font-size:.87rem;color:var(--slate)}
.cmpRow .lbl{display:none;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9AA5AD;margin-bottom:4px}
.cmpRow .us{background:#EEF4F8;border-color:#C8DAE7;color:var(--navy);font-weight:600}
.cmpFoot{background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:.85rem;color:var(--slate)}
@media (max-width:900px){
  .cmpHead{display:none}
  .cmpRow{grid-template-columns:1fr}
  .cmpRow .lbl{display:block}
}

@media (max-width:400px){
  .wrap{padding:0 18px}
  h1{font-size:1.9rem}
  h2{font-size:1.45rem}
  .heroFacts{gap:20px}
  .keyFacts{grid-template-columns:1fr 1fr;gap:10px}
  .kf{padding:11px 13px}
  .tripCopy,.tripSteps,.quoteSide,form.quote{padding:30px 20px}
  .plates{grid-template-columns:1fr !important}
}
@media (min-width:641px) and (max-width:1080px){
  .timeline{grid-template-columns:1fr 1fr}
  .plates{grid-template-columns:1fr 1fr !important}
}

.timeline.steps4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.timeline.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.timeline.steps4{grid-template-columns:1fr}}

.heroArt img.heroCut{width:100%;height:auto;max-width:600px;margin:0 auto;display:block;filter:drop-shadow(0 22px 34px rgba(20,30,40,.16))}

/* ===== nav dropdown ===== */
.navDrop{position:relative;display:flex;align-items:center}
.navDrop>a .caret{font-size:.7em;opacity:.55;margin-left:2px}
.dropMenu{position:absolute;top:calc(100% + 4px);left:-16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:230px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.navDrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.navDrop:hover .dropMenu,.navDrop:focus-within .dropMenu{opacity:1;visibility:visible;transform:none}
.dropMenu a{display:block;padding:10px 14px;border-radius:8px;font-size:.9rem;color:var(--ink) !important;text-decoration:none;font-weight:500}
.dropMenu a:hover{background:var(--mist)}
.dropMenu .dropAll{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;color:var(--blue) !important;font-weight:600}
@media (max-width:1080px){
  .navDrop{flex-direction:column;align-items:flex-start}
  .dropMenu{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;padding:2px 0 4px 16px;min-width:0;display:flex;flex-direction:column;gap:2px}
  .dropMenu a{padding:7px 0}
  .dropMenu .dropAll{border-top:none;margin-top:0}
  .navDrop::after{display:none}
}

/* ===== product photo gallery ===== */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:0}
.shot{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px 14px;text-align:center;box-shadow:var(--shadow)}
.shot img{width:100%;height:190px;object-fit:contain;display:block}
.shot span{display:block;margin-top:10px;font-size:.8rem;color:var(--slate);font-weight:600;letter-spacing:.02em}
@media (max-width:820px){.shots{grid-template-columns:1fr}.shot img{height:220px}}

/* --- form wiring (generated) --------------------------------------------- */
.hp{display:none!important}
.ferr{display:none;background:#FBEDE7;border:1.5px solid var(--rust);color:var(--rust);
  border-radius:10px;padding:14px 18px;margin-top:20px;font-size:.92rem;font-weight:600}
form.quote .btn[disabled]{opacity:.55;cursor:default}

/* The used-containers grade grid carries its four columns as an inline style,
   which outranks the responsive rules and pushed the page 8px wide at 320px.
   Only !important can outrank an inline declaration. */
@media (max-width:1080px){.cards[style]{grid-template-columns:1fr 1fr !important}}
@media (max-width:640px){.cards[style]{grid-template-columns:1fr !important}}
[dir="rtl"] .dropMenu{left:auto;right:-16px}
[dir="rtl"] nav.main{margin-left:0;margin-right:auto}
[dir="rtl"] .navDrop>a .caret{margin-left:0;margin-right:2px}
[dir="rtl"] .sub{margin-left:0}
[dir="rtl"] .center .sub{margin-left:auto;margin-right:auto}

/* Latin-script technical values — 40' x 8' x 9'6", 12.192 m / 40'0", 22G1 — are
   bidi-neutral apart from their quote marks, so an RTL paragraph direction
   reorders them into nonsense. Lay them out left-to-right, still flush to the
   RTL edge. */
[dir="rtl"] .dims,[dir="rtl"] .code,[dir="rtl"] .kf .v,
[dir="rtl"] .hf .v,[dir="rtl"] .ns .v,[dir="rtl"] .card ul li span:last-child,
[dir="rtl"] .specTable td+td,[dir="rtl"] .standards span{direction:ltr;text-align:right}
/* .iso and .crumb are translated prose with Latin codes embedded: keep the
   paragraph RTL and isolate the Latin runs rather than flipping the whole line. */
[dir="rtl"] .iso,[dir="rtl"] .crumb{unicode-bidi:isolate}
[dir="rtl"] .crumb a{unicode-bidi:isolate}