/* ============================================================
   PT Shark Capital Investment - site.css
   Faithful reproduction of the design handoff (Home v1).
   Section A: exact rules from the prototype <style> block.
   Section B: hover/focus rules replacing the prototype's
              style-hover / style-focus attributes.
   ============================================================ */

/* ============================ SECTION A ============================ */
*{box-sizing:border-box}
body{margin:0}
.sc-hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
select,input,button,textarea{font-family:inherit}
select,input{outline:none}
img{max-width:100%}

@keyframes scFlow{to{stroke-dashoffset:-320}}
@keyframes scPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
@keyframes scTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scTravel{0%{left:6%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:94%;opacity:0}}
@keyframes scTravelY{0%{top:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:92%;opacity:0}}
@keyframes scFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes scKenBurns{0%{transform:scale(1.08) translate(0,0)}50%{transform:scale(1.16) translate(-1.6%,-1.4%)}100%{transform:scale(1.08) translate(0,0)}}
#scHome .r-partner-band:hover .r-partner-bg{animation-duration:14s;opacity:.72}
#scHome .r-partner-bg{animation:scKenBurns 26s ease-in-out infinite;transition:opacity .6s ease,animation-duration .6s ease;will-change:transform}
@keyframes scChatIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes scRing{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}
@keyframes scSheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
#scHome .r-gw-cta{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;background:linear-gradient(120deg,#0c2f59,#13427a 55%,#0c2f59);color:#fff;border:1px solid rgba(242,194,0,.55);border-radius:10px;padding:12px 22px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 10px 26px -14px rgba(12,47,89,.9);transition:transform .25s,box-shadow .25s,border-color .25s}
#scHome .r-gw-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(12,47,89,.95);border-color:#F2C200}
#scHome .r-gw-cta::before{content:"";position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:scSheen 3.6s ease-in-out infinite;pointer-events:none}
#scHome .r-gw-cta .r-gw-arrow{display:flex;transition:transform .3s}
#scHome .r-gw-cta:hover .r-gw-arrow{transform:translateX(4px)}
#scHome .r-s1item{transition:transform .2s}
#scHome .r-s1item:hover{transform:translateX(3px)}
#scHome .r-chatfablabel{opacity:0;transform:translateX(10px);transition:opacity .25s,transform .25s;pointer-events:none}
#scHome .r-chatfab:hover .r-chatfablabel{opacity:1;transform:translateX(0)}
@keyframes scBlink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes scGridDrift{from{background-position:0 0,0 0}to{background-position:46px 46px,46px 46px}}
@keyframes scScan{0%{transform:translateY(-100%)}100%{transform:translateY(420%)}}
@keyframes scOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
image-slot{display:block}
.sc-reveal{opacity:0;transform:translateY(32px);transition:opacity .85s cubic-bezier(.22,.7,.2,1),transform .85s cubic-bezier(.22,.7,.2,1);will-change:opacity,transform}
.sc-reveal.in{opacity:1;transform:none}
.sc-zoom{overflow:hidden}
.sc-zoom image-slot,.sc-zoom img{transition:transform 1s cubic-bezier(.22,.7,.2,1)}
.sc-zoom:hover image-slot,.sc-zoom:hover img{transform:scale(1.07)}
#scHome .r-solimg{transition:transform 1.1s cubic-bezier(.22,.7,.2,1)}
#scHome .r-sol-live img{animation:scKenBurns 22s ease-in-out infinite}
#scHome .r-csrcard:hover{transform:translateY(-6px);border-color:rgba(242,194,0,.5);box-shadow:0 24px 50px -34px rgba(10,42,78,.5)}
#scHome .r-careerstrip:hover{transform:translateY(-3px);box-shadow:0 34px 70px -40px rgba(10,42,78,.7)}
#scHome .r-careerstrip::before{content:"";position:absolute;right:-10%;top:-40%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(242,194,0,.14),transparent 66%);pointer-events:none}
#scHome .r-expcard{position:relative;overflow:hidden;background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:26px 24px 28px;transition:transform .4s cubic-bezier(.22,.7,.2,1),box-shadow .4s,border-color .4s}
#scHome .r-expcard::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:#F2C200;transition:width .5s cubic-bezier(.22,.7,.2,1)}
#scHome .r-expcard:hover{transform:translateY(-8px);border-color:#F2C200;box-shadow:0 30px 60px -42px rgba(10,42,78,.55)}
#scHome .r-expcard:hover::before{width:100%}
#scHome .r-expwm{position:absolute;right:-4px;bottom:-22px;font-family:'Marcellus',serif;font-size:96px;line-height:1;color:#0A2A4E;opacity:.05;pointer-events:none;transition:opacity .4s,transform .4s}
#scHome .r-expcard:hover .r-expwm{opacity:.09;transform:translate(-6px,-6px)}
#scHome .r-expnum{transition:color .4s}
#scHome .r-expcard:hover .r-expnum{color:#1C5FA8}
#scHome .r-exparrow{transition:transform .35s,opacity .35s,background .35s,color .35s,border-color .35s}
#scHome .r-expcard:hover .r-exparrow{transform:translate(3px,-3px);background:#F2C200;color:#0A2A4E;border-color:#F2C200}

