/*
  B7 Collective site styles.

  ALIGNMENT STANDARDS (keep every page to these)
  1. One grid. Everything (header, page intros, section heads, tiles, footer)
     sits on the same 12-column grid inside .wrap, with a 16px gutter.
     Nothing is nudged off the grid with extra left or right padding.
  2. Two edges. Text outside a tile starts at the grid's left edge (0).
     Text inside a tile starts at the tile padding (32px desktop, 24px phone).
  3. Rows are flush. Tiles in the same row are the same height, and anything
     meant to sit at the bottom of a tile (links, status pills) is pinned there,
     so the bottoms line up across the row.
  3a. Rows line up inside, too. Tiles that sit side by side go in a .rowset,
     which uses CSS subgrid so each part of a tile (label, title, body,
     details, footer) shares one row line with the same part of its
     neighbors. A short paragraph leaves space below it; the next part still
     starts on the same line as the tile next door. Side-by-side tiles
     therefore use the same parts in the same order.
  4. One spacing scale: 4, 8, 12, 16, 24, 32, 48, 64. Use the tokens.
  5. Inside every tile the order and spacing is the same:
     label (12 below) > title (12 below) > body > details (24 above) > footer (24 above, pinned).
  6. Section heads: title left, note right, both on the grid edges,
     48px above the section and 16px above its tiles.
  7. Colors come from :root tokens only.
*/
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#F4F2EF; --tile:#FFFFFF; --tile-soft:#FAF8F5;
  --ink:#151515; --body:#2C2C2E; --muted:#626266; --line:#E3DFD9;
  --hero:#1A1718; --hero-text:#ECE8E4; --hero-muted:#ADA6A1; --hero-line:#3A3335;
  --brand:#8E1B1F; --blush:#E3C3C4;
  --care:#2E6B4F; --care-soft:#E7F1EB; --edu:#4B3B8F; --org:#1F4E8C; --apps:#8A4A0E;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gutter:16px; --pad:32px; --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.55;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-0.022em;color:var(--ink);font-weight:700}
p,ul{margin:0}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;background:var(--tile);padding:8px 12px;border-radius:8px;z-index:10}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:stretch}

/* Spans */
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}

/* Header */
.site-header{display:flex;justify-content:space-between;align-items:center;height:96px}
.brand{display:block;line-height:0}
.brand img{height:52px;width:auto}
.site-nav{display:flex;align-items:center;gap:var(--s6);font-size:15px;font-weight:500;color:var(--body)}
.site-nav a{text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--brand)}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.btn:hover,.site-nav .btn[aria-current="page"]{background:var(--brand);color:#fff}

/* Tiles */
.t{background:var(--tile);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);display:flex;flex-direction:column;min-width:0}
.label{display:flex;align-items:center;gap:var(--s2);font-size:12.5px;line-height:1;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.label i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.t h2,.t h3{font-size:24px;line-height:1.2;margin:0 0 var(--s3)}
.t > p{color:var(--body)}
.details{margin-top:var(--s5);border-top:1px solid var(--line);list-style:none;padding:0}
.details li{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.details li span{color:var(--muted);text-align:right}
.foot{margin-top:auto;padding-top:var(--s5);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);overflow-wrap:anywhere;font-size:14.5px;font-weight:600}
.pill{font-size:12px;line-height:1;font-weight:650;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--body);background:var(--tile-soft);white-space:nowrap;text-decoration:none}
.pill.on{border-color:transparent;background:var(--care-soft);color:var(--care)}
a.pill:hover{border-color:var(--brand);color:var(--brand)}

/* Rowsets: side-by-side tiles share their internal rows (standard 3a).
   The rowset is a 12-column subgrid; each tile is a row subgrid spanning
   4 rows (label, title, body, footer), or 5 with details (.r5). Gaps between internal rows equal the gutter (16px), so the
   spacing standard is kept with small margin offsets. Browsers without
   subgrid fall back to the flex tile, which is still flush top and bottom. */
