/* =========================================================================
   SS Digital Services — front-end interaction & motion layer
   Design tokens come from theme.json; this file adds the "feel":
   sticky header, scroll reveals, counters, marquees, cards, hero mesh.
   ========================================================================= */

:root {
	--ssd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ssd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ssd-header-h: 76px;
	--ssd-ring: 0 0 0 4px rgba(240, 124, 26, 0.28);
	--ssd-radius-lg: 22px;
}

* { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

::selection { background: var(--wp--preset--color--navy); color: #fff; }

/* Skip link */
.skip-link:focus {
	position: fixed; top: 12px; left: 12px; z-index: 999;
	background: var(--wp--preset--color--navy); color: #fff;
	padding: 10px 16px; border-radius: 8px;
}

/* -------------------------------------------------------------------------
   Section rhythm helpers
   ---------------------------------------------------------------------- */
.ssd-section { position: relative; }
.ssd-section > .wp-block-group__inner-container,
.ssd-section-inner { position: relative; z-index: 1; }

.ssd-tight { --wp--style--block-gap: 0.6rem; }

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky; top: 0; z-index: 100;
}
.ssd-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid transparent;
	transition: border-color .35s var(--ssd-ease), box-shadow .35s var(--ssd-ease), transform .3s var(--ssd-ease);
	padding-block: 12px;
}
.ssd-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--hairline);
	box-shadow: 0 10px 30px -18px rgba(11, 27, 63, .28);
}
/* Scroll down → slide the sticky header off-screen; scroll up → bring it back. */
.ssd-header.is-header-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .ssd-header { transition: none; } }

/* Primary navigation */
.ssd-nav .wp-block-navigation-item__label { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .95rem; }
.ssd-nav .wp-block-navigation-item > a {
	position: relative; padding-block: 6px;
	color: var(--wp--preset--color--navy);
}
.ssd-nav .wp-block-navigation-item > a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
	background: var(--wp--preset--color--accent); transition: right .3s var(--ssd-ease);
}
.ssd-nav .wp-block-navigation-item > a:hover::after,
.ssd-nav .current-menu-item > a::after { right: 0; }

.ssd-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--hairline); border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--card); padding: 8px; overflow: hidden;
	background: var(--wp--preset--color--surface);
	min-width: 300px; width: max-content;
}
.ssd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.ssd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
	border-radius: 9px; white-space: nowrap;
}
/* Core applies the nav block's overlayTextColor ("base", near-white) straight
   through to these links via an !important color-support class — fine at rest
   against the dark resting background, but it made the hover state (light
   accent-tint background) unreadable. Force a dark navy text color only on
   hover so it stays legible against that light highlight. */
.ssd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--navy) !important;
}

/* Mobile menu button provided by core nav — restyle */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--navy); }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--gradient--deep); padding-top: 5rem;
	overflow-x: hidden;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; font-size: 1.35rem; font-family: var(--wp--preset--font-family--display); }

/* The desktop nav is right-aligned ("items-justified-right"); that alignment
   leaks into the fullscreen mobile overlay too, shoving labels against the
   right edge and clipping them. Force the overlay list back to centered. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { overflow-x: hidden; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center !important;
	align-items: center !important;
	width: 100%;
	box-sizing: border-box;
	padding-inline: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	justify-content: center;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	justify-content: center;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important; align-items: center; text-align: center;
	background: transparent !important; border: none !important; box-shadow: none !important;
	padding: 0 !important;
}

/* Header CTA button shrink */
.ssd-header .wp-block-button__link { padding: .7rem 1.25rem; font-size: .9rem; }
/* Below the nav-overlay breakpoint the CTA lives in the mobile menu / footer */
@media (max-width: 781px) { .ssd-header-cta { display: none; } }

/* -------------------------------------------------------------------------
   Buttons — extra variants
   ---------------------------------------------------------------------- */
.wp-block-button__link {
	transition: transform .25s var(--ssd-ease), box-shadow .25s var(--ssd-ease), background-color .25s var(--ssd-ease), color .2s;
	will-change: transform;
}
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link:hover {
	transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--accent);
}
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wp--preset--color--navy) 22%, transparent);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy); color: #fff; box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--navy);
}
.has-navy-deep-background-color .wp-block-button.is-style-ghost .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-ghost .wp-block-button__link { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); }
.has-navy-deep-background-color .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.has-navy-background-color .wp-block-button.is-style-ghost .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--navy); }

