/* Home Fresh Hub
   Layout: Miami deco. Lagoon-navy hero with arched photo and citrus sun, wave edges between
   sections, arch-topped service cards, coral as the single loud colour, warm sand ground. */
:root {
  --sand: #FFF8F3;
  --paper: #FFFFFF;
  --lagoon: #0D3B5E;
  --lagoon-deep: #082A44;
  --coral: #EF6F6C;
  --coral-soft: #FDE3DC;
  --seafoam: #D3F0E9;
  --seafoam-deep: #9ED8CA;
  --citrus: #FFC857;
  --ink: #1B2638;
  --ink-soft: #57627A;
  --line: #EEDFD6;
  --f-display: "Syne", "Arial Black", system-ui, sans-serif;
  --f-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 22px;
  --lift: 0 22px 44px -26px rgba(8, 42, 68, .5);
  color-scheme: light;
}

html { scroll-behavior: smooth; }
body { font-family: var(--f-body); font-size: 1.04rem; line-height: 1.7; background: var(--sand); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--lagoon-deep); line-height: 1.08; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.3rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { text-wrap: pretty; }
a { color: var(--lagoon); text-underline-offset: 3px; }
a:hover { color: var(--coral); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 40rem; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 3000; background: var(--coral); color: var(--lagoon-deep); padding: .5rem 1rem; border-radius: 999px; font-weight: 700; }
.skip:focus { left: 16px; }

/* ---------- Logo: one line, one style */
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; white-space: nowrap; }
.logo-badge { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--coral); color: var(--lagoon-deep); }
.logo-ic { width: 1.4rem; height: 1.4rem; }
.logo-text { font-family: var(--f-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--lagoon-deep); }
.logo:hover .logo-text { color: var(--lagoon-deep); }

