/*
Theme Name: LearnLoop AI
Theme URI: https://learnloopai.com
Author: Demandloft
Description: LearnLoop AI site theme. Palette from the LearnLoop logo (ink #1C3B30, sage #4F8A63), Host Grotesk with a Silkscreen pixel accent, and the flip-through ring of AI tools on the home page.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: learnloop
*/

:root {
	--ink: var(--wp--preset--color--ink);
	--ink-deep: var(--wp--preset--color--ink-deep);
	--sage: var(--wp--preset--color--sage);
	--sage-text: var(--wp--preset--color--sage-text); /* small sage text on light grounds: 5.17:1 */
	--sage-light: var(--wp--preset--color--sage-light); /* sage on dark grounds: 8.35:1 */
	--ground: var(--wp--preset--color--ground);
	--mint: var(--wp--preset--color--mint);
	--paper: var(--wp--preset--color--paper);
	--pixel: var(--wp--preset--font-family--pixel);
}

body { -webkit-font-smoothing: antialiased; }

/* Work with Us is short enough that the document ended above the fold, leaving a strip of page
   background below the footer. The site column now fills the viewport and main takes the slack. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1 0 auto; }

/* Sections sit flush against each other; WordPress's default gap is for text, not bands. */
.wp-site-blocks > * + *,
.ll-front > * + * { margin-block-start: 0; }

/* ---------- Header ---------- */
header.wp-block-template-part { padding: 20px var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left); position: relative; z-index: 10; }
.home header.wp-block-template-part { position: absolute; top: 0; left: 0; right: 0; }
.ll-nav-bar { max-width: 1180px; margin-inline: auto; background: var(--paper); border-radius: 14px; padding: 12px 14px 12px 22px; gap: 24px; }
.ll-nav-bar .wp-block-site-logo img { height: 34px; width: auto; }
.ll-nav-links { font-size: 15px; font-weight: 500; gap: 30px; }
.ll-nav-links a { text-decoration: none; }
.ll-nav-links a:hover { color: var(--sage-text); }
.ll-nav-links a:not([href]) { cursor: default; }
/* Services dropdown (Julia, 23 Sep). Core's default is a square white panel, which reads as
   stock WordPress against the rest of the site. Same card as the nav bar: paper, ink, rounded. */
.ll-nav-links .wp-block-navigation__submenu-container {
	background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px;
	padding: 7px; margin-top: 0; top: calc(100% + 10px); min-width: 208px;
	box-shadow: 0 12px 26px rgba(28, 59, 48, .14); }
/* The gap under the nav bar has to stay hoverable. As a margin it was dead space: the pointer
   left "Services" before it reached the panel, the hover dropped, and the menu shut while you
   were still moving towards it. The offset is a `top` now, and this transparent strip bridges
   it, so the pointer never leaves the submenu's own box on the way down. */
.ll-nav-links .wp-block-navigation__submenu-container::before {
	content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.ll-nav-links .wp-block-navigation__submenu-container li { width: 100%; }
.ll-nav-links .wp-block-navigation__submenu-container a {
	display: block; width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 15px; color: var(--ink); }
.ll-nav-links .wp-block-navigation__submenu-container a:hover { background: var(--mint); color: var(--ink); }
/* In the phone overlay the items are already a plain stacked list, so the floating card
   would box a list inside a full-screen menu. Strip it back there. */
.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 0; top: auto; box-shadow: none; }
.is-menu-open .wp-block-navigation__submenu-container::before { display: none; }
.ll-nav-bar .wp-block-button__link { white-space: nowrap; }
/* Phones (below core's 600px menu breakpoint): the button crowded the bar, and the open menu
   already ends on Work with Us, so the header is logo and menu icon only. */
@media (max-width: 599px) { .ll-nav-bar .wp-block-buttons { display: none; } }

/* ---------- Phone menu ---------- */
/* Core's overlay is plain white with black text, parents centred and children hung off a
   different edge. Same ground and ink as the site, one left edge, children in sage under their parent. */
