/*!
 * Shinwado — Standalone Page Styles
 * Version: 2.7.1
 *
 * Contents:
 *   1. Variables (brand colors, layout)
 *   2. Reset / base
 *   3. Shared button style
 *   4. Lightbox (shared across blocks)
 *   5. Hero block (image, logo, nav, CTA button)
 *   6. About block (background, intro column, 3-column grid)
 *   7. Programs block (navy background, intro column, 3-panel cards)
 *   8. News block (split layout: items list + quote panel)
 *   9. CTA block (background, centered image/title/description/button)
 *   10. Contact block (compact form + info panel)
 *   11. Shared block base (padding/scroll-margin used by every section)
 *   12. Footer block (brand column, 3 link columns, copyright)
 *   13. Responsive (mobile nav, hero CTA position, grid collapses)
 */

/* 1. Variables ------------------------------------------------------------ */
:root {
	--shinwado-red: #B60004;
	--shinwado-red-text: #FFFFFF;
	--shinwado-gold: #D4AC58;
	--shinwado-gold-text: #000000;
	--shinwado-ink: #1a1a1a;
	--shinwado-cream: #faf6ee;
	--shinwado-max-width: 1200px;

	/* Programs block background — a dark navy gradient approximating the
	   mockup's color palette (no source photo was supplied for this
	   block, so this is a solid/gradient match rather than an image). */
	--shinwado-navy-top: #16223f;
	--shinwado-navy-bottom: #0d1526;
	/* The 3 panel cards, a step lighter than the section background so
	   they read as raised/embossed against it. */
	--shinwado-navy-panel: #223357;
	--shinwado-navy-panel-border: #34497a;

	/*
	 * Vertical position of the hero CTA button, as a percentage of the
	 * hero image's height measured from the top. Tuned against the
	 * supplied hero image: the "SHINWADO" title band (including the
	 * tagline and its underline) ends roughly 27% of the way down, and
	 * the image bottom is 100%, so the midpoint lands at roughly 63%.
	 * If the hero image is ever swapped for one with a differently
	 * placed title, adjust this single value rather than the button's
	 * own CSS.
	 */
	--shinwado-hero-cta-top: 63%;
}

/* 2. Reset / base ----------------------------------------------------------- */
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--shinwado-ink);
	line-height: 1.6;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* 3. Shared button style --------------------------------------------------------- */
/*
 * Structural button style shared by every block's CTA button. Each block
 * adds .shinwado-btn plus a color modifier (--red or --gold) plus its own
 * positioning class — see .shinwado-hero__cta-button, .shinwado-about__cta,
 * .shinwado-programs__cta, .shinwado-cta__button below — instead of
 * repeating padding/radius/hover rules, or the color rules, per block.
 */
.shinwado-btn {
	display: inline-block;
	text-decoration: none;
	font-weight: 700;
	padding: 0.9rem 2.25rem;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shinwado-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.shinwado-btn--red {
	background: var(--shinwado-red);
	color: var(--shinwado-red-text);
}
.shinwado-btn--gold {
	background: var(--shinwado-gold);
	color: var(--shinwado-gold-text);
}
.shinwado-btn--outline-red {
	background: transparent;
	color: var(--shinwado-red);
	border: 2px solid var(--shinwado-red);
	box-shadow: none;
}
.shinwado-btn--outline-red:hover {
	background: var(--shinwado-red);
	color: var(--shinwado-red-text);
	box-shadow: 0 4px 14px rgba(182, 0, 4, 0.25);
}

/* 4. Lightbox (shared across blocks) -------------------------------------------- */
/*
 * Opened by clicking any element with the .shinwado-lightbox-trigger
 * class — currently the News block's item images (see
 * .shinwado-news__item-image). One shared modal serves the whole page;
 * assets/js/shinwado.js handles opening/closing it and swapping the
 * displayed image.
 *
 * On preventing downloads: full prevention isn't achievable in a
 * browser — anyone can always reach the image via dev tools, view-
 * source, or a screenshot. What's implemented here removes the casual,
 * one-click paths: the thumbnails are CSS background-images on buttons
 * rather than <img> tags (so there's no native "Save Image As" in the
 * right-click menu), and the enlarged lightbox image has
 * oncontextmenu/draggable disabled plus -webkit-touch-callout disabled
 * for iOS's long-press-to-save menu.
 */
.shinwado-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.88);
	align-items: center;
	justify-content: center;
	padding: 2rem;
}
.shinwado-lightbox.is-open {
	display: flex;
}
.shinwado-lightbox__image {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	-webkit-touch-callout: none; /* disables iOS's long-press "Save Image" menu */
	user-select: none;
}
.shinwado-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.5rem;
	opacity: 0.85;
}
.shinwado-lightbox__close:hover {
	opacity: 1;
}

