/* ============================================================
   Frameworks - homepage concept
   Design language: Nordic Minimal (type scale, spacing, composition, motion)
   Colour: extracted from the Frameworks logo, site and photography
   ============================================================ */

:root{
  /* Ground: their site is white; the dark family is the charred cedar
     and dusk sky that runs through their own photography. */
  --paper:      #f2f1ee;
  --paper-2:    #ffffff;
  --ink:        #14181c;
  --ink-2:      #1b2126;

  /* Accent: the exact rust of the Frameworks chevron (#b85629),
     with a darker tint for small text on paper and a lighter tint
     for text on ink, both inside the same hue family. */
  --rust:       #b85629;
  --rust-ink:   #a94b22;
  --rust-lt:    #d9793f;

  /* Text */
  --body:       #3a4048;
  --muted:      #5f6874;
  --on-ink:     #f2f1ee;
  --on-ink-mut: #a8b0b8;

  --line:       rgba(20,24,28,.16);
  --line-light: rgba(242,241,238,.20);

  --display:    'Fjalla One', 'Helvetica Neue', Arial, sans-serif;
  --sans:       'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --wrap:       min(92%, 1360px);
  --pad-y:      clamp(5rem, 10vw, 10.5rem);
  --nav-h:      78px;

  --ease:       cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{width:var(--wrap);margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--on-ink);padding:.8rem 1.2rem;
}
.skip:focus{left:1rem;top:1rem}

/* ---------- shared type ---------- */
.h-display{
  font-family:var(--display);
  font-size:clamp(2.1rem, 3.9vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--ink);
  max-width:19ch;
}
.band-ink .h-display{color:var(--on-ink)}

.kicker{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--rust-ink);
}

/* the running head: this page's one repeating grammar */
.grid-run{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4.5rem);
  align-items:start;
}
.run{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  padding-top:.55rem;
  position:relative;
}
.run::before{
  content:"";
  display:block;
  width:34px;height:2px;
  background:var(--rust);
  margin-bottom:1rem;
}
.run--light,
.band-ink .run{color:var(--on-ink-mut)}