.ll-nav-links .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	background: var(--ground) !important; color: var(--ink) !important;
	padding: 28px var(--wp--style--root--padding-right) 40px var(--wp--style--root--padding-left); }
.ll-nav-links .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 56px; }
/* Core centres the list with auto margins and align-items at higher specificity, hence !important. */
.ll-nav-links .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; gap: 26px; text-align: left; margin-inline: 0 !important; width: 100%; }
.ll-nav-links .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; }
.ll-nav-links .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ll-nav-links .is-menu-open .wp-block-navigation__submenu-container { gap: 10px; padding: 12px 0 0 !important; }
.ll-nav-links .is-menu-open .wp-block-navigation__submenu-container a {
	padding: 0; font-size: 19px; font-weight: 500; color: var(--sage-text); }
.ll-nav-links .is-menu-open .wp-block-navigation__responsive-container-close { top: 4px; right: 0; color: var(--ink); }
.ll-nav-links .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
/* Work with Us lives in the header as a button; the overlay covers the header, so it repeats
   here as the menu's last item. Hidden everywhere else. */
.ll-nav-links .ll-nav-cta { display: none; }
.ll-nav-links .is-menu-open .ll-nav-cta { display: block; margin-top: 10px; }
.ll-nav-links .is-menu-open .ll-nav-cta > .wp-block-navigation-item__content {
	display: inline-block; padding: 14px 24px; border-radius: 10px; background: var(--ink); color: var(--ground);
	font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* ---------- Hero: the flip-through ring ---------- */
.ll-hero { position: relative; overflow: hidden; background: var(--ink-deep); color: var(--ground); padding-top: 150px; padding-bottom: 110px; }
.ll-hero .guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ll-ring-block { max-width: none !important; }
.ll-ring-block .stage { --tile: 128px; --r: 370px; --depth: 8px;
	height: calc(var(--tile) * 1.3 + 150px); display: grid; place-items: center;
	perspective: 1700px; perspective-origin: 50% 50%; }
.ll-ring-block .ring { position: relative; width: var(--tile); height: calc(var(--tile) * 1.3); transform-style: preserve-3d;
	transform: rotateY(0deg); animation: ll-spin 38s linear infinite; }
/* Julia asked for it never to stop, so there is no hover pause. Drag turns it instead, handled in
   blocks/ring/view.js. pan-y keeps a vertical swipe scrolling the page; only sideways is ours. */
.ll-ring-block .stage { touch-action: pan-y; cursor: grab; }
.ll-ring-block .stage.is-dragging { cursor: grabbing; }
/* Both ends spelled out. With only "to", Safari fills the start from the computed value, a matrix
   identical to a full turn, so it animated from no-turn to no-turn and the ring never moved. */
@keyframes ll-spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
/* Each card stands turned 90° in the ring, like a rolodex: edge-on in the middle, face-on at the sides. */
.ll-ring-block .tile { position: absolute; inset: 0; transform-style: preserve-3d;
	transform: rotateY(var(--a)) translateZ(var(--r)) rotateY(90deg); }
.ll-ring-block .face { position: absolute; inset: 0; backface-visibility: hidden; transform: translateZ(var(--depth)); }
.ll-ring-block .face.back { transform: rotateY(180deg) translateZ(var(--depth)); }
.ll-ring-block .icon { position: relative; width: 100%; height: 100%; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; }
.ll-ring-block .icon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(0,0,0,.10)); }
.ll-ring-block .icon svg { width: 44%; height: auto; margin-top: -8%; }
/* Slab edge: slices between the two faces give each card thickness. */
.ll-ring-block .tile::before, .ll-ring-block .tile::after { content: ""; position: absolute; inset: 0; border-radius: 24px; background: var(--edge, #2a2a2a); }
.ll-ring-block .tile::before { transform: translateZ(calc(var(--depth) * -0.6)); }
.ll-ring-block .tile::after { transform: translateZ(calc(var(--depth) * 0.6)); }
/* The name sits inside the card, so a nearer card covers the names behind it. */
.ll-ring-block .label { position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; white-space: nowrap;
	font-family: var(--pixel); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: inherit; }
.ll-hero-title { position: relative; margin-top: 34px !important; font-size: clamp(46px, 7.4vw, 108px); line-height: .98; letter-spacing: -.045em; color: var(--ground); }

/* ---------- Ferris ---------- */
.ll-ferris { padding-top: 120px; padding-bottom: 40px; }
.ll-frame { position: relative; aspect-ratio: 16 / 9; display: grid; place-content: center; padding: 8%; border-radius: 18px; overflow: hidden;
	background-color: var(--ink); color: var(--ground);
	background-image:
		radial-gradient(circle at 23px 23px, var(--sage-light) 5px, transparent 6px),
		radial-gradient(circle at calc(100% - 23px) 23px, var(--sage-light) 5px, transparent 6px),
		radial-gradient(circle at 23px calc(100% - 23px), var(--sage-light) 5px, transparent 6px),
		radial-gradient(circle at calc(100% - 23px) calc(100% - 23px), var(--sage-light) 5px, transparent 6px); }
.ll-frame .wp-block-quote { margin: 0; padding: 0; border: 0; text-align: center; }
.ll-frame .wp-block-quote p { margin: 0; font-size: clamp(22px, 3.2vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
/* With a Video block in it, the card takes the clip's own shape: no letterbox bars, no crop. */
.ll-frame:has(.wp-block-video) { aspect-ratio: auto; padding: 0; place-content: stretch; }
.ll-frame .wp-block-video { margin: 0; }
.ll-frame .wp-block-video video { display: block; width: 100%; height: auto; }
.ll-ferris-copy { margin-top: 64px !important; gap: 48px; }
.ll-ferris-copy h2 { margin: 0; font-size: clamp(40px, 5.4vw, 72px); }
.ll-ferris-copy p { margin: 8px 0 0; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; }

/* ---------- Take a beat ---------- */
.ll-beat { padding-top: 110px; padding-bottom: 130px; }
.ll-beat .wp-block-columns { gap: 56px; }
.ll-beat-title { margin: 0 0 40px; font-size: clamp(56px, 8.6vw, 128px); line-height: .92; letter-spacing: -.05em; }
.ll-questions { list-style: none; margin: 0 0 52px; padding: 0; border-top: 1.5px solid var(--ink); counter-reset: q; }
.ll-questions li { counter-increment: q; display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1.5px solid var(--ink);
	font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.ll-questions li::before { content: counter(q, decimal-leading-zero); font-family: var(--pixel); font-size: 14px; color: var(--sage-text); padding-top: 6px; }
.ll-btn-lg .wp-block-button__link { font-size: 19px; padding: 18px 28px; border-radius: 12px; }
.ll-cta-note { margin-top: 12px !important; font-size: 15px; font-weight: 500; color: var(--sage-text); }
.ll-blocks-art { aspect-ratio: 480 / 520; background: url(assets/blocks-art.svg) center / contain no-repeat; min-height: 300px; }

/* ---------- Pages and blog ---------- */
.ll-page { padding-top: 72px; padding-bottom: 110px; }
/* Julia asked for the strip at the bottom of Individuals to go. It was this padding: the mint
   testimonials band ended, and 110px of page background showed through before the footer. Any
   page whose last block is a full-width band now runs into the footer. */
.ll-page:has(> .entry-content > .alignfull:last-child) { padding-bottom: 0; }
.ll-page-title { font-size: clamp(44px, 6.4vw, 88px); line-height: .95; letter-spacing: -.045em; margin-bottom: 40px; }
.ll-posts .wp-block-post { border-top: 1.5px solid var(--ink); padding: 28px 0; margin: 0; }
.ll-posts .wp-block-post-title { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; margin: 6px 0 10px; }
.ll-posts .wp-block-post-title a { text-decoration: none; }
.ll-posts .wp-block-post-title a:hover { color: var(--sage-text); }
.ll-date { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--sage-text); }
.ll-single .wp-block-post-content { font-size: 19px; }
.ll-single .wp-block-post-content a { text-decoration: underline; color: var(--sage-text); }

/* ---------- Contact form (Contact Form 7) ---------- */
.wpcf7 form { display: grid; gap: 18px; max-width: 640px; }
.wpcf7 form > p { margin: 0; }
.wpcf7 label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; font-size: 17px; color: var(--ink);
	background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px 14px; }
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 input:focus-visible, .wpcf7 textarea:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
.wpcf7 input[type="submit"] { background: var(--ink); color: var(--ground); border: 0; border-radius: 10px; padding: 14px 24px;
	font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.wpcf7 input[type="submit"]:hover { background: var(--sage-text); }
.wpcf7-not-valid-tip { color: #9B2C2C; font-size: 14px; font-weight: 500; }
.wpcf7 form .wpcf7-response-output { margin: 0; border-radius: 10px; padding: 12px 14px; font-size: 15px; }

/* ---------- Footer ---------- */
.ll-footer { background: var(--mint); padding-top: 72px; padding-bottom: 36px; font-size: 15px; }
.ll-foot { gap: 40px; }
.ll-foot .wp-block-site-logo img { height: 40px; width: auto; }
.ll-foot h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.ll-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ll-foot a { text-decoration: none; }
.ll-foot a:hover { color: var(--sage-text); }
.ll-legal { margin-top: 56px !important; padding-top: 20px; border-top: 1px solid rgba(28, 59, 48, .25);
	font-family: var(--pixel); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--sage-text); }

/* ---------- Individuals page: lead and feature boxes ---------- */
/* Julia asked for the lead on one line. The old 22ch cap was what broke it over three.
   No max-width, and a size that fits the full sentence inside the content column; it still
   wraps below ~1000px, where one line cannot fit at a readable size. */
.ll-lead { margin: 0 0 12px !important; font-size: clamp(21px, 2.3vw, 27px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; max-width: none; text-wrap: balance; }
@media (min-width: 1000px) { .ll-lead { text-wrap: nowrap; } }
.ll-lead-note { margin: 0 0 40px !important; font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-text); }
.ll-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.ll-features > * { margin: 0 !important; }
.ll-features-2up { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .ll-features-2up { grid-template-columns: 1fr; } }
.ll-feature { padding: 30px 28px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; }
.ll-feature h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.ll-feature p { margin: 0; font-size: 17px; line-height: 1.5; }

/* ---------- Marquee: the professions strip and the logo strip ---------- */
/* One copy of the list is in the page; marquee.js clones it and sets --run from the measured
   width, so both strips move at the same speed whatever they contain. Without that class the
   strip stands still and whole, which is the right thing when the script has not run. */
.ll-marquee { position: relative; overflow: hidden; width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.ll-marquee-track { display: flex; width: max-content; }
.ll-marquee-track.is-looped { animation: ll-slide var(--run, 40s) linear infinite; }
/* Both ends written out, the same Safari trap the ring hit: with only "to" it fills the start
   from the computed value and nothing moves. */
@keyframes ll-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ll-marquee-run { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.ll-marquee-run li { flex: 0 0 auto; }

.ll-marquee-words .ll-marquee-run li { padding: 0 18px; font-size: clamp(19px, 1.9vw, 24px); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
/* A dot between professions, so the strip reads as a list and not one long sentence. */
.ll-marquee-words .ll-marquee-run li::after { content: "·"; margin-left: 36px; color: var(--sage-text); }
.ll-marquee-logos .ll-marquee-run li { padding: 0 30px; }
.ll-marquee-logos img { display: block; width: auto; height: 84px; opacity: .85; }
/* The enterprise set is mostly wide lockups, an icon beside a wordmark (United, CareFirst, Actus,
   Yamaha, Emerson). They hit the width cap in build-logos.py, so at 84px their lettering read
   smaller than the one-word marks on Individuals. Julia's set runs 20% larger to even that out. */
.ll-logos-enterprise img { height: 100px; }

.ll-strip-label { margin-block: 0 16px !important; font-size: 22px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-text); }
.ll-strip-note { margin-block: 0 40px !important; max-width: 56ch; font-size: 19px; line-height: 1.5; }
.ll-strip { padding-top: 88px; padding-bottom: 96px; }

/* The logo strip gets the dark band. Two scrolling strips on the same pale ground read as one
   thing repeated, so this one is inverted and runs the other way. The logos come from the
   light set, which is the same artwork flattened to the page ground instead of the ink. */
.ll-strip-dark { background: var(--ink-deep); color: var(--ground); padding-top: 82px; padding-bottom: 86px; }
/* The dark band's label is centred and larger, so the two strips differ in arrangement as well
   as in colour. The pale one keeps the page's left-aligned column. */
.ll-strip-dark .ll-strip-label { margin-block: 0 40px !important; text-align: center; color: var(--sage-light); }
.ll-marquee-logos .ll-marquee-track.is-looped { animation-direction: reverse; }
.ll-strip-dark .ll-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent); }
.ll-strip-dark .ll-marquee-logos img { opacity: .92; }

/* A full-width band inside a page sits inside post-content, which is centred and capped at the
   content width. Its offset from the viewport edge therefore changes with the window, so a fixed
   negative margin cannot reach the edge; measuring from the element's own centre can, at any
   width. overflow-x: clip stops a desktop scrollbar turning 100vw into a sideways scroll, and
   clip rather than hidden so nothing here becomes a scroll container. */
.ll-page { overflow-x: clip; }
.ll-page > .wp-block-post-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw; }
/* Bands butt against each other. The default block gap leaves a stripe of page ground between
   them, which reads as a seam where a dark band meets a mint one. */
.ll-page > .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* ---------- Testimonials ---------- */
/* A grid, not a carousel: Julia cut the third moving element from the page. auto-fit means the
   section takes however many quotes she ends up sending without a layout change. */
.ll-quotes { background: var(--mint); padding-top: 96px; padding-bottom: 96px; }
.ll-quotes-label { margin-block: 0 18px !important; font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-text); }
.ll-quotes-title { margin: 0 0 44px; font-size: clamp(36px, 4.6vw, 60px); }
/* Columns, not a grid. On a grid every card in a row is pushed down by the tallest one above
   it, which left a hole under the short first testimonial and pushed the Chanel one low. Columns
   pack each card under the one before it, so the gaps close and Chanel rises. Reading order for
   screen readers stays the document order. */
.ll-quote-grid { column-count: 2; column-gap: 22px; }
.ll-quote-grid > * { margin: 0 0 22px !important; break-inside: avoid; }
@media (max-width: 860px) { .ll-quote-grid { column-count: 1; } }
/* Julia's own screenshots, used instead of transcriptions because they read as more authentic.
   The card matches .ll-quote so the section is consistent whichever form a testimonial takes. */
.ll-shot { margin: 0; padding: 20px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; }
.ll-shot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ll-quote { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 30px 28px 26px;
	background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; }
/* The pixel quote mark is the same Silkscreen accent the hero labels and dates use. */
.ll-quote::before { content: "\201C"; font-size: 54px; font-weight: 700; line-height: .1; padding-top: 14px; color: var(--sage-light); }
.ll-quote p { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.ll-quote cite { margin-top: auto; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--sage-text); line-height: 1.7; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.ll-blocks-art { max-width: 420px; }
}
@media (max-width: 640px) {
	.ll-ring-block .stage { --tile: 76px; --r: 150px; --depth: 5px; height: calc(var(--tile) * 1.3 + 90px); }
	.ll-ring-block .label { font-size: 7px; }
	.ll-hero { padding-top: 120px; padding-bottom: 80px; }
	.ll-nav-bar .wp-block-site-logo img { height: 26px; }
	/* Menu icon on the right, not stranded in the middle of the bar. */
	.ll-nav-bar { padding: 14px 18px 14px 16px; gap: 14px; }
	.ll-nav-bar .ll-nav-links { margin-left: auto; }
	/* At 22px with wide tracking these labels broke over two lines and outweighed the heading. */
	.ll-strip-label { font-size: 15px; letter-spacing: .14em; }
	.ll-strip-dark .ll-strip-label { margin-block: 0 28px !important; }
	.ll-questions li { grid-template-columns: 40px 1fr; }
}
/* Reduce Motion: a still 3D ring read as broken, so lay the cards out flat as a labelled wall. */
@media (prefers-reduced-motion: reduce) {
	/* The strips stop and wrap, so everything on them stays readable rather than half off-screen. */
	.ll-marquee { -webkit-mask-image: none; mask-image: none; }
	.ll-marquee-track, .ll-marquee-track.is-looped { animation: none; width: auto; }
	.ll-marquee-track > *:not(:first-child) { display: none; }
	.ll-marquee-run { flex-wrap: wrap; justify-content: center; gap: 4px 0; }
	.ll-marquee-words .ll-marquee-run li:last-child::after { content: none; }
	/* Drag sits out under Reduce Motion, so do not offer a grab cursor. */
	.ll-ring-block .stage { --tile: 96px; display: block; height: auto; perspective: none; max-width: 960px; margin-inline: auto; cursor: auto; touch-action: auto; }
	.ll-ring-block .ring { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
		width: auto; height: auto; transform: none; transform-style: flat; animation: none; }
	.ll-ring-block .tile { position: relative; inset: auto; width: var(--tile); height: calc(var(--tile) * 1.3); transform: none; transform-style: flat; }
	.ll-ring-block .tile::before, .ll-ring-block .tile::after, .ll-ring-block .face.back { display: none; }
	.ll-ring-block .face { position: relative; width: 100%; height: 100%; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
	.ll-ring-block .stage { --tile: 64px; }
	.ll-ring-block .ring { gap: 10px; }
	.ll-ring-block .label { font-size: 6px; }
}

/* Every one of these caps its own width. In a constrained group that makes WordPress centre it
   with auto side margins, so a short paragraph drifts to the middle of the page while a long one
   looks fine. Pin them left; the cap still does its job on line length. */
.ll-lead-long, .ll-lead-sub, .ll-team p:not([class*="ll-"]), .ll-strip-note { margin-inline: 0 !important; }

/* ---------- Enterprises ---------- */
.ll-lead-long { margin: 0 0 40px !important; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; max-width: 62ch; }
.ll-lead-sub { margin: 0 0 40px !important; font-size: 18px; line-height: 1.5; max-width: 56ch; color: var(--sage-text); }
/* Her four boxes carry a short list under the description; the Individuals five do not. */
.ll-feature-points { margin: 16px 0 0 !important; padding: 0; list-style: none; }
.ll-feature-points li { position: relative; padding-left: 18px; margin-bottom: 7px; font-size: 15px; line-height: 1.45; color: var(--sage-text); }
.ll-feature-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.ll-feature-points li:last-child { margin-bottom: 0; }

/* Case studies. One card each, ask then problem then solution, closing on the figure. */
.ll-cases { background: var(--mint); padding-top: 96px; padding-bottom: 96px; }
.ll-cases-title { margin: 0 0 44px; font-size: clamp(36px, 4.6vw, 60px); }
.ll-case { padding: 34px 32px; margin-bottom: 22px !important; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; }
.ll-case:last-child { margin-bottom: 0 !important; }
.ll-case-label { margin: 26px 0 6px !important; font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-text); }
.ll-case > .ll-case-label:first-child { margin-top: 0 !important; }
.ll-case-title { margin: 0 0 26px; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.ll-case p:not([class*="ll-"]) { margin: 0 0 22px; font-size: 17px; line-height: 1.55; }

/* The figure, from the two screenshots Julia sent: a large numeral over a small monospaced
   caption. Hers are blue on near-black; these take the site's ink and sage so the page still
   reads as hers rather than as the reference. */
.ll-stat { margin-top: 28px !important; padding: 26px 28px; background: var(--ink-deep); border-radius: 14px; }
.ll-stat-fig { margin: 0 !important; font-size: clamp(40px, 5.4vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--sage-light); }
.ll-stat-cap { margin: 10px 0 0 !important; font-family: var(--pixel); font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--ground); opacity: .78; }

/* Until a logo PNG exists the strip prints the company name, set to read as a logo would. */
.ll-logo-name { display: inline-block; white-space: nowrap; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ground); opacity: .9; }

/* ---------- Services ---------- */
.ll-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 22px; margin-top: 48px !important; }
.ll-paths > * { margin: 0 !important; }
/* These groups are flow layout, not constrained, on purpose. Constrained centres any child that
   has its own width using auto side margins, and in a flex column every child shrinks to its
   content, so the heading and the button both drifted to the middle of the card. */