/* ====== MOBILE MENU ====== */
#scHome .r-menubtn{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border:1px solid #e6ebf2;border-radius:8px;background:#fff;color:#0A2A4E;cursor:pointer;padding:0}
#scHome .r-menubtn.open .r-mb-bars{display:none !important}
#scHome .r-menubtn.open .r-mb-x{display:block !important}
#scHome .r-mobilenav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid #e6ebf2;box-shadow:0 22px 34px -22px rgba(10,42,78,.35);padding:8px 20px 16px}
#scHome .r-mobilenav a{display:block;padding:14px 4px;font-size:15px;font-weight:600;color:#0A2A4E;text-decoration:none;border-bottom:1px solid #eef2f7}
#scHome .r-mobilenav a:last-child{border-bottom:0}

/* ====== TABLET (<=900px) ====== */
@media (max-width:900px){
  #scHome .r-menubtn{display:flex}
  #scHome .r-hdr-right{gap:12px !important}
  #scHome .r-mobilenav.open{display:flex}
  #scHome .r-about{grid-template-columns:1fr !important;gap:36px !important;margin-bottom:48px !important}
  #scHome .r-vm{grid-template-columns:1fr !important}
  #scHome .r-g4{grid-template-columns:repeat(2,1fr) !important}
  #scHome .r-csrgrid{grid-template-columns:repeat(2,1fr) !important}
  #scHome .r-csrgrid > .r-csrcard:last-child:nth-child(odd){grid-column:1 / -1 !important;justify-self:center !important;width:calc(50% - 7px)}
  #scHome .r-g3{grid-template-columns:repeat(2,1fr) !important}
  #scHome .r-g5{grid-template-columns:repeat(2,1fr) !important;border-top:0 !important}
  #scHome .r-g5 > *{border-right:0 !important;border-top:1px solid #e6ebf2 !important}
  #scHome .r-bridge{grid-template-columns:1fr !important;gap:14px !important}
  /* Shark One: drop the animated blue grid + network lines on small screens
     (the yellow bridge connector below stays) */
  #scHome .r-s1grid,#scHome .r-s1net{display:none !important}
  /* stacked bridge: turn the horizontal dashed connector into a vertical one
     that spans the row gaps, so Indonesia -> Shark One -> Global Markets stay linked */
  #scHome .r-bridgemid{padding:36px 8px !important;min-height:250px}
  #scHome .r-bridgeline{left:50% !important;right:auto !important;top:-14px !important;bottom:-14px !important;height:auto !important;width:2px !important;margin-left:-1px;background:repeating-linear-gradient(180deg,rgba(242,194,0,.55) 0 8px,transparent 8px 16px) !important}
  #scHome .r-bridgedot{left:50% !important;top:auto;transform:translateX(-50%) !important;animation:scTravelY 3.4s ease-in-out infinite !important}
  #scHome .r-masonry{flex-wrap:wrap !important}
  #scHome .r-mascol{flex:1 1 calc(50% - 8px) !important}
  #scHome .r-contact{grid-template-columns:1fr !important}
  #scHome .r-formrow{grid-template-columns:1fr !important}
  #scHome .r-fieldset{flex-wrap:wrap !important}
  #scHome .r-fieldset > label{flex:1 1 calc(50% - 9px) !important}
  #scHome .r-poprow{grid-template-columns:1fr !important}
  #scHome .r-footer{grid-template-columns:1fr 1fr !important;gap:28px !important}
  #scHome .r-nav{display:none !important}
  #scHome .r-accordion{flex-direction:column !important;height:auto !important;gap:10px !important;padding:0 16px 16px !important}
  #scHome .r-accordion > *{flex:none !important;height:188px !important;border-radius:12px !important;transition:height .55s cubic-bezier(.22,.7,.2,1) !important}
  /* the open panel needs room for its description + Learn More row */
  #scHome .r-accordion > .is-active{height:360px !important}
  #scHome .r-partner-caps{gap:34px !important}
  #scHome .r-hero-stage{left:0 !important}
  #scHome .r-hero-map,#scHome .r-hero-rays{top:0 !important;transform:none !important;width:100% !important;height:100% !important}
  #scHome .r-hero-map{object-fit:cover;object-position:center}
  #scHome .r-hero-content{padding:48px 40px !important}
  #scHome .r-hero-content::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,47,.5),rgba(6,24,47,.72));z-index:-1}
  #scHome .r-hero-formwrap{padding:0 24px 48px !important}
  #scHome .r-hero-section{padding:0 !important}
  #scHome .r-gallery{height:440px !important}
  #scHome .r-prodgrid{grid-template-columns:1fr !important}
  #scHome .r-prodwin-body{grid-template-columns:1fr !important}
  #scHome .r-prodmenu{display:none !important}
  #scHome .r-partner-quote{font-size:32px !important}
}

