/* Suburbia Park community site.  Bright beach palette: ocean blues, sand, white and a lifeguard red. */
:root {
  --ocean: #1271a8;
  --deep: #0c4a75;
  --navy: #14304d;
  --sky: #e8f6fa;
  --sky2: #c4e8f2;
  --glass: #a8ddd1;
  --sand: #fbf2df;
  --sand2: #ecd6a6;
  --red: #e63946;
  --red-d: #c42c38;
  --coral: #ff8a5b;
  --ink: #18324a;
  --muted: #5a7186;
  --line: #d6e7ee;
  --white: #ffffff;
  --display: "Fredoka", "Nunito Sans", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 10px 30px rgba(18, 53, 91, .10);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: #fbfdff; line-height: 1.55; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ocean); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; color: var(--navy); }
h1 em, h2 em { font-style: normal; color: var(--red); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.kicker { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ocean); }
.more { display: inline-block; margin-top: 14px; font-weight: 800; text-decoration: none; color: var(--ocean); }
.more:hover { text-decoration: underline; }
.opt { font-weight: 400; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Buttons */
.btn { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 17px; text-decoration: none; border-radius: 999px; padding: 12px 24px; border: 2px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(18, 53, 91, .18); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #ffcf4a; outline-offset: 2px; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-d); }
.btn-white { background: var(--white); color: var(--deep); border-color: var(--white); }
.btn-blue { background: var(--ocean); color: var(--white); }
.btn-blue:hover { background: var(--deep); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Header: flag stripe on top */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1120px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand b { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; }
.brand small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 16px; padding: 9px 14px; border-radius: 999px; }
.nav a:hover { background: var(--sky); }
.nav a[aria-current="page"] { background: var(--ocean); color: var(--white); }
.menu-btn { display: none; font-family: var(--display); font-weight: 600; font-size: 16px; background: var(--sky); color: var(--deep); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
@media (max-width: 820px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--white); padding: 10px 16px 16px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .nav a { font-size: 18px; padding: 12px 16px; }
  .brand b { font-size: 21px; }
}

/* Hero: sky, sun, clouds, gulls and rolling waves */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #b9e3f3 0%, #dcf2f9 45%, #fbf3e2 100%); padding: 70px 0 270px; }
.hero-short { padding: 50px 0 220px; }
.hero-in { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hero h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 700; margin-top: 10px; max-width: 15ch; color: var(--navy); text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
.hero-short h1 { font-size: clamp(34px, 5vw, 56px); }
.hero .lede { font-size: clamp(17px, 2vw, 20px); max-width: 52ch; color: var(--ink); margin: 16px 0 0; }
.hero .kicker { color: var(--deep); }
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cloud { position: absolute; left: 0; top: var(--y, 40px); width: calc(150px * var(--s, 1)); height: calc(42px * var(--s, 1)); border-radius: 999px; background: #fff; opacity: var(--o, .92); filter: drop-shadow(0 6px 10px rgba(20, 48, 77, .06)); will-change: translate; animation: drift var(--d, 80s) linear infinite; animation-delay: var(--dl, 0s); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 46%; height: 150%; left: 14%; bottom: 30%; }
.cloud::after { width: 34%; height: 112%; left: 50%; bottom: 34%; }
.c1 { --y: 62px; --s: 1.15; --d: 95s; --dl: -20s; }
.c2 { --y: 120px; --s: .8; --d: 120s; --dl: -75s; --o: .85; }
.c3 { --y: 66px; --s: .5; --d: 150s; --dl: -40s; --o: .7; }
.c4 { --y: 170px; --s: 1.35; --d: 80s; --dl: -55s; }
.c5 { --y: 44px; --s: .6; --d: 140s; --dl: -110s; --o: .75; }
.c6 { --y: 96px; --s: .95; --d: 105s; --dl: -5s; --o: .9; }
@keyframes drift {
  0% { translate: -260px 0; }
  25% { translate: 22vw -6px; }
  50% { translate: 50vw 3px; }
  75% { translate: 78vw -5px; }
  100% { translate: calc(100vw + 40px) 0; }
}
@media (max-width: 700px) { .c4, .c6 { display: none; } .cloud { --s: .7; } }
.waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 130px; z-index: 1; }
.waves .w1 { fill: #6cc6f2; animation: sway 9s ease-in-out infinite; }
.waves .w2 { fill: var(--ocean); animation: sway 7s ease-in-out infinite reverse; }
.waves .w3 { fill: #fbfdff; }
@keyframes sway { 50% { transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .cloud, .waves path, .scene * { animation: none !important; } .btn { transition: none; } }
@media (max-width: 700px) {
    .hero-short     .hero { padding: 54px 0 120px; }
}

/* Home tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; position: relative; z-index: 3; }
.tile { display: block; text-decoration: none; color: var(--ink); background: var(--white); border-radius: 20px; padding: 26px 24px; box-shadow: var(--shadow); border: 1px solid var(--line); border-top: 6px solid var(--ocean); transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18, 53, 91, .16); }
.t-cal { border-top-color: var(--red); }
.t-idea { border-top-color: #f2b233; }
.tile h2 { font-size: 24px; margin: 14px 0 8px; }
.tile p { margin: 0; color: var(--muted); }
.tile .go { display: inline-block; margin-top: 14px; font-weight: 800; color: var(--ocean); }
.ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--sky); }
.ico svg { width: 28px; height: 28px; fill: none; stroke: var(--ocean); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-cal .ico { background: #ffe6e4; } .t-cal .ico svg { stroke: var(--red); }
.t-idea .ico { background: #fff1cc; } .t-idea .ico svg { stroke: #c98a00; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } }

/* Sections */
.sec-head h2 { font-size: clamp(28px, 3.4vw, 38px); margin-top: 6px; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin-top: 64px; }
.split > div { background: var(--white); border-radius: 20px; padding: 28px 26px; border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.latest { background: var(--sand) !important; border-color: var(--sand2) !important; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.up-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ev { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; padding: 12px; border-radius: 14px; background: var(--sky); }
.ev-date { text-align: center; border-radius: 12px; background: var(--white); padding: 6px 0 8px; border-top: 5px solid var(--ocean); }
.ev-date b { display: block; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--navy); }
.ev-date span { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted); letter-spacing: .06em; }
.ev h4 { margin: 2px 0 2px; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.ev p { margin: 0; color: var(--muted); font-size: 15px; }
.ev .when { font-weight: 700; color: var(--ink); }
.k-social, .ev[data-k="social"] .ev-date { border-color: var(--red); }
.ev[data-k="volunteer"] .ev-date { border-color: #2fb37a; }
.ev[data-k="market"] .ev-date { border-color: #f2b233; }
.ev[data-k="beach"] .ev-date { border-color: var(--ocean); }
.ev[data-k="sports"] .ev-date { border-color: var(--navy); }
.tag { display: inline-block; margin-left: 6px; font-family: var(--body); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--deep); background: var(--sky2); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.empty { color: var(--muted); font-style: italic; padding: 8px 0; }

.note-mini { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.note-mini li { background: var(--white); border-radius: 12px; padding: 12px 14px; border-left: 5px solid var(--ocean); }
.note-mini b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); }
.note-mini span { font-size: 14px; color: var(--muted); }

.around { margin-top: 64px; }
.around-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.spot { background: var(--white); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 0 0 22px; }
.spot h3, .spot p, .spot .more { margin-left: 22px; margin-right: 22px; }
.spot h3 { font-size: 22px; margin-top: 18px; }
.spot p { color: var(--muted); margin-top: 8px; margin-bottom: 0; }
.spot-art { height: 150px; }
.spot-art svg { width: 100%; height: 100%; }
.art-field { background: linear-gradient(180deg, #bfe8ff, #e6f6ff); }
.art-field .grass { fill: #4cbf6b; } .art-field .dirt { fill: #e3b27a; } .art-field .base { fill: #fff; }
.art-beach { background: linear-gradient(180deg, #8fd8ff, #dff4ff); }
.art-beach .sunc { fill: #ffd34d; } .art-beach .sea { fill: var(--ocean); } .art-beach .sand { fill: var(--sand2); }
.art-beach .tower { fill: none; stroke: var(--navy); stroke-width: 3; } .art-beach .tower-top { fill: var(--red); }
.art-city .sky2 { fill: #ffe9c2; } .art-city .house { fill: var(--white); stroke: var(--navy); stroke-width: 3; } .art-city .h2 { fill: #d8efff; } .art-city .door { fill: var(--red); }
@media (max-width: 860px) { .around-grid { grid-template-columns: 1fr; } }

.join { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(135deg, var(--ocean), var(--deep)); color: var(--white); border-radius: 24px; padding: 34px 32px; position: relative; overflow: hidden; }
.join h2 { color: var(--white); font-size: clamp(26px, 3vw, 34px); }
.join p { margin: 8px 0 0; max-width: 54ch; color: #e1f3ff; }
.join .cta-row { margin-top: 0; }
.join .btn-blue { background: var(--white); color: var(--deep); }

/* Calendar */
.cal-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 36px; position: relative; z-index: 3; align-items: start; }
.cal, .cal-side { background: var(--white); border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 22px; min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head h2 { font-size: 28px; }
.cal-nav { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sky); color: var(--deep); font-size: 26px; line-height: 1; cursor: pointer; }
.cal-nav:hover { background: var(--sky2); }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow span { text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-bottom: 4px; }
.day { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px solid var(--line); background: #fbfdff; font: inherit; font-weight: 700; color: var(--ink); text-align: left; padding: 6px 8px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.day:hover { border-color: var(--ocean); }
.day.out { opacity: .35; }
.day.today { background: var(--sand); border-color: var(--sand2); }
.day.sel { background: var(--ocean); color: var(--white); border-color: var(--ocean); }
.dots { display: flex; gap: 3px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ocean); }
.dot.social { background: var(--red); } .dot.volunteer { background: #2fb37a; } .dot.market { background: #f2b233; } .dot.beach { background: var(--ocean); } .dot.sports { background: var(--navy); }
.day.sel .dot { box-shadow: 0 0 0 2px #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.k-social::before { background: var(--red); } .k-volunteer::before { background: #2fb37a; } .k-market::before { background: #f2b233; } .k-beach::before { background: var(--ocean); } .k-sports::before { background: var(--navy); }
.cal-side h3 { font-size: 22px; }
.cal-side .btn { margin-top: 18px; }
@media (max-width: 900px) { .cal-wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cal, .cal-side { padding: 14px; } .day { padding: 4px 5px; font-size: 13px; border-radius: 8px; } .cal-grid, .cal-dow { gap: 4px; } .dot { width: 6px; height: 6px; } }

/* Bulletin board: notes pinned to a cork board */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; position: relative; z-index: 3; }
.chips button { font: inherit; font-weight: 700; font-size: 15px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(18, 53, 91, .08); }
.chips button[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.cork { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 28px; border-radius: 24px; background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .25) 0 2px, transparent 3px) 0 0 / 22px 22px, linear-gradient(135deg, #e9c48e, #d9a866); border: 10px solid #b7834a; box-shadow: inset 0 2px 10px rgba(0, 0, 0, .15), var(--shadow); }
.note { position: relative; background: #fffbea; border-radius: 4px; padding: 28px 20px 18px; box-shadow: 0 8px 18px rgba(80, 50, 10, .25); transform: rotate(var(--r, -1deg)); transition: transform .2s; min-width: 0; }
.note:hover { transform: rotate(0) scale(1.02); }
.note::before { content: ""; position: absolute; top: 10px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a85, var(--red) 60%, #a32420); box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.note[data-k="sale"] { background: #e8f6ff; } .note[data-k="free"] { background: #e9fbef; } .note[data-k="lost"] { background: #fff0ee; } .note[data-k="help"] { background: #f3edff; }
.note .nk { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ocean); }
.note h3 { font-size: 21px; margin: 6px 0 6px; }
.note p { margin: 0; color: var(--ink); font-size: 15.5px; }
.note time { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .cork { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cork { grid-template-columns: 1fr; padding: 16px; border-width: 6px; } }

/* Forms */
.form-wrap { margin-top: 56px; }
.card-form { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; box-shadow: var(--shadow); display: grid; gap: 16px; max-width: 760px; overflow: hidden; }
.card-form { border-top: 6px solid var(--ocean); }
.card-form h2 { font-size: 30px; }
.card-form .fine { margin: -8px 0 0; color: var(--muted); }
.card-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card-form label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; min-width: 0; }
.card-form input, .card-form select, .card-form textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); background: #f7fbff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; }
.card-form input:focus, .card-form select:focus, .card-form textarea:focus { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 4px rgba(11, 120, 194, .15); background: var(--white); }
.card-form textarea { resize: vertical; }
.card-form button { justify-self: start; }
@media (max-width: 600px) { .card-form .row { grid-template-columns: 1fr; } .card-form { padding: 24px 18px; } }

/* Suggestion box */
.sugg { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 36px; position: relative; z-index: 3; align-items: start; }
.box-form { padding-top: 46px; }
.slot { position: absolute; top: 18px; left: 50%; width: 120px; height: 10px; margin-left: -60px; border-radius: 999px; background: var(--navy); box-shadow: inset 0 3px 4px rgba(0, 0, 0, .5); }
.ideas { background: var(--sand); border: 1px solid var(--sand2); border-radius: 22px; padding: 26px 24px; }
.ideas h3 { font-size: 22px; }
.ideas ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.ideas li { background: var(--white); border-radius: 14px; padding: 12px 14px; }
.ideas b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); }
.ideas span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 900px) { .sugg { grid-template-columns: 1fr; } }

/* Footer */
.foot { margin-top: 30px; background: var(--deep); color: #d8eeff; position: relative; }
.foot-wave { height: 70px; position: relative; overflow: hidden; background: #fbfdff; }
.foot-wave .waves { height: 70px; }
.foot-wave .w1 { fill: #6cc6f2; } .foot-wave .w2 { fill: var(--ocean); } .foot-wave .w3 { fill: var(--deep); }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 26px 20px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px; }
.brand-foot { color: var(--white); }
.brand-foot small { color: #b9dcf6; }
.foot p { margin: 12px 0 0; max-width: 46ch; font-size: 14.5px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-start; }
.foot nav a { color: var(--white); text-decoration: none; font-weight: 700; }
.foot nav a:hover { text-decoration: underline; }
.foot small { display: block; width: 100%; color: #b9dcf6; }

/* Hero scene: homes, Seaview fields, river trail, beach */
.scene-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; z-index: 1; }
.hero-short .scene-wrap { height: 210px; }
@media (max-width: 700px) {
  .scene-wrap { height: 240px; overflow: hidden; }
  .hero-short .scene-wrap { height: 180px; }
  .scene-wrap .scene { max-width: none; width: 1080px; height: 240px; animation: pan 75s linear infinite; }
  .hero-short .scene-wrap .scene { width: 810px; height: 180px; }
  @keyframes pan { 0% { transform: translateX(0); } 35%, 65% { transform: translateX(calc(100vw - 100%)); } 100% { transform: translateX(0); } }
}
.scene { width: 100%; height: 100%; }
.scene .lawn { fill: #9bd18b; }
.scene .wall { fill: #fffaf0; stroke: var(--navy); stroke-width: 2; } .scene .w2 { fill: #e3f3f8; }
.scene .roof { stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; } .scene .r1 { fill: var(--red); } .scene .r2 { fill: var(--ocean); } .scene .r3 { fill: var(--coral); }
.scene .door { fill: var(--navy); } .scene .win { fill: var(--sky2); stroke: var(--navy); stroke-width: 1.5; } .scene .garage { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.scene .fence { stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none; }
.scene .trunk { fill: none; stroke: #8a6a45; stroke-width: 6; stroke-linecap: round; } .scene .frond { fill: #3f9b6a; }
.scene .grass { fill: #5bbf6e; } .scene .infield { fill: #e2b07a; } .scene .base { fill: #fff; } .scene .backstop { fill: none; stroke: #fff; stroke-width: 3; }
.scene .pole { stroke: var(--navy); stroke-width: 3; } .scene .lamp { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.scene .flagpole { stroke: var(--navy); stroke-width: 2; } .scene .fs1 { fill: #fff; } .scene .fc { fill: var(--deep); } .scene .fstr { stroke: var(--red); stroke-width: 1.6; }
.scene .flag { animation: wave 3s ease-in-out infinite; transform-box: fill-box; }
.scene .levee { fill: #cfd8d6; } .scene .river { fill: var(--ocean); } .scene .ripple { fill: none; stroke: #8fd0ec; stroke-width: 2.5; stroke-linecap: round; animation: ripple 4s ease-in-out infinite; }
.scene .trail { stroke: #f2e6c9; stroke-width: 10; stroke-linecap: round; }
.scene .bike { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; animation: ride 14s linear infinite; }
.scene .bike .rider { fill: var(--red); stroke: none; }
.scene .sand { fill: #f3dfb0; } .scene .sea { fill: #2a8cc4; }
.scene .surf { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .85; animation: ripple 5s ease-in-out infinite; } .scene .s2 { animation-delay: -2s; }
.scene .legs, .scene .ramp { stroke: #fff; stroke-width: 4; stroke-linecap: round; fill: none; }
.scene .deck { fill: #fff; } .scene .hut { fill: #8ccbe8; stroke: #fff; stroke-width: 3; } .scene .hroof { fill: var(--red); } .scene .hwin { fill: var(--navy); }
.scene .pel { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; opacity: .7; }
.scene .p1 { animation: glide 26s linear infinite; } .scene .p2 { animation: glide 26s linear infinite -1.2s; } .scene .p3 { animation: glide 26s linear infinite -2.2s; }
.scene .lbl rect { fill: rgba(255, 255, 255, .92); stroke: var(--line); }
.scene .lbl text { font-family: var(--display); font-weight: 600; font-size: 16px; fill: var(--navy); text-anchor: middle; }
@keyframes ride { from { transform: translate(780px, 222px); } to { transform: translate(1200px, 222px); } }
@keyframes glide { 0% { transform: translate(700px, 70px); } 50% { transform: translate(1000px, 50px); } 100% { transform: translate(1460px, 80px); } }
@keyframes ripple { 50% { transform: translateX(-10px); } }
@keyframes wave { 50% { transform: translate(196px, 52px) skewY(-4deg); } }
.scene .flag { transform: translate(196px, 52px); }

/* Neighborhood map */
.sec-lede { margin: 10px 0 0; max-width: 62ch; color: var(--muted); font-size: 17px; }
.map-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-top: 20px; align-items: stretch; }
.map-box { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 440px; background: var(--sky); }
.nb-map { width: 100%; height: 100%; min-height: 440px; }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.places li { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.places li.on { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(18, 113, 168, .15); }
.places button { all: unset; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; cursor: pointer; width: 100%; }
.places button:focus-visible { outline: 3px solid #ffcf4a; outline-offset: 4px; border-radius: 8px; }
.places b { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--navy); grid-column: 2; }
.places span:not(.pin) { grid-column: 2; color: var(--muted); font-size: 14.5px; }
.places .pin { grid-row: 1 / span 2; }
.places .more { margin: 6px 0 0 46px; font-size: 14px; }
.pin, .nb-pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); color: #fff; font-family: var(--display); font-weight: 700; font-size: 14px; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); border: 2px solid #fff; }
.pin { transform: none; border-radius: 50%; }
.nb-pin { background: none; border: 0; }
.nb-pin span { line-height: 1; }
.nb-pin span, .pin { background: var(--ocean); }
.p-home span, .pin.p-home { background: var(--red); }
.p-field span, .pin.p-field { background: #2f9e5b; }
.p-trail span, .pin.p-trail { background: var(--ocean); }
.p-beach span, .pin.p-beach { background: var(--coral); }
.nb-pin span { transform: rotate(-45deg); }
.leaflet-popup-content { font-family: var(--body); color: var(--ink); }
.map-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; }
.map-links a { font-weight: 800; text-decoration: none; }
.map-links a:hover { text-decoration: underline; }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; } .map-box, .nb-map { min-height: 340px; } }
.nb-pin span { transform: none; border-radius: 50%; }
@media (max-width: 700px) { .tiles, .cal-wrap, .chips, .sugg { margin-top: 24px; } }

/* Hero layout with the route map card */
.hero-copy { min-width: 0; }
.route-card { margin: 0; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 18px 40px rgba(20, 48, 77, .18); border: 1px solid var(--line); }
.route { width: 100%; height: auto; border-radius: 14px; background: #f1ede3; }
.route-card figcaption { font-size: 13px; color: var(--muted); padding: 8px 6px 2px; line-height: 1.4; }
.route .beach { fill: #f3dfb0; } .route .ocean { fill: url(#sea); } .route .foam { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 10 8; animation: foam 6s linear infinite; }
.route .road { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; } .route .pch { stroke: #fbe7a8; }
.route .hood { fill: rgba(230, 57, 70, .14); stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 4; }
.route .home-dot { fill: var(--red); stroke: #fff; stroke-width: 3; }
.route .fld { fill: #5bbf6e; stroke: #fff; stroke-width: 1.5; } .route .dia { fill: #e2b07a; }
.route .pole { stroke: var(--navy); stroke-width: 1.6; }
.route .cloth { transform-box: fill-box; transform-origin: left center; animation: flutter 2.4s ease-in-out infinite; }
.route .river { fill: none; stroke: #3d9fd6; stroke-width: 16; stroke-linecap: round; }
.route .trail { fill: none; stroke: #c8a96b; stroke-width: 3; stroke-dasharray: 2 5; stroke-linecap: round; }
.route .walk { fill: none; stroke: var(--red); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.route .route-line { fill: none; stroke: none; }
.route .rider-dot { fill: var(--red); stroke: #fff; stroke-width: 3; }
.route .mk { fill: #fff; stroke: var(--ocean); stroke-width: 3; } .route .mk-beach { stroke: var(--coral); }
.route .lb rect { fill: #fff; stroke: var(--line); } .route .lb text { font-family: var(--display); font-weight: 600; font-size: 14px; fill: var(--navy); text-anchor: middle; }
.route .lb.small text { font-size: 12px; } .route .t-home rect { fill: var(--red); stroke: none; } .route .t-home text { fill: #fff; }
.route .t-beach rect { fill: var(--coral); stroke: none; } .route .t-beach text { fill: #fff; }
.route .lb.big rect { fill: var(--navy); stroke: none; } .route .lb.big text { fill: #fff; font-size: 16px; } .route .lb.big .sub { font-family: var(--body); font-weight: 600; font-size: 11.5px; fill: #cfe6f5; }
.route .water { font-family: var(--display); font-weight: 600; font-size: 14px; fill: #fff; letter-spacing: .08em; text-anchor: middle; }
.route .water.big { font-size: 20px; }
.route .roadname { font-family: var(--body); font-weight: 700; font-size: 11px; fill: #8a7440; text-anchor: middle; letter-spacing: .04em; }
.route .north circle { fill: #fff; stroke: var(--line); } .route .north path { fill: var(--navy); } .route .north text { font-family: var(--display); font-weight: 700; font-size: 12px; fill: var(--navy); text-anchor: middle; }
@keyframes flutter { 50% { transform: skewY(5deg) scaleX(.94); } }
@keyframes foam { to { stroke-dashoffset: -36; } }

@media (prefers-reduced-motion: reduce) { .route .cloth, .route .foam { animation: none; } }

/* Google map */
.map-box iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
@media (max-width: 900px) { .map-box iframe { min-height: 340px; } }

/* Footer flag */
.proud { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #fff !important; }
.usflag { width: 54px; height: auto; flex: none; border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.usflag .fl-cloth { transform-origin: left center; animation: flutter 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .usflag .fl-cloth { animation: none; } }

/* Map section: route card beside the Google map */
.map-grid { grid-template-columns: minmax(260px, 360px) 1fr; }
.gm { display: grid; gap: 14px; align-content: start; min-width: 0; }
.gm .map-box, .gm .map-box iframe { min-height: 380px; }
.gm .places { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gm .places li { padding: 10px 12px; }
.gm .places b { font-size: 16px; }
.gm .places span:not(.pin) { font-size: 13.5px; }
.gm .more { margin-top: 0; }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; } .route-card { max-width: 420px; justify-self: center; width: 100%; } }

/* Playground and kite */
.scene .mulch { fill: #d9b98a; }
.scene .ladder, .scene .swingframe { fill: none; stroke: var(--ocean); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.scene .tower-top { fill: #ffd23f; stroke: var(--navy); stroke-width: 1.5; } .scene .roofp { fill: var(--red); }
.scene .slide { fill: none; stroke: #ffd23f; stroke-width: 9; stroke-linecap: round; }
.scene .chain { stroke: var(--navy); stroke-width: 1.6; } .scene .seat { fill: var(--red); }
.scene .kid-head { fill: #f2c39b; stroke: var(--navy); stroke-width: 1.5; } .scene .kid-body { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes swing { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } }
.scene .kite { animation: kite 5s ease-in-out infinite; }
.scene .kite-body { fill: var(--red); stroke: #fff; stroke-width: 2; } .scene .kite-x { stroke: #fff; stroke-width: 1.5; }
.scene .kite-tail { fill: none; stroke: var(--ocean); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 6; }
.scene .kite-string { stroke: var(--navy); stroke-width: 1; opacity: .5; }
@keyframes kite { 0%, 100% { transform: translate(760px, 40px) rotate(-6deg); } 50% { transform: translate(772px, 28px) rotate(6deg); } }

/* Kids' corner */
.kids { margin-top: 64px; position: relative; background: linear-gradient(135deg, #fff6d6, #ffe3ec 55%, #dff3ff); border-radius: 28px; padding: 34px 30px; overflow: hidden; }
.kids::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 63, .5), transparent 70%); }
.kids .sec-head h2 em { color: var(--ocean); }
.kid-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; position: relative; z-index: 1; }
.kid { background: #fff; border-radius: 22px; padding: 20px 18px; box-shadow: 0 8px 20px rgba(20, 48, 77, .08); border: 3px solid transparent; transition: transform .2s; }
.kid:hover { transform: translateY(-4px) rotate(-1deg); }
.kid:nth-child(1) { border-color: #ffd23f; } .kid:nth-child(2) { border-color: #7fd3a0; } .kid:nth-child(3) { border-color: #8fd0ec; } .kid:nth-child(4) { border-color: #ff9fb3; }
.kid .big-ico { width: 64px; height: 64px; }
.kid h3 { font-size: 21px; margin: 10px 0 6px; }
.kid p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .kid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kid-grid { grid-template-columns: 1fr; } .kids { padding: 26px 18px; } }
@media (prefers-reduced-motion: reduce) { .scene .s-a, .scene .kite { animation: none; } .scene .kite { transform: translate(760px, 40px); } }

/* Cards: accent bar drawn inside the card instead of a thick top border */
.tile { border-top: 1px solid var(--line); background: linear-gradient(var(--acc, var(--ocean)), var(--acc, var(--ocean))) top / 100% 6px no-repeat, #fff; }
.t-cal { --acc: var(--red); } .t-board { --acc: var(--ocean); } .t-idea { --acc: #f2b233; }
.card-form { border-top: 1px solid var(--line); background: linear-gradient(var(--ocean), var(--ocean)) top / 100% 6px no-repeat, #fff; }

/* PCH bridge, cars and the beach bike path */
.scene .bank { fill: #9bd18b; }
.scene .pier { stroke: #b9c3c9; stroke-width: 10; }
.scene .arch { fill: none; stroke: #d7dee2; stroke-width: 6; }
.scene .deck { fill: #5d6b78; }
.scene .lane { stroke: #ffd23f; stroke-width: 2; stroke-dasharray: 14 10; }
.scene .rail { fill: none; stroke: #e6ecef; stroke-width: 2.5; }
.scene .car rect { fill: var(--red); } .scene .car .cab { fill: #cfe9f6; stroke: var(--navy); stroke-width: 1.5; } .scene .car circle { fill: var(--navy); }
.scene .c-2 rect { fill: #ffd23f; }
.scene .c-1 { animation: drive 11s linear infinite; } .scene .c-2 { animation: drive2 15s linear infinite; animation-delay: -6s; }
@keyframes drive { from { transform: translate(780px, 225px); } to { transform: translate(1460px, 225px); } }
@keyframes drive2 { from { transform: translate(1460px, 233px) scaleX(-1); } to { transform: translate(780px, 233px) scaleX(-1); } }
.scene .pch-sign { font-family: var(--display); font-weight: 700; font-size: 13px; fill: #fff; text-anchor: middle; }
.scene .pch .sign { fill: #2f7d4f; stroke: #fff; stroke-width: 1.5; } .scene .pch .post { stroke: #8a959e; stroke-width: 3; }
.scene .beachpath { fill: none; stroke: #fff6e4; stroke-width: 9; stroke-linecap: round; }
.scene .bike .helmet { fill: var(--ocean); stroke: none; }
.scene .bike { animation: ride 12s ease-in-out infinite alternate; }
@keyframes ride { from { transform: translate(1016px, 284px); } to { transform: translate(1210px, 290px); } }
@media (prefers-reduced-motion: reduce) { .scene .car, .scene .bike { animation: none; } .scene .c-1 { transform: translate(760px, 210px); } .scene .c-2 { transform: translate(1100px, 220px) scaleX(-1); } .scene .bike { transform: translate(1100px, 286px); } }

/* Bike bridge over PCH */
.scene .road { fill: #5d6b78; } .scene .lane { stroke: #ffd23f; stroke-width: 3; stroke-dasharray: 12 10; } .scene .edge { stroke: #fff; stroke-width: 2; }
.scene .car-top rect { fill: var(--red); } .scene .car-top.c2 rect { fill: #ffd23f; } .scene .car-top .glass { fill: #cfe9f6; }
.scene .pch-road { font-family: var(--display); font-weight: 700; font-size: 15px; fill: #fff; text-anchor: middle; letter-spacing: .1em; paint-order: stroke; stroke: #5d6b78; stroke-width: 6px; }
.scene .trail { stroke: #e9d6a8; stroke-width: 10; stroke-linecap: round; }
.scene .span { fill: none; stroke: #f4f7f9; stroke-width: 10; stroke-linecap: round; }
.scene .rail2 { fill: none; stroke: var(--ocean); stroke-width: 3; }
.scene .truss { fill: none; stroke: var(--ocean); stroke-width: 2.5; stroke-linecap: round; }
.scene .col { stroke: #b9c3c9; stroke-width: 8; }
.scene .route-hide { fill: none; stroke: none; }
.scene .bike2 { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.scene .bike2 .rider { fill: var(--red); stroke: none; } .scene .bike2 .helmet { fill: var(--ocean); stroke: none; }

/* Bike path and the small PCH underpass */
.scene .bikepath { fill: none; stroke: #d9d3c4; stroke-width: 10; stroke-linecap: round; }
.scene .tunnel { fill: #39434d; }
.scene .overpass { fill: #c3ccd1; stroke: #9aa6ad; stroke-width: 1.5; }
.scene .pchdeck { fill: #5d6b78; } .scene .pchlane { stroke: #ffd23f; stroke-width: 1.5; stroke-dasharray: 6 5; }
.scene .bike3 { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.scene .bike3 .rider { fill: var(--red); stroke: none; } .scene .bike3 .helmet { fill: var(--ocean); stroke: none; }
/* Wide screens: scale the banner evenly instead of cropping it, so labels never ride up into the buttons */
@media (min-width: 701px) {
  .scene-wrap { height: auto; aspect-ratio: 1440 / 320; }
  .scene { display: block; }
  .hero { padding-bottom: max(230px, calc(100vw * 320 / 1440 - 30px)); }
  .hero-short { padding-bottom: max(200px, calc(100vw * 320 / 1440 - 60px)); }
  .hero-short .scene-wrap { height: auto; }
}

/* PCH overpass */
.scene .underpass { fill: #3d4852; }
.scene .embank { fill: #8fc77f; } .scene .embank.sandy { fill: #ead39f; }
.scene .abut { fill: #c9d1d6; }
.scene .pchdeck { fill: #56636f; } .scene .pchside { fill: #c9d1d6; }
.scene .pchlane { stroke: #ffd23f; stroke-width: 1.8; stroke-dasharray: 10 8; }
.scene .guard { fill: none; stroke: #e7ecef; stroke-width: 2.2; stroke-linecap: round; }

/* Family on bikes */
.scene .fam .wh { fill: none; stroke: var(--navy); stroke-width: 2.4; }
.scene .fam .frame { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.scene .f-dad .frame { stroke: var(--ocean); } .scene .f-mom .frame { stroke: var(--red); } .scene .f-kid .frame { stroke: #2f9e5b; }
.scene .fam .leg, .scene .fam .arm { fill: none; stroke: #2b3a4a; stroke-width: 3; stroke-linecap: round; }
.scene .fam .torso { fill: none; stroke-width: 6; stroke-linecap: round; }
.scene .dadc { stroke: #1d5f96; } .scene .momc { stroke: #ff8a5b; } .scene .kidc { stroke: #ffd23f; } .scene .tod { stroke: #ff9fb3; stroke-width: 5; }
.scene .fam .face { fill: #f2c39b; stroke: none; }
.scene .dadch { fill: var(--navy); } .scene .momch { fill: var(--red); } .scene .kidch { fill: #2f9e5b; } .scene .todh { fill: #ffd23f; }
.scene .fam .hel { stroke: none; }
.scene .cseat { fill: #ffd23f; stroke: var(--navy); stroke-width: 1.2; }
.scene .fam .hair { fill: none; stroke: #6b4a2b; stroke-width: 3; stroke-linecap: round; }

/* PCH heading toward the horizon */
.scene .pch-road { fill: #5d6b78; }
.scene .pch-line { stroke: #ffd23f; stroke-width: 2; stroke-dasharray: 5 6; }
.scene .pch-edge { stroke: #fff; stroke-width: 1.6; opacity: .8; }
.scene .pch-open { fill: #2f3a44; }
.scene .pch-wall { stroke: #d5dce0; stroke-width: 5; stroke-linecap: round; }
.scene .pch-rail { stroke: #e7ecef; stroke-width: 2.5; stroke-linecap: round; opacity: .9; }

/* ---------- App shell ---------- */
.acct-btn { background: var(--red); color: #fff !important; margin-left: 6px; }
.acct-btn:hover { background: var(--red-d) !important; }
.tabbar { display: none; }
@media (max-width: 820px) {
  .menu-btn { display: none; }
  .nav { display: none !important; }
  .tabbar { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(20, 48, 77, .08); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 11.5px; padding: 4px 0; border-radius: 12px; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current="page"] { color: var(--ocean); background: var(--sky); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
@media (display-mode: standalone) { .top { padding-top: env(safe-area-inset-top); } }
.install-tip { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; box-shadow: 0 16px 40px rgba(20, 48, 77, .2); max-width: 480px; margin: 0 auto; }
.install-tip img { border-radius: 10px; flex: none; }
.install-tip p { margin: 0; font-size: 14.5px; flex: 1; line-height: 1.55; }
.install-tip .btn { padding: 8px 16px; font-size: 15px; }
.install-tip .it-x { border: 0; background: none; font-size: 24px; color: var(--muted); cursor: pointer; }
@media (min-width: 821px) { .install-tip { bottom: 20px; } }


/* ---------- Account, forms and admin ---------- */
.acct-wrap, #admin { margin-top: 36px; }
.tabs { display: inline-flex; gap: 6px; background: var(--sky); padding: 6px; border-radius: 999px; margin-bottom: 16px; }
.tabs button { font: inherit; font-weight: 800; border: 0; background: none; color: var(--deep); padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 3px 10px rgba(20, 48, 77, .12); }
.check-row { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; font-weight: 600 !important; }
.check-row input { width: 20px !important; height: 20px; margin-top: 2px; flex: none; }
.form-msg { margin: 0; min-height: 1.4em; font-weight: 700; color: var(--deep); }
.gate .cta-row { margin-top: 6px; }
.acct-status { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; font-weight: 800; background: var(--sand); color: #8a6100; }
.acct-status.s-approved { background: #e3f6ea; color: #1f7a44; } .acct-status.s-denied, .acct-status.s-suspended { background: #fde8ea; color: var(--red-d); }
.note .report { margin-top: 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); background: none; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.note .report:hover { color: var(--red); border-color: var(--red); }
.ev .by { font-size: 13px; }
.adm { margin-bottom: 40px; }
.adm h2 { font-size: 26px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.adm .count { font-size: 14px; background: var(--ocean); color: #fff; border-radius: 999px; padding: 2px 10px; font-family: var(--body); }
.adm-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
.adm-row b { display: block; font-family: var(--display); font-weight: 600; color: var(--navy); }
.adm-row span { display: block; color: var(--muted); font-size: 14px; }
.adm-row .why { color: var(--red-d); }
.adm-act { display: flex; gap: 8px; }
.adm-act .btn { padding: 8px 16px; font-size: 15px; }
.adm-form { margin-top: 14px; }
.prose { max-width: 760px; margin-top: 36px; font-size: 17px; }
.prose h2 { font-size: 24px; margin: 26px 0 8px; }
.prose li { margin-bottom: 10px; }

/* ---------- Neighbors helping neighbors ---------- */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.how-step { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); }
.hs-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--display); font-weight: 700; }
.how-step h3 { font-size: 20px; margin: 10px 0 4px; } .how-step p { margin: 0; color: var(--muted); }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.help-card { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--coral); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.help-card.t-offer { border-left-color: #2f9e5b; }
.hc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hc-ico { font-size: 22px; }
.hc-type { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c2552f; }
.t-offer .hc-type { color: #1f7a44; }
.tag-ok { background: #e3f6ea; color: #1f7a44; }
.help-card h3 { font-size: 21px; margin: 8px 0 4px; }
.help-card p { margin: 4px 0; color: var(--ink); }
.help-card .hc-meta { color: var(--muted); font-size: 14px; }
.hc-act { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hc-act .btn { padding: 8px 18px; font-size: 15px; }
.help-card .report { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.hc-form { display: grid; gap: 8px; margin-top: 10px; }
.hc-form label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.hc-form textarea { font: inherit; font-size: 15px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; }
.hc-form .btn { justify-self: start; padding: 8px 18px; font-size: 15px; }
.hc-mine { color: var(--ocean) !important; font-weight: 700; font-size: 14px; }
.my-help { margin-top: 30px; } .my-help h2 { font-size: 26px; margin-bottom: 10px; }
.my-help .reply { display: block; margin-top: 4px; color: var(--ink) !important; }
.help-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.help-split .card-form { max-width: none; }
.seg { display: inline-flex; background: var(--sky); border-radius: 999px; padding: 5px; gap: 4px; }
.seg label { display: block !important; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px !important; }
.seg span { display: block; padding: 8px 16px; border-radius: 999px; font-weight: 800; color: var(--deep); }
.seg input:checked + span { background: #fff; box-shadow: 0 3px 10px rgba(20, 48, 77, .12); }
.seg input:focus-visible + span { outline: 3px solid #ffcf4a; }
@media (max-width: 900px) { .how, .help-grid, .help-split { grid-template-columns: 1fr; } }

/* Home: helpers section */
.helpers { margin-top: 64px; }
.helpers-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; background: linear-gradient(135deg, #fff1e6, #fdf6ec 60%, #eaf7f0); border: 1px solid #f3dcc6; border-radius: 26px; padding: 30px; }
.helpers h2 { font-size: clamp(26px, 3.2vw, 36px); margin-top: 6px; } .helpers h2 em { color: var(--coral); }
.helpers p { color: var(--ink); max-width: 46ch; }
.help-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.help-mini li { background: #fff; border-radius: 14px; padding: 12px 14px; border-left: 5px solid var(--coral); }
.help-mini li.t-offer { border-left-color: #2f9e5b; }
.help-mini span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.help-mini b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--navy); }
@media (max-width: 860px) { .helpers-in { grid-template-columns: 1fr; padding: 24px 18px; } }
@media (max-width: 1100px) and (min-width: 821px) { .nav a { padding: 9px 10px; font-size: 15px; } }
@media (max-width: 420px) { .tabbar a { font-size: 10.5px; } }

/* Soft sun */
.sun { position: absolute; right: max(4vw, 24px); top: 34px; width: 170px; height: 170px; opacity: .9; }
.sun svg { width: 100%; height: 100%; display: block; }
.sun .rays { stroke: #ffd968; stroke-width: 5; stroke-linecap: round; opacity: .55; transform-origin: 100px 100px; animation: rays 80s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.hero-short .sun { width: 130px; height: 130px; top: 26px; }
@media (max-width: 700px) { .sun { width: 96px; height: 96px; top: 18px; right: 14px; } .hero-short .sun { width: 84px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { .sun .rays { animation: none; } }
.nav a { white-space: nowrap; }

/* Seaview flag */
.scene .svpole { stroke: #8a959e; stroke-width: 2.4; } .scene .svknob { fill: #f2c94c; }
.scene .svcloth { transform-box: fill-box; transform-origin: left center; animation: svwave 3.2s ease-in-out infinite; }
@keyframes svwave { 50% { transform: skewY(-4deg) scaleX(.96); } }
@media (prefers-reduced-motion: reduce) { .scene .svcloth { animation: none; } }

/* Shade trees, scoreboard and bleachers */
.scene .tr-trunk { fill: #8a6a45; }
.scene .tr-a { fill: #4fae6a; } .scene .tr-b { fill: #3f9b5c; } .scene .tr-c { fill: #6cc184; }
.scene .sb-post { stroke: var(--navy); stroke-width: 3; }
.scene .sb-board { fill: #1f5e3b; stroke: #fff; stroke-width: 2; }
.scene .sb-trim { fill: #f2c94c; }
.scene .sb-lbl { font-family: var(--body); font-weight: 800; font-size: 8.5px; fill: #fff; letter-spacing: .06em; }
.scene .sb-cell { fill: #10311f; }
.scene .sb-num { font-family: var(--display); font-weight: 700; font-size: 10px; fill: #ffd23f; text-anchor: middle; }
.scene .sb-dot { fill: #ff6b5e; } .scene .sb-dot.off { fill: #6b2a26; }
.scene .bl-frame { fill: none; stroke: #8a959e; stroke-width: 2.2; }
.scene .bl-seat { fill: #c9d1d6; stroke: #8a959e; stroke-width: 1; }
.scene .bl-fan { stroke: none; } .scene .f1 { fill: var(--red); } .scene .f2 { fill: #ffd23f; } .scene .f3 { fill: var(--ocean); }

/* Phones: the home banner fills exactly one screen, with the bike family as the last thing above the tab bar */
@media (max-width: 700px) {
  .hero-home { display: flex; flex-direction: column; padding: 22px 0 0; min-height: calc(100svh - 67px - 64px - env(safe-area-inset-bottom)); box-sizing: border-box; }
  .hero-home .hero-in { flex: 0 0 auto; }
  .hero-home .scene-wrap { position: relative; margin-top: auto; flex: 0 0 auto; height: 200px; }
  .hero-home .scene-wrap .scene { width: 900px; height: 200px; }
  .hero-home .waves { display: none; }
  .hero-home h1 { font-size: 38px; margin-top: 6px; }
  .hero-home .lede { font-size: 16.5px; margin-top: 10px; }
  .hero-home .cta-row { flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
  .hero-home .cta-row .btn { padding: 11px 14px; font-size: 15.5px; white-space: nowrap; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .hero-home .lede { font-size: 15.5px; }
  .hero-home h1 { font-size: 34px; }
  .hero-home .scene-wrap { height: 170px; } .hero-home .scene-wrap .scene { width: 765px; height: 170px; }
}
@media (display-mode: standalone) and (max-width: 700px) { .hero-home { min-height: calc(100svh - 67px - env(safe-area-inset-top) - 64px - env(safe-area-inset-bottom)); } }
@media (max-width: 700px) {
  .hero-home .scene-wrap { height: min(300px, 32svh); }
  .hero-home .scene-wrap .scene { height: min(300px, 32svh); width: calc(min(300px, 32svh) * 4.5); }
  .hero-home .sun { top: auto; bottom: calc(min(300px, 32svh) + 6svh); right: 18px; width: 118px; height: 118px; }
  .hero-home .c1 { --y: 46svh; } .hero-home .c2 { --y: 56svh; } .hero-home .c3 { --y: 40svh; } .hero-home .c5 { --y: 63svh; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .hero-home .scene-wrap, .hero-home .scene-wrap .scene { height: 170px; } .hero-home .scene-wrap .scene { width: 765px; }
  .hero-home .sun { display: none; }
}
@media (max-width: 700px) { .hero-home .scene-wrap .scene { position: relative; top: 2%; } }
/* Tab bar: always one row, labels shrink to fit */
@media (max-width: 820px) {
  .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .tabbar a { font-size: clamp(9.5px, 2.7vw, 12px); white-space: nowrap; min-width: 0; }
  .tabbar svg { width: clamp(20px, 5.6vw, 24px); height: clamp(20px, 5.6vw, 24px); }
}

/* The wave and the surfer */
.scene .wv-body { fill: url(#waveFace); }
.scene .wv-lip { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .95; }
.scene .wv-foam { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 5; opacity: .85; animation: foam 3s linear infinite; }
.scene .wv-spray { fill: #fff; animation: spray 2.4s ease-in-out infinite; } .scene .sp2 { animation-delay: -.8s; } .scene .sp3 { animation-delay: -1.6s; }
.scene .bigwave { transform-box: fill-box; transform-origin: 50% 100%; animation: swell 5s ease-in-out infinite; }
.scene .surfer { animation: carve 5s ease-in-out infinite; }
.scene .sf-board { fill: #ffd23f; stroke: var(--red); stroke-width: 1.4; }
.scene .sf-leg, .scene .sf-arm { fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.scene .sf-body { stroke: var(--navy); stroke-width: 4.4; stroke-linecap: round; }
.scene .sf-head { fill: #f2c39b; }
@keyframes swell { 50% { transform: scaleY(1.05); } }
@keyframes carve { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -7px); } }
@keyframes spray { 0%, 100% { opacity: 0; transform: translate(0, 0); } 40% { opacity: .9; } 80% { opacity: 0; transform: translate(5px, -6px); } }
@media (prefers-reduced-motion: reduce) { .scene .bigwave, .scene .surfer, .scene .wv-spray, .scene .wv-foam { animation: none; } }
.scene .sw-ring { fill: none; stroke: #fff; stroke-width: 1.8; opacity: .8; }
.scene .sw-head { fill: #f2c39b; } .scene .sw-cap { fill: var(--red); } .scene .sw-hair { fill: #6b4a2b; }
.scene .swimmer { animation: bob 3.2s ease-in-out infinite; } .scene .sw2 { animation-delay: -1.4s; animation-duration: 3.8s; }
@keyframes bob { 50% { transform: translateY(2.5px); } }
@media (prefers-reduced-motion: reduce) { .scene .swimmer { animation: none; } }
.scene .sw-water { fill: #2a8cc4; }

/* Kids playing ball */
.scene .bb-leg { fill: none; stroke: #f4f1e8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene .bb-shirt { stroke: #0b6b3a; stroke-width: 3.4; stroke-linecap: round; }
.scene .bb-face { fill: #f2c39b; }
.scene .bb-cap { fill: #f2c94c; stroke: #f2c94c; stroke-width: 1; stroke-linecap: round; }
.scene .bb-arm { stroke: #0b6b3a; stroke-width: 1.6; stroke-linecap: round; }
.scene .bat { stroke: #b07a3a; stroke-width: 1.8; stroke-linecap: round; }
.scene .bb-glove { fill: #8a5a2b; }
.scene .bb-ball { fill: #fff; stroke: #d0d0d0; stroke-width: .4; }

/* Route map: streets, bridge and mileage */
.route .road.st { stroke: #fff; stroke-width: 6; }
.route .hbridge rect { fill: #b9c3c9; } .route .hbridge path { stroke: #5d6b78; stroke-width: 1.6; }
.route .mk-st { stroke: var(--navy); fill: #fff; }
.route .stname { font-family: var(--body); font-weight: 800; font-size: 12px; fill: var(--navy); paint-order: stroke; stroke: #f1ede3; stroke-width: 4px; stroke-linejoin: round; }
.route .stname.sm { font-size: 10px; fill: #5d6b78; }
.route .mi rect { fill: var(--ocean); } .route .mi text { font-family: var(--display); font-weight: 600; font-size: 12px; fill: #fff; text-anchor: middle; }
.route .coastmi { font-family: var(--body); font-weight: 800; font-size: 12px; fill: #fff; letter-spacing: .02em; }
.biz-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: start; } @media (max-width: 900px) { .biz-split { grid-template-columns: 1fr; } } .biz-split .card-form { max-width: none; }

/* Businesses: coming-soon teaser */
.teaser-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.teaser { position: relative; display: grid; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); overflow: hidden; }
.teaser .t-ico { font-size: 28px; }
.teaser b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.teaser .t-soon { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); background: #fde8ea; border-radius: 999px; padding: 3px 10px; }
.teaser .t-blur { display: grid; gap: 7px; margin-top: 6px; filter: blur(3px); opacity: .7; }
.teaser .t-blur i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--sky2), var(--sand2)); }
.teaser .t-blur i:nth-child(2) { width: 80%; } .teaser .t-blur i:nth-child(3) { width: 60%; }
.teaser::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 3.6s ease-in-out infinite; }
.teaser:nth-child(2)::after { animation-delay: .4s; } .teaser:nth-child(3)::after { animation-delay: .8s; } .teaser:nth-child(4)::after { animation-delay: 1.2s; } .teaser:nth-child(5)::after { animation-delay: 1.6s; } .teaser:nth-child(6)::after { animation-delay: 2s; }
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }
.teaser-note { margin: 18px 0 0; color: var(--muted); font-weight: 700; text-align: center; }
@media (max-width: 860px) { .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .teaser-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .teaser::after { animation: none; display: none; } }

/* City services: trash and street sweeping */
.dot.city { background: #7a8794; } .k-city::before { background: #7a8794; }
.ev[data-k="city"] .ev-date { border-color: #7a8794; }
.city-wrap { margin-top: 40px; }
.city-card { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow); }
.city-card h2 { margin: 4px 0 16px; }
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.city-grid h3 { font-size: 19px; margin: 0 0 6px; color: var(--navy); }
.city-grid p { margin: 0 0 8px; color: var(--muted); }
@media (max-width: 700px) { .city-grid { grid-template-columns: 1fr; } .city-card { padding: 20px; } }

/* Date, time and weather bar, on every page */
.nowbar { background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.nowbar-in { max-width: 1120px; margin: 0 auto; padding: 5px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; white-space: nowrap; overflow: hidden; }
.nb-date { white-space: pre; }
.nb-wx { white-space: pre; color: #dff1fd; } .nb-wx b { color: #fff; font-size: 14px; }
@media (max-width: 480px) { .nowbar-in { padding: 4px 14px; font-size: 12px; } .nb-hl { display: none; } }
@media (display-mode: standalone) { .top { padding-top: 0; } .nowbar { padding-top: env(safe-area-inset-top); } }

/* Fence Wave logo: white disc behind it on the dark footer */
.brand-foot img { background: #fff; border-radius: 50%; padding: 5px; box-sizing: border-box; }

/* Calendar views: neighborhood and city */
.cal-views { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cv { display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 800; font-size: 15px; color: var(--ink); background: var(--white); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.cv img { height: 36px; width: auto; flex: none; }
.cv:hover { border-color: var(--sky2); }
.cv[aria-pressed="true"] { border-color: var(--ocean); background: #eef8fd; box-shadow: 0 6px 16px rgba(18, 113, 168, .16); color: var(--navy); }
.cv[aria-pressed="false"] img { opacity: .55; filter: grayscale(.4); }
@media (max-width: 480px) { .cv { flex-direction: column; gap: 4px; font-size: 13px; padding: 8px 6px; } .cv img { height: 30px; } }

/* Home: next pickup line */
.pickup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; background: #eef8fd; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; color: var(--ink); }
.pickup img { height: 26px; width: auto; }
.pickup span { flex: 1 1 200px; } .pickup i { font-style: normal; margin: 0 6px; color: var(--muted); }
.pickup .pk-hol { color: var(--muted); }
.pickup a { font-weight: 800; color: var(--ocean); text-decoration: none; white-space: nowrap; }
.legend[hidden] { display: none; }
.pickup .pk-list { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.pickup .pk-item { flex: none; }

/* Calendar dots: blue for neighborhood, green for Huntington Beach */
.dot.dot-local, .k-local::before { background: var(--ocean); }
.dot.dot-city, .k-hb::before { background: #2fb37a; }
.ev[data-k="city"] .ev-date { border-color: #2fb37a; }
.link-btn { font: inherit; font-style: normal; font-weight: 800; color: var(--ocean); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.day.sel .dot.dot-local { background: #9fdcff; }

/* River channel beside PCH in the banner */
.scene .channel-bank { fill: #6fb86a; }
.scene .channel { fill: #3fa3d6; }
.scene .channel-shine { fill: none; stroke: #bfe7fb; stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
.scene .channel-rail { fill: none; stroke: #8a6a45; stroke-width: 1.4; stroke-linecap: round; }

/* Skateboarders on the bike path */
.scene .fam .board { fill: none; stroke: #c0392b; stroke-width: 2.4; stroke-linecap: round; }
.scene .fam .swh { fill: var(--navy); }
.scene .skac { stroke: #2fb37a; } .scene .skbc { stroke: #8e5cd9; }
.scene .skah { fill: #ff8a5b; } .scene .skbh { fill: #1271a8; }

/* Mom with a stroller and a little one walking */
.scene .wmc { stroke: #2a9d8f; } .scene .wkc { stroke: #ff6fa0; stroke-width: 7; }
.scene .whair { fill: #6b4a2b; } .scene .kidh2 { fill: #ffd23f; }
.scene .fam .sframe { fill: none; stroke: #2b3a4a; stroke-width: 1.8; stroke-linecap: round; }
.scene .fam .sbody { fill: #7ec8f0; stroke: #2b3a4a; stroke-width: 1.4; }
.scene .fam .shood { fill: #1271a8; }
.scene .fam .swheel { fill: #fff; stroke: #2b3a4a; stroke-width: 1.6; }

#gmap { width: 100%; height: 100%; min-height: 380px; z-index: 0; }
@media (max-width: 900px) { #gmap { min-height: 340px; } }
.get-app { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 12px; }
.get-app img { border-radius: 6px; }
.scene .beachwalk { fill: #d9d3c4; } .scene .beachwalk-edge { stroke: #b3aa96; stroke-width: 1.2; fill: none; }
.scene .tower .tpole { stroke: #6b7280; stroke-width: 1.6; fill: none; }
.scene .plaza { fill: #d9d3c4; stroke: #b3aa96; stroke-width: 1.4; } .scene .plaza-ring { fill: none; stroke: #d6cdb8; stroke-width: 1.2; stroke-dasharray: 3 3; }
.scene .trail-loop { fill: none; stroke: #d9d3c4; stroke-width: 6; stroke-linejoin: round; }
.scene .batter .bb-shirt, .scene .batter .bb-arm { stroke: #d62b1f; } .scene .batter .bb-cap { fill: #14304d; stroke: #14304d; }
.scene .guard .g-leg { fill: none; stroke: #f2c39b; stroke-width: 1.8; stroke-linecap: round; }
.scene .guard .g-shirt { stroke: #d62b1f; stroke-width: 3.6; stroke-linecap: round; }
.scene .guard .g-face { fill: #f2c39b; } .scene .guard .g-hair { fill: #5a3b22; }
.scene .guard .g-arm { stroke: #d62b1f; stroke-width: 1.6; stroke-linecap: round; } .scene .guard .g-bino { fill: #1b2733; }
.scene .guard .g-face, .scene .guard .g-hair, .scene .guard .g-bino { stroke: none; }
.scene .sidepath { fill: none; stroke: #c9ad7f; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 0; }