/* ════════════════════════════════════════════
   ORTHOPLACE KARRIERE — Shared Stylesheet
   ════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────── */
:root {
  --dark:   #223A55;
  --deep:   #112944;
  --blue:   #A8DCEB;
  --pink:   #F09EC4;
  --green:  #B9D26C;
  --grey:   #F5F5F5;
  --text:   #223A55;
  --white:  #ffffff;
  --ff: 'DM Sans', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ───────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:auto; }
body { font-family:var(--ff); color:var(--text); background:var(--white); overflow-x:hidden; cursor:none; }
img  { max-width:100%; height:auto; display:block; }
a    { text-decoration:none; color:inherit; }
button { font-family:var(--ff); }

/* ── CURSOR ──────────────────────────────── */
.cur  { position:fixed; width:10px; height:10px; background:var(--dark); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:multiply; transition:width .3s,height .3s,background .3s; }
.ring { position:fixed; width:38px; height:38px; border:2px solid var(--dark); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .4s var(--ease-expo),height .4s var(--ease-expo),border-color .3s; }
.cur.on  { width:52px; height:52px; background:var(--blue); }
.ring.on { width:52px; height:52px; border-color:transparent; }

/* ── PROGRESS ────────────────────────────── */
.prog { position:fixed; top:0; left:0; height:3px; width:100%; background:linear-gradient(90deg,var(--blue),var(--pink)); transform-origin:left; transform:scaleX(0); z-index:10000; }

/* ── NAVIGATION ──────────────────────────── */
nav#nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:1rem 2.5rem; display:flex; align-items:center; justify-content:space-between; background:var(--white); box-shadow:0 1px 20px rgba(34,58,85,.09); transition:padding .4s,box-shadow .4s; }
nav#nav.scrolled { padding:.75rem 2.5rem; box-shadow:0 2px 30px rgba(34,58,85,.13); }
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:36px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:2.2rem; list-style:none; }
.nav-links a { font-size:.88rem; font-weight:500; color:var(--dark); position:relative; transition:color .2s; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--blue); transition:width .3s; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta { background:var(--blue) !important; color:var(--dark) !important; padding:.55rem 1.3rem; border-radius:9999px; font-size:.85rem; font-weight:700; transition:background .2s,transform .2s,box-shadow .2s !important; box-shadow:0 2px 10px rgba(168,220,235,.4); }
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--dark) !important; color:var(--white) !important; transform:translateY(-1px); box-shadow:0 4px 16px rgba(34,58,85,.2) !important; }

/* ── DECO SMILE ASSETS ───────────────────── */
.deco-smile { position:absolute; pointer-events:none; user-select:none; z-index:0; will-change:transform; }

/* ── BUTTONS ─────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.6rem; border-radius:9999px; font-family:var(--ff); font-size:.88rem; font-weight:600; border:2px solid transparent; position:relative; overflow:hidden; transition:transform .2s,box-shadow .2s,background .2s,color .2s; cursor:none; }
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.12); transform:translateX(-101%); transition:transform .3s; }
.btn:hover::before { transform:translateX(0); }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(34,58,85,.18); }
.btn-primary { background:var(--blue); color:var(--dark); box-shadow:0 2px 12px rgba(168,220,235,.35); }
.btn-primary:hover { background:var(--dark); color:var(--white); }
.btn-white   { background:var(--white); color:var(--dark); }
.btn-white:hover { background:var(--blue); }
.btn-outline  { background:transparent; color:var(--dark); border-color:var(--dark); }
.btn-outline:hover { background:var(--dark); color:var(--white); }
.btn-outline-white { background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:var(--white); }

.arrow-link { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.88rem; color:var(--dark); transition:gap .25s; cursor:none; }
.arrow-link:hover { gap:.8rem; }
.arrow-link svg { transition:transform .25s; flex-shrink:0; }
.arrow-link:hover svg { transform:translateX(4px); }
.arrow-link-white { color:var(--blue); }
.arrow-link-white:hover { color:var(--white); }

/* ── SECTION BASE ────────────────────────── */
.eyebrow { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:var(--dark); opacity:.5; display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }
.eyebrow::before { content:''; width:1.75rem; height:2px; background:currentColor; flex-shrink:0; }
.eyebrow-white { color:rgba(255,255,255,.5); }
.eyebrow-white::before { background:rgba(255,255,255,.5); }
.sec-title { font-size:clamp(1.4rem,1.8vw,2rem); font-weight:800; color:var(--dark); line-height:1.1; letter-spacing:-.02em; }
.sec-title-white { color:var(--white); }
.sec-title-lg { font-size:clamp(1.6rem,2.2vw,2.4rem); }

