:root{--lc:#7D7062}
.h2 em{color:var(--taupe)}
.sec{padding:110px 0}
.ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--k,var(--sand));color:#fff}
.ic svg{width:20px;height:20px}
.ic.y{color:var(--ink)}
/* lunch */
.lunch .days{display:flex;gap:6px;flex-wrap:wrap}
.lunch .days button{height:42px;padding:0 18px;border-radius:30px;border:1px solid var(--stone);font-size:13.5px;background:var(--white)}
.lunch .days button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lunch .days button.td{position:relative}
.lunch .days button.td::after{content:"";position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--c-lise)}
.lunch .menu{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.lunch .menu div{background:var(--white);border-radius:18px;padding:20px;animation:mf .35s ease both}
@keyframes mf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lunch .menu small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.lunch .menu b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;margin-top:8px}
.lunch .menu span{display:inline-block;margin-top:10px;font-size:11.5px;padding:3px 9px;border-radius:20px;background:var(--cream);color:var(--taupe-d)}
.forms{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.forms a{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--stone);transition:padding .3s}
.forms a:hover{padding-left:8px}
.forms a .ft{width:44px;height:52px;border-radius:8px;background:var(--cream);border:1px solid var(--stone);display:grid;place-items:center;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--c-orta)}
.forms a b{font-weight:500;font-size:15px;display:block}
.forms a small{font-size:12.5px;color:var(--taupe)}
.forms a i{font-style:normal;width:38px;height:38px;border-radius:50%;border:1px solid var(--stone);display:grid;place-items:center}
.forms a:hover i{background:var(--ink);color:#fff;border-color:var(--ink)}
.bus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bus .rt{background:var(--white);border-radius:22px;padding:26px;border:1px solid var(--stone)}
.bus .rt h5{font-family:var(--serif);font-weight:400;font-size:24px}
.bus .rt ol{margin-top:16px;position:relative;padding-left:26px}
.bus .rt ol::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--stone)}
.bus .rt li{position:relative;display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px}
.bus .rt li::before{content:"";position:absolute;left:-24px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--white);border:3px solid var(--k)}
.bus .rt li b{font-weight:500}
.bus .rt li span{color:var(--taupe)}
[data-route]{min-width:300px;height:46px;border:1px solid var(--stone);border-radius:30px;padding:0 40px 0 18px;background:var(--white);appearance:none;font-size:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237D7062' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.assoc{border-radius:28px;background:var(--esp);color:var(--cream);padding:50px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;position:relative;overflow:hidden}
.assoc::before{content:"";position:absolute;width:500px;height:500px;right:-200px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(253,200,33,.16),transparent)}
.assoc .eyebrow{color:var(--taupe-l)}
.assoc h3{font-family:var(--serif);font-weight:300;font-size:44px;line-height:1.05;margin:14px 0}
.assoc h3 em{font-style:italic;color:var(--yel)}
.assoc p{color:rgba(247,243,238,.75);line-height:1.7}
.assoc ul{display:grid;gap:10px;position:relative}
.assoc li{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.06);font-size:14.5px}
.assoc li b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--yel);min-width:54px}
.assoc .act{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.assoc .btn.o{color:#fff}
.portal{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-radius:24px;background:var(--c-oo);color:#fff;padding:30px 34px}
.portal h4{font-family:var(--serif);font-weight:300;font-size:32px}
.portal p{opacity:.9;font-size:14.5px;margin-top:4px}
/* ===== DEMO 1 — Hub ===== */
.h1p{background:var(--white);padding:46px 0 60px}
.h1p .g{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:30px}
.h1p h1{font-family:var(--serif);font-weight:300;font-size:clamp(50px,6.4vw,96px);line-height:.95}
.h1p h1 em{font-style:italic;color:var(--taupe)}
.h1p .date{font-size:14px;color:var(--taupe);text-align:right}
.h1p .date b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:14px;margin-top:44px}
.tile{position:relative;border-radius:22px;padding:24px;background:var(--cream);display:flex;flex-direction:column;gap:10px;transition:transform .3s,box-shadow .3s;overflow:hidden}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(38,33,29,.5)}
.tile small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.tile h4{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15}
.tile p{font-size:13.5px;color:var(--taupe-d);line-height:1.5}
.tile .go{margin-top:auto;font-size:13px;font-weight:500}
.tile.big{grid-column:span 2;grid-row:span 2;background:var(--esp);color:var(--cream)}
.tile.big small{color:var(--taupe-l)}
.tile.big h4{font-size:40px;font-weight:300}
.tile.big p{color:rgba(247,243,238,.7)}
.tile.lunchT{background:var(--k);color:#fff}
.tile.lunchT small,.tile.lunchT p{color:rgba(255,255,255,.85)}
.tile.lunchT ul{display:grid;gap:4px;font-size:14px}
.tile.ev{background:var(--white);border:1px solid var(--stone)}
.tile.ev b.d{font-family:var(--serif);font-weight:300;font-size:56px;line-height:.9;color:var(--c-orta)}
.tile.bus{background:var(--white);border:1px solid var(--stone)}
.tile .st{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.tile .st i{width:9px;height:9px;border-radius:50%;background:var(--c-lise);box-shadow:0 0 0 4px rgba(64,165,74,.18)}
.tile.big .login{display:grid;gap:10px;margin-top:auto}
.tile.big .login input{height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);padding:0 16px;color:#fff;outline:none}
.tile.big .login input::placeholder{color:rgba(255,255,255,.45)}
.tile.big .login .row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:rgba(247,243,238,.6)}
.tile.big .login .btn{background:#fff;color:var(--ink)}
.tile.big .login .btn:hover{background:var(--yel)}
.tile.big .apps{display:flex;gap:8px;flex-wrap:wrap}
.tile.big .apps span{font-size:12px;padding:6px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.2)}
/* ===== DEMO 2 — By need ===== */
.n2-hero{background:var(--esp);color:var(--cream)}
.n2-hero .wrap{padding-top:40px;padding-bottom:60px}
.n2-hero .bc{color:rgba(247,243,238,.6)}
.n2-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(50px,6.4vw,96px);line-height:.95;margin-top:40px}
.n2-hero h1 em{font-style:italic;color:var(--taupe-l)}
.n2-need{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.n2-need button{text-align:left;border-radius:22px;padding:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;min-height:170px;display:flex;flex-direction:column;gap:10px;transition:.3s}
.n2-need button .ic{background:var(--k)}
.n2-need button b{font-family:var(--serif);font-weight:400;font-size:26px;margin-top:auto}
.n2-need button small{font-size:13px;color:rgba(255,255,255,.6)}
.n2-need button:hover{border-color:var(--k)}
.n2-need button.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.n2-need button.on small{color:var(--taupe)}
.n2-pane{padding:90px 0 110px;animation:mf .45s ease}
.n2-blk{margin-bottom:80px}
.n2-blk:last-child{margin-bottom:0}
.n2-blk .hd2{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.n2-blk h3{font-family:var(--serif);font-weight:300;font-size:40px;line-height:1.05}
.n2-blk h3 em{font-style:italic;color:var(--taupe)}
.n2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.n2-cards div{background:var(--white);border-radius:20px;padding:24px;border-top:4px solid var(--k)}
.n2-cards h5{font-family:var(--serif);font-weight:400;font-size:22px;margin:14px 0 6px}
.n2-cards p{font-size:14px;color:var(--taupe-d);line-height:1.6}
.n2-cards a{display:inline-block;margin-top:12px;font-size:13px;font-weight:500}
/* ===== DEMO 3 — Community ===== */
.c3p{background:var(--white);padding:46px 0 0;overflow:hidden}
.c3p h1{font-family:var(--serif);font-weight:300;font-size:clamp(60px,9vw,150px);line-height:.88;letter-spacing:-.02em;margin-top:30px}
.c3p h1 em{font-style:italic;color:var(--taupe)}
.c3p .row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-top:24px}
.c3-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:12px;margin-top:50px}
.c3-mosaic .vg{aspect-ratio:auto;height:100%}
.c3-mosaic .vg:first-child{grid-row:1/3}
.c3-mosaic .vg:first-child p{font-size:28px}
.guide details{border-bottom:1px solid var(--stone)}
.guide details:first-child{border-top:1px solid var(--stone)}
.guide summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px 1fr auto 40px;gap:18px;align-items:center;padding:24px 0}
.guide summary::-webkit-details-marker{display:none}
.guide summary b{font-family:var(--serif);font-weight:400;font-size:28px}
.guide summary small{font-size:13px;color:var(--taupe)}
.guide summary i.pl{width:38px;height:38px;border-radius:50%;border:1px solid var(--stone);display:grid;place-items:center;font-style:normal;font-size:18px;transition:.3s}
.guide details[open] summary i.pl{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
.guide .bd{padding:0 0 34px 74px}
.notice{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.notice a{background:var(--white);border-radius:20px;padding:22px;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;border-left:4px solid var(--k)}
.notice a b{font-family:var(--serif);font-weight:300;font-size:40px;line-height:.9;text-align:center}
.notice a b small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.18em;color:var(--taupe);margin-top:4px}
.notice a h5{font-size:14.5px;font-weight:500;line-height:1.35}
.notice a p{font-size:12.5px;color:var(--taupe);margin-top:2px}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}.lunch .menu,.vids{grid-template-columns:1fr 1fr}.n2-cards,.notice{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){
  .hd-menu,.hd>.wrap>.hd-cta{display:none}.hd-bgr{display:flex}.hd>.wrap{height:70px}.hd-logo img{height:36px}.ftx-mid .wrap{grid-template-columns:1fr;gap:40px}
  .forms,.bus,.assoc,.c3p .row{grid-template-columns:1fr;gap:30px}
  .n2-need{grid-template-columns:1fr 1fr}
  .c3-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:300px 220px}
  .c3-mosaic .vg:first-child{grid-row:auto;grid-column:1/3}
  .c3-mosaic .vg:nth-child(n+4){display:none}
}
@media (max-width:640px){
  .wrap{padding:0 20px}html{scroll-padding-top:120px}.sw span,.sw em{display:none}.sw button{padding:0 12px;font-size:12px}.ftx-nav{grid-template-columns:1fr 1fr}.ftx-bot .wrap{flex-direction:column}
  .sec{padding:80px 0}
  .tiles{grid-template-columns:1fr}
  .tile.big{grid-column:auto;grid-row:auto}
  .tile.big h4{font-size:32px}
  .h1p .date{text-align:left}
  .lunch .menu{grid-template-columns:1fr 1fr;gap:8px}
  .lunch .menu b{font-size:17px}
  .vids{grid-template-columns:1fr 1fr;gap:8px}
  .assoc{padding:30px 22px}
  .assoc h3{font-size:34px}
  .n2-need button{min-height:140px;padding:18px}
  .n2-need button b{font-size:21px}
  .n2-cards,.notice{grid-template-columns:1fr}
  .guide summary{grid-template-columns:44px 1fr 38px}
  .guide summary small{display:none}
  .guide summary b{font-size:22px}
  .guide .bd{padding-left:0}
  .forms a{grid-template-columns:40px 1fr 38px}
  .c3-mosaic{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:300px}
  .c3-mosaic .vg:first-child{grid-column:auto}
  .c3-mosaic .vg:first-child p{font-size:22px}
  .c3-mosaic .vg:nth-child(n+3){display:none}
  [data-route]{min-width:0;width:100%}
}