/* ---------- Header */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1000; background: rgba(255, 248, 243, .92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.navbar { padding-block: .75rem; }
.menu-btn { border: 0; background: var(--lagoon); color: #fff; border-radius: 50%; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; }
.menu-btn:focus { box-shadow: none; }
.menu-btn .ic { width: 1.35rem; height: 1.35rem; }
.nav-pill { gap: .15rem; }
@media (min-width: 992px) {
  .nav-pill { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .3rem; }
}
.nav-pill .nav-link { color: var(--ink); font-weight: 600; padding: .45rem 1rem !important; border-radius: 999px; transition: background .2s, color .2s; }
.nav-pill .nav-link:hover { background: var(--coral-soft); color: var(--lagoon-deep); }
.nav-pill .nav-link.is-active { background: var(--lagoon); color: #fff; }
@media (max-width: 991.98px) {
  .nav-pill { padding-block: 1rem .5rem; }
  .nav-cta { margin-bottom: .75rem; }
}

/* ---------- Buttons */
.btn-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.25rem; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: .97rem; text-decoration: none; line-height: 1.2; cursor: pointer; transition: transform .2s, background .2s, color .2s, box-shadow .2s; }
.btn-pill:hover { transform: translateY(-2px); }
.btn-pill--lg { padding: .95rem 1.6rem; font-size: 1.03rem; }
.btn-pill--coral { background: var(--coral); color: var(--lagoon-deep); box-shadow: 0 10px 22px -12px rgba(239, 111, 108, .9); }
.btn-pill--coral:hover { background: var(--lagoon-deep); color: #fff; }
.btn-pill--navy { background: var(--lagoon); color: #fff; }
.btn-pill--navy:hover { background: var(--coral); color: var(--lagoon-deep); }
.btn-pill--outline { border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-pill--outline:hover { background: #fff; color: var(--lagoon-deep); }
.more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; text-decoration: none; color: var(--lagoon); }
.more:hover { color: var(--coral); }

.kicker { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin-bottom: .9rem; }
.kicker--light { color: var(--citrus); }
.kicker--dark { color: var(--lagoon-deep); }

/* ---------- Wave divider */
.wave { display: block; width: 100%; height: 48px; }

/* ---------- Hero */
.hero { background: var(--lagoon); color: #D7E6F0; padding-top: clamp(3rem, 7vw, 5.5rem); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 60px); pointer-events: none; }
.hero .container { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero h1 { color: #fff; margin-bottom: 1.2rem; }
.hero .hl { color: var(--citrus); }
.hero .lede { color: #C9DAE6; margin-bottom: 2rem; }
.hero .wave { color: var(--sand); margin-top: -1px; position: relative; }
.hero-arch { position: relative; max-width: 30rem; margin-inline: auto; }
.hero-sun { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--citrus); right: -6%; top: -6%; }
.arch-frame { position: relative; border-radius: 999px 999px 26px 26px; overflow: hidden; aspect-ratio: 4 / 5; border: 8px solid var(--coral); background: var(--lagoon-deep); max-width: 100%; }
.arch-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-note { position: absolute; left: -4%; bottom: 10%; display: inline-flex; align-items: center; gap: .5rem; background: var(--paper); color: var(--lagoon-deep); font-weight: 700; padding: .65rem 1.1rem; border-radius: 999px; box-shadow: var(--lift); }
.hero-note .ic { color: var(--coral); }

/* ---------- Promise row */
.promise-row { padding-block: 1.5rem .5rem; }
.promise { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .9rem 1rem; background: var(--paper); border-radius: 999px; border: 1px dashed var(--seafoam-deep); font-weight: 700; color: var(--lagoon-deep); text-align: center; }
.promise .ic { color: var(--coral); width: 1.35rem; height: 1.35rem; }

/* ---------- Blocks */
.block { padding-block: clamp(3.5rem, 7vw, 6rem); }
.block--sea { background: var(--seafoam); }
.block--sand { background: var(--coral-soft); }
.block--navy { background: var(--lagoon-deep); }
.block-head { margin-bottom: 2.8rem; }
.block-head .lede { margin-top: .6rem; }

/* ---------- Arch service card (home) */
.arch-card { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r); padding: 1rem 1rem 1.6rem; text-align: center; transition: transform .25s, box-shadow .25s; border: 1px solid var(--line); }
.arch-card:hover { transform: translateY(-6px); box-shadow: var(--lift); }
.arch-media { position: relative; margin-bottom: 2rem; }
.arch-media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 999px 999px 16px 16px; display: block; }
.arch-ic { position: absolute; left: 50%; bottom: -1.4rem; transform: translateX(-50%); width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--citrus); color: var(--lagoon-deep); border: 4px solid var(--paper); }
.arch-card h3 { margin-bottom: .5rem; padding-inline: .5rem; }
.arch-card p { color: var(--ink-soft); flex: 1; padding-inline: .5rem; }
.arch-card .btn-pill { align-self: center; }

/* ---------- Wide service card (services page) */
.wide-card { background: var(--paper); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); transition: box-shadow .25s, transform .25s; scroll-margin-top: 6rem; }
.wide-card:hover { box-shadow: var(--lift); transform: translateY(-3px); }
.wide-media { height: 100%; min-height: 14rem; }
.wide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wide-body { padding: 1.6rem; display: flex; flex-direction: column; height: 100%; }
.wide-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: var(--seafoam); color: var(--lagoon); margin-bottom: .9rem; }
.wide-body h3 { margin-bottom: .5rem; }
.wide-body p { color: var(--ink-soft); flex: 1; }
.wide-body .btn-pill { align-self: flex-start; }

/* ---------- Collage + ticks */
.collage { position: relative; padding-bottom: 3rem; padding-right: 3rem; }
.collage-a img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); display: block; }
.collage-b { position: absolute; right: 0; bottom: 0; width: 45%; border: 8px solid var(--seafoam); border-radius: 999px 999px 18px 18px; overflow: hidden; }
.collage-b img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ticks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; }
.ticks li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 600; }
.ticks li > span { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--coral); color: var(--lagoon-deep); display: grid; place-items: center; margin-top: .1rem; }
.ticks li > span .ic { width: 1rem; height: 1rem; }
.ticks--light li { color: #fff; }
.ticks--light li > span { background: var(--citrus); }

/* ---------- Process flow */
.flow-step { text-align: center; position: relative; padding-inline: .5rem; }
.flow-dot { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--lagoon); color: var(--citrus); position: relative; z-index: 1; box-shadow: 0 0 0 8px var(--sand); }
.flow-dot .ic { width: 1.6rem; height: 1.6rem; }
.flow-step p { color: var(--ink-soft); }
@media (min-width: 992px) {
  .flow { position: relative; }
  .flow::before { content: ""; position: absolute; top: 2.1rem; left: 12%; right: 12%; border-top: 3px dotted var(--coral); }
}

