/* ===========================================================
   Brandon Wood — UX Career Coach & Mentor
   Dark, grayscale, single page.
   =========================================================== */

:root{
  /* surfaces — each tier steps slightly lighter than the page */
  --bg:         #141414;
  --surface-1:  #191919;
  --surface-2:  #1e1e1e;
  --surface-3:  #232323;

  /* lines */
  --line:       rgba(255,255,255,.07);
  --line-2:     rgba(255,255,255,.12);
  --line-3:     rgba(255,255,255,.20);

  /* type */
  --text:       #f2f2f0;
  --text-2:     #b9b9b6;
  --text-3:     #8a8a87;
  --text-4:     #5f5f5d;

  --display:   'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --radius:     14px;
  --wrap:       1180px;
  --gutter:     clamp(20px, 5vw, 56px);
  --ease:       cubic-bezier(.22,.61,.36,1);

  /* one value drives the vertical rhythm between every main section */
  --section-gap: clamp(64px, 11vh, 128px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(15.5px, .4vw + 14.6px, 17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }

::selection{ background:#f2f2f0; color:#141414 }

:focus-visible{
  outline:2px solid #f2f2f0;
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:#f2f2f0; color:#141414; padding:12px 18px; z-index:100;
  font-size:.9rem; font-weight:600;
}
.skip:focus{ left:12px; top:12px }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------------- typography ---------------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.04;
  text-wrap:balance;
}

h1,
h2{ font-size:clamp(1.85rem, 3.5vw, 2.75rem); line-height:1.08 }
h3{ font-size:clamp(1.12rem, 1.3vw, 1.32rem); line-height:1.22; letter-spacing:-.018em }

p{ text-wrap:pretty }

.lede{
  font-size:clamp(1.02rem, .5vw + .92rem, 1.2rem);
  color:var(--text-2);
  max-width:34em;
  line-height:1.62;
  margin-top:clamp(20px,2.4vw,28px);
}

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

/* hero keeps a larger top inset (it opens the page) but closes with the
   standard section gap, so hero→How I Help matches How I Help→Services */
.hero{ padding:clamp(80px, 16vh, 184px) 0 var(--section-gap) }

.hero-copy h1{ max-width:19em }
.hero-copy .lede{ max-width:40rem; font-size:clamp(1.05rem,.7vw + .9rem, 1.3rem) }

.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(32px,4.5vw,46px);
}

@media (max-width:860px){
  .hero{ padding-top:clamp(52px,9vh,88px) }
}

/* ---------------- sections ---------------- */

.section{ padding:var(--section-gap) 0 }

.section-head{ max-width:46rem; margin-bottom:clamp(38px, 5.5vw, 60px) }
.section-head h2{ max-width:30em }

/* a heading sitting directly above running text wants a tighter gap
   than one above a card grid */
#how .section-head{ margin-bottom:clamp(16px, 1.8vw, 22px) }

/* ---------------- prose ---------------- */

.prose{
  max-width:44rem;
  display:grid;
  gap:1.15em;
}
.prose p{
  color:var(--text-2);
  font-size:clamp(1.02rem, .45vw + .94rem, 1.15rem);
  line-height:1.68;
}

/* ---------------- cards ---------------- */

.grid{ display:grid; gap:clamp(16px, 1.6vw, 22px) }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)) }

@media (max-width:980px){ .grid-3{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .grid-3{ grid-template-columns:1fr } }

.card{
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px, 2.4vw, 34px);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.card p{
  color:var(--text-2);
  font-size:.98rem;
  line-height:1.62;
}
.card h3 + p{ margin-top:14px }
.cards-services .card h3{ padding-right:4.5em }

/* service cards — equal height in every row, CTAs on a common baseline */
.cards-services{ grid-auto-rows:1fr }
.cards-services .card{
  display:flex;
  flex-direction:column;
  gap:clamp(22px,2.4vw,30px);
}
.card-top{ flex:1 }

.cards-services .card:hover{ transform:translateY(-3px) }

/* duration sits in the card's top-right corner */
.cards-services .card{ position:relative }

.dur{
  position:absolute;
  top:clamp(24px, 2.4vw, 34px);
  right:clamp(24px, 2.4vw, 34px);
  font-family:var(--display);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-4);
  line-height:1;
}

.card .price,
.price{
  font-family:var(--display);
  font-size:1.9rem;
  font-weight:600;
  letter-spacing:-.03em;
  margin-top:14px;
  line-height:1;
}
.price .per,
.per{
  font-size:.52em;
  font-weight:500;
  color:var(--text-3);
  letter-spacing:0;
}
.price + p{ margin-top:16px }

/* ---------------- buttons ---------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--display);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:-.005em;
  padding:14px 24px;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), opacity .25s var(--ease);
}
.btn-block{ width:100%; align-self:stretch }

.btn-primary{ background:#f2f2f0; color:#141414 }
.btn-primary:hover{ background:#ffffff }

.btn-outline{
  border-color:var(--line-3);
  color:var(--text);
  background:transparent;
}
.btn-outline:hover{ background:#f2f2f0; color:#141414; border-color:#f2f2f0 }

.btn-ghost{ color:var(--text-2); border-color:transparent; padding-inline:8px }
.btn-ghost:hover{ color:var(--text); text-decoration:underline; text-underline-offset:5px }

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

.footer{
  border-top:1px solid var(--line);
  padding:clamp(40px,6vw,64px) 0 clamp(44px,6vw,72px);
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  align-items:flex-end;
  justify-content:space-between;
}
.footer-name{
  font-family:var(--display);
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:-.02em;
}
.footer-role{ color:var(--text-3); font-size:.94rem; margin-top:5px }
.footer-right{ text-align:right }
@media (max-width:560px){ .footer-right{ text-align:left } }

.footer-copy{ color:var(--text-4); font-size:.84rem }

/* ---------------- reveal ---------------- */

.js-reveal .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js-reveal .reveal.in{ opacity:1; transform:none }

/* stagger cards within a grid */
.js-reveal .grid .reveal:nth-child(2){ transition-delay:.07s }
.js-reveal .grid .reveal:nth-child(3){ transition-delay:.14s }

@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ opacity:1; transform:none; transition:none }
  .cards-services .card:hover{ transform:none }
}

@media print{
  body{ background:#fff; color:#000 }
  .btn{ display:none }
}