/* 5. Hero block --------------------------------------------------------------- */
.shinwado-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/*
 * The hero image is a real <img> (not a CSS background-image) sized to
 * 100% width / auto height, so it always keeps its native aspect ratio
 * at any viewport width. That's what keeps the CTA button's percentage-
 * based vertical position (below) accurate — a background-image with
 * background-size: cover would crop differently at different viewport
 * widths and the button would drift off the intended spot.
 */
.shinwado-hero__bg {
	width: 100%;
	height: auto;
	display: block;
}

.shinwado-hero__topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2; /* guarantees this stacks above .shinwado-hero__bg */
	display: flex;
	/* flex-start (not center) — the logo is 168px tall, and centering
	   against it was pushing the nav links down into the busier part of
	   the image instead of keeping them pinned to the top edge. */
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.25rem 2rem;
}
.shinwado-hero__logo-link {
	display: inline-block;
}
.shinwado-hero__logo {
	/* 3x the original 56px display height. The source PNG is high enough
	   resolution that this stays crisp — if a future logo file is ever
	   swapped in at a much lower resolution, this may need scaling back
	   down to avoid visible pixelation. */
	height: 168px;
	width: auto;
}

.shinwado-hero__nav-list {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	/* Nudges the nav text down slightly from the very top edge so it
	   doesn't sit flush against it now that it's no longer vertically
	   centered against the tall logo. */
	padding: 0.75rem 0 0;
}
.shinwado-hero__nav-list a {
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.shinwado-hero__nav-list a:hover {
	color: var(--shinwado-red);
}

/* Hamburger button — hidden by default, shown only on mobile (see media query). */
.shinwado-hero__nav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
}
.shinwado-hero__nav-toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--shinwado-ink);
}

.shinwado-hero__cta-wrap {
	position: absolute;
	top: var(--shinwado-hero-cta-top);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn class — see section 3. This just says "no extra margin." */
.shinwado-hero__cta-button {
	margin: 0;
}

/* 6. About block ---------------------------------------------------------------- */
.shinwado-about {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	padding: 5rem 2rem;
}
.shinwado-about__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem;
}

/* Left column: title, divider, description, button */
.shinwado-about__intro {
	flex: 1 1 300px;
	max-width: 420px;
}
.shinwado-about__title {
	margin: 0 0 1rem;
	line-height: 1.25;
	/* font-family/size/weight/style/text-align come from the Title
	   field's typography controls, applied inline per-page — see
	   shinwado_typography_style() in includes/helpers.php. */
}
.shinwado-about__divider {
	width: 48px;
	height: 3px;
	background: var(--shinwado-red);
	margin-bottom: 1.25rem;
}
.shinwado-about__description {
	margin-bottom: 1.75rem;
	color: #555555;
	line-height: 1.6;
	/* Same as .shinwado-about__title above: typography comes from the
	   Description field's own controls, applied inline. */
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn class — see section 3. */
.shinwado-about__cta {
	margin: 0;
}

/* Right side: 3-column grid (icon/image, title, description) */
.shinwado-about__columns {
	flex: 2 1 480px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.shinwado-about__column {
	text-align: center;
}
.shinwado-about__column-image {
	width: 96px;
	height: 96px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	overflow: hidden;
}
.shinwado-about__column-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shinwado-about__column-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 0.5rem;
}
.shinwado-about__column-desc {
	font-size: 0.9rem;
	color: #555555;
	line-height: 1.5;
}

/* 7. Programs block ---------------------------------------------------------------- */
.shinwado-programs {
	background: linear-gradient(180deg, var(--shinwado-navy-top) 0%, var(--shinwado-navy-bottom) 100%);
	padding: 5rem 2rem;
}
.shinwado-programs__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3rem;
}

