/* Famekite careers — simple, clean. */
:root{--bg:#faf7f0;--ink:#171511;--muted:#5f584d;--line:#1715111f;--gold:#ffd127;--gold-soft:#fff1b8;--orange-soft:#ffe1d1;--card:#fff}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background:var(--bg);opacity:.86;z-index:-1}
img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.02em;margin:0}
main,.c-header,.c-footer>*{max-width:1180px;margin-left:auto;margin-right:auto}

/* header */
.c-header{display:flex;align-items:center;gap:28px;padding:22px 24px}
.c-logo img{height:30px;width:auto}
.c-header nav{margin-left:auto;display:flex;gap:26px;font-size:14px}
.c-header nav a{text-decoration:none;color:var(--muted)}
.c-header nav a:hover{color:var(--ink)}

/* buttons */
.btn-gold,.btn-dark{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;font:600 15px Inter,Arial,sans-serif;text-decoration:none;cursor:pointer;padding:14px 26px;transition:transform .2s,box-shadow .2s}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn-gold.sm{padding:10px 18px;font-size:13px}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2c2822}
.btn-dark.busy{opacity:.6;pointer-events:none}

/* hero */
main{padding:0 24px}
.c-hero{text-align:center;padding:80px 0 0;overflow:hidden}
.eyebrow{font:600 12px Inter,Arial;letter-spacing:.14em;color:var(--muted);margin:0 0 18px}
.c-hero h1{font-size:clamp(46px,7vw,92px);line-height:.98;max-width:900px;margin:0 auto}
.c-hero h1 em{font-style:italic}
.lede{font-size:18px;line-height:1.6;color:var(--muted);max-width:600px;margin:22px auto 30px}
.hero-shots{display:flex;justify-content:center;gap:5%;margin-top:64px;height:240px;border-bottom:1px solid var(--line)}
.hero-shots img{width:230px;height:300px;object-fit:cover;border-radius:12px;border:6px solid #fff;box-shadow:0 18px 40px #17151122}
.hero-shots img:nth-child(1){transform:rotate(-7deg) translateY(20px)}
.hero-shots img:nth-child(2){transform:rotate(-2deg)}
.hero-shots img:nth-child(3){transform:rotate(6deg) translateY(20px)}

/* why */
.c-why{padding:80px 0 0}
.why-card{display:grid;grid-template-columns:1fr;background:var(--ink);color:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--ink)}
.why-copy{padding:44px}
.why-copy h2{font-size:clamp(36px,4vw,52px);line-height:1}
.why-sub{color:var(--gold);margin:10px 0 22px;font-size:15px}
.why-copy p:last-child{color:#d8d2c6;line-height:1.7;margin:0}
.why-img{display:block;width:100%;height:auto;aspect-ratio:1280/493;object-fit:cover;object-position:50% 40%}
.why-copy{max-width:820px}
.two-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.mini-card{border:1px solid var(--line);border-radius:20px;padding:32px}
.tint-gold{background:var(--gold-soft)}.tint-orange{background:var(--orange-soft)}
.mini-card h3{font-size:34px;line-height:1.05}
.mini-card p{color:var(--muted);line-height:1.6;margin:10px 0 16px}
.mini-card ul{margin:0;padding-left:20px;line-height:1.9}

/* roles */
.c-roles,.c-process,.c-apply{padding:100px 0 0}
.c-roles h2,.c-process h2,.c-apply h2{font-size:clamp(38px,4.6vw,60px);line-height:1;margin-bottom:28px}
.role-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.role-list li{border-bottom:1px solid var(--line)}
.role-list a{display:grid;grid-template-columns:50px 1fr auto auto;gap:20px;align-items:center;padding:24px 8px;text-decoration:none;transition:background .2s,padding .25s}
.role-list a:hover{background:#fff;padding-left:18px}
.r-num{font-size:13px;color:var(--muted)}
.r-main strong{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:30px;line-height:1.1}
.r-main span{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.r-meta{font-size:13px;color:var(--muted)}
.r-go{font-weight:600;font-size:14px;background:var(--gold);border-radius:999px;padding:8px 14px}

/* process */
.process-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.process-grid li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.process-grid span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--ink);font-weight:600}
.process-grid h3{font-size:28px;margin:22px 0 8px}
.process-grid p{color:var(--muted);line-height:1.6;margin:0;font-size:15px}

/* apply */
.c-apply{padding-bottom:110px;max-width:820px}
.apply-sub{color:var(--muted);margin:-14px 0 28px}
.dots{list-style:none;display:flex;gap:0;padding:0;margin:0 0 32px;align-items:center}
.dots li{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:14px;font-weight:600;background:var(--bg);transition:background .25s,color .25s}
.dots li+li{margin-left:28px;position:relative}
.dots li+li::before{content:"";position:absolute;right:100%;width:28px;height:1.5px;background:var(--ink)}
.dots li.on{background:var(--ink);color:#fff}
#app-form{position:relative}
.step{border:0;margin:0;padding:0;display:none;min-width:0}
.step.active{display:block;animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#app-form legend{font-family:'Instrument Serif',Georgia,serif;font-size:32px;padding:0;margin-bottom:20px}
#app-form .q{font-weight:600;font-size:14px;margin:22px 0 10px}
#app-form i{font-style:normal;font-weight:400;color:var(--muted)}
#app-form .field{margin-bottom:18px}
#app-form .field label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
#app-form .field small{display:block;font-size:12px;color:var(--muted);margin-top:6px}
#app-form .counter{text-align:right}
#app-form input:not([type=radio]):not([type=checkbox]):not([type=file]),#app-form select,#app-form textarea{width:100%;font:16px Inter,Arial,sans-serif;padding:13px 14px;border:1.5px solid #17151133;border-radius:10px;background:#fff;color:var(--ink)}
#app-form input:focus,#app-form select:focus,#app-form textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px #ffd12766}
#app-form .invalid{border-color:#c8242d!important}
#app-form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#app-form .choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#app-form .choice-row,#app-form .chips{display:flex;flex-wrap:wrap;gap:8px}
#app-form .choice-grid.invalid,#app-form .choice-row.invalid{outline:1.5px solid #c8242d;outline-offset:6px;border-radius:10px}
#app-form .choice input,#app-form .chip input{position:absolute;opacity:0;pointer-events:none}
#app-form .choice span,#app-form .chip span{display:block;cursor:pointer;border:1.5px solid #17151126;border-radius:10px;padding:14px 16px;font-size:15px;background:#fff;transition:border-color .15s,background .15s}
#app-form .choice.sm span,#app-form .chip span{padding:9px 15px;border-radius:999px;font-size:14px}
#app-form .choice span:hover,#app-form .chip span:hover{border-color:var(--ink)}
#app-form .choice input:checked+span,#app-form .chip input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
#app-form .choice input:focus-visible+span,#app-form .chip input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
#app-form .drop{display:block;border:1.5px dashed #17151155;border-radius:10px;padding:20px;text-align:center;cursor:pointer;font-weight:400!important;background:#fff}
#app-form .drop.over,#app-form .drop:hover{border-color:var(--ink)}
#app-form .drop input{position:absolute;opacity:0;width:1px;height:1px}
#app-form .drop-text{font-size:14px}
#app-form .review{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;margin:0 0 22px;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
#app-form .review dt{color:var(--muted)}#app-form .review dd{margin:0;overflow-wrap:anywhere}
#app-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer}
#app-form .consent input{width:18px;height:18px;accent-color:var(--ink);flex-shrink:0;margin-top:2px}
#app-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{color:#c8242d;font-size:14px;min-height:20px;margin:10px 0 0}
.nav-btns{display:flex;gap:12px;margin-top:8px}
.nav-btns .btn-dark{flex:1}
.ghost{background:#fff;border:1.5px solid #17151133;border-radius:999px;padding:0 24px;font:600 15px Inter,Arial;cursor:pointer;color:var(--ink)}
.success{background:#fff;border:1px solid var(--line);border-radius:20px;padding:48px 32px;text-align:center}
.success h2{font-size:48px;margin-bottom:12px}
.success p{color:var(--muted);line-height:1.6;max-width:440px;margin:0 auto 24px}

/* footer */
.c-footer{background:var(--ink);color:#f3efe6;border-radius:24px 24px 0 0;padding:52px 24px 0;overflow:hidden;max-width:none}
.foot-grid{display:grid;grid-template-columns:1fr 2fr;gap:30px}
.c-footer .footer-contact{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0;padding:0;border:0;color:#f3efe6}
.footer-contact-label{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:24px;letter-spacing:0;margin-bottom:8px;color:#fff}
.c-footer a,.c-footer address{color:#d8d2c6;font-style:normal;line-height:1.6;font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:36px!important;padding-top:24px;border-top:1px solid #ffffff22;font-size:14px}
.foot-links a{text-decoration:none}
.giant{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(80px,19vw,280px);line-height:.8;margin:30px auto -0.08em!important;text-align:center;letter-spacing:-.03em;background:linear-gradient(180deg,#f3efe6,#8d867a);-webkit-background-clip:text;background-clip:text;color:transparent}

@media(max-width:900px){
 .c-header nav{display:none}.c-header .btn-gold{margin-left:auto}
 .why-img{aspect-ratio:4/3;object-position:48% 40%}
 .why-card,.two-cards,.foot-grid,.c-footer .footer-contact{grid-template-columns:1fr}
 .process-grid{grid-template-columns:1fr 1fr}
 .role-list a{grid-template-columns:36px 1fr;row-gap:8px}
 .r-meta{grid-column:2}.r-go{display:none}
}
@media(max-width:600px){
 .c-hero{padding-top:44px}
 .lede{font-size:16px}
 .hero-shots{height:170px;margin-top:44px}.hero-shots img{width:130px;height:180px;border-width:4px}
 .why-copy,.mini-card{padding:26px}
 .process-grid{grid-template-columns:1fr}
 .c-roles,.c-process,.c-apply{padding-top:70px}
 #app-form .two,#app-form .choice-grid{grid-template-columns:1fr}
 #app-form .review{grid-template-columns:1fr;gap:2px}#app-form .review dd{margin-bottom:8px}
 .dots li+li{margin-left:16px}.dots li+li::before{width:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.step.active{animation:none}.btn-gold,.role-list a{transition:none}}

.c-pay{padding:100px 0 0}
.c-pay h2{font-size:clamp(38px,4.6vw,60px);line-height:1;margin:0 0 12px}
.pay-sub{color:var(--muted);margin:0 0 24px}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pay-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
.pay-card.tint{background:var(--gold-soft)}
.pay-card h3{margin:0 0 10px;font-size:26px;line-height:1.1}
.pay-card p{margin:0;color:var(--muted);line-height:1.6}
.q-note{margin:-4px 0 18px;color:var(--muted);font-size:15px}
@media(max-width:900px){.pay-grid{grid-template-columns:1fr}.c-pay{padding-top:70px}}
#app-form .chips{margin-bottom:24px}