/* ---------- Blog cards */
.post { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r); overflow: hidden; width: 100%; border: 1px solid var(--line); transition: box-shadow .25s; }
.post:hover { box-shadow: var(--lift); }
.post-img { display: block; overflow: hidden; }
.post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.post:hover .post-img img { transform: scale(1.04); }
.post--lg .post-img { aspect-ratio: 16 / 10; }
.post--lg h2, .post--lg h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.post-text { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-text h2, .post-text h3 { margin: .7rem 0 .5rem; font-size: 1.3rem; }
.post-text h2 a, .post-text h3 a { color: var(--lagoon-deep); text-decoration: none; }
.post-text h2 a:hover, .post-text h3 a:hover { color: var(--coral); }
.post-text p { color: var(--ink-soft); flex: 1; }
@media (min-width: 768px) {
  .post--sm { flex-direction: row; }
  .post--sm .post-img { width: 38%; flex: none; }
}
.post--sm .post-img { aspect-ratio: auto; min-height: 12rem; }
.chip { display: inline-block; align-self: flex-start; padding: .25rem .75rem; border-radius: 999px; background: var(--seafoam); color: var(--lagoon); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Newsletter strip + talk band */
.news-strip { padding-block: 0 1rem; }
.block + .news-strip, .block--sand + .news-strip { padding-top: clamp(3rem, 6vw, 4.5rem); }
.news-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--citrus); border-radius: var(--r); padding: clamp(1.6rem, 4vw, 2.8rem); position: relative; overflow: hidden; }
.news-box::after { content: ""; position: absolute; right: -4rem; top: -4rem; width: 12rem; height: 12rem; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .35); }
.news-copy { max-width: 36rem; position: relative; z-index: 1; }
.news-copy h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0; }
.news-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; position: relative; z-index: 1; }
.news-un { color: var(--lagoon-deep); font-weight: 700; }
.talk { padding-block: clamp(3rem, 6vw, 4.5rem); }
.talk-in { text-align: center; background: var(--lagoon-deep); border-radius: var(--r); padding: clamp(2rem, 5vw, 3.5rem) 1.25rem; background-image: radial-gradient(circle at 50% 120%, rgba(239,111,108,.45), transparent 55%); }
.talk-in h2 { color: #fff; }
.talk-in p { color: #C9DAE6; margin-bottom: 1.6rem; }

/* ---------- Inner banner */
.banner { position: relative; overflow: hidden; background: var(--seafoam); padding-block: clamp(3rem, 6vw, 5rem); }
.banner--quiet { background: var(--coral-soft); }
.banner-in { position: relative; z-index: 1; max-width: 46rem; }
.banner h1 { margin-bottom: 1rem; }
.banner-sun { position: absolute; right: -6rem; bottom: -12rem; width: 26rem; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, var(--paper) 0 18px, transparent 18px 36px); opacity: .6; }
@media (max-width: 767.98px) { .banner-sun { width: 16rem; right: -6rem; bottom: -8rem; } }

/* ---------- About */
.stack-photos { position: relative; padding-bottom: 4rem; }
.sp-a img { width: 85%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 22px 22px; display: block; }
.sp-b { position: absolute; right: 0; bottom: 0; width: 52%; border-radius: var(--r); overflow: hidden; border: 8px solid var(--sand); }
.sp-b img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mv { height: 100%; background: var(--lagoon); border-radius: var(--r); padding: clamp(1.6rem, 4vw, 2.6rem); }
.mv h3 { color: #fff; font-size: 1.6rem; }
.mv p { color: #C9DAE6; margin: 0; }
.mv--coral { background: var(--coral); }
.mv--coral h3 { color: var(--lagoon-deep); }
.mv--coral p { color: var(--lagoon-deep); }
.val { height: 100%; text-align: center; padding: 1.8rem 1.2rem; background: var(--paper); border-radius: var(--r); border: 1px solid var(--line); }
.val-ic { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--seafoam); color: var(--lagoon); }
.val-ic .ic { width: 1.5rem; height: 1.5rem; }
.val p { color: var(--ink-soft); margin: 0; }

/* ---------- Article */
.art-head { background: var(--lagoon); padding-block: clamp(2.5rem, 5vw, 4rem) 8rem; color: #C9DAE6; text-align: center; }
.art-head h1 { color: #fff; max-width: 52rem; margin: 1rem auto; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.art-head .lede { color: #C9DAE6; margin-inline: auto; }
.art-head .chip { background: var(--citrus); color: var(--lagoon-deep); }
.crumb { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: .92rem; margin-bottom: 1.2rem; }
.crumb a { color: #fff; }
.crumb .ic { width: .9em; height: .9em; opacity: .6; }
.by { display: inline-flex; align-items: center; gap: .45rem; color: var(--seafoam-deep); margin: 0; font-weight: 600; }
.art-cover { margin-top: -6rem; margin-bottom: 3rem; border-radius: var(--r); overflow: hidden; aspect-ratio: 2 / 1; box-shadow: var(--lift); border: 8px solid var(--paper); background: var(--paper); max-width: 100%; }
.art-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-body { font-size: 1.1rem; }
.art-body > p:first-child::first-letter { font-family: var(--f-display); font-weight: 800; float: left; font-size: 3.6rem; line-height: .9; padding: .35rem .55rem 0 0; color: var(--coral); }
.art-body h2 { font-size: 1.65rem; margin: 2.4rem 0 .8rem; }
.art-body p, .art-body li { color: #33405A; }
.art-body ul { list-style: none; padding: 1.3rem 1.4rem; margin-block: 1.2rem 1.6rem; background: var(--seafoam); border-radius: 16px; display: grid; gap: .6rem; }
.art-body ul li { position: relative; padding-left: 1.6rem; }
.art-body ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--coral); }
.art-cta { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.6rem; border-radius: var(--r); background: var(--coral-soft); }
.art-cta h3 { margin-bottom: .25rem; }
.art-cta p { margin: 0; color: var(--ink-soft); }
.related { margin-block: 4rem 1rem; }
.related h2 { font-size: 1.7rem; margin-bottom: 1.4rem; }
.rel { display: grid; grid-template-columns: 7rem 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; row-gap: .4rem; align-items: start; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem; height: 100%; }
.rel-img { grid-row: span 2; border-radius: 14px; overflow: hidden; aspect-ratio: 1; }
.rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel strong { font-family: var(--f-display); color: var(--lagoon-deep); line-height: 1.25; min-width: 0; }
.rel:hover strong { color: var(--coral); }

/* ---------- Contact */
.ct { height: 100%; background: var(--paper); border-radius: var(--r); padding: 1.8rem; border: 1px solid var(--line); }
.ct--coral { background: var(--coral); border-color: var(--coral); }
.ct--coral h3, .ct--coral p, .ct--coral .ct-big { color: var(--lagoon-deep); }
.ct-ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--lagoon); color: var(--citrus); margin-bottom: 1rem; }
.ct-ic .ic { width: 1.4rem; height: 1.4rem; }
.ct h3 { font-size: .82rem; font-family: var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.ct address { font-size: 1.15rem; font-weight: 600; margin-bottom: .8rem; }
.ct-big { display: block; font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; text-decoration: none; color: var(--lagoon-deep); word-break: break-word; }
.ct p { margin: .4rem 0 0; color: var(--ink-soft); }

/* ---------- Forms */
.fform, .sub-main form { background: var(--paper); border-radius: var(--r); padding: clamp(1.4rem, 4vw, 2.6rem); border: 1px solid var(--line); box-shadow: var(--lift); }
.sub-main form { box-shadow: none; border: 0; padding: 0; }
.fform-head { margin-bottom: 1.5rem; }
.fform-head p { color: var(--ink-soft); margin: 0; }
.fform h2, .sub-main h2 { font-size: 1.7rem; }
.fform label, .sub-main label, .lbl { display: block; font-weight: 700; font-size: .94rem; margin-bottom: .4rem; color: var(--lagoon-deep); }
.fform input[type="text"], .fform input[type="email"], .fform input[type="tel"], .fform select, .fform textarea,
.sub-main input[type="text"], .sub-main input[type="email"] {
  width: 100%; font: inherit; color: var(--ink); background: var(--sand); border: 2px solid transparent; border-bottom-color: var(--line);
  border-radius: 14px; padding: .75rem 1rem; transition: border-color .2s, background .2s;
}
.fform input:focus, .fform select:focus, .fform textarea:focus, .sub-main input:focus { outline: none; border-color: var(--coral); background: var(--paper); }
.tick { display: flex !important; gap: .65rem; align-items: flex-start; font-weight: 500 !important; color: var(--ink-soft) !important; }
.tick input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--coral); flex: none; }
.err { display: none; color: #B23A2E; font-size: .88rem; margin-top: .3rem; }
.was-checked :invalid { border-color: #D2584A !important; }
.was-checked :invalid ~ .err, .was-checked .tick:has(:invalid) ~ .err { display: block; }
.togs { display: flex; flex-wrap: wrap; gap: .5rem; }
.tog { margin: 0 !important; cursor: pointer; }
.tog input { position: absolute; opacity: 0; pointer-events: none; }
.tog span { display: inline-flex; align-items: center; padding: .45rem .95rem; border-radius: 999px; border: 2px solid var(--line); font-weight: 600; color: var(--ink-soft); transition: all .2s; }
.tog input:checked + span { background: var(--seafoam); border-color: var(--seafoam-deep); color: var(--lagoon-deep); }
.tog input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
.rads { display: grid; gap: .5rem; }
.rad { display: flex !important; align-items: center; gap: .7rem; padding: .65rem .9rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; font-weight: 600 !important; color: var(--ink) !important; margin: 0 !important; }
.rad input { accent-color: var(--coral); width: 1.05rem; height: 1.05rem; }
.rad:has(input:checked) { border-color: var(--coral); background: var(--coral-soft); }
.fine { font-size: .94rem; color: var(--ink-soft); margin-top: 1rem; }
.ok-box { background: var(--paper); border-radius: var(--r); padding: clamp(1.6rem, 4vw, 2.6rem); border: 3px solid var(--seafoam-deep); text-align: center; }
.ok-box .ct-ic { margin-inline: auto; }
.ok-box p { color: var(--ink-soft); }

/* ---------- Newsletter pages */
.sub-hero { padding-block: clamp(3rem, 6vw, 5rem); background: linear-gradient(180deg, var(--coral-soft), var(--sand)); }
.sub-card { background: var(--paper); border-radius: 28px; overflow: hidden; box-shadow: var(--lift); }
.sub-side { height: 100%; background: var(--lagoon); color: #C9DAE6; padding: clamp(1.8rem, 4vw, 3rem); background-image: radial-gradient(circle at 100% 100%, rgba(255, 200, 87, .35), transparent 45%); }
.sub-side h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); }
.sub-main { padding: clamp(1.8rem, 4vw, 3rem); }
.unsub { padding-block: clamp(3rem, 7vw, 6rem); }
.unsub h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1rem; }

/* ---------- Legal */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.jump a { padding: .35rem .85rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .9rem; }
.jump a:hover { background: var(--lagoon); color: #fff; border-color: var(--lagoon); }
.legal-card { background: var(--paper); border-radius: var(--r); padding: clamp(1.4rem, 4vw, 2.8rem); border: 1px solid var(--line); }
.lg-sec { scroll-margin-top: 6rem; padding-block: 1.4rem; border-bottom: 1px dashed var(--line); }
.lg-sec:first-child { padding-top: 0; }
.lg-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.lg-sec h2 { font-size: 1.4rem; display: flex; align-items: center; gap: .6rem; }
.lg-sec h2::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--coral); flex: none; }
.lg-sec p, .lg-sec li { color: #33405A; }

/* ---------- Footer */
.foot { color: var(--lagoon-deep); margin-top: 2rem; }
.foot .wave { color: var(--seafoam); margin-bottom: -1px; }
.foot-in { background: var(--seafoam); padding-block: 2.5rem 2rem; }
.foot-top { text-align: center; max-width: 34rem; margin: 0 auto 3rem; }
.foot-top p { margin: 1rem 0; color: var(--ink-soft); }
.foot-mail { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; background: var(--paper); padding: .55rem 1.1rem; border-radius: 999px; }
.foot-mail .ic { color: var(--coral); }
.foot h4 { font-family: var(--f-body); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .9rem; color: var(--lagoon); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.foot ul a { color: var(--ink); text-decoration: none; }
.foot ul a:hover { color: var(--coral); text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 2px dotted var(--seafoam-deep); font-size: .92rem; color: var(--ink-soft); }

@media (max-width: 575.98px) {
  .logo-text { font-size: 1.2rem; }
  .logo-badge { width: 2.2rem; height: 2.2rem; }
  .collage { padding-right: 1.5rem; }
  .hero-note { left: 0; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}