.wp-element-button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; box-shadow: var(--ssd-ring); border-radius: 6px; }

/* Arrow affordance on links tagged .ssd-arrow */
.ssd-arrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.ssd-arrow::after { content: "→"; transition: transform .3s var(--ssd-ease); }
.ssd-arrow:hover::after { transform: translateX(5px); }

/* -------------------------------------------------------------------------
   Headings — kicker / underline styles
   ---------------------------------------------------------------------- */
.wp-block-heading.is-style-kicker,
p.is-style-kicker {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--wp--preset--color--accent-strong);
	display: flex; width: -moz-fit-content; width: fit-content; max-width: 100%;
	align-items: center; gap: .6rem; margin-bottom: .9rem;
	margin-left: 0 !important; margin-right: auto !important;
}
.is-style-kicker.has-text-align-center { margin-left: auto !important; margin-right: auto !important; }
.wp-block-heading.is-style-kicker::before,
p.is-style-kicker::before {
	content: ""; width: 26px; height: 2px; flex: none; background: var(--wp--preset--color--accent);
}
.has-navy-background-color .is-style-kicker,
.has-navy-deep-background-color .is-style-kicker,
.has-contrast-background-color .is-style-kicker,
.has-text-color.has-base-color .is-style-kicker { color: var(--wp--preset--color--accent); }

.wp-block-heading.is-style-underline { position: relative; padding-bottom: .42em; }
.wp-block-heading.is-style-underline::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px;
	background: var(--wp--preset--color--accent); border-radius: 3px;
}
.wp-block-heading.is-style-underline.has-text-align-center::after { left: 50%; transform: translateX(-50%); }

/* Gradient text utility */
.ssd-gradient-text {
	background: linear-gradient(100deg, var(--wp--preset--color--accent) 0%, #ff9d42 55%, #ffd7b0 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Lead paragraph */
p.is-style-lead { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.6; color: var(--wp--preset--color--muted); }
.has-navy-background-color p.is-style-lead, .has-navy-deep-background-color p.is-style-lead { color: rgba(255,255,255,.78); }

/* -------------------------------------------------------------------------
   Cards / groups
   ---------------------------------------------------------------------- */
.wp-block-group.is-style-card,
.wp-block-group.is-style-glass,
.wp-block-group.is-style-bordered {
	border-radius: var(--ssd-radius-lg);
	padding: clamp(1.4rem, 2.6vw, 1.9rem);
	text-align: left;
}
/* De-centre content that WP's constrained layout would otherwise centre inside a card */
.wp-block-group.is-style-card > *,
.wp-block-group.is-style-glass > *,
.wp-block-group.is-style-bordered > * {
	margin-left: 0 !important; margin-right: 0 !important; max-width: 100%;
}
.wp-block-group.is-style-card .wp-block-heading,
.wp-block-group.is-style-glass .wp-block-heading { line-height: 1.2; }
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform .4s var(--ssd-ease), box-shadow .4s var(--ssd-ease), border-color .4s var(--ssd-ease);
}
.wp-block-group.is-style-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--card);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
.wp-block-group.is-style-bordered {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 16%, transparent);
	background: transparent;
}
.wp-block-group.is-style-glass {
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.has-navy-background-color .is-style-glass p,
.has-navy-deep-background-color .is-style-glass p { opacity: .82; }

/* Card post titles stay navy; accent only on hover */
.is-style-card .wp-block-post-title a,
.is-style-card .wp-block-post-title { color: var(--wp--preset--color--navy); }
.is-style-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-strong); }

/* interactive tilt — JS toggles .ssd-tilt-on and sets --rx/--ry */
.ssd-tilt { transform-style: preserve-3d; transition: transform .3s var(--ssd-ease); }
.ssd-tilt-on { transition: transform .1s linear; transform: perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px); }

