/* ==========================================================================
   KingShip Logistics — public site
   The same navy and gold as the hiring tracker, the orientation pages and
   every email the system sends, so somebody who applies here and then gets
   an email from us is plainly looking at the same company.
   ========================================================================== */

:root{
  --navy:#13294B; --deep:#0C1B33; --gold:#C8A02C; --goldl:#F3E9CE; --goldd:#A8841D;
  --ink:#22262E; --mute:#5C6472; --light:#F4F6FA; --line:#D8DEE8;
  --red:#9B2226; --green:#2C5F2D; --paper:#FBFCFE;
  /* the sidebar is its own, darker shade with a gold rule down the edge, so
     it never runs into the navy hero next to it */
  --side:#07101F;
  --sidebar:272px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Segoe UI",Calibri,system-ui,-apple-system,sans-serif;
  line-height:1.65;font-size:16.5px;
}
img{max-width:100%;display:block}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- sidebar ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);
  background:linear-gradient(180deg,#0A1628 0%,var(--side) 100%);
  color:#fff;display:flex;flex-direction:column;z-index:60;
  border-right:3px solid var(--gold);
  box-shadow:4px 0 22px rgba(0,0,0,.28);
}
.sidebar .brand{padding:24px 24px 18px;text-align:center;border-bottom:1px solid rgba(200,160,44,.28)}
.sidebar .brand img{width:150px;margin:0 auto 10px}
.sidebar .brand .tag{
  font-size:10.5px;letter-spacing:2.4px;color:var(--gold);font-weight:700;text-transform:uppercase;
}
.sidebar nav{padding:18px 14px;flex:1;overflow-y:auto}
.sidebar nav a{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:9px;color:#C5D0E2;
  text-decoration:none;font-size:15px;font-weight:600;margin-bottom:3px;
  transition:background .15s,color .15s,transform .15s;
}
.sidebar nav a svg{width:18px;height:18px;flex:none;opacity:.8}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.sidebar nav a[aria-current="page"]{background:var(--gold);color:var(--deep)}
.sidebar nav a[aria-current="page"] svg{opacity:1}
.sidebar .side-cta{padding:16px 20px 12px;border-top:1px solid rgba(200,160,44,.28)}
.sidebar .side-cta a{
  display:block;text-align:center;background:var(--gold);color:var(--deep);
  text-decoration:none;font-weight:700;padding:13px 14px;border-radius:9px;font-size:15px;
}
.sidebar .side-cta a:hover{background:#D9B449}
.sidebar .side-foot{padding:0 20px 22px;font-size:12.5px;color:#8B98AC;line-height:1.7}
.sidebar .side-foot a{color:#C5D0E2}

/* the hamburger, phones only */
.menubtn{
  display:none;position:fixed;top:14px;left:14px;z-index:70;
  background:var(--side);color:var(--gold);border:2px solid var(--gold);border-radius:9px;
  width:46px;height:46px;font-size:21px;cursor:pointer;box-shadow:0 4px 14px rgba(12,27,51,.28);
}
.veil{display:none;position:fixed;inset:0;background:rgba(12,27,51,.5);z-index:55}

/* ---------- page canvas ---------- */
.page{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:980px;margin:0 auto;padding:0 32px}
.wrap.narrow{max-width:780px}
main{flex:1;padding:0 0 10px}

/* ---------- hero ---------- */
.hero{background:var(--deep);color:#fff;padding:74px 0 66px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 85% 30%,rgba(200,160,44,.20),transparent 42%),
    radial-gradient(circle at 10% 110%,rgba(200,160,44,.10),transparent 40%);
  pointer-events:none;
}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero-logo{
  position:relative;justify-self:center;width:100%;max-width:300px;aspect-ratio:1;
  border-radius:50%;background:#fff;border:4px solid var(--gold);
  box-shadow:0 0 0 10px rgba(200,160,44,.12),0 20px 50px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.hero-logo img{width:84%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.18))}
.hero-logo::after{
  content:"";position:absolute;inset:-22px;border-radius:50%;border:2px dashed rgba(200,160,44,.45);
  animation:spin 26s linear infinite;border-top-color:transparent;border-bottom-color:transparent;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .kicker{
  font-size:11.5px;letter-spacing:2.8px;color:var(--gold);font-weight:700;
  text-transform:uppercase;margin:0 0 14px;
}
.hero h1{
  font-family:Cambria,Georgia,serif;font-size:46px;line-height:1.12;margin:0 0 18px;font-weight:600;
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{font-size:18.5px;color:#C5D0E2;margin:0 0 26px;max-width:600px}
.hero .motto{
  display:inline-block;margin-top:14px;font-size:12px;letter-spacing:3px;color:var(--gold);
  font-weight:700;text-transform:uppercase;
}

/* ---------- the "YOU ARE" ribbon from the packet ---------- */
.ribbon{background:var(--gold);color:var(--deep);overflow:hidden;white-space:nowrap;
  border-top:1px solid #D9B449;border-bottom:1px solid var(--goldd)}
.ribbon .track{display:inline-flex;gap:0;animation:slide 48s linear infinite;padding:13px 0}
.ribbon:hover .track{animation-play-state:paused}
.ribbon span{font-weight:800;letter-spacing:2.2px;font-size:13px;text-transform:uppercase;padding:0 22px;position:relative}
.ribbon span::after{content:"\2605";position:absolute;right:-6px;font-size:10px;top:2px;opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:66px 0}
section + section{border-top:1px solid var(--line)}
section.tint{background:var(--light)}
section.deep{background:var(--deep);color:#fff;border-top:0}
section.deep p{color:#C5D0E2}
section.gold{background:var(--goldl);border-top:0}
h2{
  font-family:Cambria,Georgia,serif;font-size:33px;line-height:1.22;color:var(--navy);
  margin:0 0 10px;font-weight:600;
}
section.deep h2{color:#fff}
h3{font-size:17.5px;color:var(--navy);margin:0 0 7px}
section.deep h3{color:var(--gold)}
.eyebrow{
  font-size:11.5px;letter-spacing:2.6px;color:var(--goldd);font-weight:700;
  text-transform:uppercase;margin:0 0 12px;
}
section.deep .eyebrow{color:var(--gold)}
p{margin:0 0 16px}
.lede{font-size:18.5px;color:var(--mute);margin-bottom:26px;max-width:720px}
section.deep .lede{color:#9FB0C8}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

/* a line the company actually says out loud */
.saying{
  font-family:Cambria,Georgia,serif;font-size:26px;line-height:1.4;color:var(--navy);
  border-left:4px solid var(--gold);padding:4px 0 4px 22px;margin:30px 0;font-style:italic;
}
section.deep .saying{color:#fff}
.sig{font-size:14px;color:var(--mute);margin-top:-14px}
section.deep .sig{color:#9FB0C8}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:40px;position:relative;z-index:2;
  box-shadow:0 14px 34px rgba(12,27,51,.12)}
.stat{padding:24px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:Cambria,Georgia,serif;font-size:38px;line-height:1;color:var(--navy);margin-bottom:8px}
.stat b small{font-size:20px;color:var(--goldd)}
.stat span{font-size:13.5px;color:var(--mute);line-height:1.4;display:block}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:26px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px 22px;
  transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;
}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(12,27,51,.10);border-color:#C9D2E0}
section.deep .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
section.deep .card:hover{border-color:rgba(200,160,44,.6)}
.card p{margin:0;font-size:15.5px;color:var(--mute)}
section.deep .card p{color:#B8C6DA}
.card .ic{width:44px;height:44px;border-radius:11px;background:var(--goldl);color:var(--goldd);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
section.deep .card .ic{background:rgba(200,160,44,.14);color:var(--gold)}
.card .ic svg{width:22px;height:22px}
.card .pull{display:block;margin-top:12px;font-size:13px;font-weight:700;color:var(--goldd);letter-spacing:.3px}
section.deep .card .pull{color:var(--gold)}

/* ---------- expandable value cards ---------- */
.values{display:grid;gap:12px;margin-top:26px}
.vcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.vcard[open]{border-color:var(--gold);box-shadow:0 10px 26px rgba(12,27,51,.08)}
.vcard summary{list-style:none;display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer}
.vcard summary::-webkit-details-marker{display:none}
.vcard .mark{flex:none;width:50px;height:50px;border-radius:50%;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--goldd);background:#fff;transition:background .2s,color .2s}
.vcard[open] .mark{background:var(--gold);color:var(--deep)}
.vcard .mark svg{width:24px;height:24px}
.vcard .vt{flex:1}
.vcard h3{margin:0;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)}
.vcard .vt small{display:block;color:var(--mute);font-size:14.5px;margin-top:2px}
.vcard .chev{color:var(--mute);transition:transform .2s;font-size:18px}
.vcard[open] .chev{transform:rotate(90deg);color:var(--goldd)}
.vcard .vbody{padding:0 22px 20px 86px;color:var(--ink)}
.vcard .vbody p{font-size:15.5px}
.vcard .vbody .onroad{background:var(--light);border-radius:10px;padding:12px 14px;font-size:14.5px;color:var(--mute)}
.vcard .vbody .onroad b{color:var(--navy);display:block;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:3px}

/* plain list with gold ticks */
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding:7px 0 7px 30px;font-size:16px}
.ticks li::before{content:"\2713";position:absolute;left:0;top:7px;color:var(--goldd);font-weight:700}
section.deep .ticks li::before{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--gold);color:var(--deep);text-decoration:none;
  font-weight:700;font-size:16px;padding:15px 30px;border-radius:9px;border:2px solid var(--gold);
  transition:background .15s,transform .15s;cursor:pointer;font-family:inherit;
}
.btn:hover{background:#D9B449;border-color:#D9B449;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:rgba(200,160,44,.13)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:#1B3868;border-color:#1B3868}
.btn.line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btnrow{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* the three steps of applying */
.steps{counter-reset:s;margin:28px 0 8px;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding:0 0 26px 62px}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:50%;
  background:var(--gold);color:var(--deep);font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.steps li::after{content:"";position:absolute;left:21px;top:44px;bottom:2px;width:2px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin:8px 0 5px}
.steps p{margin:0;color:var(--mute);font-size:15.5px}

/* ---------- tabs (first five weeks, safe stop) ---------- */
.tabs{margin-top:26px}
.tablist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tablist button{
  font-family:inherit;font-size:14px;font-weight:700;padding:10px 16px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--navy);transition:all .15s;
}
.tablist button:hover{border-color:var(--gold)}
.tablist button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
section.deep .tablist button{background:transparent;color:#C5D0E2;border-color:rgba(255,255,255,.2)}
section.deep .tablist button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.tabpanel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px;animation:fadeup .3s ease}
section.deep .tabpanel{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.tabpanel[hidden]{display:none}
.tabpanel .big{font-family:Cambria,Georgia,serif;font-size:24px;color:var(--navy);margin:0 0 8px}
section.deep .tabpanel .big{color:#fff}
.tabpanel p{margin:0 0 10px;color:var(--mute)}
section.deep .tabpanel p{color:#C5D0E2}
.meter{height:8px;border-radius:99px;background:var(--light);overflow:hidden;margin:16px 0 6px}
section.deep .meter{background:rgba(255,255,255,.1)}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#E4C466);border-radius:99px;transition:width .5s ease}
.meter-lbl{font-size:12.5px;color:var(--mute)}
section.deep .meter-lbl{color:#9FB0C8}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- a day on the road ---------- */
.day{position:relative;margin-top:30px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.day::before{content:"";position:absolute;left:5%;right:5%;top:22px;height:3px;background:linear-gradient(90deg,var(--gold),rgba(200,160,44,.3))}
.day .pt{position:relative;text-align:center}
.day .pt i{display:flex;width:46px;height:46px;border-radius:50%;margin:0 auto 12px;background:var(--deep);
  border:3px solid var(--gold);color:var(--gold);font-style:normal;font-weight:800;font-size:12px;align-items:center;justify-content:center}
.day .pt b{display:block;color:var(--navy);font-size:15px}
.day .pt span{display:block;color:var(--mute);font-size:13.5px;line-height:1.45}

/* ---------- pay estimator ---------- */
.estimator{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;margin-top:22px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.estimator label{display:block;font-weight:700;color:var(--navy);margin-bottom:8px}
.estimator input[type=range]{width:100%;accent-color:var(--gold);height:28px}
.estimator .hrs{font-size:14px;color:var(--mute)}
.estimator .out{background:var(--deep);color:#fff;border-radius:14px;padding:22px;text-align:center}
.estimator .out b{display:block;font-family:Cambria,Georgia,serif;font-size:42px;color:var(--gold);line-height:1.1}
.estimator .out span{font-size:13.5px;color:#9FB0C8}
.estimator .out .yr{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:15px;color:#C5D0E2}
.fine{font-size:13px;color:var(--mute);margin-top:12px}

/* ---------- "find yourself here" chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 18px}
.chips button{font-family:inherit;font-size:15px;font-weight:600;padding:11px 18px;border-radius:999px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);color:var(--navy);transition:all .15s}
.chips button:hover{border-color:var(--gold);transform:translateY(-1px)}
.chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.answer{background:#fff;border-left:5px solid var(--gold);border-radius:12px;padding:22px 24px;min-height:120px;
  box-shadow:0 8px 24px rgba(12,27,51,.07);animation:fadeup .3s ease}
.answer h3{font-family:Cambria,Georgia,serif;font-size:22px;margin:0 0 8px}
.answer p{margin:0;color:var(--mute)}

/* ---------- YOU ARE cycler ---------- */
.hero p.youare,.youare{color:#fff;max-width:none;font-family:Cambria,Georgia,serif;font-size:52px;line-height:1.1;font-weight:600;margin:0 0 18px}
.youare .w{color:var(--gold);display:inline-block;min-width:4ch;transition:opacity .35s,transform .35s}
.youare .w.out{opacity:0;transform:translateY(10px)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 16px;text-align:center;transition:transform .18s,border-color .18s}
.pillar:hover{transform:translateY(-3px);border-color:var(--gold)}
.pillar b{display:flex;width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:var(--deep);color:var(--gold);
  font-family:Cambria,Georgia,serif;font-size:24px;align-items:center;justify-content:center}
.pillar h3{margin:0 0 6px;font-size:16px}
.pillar p{margin:0;font-size:14px;color:var(--mute);line-height:1.5}

/* ---------- contact + map ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:22px}
.contact h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--goldd);margin:0 0 8px}
.contact p{margin:0 0 4px;font-size:15.5px}
.contact a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line)}
.map{margin-top:28px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--light);aspect-ratio:16/7}
.map iframe{width:100%;height:100%;border:0;display:block}

/* owners */
.owners{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;margin-top:6px}
.owners .crest{flex:none;width:110px;height:110px;border-radius:50%;background:#fff;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden}
.owners .crest img{width:92%}

/* callout */
.callout{display:flex;gap:18px;align-items:flex-start;background:var(--deep);color:#fff;border-radius:16px;padding:26px 28px;margin-top:26px}
.callout .ic{flex:none;width:48px;height:48px;border-radius:12px;background:rgba(200,160,44,.16);color:var(--gold);display:flex;align-items:center;justify-content:center}
.callout .ic svg{width:24px;height:24px}
.callout h3{color:var(--gold);margin:0 0 6px}
.callout p{color:#C5D0E2;margin:0 0 6px}
.callout a{color:#fff}

/* ---------- footer ---------- */
footer{background:var(--side);color:#8B98AC;padding:30px 0;font-size:13.5px;border-top:3px solid var(--gold)}
footer .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer b{color:var(--gold);font-weight:700;letter-spacing:1.5px;font-size:12px;text-transform:uppercase}
footer a{color:#C5D0E2}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .ribbon .track{animation:none}
}

/* ---------- phones ---------- */
@media (max-width:1100px){
  .pillars{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  body{font-size:16px}
  .menubtn{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  body.navopen .sidebar{transform:translateX(0)}
  body.navopen .veil{display:block}
  .page{margin-left:0}
  .wrap{padding:0 20px}
  .hero{padding-top:78px}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-logo{max-width:190px;order:-1}
  .hero h1{font-size:34px}
  .hero p{font-size:17px}
  .hero p.youare,.youare{font-size:38px}
  h2{font-size:27px}
  .saying{font-size:21px;padding-left:17px}
  section{padding:48px 0}
  .stats{grid-template-columns:repeat(2,1fr);margin-top:28px}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split,.estimator{grid-template-columns:1fr;gap:22px}
  .day{grid-template-columns:1fr;gap:16px}
  .day::before{left:22px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  .day .pt{display:grid;grid-template-columns:46px 1fr;gap:0 14px;text-align:left;align-items:start}
  .day .pt i{margin:0;grid-row:span 2}
  .pillars{grid-template-columns:1fr 1fr}
  .vcard .vbody{padding:0 18px 18px}
  .owners{flex-direction:column;text-align:center}
  .map{aspect-ratio:4/3}
}

/* ---------- FAQ ---------- */
.faqsearch{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:0 18px;
  max-width:620px;box-shadow:0 10px 30px rgba(0,0,0,.25);border:2px solid transparent;transition:border-color .15s}
.faqsearch:focus-within{border-color:var(--gold)}
.faqsearch svg{width:22px;height:22px;color:var(--mute);flex:none}
.faqsearch input{flex:1;border:0;outline:0;font-family:inherit;font-size:17px;padding:17px 0;background:transparent;color:var(--ink);min-width:0}
.faqbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.faqcats{margin:0}
.chips button span{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:99px;
  background:var(--light);color:var(--mute);font-size:12px;font-weight:700}
.chips button[aria-pressed="true"] span{background:rgba(12,27,51,.15);color:var(--deep)}
.linkbtn{background:none;border:0;color:var(--navy);font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:6px 2px}
.faqcount{font-size:13.5px;color:var(--mute);margin:18px 0 10px}
.faqlist{display:grid;gap:10px}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;transition:border-color .15s,box-shadow .15s}
.faq:hover{border-color:#C3CDDC}
.faq[open]{border-color:var(--gold);box-shadow:0 8px 22px rgba(12,27,51,.07)}
.faq summary{list-style:none;display:flex;align-items:center;gap:12px;padding:17px 18px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .fq{flex:1;font-weight:700;color:var(--navy);font-size:16.5px;line-height:1.4}
.faq .fcat{flex:none;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--goldd);
  background:var(--goldl);padding:3px 9px;border-radius:99px}
.faq .plus{flex:none;position:relative;width:26px;height:26px;border-radius:50%;background:var(--light);transition:background .2s,transform .25s}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;background:var(--navy);
  transform:translate(-50%,-50%);border-radius:2px}
.faq .plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s}
.faq[open] .plus{background:var(--gold)}
.faq[open] .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq .fa{padding:0 18px 18px;animation:fadeup .25s ease}
.faq .fa p{margin:0;color:var(--mute);font-size:15.5px}
.faq mark{background:var(--goldl);color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:900px){ .faq .fcat{display:none} .faqsearch input{font-size:16px} }