/* Our margins, not WordPress's. blockGap adds margin-block-start to every block after the
   first, which stacked on top of the spacing below and opened a 38px hole under each title. */
.ll-path > *, .ll-cta > *, .ll-case > *, .ll-team > * { margin-block-start: 0; }
.ll-path { display: flex; flex-direction: column; padding: 34px 32px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 18px; }
.ll-path-label { margin: 0 0 12px !important; font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-text); }
.ll-path-title { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.025em; }
.ll-path p:not([class*="ll-"]) { margin: 0 0 26px; font-size: 17px; line-height: 1.55; }
.ll-path-btn { margin-top: auto !important; padding-top: 12px; }
.alignfull + .ll-cta { margin-top: 0 !important; }
.ll-cta { margin-top: 90px !important; background: var(--ink-deep); color: var(--ground); padding-top: 82px; padding-bottom: 82px; }
.ll-cta-title { margin: 0 0 10px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.03em; color: var(--ground); }
.ll-cta p:not([class*="ll-"]) { margin: 0 0 28px; font-size: 19px; line-height: 1.5; opacity: .85; }
.ll-cta .wp-block-button__link { background: var(--sage-light); color: var(--ink-deep); }
/* Enterprises ends on the dark client strip and the footer is mint, so its booking band takes the
   page ground: a dark band would merge with the strip, a mint one with the footer. */