.rowset{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
@supports (grid-template-rows:subgrid){
  .rowset{grid-template-columns:subgrid}
  .rowset > .t{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:var(--gutter)}
  .rowset.r5 > .t{grid-row:span 5}
  .rowset > .t > *{margin-top:0;margin-bottom:0;min-width:0}
  .rowset > .t > .label,.rowset > .t > h2,.rowset > .t > h3{margin-bottom:-4px;align-self:start}
  .rowset > .t > .details{margin-top:var(--s2);align-self:start}
  .rowset > .t > .foot,.rowset > .t > .mailto{padding-top:var(--s2);align-self:end}
  .rowset > .t > .app-rows,.rowset > .t > .opts,.rowset > .t > .person,.rowset > .t > p{align-self:start}
  .rowset > .t.app > .head{margin-bottom:0}
  .rowset > .t.app > .tags{margin-top:0;align-self:start}
}

/* Hero */
.hero{background:var(--hero);border-color:var(--hero);color:var(--hero-text);padding:var(--s7) 44px;justify-content:space-between;gap:var(--s7);min-height:480px}
.hero .label{color:var(--hero-muted)}
.hero .label i{background:var(--brand);box-shadow:0 0 0 3px rgba(227,195,196,.25)}
.hero h1{color:#fff;font-size:54px;line-height:1.05;letter-spacing:-0.035em;max-width:720px}
.hero p{font-size:19px;color:var(--hero-text);max-width:600px;margin-top:var(--s5)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.ctas a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:15px;padding:12px 18px;border-radius:11px}
.ctas .primary{background:#fff;color:var(--hero)}
.ctas .primary:hover{background:var(--blush);color:var(--hero)}
.ctas .ghost{border:1px solid var(--hero-line);color:#fff}
.ctas .ghost:hover{border-color:var(--blush);color:#fff}

/* Company tile next to the hero */
.company{align-items:stretch}
.company .emblem{width:100%;max-width:250px;margin:0 auto var(--s4)}
.company .details{margin-top:auto}

/* Section heads */
.sect{grid-column:span 12;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);margin-top:var(--s7);margin-bottom:0}
.sect h2{font-size:30px;line-height:1.15}
.sect p{color:var(--muted);max-width:480px;text-align:right}

/* Principles */
.plist{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6);margin-top:var(--s3)}
.plist div{font-size:14.5px;color:var(--body)}
.plist b{display:block;font-size:15.5px;margin-bottom:var(--s1);color:var(--ink)}

/* Founder (kept small on purpose) */
.person{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s4)}
.rowset .person{align-items:flex-start}
.person img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.person b{display:block;font-size:17px}
.person span{font-size:14px;color:var(--muted)}
.small-copy{font-size:14.5px;color:var(--body)}

/* App rows (home) and app cards (apps page) */
.icon{width:56px;height:56px;border-radius:13px;flex:none}
.icon.lg{width:72px;height:72px;border-radius:16px}
.app-row{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s4);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line)}
.app-row b{display:block;font-size:15.5px}
.app-row span{font-size:14px;color:var(--muted)}
.app{gap:0}
.app .head{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}
.app .head h3{margin:0;font-size:21px}
.app .head span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.app > p{font-size:15px}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.tag{font-size:12px;line-height:1;font-weight:600;padding:6px 9px;border-radius:7px;background:var(--tile-soft);border:1px solid var(--line);color:var(--body)}

/* Contact options */
.opts{display:grid;gap:var(--s3);margin-top:var(--s1)}
.opts a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--tile-soft)}
.opts a:hover{border-color:var(--brand)}
.opts b{display:block;font-size:15.5px;color:var(--ink)}
.opts span{font-size:14px;color:var(--muted)}

/* Inner pages */
.page-intro{grid-column:span 8;padding:var(--s6) 0 var(--s3)}
.page-intro h1{font-size:46px;line-height:1.08;letter-spacing:-0.03em}
.page-intro p{font-size:19px;color:var(--body);margin-top:var(--s4);max-width:660px}
.page-intro .label i{background:var(--brand)}
.prose h2{font-size:22px;margin:0 0 var(--s3)}
.prose h2:not(:first-child){margin-top:var(--s6)}
.prose p{color:var(--body);margin:0 0 var(--s3);max-width:68ch}
.mailto{display:inline-block;margin-top:auto;padding-top:var(--s4);font-weight:600;font-size:15px}

/* Footer: on the same 12-column grid */
.site-footer{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);padding:var(--s8) 0 52px;font-size:14px;color:var(--muted)}
.site-footer > div{grid-column:span 2}
.site-footer > div.first{grid-column:span 6}
.site-footer h4{margin:0 0 var(--s3);font-size:12.5px;color:var(--ink);letter-spacing:.08em;text-transform:uppercase}
.site-footer a{display:block;text-decoration:none;margin-bottom:6px;color:var(--body)}
.site-footer a:hover{color:var(--brand)}
.foot-mark{width:34px;height:34px;margin-bottom:var(--s3)}
.site-footer > .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

@media (max-width:1040px){
  .rowset > .c4:not(.app),.rowset > .c7,.rowset > .c5{grid-column:span 12}
  .c8,.c7,.c5{grid-column:span 12}
  .c4{grid-column:span 6}
  .c3{grid-column:span 6}
  .page-intro{grid-column:span 12}
  .company .emblem{max-width:180px}
}
@media (max-width:700px){
  :root{--pad:24px}
  .wrap{padding:0 16px}
  .site-header{height:80px}
  .brand img{height:42px}
  .site-nav{gap:var(--s4)}
  .site-nav .hide-sm{display:none}
  .c6,.c4,.c3{grid-column:span 12}
  .hero{padding:var(--s6) var(--s5);min-height:0}
  .hero h1{font-size:clamp(28px,9.5vw,36px)}
  .hero p{font-size:17px}
  .sect{flex-direction:column;align-items:flex-start;gap:var(--s2);margin-top:var(--s6)}
  .sect p{text-align:left}
  .plist{grid-template-columns:1fr}
  .page-intro h1{font-size:34px;overflow-wrap:break-word}
  .site-footer > div,.site-footer > div.first{grid-column:span 6}
  .site-footer > div.first,.site-footer > .legal{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}