/* ============================================================
   FurtherSide — shared design system
   Tokens, base, nav, footer, CTA band, buttons, motion.
   Breakpoint: 768px (below = mobile layout, at/above = desktop)
   ============================================================ */

:root{
  /* color tokens */
  --paper:#f2efe8;
  --tint-1:#ece8df;
  --tint-2:#e9e5db;
  --tint-3:#e7e2d6;
  --card:#fbfaf6;
  --ink:#1c1b17;
  --body:#3a382f;
  --body-2:#54503f;
  --muted:#8a8578;
  --faint:#b0aa99;
  --faint-2:#c9c3b4;
  --line:#d6d1c4;
  --line-2:#e2ddce;
  --line-3:#ece7db;
  --line-4:#e6e1d5;
  --dark-bg:#1c1b17;
  --dark-line:#333029;
  --dark-text:#f2efe8;
  --dark-2:#b0aa99;
  --dark-link:#d8d4ca;
  --dark-label:#6b675c;
  --ghost:#3a382f;
  --ghost-2:#4b4740;
  --green:#8fbf7f;
  --green-l:#6f7a4a;
  --amber:#c9a24a;
  --red:#d9534f;
  --phone-shell:#080706;
  --phone-line:#3a382f;
  /* type */
  --arch:'Archivo',sans-serif;
  --narrow:'Archivo Narrow',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --jost:'Jost',sans-serif;
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);font-family:var(--arch);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;color:inherit;text-align:inherit}
img{max-width:100%}

/* page shell: mobile fluid, desktop max 1280 centered */
.fs-page{background:var(--paper);color:var(--ink);font-family:var(--arch);width:100%;max-width:1280px;margin:0 auto;overflow-x:clip}

/* responsive visibility helpers */
@media (max-width:767.98px){ .only-d{display:none !important} }
@media (min-width:768px){ .only-m{display:none !important} }

/* ---------- shared keyframes / motion ---------- */
@keyframes fs-rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes fs-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fs-fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fs-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fs-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.fs-word{display:inline-block;animation:fs-rise .82s var(--ease) both}
.fs-fadeup{animation:fs-fadeup .85s var(--ease) both}
.fs-reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s var(--ease)}
.fs-reveal.fs-in{opacity:1;transform:none}
.fs-reveal .fs-settle{transform:scale(1.06);transition:transform 1.4s var(--ease)}
.fs-reveal.fs-in .fs-settle{transform:scale(1)}
.fs-dot-pulse{animation:fs-pulse 2.4s ease-in-out infinite}
.fs-mrow{display:flex;width:max-content;white-space:nowrap;animation:fs-marq linear infinite}
.fs-mrow:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .fs-word,.fs-fadeup,.fs-mrow,.fs-dot-pulse{animation:none !important}
  .fs-reveal{opacity:1;transform:none;transition:none}
  .fs-reveal .fs-settle{transform:none;transition:none}
  *{scroll-behavior:auto !important}
}

/* ---------- type helpers ---------- */
.fs-label{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (min-width:768px){ .fs-label{font-size:12px;letter-spacing:.18em} }

/* ---------- buttons ---------- */
.btn{display:inline-block;font:600 13px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:17px;text-align:center;cursor:pointer;white-space:nowrap;border:none;border-radius:0}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#3a382f}
.btn-secondary{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--tint-2)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:#fff}
@media (max-width:767.98px){ .btn{display:block;width:100%} .btn-inline-m{display:inline-block;width:auto} }
@media (min-width:768px){ .btn{padding:16px 26px} }

/* ---------- nav ---------- */
.fs-nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(242,239,232,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:box-shadow .25s}
.fs-nav.is-scrolled{box-shadow:0 1px 16px -6px rgba(0,0,0,.35)}
.fs-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 20px}
.fs-logo{display:inline-flex;align-items:flex-start;gap:2px}
.fs-logo img{height:18px;width:auto;display:block}
.fs-logo .fs-reg{font:600 9px/1 var(--jost);color:var(--faint)}
.fs-nav-links{display:flex;gap:26px;font:600 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--body)}
.fs-nav-links a:hover{color:var(--ink)}
.fs-nav-links a.is-active{color:var(--ink)}
.fs-nav-contact{font:600 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--ink);padding:11px 18px;cursor:pointer;transition:background .2s,color .2s}
.fs-nav-contact:hover{background:var(--ink);color:var(--paper)}
@media (min-width:768px){
  .fs-nav-inner{padding:18px 40px;transition:padding .25s}
  .fs-nav.is-scrolled .fs-nav-inner{padding:13px 40px}
  .fs-logo img{height:19px}
}