/* Left column: eyebrow, underline, title, description, button */
.shinwado-programs__intro {
	flex: 1 1 300px;
	max-width: 420px;
}
.shinwado-programs__eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the Small
	   Title field's typography controls, applied inline — see
	   shinwado_typography_style() in includes/helpers.php. */
}
.shinwado-programs__eyebrow-line {
	width: 48px;
	height: 3px;
	margin-bottom: 1.25rem;
	/* background-color set inline from the Small Title Underline Color field. */
}
.shinwado-programs__title {
	margin: 0 0 1rem;
	line-height: 1.25;
	/* Typography + color come from the Large Title field's controls,
	   applied inline — same pattern as .shinwado-programs__eyebrow above. */
}
.shinwado-programs__description {
	margin-bottom: 1.75rem;
	line-height: 1.6;
	/* Typography + color come from the Description field's controls. */
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn + .shinwado-btn--gold classes — see section 3. */
.shinwado-programs__cta {
	margin: 0;
}

/* Right side: 3-panel grid, styled as raised/embossed cards */
.shinwado-programs__panels {
	flex: 2 1 480px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.shinwado-programs__panel {
	background: var(--shinwado-navy-panel);
	border: 1px solid var(--shinwado-navy-panel-border);
	border-radius: 8px;
	padding: 2rem 1.25rem;
	text-align: center;
	/* A light top edge + darker bottom shadow gives the card a subtle
	   embossed/3D look against the flatter section background, echoing
	   the mockup's card treatment without needing an image asset. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 20px rgba(0, 0, 0, 0.35);
}
.shinwado-programs__panel-image {
	width: 84px;
	height: 84px;
	margin: 0 auto 1.25rem;
	border: 3px solid var(--shinwado-gold);
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shinwado-programs__panel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shinwado-programs__panel-title {
	color: #ffffff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.6rem;
}
.shinwado-programs__panel-desc {
	color: #c7cede;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* 8. News block ---------------------------------------------------------------- */
.shinwado-news {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	padding: 0; /* .shinwado-news__left/__right below supply their own padding — no extra padding needed on the section itself */
}
.shinwado-news__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

/* Left column: title, underline, item list, optional button */
.shinwado-news__left {
	padding: 2rem 3rem;
}
.shinwado-news__title {
	margin: 0 0 0.6rem;
	/* font-family/size/weight/style/text-align/color come from the Title
	   field's typography controls, applied inline. */
}
.shinwado-news__title-line {
	width: 48px;
	height: 3px;
	margin-bottom: 1.25rem;
	/* background-color set inline from the Title Underline Color field. */
}
.shinwado-news__items {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin-bottom: 1.25rem;
}
.shinwado-news__item {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
}
.shinwado-news__item-image {
	flex: 0 0 90px;
	width: 90px;
	height: 90px;
	border-radius: 6px;
	overflow: hidden;
	/* A <button> with a background-image, not an <img> — deliberately,
	   so there's no native "Save Image As" option when right-clicking.
	   See the lightbox notes in section 3 for the rest of the picture:
	   this isn't true download prevention (never fully possible in a
	   browser), just removing the easiest, most casual path to it. */
	background-size: cover;
	background-position: center;
	border: none;
	padding: 0;
	cursor: zoom-in;
	display: block;
}
.shinwado-news__item-text {
	flex: 1 1 auto;
}
.shinwado-news__item-title {
	margin-bottom: 0.25rem;
	/* Typography + color come from the Item Title typography controls,
	   applied inline — shared across every item in the repeater. */
}
.shinwado-news__item-body {
	margin-bottom: 0.35rem;
	/* Typography + color come from the Item Body typography controls. */
}
.shinwado-news__item-link {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--shinwado-red);
}
.shinwado-news__item-link a {
	text-decoration: none;
	color: inherit;
}
.shinwado-news__item-link a:hover {
	text-decoration: underline;
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn + .shinwado-btn--outline-red classes — see section 3. */
.shinwado-news__button {
	margin: 0;
}

/* Right column: its own background image, top image, quote, signature */
.shinwado-news__right {
	position: relative;
	padding: 2rem 3rem;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.shinwado-news__panel-top-image {
	max-width: 64px;
	height: auto;
	margin-bottom: 1.5rem;
}
.shinwado-news__quote {
	margin-bottom: 1.5rem;
	line-height: 1.5;
	/* Typography + color come from the Quote typography controls,
	   applied inline. */
}
.shinwado-news__signature {
	letter-spacing: 0.04em;
	/* Rendered exactly as entered — no CSS text-transform, per the
	   Signature field's "no extra characters, WYSIWYG" requirement (see
	   includes/fields.php). Typography + color come from the Signature
	   typography controls, applied inline. */
}

/* 9. CTA block -------------------------------------------------------------------- */
.shinwado-cta {
	position: relative;
	background-color: var(--shinwado-ink);
	background-size: cover;
	background-position: center;
	padding: 1.25rem 2rem;
	text-align: center;
	overflow: hidden;
}
.shinwado-cta__inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}
.shinwado-cta__image {
	max-height: 56px;
	width: auto;
	margin: 0 auto 0.75rem;
}
.shinwado-cta__title {
	margin: 0 0 0.5rem;
	font-family: 'Playfair Display', serif;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.25;
	/* Color comes from the CTA Title Color field, applied inline. No
	   overlay or text-shadow — plain text over the photo as-is. */
}
.shinwado-cta__description {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.6;
	/* Color comes from the CTA Description Color field, applied inline. */
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn class — see section 3. */
.shinwado-cta__button {
	margin: 0;
}

/* 10. Contact block ---------------------------------------------------------------- */
.shinwado-contact {
	background-color: #ffffff;
	background-size: cover;
	background-position: center;
	/* Deliberately more compact than the other blocks — keeps this
	   section from feeling oversized, per feedback. */
	padding: 2rem 2rem;
}
.shinwado-contact__form {
	display: block; /* the <form> is just a layout-neutral wrapper around .shinwado-contact__grid below */
}
.shinwado-contact__grid {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* Left: heading + Name/Email/Phone. Right: heading + description +
   Message + Submit. Inputs are intentionally minimal/understated — the
   red Submit button is the only real accent color in this block. */
.shinwado-contact__heading {
	margin: 0;
}
.shinwado-contact__form-col,
.shinwado-contact__info-col {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.shinwado-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.shinwado-contact__field label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #555555;
}
.shinwado-contact__field input,
.shinwado-contact__field textarea {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	background: #ffffff;
	color: var(--shinwado-ink);
}
.shinwado-contact__field input:focus,
.shinwado-contact__field textarea:focus {
	outline: none;
	border-color: var(--shinwado-red);
}
.shinwado-contact__field textarea {
	resize: vertical;
}
/* Visual styling (background, padding, hover, etc.) comes from the shared
   .shinwado-btn + .shinwado-btn--red classes — see section 3. */
.shinwado-contact__submit {
	align-self: flex-start;
	border: none;
	cursor: pointer;
}

/* Right: heading + description explaining what the form is for, followed
   by the Message field + Submit — sits on top of the section's
   Background Image, same as the Name/Email/Phone fields on the left. */
.shinwado-contact__info-heading {
	margin: 0;
}
.shinwado-contact__info-description {
	line-height: 1.5;
}

/* 11. Shared block base ------------------------------------------------------- */
.shinwado-block {
	scroll-margin-top: 2rem; /* keeps anchor-link jumps from landing flush against the very top edge */
	/* No padding here anymore — it was silently overriding every
	   block's own padding (.shinwado-about, .shinwado-cta, etc.) due to
	   equal CSS specificity plus this rule's position later in the file.
	   Each block below sets its own padding directly now. */
}

/* 12. Footer block ---------------------------------------------------------------- */
/*
 * Background and text color are both set inline from the Background
 * Color / Text Color fields (see shinwado_render_footer() in
 * includes/render.php) — everything below inherits that text color by
 * default (including the social icons, via currentColor) unless a rule
 * here explicitly overrides it (e.g. link hover states).
 */
.shinwado-footer {
	padding: 2rem 2rem 0;
}
.shinwado-footer__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.shinwado-footer__columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 1.75rem;
}

/* Brand column: title, description, social icons */
.shinwado-footer__brand-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
}
.shinwado-footer__brand-description {
	font-size: 0.9rem;
	line-height: 1.6;
	opacity: 0.85;
	margin-bottom: 1.25rem;
}
.shinwado-footer__social {
	display: flex;
	gap: 0.75rem;
}
.shinwado-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.shinwado-footer__social-icon svg {
	width: 16px;
	height: 16px;
}
.shinwado-footer__social-icon:hover {
	opacity: 1;
}

/* Link columns: Quick Links / Programs / Resources — all 3 share this */
.shinwado-footer__column-title {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
	margin-bottom: 1rem;
}
.shinwado-footer__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.shinwado-footer__link-list a {
	text-decoration: none;
	font-size: 0.92rem;
	opacity: 0.9;
}
.shinwado-footer__link-list a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Copyright bar */
.shinwado-footer__copyright {
	border-top: 1px solid currentColor;
	padding: 1.25rem 0;
	text-align: center;
	font-size: 0.8rem;
	opacity: 0.6;
}

/* 13. Responsive ----------------------------------------------------------------- */
@media (max-width: 780px) {
	.shinwado-hero__topbar {
		padding: 1rem 1.25rem;
	}
	.shinwado-hero__logo {
		height: 120px;
	}

	.shinwado-hero__nav-toggle {
		display: flex;
	}
	.shinwado-hero__nav-list {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: #ffffff;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		border-radius: 4px;
		min-width: 180px;
		padding: 0.5rem 0;
	}
	.shinwado-hero__nav-list.is-open {
		display: flex;
	}
	.shinwado-hero__nav-list a {
		display: block;
		padding: 0.75rem 1.25rem;
		color: var(--shinwado-ink);
	}

	/*
	 * On narrow screens the hero image is much taller relative to the
	 * viewport, so the same title-band-to-bottom midpoint sits lower in
	 * the visible frame. Nudge the CTA down slightly to compensate.
	 */
	:root {
		--shinwado-hero-cta-top: 70%;
	}

	.shinwado-hero__cta-button {
		padding: 0.75rem 1.75rem;
		font-size: 0.9rem;
	}

	.shinwado-about__columns {
		grid-template-columns: 1fr;
	}

	.shinwado-programs__panels {
		grid-template-columns: 1fr;
	}

	.shinwado-news__grid {
		grid-template-columns: 1fr;
	}
	.shinwado-news__left,
	.shinwado-news__right {
		padding: 3rem 1.5rem;
	}

	.shinwado-contact__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.shinwado-footer__columns {
		grid-template-columns: 1fr 1fr;
		row-gap: 2rem;
	}
	.shinwado-footer__brand {
		grid-column: 1 / -1;
	}
}