/* ====================================================================
   Work Altitude — homepage
   World: Rietveld sliding planes (design-canon-rietveld-sliding-house)
   Grammar: warm off-white ground, white planes, black structural lines,
   each primary means one offer (red=Assessment, yellow=Building,
   blue=Training) and appears only on that offer's edges; action is ink.
   Copy is draft — exact wording TBD.
   ==================================================================== */
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/jost-var.woff2') format('woff2');
}
:root{
  --ground:#F2F1EE;
  --plane:#FFFFFF;
  --ink:#17191B;
  --ink-soft:#44474B;
  --red:#D33B2A;
  --yellow:#D2A70C;
  --error:#B3291A; /* the error register: deliberately darker than Assessment red */
  --blue:#1D4ED8;
  --line:6px;
  --gutter:clamp(20px, 4.5vw, 64px);
  --font:'Jost','Century Gothic','Futura',Verdana,sans-serif;
  color-scheme:light;
}
@media (max-width:900px){ :root{ --line:4px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--ink); color:var(--ground) }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px }
html{ scrollbar-color:var(--ink) var(--ground) }

h1,h2,h3{ line-height:1.08; text-wrap:balance; letter-spacing:-0.015em; margin:0 }
p{ margin:0 }
a{ color:inherit }

/* ---- structural lines: honest joints, drawn as real elements ---- */
.line{ position:absolute; background:var(--ink) }
.rule{ height:var(--line); background:var(--ink); border:0; margin:0 }

/* =============================== NAV =============================== */
header{
  position:relative;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding:26px var(--gutter) 22px;
}
.wordmark{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(20px,2vw,24px); font-weight:650; letter-spacing:.01em;
  text-decoration:none;
}
.wordmark svg{ display:block }
nav{ display:flex; gap:clamp(14px,2.4vw,34px); flex-wrap:wrap }
nav a{
  position:relative; text-decoration:none; font-weight:500; font-size:16px;
  color:var(--ink-soft); padding-bottom:6px;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:4px; width:0;
  background:var(--edge,var(--ink));
  transition:width .28s cubic-bezier(.2,.8,.2,1);
}
nav a:hover{ color:var(--ink) }
nav a:hover::after, nav a:focus-visible::after{ width:100% }
nav a:nth-child(1){ --edge:var(--red) }
nav a:nth-child(2){ --edge:var(--yellow) }
nav a:nth-child(3){ --edge:var(--blue) }
nav a:nth-child(4){ --edge:var(--ink) }

/* =============================== HERO =============================== */
.hero{
  position:relative;
  padding:clamp(40px,6vh,84px) var(--gutter) clamp(64px,10vh,120px);
  overflow-x:clip;
}
/* line A: under the nav, stops at 62% */
.hero .line-a{ top:0; left:0; width:62%; height:var(--line) }
/* line B: vertical at 62%, runs the full hero height and terminates into line C */
.hero .line-b{ top:0; left:62%; width:var(--line); height:100% }
/* line C: the hero's foot — one boundary line the vertical joints into */
.hero .line-c{ bottom:0; left:0; width:100%; height:var(--line) }

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,440px);
  gap:clamp(32px,5vw,96px);
  align-items:start;
}
.hero h1{
  font-size:clamp(38px,5vw,66px);
  font-weight:650;
  max-width:13ch;
}
.hero .sub{
  margin-top:clamp(22px,3.5vh,40px);
  max-width:46ch;
  font-size:clamp(17px,1.35vw,19px);
  color:var(--ink-soft);
}
.hero .cta-row{ margin-top:clamp(30px,5vh,56px) }

/* offer planes: white planes staggered down the right edge,
   one primary on each leading edge */
.offers{ display:flex; flex-direction:column; gap:clamp(20px,3vh,30px); list-style:none; margin:0; padding:0 }
.offers li:nth-child(2){ margin-right:clamp(16px,2.8vw,40px) }
.offers li:nth-child(3){ margin-right:clamp(32px,5.6vw,80px) }
.offer{
  position:relative; z-index:1; /* planes slide over the structural lines, never under */
  display:flex; text-decoration:none; background:var(--plane);
  border:2px solid var(--ink);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.offer .edge{
  flex:0 0 14px; background:var(--edge);
  transition:flex-basis .3s cubic-bezier(.2,.8,.2,1);
}
.offer:hover, .offer:focus-visible{ transform:translateX(-8px) }
.offer:hover .edge, .offer:focus-visible .edge{ flex-basis:22px }
.offer-body{ padding:22px 24px 24px; min-width:0 }
.offer h2{ font-size:21px; font-weight:600 }
.offer p{ margin-top:8px; font-size:15.5px; line-height:1.5; color:var(--ink-soft) }
.offer[data-c="red"]{ --edge:var(--red) }
.offer[data-c="yellow"]{ --edge:var(--yellow) }
.offer[data-c="blue"]{ --edge:var(--blue) }

/* the action: an ink plane that slides. Primaries are reserved for the offers. */
.btn{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--ink); color:#fff; border:0; cursor:pointer;
  padding:17px 28px;
  font-family:var(--font); font-size:clamp(17px,1.4vw,20px); font-weight:600; letter-spacing:.01em;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.btn:hover, .btn:focus-visible{ transform:translateX(6px) }
.btn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px }
.btn svg{ display:block; transition:transform .28s cubic-bezier(.2,.8,.2,1) }
.btn:hover svg{ transform:translateX(4px) }