/* ====== PHONE (<=600px) ====== */
@media (max-width:600px){
  #scHome .r-topbar-inner{padding:0 16px !important;height:auto !important;min-height:40px !important;flex-wrap:wrap !important;gap:6px 14px !important;justify-content:center !important}
  #scHome .r-tb-left{display:none !important}
  #scHome .r-header{padding:0 16px !important;height:64px !important}
  #scHome .r-logo{height:36px !important}
  #scHome .r-hdr-right{gap:10px !important}
  #scHome .r-header .r-loginbtn{padding:10px 14px !important;font-size:13px !important}
  #scHome .r-header button{padding:10px 16px !important;font-size:13px !important}
  #scHome .r-header .r-menubtn{padding:0 !important;width:40px !important;height:40px !important}

  #scHome .r-hero-inner{height:auto !important;min-height:560px !important}
  #scHome .r-hero-top{min-height:380px !important}
  #scHome .r-hero-stage{left:0 !important}
  #scHome .r-hero-content{position:relative !important;padding:36px 18px 28px !important;gap:22px !important}
  #scHome .r-hero-content::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,47,.55),rgba(6,24,47,.8));z-index:-1}
  #scHome .r-hero-formwrap{padding:0 18px 36px !important}
  #scHome .r-hero-tag{height:auto !important;min-height:300px !important;max-width:none !important}
  #scHome .r-hero-tag > *{position:relative !important;display:none !important}
  #scHome .r-hero-tag > .is-active{display:flex !important}
  #scHome .r-hero-tag h1{font-size:33px !important}
  #scHome .r-hero-tag p{font-size:15px !important;margin-top:14px !important}
  #scHome .r-tabs{flex-wrap:wrap !important}
  #scHome .r-tabs > *{flex:1 1 44% !important}
  #scHome .r-formrow{flex-direction:column !important;align-items:stretch !important;gap:14px !important}
  #scHome .r-fieldset{flex-direction:column !important;gap:14px !important}
  #scHome .r-fieldset > label{flex:1 1 auto !important}
  #scHome .r-formrow > button{width:100% !important;margin-top:0 !important;justify-content:center !important}

  #scHome .r-g4,#scHome .r-g3,#scHome .r-g5{grid-template-columns:1fr !important}
  #scHome .r-hero-section{padding:0 !important}
  #scHome .r-partner-band{min-height:auto !important}
  #scHome .r-partner-inner{min-height:auto !important;padding:54px 18px 0 !important}
  #scHome .r-partner-quote{font-size:25px !important;line-height:1.34 !important}
  #scHome .r-gallery{height:420px !important}
  #scHome .r-gallery-cap{left:22px !important;right:22px !important;max-width:none !important}
  #scHome .r-gallery-cap > div:nth-child(2){font-size:24px !important}
  #scHome .r-bridge > div:last-child{text-align:left !important}
  #scHome .r-bridge > div:last-child > div:last-child{align-items:flex-start !important}
  #scHome .r-partner-caps{gap:18px 24px !important;padding:34px 0 28px !important}
  #scHome .r-partner-caps > div{width:104px !important}
  #scHome .r-mascol{flex:1 1 100% !important}
  #scHome .r-footer{grid-template-columns:1fr !important}

  #scHome section{padding-left:18px !important;padding-right:18px !important;padding-top:60px !important;padding-bottom:60px !important}
  /* the market-watch ticker is a full-bleed strip - the generic section
     padding above gave it huge dead space on phones */
  #scHome section.r-ticker{padding:0 !important}
  #scHome .r-footer-wrap{padding-left:20px !important;padding-right:20px !important}
  #scHome h1{letter-spacing:-.3px !important}
  #scHome h2{font-size:30px !important}
}

/* ============================ SECTION B ============================ */
/* Hover / focus states - these replace the prototype's inline
   style-hover="…" and style-focus="…" attributes verbatim. */
