/* babylock.lt – home page */

.bl-home { --bl-fabric: #2a3446; --bl-sec: clamp(64px, 8vw, 120px); }
.bl-home a { color: var(--bl-ink); }
.bl-home h2 {
	margin: 0; font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; line-height: 1.08;
	letter-spacing: -.022em; color: var(--bl-ink);
}
.bl-home h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
:where(.bl-home) p { margin: 0; }
.bl-front #content.bl-home { width: 100%; float: none; margin: 0; }
.bl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(28px, 3vw, 44px); }

/* ---------- Hero ---------- */
/* A full-width stage pinned under the header: the page scroll runs the Euphoria footage frame by frame
   (kadrai.js draws it on the canvas and adds .is-reel). Without the script, with reduced motion or Save-Data
   the first frame stays as a photo and two stills follow below it. */
.bl-hero { --bl-stick: 104px; --bl-pin: calc(100vh - var(--bl-stick)); --bl-run: 340vh; }
@supports (height: 100svh) { .bl-hero { --bl-pin: calc(100svh - var(--bl-stick)); --bl-run: 340svh; } }
.bl-hero__pin {
	position: relative; height: var(--bl-pin); min-height: 480px; overflow: hidden; contain: layout paint;
	background: var(--bl-hero-bg, #eaeef2);
}
.bl-hero__poster img, .bl-hero__canvas {
	position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%;
}
.bl-hero__poster img { object-fit: cover; object-position: 62% 50%; }
.bl-hero__canvas { display: none; }

.bl-hero__in {
	position: relative; z-index: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); height: 100%; box-sizing: border-box;
	padding-block: clamp(24px, 5vh, 64px) clamp(40px, 7vh, 72px);
}
.bl-hero__in > * { grid-area: 1 / 1; min-width: 0; }
.bl-hero__intro { position: relative; align-self: center; max-width: min(34rem, 42%); }
.bl-hero__h {
	margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 500; line-height: 1.04;
	letter-spacing: -.028em; color: var(--bl-ink); text-wrap: balance; hyphens: manual;
}
.bl-hero__lead { margin-top: 22px !important; font-size: 18px; line-height: 1.55; color: var(--bl-ink-2); }
.bl-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px !important; }
.bl-hero__cta .bl-btn--line { background: rgba(255, 255, 255, .55); }