/* ============================ SECTIONS ============================= */
section{ position:relative; padding:clamp(56px,9vh,110px) var(--gutter) }
.sec-head{ max-width:28ch; font-size:clamp(28px,3.2vw,44px); font-weight:650 }
.sec-intro{ margin-top:18px; max-width:56ch; color:var(--ink-soft); font-size:clamp(16.5px,1.3vw,18.5px) }

/* ===================== WHERE AI PAYS (sliding) ===================== */
.where-grid{
  margin-top:clamp(36px,6vh,56px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,72px); max-width:1180px;
}
.cluster h3{ display:flex; align-items:center; gap:14px; font-size:clamp(18px,1.6vw,22px); font-weight:650 }
.cluster .bar{ flex:0 0 38px; height:8px; background:var(--ink) }
.cluster ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px }
.cluster li{
  background:var(--plane); border:2px solid var(--ink);
  padding:13px 18px; font-size:16px;
}
.cluster li:nth-child(even){ margin-left:clamp(12px,2vw,28px) }
.where-close{
  margin-top:clamp(32px,5vh,48px); max-width:56ch;
  font-weight:500; font-size:clamp(17px,1.4vw,19px);
}

/* ===================== START-ANYWHERE MOTIF ======================== */
.standalone{
  margin-top:clamp(20px,3.5vh,30px); display:flex; align-items:center; gap:16px; max-width:760px;
}
.hero .standalone{ grid-column:2; position:relative; z-index:1; background:var(--ground); padding:10px 14px 10px 0 }
.hero .standalone p{ font-weight:500; font-size:15.5px; color:var(--ink-soft) }
@media (max-width:900px){ .hero .standalone{ grid-column:auto } }
/* the three squares as a triangular cluster: a ring of three with no reading
   order — start anywhere. The only motif where the primaries appear together
   outside an offer reference. */
.sq{
  flex:0 0 auto; display:inline-grid;
  grid-template-columns:repeat(2,13px); gap:4px 5px;
  justify-items:center; vertical-align:middle;
}
.sq i{ width:13px; height:13px; display:block }
.sq i:nth-child(1){ grid-column:1 / span 2; background:var(--red) }
.sq i:nth-child(2){ background:var(--yellow) }
.sq i:nth-child(3){ background:var(--blue) }
.foot-body .sq{ grid-template-columns:repeat(2,9px); gap:3px }
.foot-body .sq i{ width:9px; height:9px }
.standalone p{ font-weight:500; font-size:clamp(17px,1.4vw,19px) }

/* ============================= ABOUT =============================== */
#about{ background:var(--plane) }
#about .line-f{ top:0; right:0; width:48%; height:var(--line) }
#about .line-g{ bottom:0; left:0; width:100%; height:var(--line) }
.about-copy p{
  margin-top:20px; font-size:clamp(17px,1.4vw,19.5px); color:var(--ink); max-width:58ch;
}
.sig{ margin-top:clamp(30px,5vh,42px) }
.sig .who{ font-weight:650; font-size:19px; margin-top:0 }