.band-ink{background:var(--ink);color:var(--on-ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 1.7rem;
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:.94rem;font-weight:600;
  letter-spacing:.01em;text-decoration:none;
  border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.btn:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.btn--sm{min-height:42px;padding:0 1.1rem;font-size:.85rem}
.band-ink .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.band-ink .btn:hover{background:var(--rust-lt);border-color:var(--rust-lt);color:#151515}

.lnk{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.94rem;font-weight:600;color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--rust);
  transition:color .3s var(--ease)
}
.lnk:hover{color:var(--rust-ink)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(242,241,238,0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-solid{background:rgba(242,241,238,.96);border-bottom-color:var(--line);backdrop-filter:saturate(140%) blur(6px)}
.nav__in{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:2rem}
.nav__logo{display:block;margin-right:auto}
.nav__logo img{width:auto;height:30px;max-width:190px;object-fit:contain}
.nav__links{display:flex;gap:1.9rem}
.nav__links a{
  font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink);
  padding-block:.6rem;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.35rem;height:1px;
  background:var(--rust);transition:right .35s var(--ease)
}
.nav__links a:hover::after{right:0}
.nav__end{display:flex;align-items:center;gap:1.1rem}
.nav__tel{font-size:.9rem;font-weight:500;text-decoration:none;color:var(--muted);padding-block:.6rem}
.nav__tel:hover{color:var(--rust-ink)}

.burger{
  display:none;width:44px;height:44px;padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;
}
.burger span{display:block;width:26px;height:2px;background:var(--ink);transition:transform .3s var(--ease), opacity .3s var(--ease)}
.burger span:last-child{width:18px}

/* ---------- mobile menu ---------- */
.mm{
  position:fixed;inset:0;z-index:120;
  background:var(--ink);color:var(--on-ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.4rem 0 2.4rem;
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  visibility:hidden;
}
.mm.is-open{transform:translateY(0);visibility:visible}
.mm__top{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;height:calc(var(--nav-h) - 1.4rem)}
.mm__mark{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;font-size:1rem}
.mm__close{
  background:none;border:0;color:var(--on-ink);cursor:pointer;
  font-family:var(--sans);font-size:.85rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  min-height:44px;padding:0 .2rem;
}
.mm__links{width:var(--wrap);margin-inline:auto;display:flex;flex-direction:column;gap:.2rem}
.mm__links a{
  font-family:var(--display);font-size:clamp(2rem,10vw,3rem);line-height:1.18;
  text-decoration:none;color:var(--on-ink);padding-block:.35rem;
  border-bottom:1px solid var(--line-light);
}
.mm__foot{width:var(--wrap);margin-inline:auto;display:flex;flex-direction:column;gap:.35rem;font-size:.95rem;color:var(--on-ink-mut)}
.mm__foot a{text-decoration:none;padding-block:.5rem}

/* ---------- hero ---------- */
.hero{
  padding-top:calc(var(--nav-h) + clamp(2.6rem, 5vw, 4.6rem));
  padding-bottom:0;
  background:var(--paper);
}
.hero__type{width:var(--wrap);margin-inline:auto}
.hero__mast{
  margin-top:1.4rem;
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,4.5rem);
  align-items:end;
}
.hero__h1{
  font-family:var(--display);
  font-size:clamp(2.6rem, 5.4vw, 4.8rem);
  line-height:1.0;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
}
.hero__aside{padding-bottom:.4rem}
.hero__sub{
  max-width:44ch;
  font-size:clamp(1.02rem,1.2vw,1.12rem);
  color:var(--body);
}
.hero__act{margin-top:1.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
.hero__media{
  margin:clamp(2.4rem,4.5vw,4rem) 0 0;
  width:100%;
}
.hero__media img{
  width:100%;
  height:clamp(340px, 50vw, 700px);
  object-fit:cover;
  object-position:center 58%;
}

/* ---------- intro ---------- */
.intro{padding-block:var(--pad-y)}
.intro__lead{
  font-family:var(--display);
  font-size:clamp(2rem,4.6vw,4.1rem);
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--on-ink);
  max-width:15ch;
}
.intro__cols{
  margin-top:clamp(2.4rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,3.5vw,3.4rem);
  max-width:76ch;
}
.intro__cols p{color:var(--on-ink-mut);font-size:1.03rem}

/* ---------- work / rail ---------- */
.work{padding-top:var(--pad-y);padding-bottom:clamp(3.5rem,7vw,7rem);background:var(--paper)}
.work__head{display:flex;flex-direction:column;gap:1.1rem}
.work__note{max-width:44ch;color:var(--muted)}

.rail{
  margin-top:clamp(2.8rem,6vw,5rem);
  overflow:hidden;
}
.rail__track{
  display:flex;
  align-items:flex-end;
  gap:clamp(1rem,2.2vw,2.2rem);
  padding-inline:max(4vw, calc((100vw - 1360px)/2));
  will-change:transform;
}
.rail__item{margin:0;flex:0 0 auto;width:min(58vw,300px)}
.rail__item--wide{width:min(84vw,560px)}
.rail__item img{
  width:100%;
  height:clamp(300px,46vw,620px);
  object-fit:cover;
  background:#dedcd8;
}
.rail__item figcaption{
  margin-top:.85rem;
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
}
.rail__hint{
  width:var(--wrap);margin:1.6rem auto 0;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--rust-ink);
}

/* ---------- approach ---------- */
.approach{padding-bottom:var(--pad-y);position:relative}
.approach__bleed{margin:0;width:100%}
.approach__bleed img{
  width:100%;
  height:clamp(240px,32vw,480px);
  object-fit:cover;
  clip-path:inset(0 0 0 0);
}
.approach .grid-run{padding-top:clamp(3.5rem,7vw,6.5rem)}
.approach__lead{margin-top:1.6rem;max-width:62ch;color:var(--on-ink-mut);font-size:1.06rem}
.ledger{
  margin-top:clamp(2.4rem,4.5vw,3.4rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:0 clamp(1rem,2vw,2rem);
  border-top:1px solid var(--line-light);
}
.ledger li{
  border-bottom:1px solid var(--line-light);
  padding:1.05rem 0;
}
.ledger span{
  font-family:var(--display);
  font-size:1.04rem;
  letter-spacing:.005em;
  color:var(--on-ink);
}
.approach__foot{
  margin-top:clamp(2.2rem,4vw,3rem);
  max-width:58ch;
  color:var(--on-ink-mut);
  font-size:.98rem;
}

/* ---------- services ---------- */
.services{padding-block:var(--pad-y);background:var(--paper)}
.services__split{
  margin-top:clamp(2.4rem,5vw,4rem);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.index{border-top:1px solid var(--line)}
.index__row{
  padding:clamp(1.5rem,2.6vw,2.2rem) 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2.4rem);
  align-items:baseline;
}
.index__row h3{
  font-family:var(--display);
  font-size:clamp(1.35rem,2.1vw,1.85rem);
  line-height:1.1;
  color:var(--ink);
}
.index__row p{color:var(--muted);font-size:1rem;max-width:52ch}
.services__fig{margin:0}
.services__fig img{width:100%;height:clamp(340px,42vw,600px);object-fit:cover}

/* ---------- team ---------- */
.team{padding-block:var(--pad-y);background:var(--paper-2)}
.team__head{display:flex;flex-direction:column;gap:1.1rem}
.team__note{max-width:46ch;color:var(--muted)}
.people{
  margin-top:clamp(2.8rem,6vw,5rem);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vw,2.6rem) clamp(1.2rem,2.4vw,2.4rem);
}
.person{margin:0}
.person figure{margin:0 0 1.1rem}
.person figure img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#e6e4e0}
.person h3{
  font-family:var(--display);
  font-size:1.24rem;
  line-height:1.2;
  color:var(--ink);
}
.person__role{
  margin-top:.32rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--rust-ink);
}
.person__bio{margin-top:.85rem;font-size:.94rem;color:var(--muted)}
.person--lead{
  grid-column:span 2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.2rem,2.4vw,2.2rem);
  align-items:start;
}
.person--lead figure{margin:0}
.person--lead figure img{aspect-ratio:4/5}
.person--lead .person__txt{padding-top:.2rem}
.person--lead h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.person--lead .person__bio{font-size:.98rem}
.person--lead .person__bio + .person__bio{margin-top:.9rem}