/* hamburger (mobile) */
.fs-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;background:none;border:none;cursor:pointer}
.fs-burger .fs-bar{display:block;width:22px;height:2px;background:var(--ink);margin-left:auto;transition:transform .25s,opacity .2s,width .2s}
.fs-burger .fs-bar:nth-child(3){width:14px}
.fs-burger.is-open .fs-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.fs-burger.is-open .fs-bar:nth-child(2){opacity:0}
.fs-burger.is-open .fs-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:22px}

/* mobile dropdown menu */
.fs-menu{display:none;border-top:1px solid var(--line);background:var(--paper);padding:4px 20px 18px;box-shadow:0 16px 26px -18px rgba(0,0,0,.4);transition:opacity .25s ease,transform .3s var(--ease)}
.fs-menu a{display:flex;justify-content:space-between;align-items:center;font:600 13px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);padding:16px 0;border-bottom:1px solid var(--line-2)}
.fs-menu a span{color:var(--faint)}
.fs-menu a.fs-menu-cta{display:block;background:var(--ink);color:var(--paper);padding:16px;text-align:center;margin-top:14px;border-bottom:none}

/* ---------- CTA band ---------- */
.fs-cta{background:var(--dark-bg);color:var(--dark-text);padding:48px 20px;border-top:1px solid var(--line)}
.fs-cta h2{font:800 34px/1.02 var(--arch);letter-spacing:-.02em;margin:0 0 14px;text-transform:uppercase}
.fs-cta p{font:400 15px/1.5 var(--arch);color:var(--dark-2);margin:0 0 26px}
.fs-cta .btn-light{display:block}
@media (min-width:768px){
  .fs-cta{padding:64px 40px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
  .fs-cta h2{font-size:46px;line-height:1;margin-bottom:12px;max-width:640px}
  .fs-cta p{margin:0;max-width:440px}
  .fs-cta .btn-light{display:inline-block;padding:18px 30px;flex:none}
}

/* ---------- footer ---------- */
.fs-footer{background:var(--dark-bg);color:var(--dark-text);padding:40px 20px 32px}
.fs-footer-grid{display:flex;flex-direction:column;gap:34px;padding-bottom:34px;border-bottom:1px solid var(--dark-line)}
.fs-footer .fs-logo img{height:20px}
.fs-footer .fs-logo{margin-bottom:16px}
.fs-footer .fs-logo .fs-reg{font-size:10px;color:var(--muted)}
.fs-footer-blurb{font:400 14px/1.55 var(--arch);color:var(--muted);margin:0 0 18px;max-width:320px}
.fs-footer-offices{font:400 13px/1.5 var(--mono);color:var(--muted)}
.fs-footer-offices b{color:var(--dark-link);font-weight:600;display:block;margin-bottom:4px}
.fs-footer-col-label{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-label);margin-bottom:16px}
.fs-footer-links{display:flex;flex-direction:column;gap:11px;font:500 15px/1 var(--arch)}
.fs-footer-links a{color:var(--dark-link)}
.fs-footer-links a:hover{color:#fff}
.fs-footer-mail{font:500 14px/1.4 var(--arch);color:var(--dark-link);display:block;margin-bottom:16px}
.fs-footer-mail:hover{color:#fff}
.fs-footer-contact{font:600 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid #4a4740;color:var(--dark-text);padding:12px 18px;display:inline-block;transition:background .2s,color .2s,border-color .2s}
.fs-footer-contact:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.fs-footer-legal{padding-top:22px;font:500 11px/1.6 var(--mono);letter-spacing:.04em;color:var(--muted);display:flex;flex-direction:column;gap:8px}
@media (min-width:768px){
  .fs-footer{padding:52px 40px 40px}
  .fs-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:44px}
  .fs-footer-col-label{margin-bottom:18px}
  .fs-footer .fs-logo{margin-bottom:18px}
  .fs-footer-links{font-size:14px}
  .fs-footer-legal{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:14px;line-height:1}
}

/* ---------- stats (count-up cells) ---------- */
.fs-stat{font:800 34px/1 var(--arch);letter-spacing:-.02em}
.fs-stat-sub{font:500 10px/1.4 var(--mono);color:var(--muted);margin-top:7px;text-transform:uppercase;letter-spacing:.06em}
@media (min-width:768px){
  .fs-stat{font-size:40px}
  .fs-stat-sub{font-size:11px;margin-top:8px}
}

/* ---------- marquee band ---------- */
.fs-marquee{border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden}
.fs-marquee-label{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 20px 14px}
.fs-marquee-window{overflow:hidden;flex:1}
.fs-marquee .fs-mrow{gap:40px;padding-left:20px;animation-duration:36s;font:700 20px/1 var(--arch);color:var(--body)}
@media (min-width:768px){
  .fs-marquee{display:flex;align-items:center;padding:26px 0}
  .fs-marquee-label{flex:none;font-size:11px;padding:0 40px}
  .fs-marquee .fs-mrow{gap:56px;padding-left:0;animation-duration:44s;font-size:22px}
}