/* ==========================================================================
   Polayads refined: the existing Ink/Bone geometric identity, executed with
   more precision. Builds on site.css; loaded only with the
   "Homepage (refined)" template.
   ========================================================================== */

.rf {
	--rf-ease: cubic-bezier(.22, .8, .16, 1);
	--rf-out: cubic-bezier(.4, 0, .2, 1);
	--rf-fast: 160ms;
	--rf-mid: 260ms;
	--rf-rule-dark: #2f2e2c;
	--rf-accent: #f2b33d;
}

/* Header styles live in site.css so every page shares them. */
.rf .pa-logo img { height: 21px; }
@media (max-width: 599px) { .rf .pa-header__inner .pa-logo img { height: 16px; } }

/* --------------------------------------------------------------------------
   Buttons and links: one squared system, consistent feedback
   -------------------------------------------------------------------------- */

.rf .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; }
.rf .wp-block-button__link:active { transform: scale(.98); }
.rf .wp-block-button__link::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: currentColor; opacity: .08; transform: scaleX(0); transform-origin: left;
	transition: transform var(--rf-mid) var(--rf-ease);
}
.rf .wp-block-button__link:hover::before, .rf .wp-block-button__link:focus-visible::before { transform: scaleX(1); }

.rf-link { margin: 0; }
.rf-link a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1px no-repeat; transition: gap var(--rf-fast) var(--rf-ease), background-size var(--rf-mid) var(--rf-ease); }
.rf-link a::after { content: "→"; transition: transform var(--rf-fast) var(--rf-ease); }
.rf-link a:hover, .rf-link a:focus-visible { background-size: 0 1px; background-position: 100% calc(100% - 9px); }
.rf-link a:hover::after, .rf-link a:focus-visible::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.rf-hero { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem) clamp(3.5rem, 2rem + 5vw, 7rem); overflow: clip; }
.rf-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pa-col-gap); row-gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.rf-hero__intro { grid-column: 1 / -1; }
.rf-hero__intro > * { margin: 0; }
.rf-hero .pa-display { font-size: clamp(2.75rem, 1.05rem + 5.6vw, 6.25rem); line-height: .95; letter-spacing: -.045em; margin-top: 1.25rem !important; }
.rf-hero__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1.75rem; }
.rf-hero__body > * { margin: 0; }
.rf-hero .pa-lede { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); max-width: 31em; }
.rf-hero .pa-tagline { padding-top: 1.25rem; border-top: 1px solid var(--rf-rule-dark); }
.rf-hero .wp-block-polayads-stage { grid-column: 1 / -1; justify-self: center; width: min(100%, 460px); }