#scHome .r-loginbtn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(242,194,0,.75)}
#scHome .r-goldbtn{transition:transform .25s,box-shadow .25s}
#scHome .r-goldbtn:hover{transform:translateY(-2px)}
#scHome .r-navybtn{transition:transform .25s}
#scHome .r-navybtn:hover{transform:translateY(-2px)}
#scHome .r-valuepill{transition:transform .25s,background .25s}
#scHome .r-valuepill:hover{transform:translateY(-3px);background:#e2eefb}
#scHome .r-missioncard{transition:transform .3s,box-shadow .3s}
#scHome .r-missioncard:hover{transform:translateX(6px);box-shadow:0 18px 40px -34px rgba(10,42,78,.6)}
#scHome .r-modcard{transition:transform .3s,background .3s,border-color .3s}
#scHome .r-modcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(242,194,0,.4)}
#scHome .r-toolpill{transition:transform .25s,border-color .25s}
#scHome .r-toolpill:hover{transform:translateY(-3px);border-color:rgba(242,194,0,.4)}
#scHome .r-galarrow{transition:all .25s}
#scHome .r-galarrow:hover{background:#0A2A4E;color:#fff;border-color:#0A2A4E}
#scHome .r-whycell{transition:background .3s}
#scHome .r-whycell:hover{background:#fff}
#scHome .r-csrcta{transition:transform .25s}
#scHome .r-csrcta:hover{transform:translateY(-2px)}
#scHome .r-cinput{transition:border-color .2s}
#scHome .r-cinput:focus{border-color:#1C5FA8}
#scHome .r-footlink{transition:color .2s,padding-left .2s}
#scHome .r-footlink:hover{color:#fff;padding-left:5px}
#scHome .r-social{transition:background .2s,color .2s,border-color .2s}
/* !important beats the inline color:#aebfd4 on the anchor - without it the
   pale icon vanished against the gold hover background. */
#scHome .r-social:hover{background:#F2C200;color:#0A2A4E !important;border-color:#F2C200}
#scHome .r-leglink{transition:color .2s}
#scHome .r-leglink:hover{color:#fff}
#scHome .r-chatquick{transition:all .2s}
#scHome .r-chatquick:hover{background:#1C5FA8;color:#fff;border-color:#1C5FA8}
#scHome .r-chatfab-btn{transition:transform .25s}
#scHome .r-chatfab-btn:hover{transform:scale(1.07)}

/* ============================ SECTION C ============================ */
/* Home component states - replace the prototype's React state-driven
   inline styles (hero carousel, tabs, accordion, gallery) with classes
   toggled by js/site.js. */

/* Hero text carousel */
#scHome .r-hslide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.22,.7,.2,1),transform .8s cubic-bezier(.22,.7,.2,1);pointer-events:none}
#scHome .r-hslide.is-active{opacity:1;transform:none;pointer-events:auto}

/* Hero service tabs */
#scHome .r-tab{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#dbe7f6;font-size:13px;font-weight:600;padding:9px 16px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
#scHome .r-tab:hover{border-color:rgba(242,194,0,.5)}
#scHome .r-tab.is-active{background:#F2C200;color:#0A2A4E;border-color:#F2C200}

/* Hero + gallery slide dots */
#scHome .r-hdot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.32);cursor:pointer;transition:all .3s;padding:0}
#scHome .r-hdot.is-active{width:26px;border-radius:5px;background:#F2C200}
#scHome .r-galdot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s;padding:0}
#scHome .r-galdot.is-active{width:26px;border-radius:5px;background:#F2C200}

/* Hero field "other" custom-input toggle */
#scHome .r-fieldset{display:none;gap:18px;flex:1}
#scHome .r-fieldset.is-active{display:flex}

/* Solutions expanding accordion */
#scHome .r-solpanel{position:relative;flex:1 1 0;min-width:0;border-radius:14px;overflow:hidden;cursor:pointer;transition:flex .6s cubic-bezier(.22,.7,.2,1)}
#scHome .r-solpanel.is-active{flex:2.6 1 0}
#scHome .r-solimg-wrap{position:absolute;inset:0;overflow:hidden}
#scHome .r-solpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.7,.2,1)}
#scHome .r-solpanel.is-active img{transform:scale(1.06)}
#scHome .r-soldesc{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.22,.7,.2,1),opacity .5s}
#scHome .r-solpanel.is-active .r-soldesc{max-height:260px;opacity:1}

/* Trade-in-motion gallery slider */
#scHome .r-galslide{position:absolute;inset:0;opacity:0;transition:opacity .8s cubic-bezier(.22,.7,.2,1);pointer-events:none}
#scHome .r-galslide.is-active{opacity:1;pointer-events:auto}