/* ---------- contact ---------- */
.contact{padding-block:var(--pad-y)}
.contact__h{
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,5rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--on-ink);
}
.contact__sub{margin-top:1.5rem;max-width:52ch;color:var(--on-ink-mut);font-size:1.06rem}
.contact__rows{margin-top:clamp(2.6rem,5vw,4rem);border-top:1px solid var(--line-light);max-width:64rem}
.crow{
  display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:1rem;
  align-items:baseline;
  padding:1.15rem 0;
  border-bottom:1px solid var(--line-light);
  text-decoration:none;
}
.crow__k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--on-ink-mut)}
.crow__v{
  font-family:var(--display);font-size:clamp(1.15rem,2vw,1.6rem);
  color:var(--on-ink);word-break:break-word;
  transition:transform .35s var(--ease), color .35s var(--ease);
}
a.crow:hover .crow__v{color:var(--rust-lt);transform:translateX(.55rem)}

/* ---------- footer ---------- */
.foot{background:var(--ink-2);color:var(--on-ink);padding-top:clamp(3rem,6vw,5rem);padding-bottom:2rem}
.foot__in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.foot__logo{width:auto;height:34px;max-width:200px;object-fit:contain;filter:brightness(0) invert(1)}
.foot__brand p{margin-top:1.1rem;color:var(--on-ink-mut);font-size:.95rem}
.foot__nav{display:flex;flex-direction:column;gap:.1rem}
.foot__nav a{text-decoration:none;color:var(--on-ink-mut);font-size:.95rem;padding-block:.65rem}
.foot__nav a:hover{color:var(--on-ink)}
.foot__contact{display:flex;flex-direction:column;gap:.1rem}
.foot__contact a{text-decoration:none;color:var(--on-ink-mut);font-size:.95rem;padding-block:.65rem;word-break:break-word}
.foot__contact a:hover{color:var(--on-ink)}
.foot__legal{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--line-light)}
.foot__legal p{font-size:.82rem;color:var(--on-ink-mut)}

/* ---------- 404 ---------- */
.err{
  min-height:100vh;min-height:100svh;
  background:var(--ink);color:var(--on-ink);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + 3rem);padding-bottom:4rem;
}
.err__code{
  font-family:var(--display);
  font-size:clamp(5rem,20vw,15rem);
  line-height:.9;
  color:var(--rust-lt);
}
.err__title{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.4vw,3.4rem);
  line-height:1.05;
  margin-top:1.4rem;
  color:var(--on-ink);
}
.err__body{margin-top:1.3rem;max-width:48ch;color:var(--on-ink-mut)}
.err__act{margin-top:2.3rem}
.err .nav__links a,.err .nav__tel{color:var(--on-ink)}

/* ---------- motion ---------- */
html.js [data-anim]{opacity:0;transform:translateY(16px)}
html.js .reveal{opacity:0;transform:translateY(20px)}
html.no-js [data-anim],html.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html.js [data-anim],html.js .reveal{opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .person--lead{grid-column:span 2}
  .nav__links{display:none}
  .nav__tel{display:none}
  .burger{display:flex}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person--lead{grid-column:span 2}
  .person--lead figure img{aspect-ratio:16/10}
  .services__split{grid-template-columns:minmax(0,1fr)}
  .services__fig img{height:clamp(300px,54vw,460px)}
}

@media (max-width:860px){
  .grid-run{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .run{padding-top:0}
  .intro__cols{grid-template-columns:minmax(0,1fr)}
  .foot__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot__brand{grid-column:1 / -1}
}

@media (max-width:900px){
  .hero__mast{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .hero__aside{padding-bottom:0}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero__act{gap:1rem}
  .hero__act .btn{width:100%}
  .index__row{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .crow{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .people{grid-template-columns:minmax(0,1fr)}
  .person--lead{grid-column:auto}
  .person--lead figure img{aspect-ratio:4/5}
  .foot__in{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .rail__item{width:74vw}
  .rail__item--wide{width:88vw}
}

.narrow-only{display:none}

/* Mobile: the rail becomes a native swipe strip, not a pinned scroll */
@media (max-width:900px){
  .wide-only{display:none}
  .narrow-only{display:inline}
  .rail{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail__track{transform:none!important;padding-inline:4vw}
  .rail__item{scroll-snap-align:center}
}