/* Tandem website: shared styles, built from the Tandem Brand System (2026-10-19).
   Palette: Graphite #1E2023 (lead), Deep Teal #0F2F33 (owner-facing sections), Citron #E3C33A on dark / #D4AF22 on light
   (the spark: logo bar, primary button, one highlight per view; never text on light), Fog #C5C9C4, Chalk #F2F1EC (ground).
   Type: Familjen Grotesk only. Sentence case; caps only for the wordmark and eyebrows.
   Layout: graphite hero with the bar pair in its own column, chalk content, white criteria strip, teal for the human
   promise. 8px cards, fully rounded buttons, lightly rounded photos, max content width 1200px. */

:root{
  --graphite:#1E2023; --teal:#0F2F33; --teal-2:#163C41; --citron:#E3C33A; --citron-light:#D4AF22;
  --fog:#C5C9C4; --chalk:#F2F1EC; --white:#FFFFFF;
  --ink:#1A1B1D; --ink-2:#3C3F42; --ink-3:#5A5D60; --rule:#E3E2DC; --rule-strong:#D6D5CE;
  --on-graphite:#D4D7D2; --on-graphite-dim:#8A8D90; --on-teal:#CFDAD7; --on-teal-label:#A9BFB9;
  --font:'Familjen Grotesk', Arial, Helvetica, sans-serif;
  --gutter:max(24px, calc((100% - 1152px) / 2));
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:var(--chalk)}
img{max-width:100%}
a{color:var(--teal)}
a:hover{color:var(--graphite)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--citron-light);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--citron);color:var(--graphite);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
::placeholder{color:var(--ink-3);opacity:1}

.page{display:flex;flex-direction:column;background:var(--chalk)}
.section{padding:88px var(--gutter);display:flex;flex-direction:column;gap:36px}
.bg-graphite{background:var(--graphite);color:var(--chalk)}
.bg-teal{background:var(--teal);color:var(--chalk)}
.bg-chalk{background:var(--chalk)}
.bg-white{background:var(--white)}

/* Logo: horizontal lockup. Symbol = 1.15x cap height, gap = 0.7x cap height, wordmark SemiBold caps tracked +0.133em.
   The wordmark is live Familjen Grotesk until the outlined brand-kit SVGs are dropped in. */
.brand{display:inline-flex;align-items:center;gap:.48em;font-size:44px;line-height:1;text-decoration:none;color:var(--chalk)}
.brand-mark{display:block;height:.8em;width:auto;flex:none}
.brand-word{font-weight:600;letter-spacing:.133em;margin-right:-.133em}
.brand .bar-top{fill:var(--chalk)}
.brand .bar-bottom{fill:var(--citron)}
.brand:hover{color:var(--chalk)}
.brand-foot{font-size:20px}