/* ============================================================
   SECTION D - COMING SOON (scSoon)
   Ported from "Shark Capital Coming Soon.dc.html" <style> block.
   ============================================================ */
#scSoon ::selection{background:#F2C200;color:#0A2A4E}
@keyframes scDrift{0%{transform:translate(0,0)}50%{transform:translate(-18px,10px)}100%{transform:translate(0,0)}}
@keyframes scDash{to{stroke-dashoffset:-40}}
@keyframes scRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes scSoonPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
@keyframes scSoonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
#scSoon .rise{opacity:0;animation:scRise .8s cubic-bezier(.22,.7,.2,1) forwards}
#scSoon .r1{animation-delay:.05s}#scSoon .r2{animation-delay:.16s}#scSoon .r3{animation-delay:.27s}#scSoon .r4{animation-delay:.38s}#scSoon .r5{animation-delay:.5s}
#scSoon .waBtn:hover{transform:translateY(-3px);box-shadow:0 20px 38px -16px rgba(37,211,102,.7)}
#scSoon .primaryBtn{transition:transform .25s,box-shadow .25s}
#scSoon .primaryBtn:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(242,194,0,.75)}
#scSoon .ghostBtn{transition:background .2s,border-color .2s}
#scSoon .ghostBtn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
#scSoon .waFloat{transition:transform .2s}
#scSoon .waFloat:hover{transform:scale(1.07)}
#scSoon .r-helpcard{transition:border-color .2s,background .2s}
#scSoon .r-helpcard.email:hover{border-color:rgba(242,194,0,.5);background:rgba(242,194,0,.06)}
#scSoon .r-helpcard.wa:hover{border-color:rgba(37,211,102,.6);background:rgba(37,211,102,.14)}
@media (max-width:720px){
  #scSoon .r-wrap{padding:40px 22px 60px !important}
  #scSoon .r-h1{font-size:44px !important}
  #scSoon .r-btns{flex-direction:column !important;align-items:stretch !important}
  #scSoon .r-help{grid-template-columns:1fr !important}
  #scSoon .r-header{padding:0 18px !important}
}

/* ============================================================
   SECTION E - CSR (reuses #scHome chrome)
   Ported from "Shark Capital CSR.dc.html" <style> block.
   ============================================================ */