.ll-cta-light { background: var(--ground); color: var(--ink); }
.ll-cta-light .ll-cta-title { color: var(--ink); }
.ll-cta-light .wp-block-button__link { background: var(--ink); color: var(--ground); }
.ll-cta-light .wp-block-button__link:hover { background: var(--sage-text); }

/* ---------- Work with Us: booking first, then the form ---------- */
.ll-book { padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1.5px solid var(--ink); max-width: 640px; margin-inline: 0 !important; }
.ll-book > * { margin-block-start: 0; }
.ll-book-title, .ll-email-title { margin: 0 0 10px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.03em; }
.ll-book p:not([class*="ll-"]) { margin: 0 0 28px; font-size: 19px; line-height: 1.5; }
.ll-email-title { margin-bottom: 28px; }

/* ---------- Our Consultants ---------- */
.ll-team { margin-top: 64px !important; }
.ll-team-label { margin: 0 0 16px !important; font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-text); }
.ll-team p:not([class*="ll-"]) { margin: 0 0 20px; font-size: 18px; line-height: 1.55; max-width: 66ch; }
.ll-mini-label { margin: 30px 0 14px !important; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-text); }
/* Short lists stand still as chips. The long company lists roll; see the note in the content file. */
.ll-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 !important; padding: 0; list-style: none; }
.ll-chips li { padding: 8px 15px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; font-size: 15px; font-weight: 500; }
.ll-team + .ll-marquee { margin-top: 0 !important; margin-bottom: 8px; }

