/* =========================================================================
   AGENCY SKIN
   Loaded after main.css when YSS_AGENCY_MODE is on. Keeps the brand palette
   (warm off-white ground, navy type, amber accent, navy dark bands) and adds
   the "agency" layer on top: oversized display type, mask reveals, pill
   buttons, hero video, marquee, horizontal work scroller, cursor, preloader.

   Everything here is additive. Remove the enqueue and the site returns to
   the plain editorial design untouched. Colour tokens are deliberately NOT
   overridden — main.css owns the palette.
   ========================================================================= */

html.agency {
	--glow:        rgba(242, 177, 52, 0.28);
	--text-hero:   clamp(2.7rem, 5.2vw, 5.5rem);
	--text-h2:     clamp(2.2rem, 5vw, 4.4rem);
	--ease-agency: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Subtle film grain: the single most effective "not a template" signal. */
html.agency body::after {
	content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* ------------------------------ Type ------------------------------------ */
html.agency .hero__title,
html.agency .section-head__title,
html.agency .page-hero__title,
html.agency .feature-band__title,
html.agency .duo__title,
html.agency .cta-band__title {
	text-transform: uppercase; font-weight: 700; letter-spacing: -0.03em; line-height: 0.96;
}
html.agency .hero__title { max-width: none; margin-bottom: 0.45em; }
/* The gradient must sit on the element that actually paints the glyphs.
   After the word split that is .word__inner, an inline-block — a parent's
   background-clip:text does not reach into it. Starts on a deeper amber so
   it still reads on the off-white ground. */
html.agency .hero__title em,
html.agency .section-head__title em,
html.agency .page-hero__title em,
html.agency .cta-band__title em,
html.agency .hero__title em .word__inner,
html.agency .section-head__title em .word__inner,
html.agency .page-hero__title em .word__inner,
html.agency .cta-band__title em .word__inner,
html.agency .hero__title em .line__inner {
	font-style: normal; color: transparent;
	background: linear-gradient(92deg, #C97F0A 0%, #E9A82A 45%, #F0784A 100%);
	-webkit-background-clip: text; background-clip: text;
}
html.agency .section--dark .section-head__title em, html.agency .section--dark .section-head__title em .word__inner,
html.agency .cta-band__title em, html.agency .cta-band__title em .word__inner {
	background: linear-gradient(92deg, var(--amber) 0%, #FFB454 45%, #FF8A5B 100%);
	-webkit-background-clip: text; background-clip: text;
}
html.agency .hero__title em::after { display: none; }

/* Mask reveal lines (hero) — the inner span is what GSAP moves. */
html.agency .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
html.agency .line__inner { display: block; will-change: transform; }

/* Hand-drawn underline under the key phrase */
html.agency .scribble { position: relative; display: inline-block; }
html.agency .scribble svg { position: absolute; left: -2%; right: -2%; bottom: -0.16em; width: 104%; height: 0.32em; overflow: visible; }
html.agency .scribble path { fill: none; stroke: var(--amber); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
html.agency .scribble.is-drawn path { animation: yss-draw 0.9s var(--ease-agency) 0.6s forwards; }
@keyframes yss-draw { to { stroke-dashoffset: 0; } }

html.agency .section-head { margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
html.agency .section-head__title { max-width: 14em; }
html.agency .section-head__lede { font-size: 1.08rem; }
html.agency .eyebrow { color: var(--amber-deep); }
html.agency .section--dark .eyebrow, html.agency .cta-band .eyebrow { color: var(--amber); }
html.agency .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
html.agency .word__inner { display: inline-block; will-change: transform; }

/* ------------------------------ Header ---------------------------------- */
html.agency .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color 0.3s ease, border-color 0.3s ease; }
html.agency .site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); }
/* Uppercase + tracking makes the eleven items ~100px wider than the
   editorial nav, so tighten the type and gaps to keep the CTA inside the
   container, and hand over to the mobile menu a little earlier. */
html.agency .site-header__inner { gap: 1.25rem; }
html.agency .site-nav__link { text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.04em; font-weight: 600; padding-inline: 0.55em; }
html.agency .site-nav__toggle { margin-left: -0.2em; }
@media (max-width: 1220px) {
	html.agency .site-nav { display: none; }
	html.agency .nav-toggle { display: block; }
	html.agency .site-header__actions .btn { display: none; }
}
html.agency .scroll-progress { background: var(--amber); }

/* ------------------------------ Buttons: pill + circle arrow ------------ */
html.agency .btn {
	border-radius: 999px; padding: 0.55em 0.55em 0.55em 1.35em; gap: 0.9em;
	font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
	transition: transform 0.35s var(--ease-agency), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.35s ease;
	will-change: transform;
}
html.agency .btn .icon {
	width: 2.2em; height: 2.2em; padding: 0.55em; border-radius: 50%; flex: none;
	transform: rotate(-45deg); transition: transform 0.4s var(--ease-agency), background-color 0.25s ease, color 0.25s ease;
}
html.agency .btn:hover .icon { transform: rotate(0deg); }
html.agency .btn--primary { background: var(--amber); color: var(--navy); box-shadow: 0 0 0 0 var(--glow); }
html.agency .btn--primary .icon { background: var(--navy); color: var(--amber); }
html.agency .btn--primary:hover { background: #FFC24D; color: var(--navy); box-shadow: 0 12px 40px var(--glow); }
html.agency .btn--ghost { background: transparent; color: var(--navy); border: 1.5px solid rgba(0, 36, 82, 0.28); }
html.agency .btn--ghost .icon { background: rgba(0, 36, 82, 0.08); color: var(--navy); }
html.agency .btn--ghost:hover { border-color: var(--navy); color: var(--navy); background: rgba(0, 36, 82, 0.03); }
html.agency .btn--ghost:hover .icon { background: var(--navy); color: var(--amber); }
html.agency .btn--light { background: #fff; color: var(--navy); border-color: #fff; }
html.agency .btn--light .icon { background: var(--navy); color: #fff; }
html.agency .btn--light:hover { color: var(--navy); border-color: var(--amber); }
html.agency .btn:active { transform: scale(0.97); }
html.agency .site-header__actions .btn { padding: 0.45em 0.45em 0.45em 1.2em; }

html.agency .link-arrow, html.agency .pillar-card__cta, html.agency .svc-card__cta, html.agency .case-card__more,
html.agency .article-card__more, html.agency .problem__link, html.agency .service-card__more { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }

/* ------------------------------ Hero ------------------------------------ */
html.agency .hero {
	min-height: min(92vh, 900px); display: flex; align-items: center;
	border-bottom: 1px solid var(--border);
	overflow: hidden; position: relative;
}
html.agency .hero__inner { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); }
html.agency .hero__lede { font-size: clamp(1.05rem, 1.3vw, 1.3rem); max-width: 30em; }

/* Background video: sits under main.css's grid + radial glow (.hero::after),
   washed towards the ground colour so the copy column stays legible. */
html.agency .hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* The shipped clip is grey waves on white: multiply makes the white vanish
   into the ground and leaves only the waves, so it reads as texture rather
   than a video stuck behind the page. */
html.agency .hero__video {
	width: 100%; height: 100%; object-fit: cover; display: block;
	opacity: 0.85; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15);
	transform: scale(1.04); will-change: transform;
}
html.agency .hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--bg) 85%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, transparent 30%, transparent 70%, var(--bg) 100%);
}
html.agency .hero__inner { position: relative; z-index: 1; }

html.agency .hero__graphic { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; margin-left: auto; }
html.agency .hero__mark {
	position: absolute; inset: 6%; color: var(--amber);
	filter: drop-shadow(0 30px 60px rgba(242, 177, 52, 0.35));
	will-change: transform;
}
html.agency .hero__mark .yss-mark { width: 100%; height: 100%; }
html.agency .hero__halo {
	position: absolute; inset: -12%; border-radius: 50%;
	background: radial-gradient(circle, rgba(242,177,52,0.28) 0%, rgba(242,177,52,0.08) 40%, transparent 68%);
	animation: yss-halo 8s ease-in-out infinite;
}
@keyframes yss-halo { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } }
html.agency .hero__chip {
	position: absolute; display: inline-flex; align-items: center; gap: 0.55em;
	padding: 0.6em 0.95em; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
	color: var(--navy); background: rgba(255,255,255,0.86); border: 1px solid var(--border); backdrop-filter: blur(10px);
	box-shadow: var(--shadow-md); white-space: nowrap; will-change: transform;
}
html.agency .hero__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(242,177,52,0.22); }
html.agency .hero__chip--1 { top: 8%; left: -6%; }
html.agency .hero__chip--2 { top: 48%; right: -10%; }
html.agency .hero__chip--3 { bottom: 10%; left: 4%; }
@media (max-width: 860px) {
	html.agency .hero { min-height: 0; padding-block: 5.5rem 3rem; }
	/* The desktop 7.5/4.5 split above has no breakpoint of its own and would
	   otherwise beat main.css's mobile collapse on specificity. */
	html.agency .hero__inner { grid-template-columns: 1fr; }
	html.agency .hero__title { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
	html.agency .eyebrow--hero { font-size: 0.68rem; letter-spacing: 0.1em; }
	html.agency .hero__graphic { max-width: 280px; margin: 1.5rem auto 0; }
	html.agency .hero__chip { display: none; }
	html.agency .hero__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent), color-mix(in srgb, var(--bg) 78%, transparent)); }
}

/* ------------------------------ Marquee --------------------------------- */
html.agency .marquee { overflow: hidden; border-block: 1px solid var(--border); background: var(--tint); padding: 1.1rem 0; }
html.agency .marquee__track { display: flex; gap: 0; width: max-content; will-change: transform; animation: yss-marquee 38s linear infinite; }
html.agency .marquee:hover .marquee__track { animation-play-state: paused; }
html.agency .marquee__item {
	display: inline-flex; align-items: center; gap: 1.6rem; padding: 0 1.6rem;
	font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); white-space: nowrap;
}
html.agency .marquee__item::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
@keyframes yss-marquee { to { transform: translateX(-50%); } }

/* ------------------------------ Sections -------------------------------- */
html.agency .cta-band__mark { color: rgba(242, 177, 52, 0.16); }

/* ------------------------------ Cards: amber edge on hover -------------- */
html.agency .pillar-card, html.agency .svc-card, html.agency .case-card, html.agency .product-card, html.agency .mini-card, html.agency .article-card { position: relative; }
html.agency .pillar-card::before, html.agency .svc-card::before, html.agency .case-card::before, html.agency .product-card::before, html.agency .article-card::before, html.agency .mini-card::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
	background: linear-gradient(135deg, var(--amber), #FF8A5B 40%, transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity 0.4s ease;
}
html.agency .pillar-card:hover::before, html.agency .svc-card:hover::before, html.agency .case-card:hover::before, html.agency .product-card:hover::before, html.agency .article-card:hover::before, html.agency .mini-card:hover::before { opacity: 1; }
html.agency .pillar-card:hover, html.agency .svc-card:hover, html.agency .case-card:hover, html.agency .product-card:hover, html.agency .mini-card:hover { box-shadow: 0 30px 60px rgba(0, 23, 54, 0.14), 0 0 60px rgba(242,177,52,0.10); border-color: transparent; }
html.agency .floating-cta { box-shadow: 0 12px 40px var(--glow); }

/* ------------------------------ Work: horizontal scroller --------------- */
html.agency .work-scroller { overflow: hidden; }
html.agency .work-scroller__pin { display: flex; align-items: center; }
html.agency .work-scroller__track { display: flex; gap: 1.6rem; will-change: transform; padding-right: var(--gutter); }
html.agency .work-scroller__track .case-card { flex: 0 0 clamp(320px, 34vw, 480px); }
html.agency .work-scroller__hint { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1.4rem; }
html.agency .work-scroller__hint .icon { color: var(--amber-deep); animation: yss-nudge 1.6s ease-in-out infinite; }
@keyframes yss-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 1023px) {
	html.agency .work-scroller__track { flex-wrap: wrap; }
	html.agency .work-scroller__track .case-card { flex: 1 1 300px; }
	html.agency .work-scroller__hint { display: none; }
}

/* ------------------------------ Custom cursor --------------------------- */
html.agency.has-cursor, html.agency.has-cursor a, html.agency.has-cursor button { cursor: none; }
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor { width: 8px; height: 8px; background: var(--navy); }
.cursor-ring {
	width: 36px; height: 36px; border: 1.5px solid rgba(0, 36, 82, 0.55);
	transition: width 0.3s var(--ease-agency), height 0.3s var(--ease-agency), background-color 0.3s ease, border-color 0.3s ease;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
}
.cursor-ring::after { content: attr(data-label); opacity: 0; transition: opacity 0.2s ease; }
html.agency.has-cursor .is-hovering .cursor-ring, .cursor-ring.is-link { width: 56px; height: 56px; background: rgba(242,177,52,0.22); border-color: var(--amber); }
.cursor-ring.is-view { width: 88px; height: 88px; background: var(--amber); border-color: var(--amber); }
.cursor-ring.is-view::after { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-ring { display: none; } html.agency.has-cursor, html.agency.has-cursor a, html.agency.has-cursor button { cursor: auto; } }

/* ------------------------------ Preloader ------------------------------- */
.preloader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.4rem; color: var(--navy); }
.preloader__mark { color: var(--amber); width: 72px; height: 72px; }
.preloader__mark .yss-mark { width: 100%; height: 100%; }
.preloader__count { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.preloader__bar { width: min(240px, 60vw); height: 2px; background: var(--border); overflow: hidden; border-radius: 2px; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--amber); }
html.is-loading { overflow: hidden; }

/* ------------------------------ GSAP takes over reveals ----------------- */
html.agency.gsap [data-reveal] { transition: none; }
html.agency.gsap [data-parallax] { transform: none; }

/* ------------------------------ Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.agency .marquee__track { animation: none; }
	html.agency .hero__halo { animation: none; }
	html.agency .scribble path { stroke-dashoffset: 0; animation: none; }
	.cursor, .cursor-ring, .preloader { display: none !important; }
	html.agency .btn .icon { transform: none; }
	html.agency .hero__video { display: none; }
}