/* The offer, stated plainly beside the headline */
.rf-offer { counter-reset: rf-offer; list-style: none; padding: 0; margin: 0 !important; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rf-rule-dark); }
.rf-offer li { counter-increment: rf-offer; border-bottom: 1px solid var(--rf-rule-dark); }
.rf-offer li:nth-child(odd) { border-right: 1px solid var(--rf-rule-dark); }
.rf-offer a { display: grid; grid-template-columns: auto 1fr; gap: .2rem .65rem; align-items: baseline; min-height: 44px; padding: .85rem .9rem .85rem 0; text-decoration: none; font: 500 .9375rem/1.3 var(--pa-body); color: var(--pa-bone); transition: color var(--rf-fast) ease, padding var(--rf-mid) var(--rf-ease); }
.rf-offer li:nth-child(even) a { padding-left: .9rem; }
.rf-offer a::before { content: counter(rf-offer, decimal-leading-zero); font: 500 .75rem/1 var(--pa-display); color: #8c8b87; }
.rf-offer a:hover, .rf-offer a:focus-visible { color: #fff; padding-left: .35rem; }
.rf-offer li:nth-child(even) a:hover, .rf-offer li:nth-child(even) a:focus-visible { padding-left: 1.25rem; }

@media (min-width: 700px) and (max-width: 1099px) {
	.rf-hero__body { grid-column: 1 / span 7; }
	.rf-hero .wp-block-polayads-stage { grid-column: 8 / -1; grid-row: 2; align-self: start; width: 100%; }
}
@media (min-width: 1100px) {
	.rf-hero__body { grid-column: 1 / span 5; grid-row: 2; }
	.rf-hero .wp-block-polayads-stage { grid-column: 8 / -1; grid-row: 2; width: 100%; max-width: 560px; justify-self: end; margin-top: clamp(-7rem, -6vw, -4rem); }
}

/* --------------------------------------------------------------------------
   Signature: four cells, one loop
   -------------------------------------------------------------------------- */

.sg { --mx: 0; --my: 0; line-height: 0; }
.sg-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sg.is-live .sg-p { transform: translate(calc(var(--mx) * var(--d, 1) * 5px), calc(var(--my) * var(--d, 1) * 5px)); transition: transform 500ms var(--rf-ease); }
.sg-m { will-change: auto; }
.sg-grid path { fill: none; stroke: #4a4946; stroke-width: 1.4; }
.sg-cell { fill: none; stroke: #2f2e2c; }
.sg-solid { fill: var(--pa-bone); }
.sg-outline { fill: none; stroke: #6b6a67; }
.sg-mid { fill: #8c8b87; }
.sg-dim { fill: #6b6a67; }
.sg-ink { fill: #000; }
.sg-accent { fill: var(--rf-accent); }
.sg-card { fill: #2a2a28; }
.sg-frame { fill: none; stroke: var(--pa-bone); stroke-width: 2; }
.sg-wire rect { fill: var(--pa-bone); }
.sg-wire { opacity: 0; }
.sg-ui-bar { fill: var(--pa-bone); }
.sg-ring { fill: none; stroke: var(--rf-accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sg-note { font: italic 400 13px Georgia, serif; fill: var(--pa-bone); }
.sg-aa { font: 500 108px/1 var(--pa-display); letter-spacing: -6px; fill: #000; }
.sg-spec { font: 500 11.5px var(--pa-body); fill: #444341; }
.sg-serif { font: 400 27px Georgia, serif; letter-spacing: -.5px; fill: #000; }
.sg-btn { font: 600 10.5px var(--pa-body); fill: #000; text-anchor: middle; }

.sg-hub { fill: #000; }
.sg-link { fill: none; stroke: var(--pa-bone); stroke-width: 1.5; }
.sg-arrow { fill: none; stroke: var(--pa-bone); stroke-width: 1.5; paint-order: stroke; }
.sg-node { fill: var(--pa-bone); stroke: #000; stroke-width: 2; paint-order: stroke; }
.sg-labels text { font: 500 12.5px var(--pa-body); letter-spacing: .04em; fill: #b9b8b4; }


@media (prefers-reduced-motion: no-preference) {
	/* 1. Fine structural lines establish the composition */
	.pa-js .sg-grid path { stroke-dasharray: 560; stroke-dashoffset: 560; animation: sg-draw 700ms var(--rf-out) both; animation-delay: calc(var(--i) * 45ms); }
	/* 2. The four cells assemble around the loop, in order */
	.pa-js .sg-m { animation: sg-assemble 900ms var(--rf-ease) both; }
	.pa-js .sg-m--research { --fx: -26px; --fy: -26px; animation-delay: 260ms; }
	.pa-js .sg-m--design { --fx: 26px; --fy: -26px; animation-delay: 400ms; }
	.pa-js .sg-m--dev { --fx: 26px; --fy: 26px; animation-delay: 540ms; }
	.pa-js .sg-m--marketing { --fx: -26px; --fy: 26px; animation-delay: 680ms; }
	.pa-js .sg-mark.is-pattern { animation: sg-pop 420ms var(--rf-ease) both; animation-delay: calc(1050ms + var(--i) * 35ms); }
	/* 3. Each cell reveals a fragment of real work */
	.pa-js .sg-frag { animation: sg-reveal 750ms var(--rf-ease) both; }
	.pa-js .sg-frag--design { animation-delay: 1150ms; }
	.pa-js .sg-frag--dev { animation-delay: 1300ms; }
	.pa-js .sg-frag--marketing { animation-delay: 1450ms; }
	.pa-js .sg-frag--research { animation-delay: 1500ms; }
	.pa-js .sg-wire { animation: sg-wire 1700ms linear both; }
	/* 4. The loop connects them and everything settles */
	.pa-js .sg-link { stroke-dasharray: 252; stroke-dashoffset: 252; animation: sg-draw 800ms var(--rf-out) 1700ms forwards; }
	.pa-js .sg-hub { opacity: 0; animation: sg-fade 300ms ease 1650ms forwards; }
	.pa-js .sg-arrow, .pa-js .sg-node { opacity: 0; animation: sg-fade 300ms ease 2250ms forwards; }
	.pa-js .sg-labels { opacity: 0; animation: sg-fade 500ms ease 1900ms forwards; }
}
@keyframes sg-draw { to { stroke-dashoffset: 0; } }
@keyframes sg-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-reveal { from { opacity: 0; transform: translate(-10px, 0px); } to { opacity: 1; transform: translate(0px, 0px); } }
@keyframes sg-wire { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sg-fade { to { opacity: 1; } }

/* Mobile storyboard: no line drawing, a tighter assembly, labels as the offer list */
@media (max-width: 699px) {
	.sg-labels { display: none; }
	@media (prefers-reduced-motion: no-preference) {
		.pa-js .sg-grid path { animation: sg-fade 500ms ease both; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; animation-delay: 0ms; }
		.pa-js .sg-m { animation-duration: 650ms; }
		.pa-js .sg-m--research { animation-delay: 80ms; } .pa-js .sg-m--design { animation-delay: 170ms; }
		.pa-js .sg-m--dev { animation-delay: 260ms; } .pa-js .sg-m--marketing { animation-delay: 350ms; }
		.pa-js .sg-mark.is-pattern { animation-delay: calc(650ms + var(--i) * 20ms); }
		.pa-js .sg-frag { animation-duration: 550ms; }
		.pa-js .sg-frag--design { animation-delay: 650ms; } .pa-js .sg-frag--dev { animation-delay: 750ms; }
		.pa-js .sg-frag--marketing { animation-delay: 850ms; } .pa-js .sg-frag--research { animation-delay: 900ms; }
		.pa-js .sg-wire { animation-duration: 1000ms; }
		.pa-js .sg-link { animation-delay: 1000ms; animation-duration: 550ms; }
		.pa-js .sg-arrow, .pa-js .sg-node { animation-delay: 1400ms; }
	}
}

/* --------------------------------------------------------------------------
   Section openings: dark chapters open out of an inset frame (scroll-linked
   where supported; otherwise simply present)
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
		.rf-open { animation: rf-open linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
	}
}
@keyframes rf-open { from { clip-path: inset(0 3.5% 0 3.5%); } to { clip-path: inset(0 0 0 0); } }

/* Key headings: a single masked rise, used sparingly */
@media (prefers-reduced-motion: no-preference) {
}

/* --------------------------------------------------------------------------
   Showcase: Morrow Pantry, presented as a studio case study
   -------------------------------------------------------------------------- */

.rf-show { background: var(--pa-bone); }
.rf-show .pa-head__intro { color: var(--pa-secondary); }
.sc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.sc-tile { position: relative; display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.5rem); padding: clamp(1rem, 2.2vw, 2rem); overflow: hidden; }
.sc-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .35rem 1rem; }
.sc-cap > * { margin: 0; }
.sc-label { display: flex; align-items: center; gap: .55rem; font: 600 .75rem/1 var(--pa-body); letter-spacing: .08em; text-transform: uppercase; }
.sc-label svg { width: 14px; height: 14px; fill: currentColor; }
.sc-note { font-size: .875rem; line-height: 1.4; opacity: .78; max-width: 30ch; }
.sc-art { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.sc-art > * { width: 100%; }
.sc-tile--research { background: #d6d3ca; color: var(--pa-text); }
.sc-tile--brand { background: #3f4a26; color: #f7f1e3; }
.sc-tile--web { background: #cbc8bf; color: var(--pa-text); }
.sc-tile--marketing { background: #26271f; color: #f7f1e3; }
.sc-browser { box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .5); border-radius: 6px; overflow: hidden; }
.sc-browser .hx-chrome { height: 28px; padding: 0 12px; gap: 6px; background: #e9e6dd; }
.sc-browser .hx-chrome i { width: 8px; height: 8px; background: #bdb9ae; } .sc-browser .hx-chrome span { font-size: 10px; padding: 3px 14px; margin-left: 12px; background: #fff; color: #6b6a5e; }
@media (min-width: 900px) {
	.sc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sc-tile--research { grid-column: 1 / span 7; }
	.sc-tile--brand { grid-column: 8 / -1; }
	.sc-tile--web { grid-column: 1 / span 8; }
	.sc-tile--marketing { grid-column: 9 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
	.pa-js .sc .sc-tile { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--rf-ease); }
	.pa-js .sc.is-in .sc-tile { clip-path: inset(0 0 0 0); }
	.pa-js .sc.is-in .sc-tile--brand { transition-delay: 120ms; }
	.pa-js .sc.is-in .sc-tile--web { transition-delay: 240ms; }
	.pa-js .sc.is-in .sc-tile--marketing { transition-delay: 360ms; }
	.pa-js .sc .sc-art > * { transform: translateY(18px); opacity: 0; transition: transform 900ms var(--rf-ease), opacity 600ms ease; }
	.pa-js .sc.is-in .sc-art > * { transform: none; opacity: 1; transition-delay: 380ms; }
}
.pa-reveal-all .sc .sc-tile, .pa-reveal-all .sc .sc-art > * { clip-path: none !important; opacity: 1 !important; transform: none !important; }

/* Brand pieces shared by every artboard */
.mx-mark { display: block; }
.mx-mark__seal { fill: var(--mx-seal, #3f4a26); }
.mx-mark__sun, .mx-mark__line { fill: none; stroke: var(--mx-ink, #f1dfa6); stroke-width: 2.4; stroke-linecap: round; }
.mx-logo { display: inline-flex; align-items: center; gap: .55em; color: #3f4a26; font-size: 1em; line-height: 1; white-space: nowrap; }
.mx-logo .mx-mark { width: 2.1em; height: 2.1em; flex: none; }
.mx-logo__type { display: grid; gap: .28em; }
.mx-logo__type b { font: 700 1.25em/1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.mx-logo__type i { font: 700 .46em/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .42em; text-transform: uppercase; }
.mx-pack { display: block; }
.mx-pk-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.mx-pk-sans { font-family: Inter, system-ui, sans-serif; font-weight: 700; }
.mx-pk-serif:not([fill]), .mx-pk-sans:not([fill]) { fill: #3f4a26; }

/* Website: a 1280 px desktop page, scaled with its container */
.mx-site { container-type: inline-size; background: #f7f1e3; color: #1e1f17; font-family: Inter, system-ui, sans-serif; }
.mx-in { font-size: 1.1cqi; line-height: 1.45; }
.mx-in p { margin: 0; }
.mx-bar { background: #3f4a26; color: #f1dfa6; text-align: center; font-size: .9cqi; padding: .65cqi; letter-spacing: .02em; }
.mx-nav { display: flex; align-items: center; gap: 3cqi; padding: 1.5cqi 4cqi; border-bottom: 1px solid rgba(63, 74, 38, .15); }
.mx-nav .mx-logo { font-size: 1.35cqi; }
.mx-links { display: flex; gap: 2.6cqi; margin-left: auto; font-weight: 500; color: #2f3424; }
.mx-basket { padding: .6cqi 1.4cqi; border: 1px solid #3f4a26; border-radius: 99px; font-weight: 600; color: #3f4a26; }
.mx-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4cqi; padding: 4.2cqi 4cqi 4cqi; align-items: center; }
.mx-kicker { color: #c9472b; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85cqi; margin-bottom: 1.4cqi !important; }
.mx-h1 { font: 700 4.3cqi/1.03 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
.mx-lede { font-size: 1.3cqi; color: #4b4a40; max-width: 36ch; margin: 1.8cqi 0 2.4cqi !important; }
.mx-ctas { display: flex; align-items: center; gap: 2.2cqi; }
.mx-btn { background: #c9472b; color: #fff; padding: 1.15cqi 2.2cqi; border-radius: 99px; font-weight: 700; box-shadow: 0 .5cqi 1.2cqi -.5cqi rgba(201, 71, 43, .7); }
.mx-link { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; color: #3f4a26; }
.mx-usps { display: flex; gap: 3cqi; margin-top: 3cqi; padding-top: 2cqi; border-top: 1px solid rgba(63, 74, 38, .18); font-size: .95cqi; color: #5a5847; }
.mx-usps b { display: block; font: 700 1.6cqi/1.1 Georgia, serif; color: #3f4a26; margin-bottom: .2cqi; }
.mx-hero__art { position: relative; aspect-ratio: 1.08; background: #3f4a26; border-radius: 1.2cqi; overflow: hidden; }
.mx-hero__art::before { content: ""; position: absolute; width: 34%; aspect-ratio: 1; right: 9%; top: 9%; border-radius: 50%; background: #f1dfa6; }
.mx-shelf { position: absolute; inset: auto 0 0; height: 21%; background: #323c1d; }
.mx-hero__art .mx-pack { position: absolute; bottom: 13%; filter: drop-shadow(0 1.2cqi 1cqi rgba(0, 0, 0, .35)); }
.mx-hero__art .mx-pack--bag { left: 9%; width: 38%; }
.mx-hero__art .mx-pack--coffee { left: 42%; width: 30%; bottom: 12%; }
.mx-hero__art .mx-pack--jar { left: 69%; width: 23%; }
.mx-ticket { position: absolute; top: 9%; left: 8%; background: #f7f1e3; padding: 1cqi 1.5cqi; border-radius: .5cqi; transform: rotate(-4deg); box-shadow: 0 1cqi 2cqi -1cqi rgba(0, 0, 0, .5); }
.mx-ticket i { display: block; font-style: normal; font-size: .8cqi; color: #6b6a5e; }
.mx-ticket b { display: block; font: 700 1.4cqi/1.2 Georgia, serif; color: #3f4a26; }
.mx-shop { padding: .5cqi 4cqi 4.5cqi; }
.mx-shop__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2cqi; }
.mx-h2 { font: 700 2cqi/1.1 Georgia, serif; }
.mx-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqi; }
.mx-card__img { position: relative; aspect-ratio: 1; background: #ece3cf; border-radius: .8cqi; display: grid; place-items: center; }
.mx-card__img .mx-pack { width: 44%; filter: drop-shadow(0 .8cqi .7cqi rgba(0, 0, 0, .2)); }
.mx-tag { position: absolute; top: 1cqi; left: 1cqi; background: #3f4a26; color: #f1dfa6; font-size: .78cqi; font-weight: 700; padding: .35cqi .8cqi; border-radius: 99px; }
.mx-card__name { font-weight: 700; margin-top: 1.2cqi !important; font-size: 1.12cqi; }
.mx-card__meta { color: #6b6a5e; font-size: .92cqi; margin-top: .2cqi !important; }
.mx-card__row { display: flex; justify-content: space-between; align-items: center; margin-top: 1cqi; }
.mx-price { font-weight: 700; font-size: 1.2cqi; }
.mx-add { border: 1px solid #3f4a26; color: #3f4a26; padding: .4cqi 1.3cqi; border-radius: 99px; font-weight: 700; font-size: .92cqi; }

/* Research: a readout slide */
.mx-slide { container-type: inline-size; background: #fff; color: #1e1f17; font-family: Inter, system-ui, sans-serif; box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .45); }
.mx-slide__in, .mx-guide__in { box-sizing: border-box; display: flex; flex-direction: column; }
.mx-slide__in { aspect-ratio: 16 / 10; padding: 4.4cqi 5cqi; gap: 2.4cqi; }
.mx-slide__in p, .mx-guide__in p { margin: 0; }
.mx-slide__top { display: flex; justify-content: space-between; font-size: 1.4cqi; color: #7a786c; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid #e4e0d4; padding-bottom: 1.5cqi; }
.mx-slide__title { font: 700 3.8cqi/1.08 Georgia, serif; max-width: 24ch; color: #3f4a26; letter-spacing: -.01em; }
.mx-slide__body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4cqi; flex: 1; align-items: start; }
.mx-slide__q { font-size: 1.6cqi; font-weight: 600; margin-bottom: 2cqi !important; }
.mx-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.7cqi; }
.mx-bars li { display: grid; grid-template-columns: 1fr auto; gap: .6cqi 1.5cqi; font-size: 1.5cqi; color: #4b4a40; }
.mx-bars b { grid-row: 1; grid-column: 2; font-size: 1.7cqi; color: #1e1f17; }
.mx-bars i { grid-column: 1 / -1; height: 2cqi; background: #efeadc; position: relative; border-radius: .3cqi; overflow: hidden; }
.mx-bars i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: #c3bca5; }
.mx-bars .is-lead i::before { background: #c9472b; }
.mx-bars .is-lead b, .mx-bars .is-lead span { color: #c9472b; font-weight: 700; }
.mx-slide__n { font-size: 1.25cqi; color: #8a8879; margin-top: 2cqi !important; }
.mx-quote { margin: 0; background: #f7f1e3; padding: 2.8cqi; border-left: .6cqi solid #c8873a; }
.mx-quote blockquote { margin: 0; font: italic 400 2.1cqi/1.35 Georgia, serif; color: #1e1f17; }
.mx-quote figcaption { margin-top: 1.5cqi; font-size: 1.3cqi; color: #6b6a5e; font-weight: 600; }
.mx-slide__foot { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; font-size: 1.5cqi; padding-top: 1.5cqi; border-top: 1px solid #e4e0d4; }
.mx-slide__foot b { color: #c9472b; margin-right: 1cqi; text-transform: uppercase; letter-spacing: .08em; font-size: 1.25cqi; }
.mx-illus { border: 1px solid #b9b5a6; padding: .45cqi 1.1cqi; border-radius: 99px; font-size: 1.2cqi; color: #6b6a5e; white-space: nowrap; }

/* Identity: a guidelines page */
.mx-guide { container-type: inline-size; background: #f7f1e3; color: #1e1f17; font-family: Inter, system-ui, sans-serif; box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .55); }
.mx-guide__in { aspect-ratio: 1.12; padding: 5cqi; gap: 3.6cqi; }
.mx-guide .mx-slide__top { font-size: 2cqi; padding-bottom: 2cqi; }
.mx-guide__logo { flex: 1; display: grid; place-items: center; background: #fff; border-radius: 1cqi; }
.mx-clear { padding: 3.2cqi; outline: 1px dashed #c8873a; }
.mx-logo--lg { font-size: 5cqi; }
.mx-guide__marks { display: flex; align-items: center; gap: 2.2cqi; }
.mx-chip { width: 9cqi; aspect-ratio: 1; border-radius: 1cqi; display: grid; place-items: center; flex: none; }
.mx-chip .mx-mark { width: 64%; height: auto; }
.mx-chip--olive { background: #3f4a26; --mx-seal: #f1dfa6; --mx-ink: #3f4a26; }
.mx-chip--flour { background: #fff; box-shadow: inset 0 0 0 1px #e4e0d4; }
.mx-chip--tomato { background: #c9472b; --mx-seal: #f7f1e3; --mx-ink: #c9472b; }
.mx-type { margin-left: auto; display: flex; align-items: center; gap: 2cqi; font-size: 2cqi; line-height: 1.35; color: #4b4a40; }
.mx-type > b { font: 700 7.5cqi/1 Georgia, serif; color: #1e1f17; }
.mx-type em { font-style: normal; font-weight: 700; color: #1e1f17; }
.mx-sws { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqi; }
.mx-sw { aspect-ratio: .8; border-radius: .8cqi; padding: 1.5cqi; display: flex; flex-direction: column; justify-content: flex-end; gap: .3cqi; font-size: 1.9cqi; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.mx-sw b { font-weight: 700; } .mx-sw i { font-style: normal; opacity: .8; font-size: 1.6cqi; }

/* Campaign: a story ad on a phone */
.sc-tile--marketing .sc-art > .mx-phone { width: min(86%, 360px); }
.mx-phone { aspect-ratio: 9 / 19.5; background: #0d0d0c; border-radius: 13% / 6%; padding: 3.4%; box-sizing: border-box; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8), inset 0 0 0 1px #3a3a36; }
.mx-phone__screen { container-type: inline-size; position: relative; height: 100%; border-radius: 10% / 4.6%; overflow: hidden; background: #f1dfa6; }
.mx-phone__screen::before { content: ""; position: absolute; z-index: 2; top: 2.6cqi; left: 50%; width: 28cqi; height: 7.5cqi; background: #0d0d0c; border-radius: 99px; transform: translateX(-50%); }
.mx-story { height: 100%; box-sizing: border-box; padding: 13cqi 6.5cqi 8cqi; display: flex; flex-direction: column; gap: 4.2cqi; color: #3f4a26; font-family: Inter, system-ui, sans-serif; }
.mx-story p { margin: 0; }
.mx-story__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; }
.mx-story__bars i { height: 1cqi; border-radius: 99px; background: rgba(63, 74, 38, .22); }
.mx-story__bars .is-done { background: #3f4a26; }
.mx-story__bars .is-now { background: linear-gradient(90deg, #3f4a26 58%, rgba(63, 74, 38, .22) 58%); }
.mx-story__head { display: flex; align-items: center; gap: 2.6cqi; font-size: 3.8cqi; color: #4b4a40; }
.mx-story__head b { color: #1e1f17; margin-right: 1.2cqi; }
.mx-avatar { width: 9cqi; flex: none; } .mx-avatar .mx-mark { width: 100%; height: auto; }
.mx-story__line { font: 700 10.5cqi/1.02 Georgia, serif; letter-spacing: -.015em; color: #1e1f17; margin-top: 2cqi !important; }
.mx-story__art { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2cqi; }
.mx-story__art::before { content: ""; position: absolute; left: 50%; bottom: 14%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #e9cd80; transform: translateX(-50%); }
.mx-story__art::after { content: ""; position: absolute; inset: auto -6.5cqi 0; height: 9cqi; background: #e2c374; }
.mx-story__art .mx-pack { position: relative; z-index: 1; }
.mx-story__art .mx-pack { filter: drop-shadow(0 3cqi 2.5cqi rgba(63, 74, 38, .35)); }
.mx-story__art .mx-pack--bag { width: 62%; }
.mx-story__art .mx-pack--coffee { width: 47%; margin-left: -12%; }
.mx-story__sub { font-size: 4.2cqi; line-height: 1.35; color: #4b4a40; }
.mx-story__cta { text-align: center; background: #c9472b; color: #fff; font: 700 4.6cqi/1 Inter, system-ui, sans-serif; padding: 4cqi; border-radius: 99px; }

/* --------------------------------------------------------------------------
   Development: structure becomes a usable interface
   -------------------------------------------------------------------------- */

.rf-dev__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pa-col-gap); row-gap: 2.5rem; align-items: center; }
.rf-dev__text { grid-column: 1 / -1; display: grid; gap: 1.25rem; }
.rf-dev__text > * { margin: 0; }
.rf-dev__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.035em; }
.rf-dev__text p:not([class]) { color: #c9c8c3; max-width: 36ch; font-size: 1.0625rem; }
.rf-caps { list-style: none; padding: 0; margin: .25rem 0 0 !important; border-top: 1px solid var(--rf-rule-dark); display: grid; grid-template-columns: 1fr 1fr; }
.rf-caps li { padding: .7rem 0; border-bottom: 1px solid var(--rf-rule-dark); font-size: .9375rem; color: var(--pa-bone); }
.rf-dev .wp-block-polayads-stage { grid-column: 1 / -1; }
@media (min-width: 1000px) {
	.rf-dev__text { grid-column: 1 / span 5; }
	.rf-dev .wp-block-polayads-stage { grid-column: 7 / -1; }
}

.bd-controls { display: inline-flex; border: 1px solid #3a3937; margin-bottom: 1rem; }
.db-mode { min-height: 44px; padding: 0 1.15rem; border: 0; background: transparent; color: #b9b8b4; font: 600 .875rem/1 var(--pa-body); letter-spacing: .01em; cursor: pointer; transition: background-color var(--rf-fast) ease, color var(--rf-fast) ease; }
.db-mode + .db-mode { border-left: 1px solid #3a3937; }
.db-mode:hover { color: var(--pa-bone); }
.db-mode[aria-pressed="true"] { background: var(--pa-bone); color: #000; }
.db-mode:focus-visible { outline: 2px solid var(--pa-bone); outline-offset: 2px; }
.bd-frame { background: #161615; padding: clamp(.75rem, 2vw, 1.75rem); border: 1px solid #2a2a28; }
.bd-browser .hx-chrome { height: 30px; padding: 0 12px; gap: 6px; border-radius: 6px 6px 0 0; background: #2a2a28; }
.bd-browser .hx-chrome i { width: 8px; height: 8px; background: #555; } .bd-browser .hx-chrome span { font-size: 10px; padding: 3px 14px; margin-left: 12px; background: #3a3937; color: #b9b8b4; }
.bd-view { position: relative; overflow: hidden; border-radius: 0 0 6px 6px; background: #fbf6ea; }
.bd-view .mx-site { position: relative; z-index: 1; }
.bd-columns { position: absolute; inset: 0 1.2rem; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; pointer-events: none; opacity: 0; transition: opacity 500ms ease; }
.bd-columns i { background: rgba(242, 179, 61, .10); border-inline: 1px solid rgba(242, 179, 61, .35); }
.bd-notes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bd-note { position: absolute; left: auto; right: 3%; top: var(--y); padding: .3rem .55rem; background: #000; color: var(--pa-bone); font: 600 .6875rem/1 var(--pa-body); letter-spacing: .04em; text-transform: uppercase; opacity: 0; transform: translateX(8px); transition: opacity 400ms ease, transform 500ms var(--rf-ease); }
.bd-caption { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 0; font-size: .875rem; color: #b9b8b4; }
.bd-caption .pa-concept { width: max-content; }

/* The morph: colours and imagery give way to boxes and labels */
.bd .mx-site, .bd .mx-site * { transition: color 500ms ease, background-color 500ms ease, outline-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease, opacity 400ms ease; }
.bd[data-mode="structure"] .mx-site { background: #fff; }
.bd[data-mode="structure"] .mx-t, .bd[data-mode="structure"] .mx-t * { color: transparent !important; text-decoration: none; }
.bd[data-mode="structure"] .mx-t { background: #e4e2db; border-radius: 2px; }
.bd[data-mode="structure"] .mx-b { color: transparent !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; outline: 1.5px dashed #6b6a67; }
.bd[data-mode="structure"] .mx-img { background: transparent !important; outline: 1.5px dashed #9b9a96; outline-offset: -1px; }
.bd[data-mode="structure"] .mx-img > *, .bd[data-mode="structure"] .mx-img::before { opacity: 0; }
.bd[data-mode="structure"] .mx-logo { opacity: .25; }
.bd[data-mode="structure"] :is(.mx-usps, .mx-nav) { border-color: #e4e2db; }
.bd[data-mode="structure"] .bd-columns { opacity: 1; }
.bd[data-mode="structure"] .bd-note { opacity: 1; transform: none; }
.bd[data-mode="structure"] .bd-note:nth-child(2) { transition-delay: 80ms; } .bd[data-mode="structure"] .bd-note:nth-child(3) { transition-delay: 160ms; } .bd[data-mode="structure"] .bd-note:nth-child(4) { transition-delay: 240ms; }
@media (max-width: 599px) { .bd-note { font-size: .625rem; } }

/* --------------------------------------------------------------------------
   Remaining services: compact numbered rows
   -------------------------------------------------------------------------- */

.rf-more .pa-row { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.rf-more .pa-row__title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.375rem); }
.rf-more .pa-row__body p { font-size: 1rem; }

/* --------------------------------------------------------------------------
   How we work: one compact band
   -------------------------------------------------------------------------- */

.rf-how { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.rf-how__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.rf-how__grid > * { margin: 0; }
.rf-how__title { font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; }
.rf-how__lede { color: var(--pa-secondary); max-width: 36ch; margin-top: 1rem !important; }
.rf-flow { list-style: none; padding: 0; margin: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--pa-rule-light); counter-reset: rf-flow; }
.rf-flow li { counter-increment: rf-flow; padding: 1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--pa-rule-light); display: grid; gap: .3rem; }
.rf-flow li::before { content: counter(rf-flow, decimal-leading-zero); font: 500 .8125rem/1 var(--pa-display); color: var(--pa-secondary); }
.rf-flow strong { font: 500 1.125rem/1.25 var(--pa-display); }
.rf-flow span { font-size: .875rem; color: var(--pa-secondary); }
@media (min-width: 900px) {
	.rf-how__grid { grid-template-columns: 4fr 8fr; column-gap: var(--pa-col-gap); }
	.rf-flow { grid-template-columns: repeat(4, 1fr); border-top: 2px solid #000; }
	.rf-flow li { border-bottom: 0; position: relative; padding-right: 1.5rem; }
	.rf-flow li:not(:last-child)::after { content: ""; position: absolute; top: -5px; right: 1rem; width: 8px; height: 8px; background: #000; }
}

/* --------------------------------------------------------------------------
   Enquiry invitation
   -------------------------------------------------------------------------- */

.rf-close { padding-block: clamp(4.5rem, 3rem + 7vw, 10rem); }
.rf-close__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.rf-close__grid > * { margin: 0; }
.rf-close__main > * { margin: 0; }
.rf-close .pa-closing__title { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6.5rem); max-width: 10ch; }
.rf-close .pa-closing__text { margin-top: 1.75rem !important; }
.rf-close .wp-block-buttons { margin-top: 2.25rem; }
.rf-mail { margin-top: 1.25rem !important; color: #b9b8b4; font-size: .9375rem; }
.rf-mail a { color: var(--pa-bone); text-underline-offset: .25em; }
.rf-close__side { display: grid; gap: 1.5rem; align-content: start; }
.rf-close__side > * { margin: 0; }
.rf-close .wp-block-polayads-stage { width: 112px; }
.sgm { width: 100%; height: auto; display: block; }
.sgm rect, .sgm path { fill: #3a3937; transition: fill var(--rf-mid) ease; }
.sgm .sgm-o { fill: none; stroke: #3a3937; stroke-width: 1; transition: stroke var(--rf-mid) ease; }
.sgm[data-hl="research"] [data-cell="research"] :is(rect, path), .sgm[data-hl="brand"] [data-cell="brand"] :is(rect, path), .sgm[data-hl="web"] [data-cell="web"] :is(rect, path), .sgm[data-hl="marketing"] [data-cell="marketing"] :is(rect, path) { fill: var(--pa-bone); }
.sgm[data-hl="research"] [data-cell="research"] .sgm-o, .sgm[data-hl="web"] [data-cell="web"] .sgm-o { fill: none; stroke: var(--pa-bone); }
.rf-start { list-style: none; padding: 0; margin: 0 !important; border-top: 1px solid var(--rf-rule-dark); }
.rf-start li { border-bottom: 1px solid var(--rf-rule-dark); }
.rf-start a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; color: var(--pa-bone); text-decoration: none; font: 500 1.0625rem/1.3 var(--pa-display); transition: padding var(--rf-mid) var(--rf-ease), color var(--rf-fast) ease; }
.rf-start a::after { content: "→"; color: #8c8b87; transition: transform var(--rf-fast) var(--rf-ease), color var(--rf-fast) ease; }
.rf-start a:hover, .rf-start a:focus-visible { padding-left: .5rem; color: #fff; }
.rf-start a:hover::after, .rf-start a:focus-visible::after { transform: translateX(4px); color: var(--pa-bone); }
.rf-next { padding: 0; margin: 0 !important; list-style: none; counter-reset: rf-next; display: grid; gap: .55rem; }
.rf-next li { counter-increment: rf-next; display: grid; grid-template-columns: 1.75rem 1fr; font-size: .875rem; color: #b9b8b4; }
.rf-next li::before { content: counter(rf-next); font: 500 .8125rem/1.5 var(--pa-display); color: var(--pa-bone); }
.rf-close .pa-tagline { margin-top: clamp(3rem, 2rem + 3vw, 5rem) !important; padding-top: 1.25rem; border-top: 1px solid var(--pa-rule); color: var(--pa-bone); }
@media (min-width: 1000px) {
	.rf-close__grid { grid-template-columns: 7fr 1fr 4fr; align-items: end; }
	.rf-close__side { grid-column: 3; }
}

/* --------------------------------------------------------------------------
   Inner pages: the same system, one discipline in focus
   -------------------------------------------------------------------------- */


.rf-hero--page .pa-display { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5rem); line-height: .98; max-width: 15ch; }
.rf-hero--page .rf-hero__body { gap: 1.5rem; }
@media (min-width: 1100px) {
	.rf-hero--page .wp-block-polayads-stage { max-width: 500px; margin-top: clamp(-9rem, -8vw, -5rem); }
}

/* Need, fit and FAQ: split sections with a revealing heading */
.rf-split { padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem); }
.rf-split .pa-split__head > * , .rf-split .pa-split__body > * { margin-top: 0; }
.rf-split .pa-split__head .pa-head__title { margin-top: 1rem; }
.rf-split .pa-split__body > * + * { margin-top: 1.25rem; }
.rf-split .pa-split__body .pa-ticklist { margin-top: 2rem !important; }
.rf-faq__more { font-size: .9375rem; color: var(--pa-secondary); margin-top: 1.5rem !important; }
.rf-faq__more a { color: inherit; text-underline-offset: .25em; }
.pa-faq__item summary { transition: padding var(--rf-mid) var(--rf-ease); }
.pa-faq__item summary:hover { padding-left: .35rem; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
	.pa-faq__item[open] > p { animation: rf-faq-in 380ms var(--rf-ease) both; }
}
@keyframes rf-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Capabilities: three numbered columns on ink */
.rf-capab { padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem); }
.rf-capcols { display: grid; grid-template-columns: 1fr; gap: 2.5rem var(--pa-col-gap); margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.rf-capcol { display: grid; gap: .9rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--pa-bone); }
.rf-capcol > * { margin: 0; }
.rf-capcol__num { font: 500 .8125rem/1 var(--pa-display); color: #8c8b87; }
.rf-capcol__title { font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.15 var(--pa-display); letter-spacing: -.02em; }
.rf-capcol p:not([class]) { color: #c9c8c3; max-width: 34ch; }
.rf-capcol .rf-caps { grid-template-columns: 1fr; }
.rf-capnote { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rf-rule-dark); }
.rf-capnote p { margin: 0; font-size: .9375rem; color: #b9b8b4; max-width: 60ch; }
@media (min-width: 800px) { .rf-capcols { grid-template-columns: repeat(3, 1fr); } }
.rf-meaning { padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem); }
.rf-meaning__title { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: -.04em; margin-top: 1rem; }

/* Services overview rows: what each discipline includes */
.rf-caps--light { border-top-color: var(--pa-rule-light); }
.rf-caps--light li { color: var(--pa-text, #1a1a19); border-bottom-color: var(--pa-rule-light); }
.rf-srow .pa-row__body { display: grid; gap: 1.25rem; }
.rf-srow .pa-row__body > * { margin: 0; }
.rf-srow { scroll-margin-top: calc(var(--pa-header-h) + 1.5rem); }

/* Contact: the invitation, then a form that answers back */
.rf-contact .rf-next--light li { color: var(--pa-secondary); font-size: .9375rem; }
.rf-contact .rf-next--light li::before { color: var(--pa-ink); }
.rf-contact .rf-mail { color: var(--pa-secondary); margin-top: 2rem !important; }
.rf-contact .rf-mail a { color: var(--pa-ink); }
.rf-contact .pa-tagline { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pa-rule-light); }
.rf .pa-field__control { transition: border-color var(--rf-fast) ease, box-shadow var(--rf-mid) var(--rf-ease); }
.rf .pa-field__control:focus-visible { box-shadow: 0 0 0 4px rgba(0, 0, 0, .08); }
@media (prefers-reduced-motion: no-preference) {
	.rf .pa-field__error, .rf .pa-form__summary, .rf .pa-form__alert { animation: rf-note-in 360ms var(--rf-ease) both; }
	.rf .pa-form-success > * { animation: rf-note-in 520ms var(--rf-ease) both; }
	.rf .pa-form-success > :nth-child(2) { animation-delay: 90ms; }
	.rf .pa-form-success > :nth-child(3) { animation-delay: 160ms; }
	.rf .pa-form-success > :nth-child(n+4) { animation-delay: 230ms; }
	.rf .pa-form-success__mark { animation: rf-mark-in 600ms var(--rf-ease) both; }
}
@keyframes rf-note-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rf-mark-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* 404 */
.pa-notfound .wp-block-polayads-stage { width: 96px; margin-bottom: 2rem; }
.pa-notfound .sgm { width: 96px; height: auto; }

/* Grid children must not inherit the flow layout's block gap. */
.rf-capcols > *, .pa-split > *, .rf-how__grid > * { margin-block: 0 !important; }
.rf-flow li { align-content: start; }
.pa-notfound .sgm rect, .pa-notfound .sgm path { fill: #6b6a67; }
.pa-notfound .sgm .sgm-o { fill: none; stroke: #6b6a67; }

/* Build demo labels point at what they describe on the Morrow Pantry page. */
.bd-note:nth-child(2) { top: 26%; right: auto; left: 30%; }
.bd-note:nth-child(3) { top: 46%; right: auto; left: 22%; }
.bd-note:nth-child(4) { top: 72%; }
@media (max-width: 899px) { .sc-tile--marketing .sc-art > .mx-phone { width: min(62%, 280px); } }

/* ==========================================================================
   Launch-readiness refinements
   ========================================================================== */

/* Phones: the headline, then a compact signature, then the offer and the action. */
@media (max-width: 699px) {
	.rf-hero { padding-top: 2rem; }
	.rf-hero__intro { order: 0; }
	.rf-hero .wp-block-polayads-stage { order: 1; justify-self: start; width: min(74%, 290px); margin-block: -.25rem .25rem; }
	.rf-hero__body { order: 2; gap: 1.5rem; }
	.rf-hero--page .wp-block-polayads-stage { width: min(68%, 260px); }
	.rf-hero .pa-display { font-size: clamp(2.5rem, 1.6rem + 4vw, 3.25rem); }
}

/* Inner-page heroes: their own artwork, a quicker sequence, never dimmed. */
.sg-arc { fill: none; stroke: var(--pa-bone); stroke-width: 2; stroke-linecap: round; }
.sg-btn--lg { font-size: 15px; }
.sg-aa--sm { font-size: 66px; letter-spacing: -3px; }
.sg-spec--k { font: 600 13px var(--pa-body); letter-spacing: .14em; fill: #444341; }
.sg--page .sg-labels text { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
	.pa-js .sg--page .sg-grid path { animation-duration: 500ms; animation-delay: calc(var(--i) * 25ms); }
	.pa-js .sg--page .sg-m { animation-duration: 620ms; }
	.pa-js .sg--page .sg-m--research { animation-delay: 80ms; }
	.pa-js .sg--page .sg-m--design { animation-delay: 160ms; }
	.pa-js .sg--page .sg-m--dev { animation-delay: 240ms; }
	.pa-js .sg--page .sg-m--marketing { animation-delay: 320ms; }
	.pa-js .sg--page .sg-mark.is-pattern { animation-delay: calc(500ms + var(--i) * 30ms); }
	.pa-js .sg--page .sg-frag { animation-duration: 520ms; animation-delay: 560ms; }
	.pa-js .sg--page .sg-wire { animation-duration: 1100ms; }
	.pa-js .sg--page .sg-labels { animation-delay: 700ms; }
	.pa-js .sg--page .sg-arrow { animation-delay: 900ms; }
}

/* The first frame is never empty: cells start faintly in place, then assemble. */
@keyframes sg-assemble { from { opacity: .18; transform: translate(var(--fx, 0px), var(--fy, 0px)); } 45% { opacity: 1; } to { opacity: 1; transform: translate(0px, 0px); } }

/* Section headings hide only when the browser can reveal them again. */
.rf-rise { clip-path: none; transform: none; }
@media (prefers-reduced-motion: no-preference) {
	.pa-js .rf-rise { clip-path: none; transform: none; }
	.rf-io .rf-rise:not(.is-in) { clip-path: inset(0 0 100% 0); transform: translateY(.25em); }
	.rf-io .rf-rise { transition: clip-path 800ms var(--rf-ease), transform 800ms var(--rf-ease); }
}
@media print { .rf-rise { clip-path: none !important; transform: none !important; } }

/* Showcase: tighter introduction, captions outside the artwork */
.rf-show .pa-head { margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
@media (min-width: 900px) { .rf-show .pa-head__intro { grid-column: 1 / span 6; margin-top: 1.25rem; } }
.sc-tile { margin: 0; }
.sc-cap { align-items: center; }
.sc-zoom { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; margin-left: auto; padding: 0 .95rem; border: 1px solid currentColor; border-radius: 99px; background: transparent; color: inherit; font: 600 .8125rem/1 var(--pa-body); cursor: pointer; transition: background-color var(--rf-fast) ease, color var(--rf-fast) ease; }
.sc-zoom::before { content: ""; width: .7rem; height: .7rem; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 3px 3px 0 -1px currentColor; }
.sc-tile--brand .sc-zoom:hover, .sc-tile--marketing .sc-zoom:hover, .sc-tile--d3 .sc-zoom:hover { background: #f7f1e3; color: #1e1f17; }
.sc-tile--research .sc-zoom:hover, .sc-tile--web .sc-zoom:hover, .sc-tile--d1 .sc-zoom:hover, .sc-tile--d2 .sc-zoom:hover { background: #1e1f17; color: #f7f1e3; }
.sc-zoom:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sc-tile--d1 { background: #e9e2cf; color: var(--pa-text); }
.sc-tile--d2 { background: #d6d3ca; color: var(--pa-text); }
.sc-tile--d3 { background: #26271f; color: #f7f1e3; }
@media (min-width: 900px) {
	.sc-tile--d1 { grid-column: 1 / span 4; }
	.sc-tile--d2 { grid-column: 5 / span 4; }
	.sc-tile--d3 { grid-column: 9 / -1; }
}
/* Phones: deliberate crops instead of unreadable miniatures; the larger view shows the whole piece. */
@media (max-width: 699px) {
	.sc-tile--web .sc-art, .sc-tile--research .sc-art { overflow: hidden; justify-content: flex-start; }
	.sc-tile--web .sc-browser { width: 100%; }
	.sc-tile--web .sc-browser .mx-site { width: 185%; }
	.sc-tile--research .sc-art > .mx-slide { width: 160%; flex: none; }
}

/* Research slide: a fictional demonstration, plainly labelled */
.mx-fict { color: #c9472b; }
.mx-test { background: #f7f1e3; padding: 2.8cqi; border-left: .6cqi solid #c8873a; }
.mx-test__k { font-size: 1.35cqi; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b6a5e; margin-bottom: 1.2cqi !important; }
.mx-test ul { list-style: none; margin: 0; padding: 0; }
.mx-test li { font-size: 1.7cqi; padding: 1cqi 0; border-bottom: 1px solid #e4dccb; }
.mx-test li:last-child { border-bottom: 0; }

/* Close-ups */
.mx-detail { container-type: inline-size; width: 100%; }
.mx-detail__in { position: relative; aspect-ratio: 1; background: #f1dfa6; overflow: hidden; }
.mx-detail--pack .mx-pack { position: absolute; filter: drop-shadow(0 4cqi 3cqi rgba(63, 74, 38, .3)); }
.mx-detail--pack .mx-pack--jar { left: 10%; top: 24%; width: 38%; height: auto; }
.mx-detail--pack .mx-pack--bag { right: -6%; bottom: -6%; width: 56%; height: auto; transform: rotate(-5deg); }
.mx-spec { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 1.6cqi; padding: 1.4cqi 2.4cqi; background: #f7f1e3; border-radius: 99px; color: #3f4a26; font: 600 3.2cqi/1.15 Inter, system-ui, sans-serif; box-shadow: 0 1cqi 3cqi -1cqi rgba(0, 0, 0, .25); white-space: nowrap; z-index: 1; }
.mx-spec::before { content: ""; width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #c9472b; flex: none; }
.mx-detail--app { display: flex; justify-content: center; }
.mx-detail--app .mx-phone { width: min(64%, 270px); }
.mx-phone--sm .mx-phone__screen { background: #f7f1e3; }
.mx-app { height: 100%; box-sizing: border-box; padding: 15cqi 7cqi 8cqi; display: flex; flex-direction: column; gap: 4.5cqi; color: #1e1f17; font-family: Inter, system-ui, sans-serif; }
.mx-app p { margin: 0; }
.mx-app__k { font-size: 3.6cqi; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3f4a26; }
.mx-app__t { font: 700 10cqi/1 Georgia, serif; margin-top: -2cqi !important; }
.mx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.5cqi; }
.mx-steps li { display: grid; grid-template-columns: 6cqi 1fr; column-gap: 3cqi; align-items: center; }
.mx-steps li::before { content: ""; grid-row: span 2; width: 5.4cqi; height: 5.4cqi; border-radius: 50%; border: .9cqi solid #c3bca5; box-sizing: border-box; }
.mx-steps .is-done::before { background: #3f4a26; border-color: #3f4a26; }
.mx-steps .is-now::before { border-color: #c9472b; background: #f7f1e3; box-shadow: 0 0 0 1.4cqi rgba(201, 71, 43, .18); }
.mx-steps b { font-size: 4.4cqi; }
.mx-steps span { font-size: 3.6cqi; color: #6b6a5e; }
.mx-app__items { border-top: 1px solid #e4dccb; padding-top: 3cqi; display: grid; gap: 2.4cqi; font-size: 3.7cqi; }
.mx-app__items p { display: flex; justify-content: space-between; }
.mx-app__total { border-top: 1px solid #e4dccb; padding-top: 2.4cqi; font-weight: 700; }
.mx-app__btn { margin-top: auto; text-align: center; background: #3f4a26; color: #f1dfa6; font: 700 4.2cqi/1 Inter, system-ui, sans-serif; padding: 4cqi; border-radius: 99px; }
.mx-detail--poster { display: flex; justify-content: center; }
.mx-poster { container-type: inline-size; width: min(70%, 300px); background: #3f4a26; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .7); }
.mx-poster__in { aspect-ratio: 3 / 4.2; box-sizing: border-box; padding: 9cqi 8cqi 7cqi; display: flex; flex-direction: column; gap: 5cqi; }
.mx-poster__in p { margin: 0; }
.mx-logo--light { color: #f1dfa6; --mx-seal: #f1dfa6; --mx-ink: #3f4a26; }
.mx-poster .mx-logo { font-size: 4.6cqi; }
.mx-poster__line { font: 700 14cqi/.98 Georgia, serif; color: #f7f1e3; letter-spacing: -.015em; }
.mx-poster__art { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.mx-poster__art .mx-pack { width: 46%; height: auto; filter: drop-shadow(0 3cqi 2cqi rgba(0, 0, 0, .35)); }
.mx-poster__art .mx-pack--coffee { width: 36%; margin-left: -8%; }
.mx-poster__foot { font: 600 3.4cqi/1 Inter, system-ui, sans-serif; letter-spacing: .06em; color: #f1dfa6; border-top: 1px solid rgba(241, 223, 166, .35); padding-top: 3.5cqi; }
.mx-pack { height: auto; }
.mx-card__img .mx-pack, .mx-hero__art .mx-pack, .mx-story__art .mx-pack { height: auto; }

/* Larger view (a native dialog: keyboard, focus and Escape handled by the browser) */
.sc-dialog { width: min(96vw, 1360px); max-width: none; max-height: 92vh; padding: 0; border: 0; background: #e3e2dd; color: var(--pa-text); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.sc-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.sc-dialog__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem .75rem 1.25rem; background: #e3e2dd; border-bottom: 1px solid #b9b8b4; }
.sc-dialog__title { margin: 0; font: 600 .9375rem/1.3 var(--pa-body); }
.sc-dialog__close { min-width: 44px; min-height: 44px; padding: 0 1rem; border: 1px solid #000; background: #000; color: #e3e2dd; font: 600 .875rem/1 var(--pa-body); cursor: pointer; }
.sc-dialog__close:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.sc-dialog__art { overflow: auto; padding: clamp(1rem, 3vw, 2.5rem); -webkit-overflow-scrolling: touch; }
.sc-dialog__inner { margin-inline: auto; }
.sc-dialog[data-key="web"] .sc-dialog__inner, .sc-dialog[data-key="research"] .sc-dialog__inner { min-width: 1080px; }
.sc-dialog[data-key="brand"] .sc-dialog__inner { min-width: 720px; max-width: 900px; }
.sc-dialog[data-key="marketing"] .sc-dialog__inner, .sc-dialog[data-key="d2"] .sc-dialog__inner { max-width: 420px; }
.sc-dialog[data-key="marketing"] .mx-phone, .sc-dialog[data-key="d2"] .mx-phone { width: 100%; }
.sc-dialog[data-key="d1"] .sc-dialog__inner, .sc-dialog[data-key="d3"] .sc-dialog__inner { max-width: 640px; }
.sc-dialog[data-key="d3"] .mx-poster { width: 100%; }
.sc-dialog__hint { margin: 0; padding: 0 1.25rem 1rem; font-size: .8125rem; color: var(--pa-secondary); }
@media (max-width: 699px) {
	.sc-dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; }
}
@media (min-width: 700px) { .sc-dialog__hint { display: none; } }
@media (prefers-reduced-motion: no-preference) {
	.sc-dialog[open] { animation: rf-dialog-in 260ms var(--rf-ease) both; }
}
@keyframes rf-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Home: services, then why + process */
.rf-more__foot { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.rf-why { padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem); }
.rf-why__grid { display: grid; grid-template-columns: 1fr; gap: 2rem var(--pa-col-gap); }
.rf-why__grid > * { margin: 0 !important; }
.rf-why__intro > * { margin: 0; }
.rf-why__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; margin-top: 1rem !important; max-width: 14ch; }
.rf-reasons { list-style: none; padding: 0; counter-reset: rf-r; border-top: 1px solid #000; }
.rf-reasons li { counter-increment: rf-r; display: grid; grid-template-columns: 2.5rem 1fr; gap: .35rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--pa-rule-light); }
.rf-reasons li::before { content: counter(rf-r, decimal-leading-zero); grid-row: span 2; font: 500 .8125rem/1.6 var(--pa-display); color: var(--pa-secondary); }
.rf-reasons strong { font: 500 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.25 var(--pa-display); letter-spacing: -.01em; }
.rf-reasons span { color: var(--pa-secondary); max-width: 46ch; }
.rf-why__process { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.rf-why__k { margin: 0 0 1rem; font: 600 .75rem/1 var(--pa-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pa-secondary); }
@media (min-width: 900px) {
	.rf-why__grid { grid-template-columns: 5fr 7fr; }
	.rf-why .rf-flow { grid-template-columns: repeat(4, 1fr); border-top: 2px solid #000; }
	.rf-why .rf-flow li { border-bottom: 0; position: relative; padding-right: 1.5rem; }
}

/* Company disclosure */
.pa-footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #2a2a28; font-size: .875rem; line-height: 1.6; color: #b9b8b4; }
.pa-footer__legal > * { margin: 0; }
.pa-footer__legal a { color: var(--pa-bone); text-underline-offset: .2em; }
.rf-legal { margin-top: .75rem !important; font-size: .875rem; color: var(--pa-secondary); }
.rf-prose__date { margin-top: 1rem !important; color: var(--pa-secondary); font-size: .9375rem; }

/* Services hero: four narrow cells, so smaller labels. */
.sg--page svg[viewBox="0 0 600 480"] .sg-labels text { font-size: 10.5px; letter-spacing: .02em; }
@media (max-width: 699px) { .rf-hero .wp-block-polayads-stage { width: min(66%, 260px); } }

/* Captions: label and action on one line, the note beneath. */
.sc-cap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem; }
.sc-cap .sc-label { grid-column: 1; grid-row: 1; }
.sc-cap .sc-zoom { grid-column: 2; grid-row: 1; margin: 0; }
.sc-cap .sc-note { grid-column: 1 / -1; grid-row: 2; max-width: 46ch; }
.sc-dialog__art:focus-visible { outline: 2px solid #000; outline-offset: -4px; }