/* Header (always on graphite) */
.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px var(--gutter);background:var(--graphite)}
.site-nav{display:flex;gap:28px;align-items:center}
.nav-link{color:#E4E6E2;text-decoration:none;font-size:18px;font-weight:500;border-bottom:2px solid transparent;padding-block:4px}
.nav-link:hover{color:var(--chalk)}
.nav-link[aria-current="page"]{color:var(--chalk);border-bottom-color:var(--citron)}

/* Buttons: fully rounded, citron with graphite label (9.4:1) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--citron-light);color:var(--graphite);text-decoration:none;font-family:var(--font);font-weight:600;font-size:16px;line-height:1;border:0;border-radius:999px;cursor:pointer;white-space:nowrap}
.btn:hover{background:#DDB92E;color:var(--graphite)}
.hero .btn,.bg-graphite .btn,.bg-teal .btn{background:var(--citron)}
.hero .btn:hover,.bg-graphite .btn:hover,.bg-teal .btn:hover{background:#ECCF55}

/* Type scale (web): Display 64-72/1.05, H1 44/1.1, H2 32/1.2, H3 20/1.3, body 16/1.6, lead 18/1.6, eyebrow 13 caps */
.eyebrow{font-size:13px;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}
.bg-graphite .eyebrow,.page-hero .eyebrow{color:var(--fog)}
.bg-teal .eyebrow{color:var(--on-teal-label)}
.h1{font-size:clamp(36px, 5vw, 44px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);max-width:820px}
.h2{font-size:clamp(26px, 3.2vw, 32px);line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.bg-graphite .h1,.bg-graphite .h2,.bg-teal .h2,.hero .h1{color:var(--chalk)}
.lead{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:600px}
.bg-graphite .lead{color:var(--on-graphite)}
.bg-teal .lead{color:var(--on-teal)}
.stack{display:flex;flex-direction:column;gap:18px}
.stack-sm{display:flex;flex-direction:column;gap:14px}
.rule{width:28px;height:8px;border-radius:4px;background:var(--citron)}
.rule-light{width:40px;height:3px;border-radius:2px;background:var(--graphite)}

/* Home hero: worksite photo under a graphite overlay */
.hero{position:relative;display:flex;flex-direction:column;background:var(--graphite) url(hero.jpg) center 40%/cover no-repeat;background-image:image-set(url(hero.avif) type("image/avif"), url(hero.jpg) type("image/jpeg"));overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(30,32,35,.88) 0%, rgba(30,32,35,.78) 55%, rgba(30,32,35,.65) 100%)}
.hero>*{position:relative}
.hero .site-header{background:transparent;border-bottom:1px solid rgba(242,241,236,.12)}
.hero-body{padding:72px var(--gutter) 104px}
.hero-inner{display:flex;align-items:center;gap:48px}
.hero-copy{flex:1 1 560px;display:flex;flex-direction:column;gap:26px;min-width:0}
.hero .h1{font-size:clamp(42px, 6.2vw, 72px);line-height:1.05;letter-spacing:-.015em;max-width:780px}
.hero-intro{font-size:20px;line-height:1.55;color:var(--on-graphite);max-width:580px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:6px}

/* Page hero (team) */
.page-hero{display:flex;flex-direction:column;gap:24px;padding:88px var(--gutter) 104px}
.page-hero .lead{font-size:20px;max-width:720px}
.page-hero-compact{padding-block:40px 44px;gap:16px}

/* Grids */
.grid-2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:64px;align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:20px}
.feature{display:flex;flex-direction:column;gap:12px;min-width:0}
.feature-num{font-size:14px;line-height:1;color:var(--ink-3);font-variant-numeric:tabular-nums}
.feature h3{font-size:20px;line-height:1.3;color:var(--ink);min-height:2.6em}  /* two lines reserved so text aligns across a row */
.feature p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.bg-chalk .feature{background:var(--white);border-radius:8px;padding:28px}
.criteria .feature{padding-top:18px;border-top:2px solid var(--graphite)}
.criteria .feature h3{font-size:clamp(22px, 2.2vw, 26px);line-height:1.2;letter-spacing:-.01em;min-height:2.4em}
.bg-graphite .feature h3{color:var(--chalk)}
.bg-graphite .feature p{color:var(--on-graphite)}
.bg-graphite.criteria .feature{border-top-color:var(--fog)}