/* Icon chip used in service / feature cards */
.wp-block-html:has(> .ssd-chip) { margin-bottom: .2rem; }
.ssd-chip {
	width: 52px; height: 52px; border-radius: 15px;
	display: grid; place-items: center; flex: none; margin-right: auto;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-strong);
	font-size: 1.5rem;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
	transition: transform .4s var(--ssd-ease), background-color .4s var(--ssd-ease), color .4s var(--ssd-ease);
}
.wp-block-group.is-style-card:hover .ssd-chip { transform: rotate(-6deg) scale(1.06); background: var(--wp--preset--color--accent); color: #fff; }
.has-navy-background-color .ssd-chip, .has-navy-deep-background-color .ssd-chip { background: rgba(255,255,255,.08); color: var(--wp--preset--color--accent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* Numbered badge for process steps */
.ssd-step-num {
	font-family: var(--wp--preset--font-family--display); font-weight: 800;
	font-size: 2.6rem; line-height: 1; color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--wp--preset--color--navy) 40%, transparent);
}
.has-navy-background-color .ssd-step-num, .has-navy-deep-background-color .ssd-step-num { -webkit-text-stroke-color: rgba(255,255,255,.4); }
.wp-block-group.is-style-card:hover .ssd-step-num { color: var(--wp--preset--color--accent); -webkit-text-stroke-color: var(--wp--preset--color--accent); }

/* -------------------------------------------------------------------------
   Checklist list style
   ---------------------------------------------------------------------- */
ul.is-style-check { list-style: none; padding-left: 0; }
ul.is-style-check li { position: relative; padding-left: 2rem; margin-block: .55rem; }
ul.is-style-check li::before {
	content: ""; position: absolute; left: 0; top: .15em;
	width: 1.25rem; height: 1.25rem; border-radius: 6px;
	background: var(--wp--preset--color--accent-tint);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}
ul.is-style-check li::after {
	content: ""; position: absolute; left: .42rem; top: .34em;
	width: .34rem; height: .62rem; border: solid var(--wp--preset--color--accent-strong);
	border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.has-navy-background-color ul.is-style-check li::before, .has-navy-deep-background-color ul.is-style-check li::before { background: rgba(255,255,255,.08); }

/* -------------------------------------------------------------------------
   Hero — animated mesh background
   ---------------------------------------------------------------------- */
.ssd-hero { position: relative; isolation: isolate; overflow: hidden; }
.ssd-hero .ssd-hero-bg {
	position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none;
	background:
		radial-gradient(38% 42% at 18% 22%, rgba(240,124,26,.30), transparent 60%),
		radial-gradient(40% 45% at 82% 18%, rgba(107,120,176,.42), transparent 62%),
		radial-gradient(46% 50% at 68% 88%, rgba(240,124,26,.16), transparent 60%);
	filter: blur(20px);
	animation: ssd-mesh 22s var(--ssd-ease) infinite alternate;
}
@keyframes ssd-mesh {
	0% { transform: translate3d(0,0,0) scale(1); }
	50% { transform: translate3d(2%, -2%, 0) scale(1.08); }
	100% { transform: translate3d(-2%, 1%, 0) scale(1.04); }
}
.ssd-hero .ssd-hero-grid {
	position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
	        mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 78%);
}
.ssd-hero:not(.has-navy-background-color):not(.has-navy-deep-background-color) .ssd-hero-grid {
	background-image: linear-gradient(rgba(11,27,63,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,27,63,.05) 1px, transparent 1px);
}

/* Floating orbit badges in hero */
.ssd-orbit { position: relative; }
.ssd-float { animation: ssd-float 6s ease-in-out infinite; }
.ssd-float:nth-child(2n) { animation-delay: -2s; animation-duration: 7.5s; }
.ssd-float:nth-child(3n) { animation-delay: -4s; animation-duration: 9s; }
@keyframes ssd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Big display headline entrance — class toggle only, text is always present */
.ssd-js .ssd-split { opacity: 0; transform: translateY(28px); }
.ssd-js .ssd-ready .ssd-split {
	opacity: 1; transform: none;
	transition: opacity .8s var(--ssd-ease-out) .05s, transform .8s var(--ssd-ease-out) .05s;
}

/* -------------------------------------------------------------------------
   Scroll reveal
   ---------------------------------------------------------------------- */
.ssd-js .ssd-reveal { opacity: 0; transform: translateY(26px); }
.ssd-js .ssd-reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s var(--ssd-ease-out), transform .7s var(--ssd-ease-out); }
.ssd-js .ssd-reveal[data-reveal="left"] { transform: translateX(-32px); }
.ssd-js .ssd-reveal[data-reveal="right"] { transform: translateX(32px); }
.ssd-js .ssd-reveal[data-reveal="scale"] { transform: scale(.94); }
.ssd-js [class*="ssd-stagger"] > * { opacity: 0; transform: translateY(24px); }
.ssd-js [class*="ssd-stagger"].is-visible > * { opacity: 1; transform: none; transition: opacity .6s var(--ssd-ease-out), transform .6s var(--ssd-ease-out); }
.ssd-js [class*="ssd-stagger"].is-visible > *:nth-child(1) { transition-delay: .00s; }
.ssd-js [class*="ssd-stagger"].is-visible > *:nth-child(2) { transition-delay: .08s; }
.ssd-js [class*="ssd-stagger"].is-visible > *:nth-child(3) { transition-delay: .16s; }
.ssd-js [class*="ssd-stagger"].is-visible > *:nth-child(4) { transition-delay: .24s; }
.ssd-js [class*="ssd-stagger"].is-visible > *:nth-child(5) { transition-delay: .32s; }
.ssd-js [class*="ssd-stagger"].is-visible > *:nth-child(6) { transition-delay: .40s; }
.ssd-js [class*="ssd-stagger"].is-visible > *:nth-child(n+7) { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
	.ssd-reveal, [class*="ssd-stagger"] > *, .ssd-split { opacity: 1 !important; transform: none !important; }
	.ssd-hero-bg, .ssd-float { animation: none !important; }
}

