/* Jason Frederickson — shared style system
   Palette: tan, black, white. Grey is black at reduced opacity. */
:root{
  --tan:#d2b48c;
  --black:#000;
  --white:#fff;
  --tone:rgba(0,0,0,.45);        /* large headline tone shift */
  --tone-text:rgba(0,0,0,.56);   /* tone shift inside paragraphs */
  --soft:rgba(0,0,0,.66);
  --faint:rgba(0,0,0,.56);
  --line:#d2b48c;
  --line-soft:rgba(210,180,140,.6);
  --gutter:max(6vw, calc((100vw - 1200px) / 2 + 6vw));
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.005em;
}
a{color:inherit;}

/* PHONE SAFETY: no image or media element may ever be wider than its container */
img,svg,video{max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--black);outline-offset:3px;}
.on-dark :focus-visible{outline-color:var(--white);}
.wrap{max-width:1200px;margin:0 auto;padding:0 6vw;}
.hairline{border:none;border-top:1px solid var(--line);margin:0;}

/* ---------- type ---------- */
h1,h2,h3{font-weight:500;margin:0;color:inherit;}
.caps{
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:.95;
}
h1.caps span,h2.caps span{display:block;}
.tone{color:var(--tone);}
.statement{
  font-size:clamp(1.2rem,1.9vw,1.65rem);
  line-height:1.22;
  letter-spacing:-.015em;
  font-weight:400;
  margin:0;
}
.statement .tone{color:var(--tone-text);}
.label{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0;
}
.on-dark .label{color:var(--tan);}

/* ---------- header: tan brand band + black link bar ---------- */
.site-header{position:relative;}
.brandbar{
  background:var(--tan);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem var(--gutter);
}
.brand{display:block;line-height:0;text-decoration:none;}
.brand img{display:block;width:172px;height:auto;}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:.7rem;margin:-.7rem;}
.hamburger span{display:block;width:26px;height:2px;background:var(--black);margin:6px 0;}

.navbar{
  background:var(--black);
  display:flex;
  padding:0 var(--gutter);
}
.navbar a{
  flex:1 1 0;
  text-align:center;
  padding:1.05rem .5rem;
  color:var(--tan);
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:color .15s ease;
}
.navbar a + a{border-left:1px solid rgba(210,180,140,.22);}
.navbar a:hover,.navbar a:focus-visible{color:var(--white);}
.navbar a[aria-current="page"]{color:var(--white);box-shadow:inset 0 -2px 0 var(--tan);}
.navbar :focus-visible{outline-color:var(--white);outline-offset:-3px;}

@media(max-width:900px){
  .hamburger{display:block;}
  .navbar{
    display:none;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    padding:0;
    z-index:30;
  }
  .navbar.open{display:flex;}
  .navbar a{
    flex:none;
    text-align:left;
    padding:1.1rem var(--gutter);
    font-size:1.02rem;
    border-left:none;
    border-bottom:1px solid rgba(210,180,140,.2);
  }
  .navbar a + a{border-left:none;}
  .navbar a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--tan);}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:inherit;
  font-size:.92rem;
  font-weight:500;
  padding:.8rem 1.6rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--black);
  cursor:pointer;
  line-height:1.2;
}
.btn-primary{background:var(--black);color:var(--white);}
.btn-primary:hover{background:var(--tan);border-color:var(--tan);color:var(--black);}
.btn-outline{background:transparent;color:var(--black);}
.btn-outline:hover{background:var(--black);color:var(--white);}
.band-tan .btn-primary:hover{background:var(--white);border-color:var(--white);color:var(--black);}
.band-black .btn-tan{background:var(--tan);border-color:var(--tan);color:var(--black);}
.band-black .btn-tan:hover{background:var(--white);border-color:var(--white);}

/* ---------- layout pieces ---------- */
section{padding:5rem 0;}
.section-tight{padding:3.5rem 0;}
.sec-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:start;
  margin-bottom:3rem;
}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.7rem);}
.sec-head p{color:var(--soft);font-size:1rem;max-width:44ch;margin:0;}
@media(max-width:820px){.sec-head{grid-template-columns:1fr;gap:1.2rem;margin-bottom:2rem;}}

.rows{list-style:none;padding:0;margin:0;}
.rows li{padding:.85rem 0;border-top:1px solid var(--line-soft);color:var(--soft);font-size:.96rem;}
.rows li:first-child{border-top:none;padding-top:0;}
.rows strong{color:var(--black);font-weight:600;}

.cards{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);}
.card{padding:1.7rem 1.5rem 2rem;border-right:1px solid var(--line);}
.card:last-child{border-right:none;}
.card .n{font-size:.75rem;letter-spacing:.07em;color:var(--faint);margin-bottom:2.2rem;display:block;}
.card h3{font-size:1.1rem;margin-bottom:.6rem;letter-spacing:-.015em;}
.card p{font-size:.9rem;color:var(--soft);margin:0;}
@media(max-width:900px){
  .cards{grid-template-columns:1fr 1fr;}
  .card:nth-child(2){border-right:none;}
  .card:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
@media(max-width:520px){
  .cards{grid-template-columns:1fr;}
  .card{border-right:none;border-bottom:1px solid var(--line);}
  .card:last-child{border-bottom:none;}
}

.band-tan{background:var(--tan);}
.band-tan p{color:rgba(0,0,0,.78);}
.band-black{background:var(--black);color:var(--white);}
.cta{padding:4.5rem 0;}
.cta .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;}
.cta h2{font-size:clamp(2rem,5vw,3.9rem);max-width:12em;}
.cta p{max-width:38ch;margin:1.2rem 0 0;font-size:1rem;}

/* ---------- footer ---------- */
footer{
  background:var(--black);
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.18);
  padding:2.4rem var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1.2rem;
  font-size:.85rem;
}
.footer-links{display:flex;gap:1.6rem;}
.footer-links a,.footer-meta{color:rgba(255,255,255,.72);text-decoration:none;}
.footer-links a:hover{color:var(--white);}
.footer-logo{display:block;line-height:0;}
.footer-logo img{width:120px;height:auto;display:block;}

/* ---------- additional shared pieces ---------- */
.band-black p{color:rgba(255,255,255,.75);}
.band-tan .statement .tone{color:rgba(0,0,0,.62);}
.band-tan .label{color:rgba(0,0,0,.7);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.two-col h2{font-size:clamp(1.7rem,3.2vw,2.7rem);}
.two-col .lead{color:var(--soft);max-width:36ch;margin:1.2rem 0 0;}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:2.2rem;}}
.hero{padding:4.5rem 0 5rem;}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:4rem;align-items:end;}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.4rem);}
.hero-right .statement{max-width:24em;margin-bottom:1.8rem;}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:2.2rem;}.hero{padding:3rem 0 3.5rem;}}

@media(max-width:820px){.brand img{width:130px;}.footer-logo img{width:104px;}}