/* Robin Hood Supply — palette sampled from the logo mark */

:root{
  --paper:#FFFFFF; --warm:#F6F5F2;
  --ink:#231F20; --ink-soft:#5A5558; --ink-mid:#3B3738;
  --green:#056839; --green-dk:#04512C; --green-lt:#91CC8A;
  --grey:#BCBDC1; --line:#E3E3E4;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--green)}
a:hover{color:var(--green-dk)}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
section{padding-top:104px}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:20}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:26px;min-height:84px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.brand img{width:38px;height:auto}
.brand span{font-family:var(--serif);font-size:23px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.site-head nav{display:flex;flex-wrap:wrap;align-items:center;gap:19px;font-size:14px}
.site-head nav a{color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent;white-space:nowrap}
.site-head nav a:hover{color:var(--green);border-bottom-color:var(--green-lt)}
.site-head nav a[aria-current="page"]{color:var(--green);border-bottom-color:var(--green)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-family:var(--sans);font-size:16px;font-weight:500;padding:17px 32px;border:0;border-radius:2px;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--green-dk);color:#fff}
.btn-sm{font-size:14px;padding:12px 20px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:16px 32px}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------- type ---------- */
.eyebrow{margin:0 0 24px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500}
h1{margin:0;font-family:var(--serif);font-weight:400;font-size:84px;line-height:1.03;letter-spacing:-.02em;max-width:17ch}
h2{margin:0;font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.1;letter-spacing:-.01em}
h3{margin:0;font-family:var(--serif);font-weight:400;font-size:29px;line-height:1.15}
.lead{margin:34px 0 0;font-size:20px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.page-head{padding-top:88px}
.page-head h1{font-size:74px}

.prose h2{font-size:42px;line-height:1.12;margin:0 0 24px}
.prose h2+p{margin-top:0}
.prose p{font-size:19px;line-height:1.7;color:var(--ink-mid);max-width:62ch;margin:0 0 24px}
.prose h2:not(:first-child){margin-top:56px}

/* ---------- hero ---------- */
.hero{display:flex;flex-wrap:wrap;gap:64px;align-items:center;padding-top:96px}
.hero .copy{flex:999 1 520px;min-width:0}
.hero .mark{flex:1 1 230px;min-width:0;display:flex;justify-content:center}
.hero .mark img{width:100%;max-width:280px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}

/* ---------- strip ---------- */
.strip{margin-top:88px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.strip div{padding:34px 36px}
.strip div:first-child{padding-left:0;border-right:1px solid var(--line)}
.strip div:nth-child(2){border-right:1px solid var(--line)}
.strip div:last-child{padding-right:0}
.strip .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:10px}
.strip .v{font-size:16px;line-height:1.55;color:var(--ink-soft)}

/* ---------- photo slots ---------- */
.photo-wide{margin-top:56px;aspect-ratio:3/2;background:var(--warm);border:1px solid var(--line);overflow:hidden}
.photo-wide img{width:100%;height:100%;object-fit:cover}


/* ---------- shot credit ---------- */
.shotcredit{margin:20px 0 0;font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:78ch}


/* ---------- portrait quote band ---------- */
.quoteband{position:relative;padding-top:0;margin-top:88px;background:#24251F;overflow:hidden;display:flex;align-items:stretch;min-height:520px}
.quoteband .qb-img{flex:0 0 40%;min-width:0;position:relative}
.quoteband .qb-img img{width:100%;height:100%;object-fit:cover;object-position:40% center;display:block}
.quoteband .qb-img::after{content:'';position:absolute;inset:0 0 0 auto;width:90px;background:linear-gradient(90deg,rgba(36,37,31,0),#24251F)}
.quoteband .qb-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:64px 80px 64px 24px}
.quoteband .qb-statement{margin:0;margin:0;font-family:var(--serif);font-size:32px;line-height:1.3;letter-spacing:-.01em;color:#F7F7F5;max-width:24ch}
.quoteband .qb-attr{margin:24px 0 0;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#A9AAA5;font-weight:500}
@media(max-width:1040px){
  .quoteband .qb-statement{margin:0;font-size:26px}
  .quoteband .qb-text{padding:48px 48px 48px 8px}
}
@media(max-width:780px){
  .quoteband{flex-direction:column}
  .quoteband .qb-img{flex:none;aspect-ratio:3/2}
  .quoteband .qb-img img{object-position:42% 18%}
  .quoteband .qb-text{padding:36px 28px 44px}
  .quoteband .qb-statement{margin:0;font-size:23px;max-width:none}
}

/* ---------- category cards ---------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.cat{background:var(--paper);padding:0 0 36px;display:block;text-decoration:none;color:var(--ink)}
.cat:hover{background:#FCFCFB}
.cat .ph{aspect-ratio:3/2;background:var(--warm);border-bottom:1px solid var(--line);overflow:hidden}
.cat .ph img{width:100%;height:100%;object-fit:cover}
.cat .body{padding:28px 30px 0}
.cat h3{margin:0 0 12px}
.cat p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.cat .lines{font-size:13.5px;line-height:1.75;color:var(--ink)}

/* ---------- brand teaser ---------- */
.brands-cap{margin:34px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:78ch}
.brands{margin-top:22px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.brands span{background:var(--paper);padding:26px 14px;text-align:center;font-size:14px;line-height:1.35;display:flex;align-items:center;justify-content:center;min-height:86px}

/* ---------- full brand wall ---------- */
.wall{column-count:5;column-gap:32px;font-size:13.5px;line-height:2.05;margin-top:40px}

/* ---------- green band ---------- */
.band{background:var(--green);margin-top:112px;padding:96px 0}
.band h2{color:#fff}
.band p{font-size:19px;line-height:1.68;color:#D7E8DD;margin:0 0 24px}
.band p:last-child{color:#fff;margin-bottom:0}

/* ---------- splits & rows ---------- */
.split{display:flex;flex-wrap:wrap;gap:72px}
.split .a{flex:1 1 380px;min-width:0}
.split .b{flex:999 1 460px;min-width:0}

.rows{margin-top:48px}
.rows .row{border-top:1px solid var(--line);padding:44px 0;display:flex;flex-wrap:wrap;gap:64px}
.rows .row:last-child{border-bottom:1px solid var(--line)}
.rows .row .a{flex:1 1 300px;min-width:0}
.rows .row .a h2{font-size:34px;line-height:1.14;margin-bottom:12px}
.rows .row .a p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.rows .row .b{flex:999 1 440px;min-width:0;font-size:16px;line-height:2.05}

/* ---------- callout ---------- */
.callout{border-left:3px solid var(--green-lt);padding:4px 0 4px 28px}
.callout h2{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:0;line-height:1.4;margin-bottom:10px}
.callout p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:70ch}

/* ---------- story ---------- */
.story{margin-top:112px;border-top:2px solid var(--ink);padding-top:48px;display:flex;flex-wrap:wrap;gap:72px}
.pull{margin:0;font-family:var(--serif);font-size:37px;line-height:1.25;letter-spacing:-.01em}
.quotebox{background:var(--warm);border-left:3px solid var(--green-lt);padding:34px 38px;margin:0 0 24px}
.quotebox p{margin:0;font-family:var(--serif);font-size:26px;line-height:1.35;color:var(--ink);max-width:none}
.toc{border-top:2px solid var(--ink);padding-top:24px;position:sticky;top:120px}
.toc .h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:18px}
.toc p{margin:0;font-size:15px;line-height:2.1}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--green)}

/* ---------- quote panel ---------- */
.panel{background:var(--warm);padding:72px 64px;display:flex;flex-wrap:wrap;gap:64px}
.panel .a{flex:1 1 400px;min-width:0}
.panel .b{flex:999 1 380px;min-width:0}
.panel-copy{margin:20px 0 0;font-size:18px;line-height:1.65;color:var(--ink-soft)}
.phone{margin:28px 0 0;font-family:var(--serif);font-size:32px;line-height:1.2;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:14px;font-weight:500}
.field input,.field textarea{font-family:var(--sans);font-size:16px;padding:14px 16px;border:1px solid var(--grey);background:#fff;border-radius:2px;color:var(--ink)}
.field textarea{resize:vertical}

/* ---------- footer ---------- */
footer{margin-top:112px;border-top:1px solid var(--line)}
footer .wrap{padding-top:56px;padding-bottom:72px;display:flex;flex-wrap:wrap;gap:56px}
footer .col{flex:1 1 210px;min-width:0}
footer .col.first{flex:1 1 300px}
footer .h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:16px}
footer p{margin:0;font-size:15px;line-height:1.9;color:var(--ink-soft)}
footer .col a{color:var(--ink);text-decoration:none}
footer .col a:hover{color:var(--green)}
footer .mark{display:flex;align-items:center;gap:12px;margin-bottom:14px}
footer .mark img{width:34px}
footer .mark span{font-family:var(--serif);font-size:23px;color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall{column-count:3}
  h1{font-size:58px} .page-head h1{font-size:54px} h2{font-size:38px}
  .panel{padding:56px 40px}
  .toc{position:static}
}
@media(max-width:680px){
  .wrap{padding:0 24px}
  .cats{grid-template-columns:minmax(0,1fr)}
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{column-count:2}
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip div{padding:24px 0!important;border-right:0!important;border-bottom:1px solid var(--line)}
  .strip div:last-child{border-bottom:0}
  h1{font-size:42px} .page-head h1{font-size:40px} h2{font-size:31px}
  .prose h2{font-size:30px} .prose p{font-size:17px}
  .pull{font-size:28px} .quotebox p{font-size:21px}
  .lead{font-size:18px}
  section,.page-head{padding-top:72px}
  .band{padding:72px 0;margin-top:80px}
  .panel{padding:40px 28px}
  .photo-wide{aspect-ratio:3/2}
  .split,.rows .row{gap:32px}
  footer{margin-top:80px}
}