/* -------------------------------------------------------------------------
   Counters / stats
   ---------------------------------------------------------------------- */
.ssd-stat { text-align: center; }
.ssd-stat .ssd-num {
	display: block;
	font-family: var(--wp--preset--font-family--display); font-weight: 800;
	font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1;
}
.ssd-stat .ssd-num[data-suffix]::after { content: attr(data-suffix); color: var(--wp--preset--color--accent); }
.ssd-stat .ssd-stat-label { display: block; color: var(--wp--preset--color--muted); font-size: .9rem; line-height: 1.3; margin-top: .5rem; }
.has-navy-background-color .ssd-stat .ssd-stat-label, .has-navy-deep-background-color .ssd-stat .ssd-stat-label { color: rgba(255,255,255,.66); }

/* -------------------------------------------------------------------------
   Marquee (client logos, testimonial ticker)
   ---------------------------------------------------------------------- */
.ssd-marquee { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ssd-marquee__track { display: flex; align-items: center; gap: 1rem; width: max-content; animation: ssd-scroll var(--ssd-marquee-duration, 38s) linear infinite; }
.ssd-marquee:hover .ssd-marquee__track { animation-play-state: paused; }
.ssd-marquee--rev .ssd-marquee__track { animation-direction: reverse; }
@keyframes ssd-scroll { to { transform: translateX(-50%); } }
.ssd-logo-card {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: clamp(120px, 14vw, 160px);
	height: clamp(52px, 6vw, 64px);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	padding: 0.6rem 1.1rem;
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform .3s var(--ssd-ease), box-shadow .3s var(--ssd-ease);
}
.ssd-logo-card:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--card); }
.ssd-logo { width: auto; height: auto; max-width: 100%; max-height: 28px; object-fit: contain; flex: none; }
.has-navy-background-color .ssd-logo-card, .has-navy-deep-background-color .ssd-logo-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.ssd-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   Testimonials
   ---------------------------------------------------------------------- */
.wp-block-quote.is-style-testimonial {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-left: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--ssd-radius-lg);
	padding: clamp(1.6rem, 3vw, 2.2rem);
	box-shadow: var(--wp--preset--shadow--soft);
	position: relative;
}
.wp-block-quote.is-style-testimonial::before {
	content: "\201C"; position: absolute; top: -.1em; right: .3em;
	font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--wp--preset--color--accent-tint);
}
.wp-block-quote.is-style-testimonial p { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 1.05rem; }
.wp-block-quote.is-style-testimonial cite { font-style: normal; color: var(--wp--preset--color--muted); font-size: .9rem; display: flex; align-items: center; gap: .7rem; margin-top: .9rem; }

.ssd-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--wp--preset--color--sand); }