/* A section heading that reads as one. The small uppercase kicker (.ll-lead-note) is for a line
   that introduces the block right under it, not for the top of a section. */
/* .ll-lead-long carries 40px under it; .ll-lead carries 12px, sized for the small kicker that
   used to follow it. Make the run-up to a section heading the same on both pages. */
.ll-lead + .ll-section-title { margin-top: 40px; } /* collapses against the lead's 12px, so this is the gap, not an addition to it */
.ll-section-title { margin: 0 0 10px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.03em; }

/* Two team sections in a row shared one background and ran together. The second takes the mint
   band, so the page reads pale, mint, dark, footer. */
.ll-band { padding-top: 76px; padding-bottom: 76px; }
.ll-band-mint { background: var(--mint); }
/* A pale band straight after the intro shares the intro's ground, so its top padding read as an
   empty 116px hole under the paragraph. 40px from the lead plus 24px here gives 64px, the same
   run-up .ll-team takes to a new section anywhere else. The mint band keeps its full padding,
   because its colour change marks the break. */
.ll-lead-long + .ll-band:not(.ll-band-mint) { padding-top: 24px; }
.ll-band .ll-team { margin-top: 0 !important; }
.ll-team-title { margin: 0 0 18px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.025em; }

/* ---------- Our Founder ----------
   Photo left, bio right; stacked on a phone with the photo cropped to her head and shoulders so
   the bio starts inside the first screen. Bio paragraphs share one left edge: margin-inline 0
   keeps the constrained layout from centring a short one (the Sep 24 trap). */
