/* Looking Forward Studio — lookingforwardstudio.nl
   Palette: cool polder mist + ink, one warm accent for the horizon. */

@font-face{font-family:'Archivo';src:url('/fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62.5% 125%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-latin-ext.woff2') format('woff2');font-weight:100 900;font-stretch:62.5% 125%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrumentsans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrumentsans-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';src:url('/fonts/dmmono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url('/fonts/dmmono-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --sky:#eef1f4;
  --ground:#e4e9ee;
  --ink:#0f141a;
  --ink-soft:#515c68;
  --line:#c6cfd8;
  --sun:#dd5f1e;
  --sun-text:#b04508;

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}

:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:1px}

.skiplink{
  position:absolute;left:var(--gutter);top:-4rem;z-index:10;
  padding:.6rem 1rem;background:var(--ink);color:var(--sky);
  font-family:var(--mono);font-size:.8125rem;text-decoration:none;
  transition:top .18s ease;
}
.skiplink:focus{top:1rem}

.eyebrow{
  font-family:var(--mono);font-size:.75rem;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- top bar ---------- */

.topbar{
  background:var(--sky);
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;
  padding:1.5rem var(--gutter) 0;
}
.topbar__mark{
  position:relative;
  font-family:var(--mono);font-size:.78125rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;
}
.topbar__nav{display:flex;gap:clamp(1rem,3vw,2.25rem)}
.topbar__nav a{
  position:relative;
  font-family:var(--mono);font-size:.78125rem;letter-spacing:.08em;
  color:var(--ink-soft);text-decoration:none;
  padding-bottom:.15rem;border-bottom:1px solid transparent;
}
.topbar__mark::after,.topbar__nav a::after{content:"";position:absolute;inset:-7px -6px}
.topbar__nav a:hover{color:var(--ink);border-bottom-color:var(--sun)}

/* ---------- hero ---------- */

.hero{
  background:var(--sky);
  min-height:min(92svh,860px);
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero__copy{
  max-width:var(--measure);width:100%;margin:0 auto;
  padding:clamp(3.5rem,11vh,7rem) var(--gutter) clamp(2.5rem,7vh,4.5rem);
}
.hero__title{
  font-family:var(--display);
  font-variation-settings:'wdth' 118,'wght' 620;
  font-size:clamp(2.6rem,8.6vw,6.5rem);
  line-height:.94;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
.hero__lede{
  max-width:34em;margin:1.75rem 0 0;
  font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);
  line-height:1.55;color:var(--ink-soft);
}
.button{
  display:inline-block;margin-top:2.25rem;
  padding:.85rem 1.6rem;
  background:var(--ink);color:var(--sky);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
  transition:background .18s ease,transform .18s ease;
}
.button:hover{background:var(--sun);color:var(--ink);transform:translateY(-2px)}

/* ---------- the ground plane (signature) ---------- */

.plane{
  position:relative;
  height:clamp(170px,32vh,360px);
  background:linear-gradient(to bottom,var(--sky) 0%,var(--ground) 68%);
  overflow:hidden;
  color:var(--line);
}
.plane__horizon{
  position:absolute;inset:0 0 auto;height:2px;background:var(--sun);
  transform-origin:0 50%;
  animation:horizon .9s cubic-bezier(.16,1,.3,1) both;
}
.plane__shift{
  position:absolute;inset:0;
  will-change:transform;
}
.plane__grid{
  width:100%;height:100%;
  animation:recede 1.2s .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes horizon{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes recede{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- content bands ---------- */

.band{padding:clamp(3.5rem,9vh,6.5rem) 0}
.band__inner{
  max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
}
.band--rule .band__inner{border-top:1px solid var(--line);padding-top:clamp(3rem,7vh,5rem)}
.band__title{
  font-family:var(--display);
  font-variation-settings:'wdth' 108,'wght' 600;
  font-size:clamp(1.65rem,1.2rem + 2vw,2.7rem);
  line-height:1.08;letter-spacing:-.015em;
  margin:.9rem 0 0;max-width:18em;text-wrap:balance;
}

.band__body{
  margin-top:1.25rem;max-width:36em;color:var(--ink-soft);
  font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);
}

.steps{
  display:grid;gap:clamp(1.75rem,4vw,3rem);
  margin-top:clamp(2.5rem,6vh,4rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.step{border-top:1px solid var(--line);padding-top:1.1rem}
.step__mark{
  display:block;font-family:var(--mono);font-size:.8125rem;
  letter-spacing:.12em;color:var(--sun-text);
}
.step__title{
  font-family:var(--display);font-variation-settings:'wdth' 105,'wght' 600;
  font-size:1.3125rem;line-height:1.2;letter-spacing:-.01em;margin-top:.5rem;
}
.step__body{margin-top:.6rem;color:var(--ink-soft)}

.contact__body{
  margin-top:1.25rem;max-width:32em;color:var(--ink-soft);
  font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);
}
.contact__mail{
  display:inline-block;margin-top:clamp(1.75rem,4vh,2.75rem);
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 550;
  font-size:clamp(1.1rem,.5rem + 3vw,2.4rem);
  max-width:100%;overflow-wrap:anywhere;
  letter-spacing:-.02em;text-decoration:none;
  border-bottom:2px solid var(--sun);padding-bottom:.15rem;
  transition:color .18s ease;
}
.contact__mail:hover{color:var(--sun)}

/* ---------- footer ---------- */

.footer{border-top:1px solid var(--line);padding:2.5rem 0 3.5rem}
.footer__inner{
  max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;gap:1.5rem 3rem;
  align-items:baseline;justify-content:space-between;
}
.footer__name{
  font-family:var(--mono);font-size:.78125rem;letter-spacing:.16em;
  text-transform:uppercase;
}
.footer__meta{display:flex;flex-wrap:wrap;gap:.4rem 2.25rem;font-family:var(--mono);font-size:.8125rem}
.footer__meta div{display:flex;gap:.5rem}
.footer__meta dt{color:var(--ink-soft)}
.footer__meta dd{margin:0}
.footer__meta a{text-decoration:none;border-bottom:1px solid var(--line)}
.footer__meta a:hover{border-bottom-color:var(--sun)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .plane__shift{transform:none!important}
}