/* -------------------------------------------------------------------------
   Blob / masked images
   ---------------------------------------------------------------------- */
.wp-block-image.is-style-blob img {
	border-radius: 42% 58% 63% 37% / 42% 45% 55% 58%;
	animation: ssd-morph 14s ease-in-out infinite;
}
@keyframes ssd-morph {
	0%,100% { border-radius: 42% 58% 63% 37% / 42% 45% 55% 58%; }
	50% { border-radius: 58% 42% 38% 62% / 55% 58% 42% 45%; }
}
.wp-block-image.is-style-shadow img { border-radius: 18px; box-shadow: var(--wp--preset--shadow--lift); }
@media (prefers-reduced-motion: reduce) { .wp-block-image.is-style-blob img { animation: none; } }

/* -------------------------------------------------------------------------
   Bento / feature layouts
   ---------------------------------------------------------------------- */
.ssd-bento { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); }
.ssd-bento > * { grid-column: auto; }
.ssd-bento > .ssd-bento--full,
.ssd-bento > .ssd-bento--wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .ssd-bento { grid-template-columns: 1fr; } .ssd-bento > * { grid-column: 1 / -1 !important; } }

/* -------------------------------------------------------------------------
   Responsive — tablet fixes
   ---------------------------------------------------------------------- */
/* Query-loop card grids (case studies, journal) are fixed at 3 columns down
   to core's own 600px breakpoint, which crams cards on tablets. Step them
   down to 2 columns first — but not below 600px, where core's own rule
   already collapses these grids to a single column; without this lower
   bound the !important here was clobbering that mobile rule too. */
@media (min-width: 601px) and (max-width: 1024px) {
	.wp-block-post-template.is-layout-grid[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Sticky side column reads as a stray floating block once it stacks full-width
   on tablet/mobile — only stick it back on desktop. */
@media (max-width: 781px) {
	.ssd-toc { position: static; top: auto; }
}

/* Fixed-height featured images get disproportionately tall on narrow screens. */
@media (max-width: 600px) {
	.wp-block-post-featured-image img { height: 240px !important; }
}

/* -------------------------------------------------------------------------
   Case study cards
   ---------------------------------------------------------------------- */
.ssd-case-card { position: relative; overflow: hidden; border-radius: var(--ssd-radius-lg); }
.ssd-case-card img { transition: transform .6s var(--ssd-ease); }
.ssd-case-card:hover img { transform: scale(1.05); }
.ssd-case-card .ssd-case-body {
	position: absolute; inset: auto 0 0 0; padding: 1.4rem;
	background: linear-gradient(0deg, rgba(11,27,63,.92), rgba(11,27,63,.15) 70%, transparent);
	color: #fff;
}
.ssd-metric-row { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.ssd-metric-row .ssd-metric { font-family: var(--wp--preset--font-family--display); }
.ssd-metric-row .ssd-metric b { display: block; font-size: 1.6rem; color: var(--wp--preset--color--accent); }
.ssd-metric-row .ssd-metric span { font-size: .8rem; opacity: .8; }

/* -------------------------------------------------------------------------
   Accordion / FAQ (native <details>)
   ---------------------------------------------------------------------- */
.ssd-faq details {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 1.15rem 0;
}
.ssd-faq summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.08rem; color: var(--wp--preset--color--navy);
}
.ssd-faq summary::-webkit-details-marker { display: none; }
.ssd-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--wp--preset--color--accent-strong); transition: transform .3s var(--ssd-ease); flex: none; }
.ssd-faq details[open] summary::after { transform: rotate(45deg); }
.ssd-faq details > *:not(summary) { margin-top: .8rem; color: var(--wp--preset--color--muted); animation: ssd-fade .4s var(--ssd-ease); }
@keyframes ssd-fade { from { opacity: 0; transform: translateY(-6px); } }

/* -------------------------------------------------------------------------
   Progress bar (reading / scroll)
   ---------------------------------------------------------------------- */
.ssd-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--wp--preset--gradient--sunrise); transition: width .1s linear; }

/* Back-to-top */
.ssd-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--wp--preset--color--navy); color: #fff; font-size: 1.1rem;
	display: grid; place-items: center; opacity: 0; transform: translateY(12px); pointer-events: none;
	transition: opacity .3s, transform .3s, background-color .3s; box-shadow: var(--wp--preset--shadow--card);
}
.ssd-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ssd-top:hover { background: var(--wp--preset--color--accent); }