/* Custom AI software: graphite section, screenshots in clean frames */
.software{gap:48px}
.software-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:760px;margin:0 auto}
.software-head .lead{max-width:640px}
.hl{color:var(--citron)}
.sw-tabs{display:flex;flex-direction:column;gap:40px}
.sw-tablist{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:0 6px;scrollbar-width:none}
.sw-tablist::-webkit-scrollbar{display:none}
.sw-tab{appearance:none;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 8px;font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--on-graphite-dim);white-space:nowrap}
.sw-tab:hover{color:var(--fog)}
.sw-tab[aria-selected="true"]{color:var(--chalk)}
.sw-bar{display:block;width:100%;height:4px;background:rgba(242,241,236,.14);border-radius:2px;overflow:hidden}
.sw-bar span{display:block;height:100%;width:0;background:var(--chalk)}
.sw-tab[aria-selected="true"] .sw-bar span{width:100%}
.sw-tab.filling .sw-bar span{width:0;animation:sw-fill var(--sw-duration, 7000ms) linear forwards}
.sw-manual .sw-tab[aria-selected="true"] .sw-bar span{width:100%;animation:none}
@keyframes sw-fill{from{width:0}to{width:100%}}
@media (prefers-reduced-motion: reduce){.sw-tab.filling .sw-bar span{animation:none;width:100%}}
.sw-panel{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);gap:64px;align-items:center}
.sw-panel[hidden]{display:none}
.sw-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.sw-copy>p{font-size:18px;line-height:1.6;color:var(--on-graphite)}
.sw-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.sw-points li{display:flex;align-items:center;gap:16px;font-size:16px;line-height:1.4;color:var(--chalk)}
.sw-icon{flex:0 0 auto;width:46px;height:46px;border:1px solid rgba(197,201,196,.35);border-radius:8px;display:grid;place-items:center}
.sw-icon svg{width:22px;height:22px;fill:none;stroke:var(--chalk);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sw-shot{aspect-ratio:4/3;max-width:100%;border-radius:8px;background:#2A2D31;border:1px solid rgba(242,241,236,.12);overflow:hidden}
.sw-shot picture{display:block;width:100%;height:100%}
.sw-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Software section on deep teal */
.bg-teal .sw-copy>p{color:var(--on-teal)}
.bg-teal .sw-tab{color:var(--on-teal-label)}
.bg-teal .sw-tab:hover,.bg-teal .sw-tab[aria-selected="true"]{color:var(--chalk)}
.bg-teal .sw-icon{border-color:rgba(169,191,185,.4)}
.bg-teal .sw-shot{background:var(--teal-2)}

/* Selling your business (teal, owner-facing) */
.split-photo{align-items:center}
.section-photo{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.split-photo picture{display:block;min-width:0}

/* Closing CTA band */
.cta-band{position:relative;overflow:hidden;padding:64px var(--gutter);background:var(--chalk);border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:64px}
.cta-copy{flex:1 1 560px;display:flex;flex-direction:column;gap:24px;min-width:0}
.cta-band .lead{max-width:640px}
.cta-band .btn{align-self:flex-start;flex-shrink:0}
/* The brand bar pair, in its own column and bleeding off the right edge (graphite above citron on light grounds) */
.bar-pair{flex:0 1 380px;display:flex;flex-direction:column;gap:16px;margin-right:calc(-1 * var(--gutter) - 40px);min-width:0}
.bar-pair span{display:block;width:80%;aspect-ratio:80 / 24;border-radius:999px;background:var(--graphite)}
.bar-pair span+span{background:var(--citron-light);margin-left:20%}

/* Footer */
.site-footer{background:var(--graphite);color:var(--fog);padding:48px var(--gutter);display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.foot-brand{display:flex;flex-direction:column;gap:16px}
.foot-tag{font-size:14px;color:var(--fog)}
.foot-meta{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.foot-links{display:flex;flex-wrap:wrap;gap:24px}
.foot-links a{color:var(--fog);text-decoration:none;font-size:14px}
.foot-links a:hover{color:var(--chalk)}
.foot-legal{font-size:13px;color:var(--on-graphite-dim)}

/* Team */
.team-wrap{background:var(--chalk);padding:0 var(--gutter) 80px}
.team-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:28px;margin-top:-56px}
.person{display:flex;flex-direction:column;gap:14px;min-width:0}
.portrait{aspect-ratio:4/5;max-width:100%;background:var(--rule-strong);border-radius:4px;box-shadow:0 0 0 6px var(--chalk);display:flex;align-items:flex-end;padding:16px;font-size:12px;color:var(--ink-3)}
.portrait-photo{display:block;width:100%;height:auto;padding:0;object-fit:cover;object-position:50% 20%}
.person-name{margin:0;font-weight:600;font-size:20px;line-height:1.3;color:var(--ink)}
.person-role{font-size:14px;color:var(--ink-3)}
.person-focus{font-size:12px;line-height:1.4;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-top:6px}
.person p{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* Contact */
.contact{padding:80px var(--gutter)}
.contact .grid-2{gap:80px}
.contact .h1{color:var(--ink)}
.contact-details{display:flex;flex-direction:column;gap:18px;padding-top:16px;border-top:1px solid var(--rule-strong)}
.contact-details dt{font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}
.contact-details dd{margin:4px 0 0;font-size:17px}
.form{background:var(--white);border-radius:8px;padding:36px;display:flex;flex-direction:column;gap:20px;min-width:0}
.form-row{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:14px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:8px;font-family:var(--font);font-size:16px;background:var(--white);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--graphite)}
.field select{padding:0 12px}
.field textarea{height:140px;padding:14px;resize:vertical}
.form .btn{align-self:flex-start}
.form-note{font-size:13px;color:var(--ink-3)}
.form-status{font-size:14px;color:var(--ink-2)}
.form-status:empty{display:none}
.form-status.is-error{color:#A3261B}
.btn:disabled{opacity:.7;cursor:default}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.form-done{gap:16px;justify-content:center;outline:none}
.form[hidden],.form-done[hidden]{display:none}

/* FAQ */
.faq-list{max-width:820px;display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--rule-strong)}
.faq-item:last-child{border-bottom:1px solid var(--rule-strong)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--graphite);border-bottom:2px solid var(--graphite);transform:rotate(45deg) translateY(-4px);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-q{margin:0;font-size:20px;line-height:1.35;color:var(--ink)}
.faq-item p{padding:0 40px 26px 0;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:720px}
.faq-item summary:focus-visible{outline:2px solid var(--citron-light);outline-offset:4px}
.hero-link{color:var(--chalk);text-decoration:underline;text-underline-offset:3px}
.hero-link:hover{color:var(--citron)}
@media (prefers-reduced-motion: reduce){.faq-item summary::after{transition:none}}

/* Legal pages */
.legal{padding:72px var(--gutter) 96px}
.legal-body{max-width:720px;display:flex;flex-direction:column;gap:16px}
.legal-body .h1{margin-bottom:4px}
.legal-meta{font-size:14px;color:var(--ink-3);margin-bottom:12px}
.legal-body h2{font-size:22px;line-height:1.3;margin-top:20px}
.legal-body p,.legal-body li{font-size:16px;line-height:1.65;color:var(--ink-2)}
.legal-body ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.page-hero .hero-actions{gap:24px}

/* ---------- Responsive (1000 / 860 / 600 / 420) ---------- */
@media (max-width: 1000px){
  .sw-panel{gap:40px}
  .grid-4,.team-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:28px 20px}
  .bar-pair{flex-basis:260px}
  .brand{font-size:38px}
}

@media (max-width: 860px){
  .section{padding-block:64px}
  .grid-2,.contact .grid-2{grid-template-columns:minmax(0, 1fr);gap:32px}
  .cta-band{flex-direction:column;align-items:stretch;gap:32px;padding-block:48px}
  .cta-copy{flex:0 0 auto}
  .bar-pair{flex-basis:auto;width:min(360px, 70%);align-self:flex-end;gap:12px}
  .site-footer{flex-direction:column;align-items:flex-start}
  .foot-meta{align-items:flex-start}
  .hero-body{padding-block:48px 64px}
  .page-hero{padding-block:64px 88px}
  .page-hero-compact{padding-block:32px 36px}
  .contact{padding-block:56px}
  .sw-panel{grid-template-columns:minmax(0, 1fr);gap:32px}
  .sw-tablist{display:flex;overflow-x:auto;gap:0 20px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory}
  .sw-tab{flex:0 0 auto;padding:0;scroll-snap-align:start}
  .sw-bar{min-width:140px}
}

@media (max-width: 600px){
  :root{--gutter:20px}
  .brand{font-size:24px}
  .brand-foot{font-size:18px}
  .site-header{padding-block:18px}
  .site-nav{gap:14px}
  .faq-q{font-size:18px}
  .faq-item p{padding-right:0;font-size:16px}
  .grid-4{grid-template-columns:minmax(0, 1fr);gap:16px}
  .feature h3{min-height:0}
  .hero .h1{font-size:clamp(36px, 10vw, 44px)}
  .hero-intro{font-size:18px}
  .hero-actions .btn{width:100%}
  .bar-pair{display:none}
  .nav-link{font-size:15px}
  .lead{font-size:17px}
  .page-hero .lead{font-size:18px}
  .team-grid{gap:28px 16px;margin-top:-44px}
  .person-name{font-size:18px}
  .form{padding:22px}
  .form-row{grid-template-columns:minmax(0, 1fr)}
  .form .btn,.cta-band .btn{width:100%}
  .software{gap:36px}
  .software-head{align-items:flex-start;text-align:left}
  .sw-tabs{gap:28px}
  .sw-tab{font-size:12px}
  .sw-copy>p{font-size:17px}
  .sw-points li{font-size:15px}
  .sw-icon{width:42px;height:42px}
}

@media (max-width: 420px){
  .brand{font-size:21px}
  .site-nav{gap:12px}
  .team-grid{grid-template-columns:minmax(0, 1fr);gap:32px}
  .person{display:grid;grid-template-columns:120px minmax(0, 1fr);column-gap:18px;row-gap:14px;align-items:end}
  .person>.portrait{grid-row:1}
  .person>p{grid-column:1 / -1}
}