.ll-founder { gap: clamp(32px, 5vw, 72px); align-items: flex-start; margin-bottom: 0; }
.ll-founder-img { margin: 0; }
.ll-founder-img img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 18px; }
.ll-founder-bio > * { margin-block-start: 0; margin-inline: 0 !important; }
.ll-founder-name { margin: 0 0 6px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; }
.ll-founder-role { margin: 0 0 28px !important; font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-text); }
.ll-founder-bio p:not([class*="ll-"]) { margin: 0 0 20px; font-size: 18px; line-height: 1.6; max-width: 62ch; }
.ll-founder-bio p:not([class*="ll-"]):last-child { margin-bottom: 0; }
.ll-founder-bio a { color: inherit; text-decoration-color: var(--sage); text-underline-offset: 3px; }
.ll-founder + .ll-strip { margin-top: 96px !important; }

/* ---------- Phone spacing ----------
   Section padding was set for desktop and never scaled down, so on a 390px screen a change of
   ground cost up to 160px of empty space, a fifth of the screen. This block sits at the end of
   the file on purpose: the section rules above come after the 640px block in the Responsive
   section and would win against it at equal specificity. Roughly 60% of desktop throughout. */
@media (max-width: 640px) {
	.ll-page { padding-top: 44px; padding-bottom: 72px; }
	.ll-page-title { margin-bottom: 28px; }
	.ll-band { padding-top: 52px; padding-bottom: 48px; }
	.ll-lead-long + .ll-band:not(.ll-band-mint) { padding-top: 16px; }
	.ll-lead-long { margin-bottom: 32px !important; }
	.ll-strip { padding-top: 56px; padding-bottom: 60px; }
	.ll-strip-dark { padding-top: 52px; padding-bottom: 56px; }
	.ll-cases { padding-top: 60px; padding-bottom: 60px; }
	.ll-cta { margin-top: 56px !important; padding-top: 52px; padding-bottom: 52px; }
	.ll-book { padding-bottom: 40px; margin-bottom: 40px; }
	.ll-founder-img img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
	.ll-founder + .ll-strip { margin-top: 60px !important; }
}