/* Captions: solid cards so the text never sits on moving footage */
.bl-hero__cap {
	display: none; align-self: end; justify-self: start; max-width: 34ch; padding: 18px 22px 20px;
	border-left: 2px solid var(--bl-gold); border-radius: 2px; background: var(--bl-ink); color: #fff;
}
.bl-hero__cap-t { font-size: 20px; font-weight: 500; line-height: 1.3; color: #fff; }
.bl-hero__cap-d { margin-top: 6px !important; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
.bl-hero .bl-hero__cap-a {
	display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 16px; color: #fff;
	text-decoration: underline; text-decoration-color: var(--bl-gold); text-underline-offset: .24em; text-decoration-thickness: 1px;
}
.bl-hero .bl-hero__skip {
	display: none; align-self: end; justify-self: end; align-items: center; min-height: 44px; padding: 0 16px;
	border-radius: 2px; background: rgba(255, 255, 255, .92); font-size: 15px; color: var(--bl-ink); text-decoration: none;
}
.bl-hero .bl-hero__skip:hover { text-decoration: underline; text-decoration-color: var(--bl-gold); text-underline-offset: .24em; }

/* Progress: a stitch line that feeds in from the left as the footage runs */
.bl-hero__stitch { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: none; height: 3px; overflow: hidden; }
.bl-hero__stitch > span {
	display: block; height: 100%; transform: translateX(-100%); will-change: transform;
	background: repeating-linear-gradient(90deg, var(--bl-gold) 0 12px, transparent 12px 17px);
}

/* Running (kadrai.js) */
.bl-hero.is-reel .bl-hero__track { height: calc(var(--bl-pin) + var(--bl-run)); }
.bl-hero.is-reel .bl-hero__pin { position: sticky; top: var(--bl-stick); }
.bl-hero.is-reel .bl-hero__canvas, .bl-hero.is-reel .bl-hero__stitch { display: block; }
.bl-hero.is-reel .bl-hero__cap { display: block; visibility: hidden; opacity: 0; }
/* The skip link stays reachable by keyboard while it is faded out */
.bl-hero.is-reel .bl-hero__skip { display: inline-flex; opacity: 0; pointer-events: none; }
.bl-hero.is-reel .bl-hero__skip:focus-visible { opacity: 1 !important; transform: none !important; pointer-events: auto; }
.bl-hero.is-reel .bl-hero__stills { display: none; }
.bl-hero__canvas { opacity: 0; }
.bl-hero.is-canvas .bl-hero__canvas { opacity: 1; }
.bl-hero.is-canvas .bl-hero__poster { visibility: hidden; }

/* Still version: the two stills under the first frame */
.bl-hero__stills {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(16px, 2vw, 28px);
	margin-block: 0; padding-block: clamp(32px, 4vw, 56px) 0; list-style: none;
}
.bl-hero__still { margin: 0; }
.bl-hero__still img { display: block; width: 100%; height: auto; border-radius: var(--bl-r); }
.bl-hero__still .bl-hero__cap-t { margin-top: 14px !important; font-size: 19px; color: var(--bl-ink); }
.bl-hero__still .bl-hero__cap-d { font-size: 16px; color: var(--bl-ink-2); }
.bl-hero__end { display: block; height: 0; outline: 0; }

/* Narrow landscape windows: the machine reaches the copy, so the set behind it is extended under the text */
@media (max-aspect-ratio: 7/5) and (min-aspect-ratio: 3/4) {
	.bl-hero__intro::before {
		content: ""; position: absolute; z-index: -1; top: -100vh; bottom: -100vh; left: -100vw; right: -12%;
		background: linear-gradient(90deg, var(--bl-hero-bg, #eaeef2) 82%, transparent);
	}
}
@media (max-width: 1199px) { .bl-hero { --bl-run: 300vh; } @supports (height: 100svh) { .bl-hero { --bl-run: 300svh; } } }

/* Portrait screens use the upright frames: copy at the top over the set, the machine below it */
@media (max-aspect-ratio: 3/4) {
	.bl-hero__poster img { object-position: 50% 50%; }
	.bl-hero__in { padding-block: clamp(20px, 4vh, 40px) 28px; }
	.bl-hero__intro { align-self: start; max-width: 36rem; }
	.bl-hero__h { font-size: clamp(30px, 7.4vw, 46px); }
	.bl-hero__lead { margin-top: 14px !important; font-size: 17px; line-height: 1.5; }
	.bl-hero__cta { margin-top: 20px !important; }
	.bl-hero__cap { justify-self: stretch; max-width: none; margin-bottom: 60px; padding: 16px 18px 18px; }
	.bl-hero__cap-t { font-size: 18px; }
	.bl-hero__cap-d { font-size: 16px; }
}
@media (max-width: 599px) {
	.bl-hero { --bl-run: 260vh; }
	@supports (height: 100svh) { .bl-hero { --bl-run: 260svh; } }
	.bl-hero__lead { font-size: 16px; }
	.bl-hero__cta .bl-btn { flex: 1 1 auto; min-height: 46px; padding: 0 16px; }
	.bl-hero__stills { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Machines ---------- */
.bl-machines { padding: var(--bl-sec) 0; border-top: 1px solid var(--bl-line); }
.bl-machines__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px) clamp(16px, 2vw, 28px);
	margin: 0; padding: 0; list-style: none;
}
.bl-machine { margin: 0; }
.bl-machine a { display: block; text-decoration: none; }
.bl-machine__img {
	display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--bl-r); background: var(--bl-tile);
}
.bl-machine__img img {
	display: block; width: 100%; height: 100%; padding: 7%; box-sizing: border-box; object-fit: contain;
	mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.bl-machine a:hover .bl-machine__img img { transform: scale(1.035); }
.bl-machine__name { display: block; margin-top: 16px; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--bl-ink); }
.bl-machine a:hover .bl-machine__name { text-decoration: underline; text-decoration-color: var(--bl-gold); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.bl-machine__price { display: block; margin-top: 4px; font-size: 16px; color: var(--bl-ink-2); }
.bl-machine__price del { opacity: .7; margin-right: 6px; }
.bl-machine__price ins { text-decoration: none; color: var(--bl-ink); }

/* ---------- Euphoria ---------- */
.bl-eu { padding: var(--bl-sec) 0; background: var(--bl-band); }
.bl-eu__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.bl-eu__img img { display: block; width: 100%; max-width: 720px; height: auto; margin-left: -2%; mix-blend-mode: multiply; }
.bl-eu h2 { font-size: clamp(34px, 4vw, 58px); letter-spacing: -.03em; }
.bl-eu__lead { margin-top: 16px !important; font-size: 19px; line-height: 1.5; color: var(--bl-ink-2); }
.bl-eu__list { margin: 32px 0 36px; padding: 0; }
.bl-eu__list > div { padding: 16px 0; border-top: 1px solid var(--bl-line-2); }
.bl-eu__list > div:last-child { border-bottom: 1px solid var(--bl-line-2); }
.bl-eu__list dt { font-size: 17px; font-weight: 500; color: var(--bl-ink); }
.bl-eu__list dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--bl-ink-2); }

/* ---------- The Baby Lock stitch ---------- */
.bl-seam { padding: var(--bl-sec) 0; }
.bl-seam__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.bl-seam p:first-child { max-width: 36em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--bl-ink); }
.bl-seam p + p { margin-top: 24px; font-size: 17px; }

/* ---------- Accessories ---------- */
.bl-acc { padding: 0 0 var(--bl-sec); }
.bl-acc .bl-head { padding-top: var(--bl-sec); border-top: 1px solid var(--bl-line); }
.bl-acc__grid {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto;
	gap: clamp(32px, 3vw, 48px) clamp(24px, 3vw, 48px);
}
.bl-acc__item--organ { grid-row: 1 / span 2; }
.bl-acc__item--fujix { align-self: start; }
.bl-acc__item--kai { align-self: end; }
.bl-acc__item--fujix, .bl-acc__item--kai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.bl-acc__img { display: block; overflow: hidden; border-radius: var(--bl-r); background: var(--bl-tile); }
.bl-acc__img img {
	display: block; width: 100%; height: 100%; padding: 6%; box-sizing: border-box; object-fit: contain;
	mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.bl-acc__item--organ .bl-acc__img { aspect-ratio: 5 / 4; }
.bl-acc__item--fujix .bl-acc__img, .bl-acc__item--kai .bl-acc__img { aspect-ratio: 1; }
.bl-acc__item:hover .bl-acc__img img { transform: scale(1.03); }
.bl-acc__text { padding-top: 4px; }
.bl-acc__item--organ .bl-acc__text { padding-top: 20px; max-width: 32em; }
.bl-acc__text h3 a { text-decoration: none; }
.bl-acc__text h3 a:hover { text-decoration: underline; text-decoration-color: var(--bl-gold); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.bl-acc__text p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--bl-ink-2); }
.bl-acc__text .bl-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }

