/* Shared front-end styles for Sunyung blocks (section heading, links, cards). Uses theme tokens with fallbacks. */
.sy-sec { background: #fff; --s-ink: var(--sy-ink, #263653); --s-muted: var(--sy-muted, #59677a); --s-line: var(--sy-line, #d9e0e6); --s-mist: var(--sy-mist, #eef4f5); --s-navy: var(--sy-navy, #283951); color: var(--s-ink); padding: clamp(56px, 7vw, 96px) clamp(16px, 6vw, 85px); }
.sy-sec--mist { background: var(--s-mist); }
.sy-sec--soft { background: #f6f9fa; }
/* A check mark drawn in CSS (fonts may lack the ✓ glyph). */
.sy-check { display: inline-block; width: 11px; height: 6px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
.sy-sec__inner { max-width: 1290px; margin: 0 auto; }
.sy-head { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: 20px 60px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.sy-head--link { grid-template-columns: 1fr auto; }
.sy-kicker { margin: 0 0 16px; font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--s-muted); }
.sy-sec .sy-h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--s-ink); }
.sy-intro { margin: 0; font-size: 17px; line-height: 1.7; color: var(--s-muted); }
.sy-link { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid currentColor; color: var(--s-ink); font-size: 14px; text-decoration: none; }
.sy-link:hover { color: var(--s-muted); }
.sy-btn-dark { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 22px; background: var(--s-navy); color: #fff; font-size: 14px; text-decoration: none; border-radius: var(--sy-radius, 2px); }
.sy-btn-dark:hover { background: #1b2a3e; color: #fff; }
.sy-arrow { flex: none; }
@media (max-width: 900px) {
	.sy-head, .sy-head--link { grid-template-columns: 1fr; }
}

/* Sticky sub-navigation sits right under the sticky header (Blocksy: 101px desktop, 81px below 1000px). */
:root { --sy-subnav-top: 100px; }
@media (max-width: 999.98px) { :root { --sy-subnav-top: 80px; } }

/* Full-width sections sit flush: the theme's paragraph spacing (24 px) between two of them showed the page colour as a
   thin off-white strip (user 2026-10-12). Space between sections comes from their own padding. */
:is(.entry-content, .sy-cat-landing) > .alignfull:has(+ .alignfull) { margin-bottom: 0; }
/* Inner-page heroes start under the fixed two-row desktop header (141 px): clear it, so the eyebrow line is never
   hidden behind the header (user 2026-10-21). Phones have their own shorter header and already clear it. */
@media (min-width: 1000px) {
	body:not(.home) .sy-hero.wp-block-cover { padding-top: calc(141px + clamp(32px, 4vw, 64px)) !important; }
}
@media (prefers-reduced-motion: reduce) { html.sy-js ul.sy-ticks li { animation: none; } }
/* About: showroom and team photos (client 2026-10-22), three per row, same 3:2 frame. */
.sy-gallery3 { gap: 16px !important; margin-top: 16px !important; }
.sy-gallery3 figure { margin: 0; }
.sy-gallery3 img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
@media (max-width: 781px) { .sy-gallery3 { flex-wrap: wrap !important; } .sy-gallery3 > .wp-block-column { flex-basis: 100% !important; } }