/* ============================ CONTACT ============================== */
.contact-grid{
  margin-top:clamp(36px,6vh,56px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,90px); align-items:start;
}
.contact-note{ color:var(--ink-soft); max-width:40ch; font-size:clamp(16.5px,1.3vw,18.5px) }
form{ display:flex; flex-direction:column; gap:20px }
.field{ display:flex; flex-direction:column; gap:8px }
.field label{ font-weight:500; font-size:15.5px }
.field input, .field textarea{
  font-family:var(--font); font-size:16.5px; color:var(--ink);
  background:var(--plane); border:2px solid var(--ink); border-radius:0;
  /* the input plane's ink leading edge; error-ink when invalid */
  border-right:12px solid var(--ink);
  padding:13px 16px; caret-color:var(--ink); width:100%;
  transition:border-color .2s ease-out;
}
.field input::placeholder, .field textarea::placeholder{ color:#6B6E72 }
.field input:focus, .field textarea:focus{
  outline:3px solid var(--ink); outline-offset:2px;
}
.field input.invalid, .field textarea.invalid{ border-color:var(--error); border-right-color:var(--error) }
.field textarea{ min-height:130px; resize:vertical }
.field textarea::-webkit-resizer{ background:linear-gradient(135deg,transparent 50%,var(--ink) 50%) }
.field .hint{ font-size:14px; color:var(--ink-soft) }
.ferr{ display:none; font-size:14.5px; font-weight:500; color:var(--error) }
.ferr.show{ display:block }
.form-msg{ font-size:16px; font-weight:500; padding:14px 18px; border:2px solid var(--ink); background:var(--plane); display:none }
.form-msg.show{ display:block }
.form-msg.err{ border-color:var(--error) }

/* ============================= FOOTER ============================== */
footer{ position:relative; padding:0 }
.foot-strip{ height:12px; background:var(--ink) }
.foot-body{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:30px var(--gutter) 40px; color:var(--ink-soft); font-size:15px;
}
.foot-body b{ color:var(--ink); font-weight:600 }

/* ============================= MOTION ============================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:var(--from,translateY(26px)); transition:opacity .6s ease-out, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s) }
  .reveal.in{ opacity:1; transform:none }
  .hero .line-a{ transform-origin:left; transform:scaleX(0); transition:transform .7s cubic-bezier(.2,.8,.2,1) .1s }
  .hero .line-b{ transform-origin:top; transform:scaleY(0); transition:transform .7s cubic-bezier(.2,.8,.2,1) .25s }
  .hero .line-c{ transform-origin:left; transform:scaleX(0); transition:transform .7s cubic-bezier(.2,.8,.2,1) .4s }
  body.loaded .hero .line-a, body.loaded .hero .line-b, body.loaded .hero .line-c{ transform:none }
}

/* =========================== RESPONSIVE ============================ */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr }
  .hero .line-b{ display:none }
  .hero .line-a{ width:78% }
  .hero h1{ max-width:15ch }
  .offers li:nth-child(2){ margin-right:0; margin-left:clamp(16px,6vw,32px) }
  .offers li:nth-child(3){ margin-right:0; margin-left:clamp(32px,12vw,64px) }
  .contact-grid, .where-grid{ grid-template-columns:1fr }
  .where-grid{ gap:44px }
}
@media (max-width:480px){
  header{ padding-top:20px }
  .offer-body{ padding:18px 18px 20px }
}

/* ======================= INTERIOR PAGES ============================ */
/* page header: the offer's one color on an accent bar; lines joint at 62% */
.page-head{ position:relative; padding:clamp(40px,6vh,76px) var(--gutter) clamp(48px,8vh,88px); overflow-x:clip }
.page-head .line-a{ top:0; left:0; width:62%; height:var(--line) }
.page-head .line-b{ top:0; left:62%; width:var(--line); height:100% }
.page-head .line-c{ bottom:0; left:0; width:100%; height:var(--line) }
.page-head .accent{ width:64px; height:8px; background:var(--accent,var(--ink)); margin-bottom:22px }
.page-head h1{ font-size:clamp(36px,4.4vw,58px); font-weight:650; max-width:16ch }
.page-head .sub{ margin-top:clamp(18px,3vh,28px); max-width:50ch; color:var(--ink-soft); font-size:clamp(17px,1.35vw,19.5px); line-height:1.6 }
.page-a{ --accent:var(--red) }
.page-d{ --accent:var(--yellow) }
.page-t{ --accent:var(--blue) }

/* two-mode planes (e.g. workshop vs multi-day): white planes, the page's color on the leading edge */
.modes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,44px); margin-top:clamp(36px,6vh,56px); max-width:1100px; list-style:none; padding:0 }
.mode{ display:flex; background:var(--plane); border:2px solid var(--ink); position:relative; z-index:1 }
.mode .edge{ flex:0 0 14px; background:var(--accent,var(--ink)) }
.mode-body{ padding:22px 24px 24px; min-width:0 }
.mode h3{ font-size:clamp(19px,1.7vw,22px); font-weight:650 }
.mode p{ margin-top:10px; font-size:16px; line-height:1.55; color:var(--ink-soft) }

/* step rows: how an engagement runs — planes against one vertical joint */
.steps{ margin-top:clamp(36px,6vh,56px); position:relative; max-width:880px; list-style:none; padding:0; display:flex; flex-direction:column; gap:18px }
.steps::before{ content:""; position:absolute; top:calc(-1 * clamp(18px,3vh,28px)); bottom:calc(-1 * clamp(18px,3vh,28px)); left:22px; width:var(--line); background:var(--ink) }
.step{ position:relative; z-index:1; background:var(--plane); border:2px solid var(--ink); padding:18px 22px; margin-left:46px }
.step:nth-child(even){ margin-left:70px }
.step h3{ font-size:18px; font-weight:650 }
.step p{ margin-top:6px; font-size:15.5px; line-height:1.55; color:var(--ink-soft) }

/* quiet inline link with a sliding arrow */
.more{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; font-weight:600; font-size:16px; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:3px }
.more svg{ display:block; transition:transform .28s cubic-bezier(.2,.8,.2,1) }
.more:hover svg, .more:focus-visible svg{ transform:translateX(5px) }

/* current page marker in the nav: the underline stays */
nav a[aria-current="page"]{ color:var(--ink) }
nav a[aria-current="page"]::after{ width:100% }

/* the closing band shared by interior pages */
.page-cta{ position:relative }
.page-cta .line-i{ top:0; left:0; width:34%; height:var(--line) }

@media (max-width:900px){
  .modes{ grid-template-columns:1fr }
  .page-head .line-b{ display:none }
  .step, .step:nth-child(even){ margin-left:34px }
  .steps::before{ left:12px }
}