/* ---------- Help ---------- */
.bl-help { padding: clamp(56px, 6vw, 96px) 0; background: var(--bl-band); }
.bl-help__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.bl-help__in > div:first-child p { margin-top: 16px; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--bl-ink-2); }
.bl-help__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.bl-help__tel {
	flex-basis: 100%; font-size: clamp(30px, 3vw, 42px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2;
	text-decoration: underline; text-decoration-color: var(--bl-gold); text-decoration-thickness: 2px; text-underline-offset: .18em;
	font-variant-numeric: tabular-nums;
}
.bl-help__tel:hover { text-decoration-color: currentColor; }
.bl-help__hours { font-size: 15px; color: var(--bl-ink-2); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1099px) {
	.bl-machines__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
	.bl-eu__in, .bl-seam__in, .bl-help__in { grid-template-columns: minmax(0, 1fr); }
	.bl-eu__img img { margin: 0 auto; max-width: 560px; }
	.bl-acc__grid { grid-template-columns: minmax(0, 1fr); }
	.bl-acc__item--organ { grid-row: auto; }
}
@media (max-width: 599px) {
	.bl-machines__grid { gap: 28px 12px; }
	.bl-machine__name { margin-top: 10px; font-size: 15px; }
	.bl-machine__price { font-size: 14px; }
	.bl-acc__item--fujix, .bl-acc__item--kai { gap: 16px; }
	.bl-help__cta .bl-btn { flex: 1 1 100%; }
}