#scHome .csr-pill{transition:transform .35s,border-color .35s,box-shadow .35s}
#scHome .csr-pill:hover{transform:translateY(-6px);border-color:rgba(242,194,0,.5);box-shadow:0 26px 54px -34px rgba(10,42,78,.5)}
#scHome .csr-appr{transition:transform .3s,border-color .3s}
#scHome .csr-appr:hover{transform:translateY(-4px);border-color:rgba(28,95,168,.4)}
#scHome .csr-cta-gold{transition:transform .25s}
#scHome .csr-cta-gold:hover{transform:translateY(-2px)}
#scHome .csr-cta-ghost{transition:background .25s}
#scHome .csr-cta-ghost:hover{background:rgba(255,255,255,.18)}
@media (max-width:940px){
  #scHome .r-pillgrid{grid-template-columns:1fr !important}
  #scHome .r-apprgrid{grid-template-columns:1fr !important}
  #scHome .r-csrhero{padding:56px 22px 44px !important}
  #scHome .r-csrsec{padding:56px 22px !important}
  #scHome .r-focus{grid-template-columns:1fr !important}
}
@media (max-width:430px){ #scHome .r-csrhero h1{font-size:40px !important} }

/* ============================================================
   SECTION F - CAREERS (reuses #scHome chrome)
   Ported from "Shark Capital Careers.dc.html" <style> block.
   ============================================================ */
#scHome .cbtn{transition:transform .25s,box-shadow .25s}
#scHome .cbtn:hover{transform:translateY(-2px)}
#scHome .dept{transition:transform .35s,border-color .35s,box-shadow .35s;cursor:pointer}
#scHome .dept:hover{transform:translateY(-5px);border-color:rgba(242,194,0,.5);box-shadow:0 26px 54px -36px rgba(10,42,78,.5)}
#scHome .val{transition:transform .3s,border-color .3s}
#scHome .val:hover{border-color:rgba(28,95,168,.4);transform:translateY(-4px)}
#scHome .stepdot{transition:background .3s,color .3s,border-color .3s}
#scHome .car-ghost{transition:background .25s}
#scHome .car-ghost:hover{background:rgba(255,255,255,.18)}
#scHome .faq-q{cursor:pointer}
#scHome .faq-a{display:none}
#scHome .faq-q.is-open .faq-a{display:block}
@media (max-width:940px){
  #scHome .r-two{grid-template-columns:1fr !important}
  #scHome .r-deptgrid{grid-template-columns:1fr 1fr !important}
  #scHome .r-valgrid{grid-template-columns:1fr !important}
  #scHome .r-carhero{padding:56px 22px !important}
  #scHome .r-carsec{padding:56px 22px !important}
  #scHome .r-steprow{flex-direction:column !important;align-items:flex-start !important;gap:18px !important}
}
@media (max-width:560px){ #scHome .r-deptgrid{grid-template-columns:1fr !important} }
@media (max-width:430px){ #scHome .r-carhero h1{font-size:38px !important} #scHome .cbtn.r-hidesm{display:none !important} }

/* ============================================================
   SECTION G - LEGAL (reuses #scHome chrome)
   Ported from "Shark Capital Legal.dc.html" <style> block.
   Doc switching handled in js/site.js (initLegal).
   ============================================================ */
#scHome .legal-navlink{display:flex;align-items:center;gap:6px;text-decoration:none;font-size:14px;font-weight:500;color:#5a6b81;background:transparent;border:1px solid transparent;border-left:3px solid transparent;border-radius:9px;padding:11px 13px;transition:background .2s,color .2s}
#scHome .legal-navlink .legal-num{font-family:'Marcellus',serif;font-size:15px;width:30px;flex:none;color:#9aa9bd}
#scHome .legal-navlink.is-active{font-weight:600;color:#0A2A4E;background:#fff;border:1px solid #e6ebf2;border-left:3px solid #F2C200;box-shadow:0 6px 18px -12px rgba(6,24,47,.4)}
#scHome .legal-navlink.is-active .legal-num{color:#b08900}
#scHome .legal-doc{display:none}
#scHome .legal-doc.is-active{display:block}
#scHome .legal-next{transition:transform .2s}
#scHome .legal-next:hover{transform:translateY(-2px)}
@media (max-width:920px){
  #scHome .r-grid{grid-template-columns:1fr !important}
  #scHome .r-side{position:static !important;border-right:0 !important;border-bottom:1px solid #e6ebf2 !important;padding-bottom:8px !important}
  #scHome .r-content{padding:40px 22px !important}
  #scHome .r-leghero{padding:48px 22px 36px !important}
  #scHome .r-metarow{flex-direction:column !important;gap:8px !important;align-items:flex-start !important}
}
@media (max-width:820px){ #scHome .r-side{top:0 !important} }
@media (max-width:430px){ #scHome .r-leghero h1{font-size:34px !important} }

/* ============================================================
   SECTION H - CROSS-DEVICE HARDENING, PHONE INPUT, COOKIE CONSENT
   (added in the responsive/compat + consent pass)
   ============================================================ */

/* --- H1. Base compatibility hardening --------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* kills stray horizontal scroll without breaking position:sticky */
#scHome .r-tb-left span{white-space:nowrap} /* phone/email must not wrap at hyphens */

/* --- H2. intl-tel-input integration ----------------------------------- */
.iti{width:100%}
.iti input.sc-tel{width:100%}
.iti--container{z-index:150} /* above the enquiry popup (120) and confirm (130) */
/* the country dropdown is appended to <body>, outside #scHome where the
   site font is set - give it the same face as the form labels */
.iti--container,.iti__country-list,.iti__search-input,.iti input{font-family:'Hanken Grotesk',sans-serif}

/* --- H3. Image animation completion ------------------------------------ */
/* Gallery slider: slow Ken Burns on the active slide's photo (the slides
   previously only crossfaded; the photos themselves were static). */
#scHome .r-galslide img{will-change:transform}
#scHome .r-galslide.is-active img{animation:scKenBurns 18s ease-in-out infinite}

/* --- H4. iOS: prevent focus auto-zoom (inputs must be >=16px) ---------- */
@media (max-width:600px){
  #scHome input:not(.sc-hp),#scHome select,#scHome textarea{font-size:16px !important}
}

/* --- H5. Small phones (<=600px / <=430px) ------------------------------ */
@media (max-width:600px){
  #scHome .r-tick-note{display:none !important}         /* give the ticker its space back */
  #scHome .r-ccgrid{grid-template-columns:1fr !important} /* contact info cards: stop ugly word-breaks */
  #scHome .r-two > *{min-width:0}
}
@media (max-width:430px){
  #scChatPanel{width:calc(100vw - 32px) !important;height:min(70vh,520px) !important;max-width:368px}
  #scHome .r-loginbtn{padding:10px 14px !important;font-size:13px !important}
  #scPopup,#scConfirm{padding:12px !important}
  #scPopupFields{padding:20px 18px 24px !important}
}

/* --- H6. Fold / flip cover screens (<=380px, down to 280px) ------------ */
@media (max-width:380px){
  #scHome section{padding-left:14px !important;padding-right:14px !important}
  #scHome h2{font-size:25px !important}
  #scHome .r-hero-content{padding:28px 14px 22px !important}
  #scHome .r-hero-formwrap{padding:0 12px 30px !important}
  #scHome .r-hero-tag h1{font-size:26px !important}
  #scHome .r-hero-tag p{font-size:14px !important}
  #scHome .r-tabs > *{flex:1 1 100% !important}
  #scHome .r-header{padding:0 12px !important}
  #scHome .r-topbar-inner{padding:0 10px !important;font-size:11.5px !important}
  #scHome .r-solpanel h3{white-space:normal !important;font-size:19px !important}
  #scHome .r-partner-quote{font-size:20px !important}
  #scHome .r-gallery{height:380px !important}
  #scHome .r-gallery-cap > div:nth-child(2){font-size:20px !important}
  #scHome .r-carhero h1,#scHome .r-csrhero h1{font-size:30px !important}
  #scHome .r-leghero h1{font-size:27px !important}
  #scHome .r-content{padding:32px 14px !important}
  #scSoon .r-h1{font-size:34px !important}
  #scSoon .r-wrap{padding:32px 14px 48px !important}
  /* fold cover screens: let the topbar utility group wrap instead of overflowing */
  #scHome .r-topbar-inner > div:last-child{flex-wrap:wrap;justify-content:center;row-gap:2px}
  #scHome .r-csrgrid{grid-template-columns:1fr !important}
  #scHome .r-csrgrid > .r-csrcard:last-child:nth-child(odd){grid-column:auto !important;justify-self:stretch !important;width:auto !important}
  /* careers split-panel: tighter padding so nothing forces min-width */
  #scHome .r-two > div{padding-left:18px !important;padding-right:18px !important}
}

/* --- Select2 skin (hero enquiry form + careers form) -------------------- */
.select2-container--default .select2-selection--single{height:50px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2);display:flex;align-items:center;outline:none}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:#0A2A4E;font-size:14px;line-height:1.35;padding-left:12px;padding-right:34px;width:100%}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#5B6E86}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:9px;top:0}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#5B6E86 transparent transparent transparent}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #5B6E86 transparent}
.select2-container--default.select2-container--open .select2-selection--single,.select2-container--default.select2-container--focus .select2-selection--single{border-color:#F2C200}
.select2-dropdown{border:1px solid #d4deeb;border-radius:10px;box-shadow:0 26px 54px -20px rgba(6,24,47,.45);overflow:hidden;font-family:'Hanken Grotesk',sans-serif;z-index:135}
.select2-search--dropdown{padding:8px}
.select2-search--dropdown .select2-search__field{height:38px;border:1px solid #d4deeb;border-radius:8px;padding:0 12px;font-size:14px;color:#0A2A4E;outline:none;font-family:inherit}
.select2-search--dropdown .select2-search__field:focus{border-color:#F2C200}
.select2-results__option{font-size:14px;padding:9px 14px;color:#0A2A4E}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background:#F2C200;color:#0A2A4E}
.select2-container--default .select2-results__option--selected{background:#eef4fb}
.select2-results__options{max-height:290px !important}
/* careers form uses 46px inputs - match */
#carForm .select2-container--default .select2-selection--single{height:46px;box-shadow:none;border-color:#d4deeb}
@media (max-width:600px){
  .select2-search--dropdown .select2-search__field{font-size:16px !important} /* iOS: no focus auto-zoom */
}

/* --- Footer brand links (Shark Capital / Shark Shipping Group) --------- */
.r-brandlink{color:#aebfd4;text-decoration:none;cursor:pointer;border-bottom:1px solid rgba(242,194,0,.55);padding-bottom:1px;transition:color .3s ease,border-bottom-color .3s ease}
.r-brandlink:hover{color:#F2C200;border-bottom-color:#F2C200;animation:scBrandGlow 1.4s ease-in-out infinite}
@keyframes scBrandGlow{0%,100%{text-shadow:0 0 0 rgba(242,194,0,0)}50%{text-shadow:0 0 13px rgba(242,194,0,.6)}}

/* --- H8. Blocking overlay while a form submission is in flight --------- */
#scBusy{position:fixed;inset:0;z-index:160;display:none;align-items:center;justify-content:center;background:rgba(6,24,47,.66);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-family:'Hanken Grotesk',sans-serif;padding:20px}
#scBusy .sc-busy-card{background:#fff;border-radius:16px;border-top:3px solid #F2C200;padding:30px 40px 28px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 40px 90px -30px rgba(6,24,47,.8);text-align:center;max-width:380px;animation:scChatIn .3s cubic-bezier(.22,.7,.2,1) both}
#scBusy .sc-busy-spin{width:44px;height:44px;border-radius:50%;border:4px solid #e6ebf2;border-top-color:#F2C200;animation:scSpin .9s linear infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}
#scBusy .sc-busy-title{font-family:'Marcellus',serif;font-size:19px;color:#0A2A4E;margin-top:6px}
#scBusy .sc-busy-note{font-size:13px;line-height:1.55;color:#5B6E86}

/* --- H7. Cookie consent banner + settings modal ------------------------ */
.sc-ck-banner{position:fixed;left:18px;right:18px;bottom:18px;z-index:140;font-family:'Hanken Grotesk',sans-serif}
.sc-ck-card{max-width:1080px;margin:0 auto;background:#fff;border:1px solid #e6ebf2;border-top:3px solid #F2C200;border-radius:16px;box-shadow:0 30px 70px -30px rgba(6,24,47,.55);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;animation:scChatIn .4s cubic-bezier(.22,.7,.2,1) both}
.sc-ck-copy{flex:1 1 380px;min-width:0}
.sc-ck-title{display:flex;align-items:center;gap:9px;font-family:'Marcellus',serif;font-size:17px;color:#0A2A4E}
.sc-ck-dot{width:8px;height:8px;border-radius:50%;background:#F2C200;flex:none}
.sc-ck-text{font-size:13px;line-height:1.6;color:#5B6E86;margin:7px 0 0}
.sc-ck-text a{color:#1C5FA8;font-weight:600;text-decoration:underline}
.sc-ck-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none}
.sc-ck-btn{border:0;border-radius:9px;padding:11px 20px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .2s,box-shadow .2s}
.sc-ck-btn:hover{transform:translateY(-2px)}
.sc-ck-gold{background:#F2C200;color:#0A2A4E;box-shadow:0 10px 24px -12px rgba(242,194,0,.8)}
.sc-ck-navy{background:#0A2A4E;color:#fff}
.sc-ck-ghost{background:transparent;color:#1C5FA8;border:1px solid #c9d7e8}
.sc-ck-overlay{position:fixed;inset:0;z-index:141;background:rgba(6,24,47,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.sc-ck-modal{width:520px;max-width:100%;max-height:90vh;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(6,24,47,.8);padding:26px 28px;font-family:'Hanken Grotesk',sans-serif}
.sc-ck-mhead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sc-ck-mtitle{font-family:'Marcellus',serif;font-size:21px;color:#0A2A4E}
.sc-ck-x{width:32px;height:32px;border-radius:8px;border:1px solid #e6ebf2;background:#f7f9fc;color:#0A2A4E;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sc-ck-mintro{font-size:13px;line-height:1.6;color:#5B6E86;margin:10px 0 18px}
.sc-ck-rows{display:flex;flex-direction:column;gap:10px}
.sc-ck-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#f7f9fc;border:1px solid #e6ebf2;border-radius:12px;padding:14px 16px}
.sc-ck-rowtitle{font-size:14px;font-weight:700;color:#0A2A4E}
.sc-ck-rowdesc{font-size:12.5px;line-height:1.55;color:#5B6E86;margin-top:3px}
.sc-ck-always{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2f9e5f;background:rgba(74,222,128,.14);border:1px solid rgba(52,194,106,.4);border-radius:99px;padding:6px 12px}
.sc-ck-switch{position:relative;flex:none;width:46px;height:26px;display:inline-block}
.sc-ck-switch input{opacity:0;width:0;height:0}
.sc-ck-slider{position:absolute;inset:0;border-radius:99px;background:#c9d5e4;transition:background .25s;cursor:pointer}
.sc-ck-slider::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(6,24,47,.35);transition:transform .25s}
.sc-ck-switch input:checked + .sc-ck-slider{background:#1C5FA8}
.sc-ck-switch input:checked + .sc-ck-slider::before{transform:translateX(20px)}
.sc-ck-switch input:focus-visible + .sc-ck-slider{outline:2px solid #F2C200;outline-offset:2px}
.sc-ck-mactions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
@media (max-width:600px){
  .sc-ck-banner{left:10px;right:10px;bottom:10px}
  .sc-ck-card{padding:16px;gap:12px}
  .sc-ck-actions{width:100%}
  .sc-ck-btn{flex:1 1 auto;padding:12px 10px}
  .sc-ck-modal{padding:20px 16px}
}