/* -------------------------------------------------------------------------
   Contact form
   ---------------------------------------------------------------------- */
.ssd-form-wrap { --field-bg: var(--wp--preset--color--surface); }
.ssd-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.ssd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.ssd-field { display: flex; flex-direction: column; gap: .4rem; }
.ssd-field--full { grid-column: 1 / -1; }
.ssd-field > span { font-size: .82rem; font-weight: 600; font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--navy); letter-spacing: .01em; }
.ssd-field > span i { color: var(--wp--preset--color--accent-strong); font-style: normal; }
.ssd-form input, .ssd-form select, .ssd-form textarea {
	font: inherit; font-size: .98rem; padding: .8rem .9rem;
	border: 1px solid var(--wp--preset--color--hairline); border-radius: 12px;
	background: var(--field-bg); color: var(--wp--preset--color--contrast);
	transition: border-color .2s, box-shadow .2s; width: 100%;
}
.ssd-form textarea { resize: vertical; min-height: 120px; }
.ssd-form input:focus, .ssd-form select:focus, .ssd-form textarea:focus { border-color: var(--wp--preset--color--accent); box-shadow: var(--ssd-ring); outline: none; }
.ssd-form-foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.3rem; }
.ssd-form-fine { font-size: .82rem; color: var(--wp--preset--color--muted); }
.ssd-submit { border: none; cursor: pointer; }
.ssd-form-note { border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
.ssd-form-note--ok { background: #eaf7ee; color: #1c6b34; border: 1px solid #bfe6c9; }
.ssd-form-note--err { background: #fdecec; color: #a12626; border: 1px solid #f3c4c4; }
.has-navy-background-color .ssd-form input, .has-navy-background-color .ssd-form select, .has-navy-background-color .ssd-form textarea,
.has-navy-deep-background-color .ssd-form input, .has-navy-deep-background-color .ssd-form select, .has-navy-deep-background-color .ssd-form textarea {
	--field-bg: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #fff;
}
.has-navy-background-color .ssd-field > span, .has-navy-deep-background-color .ssd-field > span { color: rgba(255,255,255,.8); }

@media (max-width: 640px) { .ssd-form-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
.ssd-footer a { color: rgba(255,255,255,.72); }
.ssd-footer a:hover { color: #fff; }
.ssd-footer .wp-block-heading { color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.ssd-social { display: flex; gap: .6rem; }
.ssd-social a {
	width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
	transition: background-color .3s, transform .3s, border-color .3s;
}
.ssd-social a:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); transform: translateY(-3px); }
.ssd-footer .wp-block-site-logo img { filter: brightness(0) invert(1); }

/* -------------------------------------------------------------------------
   Post / article body
   ---------------------------------------------------------------------- */
.ssd-article :where(h2, h3) { margin-top: 1.8em; }
.ssd-article :where(p, ul, ol) { max-width: 68ch; }
.ssd-article figure img { border-radius: 14px; }
.ssd-toc { position: sticky; top: calc(var(--ssd-header-h) + 20px); }

/* Post-terms as pills */
.is-style-pills a, .wp-block-post-terms.is-style-pills a {
	display: inline-block; padding: .3em .8em; margin: .15em .2em .15em 0;
	background: var(--wp--preset--color--accent-tint); color: var(--wp--preset--color--accent-strong);
	border-radius: 999px; font-size: .8rem; text-decoration: none; font-weight: 600;
}

/* -------------------------------------------------------------------------
   Misc utilities used by patterns
   ---------------------------------------------------------------------- */
.ssd-eyebrow-dot { display: inline-flex; align-items: center; gap: .5rem; }
.ssd-eyebrow-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); box-shadow: 0 0 0 4px rgba(240,124,26,.2); }
.ssd-rule { height: 1px; background: var(--wp--preset--color--hairline); border: 0; }
.ssd-noise::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Rounded section top curve */
.ssd-curve-top { border-top-left-radius: 40px; border-top-right-radius: 40px; margin-top: -40px; }

/* Keep wide media tidy */
.wp-block-columns { align-items: stretch; }
figure.wp-block-table { overflow-x: auto; }