/* ── MARQUEE ─────────────────────────────── */
.marquee { background:var(--blue); padding:1.1rem 0; overflow:hidden; }
.marquee-track { display:flex; white-space:nowrap; animation:ticker 22s linear infinite; }
.m-item { display:inline-flex; align-items:center; gap:1.5rem; padding:0 2rem; font-size:.86rem; font-weight:600; color:var(--dark); }
.m-dot { width:5px; height:5px; border-radius:50%; background:var(--dark); opacity:.35; flex-shrink:0; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── FAQ ─────────────────────────────────── */
.faq-section { padding:6rem 2.5rem; background:var(--grey); }
.faq-inner { max-width:860px; margin:0 auto; }
.faq-hd { text-align:center; margin-bottom:3.5rem; }
.faq-hd .eyebrow { justify-content:center; }
.faq-hd .eyebrow::before { display:none; }
.faq-list { display:flex; flex-direction:column; gap:.75rem; }
.faq-item { background:var(--white); border-radius:1.25rem; overflow:hidden; }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 1.75rem; background:transparent; border:none; cursor:none; text-align:left; font-family:var(--ff); font-size:1rem; font-weight:700; color:var(--dark); line-height:1.3; }
.faq-icon { width:32px; height:32px; border-radius:50%; background:var(--grey); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .25s, transform .35s; }
.faq-icon svg { transition:transform .35s; }
.faq-item.open .faq-icon { background:var(--dark); }
.faq-item.open .faq-icon svg { transform:rotate(45deg); stroke:var(--white); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a-inner { padding:0 1.75rem 1.5rem; font-size:.92rem; line-height:1.72; color:var(--text); }
.faq-a-inner ol, .faq-a-inner ul { padding-left:1.25rem; margin-top:.5rem; display:flex; flex-direction:column; gap:.35rem; }
.faq-item.open .faq-a { max-height:600px; }

/* ── FOOTER ──────────────────────────────── */
footer { background:var(--dark); padding:4rem 2.5rem 2rem; color:rgba(255,255,255,.55); }
.ft-inner { max-width:1200px; margin:0 auto; }
.ft-top { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:3rem; margin-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); gap:2rem; flex-wrap:wrap; }
.ft-logo { display:flex; align-items:center; margin-bottom:.5rem; }
.ft-logo img { height:32px; width:auto; filter:brightness(0) invert(1); }
.ft-tag  { font-size:.82rem; }
.ft-nav-links { display:flex; gap:4rem; flex-wrap:wrap; }
.ft-grp h4 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.38); margin-bottom:.9rem; }
.ft-grp ul { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.ft-grp a { font-size:.88rem; color:rgba(255,255,255,.65); transition:color .2s; }
.ft-grp a:hover { color:var(--white); }
.ft-bot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.ft-bot p { font-size:.78rem; }
.ft-soc { display:flex; gap:.65rem; }
.soc { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:background .2s; cursor:none; }
.soc:hover { background:var(--blue); color:var(--dark); }

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:768px){
  nav#nav .nav-links { display:none; }
  .ft-nav-links { flex-direction:column; gap:2rem; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }