/* Greater Star – site styles.
   Tokens come from theme.json (--wp--preset--*). Short aliases below. */
:root {
	--paper: var(--wp--preset--color--paper, #FAF9F5);
	--paper-2: var(--wp--preset--color--paper-2, #F0EEE6);
	--paper-3: var(--wp--preset--color--paper-3, #E6E3D8);
	--ink: var(--wp--preset--color--ink, #141413);
	--muted: var(--wp--preset--color--muted, #5E5D59);
	--accent: var(--wp--preset--color--accent, #1F5FD1);
	--accent-soft: var(--wp--preset--color--accent-soft, #DCE7FB);
	--star: linear-gradient(135deg, #25D6FC 0%, #3A84F4 100%);
	--line: rgba(20, 20, 19, .12);
	--line-strong: rgba(20, 20, 19, .22);
	--serif: var(--wp--preset--font-family--serif);
	--sans: var(--wp--preset--font-family--sans);
	--mono: var(--wp--preset--font-family--mono);
	--radius: 14px;
	--wrap: 1180px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--header-h: 76px;
}

/* scrollbar-gutter keeps the scrollbar's space when a menu or dialog locks the page, so nothing moves sideways. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); scrollbar-gutter: stable; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
::selection { background: var(--accent-soft); }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.gs-skip { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; }
.gs-skip:focus { left: 10px; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
.gs-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.gs-wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }

/* ---------- Type helpers ---------- */
.gs-kicker, .is-style-gs-kicker {
	font-family: var(--mono) !important; font-size: .75rem !important; letter-spacing: .14em; text-transform: uppercase;
	color: var(--muted); margin: 0 0 .9rem; font-weight: 500; line-height: 1.4;
}
.gs-kicker::before, .is-style-gs-kicker::before {
	content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .6em; vertical-align: .05em;
	background: var(--star); -webkit-mask: url("../img/star.svg") center / contain no-repeat; mask: url("../img/star.svg") center / contain no-repeat;
}
.gs-kicker--light { color: rgba(250, 249, 245, .7); }
.gs-lead, .is-style-gs-lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem) !important; line-height: 1.55; color: var(--muted); max-width: 46rem; }
.gs-serif { font-family: var(--serif); }
.gs-muted { color: var(--muted); }
em.gs-accent, .gs-accent { font-style: italic; color: var(--accent); }

/* ---------- Buttons ---------- */
.gs-btn, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5em; padding: .82rem 1.35rem; border-radius: 999px;
	font: 600 .9375rem/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.gs-btn--ink { background: var(--ink); color: var(--paper); }
.gs-btn--ink:hover { background: var(--accent); color: #fff; }
.gs-btn--star { background: var(--paper); color: var(--ink); }
.gs-btn--star:hover { background: #fff; transform: translateY(-1px); color: var(--ink); }
.gs-btn--ghost, .is-style-gs-ghost .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.gs-btn--ghost:hover, .is-style-gs-ghost .wp-block-button__link:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.wp-block-buttons { gap: .75rem; }

/* ---------- Header ---------- */
.gs-header-part { position: sticky; top: 0; z-index: 50; }
/* Logged in: the header sticks under the admin bar (32 px, 46 px on narrow screens); on phones the admin bar
   scrolls away with the page, so the header sticks to the top. */
.admin-bar .gs-header-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .gs-header-part { top: 0; } }
.gs-header { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.gs-header.is-scrolled { border-bottom-color: var(--line); }
.gs-header__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.gs-logo { display: block; color: var(--ink); line-height: 0; }
.gs-logo svg { height: 50px; width: auto; display: block; }
.gs-nav { display: flex; align-items: center; gap: 2rem; }
.gs-nav__list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.gs-nav__list > li { position: relative; }
.gs-nav__list a { display: block; padding: .55rem .8rem; text-decoration: none; font-size: .9375rem; color: var(--ink); border-radius: 8px; }
.gs-nav__list > li > a:hover, .gs-nav__list > .current-menu-item > a, .gs-nav__list > .current-menu-ancestor > a, .gs-nav__list > .current-page-ancestor > a { background: var(--paper-2); color: var(--ink); }
.gs-nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); opacity: .6; }
.gs-nav__list .sub-menu { position: absolute; top: calc(100% + 6px); left: -.5rem; min-width: 260px; list-style: none; margin: 0; padding: .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(20,20,19,.10); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s, transform .18s, visibility .18s; }
.gs-nav__list .sub-menu::before { content: ""; position: absolute; inset: -10px 0 auto 0; height: 10px; }
.gs-nav__list li:hover > .sub-menu, .gs-nav__list li:focus-within > .sub-menu, .gs-nav__list li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.gs-nav__list .sub-menu a { padding: .55rem .75rem; font-size: .9rem; }
.gs-nav__list .sub-menu a:hover { background: var(--paper-2); }
.gs-nav__end { display: flex; align-items: center; gap: .75rem; }
.gs-lang { font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem .7rem; color: var(--ink); }
.gs-lang:hover { border-color: var(--ink); color: var(--ink); }
.gs-nav__end .gs-btn { padding: .65rem 1.1rem; }
.gs-menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.gs-menu-toggle span:not(.screen-reader-text) { width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.gs-nav-open .gs-menu-toggle span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.gs-nav-open .gs-menu-toggle span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* The menu panel's own parts (top row, Back, e-mail) only exist on phones and tablets. */
.gs-nav__top, .gs-nav__back, .gs-nav__mail, .gs-nav__overview { display: none; }

@media (max-width: 960px) {
	:root { --header-h: 64px; }
	.gs-logo svg { height: 40px; }
}

/*
 * Phones and tablets (up to 1180 px, as PANEL_QUERY in gsio-site's site.js): the menu is a full-screen panel over
 * everything, the admin bar included, with its own logo and Close button, so it never depends on the header's or
 * the admin bar's height and always scrolls on its own. A section's sub-pages replace the main pages in the panel
 * (nav.is-sub, li.is-section-open) instead of folding out.
 */
@media (max-width: 1180px) {
	.gs-menu-toggle { display: flex; }
	.gs-nav { display: none; }
	.gs-nav-open .gs-nav { display: flex; position: fixed; inset: 0; z-index: 100000; flex-direction: column; align-items: stretch; gap: 0; padding: 0 var(--gutter) calc(2rem + env(safe-area-inset-bottom)); background: var(--paper); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.gs-nav-open { overflow: hidden; }
	/* Nothing in the panel shrinks when the list is long (the top row would get lower and Close would move). */
	.gs-nav-open .gs-nav > * { flex-shrink: 0; }
	/* The header's blur would make it the panel's containing block, and its layer (z-index 50) would keep the panel
	   under the admin bar: both are lifted while the panel is open. */
	.gs-nav-open .gs-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
	.gs-nav-open .gs-header-part { z-index: 100000; }
	.gs-nav__top { display: flex; position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between; height: var(--header-h); margin: 0 calc(var(--gutter) * -1) 1rem; padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); }
	/* The same box as the menu button, in the same place, drawn as the button's open state (an X). */
	.gs-nav__close { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; cursor: pointer; }
	.gs-nav__close span { width: 18px; height: 1.5px; background: var(--ink); }
	.gs-nav__close span:first-child { transform: translateY(.75px) rotate(45deg); }
	.gs-nav__close span:last-child { transform: translateY(-.75px) rotate(-45deg); }
	.gs-nav__back { align-self: flex-start; min-height: 44px; margin-bottom: .5rem; padding: 0; border: 0; background: none; color: var(--muted); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
	.gs-nav__back:not([hidden]) { display: inline-flex; align-items: center; gap: .5rem; }
	.gs-nav__list { flex-direction: column; gap: 0; counter-reset: gsnav; }
	.gs-nav__list > li { counter-increment: gsnav; }
	.gs-nav__list > li > a { display: flex; align-items: baseline; gap: 1rem; font-family: var(--serif); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.15; padding: .85rem 0; border-radius: 0; border-bottom: 1px solid var(--line); }
	.gs-nav__list > li > a::before { content: counter(gsnav, decimal-leading-zero); flex: 0 0 2rem; font: 500 .7rem/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
	.gs-nav__list > li > a:hover { background: none; }
	/* A section shows an arrow: it opens its sub-pages in the panel. */
	.gs-nav__list .menu-item-has-children > a::after { content: "→"; display: inline; width: auto; height: auto; margin-left: auto; border: 0; transform: none; font-family: var(--sans); font-size: 1.1rem; opacity: .5; }
	.gs-nav__list .sub-menu { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; min-width: 0; background: transparent; }
	/* A section open: only its sub-pages are shown, in two columns from tablet width. */
	.gs-nav.is-sub .gs-nav__list > li:not(.is-section-open) { display: none; }
	.gs-nav.is-sub .gs-nav__list > li.is-section-open > a { display: none; }
	.gs-nav.is-sub .is-section-open > .sub-menu { display: grid; grid-template-columns: 1fr; column-gap: 2.5rem; }
	.gs-nav__list .sub-menu a { font-family: var(--serif); font-size: clamp(1.3rem, 4.6vw, 1.8rem); color: var(--ink); padding: .8rem 0; border-radius: 0; border-bottom: 1px solid var(--line); }
	.gs-nav__list .sub-menu .gs-nav__overview { display: block; }
	.gs-nav__list .sub-menu .gs-nav__overview a { font: 500 .75rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
	.gs-nav__end { flex-wrap: wrap; margin-top: auto; padding-top: 2rem; justify-content: space-between; gap: 1rem; }
	.gs-nav__mail { display: block; flex-basis: 100%; color: var(--ink); font-size: 1rem; }
	.gs-nav__end .gs-btn { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 700px) and (max-width: 1180px) {
	.gs-nav.is-sub .is-section-open > .sub-menu { grid-template-columns: 1fr 1fr; }
	.gs-nav.is-sub .is-section-open > .sub-menu .gs-nav__overview { grid-column: 1 / -1; }
}

/* ---------- Page hero ---------- */
.gs-hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.gs-hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.03; letter-spacing: -.025em; margin: 0 0 1.25rem; max-width: 18ch; text-wrap: balance; }
.gs-hero--post .gs-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 22ch; }
.gs-hero__lead { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.55; color: var(--muted); max-width: 44rem; margin: 0; text-wrap: pretty; }
.gs-crumbs { font-size: .8125rem; color: var(--muted); margin-bottom: 2.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.gs-crumbs a { color: var(--muted); text-decoration: none; }
.gs-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.gs-crumbs span { opacity: .5; }

/* ---------- Content / prose ---------- */
.gs-main { min-height: 50vh; }
.gs-content { padding-bottom: clamp(3rem, 7vw, 6rem); }
.gs-prose > * { max-width: 720px; }
.gs-prose h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-top: 3.25rem; margin-bottom: .75rem; text-wrap: balance; }
.gs-prose h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin-top: 2.25rem; margin-bottom: .5rem; }
.gs-prose h4 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; margin-top: 1.75rem; }
.gs-prose p, .gs-prose li { font-size: 1.0625rem; line-height: 1.75; }
.gs-prose > p:first-child { font-size: 1.2rem; color: var(--ink); }
.gs-prose ul, .gs-prose ol { padding-left: 1.25rem; }
.gs-prose li + li { margin-top: .35rem; }
.gs-prose li::marker { color: var(--accent); }
.gs-prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.gs-prose .wp-block-table th, .gs-prose .wp-block-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.gs-prose .wp-block-table th { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.gs-prose blockquote { border-left: 2px solid var(--accent); margin-left: 0; padding-left: 1.25rem; }
.gs-prose--article > p:first-child { font-size: 1.25rem; }

/* FAQ (gs-faq) and fold-out lists that are not questions (gs-accordion, e.g. the services on /tjanster/ai/): same look */
details.gs-faq, details.gs-accordion, .wp-block-details.gs-faq, .wp-block-details.gs-accordion { border-top: 1px solid var(--line); padding: 1.1rem 0; margin: 0 !important; }
details.gs-faq + :not(details), details.gs-accordion + :not(details) { margin-top: 2rem; }
details.gs-faq:last-of-type, details.gs-accordion:last-of-type { border-bottom: 1px solid var(--line); }
details.gs-faq summary, details.gs-accordion summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; }
details.gs-faq summary::-webkit-details-marker, details.gs-accordion summary::-webkit-details-marker { display: none; }
details.gs-faq summary::after, details.gs-accordion summary::after { content: "+"; font: 400 1.4rem/1 var(--mono); color: var(--accent); transition: transform .2s; flex: none; }
details.gs-faq[open] summary::after, details.gs-accordion[open] summary::after { transform: rotate(45deg); }
details.gs-faq > p, details.gs-accordion > p, details.gs-faq > *:not(summary), details.gs-accordion > *:not(summary) { color: var(--muted); margin: .75rem 0 0; max-width: 62ch; }

/* Lists styles */
ul.is-style-gs-checks { list-style: none; padding-left: 0 !important; }
ul.is-style-gs-checks li { position: relative; padding-left: 1.9rem; }
ul.is-style-gs-checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231F5FD1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
ol.is-style-gs-numbered, ul.is-style-gs-numbered { list-style: none; padding-left: 0 !important; counter-reset: gsn; border-top: 1px solid var(--line); }
.is-style-gs-numbered li { counter-increment: gsn; display: flex; gap: 1.25rem; padding: .9rem 0 !important; margin: 0 !important; border-bottom: 1px solid var(--line); }
.is-style-gs-numbered li::before { content: counter(gsn, decimal-leading-zero); font: 500 .8rem/1.9 var(--mono); color: var(--accent); letter-spacing: .08em; }

/* ---------- Landing sections ---------- */
.gs-landing { padding-bottom: 0; }
.gs-landing > .alignfull { margin-top: 0 !important; margin-bottom: 0 !important; }
.gs-section { padding-block: clamp(3.5rem, 9vw, 7.5rem) !important; }
.gs-section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem) !important; }
.gs-section + .gs-section:not(.gs-section--tint):not(.is-style-gs-band) { border-top: 1px solid var(--line); }
.gs-section--tint, .is-style-gs-tint { background: var(--paper-2); }
.is-style-gs-band { background: var(--ink); color: var(--paper); }
.is-style-gs-band a:not(.wp-block-button__link):not(.gs-btn) { color: var(--paper); }
.is-style-gs-band .gs-kicker, .is-style-gs-band .is-style-gs-kicker { color: rgba(250,249,245,.65); }
.is-style-gs-band .gs-lead, .is-style-gs-band .is-style-gs-lead, .is-style-gs-band .gs-muted { color: rgba(250,249,245,.72); }
.is-style-gs-band .wp-block-button__link { background: var(--paper); color: var(--ink); }
.is-style-gs-band .gs-tile { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.is-style-gs-band .gs-tile p { color: rgba(250,249,245,.72); }
.gs-section h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); max-width: 20ch; text-wrap: balance; margin-top: 0; }

/* Home hero */
.gs-home-hero { padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 6rem) !important; position: relative; overflow: hidden; }
.gs-home-hero h1 { font-size: clamp(2.75rem, 8.4vw, 7.25rem) !important; line-height: .98 !important; letter-spacing: -.035em !important; max-width: 13ch; margin: 0 0 2rem; }
.gs-home-hero h1 em { font-style: italic; background: var(--star); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.gs-home-hero .gs-lead { max-width: 40rem; }
.gs-home-hero::after { content: ""; position: absolute; right: -8vw; top: 6%; width: min(44vw, 560px); aspect-ratio: 1; background: var(--star); opacity: .10; filter: blur(2px);
	-webkit-mask: url("../img/star.svg") center / contain no-repeat; mask: url("../img/star.svg") center / contain no-repeat; pointer-events: none; }
.gs-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.5rem !important; font: 500 .75rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Split: heading left, body right */
.gs-split { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.gs-split > * { margin: 0 !important; }
@media (max-width: 820px) { .gs-split { grid-template-columns: 1fr; } }

/* Tiles (group grid children) */
.gs-tiles { gap: 1.1rem !important; margin-top: 2.5rem !important; }
.gs-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.5rem !important; transition: border-color .2s, transform .2s; }
.gs-section--tint .gs-tile { background: var(--paper); }
.gs-tile h3 { font-size: 1.45rem; margin: 0 0 .5rem; }
.gs-tile p { color: var(--muted); font-size: .97rem; margin: 0; }
.gs-tile .gs-kicker { margin-bottom: 1.25rem; }
.gs-tile a { text-decoration: none; }
.gs-tile:has(a:hover) { border-color: var(--ink); }
.gs-tile .gs-tile__link { display: inline-block; margin-top: 1rem; font-weight: 600; font-size: .9rem; }
.gs-tile .gs-tile__link a::after { content: " →"; }
@media (max-width: 820px) { .gs-tiles { grid-template-columns: 1fr !important; } }
@media (min-width: 821px) and (max-width: 1080px) { .gs-tiles.columns-3, .gs-tiles.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Stats */
.gs-stats { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 !important; border-top: 1px solid var(--line); margin-top: 2.5rem !important; }
.gs-stat { padding: 1.75rem 1.5rem 1.5rem 0 !important; border-bottom: 1px solid var(--line); }
.gs-stat .gs-stat__num { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 .6rem; }
.gs-stat p:not(.gs-stat__num) { color: var(--muted); font-size: .92rem; margin: 0; max-width: 24ch; }
.is-style-gs-band .gs-stats, .is-style-gs-band .gs-stat { border-color: rgba(255,255,255,.14); }
.is-style-gs-band .gs-stat p:not(.gs-stat__num) { color: rgba(250,249,245,.7); }

/* Quote */
.gs-bigquote { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.6rem) !important; line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; margin: 0 auto !important; text-align: center; text-wrap: balance; }
.gs-bigquote em { color: var(--accent); }

/* Client names */
.gs-clients { display: flex !important; flex-wrap: wrap; gap: .6rem; margin-top: 2rem !important; list-style: none; padding: 0 !important; }
.gs-clients li { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; margin: 0 !important; background: var(--paper); }

/* Cards (dynamic lists) */
ul.gs-cards { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none !important; }
.gs-prose ul.gs-cards, .gs-content > ul.gs-cards { max-width: var(--wrap) !important; }
ul.gs-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-card { margin: 0 !important; }
.gs-card a { display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s; }
.gs-card a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(20,20,19,.07); }
.gs-card .gs-kicker { margin-bottom: 1.4rem; }
.gs-card__title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; margin-bottom: .6rem; letter-spacing: -.01em; }
.gs-card__text { color: var(--muted); font-size: .95rem; line-height: 1.6; }
.gs-card__more { margin-top: auto; padding-top: 1.25rem; font-weight: 600; font-size: .875rem; }
@media (max-width: 1080px) { ul.gs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { ul.gs-cards, ul.gs-cards--2 { grid-template-columns: 1fr; } }

/* Index list (e.g. all answers) */
ul.gs-index { list-style: none; padding: 0 !important; columns: 3 260px; column-gap: 2.5rem; margin: 1.5rem 0 0; max-width: none !important; }
ul.gs-index li { break-inside: avoid; border-bottom: 1px solid var(--line); margin: 0 !important; }
ul.gs-index a { display: block; padding: .7rem 0; text-decoration: none; }
ul.gs-index a:hover { color: var(--accent); }
ul.gs-index a::after { content: " →"; opacity: 0; transition: opacity .2s; }
ul.gs-index a:hover::after { opacity: 1; }

/* Blog list */
.gs-year { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 2rem; border-top: 1px solid var(--ink); padding-top: 1.25rem; margin-top: 3rem; max-width: var(--wrap) !important; }
.gs-year__label { font-family: var(--mono) !important; font-size: .85rem !important; letter-spacing: .12em; margin: .3rem 0 0 !important; font-weight: 500; }
ul.gs-postlist { list-style: none; padding: 0 !important; margin: 0; }
.gs-postrow { margin: 0 !important; border-bottom: 1px solid var(--line); }
.gs-postrow a { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: 1.25rem 0; text-decoration: none; color: var(--ink); }
.gs-postrow__meta { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gs-postrow__title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.25; }
.gs-postrow__ex { color: var(--muted); font-size: .95rem; }
.gs-postrow a:hover .gs-postrow__title { color: var(--accent); }
@media (max-width: 680px) { .gs-year { grid-template-columns: 1fr; gap: .5rem; } }

/* Related */
.gs-related { padding: clamp(3rem, 7vw, 5rem) 0 0; border-top: 1px solid var(--line); }
.gs-related__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0; }

/* Pricing */
.gs-pricing { gap: 1rem !important; margin-top: 2.5rem !important; }
.gs-plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem !important; background: var(--paper); display: flex; flex-direction: column; }
.gs-plan h3 { font-size: 1.5rem; margin: 0 0 .4rem; }
.gs-plan .gs-plan__price { font-family: var(--serif); font-size: 2.4rem; letter-spacing: -.02em; margin: 1rem 0 0; line-height: 1; }
.gs-plan .gs-plan__price small { font-family: var(--sans); font-size: .9rem; color: var(--muted); letter-spacing: 0; }
.gs-plan .gs-plan__fine { font-size: .82rem; color: var(--muted); margin: .4rem 0 1rem; }
.gs-plan p { font-size: .94rem; color: var(--muted); }
.gs-plan--featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); position: relative; }
.gs-plan--featured::before { content: attr(data-badge); position: absolute; top: -.7rem; left: 1.2rem; background: var(--ink); color: var(--paper); font: 500 .68rem/1 var(--mono); letter-spacing: .12em; padding: .35rem .6rem; border-radius: 999px; text-transform: uppercase; }
.gs-plan .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
@media (max-width: 1080px) { .gs-pricing { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 640px) { .gs-pricing { grid-template-columns: 1fr !important; } }

/* Timeline */
.gs-timeline { border-left: 1px solid var(--line-strong); margin-top: 2.5rem !important; padding-left: 0 !important; }
.gs-timeline > * { position: relative; padding: 0 0 1.75rem 2rem !important; margin: 0 !important; }
.gs-timeline > *::before { content: ""; position: absolute; left: -5px; top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--accent); }
.gs-timeline .gs-year-tag { font: 500 .8rem/1.4 var(--mono); letter-spacing: .1em; color: var(--accent); margin: 0 0 .2rem !important; }
.gs-timeline p { margin: 0; }

/* People */
.gs-person { border-top: 1px solid var(--ink); padding-top: 1.25rem !important; }
.gs-person h3 { font-size: 1.75rem; margin: 0 0 .2rem; }
.gs-person .gs-role { font: 500 .75rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.gs-person p { color: var(--muted); }

/* ---------- CTA band ---------- */
.gs-cta { padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(3rem, 7vw, 5rem); }
/* Inside page content the content already has the side padding (has-global-padding): no second one, so the band lines up with the sections. */
.has-global-padding > .gs-cta { padding-left: 0; padding-right: 0; }
.gs-cta__inner { max-width: var(--wrap); margin: 0 auto; background: var(--ink); color: var(--paper); border-radius: calc(var(--radius) + 6px); padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end; position: relative; overflow: hidden; }
.gs-cta__inner::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; background: var(--star); opacity: .22; -webkit-mask: url("../img/star.svg") center / contain no-repeat; mask: url("../img/star.svg") center / contain no-repeat; pointer-events: none; }
.gs-cta h2 { color: var(--paper); font-size: clamp(2rem, 4.4vw, 3.25rem); margin: 0 0 1rem; max-width: 16ch; }
.gs-cta p { color: rgba(250, 249, 245, .75); max-width: 46ch; margin: 0; }
.gs-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; position: relative; z-index: 1; }
.gs-cta__mail { color: rgba(250, 249, 245, .8); font-size: .9rem; }
.gs-cta__mail:hover { color: #fff; }
@media (max-width: 760px) { .gs-cta__inner { grid-template-columns: 1fr; } }

/* ---------- Contact form ---------- */
.gs-form { display: grid; gap: 1.1rem; max-width: 640px; }
.gs-form label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 500; }
.gs-form label > span { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gs-form input[type=text], .gs-form input[type=email], .gs-form input[type=tel], .gs-form select, .gs-form textarea {
	width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: .8rem .95rem; }
.gs-form input:focus, .gs-form select:focus, .gs-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gs-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .gs-form__row { grid-template-columns: 1fr; } }
.gs-form__check { display: flex !important; align-items: center; gap: .6rem !important; font-weight: 400 !important; }
.gs-form__fine { font-size: .82rem; color: var(--muted); margin: 0; }
.gs-form button { justify-self: start; }
.gs-form__hp { position: absolute; left: -9999px; }
.gs-form__ok, .gs-form__err { padding: 1rem 1.2rem; border-radius: 10px; margin-bottom: 1.5rem; max-width: 640px; }
.gs-form__ok { background: var(--accent-soft); }
.gs-form__err { background: #FBE3DD; }

/* GS Forms' own error texts (assets/form.js): laid over the label's row, to the right, as on the old site. They
   take no room of their own, so nothing moves when one appears; on a narrow field the text covers the end of the
   label rather than pushing the field down. */
.gs-form label:not(.gs-form__check) { position: relative; }
.gs-form label > span:first-child { white-space: nowrap; }
.gs-form label > .gs-form__error { position: absolute; top: 0; right: 0; max-width: 100%; padding-left: .5rem; background: var(--paper); color: #B42318; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-form label > .gs-form__error::after { content: " ✦"; }
.gs-form .is-invalid input, .gs-form .is-invalid textarea { border-color: #B42318; }
.gs-form .is-invalid input:focus, .gs-form .is-invalid textarea:focus { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }

/* "Vad gäller det?" – the button that opens GS Forms' topic dialog, styled like the fields. */
.gs-form .gs-form__choice { justify-self: stretch; font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: .8rem .95rem; }
.gs-form .gs-form__choice:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gs-form .gs-form__choice.is-empty .gs-form__choice-text { opacity: 1; color: var(--muted); }

/* The topic dialog (outside the form, in <body>). */
.gs-form-dialog { background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(20, 20, 19, .28); }
.gs-form-dialog::backdrop { background: rgba(20, 20, 19, .5); }
.gs-form-dialog__head { border-bottom-color: var(--line); }
.gs-form-dialog__title { font: 400 1.5rem/1.2 var(--serif); }
.gs-form-dialog__close:hover { background: var(--line); }
.gs-form-dialog__option { font: 400 1rem/1.4 var(--sans); border-color: var(--line-strong); border-radius: 10px; transition: border-color .15s, background .15s; }
.gs-form-dialog__option:hover, .gs-form-dialog__option:focus-visible { outline: none; border-color: var(--accent); }
.gs-form-dialog__option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 500; }
@media (max-width: 600px) { .gs-form-dialog { border-radius: 18px 18px 0 0; } }
.gs-contact-aside p { margin: 0 0 1.5rem; }
.gs-contact-aside a { font-family: var(--serif); font-size: 1.5rem; text-decoration: none; }

/* ---------- Footer ---------- */
.gs-footer { border-top: 1px solid var(--line); margin-top: 0; padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .92rem; }
.gs-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.gs-logo--footer svg { height: 54px; margin-bottom: 1rem; }
.gs-footer__brand p { color: var(--muted); max-width: 34ch; margin: 0 0 1rem; }
.gs-footer__contact a { color: var(--ink); text-decoration: none; }
.gs-footer h2 { font: 500 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: .5rem 0 1rem; }
.gs-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.gs-footer__menu a { text-decoration: none; color: var(--ink); }
.gs-footer__menu a:hover { color: var(--accent); text-decoration: underline; }
.gs-footer__bottom { max-width: var(--wrap); margin: 3rem auto 0; padding: 1.5rem var(--gutter) 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: .82rem; }
.gs-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.gs-footer__legal a { color: var(--muted); text-decoration: none; }
.gs-footer__legal a:hover { color: var(--ink); }
/* "Cookie settings" (GS Consent's button) looks like the legal links next to it. */
.gs-footer__legal .gs-settings-link { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.gs-footer__legal .gs-settings-link:hover { color: var(--ink); }
@media (max-width: 900px) { .gs-footer__inner { grid-template-columns: 1fr 1fr; } .gs-footer__brand { grid-column: 1 / -1; } }

/* 404 */
.gs-404 { padding: clamp(4rem, 12vw, 9rem) 0; }
.gs-404 h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin: 0 0 1rem; }

/* Archive fallback */
.gs-archive-title { margin-top: 4rem; }

/* Motion preference */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Print */
@media print { .gs-header-part, .gs-footer, .gs-cta { display: none; } }

/* ---------- Fixes & refinements ---------- */
*, *::before, *::after { box-sizing: border-box; }
.gs-inner > * { margin-top: 0; margin-bottom: 0; }
.gs-inner > * + * { margin-top: 1.25rem; }
.gs-inner > .is-style-gs-kicker + * { margin-top: .5rem; }
.gs-inner > h1 + .is-style-gs-lead, .gs-inner > h2 + .is-style-gs-lead { margin-top: 1.5rem; }
.gs-inner > .wp-block-buttons { margin-top: 2rem; }
.gs-inner > .gs-tiles + .wp-block-buttons, .gs-inner > ul.gs-cards + .wp-block-buttons, .gs-inner > .wp-block-gs-children + .wp-block-buttons { margin-top: 2.25rem; }
.gs-tile > * { margin: 0; }
.gs-tile > * + * { margin-top: .55rem; }
.gs-tile > .is-style-gs-kicker + h3 { margin-top: 1.1rem; }
.gs-tiles--compact .gs-tile { padding: 1.1rem 1.2rem !important; }
.gs-tiles--compact .gs-tile h3 { font-size: 1.2rem; }
.gs-tiles--compact .gs-tile .is-style-gs-kicker { font-size: .66rem !important; }
.gs-stats > * { margin: 0 !important; }
.gs-stat > * + * { margin-top: 0; }
.gs-logo svg { height: 58px; }
@media (max-width: 960px) { .gs-logo svg { height: 46px; } }
.gs-content > .gs-cta, .gs-content > section.gs-cta { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.gs-landing > .gs-cta { margin-top: 0 !important; }
ul.gs-linklist { list-style: none; padding: 0 !important; border-top: 1px solid var(--line); }
ul.gs-linklist li { margin: 0 !important; border-bottom: 1px solid var(--line); }
ul.gs-linklist a { display: flex; justify-content: space-between; padding: .7rem 0; text-decoration: none; }
ul.gs-linklist a::after { content: "→"; color: var(--muted); transition: transform .2s; }
ul.gs-linklist a:hover::after { transform: translateX(3px); color: var(--accent); }
/* Prose column aligns with the page hero (left), not centred */
.gs-prose > * { margin-left: max(0px, calc((100% + 2 * var(--gutter) - var(--wrap)) / 2)) !important; margin-right: auto !important; }
.gs-prose > ul.gs-cards, .gs-prose > .gs-year, .gs-prose > ul.gs-index { max-width: calc(var(--wrap) - 2 * var(--gutter)) !important; }
.gs-hero-sub { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 4vw, 3rem) !important; }
.gs-hero-sub h1 { font-size: clamp(2.6rem, 6.4vw, 5.25rem) !important; line-height: 1.02 !important; letter-spacing: -.03em; max-width: 16ch; }
.gs-hero-sub::after { display: none; }
.gs-split--contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.gs-compare { overflow-x: auto; }
.gs-compare table { min-width: 760px; font-size: .9rem; border-collapse: collapse; width: 100%; }
.gs-compare th, .gs-compare td { padding: .65rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gs-compare thead th { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.gs-compare td:first-child { color: var(--muted); }
/* The row names stay in view while the table scrolls sideways on a phone. The column needs the section's own
   background, or the values show through as they slide under it. */
.gs-compare th:first-child, .gs-compare td:first-child { position: sticky; left: 0; z-index: 1; width: 9.5rem; hyphens: auto; -webkit-hyphens: auto; background: var(--paper); box-shadow: inset -1px 0 0 var(--line), 6px 0 8px -6px rgba(20, 20, 19, .18); }
.gs-section--tint .gs-compare th:first-child, .gs-section--tint .gs-compare td:first-child { background: var(--paper-2); }
.gs-pricing { display: grid !important; }
.gs-plan > * { margin: 0; }
.gs-plan > * + * { margin-top: .6rem; }
.gs-tiles .gs-person { background: transparent; border-radius: 0; }
@media (min-width: 821px) and (max-width: 1080px) { .gs-tiles.gs-cols-3, .gs-tiles.gs-cols-4, .gs-pricing.gs-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 820px) { .gs-tiles.gs-cols-2, .gs-tiles.gs-cols-3, .gs-tiles.gs-cols-4 { grid-template-columns: 1fr !important; } }
.wp-block-table.gs-compare td, .wp-block-table.gs-compare th, .gs-prose .wp-block-table td, .gs-prose .wp-block-table th { border: 0; border-bottom: 1px solid var(--line); }
.wp-block-table.gs-compare thead { border-bottom: 1px solid var(--ink); }
.gs-plan--featured::before { content: "Populärast"; }
:lang(en) .gs-plan--featured::before { content: "Most popular"; }
@media (max-width: 820px) { .gs-split--contact { grid-template-columns: 1fr !important; } .gs-proof span { display: none; } .gs-proof { flex-direction: column; gap: .35rem; } }

/* ---------- Language switcher (GS Languages) & form (GS Forms) ---------- */
.gs-lang-switcher ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
.gs-lang-switcher a { display: inline-block; font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-decoration: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem .7rem; color: var(--ink); }
.gs-lang-switcher a:hover { border-color: var(--ink); color: var(--ink); }
.gs-lang-switcher a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gs-form__notice { padding: 1rem 1.2rem; border-radius: 10px; margin-bottom: 1.5rem; max-width: 640px; }
.gs-form__notice--ok { background: var(--accent-soft); }
.gs-form__notice--error { background: #FBE3DD; }
.gs-form__submit { justify-self: start; display: inline-flex; align-items: center; gap: .5em; padding: .82rem 1.35rem; border-radius: 999px; font: 600 .9375rem/1 var(--sans); border: 0; cursor: pointer; background: var(--ink); color: var(--paper); }
.gs-form__submit:hover { background: var(--accent); }
.wp-block-gsio-cta, .wp-block-gsio-site-header, .wp-block-gsio-site-footer { margin: 0 !important; max-width: none !important; }
.gs-content > .wp-block-gsio-cta { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.gs-prose > .wp-block-gsio-child-pages, .gs-prose > .wp-block-gsio-post-list { max-width: calc(var(--wrap) - 2 * var(--gutter)) !important; }

/* ---------- GS Cookies: the banner in the site's look (the plugin's own CSS reads --gs-cc-*) ---------- */
body .gs-cc {
  --gs-cc-bg: var(--wp--preset--color--paper, #faf9f5);
  --gs-cc-fg: var(--wp--preset--color--ink, #141413);
  --gs-cc-text-muted: var(--wp--preset--color--muted, #5e5d59);
  --gs-cc-border: #e6e3d8;
  --gs-cc-muted: #f0eee6;
  --gs-cc-accent: var(--wp--preset--color--ink, #141413);
  --gs-cc-accent-hover: #3d3d3a;
  --gs-cc-on-accent: #ffffff;
  --gs-cc-font: var(--wp--preset--font-family--sans, inherit);
  --gs-cc-font-heading: var(--wp--preset--font-family--serif, inherit);
  --gs-cc-radius: 14px;
}
body .gs-cc.gs-note { border-top: 1px solid var(--gs-cc-border); box-shadow: 0 20px 60px rgba(20, 20, 19, .12); }
body .gs-cc :is(.gs-note__ghost, .gs-note__accept, .gs-choices__save) { border-radius: 999px; }

/* ---------- Home v2: marquee, pillars, cases, facts, steps ---------- */
.gs-home-hero .gs-inner { position: relative; z-index: 1; }
/* One sentence per line (a line break in the heading); a line that must still wrap on a narrow phone is split evenly. */
.gs-home-hero h1 { max-width: none; text-wrap: balance; }
.gs-marquee { margin-top: clamp(3rem, 7vw, 5.5rem); position: relative; z-index: 1; }
.gs-marquee__label { font: 500 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; text-align: center; }
.gs-marquee__track { display: flex; overflow: hidden; gap: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.gs-marquee__track ul { display: flex; flex: none; gap: clamp(2.25rem, 5vw, 4rem); padding: 0 clamp(1.125rem, 2.5vw, 2rem); margin: 0; list-style: none; animation: gs-marquee 42s linear infinite; }
.gs-marquee__track li { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -.01em; color: var(--ink); opacity: .55; white-space: nowrap; margin: 0; }
.gs-marquee:hover ul { animation-play-state: paused; }
@keyframes gs-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .gs-marquee__track ul { animation: none; } .gs-marquee__track { flex-wrap: wrap; justify-content: center; } .gs-marquee__track ul[aria-hidden] { display: none; } .gs-marquee__track ul { flex-wrap: wrap; justify-content: center; row-gap: .5rem; } }

.gs-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3rem !important; }
.gs-pillar { border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.gs-pillar > * { margin: 0; }
.gs-pillar__num { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; color: var(--accent); }
.gs-pillar h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 1.1rem; }
.gs-pillar p:last-child { color: var(--muted); margin-top: .7rem; line-height: 1.65; }
@media (max-width: 820px) { .gs-pillars { grid-template-columns: 1fr; } }

.gs-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2.75rem !important; }
.gs-case { --c: var(--ink); --c2: #000; position: relative; display: flex; flex-direction: column; min-height: 340px; padding: clamp(1.4rem, 2.5vw, 2rem); border-radius: calc(var(--radius) + 4px); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate;
	background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 70%, #fff 30%) 0%, transparent 55%), linear-gradient(160deg, var(--c) 0%, var(--c2) 100%); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.gs-case::after { content: ""; position: absolute; right: -14%; bottom: -22%; width: 62%; aspect-ratio: 1; background: rgba(255,255,255,.09); z-index: -1; transition: transform .6s cubic-bezier(.2,.7,.2,1);
	-webkit-mask: url("../img/star.svg") center / contain no-repeat; mask: url("../img/star.svg") center / contain no-repeat; }
.gs-case:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 24px 60px color-mix(in srgb, var(--c2) 35%, transparent); }
.gs-case:hover::after { transform: rotate(18deg) scale(1.08); }
.gs-case--wide { grid-column: span 2; }
.gs-case__sector { font: 500 .7rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.gs-case__name { font-family: var(--serif); font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1; letter-spacing: -.03em; margin-top: auto; padding-top: 3rem; }
.gs-case--wide .gs-case__name { font-size: clamp(2.8rem, 6vw, 4.8rem); }
.gs-case__text { margin-top: .9rem; font-size: .97rem; line-height: 1.55; opacity: .86; max-width: 46ch; }
.gs-case__tags { margin-top: 1.2rem; font: 500 .7rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; display: flex; justify-content: space-between; gap: 1rem; }
.gs-case__tags::after { content: "→"; font-size: 1rem; letter-spacing: 0; transition: transform .25s; }
.gs-case:hover .gs-case__tags::after { transform: translateX(4px); }
@media (max-width: 1080px) { .gs-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .gs-cases { grid-template-columns: 1fr; } .gs-case--wide { grid-column: auto; } .gs-case { min-height: 280px; } }

.gs-founders h2 em { font-style: italic; background: var(--star); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.gs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 2.25rem 0 1.75rem !important; border-top: 1px solid rgba(255,255,255,.16); }
.gs-facts > div { padding: 1.2rem 1rem 1rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.gs-facts dt { font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1; letter-spacing: -.02em; }
.gs-facts dd { margin: .45rem 0 0; font-size: .85rem; color: rgba(250,249,245,.68); }
@media (max-width: 680px) { .gs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three facts: three columns, one under the other on phones (the offices line is long). */
.gs-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 680px) { .gs-facts--3 { grid-template-columns: 1fr; } }

.gs-steps { list-style: none; counter-reset: gss; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); padding: 0 !important; margin: 3rem 0 0 !important; position: relative; }
.gs-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 1px; background: var(--line-strong); }
.gs-steps li { counter-increment: gss; position: relative; margin: 0 !important; padding-top: 3.25rem; }
.gs-steps li::before { content: counter(gss, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); display: grid; place-items: center; font: 500 .72rem/1 var(--mono); letter-spacing: .04em; }
.gs-steps li:last-child::before { background: var(--ink); color: var(--paper); }
.gs-steps h3 { font-size: 1.4rem; margin: 0 0 .5rem; }
.gs-steps p { color: var(--muted); font-size: .97rem; margin: 0; }
@media (max-width: 900px) { .gs-steps { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } .gs-steps::before { display: none; } }
@media (max-width: 560px) { .gs-steps { grid-template-columns: 1fr; } }
.gs-section--tint .gs-split details.gs-faq:first-child, .gs-section--tint .gs-split details.gs-accordion:first-child { border-top: 1px solid var(--line-strong); }
.gs-case--more { --c: var(--paper); --c2: var(--paper-3); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); }
.gs-case--more:hover { color: var(--ink); border-color: var(--ink); box-shadow: 0 18px 50px rgba(20,20,19,.08); }
.gs-case--more::after { background: var(--star); opacity: .14; }
@media (max-width: 1080px) { .gs-case--wide-end { grid-column: auto; } }
@media (max-width: 820px) { .gs-proof { flex-direction: row; gap: .35rem .75rem; } .gs-proof span { display: inline; } .gs-home-hero .gs-lead { font-size: 1.08rem !important; } }

/* ---------- Post images: cards, rows, post hero ---------- */
.gs-card--post a { padding: 0; overflow: hidden; }
.gs-card--post a > :not(.gs-card__media) { margin-inline: 1.5rem; }
.gs-card--post a > .gs-kicker { margin-top: 1.4rem; margin-bottom: .9rem; }
.gs-card--post a > .gs-card__more { margin-bottom: 1.5rem; }
.gs-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.gs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gs-card--post a:hover .gs-card__media img { transform: scale(1.04); }
.gs-postrow a { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
.gs-postrow__body { display: grid; gap: .3rem; }
.gs-postrow__media { width: 200px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.gs-postrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gs-postrow a:hover .gs-postrow__media img { transform: scale(1.05); }
@media (max-width: 680px) { .gs-postrow__media { width: 96px; } .gs-postrow a { gap: 1rem; } }
.gs-hero__media { margin: clamp(2rem, 5vw, 3.5rem) auto 0; }
.gs-hero__media img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: calc(var(--radius) + 4px); display: block; background: var(--paper-2); }

/* ---------- Service pages v2 ---------- */
.gs-hero--page + .gs-content .gs-landing > .gs-section:first-child, .gs-main--landing .wp-block-gsio-page-header + .gs-section { border-top: 1px solid var(--line); }
p.gs-lede { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.2rem) !important; line-height: 1.3; letter-spacing: -.012em; color: var(--ink); max-width: 52ch; text-wrap: pretty; }
.gs-lede__more { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 4rem); margin-top: 2rem !important; color: var(--muted); }
.gs-lede__more > p { margin: 0 0 1rem; break-inside: avoid; }
ul.gs-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; padding: 0 !important; margin-top: 2rem !important; }
ul.gs-chips li { margin: 0 !important; border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; background: var(--paper); }
ul.gs-checks-2 { columns: 2 16rem; column-gap: 2.5rem; }
ul.gs-checks-2 li { break-inside: avoid; margin-bottom: .7rem; }
.gs-split details.gs-faq:first-of-type, .gs-split details.gs-accordion:first-of-type { border-top: 1px solid var(--line-strong); }
.gs-cases--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-cases--3 .gs-case { min-height: 280px; }
.gs-cases--3 .gs-case__name { font-size: clamp(1.9rem, 3vw, 2.6rem); }
@media (max-width: 1080px) { .gs-cases--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .gs-cases--3 { grid-template-columns: 1fr; } }
.gs-tile h3 + p { margin-top: .5rem; }
.gs-landing > .wp-block-gsio-page-header + .gs-section { border-top: 1px solid var(--line); }

/* ---------- About: wide studio image, constellation band ---------- */
.gs-section--flush { padding-block: 0 clamp(1rem, 3vw, 2rem) !important; border-top: 0 !important; }
.gs-section--flush + .gs-section { border-top: 0 !important; }
.gs-figure-wide { margin: 0 !important; }
.gs-figure-wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; border-radius: calc(var(--radius) + 6px); display: block; }
@media (max-width: 680px) { .gs-figure-wide img { aspect-ratio: 4 / 3; } }
.gs-band-constellation { position: relative; overflow: hidden; isolation: isolate; }
.gs-band-constellation::before { content: ""; position: absolute; right: -6%; top: 50%; width: min(52vw, 640px); aspect-ratio: 1; transform: translateY(-50%); z-index: -1; opacity: .5;
	background: url("../img/constellation.webp") center / cover no-repeat;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
@media (max-width: 820px) { .gs-band-constellation::before { opacity: .28; right: -30%; } }

/* ---------- Case pages v2 ---------- */
.gs-case-testfakta { --c: #C8281E; --c2: #8E140C; }
.gs-case-agda-studios { --c: #857154; --c2: #4F4029; }
.gs-case-bergling-media { --c: #6E1B23; --c2: #3E0B10; }
.gs-case-siphra { --c: #3A1452; --c2: #1C0828; }
.gs-case-flaskvis { --c: #5B1A2E; --c2: #2E0A16; }
.gs-case-jonna { --c: #2F5D3A; --c2: #173320; }
.gs-casehero { margin-block: 0 !important; color: #fff; position: relative; overflow: hidden; isolation: isolate;
	background: radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--c) 70%, #fff 30%) 0%, transparent 55%), linear-gradient(160deg, var(--c) 0%, var(--c2) 100%); }
.gs-casehero::after { content: ""; position: absolute; right: -6%; bottom: -30%; width: min(48vw, 560px); aspect-ratio: 1; background: rgba(255,255,255,.1); z-index: -1;
	-webkit-mask: url("../img/star.svg") center / contain no-repeat; mask: url("../img/star.svg") center / contain no-repeat; }
.gs-casehero .gs-hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5.5rem); }
.gs-casehero .gs-hero__title { font-size: clamp(3rem, 8vw, 6.5rem); color: #fff; }
.gs-casehero .gs-hero__lead, .gs-casehero .gs-kicker, .gs-casehero .gs-crumbs, .gs-casehero .gs-crumbs a { color: rgba(255,255,255,.82); }
.gs-casehero .gs-kicker::before { background: #fff; }
.gs-casehero + .gs-section { border-top: 0 !important; }
ul.gs-results { list-style: none; counter-reset: gsr; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; padding: 0 !important; margin-top: 2.5rem !important; }
ul.gs-results li { overflow-wrap: break-word; counter-increment: gsr; margin: 0 !important; padding: 1.5rem 1.4rem 1.6rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: rgba(255,255,255,.04);
	font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; letter-spacing: -.01em; }
ul.gs-results li::before { content: counter(gsr, decimal-leading-zero); display: block; font: 500 .72rem/1 var(--mono); letter-spacing: .12em; color: #8FD3FF; margin-bottom: 1.6rem; }
.gs-stats--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0 !important; }

/* ---------- Platform pages (children of Plattformar / Platforms): the capability list as checks ---------- */
:is(.parent-pageid-745, .parent-pageid-760) .gs-prose > ul.wp-block-list { list-style: none; padding-left: 0 !important; columns: 2 16rem; column-gap: 2.5rem; max-width: 820px; }
:is(.parent-pageid-745, .parent-pageid-760) .gs-prose > ul.wp-block-list li { position: relative; padding-left: 1.9rem; break-inside: avoid; margin: 0 0 .7rem; }
:is(.parent-pageid-745, .parent-pageid-760) .gs-prose > ul.wp-block-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231F5FD1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
:is(.parent-pageid-745, .parent-pageid-760) .gs-prose > h2 { margin-top: 4rem; }

/* ---------- Answer pages: the short answer first ---------- */
.gs-prose > p.gs-answer { position: relative; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem) !important; line-height: 1.45; letter-spacing: -.01em; color: var(--ink);
	background: var(--paper-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.4rem 1.6rem 1.5rem; margin-bottom: 2.5rem; }
.gs-prose > p.gs-answer::before { content: "Kort svar"; display: block; font: 500 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
:lang(en) .gs-prose > p.gs-answer::before { content: "Short answer"; }

/* ---------- Link tiles (platforms overview) ---------- */
.gs-linktiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem !important; }
a.gs-tile--link { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--ink); background: var(--paper); }
a.gs-tile--link:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink); }
.gs-tile__title { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; margin-top: .6rem; }
.gs-tile__text { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.gs-tile__more { margin-top: auto; padding-top: .8rem; font-weight: 600; font-size: .875rem; }
@media (max-width: 1080px) { .gs-linktiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gs-linktiles { grid-template-columns: 1fr; } }

/* ---------- Inspiration: idea cards ---------- */
.gs-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem !important; }
.gs-idea { display: flex; flex-direction: column; }
.gs-idea h3 { font-size: 1.4rem; }
.gs-idea ul.gs-chips { margin-top: auto !important; padding-top: 1rem !important; }
ul.gs-chips--small li { font-size: .78rem; padding: .3rem .7rem; }
@media (max-width: 1080px) { .gs-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gs-ideas { grid-template-columns: 1fr; } }

/* Grid components: WordPress's flow layout gives every child after the first a top margin (block gap),
   which pushes grid items out of line. Grids space their items with gap instead. */
:is(.gs-ideas, .gs-cases, .gs-linktiles, .gs-tiles, .gs-pillars, .gs-stats, .gs-facts, .gs-steps, .gs-results, ul.gs-cards, .gs-pricing) > * { margin-block-start: 0 !important; margin-top: 0 !important; }
.gs-crumbs span[aria-current] { opacity: 1; color: var(--ink); }
.gs-casehero .gs-crumbs span[aria-current] { color: #fff; }

/* ---------- Contrast (WCAG AA) ---------- */
/* Gradient headline words on the light paper: a darker blue (4.2–5.5:1); the cyan gradient stays on dark bands. */
:root { --star-text: linear-gradient(135deg, #0B7FB8 0%, #1F5FD1 100%); }
.gs-home-hero h1 em { background-image: var(--star-text); }
/* Case cards and case heroes: full white text (4.7:1 on the lightest card colour); no translucent text. */
.gs-case__sector, .gs-case__text, .gs-case__tags { opacity: 1; }
.gs-case--more .gs-case__sector, .gs-case--more .gs-case__text, .gs-case--more .gs-case__tags { color: var(--ink); }
.gs-casehero .gs-hero__lead, .gs-casehero .gs-kicker, .gs-casehero .gs-crumbs, .gs-casehero .gs-crumbs a { color: #fff; }

/* ---------- Mobile: legible small text and comfortable tap targets (44px) ---------- */
.gs-case__sector, .gs-case__tags { font-size: .75rem; }
.gs-tiles--compact .gs-tile .is-style-gs-kicker { font-size: .72rem !important; }
details.gs-faq summary, details.gs-accordion summary { min-height: 44px; align-items: center; padding-block: .25rem; }
.gs-cta__mail { display: inline-block; padding-block: .6rem; }
.gs-form__check input[type=checkbox] { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--ink); }
.gs-form__check { min-height: 44px; }

/* Mobile menu: a backdrop-filter makes the header the containing block of the fixed menu, which then
   collapsed to the header's height. While the menu is open the header is solid and the menu fills the screen. */
/* The language switcher's wrapper also carries .gs-lang (a pill): only the link is the pill. */
.gs-lang-switcher.gs-lang { border: 0; padding: 0; border-radius: 0; }

/* ---------- The logo's star (assets/img/star.svg as a mask) ----------
   It is a thin, sweeping outline, not a filled five-point star, so it needs more opacity and size than the
   old filled shape to read as the same mark. */
.gs-kicker::before, .is-style-gs-kicker::before { width: .95em; height: .95em; vertical-align: -.12em; margin-right: .45em; }
.gs-home-hero::after { opacity: .5; filter: none; width: min(48vw, 620px); }
.gs-cta__inner::after { opacity: .75; width: 340px; height: 340px; right: -40px; top: -70px; }
.gs-case::after { background: rgba(255, 255, 255, .32); }
.gs-casehero::after { background: rgba(255, 255, 255, .3); }
.gs-case--more::after { opacity: .5; }
.gs-home-hero::after { opacity: .32; }
.gs-case::after { background: rgba(255, 255, 255, .16); right: -18%; bottom: -30%; width: 66%; }

/* ---------- Animated logo: the star glows like the animated logo (a soft cyan pulse) ---------- */
.gs-logo svg { overflow: visible; }
.gs-logo .gs-logo__glow { animation: gs-logo-glow 5.5s ease-in-out infinite; }
.gs-logo:hover .gs-logo__glow, .gs-logo:focus-visible .gs-logo__glow { animation-duration: 1.6s; }
@keyframes gs-logo-glow { 0%, 100% { opacity: 0; } 45%, 55% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .gs-logo .gs-logo__glow { animation: none; opacity: 0; } }

/* ---------- Video player (assets/js/video.js), as on the Lovable site ---------- */
.gs-player { position: relative; overflow: hidden; margin-top: 2rem; border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(20,20,19,.18); aspect-ratio: 16 / 9; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.gs-player__video, .gs-player__poster, .gs-player__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-player__video { pointer-events: none; }
.gs-player.is-started .gs-player__poster { display: none; }
/* The whole picture is the play/pause button. */
.gs-player__surface { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 45%, rgba(0,0,0,.6)); cursor: pointer; transition: background .5s; }
.gs-player.is-started .gs-player__surface { background: radial-gradient(circle at center, rgba(0,0,0,.35) 0%, transparent 45%); }
.gs-player.is-playing .gs-player__surface, .gs-player.is-ended .gs-player__surface { background: transparent; }
/* The round play button in the middle: a turning ring in the brand colours around a glass core. */
.gs-player__play { position: absolute; top: 50%; left: 50%; z-index: 2; width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px); transform: translate(-50%, -50%); display: grid; place-items: center; color: #fff; pointer-events: none; transition: opacity .5s; }
.gs-player__play::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(10,12,18,.38); backdrop-filter: blur(1.5px) saturate(1.25); -webkit-backdrop-filter: blur(1.5px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.gs-player__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #3A84F4 0deg, transparent 110deg, transparent 250deg, #25D6FC 360deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%); mask: radial-gradient(circle, transparent 66%, #000 67%); animation: gs-spin 6s linear infinite; }
.gs-player__play svg { position: relative; width: 40%; height: 40%; margin-left: 6%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); transition: color .3s; }
.gs-player.is-playing .gs-player__play, .gs-player.is-ended .gs-player__play { opacity: 0; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gs-player__ring { animation: none; } }
/* Controls: pause at the top right while playing; sound and full screen at the bottom while hovering (or for a
   moment after a tap on a touch screen). */
.gs-player__control { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; }
.gs-player__pause { position: absolute; top: .75rem; right: .75rem; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .3s; }
.gs-player.is-playing .gs-player__pause { opacity: 1; pointer-events: auto; }
.gs-player__volume { position: absolute; left: .75rem; bottom: .75rem; z-index: 3; display: flex; align-items: center; gap: .5rem; }
.gs-player__full { position: absolute; right: .75rem; bottom: .75rem; z-index: 3; }
.gs-player__volume, .gs-player__full { opacity: 0; pointer-events: none; transition: opacity .3s; }
.gs-player.is-controls .gs-player__volume, .gs-player.is-controls .gs-player__full { opacity: 1; pointer-events: auto; }
.gs-player__level { width: 0; opacity: 0; accent-color: #3A84F4; transition: width .2s, opacity .2s; }
.gs-player.is-volume-open .gs-player__level { width: 7rem; opacity: 1; }
/* Hover only with a mouse: on a touch screen Safari treats the first tap on something that changes on hover as a
   hover, so play would need two taps. Touch screens show the controls with .is-controls (assets/js/video.js). */
@media (hover: hover) {
.gs-player:hover .gs-player__play svg { color: #8FD3FF; }
.gs-player__control:hover { background: rgba(0,0,0,.75); }
.gs-player.is-started:hover .gs-player__volume, .gs-player.is-started:hover .gs-player__full { opacity: 1; pointer-events: auto; }
.gs-player__volume:hover .gs-player__level { width: 7rem; opacity: 1; }
}
.gs-player__cross { display: none; }
.gs-player.is-muted .gs-player__cross { display: inline; }
.gs-player.is-muted .gs-player__waves { display: none; }
/* After the end: the last frame stays with "Play again". */
.gs-player__again { position: absolute; left: 50%; bottom: 8%; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); color: #fff; font-size: .95rem; font-weight: 500; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .5s; }
.gs-player.is-ended .gs-player__again { opacity: 1; pointer-events: auto; }
/* On a phone the label wrapped to two lines and the tall button covered the text under the logo in the last frame:
   one line, smaller, nearer the bottom edge. */
@media (max-width: 600px) { .gs-player__again { bottom: 4%; gap: .45rem; padding: .45rem 1rem; font-size: .85rem; white-space: nowrap; } }
/* Full screen: the whole film with black bars (never cropped), edge to edge. The page's reserved scrollbar space is
   given up while the player is full screen, or a white strip shows on the right. */
.gs-player.is-fullscreen { width: 100vw; height: 100vh; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.gs-player.is-fullscreen .gs-player__video, .gs-player.is-fullscreen .gs-player__poster img { object-fit: contain; }
html.gs-has-fullscreen { scrollbar-gutter: auto; }
p.gs-player__meta { margin-top: 1rem !important; font: 500 .72rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gs-player__page { margin-top: 1rem !important; font-size: .9rem; color: var(--muted); }
.gs-player__page a { color: inherit; }
.gs-cta__inner::after { opacity: .55; }

/* ---------- Case cards with images: the case image fills the card, the client colour carries the text ---------- */
.gs-case--media { min-height: 420px; }
.gs-case__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gs-case__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.gs-case__img--hover { opacity: 0; }
.gs-case--media:hover .gs-case__img { transform: scale(1.04); }
.gs-case--media:hover .gs-case__img--hover, .gs-case--media:focus-visible .gs-case__img--hover { opacity: 1; }
.gs-case--media::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 10%, transparent) 0%, color-mix(in srgb, var(--c2) 35%, transparent) 38%, color-mix(in srgb, var(--c2) 92%, transparent) 72%, var(--c2) 100%); }
.gs-case--media::after { display: none; }
.gs-case--media .gs-case__sector { align-self: flex-start; background: color-mix(in srgb, var(--c2) 70%, transparent); padding: .35rem .6rem; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .gs-case__img { transition: none; } .gs-case--media:hover .gs-case__img { transform: none; } }
.gs-case-figure { padding-block: clamp(1.5rem, 4vw, 3rem) 0 !important; }
.gs-case-figure .gs-figure-wide img { aspect-ratio: 16 / 7; }
.gs-case--media::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 15%, transparent) 0%, color-mix(in srgb, var(--c2) 45%, transparent) 34%, color-mix(in srgb, var(--c2) 94%, transparent) 64%, var(--c2) 100%); }

/* ---------- About: story, network and timeline images ---------- */
.gs-figure-side { margin: 2rem 0 0 !important; max-width: 420px; }
.gs-figure-side img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) + 4px); display: block; background: #0b0d12; }
.gs-figure-band { margin: 2.5rem 0 0 !important; }
.gs-figure-band img { width: 100%; aspect-ratio: 21 / 7; object-fit: cover; object-position: 50% 40%; border-radius: calc(var(--radius) + 4px); display: block; background: #0b0d12; }
@media (min-width: 821px) { .gs-split > :first-child:has(.gs-figure-sticky) { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
@media (max-width: 820px) { .gs-figure-side { max-width: none; } .gs-figure-side img { aspect-ratio: 16 / 9; } .gs-figure-band img { aspect-ratio: 16 / 9; } }

/* ---------- Table of contents (long reads) ---------- */
.gs-toc { margin-top: clamp(1.5rem, 4vw, 2.5rem) !important; margin-bottom: clamp(2rem, 5vw, 3rem) !important; }
.gs-toc ol { list-style: none; counter-reset: gst; margin: 0; padding: 0; columns: 2 18rem; column-gap: 2.5rem; border-top: 1px solid var(--line); }
.gs-toc li { counter-increment: gst; break-inside: avoid; border-bottom: 1px solid var(--line); margin: 0; }
.gs-toc a { display: flex; gap: .9rem; padding: .7rem 0; text-decoration: none; color: var(--ink); font-size: .97rem; line-height: 1.4; }
.gs-toc a::before { content: counter(gst, decimal-leading-zero); font: 500 .72rem/1.9 var(--mono); color: var(--accent); flex: none; }
.gs-toc a:hover { color: var(--accent); }
.gs-prose h2[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ---------- 404: ways forward ---------- */
.gs-404-links { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.gs-404-links a { display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px; padding: .6rem 1.1rem; text-decoration: none; color: var(--ink); }
.gs-404-links a:hover { border-color: var(--ink); }