/*
 * DreamFast Studio — page sections: hero, statement, services, method,
 * AI, process, about, review, FAQ, contact.
 */

/* ---------- Hero ---------- */
/* Full-bleed section: background, grid and circles span the viewport;
   only the content (.portfolio-hero-inner) is constrained to the shell. */
.portfolio-hero {
	min-height: calc(100svh - 84px);
	border-bottom: 1px solid rgb(49, 52, 46);
	display: flex;
	isolation: isolate;
	position: relative;
	overflow: hidden;
}
.portfolio-hero-inner {
	width: var(--shell);
	flex: 0 0 var(--shell);
	margin-inline: auto;
	flex-direction: column;
	padding-block: 72px 36px;
	display: flex;
}
.portfolio-hero-grid {
	z-index: -2;
	background-image:
		linear-gradient(rgba(201, 255, 69, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 255, 69, 0.055) 1px, transparent 1px);
	background-size: 72px 72px;
	position: absolute;
	inset: 0;
	mask-image: radial-gradient(circle at 65% 45%, #000, transparent 76%);
}
.portfolio-hero::before {
	content: "";
	z-index: -1;
	border: 1px solid rgba(201, 255, 69, 0.16);
	border-radius: 50%;
	width: 630px;
	height: 630px;
	position: absolute;
	top: -190px;
	right: -230px;
	box-shadow: rgba(201, 255, 69, 0.02) 0 0 0 70px, rgba(201, 255, 69, 0.01) 0 0 0 150px;
}
.portfolio-hero-index {
	z-index: -1;
	color: rgba(201, 255, 69, 0.02);
	letter-spacing: -0.06em;
	direction: ltr;
	white-space: nowrap;
	font-size: clamp(180px, 26vw, 380px);
	font-weight: 900;
	line-height: 0.8;
	position: absolute;
	bottom: -45px;
	left: 0;
	right: 0;
}
.portfolio-asterisk {
	color: var(--lime);
	font-size: 25px;
	animation: portfolioPulse 4s ease-in-out infinite;
	position: absolute;
	top: 12%;
	left: 51.5%;
}
@keyframes portfolioPulse {
	0%, 100% { opacity: 0.6; transform: rotate(0deg) scale(1); }
	50% { opacity: 1; transform: rotate(90deg) scale(1.25); }
}
.portfolio-hero-art {
	z-index: -1;
	width: 250px;
	height: 250px;
	opacity: 0.45;
	position: absolute;
	top: 18%;
	left: 4%;
	transform: rotate(-7deg);
}
.portfolio-hero-art > span {
	border: 1px solid rgba(202, 255, 61, 0.18);
	border-radius: 50%;
	position: absolute;
	inset: 0;
}
.portfolio-hero-art > span:nth-child(2) {
	border-color: rgba(202, 255, 61, 0.1);
	inset: 34px;
}
.portfolio-hero-art > span:nth-child(3) {
	border-color: rgba(202, 255, 61, 0.28);
	inset: 72px;
}
.portfolio-hero-art > span:nth-child(4) {
	border-color: rgba(202, 255, 61, 0.12);
	inset: 104px;
}
.portfolio-hero-art > i {
	display: none;
}
.portfolio-hero-top {
	grid-template-columns: 1.42fr 0.58fr;
	align-items: end;
	gap: 76px;
	display: grid;
}
.portfolio-hero-top .hero-kicker {
	color: rgb(140, 146, 137);
	direction: ltr;
	grid-column: 1 / -1;
	justify-content: flex-end;
	font-size: 11px;
	font-weight: 600;
}
.portfolio-hero-top .hero-kicker i {
	width: 7px;
	height: 7px;
}
.portfolio-hero h1 {
	letter-spacing: -0.035em;
	margin: 0;
	font-size: clamp(78px, 10.2vw, 124px);
	font-weight: 600;
	line-height: 0.9;
	z-index: 1;
	text-shadow: rgba(0, 0, 0, 0.3) 0 3px 30px;
	position: relative;
}
.portfolio-hero h1 em {
	color: var(--lime);
	font-style: normal;
	text-shadow: rgba(201, 255, 69, 0.11) 0 0 55px;
}
/* English headline is longer — cap it a little smaller than the Hebrew. */
html[dir="ltr"] .portfolio-hero h1 {
	font-size: clamp(78px, 10.2vw, 104px);
}
.portfolio-hero-top > div {
	z-index: 2;
	position: relative;
}
.portfolio-hero-top > div p {
	color: rgb(206, 211, 202);
	font-size: 20px;
	line-height: 1.75;
}
/* Hero CTAs: stacked on a shared start edge (right in RTL),
   each button keeping its natural content width — like the source design. */
.portfolio-hero .hero-buttons {
	margin-top: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.portfolio-hero .hero-buttons .wp-block-button,
.portfolio-hero .hero-buttons .wp-block-button__link {
	width: auto;
}
/* Legacy hero variant — archived backup pages only: narrow text column
   (stacked CTAs) and the original bottom-left DF ghost. */
.hero-legacy-v1 .portfolio-hero-top {
	grid-template-columns: 1.42fr 0.58fr;
}
.hero-legacy-v1 .portfolio-hero-index {
	font-size: 410px;
	letter-spacing: -0.1em;
	text-align: start;
	right: auto;
	left: 0;
	bottom: -50px;
}
.hero-legacy-v1 .scroll-note {
	margin-top: auto;
}

/* Legacy signal strip — kept for the archived home backup page only. */
.portfolio-signal {
	color: rgb(216, 220, 211);
	letter-spacing: 0.12em;
	direction: ltr;
	border-block: 1px solid rgb(43, 47, 41);
	align-items: center;
	gap: 14px;
	margin-top: 55px;
	padding: 18px 0;
	font: 700 9px / 1 var(--font-accent);
	display: flex;
}
.portfolio-signal > i {
	color: rgb(99, 107, 93);
	font-style: normal;
}
.portfolio-signal b {
	color: rgb(190, 197, 182);
	align-items: center;
	gap: 9px;
	margin-left: auto;
	margin-right: 16px;
	direction: rtl;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	display: flex;
}
.portfolio-signal b i {
	background: var(--lime);
	border-radius: 50%;
	width: 6px;
	height: 6px;
	box-shadow: rgba(202, 255, 61, 0.08) 0 0 0 5px;
	font-style: normal;
}

/* 4-step process strip — fills the lower hero area, quiet and editorial. */
.hero-steps {
	opacity: 0.86;
	grid-template-columns: repeat(4, 1fr);
	margin-top: auto;
	padding-top: 46px;
	display: grid;
}
.hero-step {
	border-top: 1px solid rgb(43, 47, 41);
	padding: 18px 22px 6px;
	position: relative;
}
.hero-step:first-child {
	padding-inline-start: 0;
}
.hero-step:last-child {
	padding-inline-end: 0;
}
.hero-step + .hero-step::before {
	content: "";
	background: rgb(43, 47, 41);
	width: 1px;
	position: absolute;
	top: 18px;
	bottom: 6px;
	inset-inline-start: 0;
}
.step-title {
	margin: 0 0 2px;
	font-size: 18px;
	font-weight: 700;
	color: rgb(226, 229, 221);
}
.step-title span {
	color: var(--lime);
	letter-spacing: 0.04em;
	direction: ltr;
	font: 800 18px / 1 var(--font-accent);
}
.step-line {
	margin: 0;
	color: rgb(191, 195, 188);
	font-size: 16px;
	line-height: 1.5;
}

/* Bottom hero navigation: label on the right, arrow dead-center,
   SCROLL TO EXPLORE on the left. */
.scroll-note {
	color: rgb(157, 161, 151);
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: 12px;
	padding-top: 24px;
	font-size: 11px;
	display: grid;
}
.scroll-note span {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}
.scroll-note i {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
}
.scroll-note b {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}
.scroll-note i {
	font-size: 20px;
	font-style: normal;
}
.scroll-note b {
	color: rgb(126, 132, 123);
	letter-spacing: 0.18em;
	direction: ltr;
	font-family: var(--font-accent);
	font-size: 8px;
}

/* ---------- Statement ---------- */
.portfolio-position {
	grid-template-columns: 1.4fr 0.6fr;
	align-items: end;
	gap: 64px;
	margin-block: 72px 0;
	padding: 96px 64px;
	display: grid;
	background: rgb(20, 23, 18);
	border: 1px solid rgb(45, 48, 43);
	border-radius: 32px;
	position: relative;
}
.giant-statement {
	letter-spacing: -0.035em;
	margin: 0;
	font-size: clamp(36px, 4.2vw, 60px);
	font-weight: 700;
	line-height: 1.15;
}
.giant-statement em {
	color: var(--lime);
	font-style: normal;
}
.portfolio-position .statement-side {
	align-self: center;
}
.statement-side > p {
	color: rgb(206, 211, 202);
	font-size: 18px;
	line-height: 1.8;
}
.statement-side > p.statement-principles {
	color: var(--lime);
	margin: 18px 0 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* ---------- Services ---------- */
.portfolio-services {
	border-top: 1px solid rgb(49, 52, 46);
	grid-template-columns: 85px 1fr;
	gap: 50px;
	padding-block: 140px;
	display: grid;
}
.portfolio-services .section-head {
	margin-bottom: 70px;
}
.editorial-services {
	border-top: 1px solid rgb(52, 55, 48);
}
.editorial-services article {
	border-bottom: 1px solid rgb(52, 55, 48);
	grid-template-columns: 80px 0.75fr 1fr 55px;
	align-items: center;
	gap: 25px;
	min-height: 155px;
	display: grid;
	transition: padding 0.25s, background 0.25s;
	position: relative;
}
.editorial-services article::before {
	content: "";
	background: var(--lime);
	width: 0;
	transition: width 0.25s;
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
}
.editorial-services article:hover {
	color: rgb(17, 17, 17);
	background: var(--lime);
	padding-inline: 22px;
}
.editorial-services article:hover::before {
	width: 5px;
}
.editorial-services article:hover p,
.editorial-services article:hover > span {
	color: rgb(56, 66, 38);
}
.editorial-services article:hover .svc-link,
.editorial-services article:hover .svc-link a {
	color: rgb(17, 17, 17);
	border-color: rgb(17, 17, 17);
}
.editorial-services article > span {
	color: var(--lime);
	font-size: 11px;
}
.editorial-services h3 {
	margin: 0;
	font-size: 27px;
}
.editorial-services p {
	color: rgb(157, 162, 152);
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
}

/* ---------- Services cards (home) ---------- */
.services-cards-section {
	border-top: 1px solid rgb(42, 45, 40);
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 72px;
	padding-block: 76px 90px;
}
.services-cards-head {
	grid-template-columns: 1.25fr 0.75fr;
	align-items: start;
	gap: 60px;
	margin-bottom: 45px;
	display: grid;
}
.services-cards-section .section-head {
	margin-bottom: 0;
}
.services-cards-head h2 {
	margin-block: 0;
	line-height: 1.12;
	padding-top: 0.04em;
}
.services-cards-head h2 em {
	color: var(--lime);
	font-style: normal;
}
.services-head-side {
	color: rgb(206, 211, 202);
	max-width: 430px;
	margin: 42px 0 0;
	font-size: 19px;
	line-height: 1.8;
	justify-self: end;
	align-self: start;
}
.services-cards {
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	display: grid;
}
.svc-card {
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 28px;
	flex-direction: column;
	min-height: 360px;
	padding: 32px 30px 28px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.25s, transform 0.25s;
	display: flex;
}
.svc-card:hover {
	border-color: rgba(201, 255, 69, 0.5);
	transform: translateY(-4px);
}
.svc-card-top {
	justify-content: space-between;
	align-items: center;
	margin-bottom: auto;
	display: flex;
}
.svc-card-num {
	color: var(--lime);
	font-family: var(--font-accent);
	font-size: 14px;
	font-weight: 800;
}
.svc-card-tag {
	color: rgb(146, 152, 141);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	direction: ltr;
	font-family: var(--font-accent);
	font-size: 10px;
}
.svc-card-body h3 {
	color: #fff;
	letter-spacing: -0.02em;
	margin: 36px 0 14px;
	font-size: 26px;
}
.svc-card-body p {
	color: rgb(200, 205, 195);
	min-height: 5.25em;
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
}
.svc-card-link {
	color: #fff;
	border-top: 1px solid rgb(45, 48, 43);
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding-top: 22px;
	font-size: 14px;
	font-weight: 600;
	display: flex;
}
.svc-card-link i {
	color: var(--lime);
	font-style: normal;
	transition: transform 0.25s;
}
.svc-card:hover .svc-card-link i {
	transform: translateX(-5px);
}
.services-cards-more {
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin-top: 54px;
	display: flex;
}
.services-cards-more p {
	color: rgb(206, 211, 202);
	margin: 0;
	font-size: 16px;
}

/* ---------- Method (lime full-bleed) ---------- */
.portfolio-method {
	background: rgb(28, 31, 24);
	color: #fff;
	grid-template-columns: 1fr 1.1fr;
	align-items: start;
	gap: 70px;
	width: 100%;
	margin-block: 0;
	padding-block: 68px;
	padding-inline: max(32px, 50vw - 660px);
	display: grid;
}
.method-head h2 {
	letter-spacing: -0.05em;
	margin: 0;
	font-size: clamp(48px, 5.2vw, 78px);
	font-weight: 700;
	line-height: 1.04;
}
.method-sub {
	color: rgb(200, 205, 195);
	max-width: 520px;
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.75;
}
.method-signals ol {
	counter-reset: none;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 0;
	padding: 0;
	list-style: none;
}
.method-signals li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	align-items: center;
	gap: 20px;
	padding: 12px 0;
	font-size: 17px;
	font-weight: 600;
	display: flex;
}
.method-signals .sig-num {
	color: var(--lime);
	font-family: var(--font-accent);
	font-size: 12px;
	font-weight: 800;
}
.method-signals .sig-text {
	flex: 1;
}
.method-signals .sig-arrow {
	color: var(--lime);
	font-size: 20px;
	transition: transform 0.25s;
}
.method-signals li:hover .sig-arrow {
	transform: translateX(-5px);
}
.method-note {
	margin: 22px 0 0;
	font-size: 16px;
	font-weight: 700;
}
.method-note a {
	color: var(--lime);
	align-items: center;
	gap: 10px;
	display: inline-flex;
}
.method-note a span {
	transition: transform 0.25s;
}
.method-note a:hover span {
	transform: translateX(-5px);
}

/* ---------- AI section wrapper (open full-bleed) ---------- */
.portfolio-ai {
	width: 100%;
	border-top: 1px solid rgb(49, 52, 46);
	border-bottom: 1px solid rgb(49, 52, 46);
	padding-block: 140px;
	padding-inline: max(32px, 50vw - 660px);
	position: relative;
	overflow: hidden;
}

/* ---------- Process ---------- */
.portfolio-process {
	grid-template-columns: 0.8fr 1.2fr;
	gap: 110px;
	padding-block: 140px 100px;
	display: grid;
}
.process-title-sticky {
	align-self: start;
	position: sticky;
	top: 114px;
}
.process-title-sticky h2 {
	letter-spacing: -0.055em;
	font-size: clamp(46px, 5vw, 70px);
	line-height: 0.98;
}
.process-title-sticky p {
	color: rgb(184, 189, 179);
	max-width: 450px;
	line-height: 1.75;
}
.process-list-editorial {
	border-top: 1px solid rgb(52, 55, 48);
}
.process-list-editorial article {
	border-bottom: 1px solid rgb(52, 55, 48);
	grid-template-columns: 55px 1fr 40px;
	align-items: center;
	gap: 20px;
	min-height: 100px;
	display: grid;
}
.process-list-editorial span {
	color: var(--lime);
	font-size: 12px;
}
.process-list-editorial h3 {
	color: #fff;
	margin-bottom: 6px;
	font-size: 23px;
}
.process-list-editorial p {
	color: rgb(200, 205, 195);
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}
.process-list-editorial i {
	color: rgb(190, 195, 185);
	font-style: normal;
}
.process-list-editorial .process-note {
	color: #fff;
	margin: 18px 0 0;
	font-size: 16px;
	font-weight: 700;
}

/* ---------- About ---------- */
.portfolio-about {
	color: rgb(16, 17, 15);
	background: rgb(240, 239, 232);
	grid-template-columns: 1fr 1fr;
	min-height: 730px;
	display: grid;
}
.portfolio-about-visual {
	color: #fff;
	background: linear-gradient(145deg, rgb(48, 56, 45), rgb(83, 97, 73));
	background-size: cover;
	background-position: center;
	justify-content: space-between;
	align-items: flex-end;
	min-height: 730px;
	padding: 40px;
	display: flex;
	isolation: isolate;
	position: relative;
	overflow: hidden;
}
.portfolio-about-visual.has-image {
	background-color: rgb(21, 23, 20);
}
.portfolio-about-visual::before {
	content: "";
	z-index: 0;
	background: linear-gradient(transparent 52%, rgba(7, 9, 7, 0.46));
	position: absolute;
	inset: 0;
}
.portfolio-about-visual::after {
	content: "✦";
	z-index: 2;
	color: var(--lime);
	font-size: 28px;
	position: absolute;
	top: 36px;
	right: 42px;
}
.portfolio-about-visual > span {
	z-index: 2;
	font-family: var(--font-accent);
	font-size: 240px;
	font-weight: 800;
	line-height: 0.72;
	position: relative;
}
.portfolio-about-visual small {
	z-index: 2;
	letter-spacing: 0.15em;
	direction: ltr;
	backdrop-filter: blur(9px);
	background: rgba(9, 11, 9, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 9px 11px;
	font-size: 9px;
	position: relative;
}
.portfolio-about-copy {
	background: rgb(241, 242, 235);
	padding: 100px 85px 100px max(45px, 50vw - 640px);
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	display: flex;
}
.portfolio-about-copy h2 {
	letter-spacing: -0.06em;
	font-size: clamp(50px, 5.5vw, 82px);
	line-height: 0.95;
}
.portfolio-about-copy > p {
	color: rgb(95, 101, 90);
	font-size: 16px;
	line-height: 1.8;
}
.about-facts {
	border-top: 1px solid rgb(202, 203, 197);
	border-bottom: 1px solid rgb(202, 203, 197);
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
	margin: 35px 0;
	display: grid;
}
.about-facts span {
	padding: 17px 0;
	font-size: 11px;
}
.about-facts b {
	color: rgb(122, 129, 118);
	margin-bottom: 7px;
	font-size: 9px;
	display: block;
}

/* ---------- About studio (dark full-bleed) ---------- */
.about-studio {
	width: 100%;
	padding-block: 110px 100px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.about-studio::before {
	content: "";
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(201, 255, 69, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 255, 69, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(circle at 70% 12%, #000, transparent 62%);
	position: absolute;
	inset: 0;
}

/* Same lime-grid texture on the pricing & work pages (upper area fades out). */
body.dfs-page-grid .site-main {
	position: relative;
	isolation: isolate;
}
body.dfs-page-grid .site-main::before {
	content: "";
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(201, 255, 69, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(201, 255, 69, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(120% 55% at 72% 3%, #000, transparent 72%);
	position: absolute;
	inset: 0;
}
.about-studio h1 {
	letter-spacing: -0.05em;
	margin: 0;
	font-size: clamp(46px, 5.4vw, 78px);
	font-weight: 700;
	line-height: 1.06;
}
.about-studio h1 em {
	color: var(--lime);
	font-style: normal;
}
.about-studio-lead {
	color: rgb(206, 211, 202);
	max-width: 640px;
	margin: 30px 0 0;
	font-size: 19px;
	line-height: 1.8;
}
.about-principles {
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 64px;
	display: grid;
}
.about-principle {
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 24px;
	padding: 28px 26px 30px;
}
.about-principle .principle-num {
	color: var(--lime);
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 800;
}
.about-principle h2 {
	color: #fff;
	letter-spacing: -0.02em;
	margin: 22px 0 10px;
	font-size: 22px;
}
.about-principle p {
	color: rgb(200, 205, 195);
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
}
.about-studio-cta {
	margin: 64px 0 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}
.about-studio-cta a {
	color: var(--lime);
	align-items: center;
	gap: 10px;
	display: inline-flex;
}
.about-studio-cta a span {
	transition: transform 0.25s;
}
.about-studio-cta a:hover span {
	transform: translateX(-5px);
}
@media (width <= 1040px) {
	.about-principles { grid-template-columns: 1fr; }
}
@media (width <= 760px) {
	.about-studio { padding-block: 70px 70px; }
	.about-studio h1 { font-size: 40px; }
	.about-studio-cta { font-size: 20px; }
}

/* ---------- Review wrapper ---------- */
.portfolio-review {
	padding-block: 30px 100px;
}

/* ---------- FAQ ---------- */
.portfolio-faq {
	grid-template-columns: 0.65fr 1.35fr;
	gap: 100px;
	padding-block: 40px 10px;
	display: grid;
}
.portfolio-faq h2 {
	letter-spacing: -0.05em;
	font-size: 58px;
	line-height: 1;
}
.portfolio-faq > div:first-child {
	align-self: start;
	position: sticky;
	top: 114px;
}
.portfolio-faq > div:first-child p {
	color: rgb(142, 148, 138);
}

/* ---------- Contact ---------- */
.portfolio-contact {
	color: rgb(243, 244, 239);
	background: rgb(25, 27, 24);
	border-top: 1px solid rgb(44, 48, 42);
	padding-block: 90px 60px;
}
.portfolio-contact > .section-shell {
	grid-template-columns: 0.9fr 1.1fr;
	align-items: start;
	gap: 100px;
	display: grid;
}
.portfolio-contact-copy > span {
	color: var(--lime);
	letter-spacing: 0.02em;
	font-size: 15px;
	font-weight: 700;
}
.portfolio-contact-copy h2 {
	letter-spacing: -0.06em;
	margin: 27px 0;
	font-size: clamp(46px, 4.5vw, 60px);
	line-height: 0.95;
}
.portfolio-contact-copy h2 em {
	color: var(--lime);
	font-style: normal;
}
.portfolio-contact-copy p {
	color: rgb(206, 211, 202);
	max-width: 500px;
	font-size: 18px;
	line-height: 1.7;
}
.portfolio-contact-copy > a {
	color: var(--lime);
	direction: ltr;
	border-bottom: 1px solid;
	margin-top: 35px;
	font-size: 16px;
	display: inline-block;
}

/* ---------- Generic inner-page hero ---------- */
.page-hero {
	padding-block: 90px 60px;
	border-bottom: 1px solid rgb(40, 43, 39);
}
.page-hero h1 {
	letter-spacing: -0.035em;
	font-size: clamp(44px, 5.5vw, 76px);
	font-weight: 600;
	line-height: 1.05;
	margin: 0;
}
.page-hero .hero-buttons {
	margin-top: 34px;
}
.page-hero h1 em {
	color: var(--lime);
	font-style: normal;
}
.page-hero p {
	color: rgb(168, 173, 164);
	max-width: 620px;
	margin-top: 26px;
	font-size: 18px;
	line-height: 1.8;
}
.work-teasers {
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-block: 54px 44px;
	display: grid;
}
.work-teaser-card {
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 24px;
	flex-direction: column;
	gap: 46px;
	padding: 26px 26px 28px;
	display: flex;
}
.work-teaser-status {
	color: var(--lime);
	letter-spacing: 0.14em;
	direction: ltr;
	text-align: end;
	font-family: var(--font-accent);
	font-size: 10px;
	font-weight: 700;
}
.work-teaser-card h2 {
	color: #fff;
	letter-spacing: -0.02em;
	margin: 0;
	font-size: 24px;
}
@media (width <= 760px) {
	.work-teasers { grid-template-columns: 1fr; }
}

.page-content-shell {
	max-width: 860px;
	padding-block: 60px 120px;
}
.page-content-shell > * + * {
	margin-top: 1.1em;
}
.page-content-shell a {
	color: var(--lime);
	border-bottom: 1px solid rgba(202, 255, 61, 0.4);
}
.page-content-shell h2 {
	color: #fff;
	letter-spacing: -0.02em;
	margin-top: 1.9em;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.15;
}
.page-content-shell h3 {
	color: #fff;
	margin-top: 1.5em;
	font-size: 19px;
}
.page-content-shell p,
.page-content-shell li {
	color: rgb(192, 197, 187);
	font-size: 16px;
	line-height: 1.85;
}
.page-content-shell ul {
	padding-inline-start: 1.15em;
}
.page-content-shell li {
	margin-top: 0.4em;
}
/* Draft / needs-confirmation callout for legal templates. */
.legal-note {
	color: rgb(206, 211, 202);
	background: rgba(201, 255, 69, 0.05);
	border: 1px solid rgba(201, 255, 69, 0.28);
	border-radius: 16px;
	margin: 0 0 8px;
	padding: 18px 22px;
	font-size: 14px;
	line-height: 1.7;
}
.legal-note strong {
	color: var(--lime);
}
.legal-meta {
	color: rgb(140, 145, 136);
	margin-top: 2.4em;
	font-size: 13px;
}
.legal-confirm {
	color: rgb(190, 214, 140);
}

/* ---------- 404 ---------- */
.error-hero {
	min-height: 60vh;
	display: grid;
	place-content: center;
	text-align: center;
	padding-block: 100px;
}
.error-hero .portfolio-hero-index {
	position: static;
	font-size: clamp(120px, 20vw, 300px);
}

/* ---------- Responsive ---------- */
@media (width <= 1120px) {
	.portfolio-hero-art { opacity: 0.65; left: 2%; }
}
@media (width <= 1040px) {
	.portfolio-hero-top { grid-template-columns: 1fr; }
	.portfolio-hero h1 { font-size: 105px; }
	.portfolio-hero-top > div { max-width: 600px; }
	.portfolio-position,
	.portfolio-process,
	.portfolio-faq,
	.portfolio-contact > .section-shell {
		grid-template-columns: 1fr;
		gap: 60px;
	}
	.portfolio-services { grid-template-columns: 40px 1fr; }
	.services-cards-head { grid-template-columns: 1fr; gap: 30px; margin-bottom: 46px; }
	.services-head-side { justify-self: start; margin-bottom: 0; }
	.services-cards { grid-template-columns: 1fr; }
	.svc-card { min-height: auto; }
	.svc-card-body p { min-height: 0; }
	.svc-card-body h3 { margin-top: 38px; }
	.portfolio-method { grid-template-columns: 1fr; }
	.portfolio-about { grid-template-columns: 0.8fr 1.2fr; }
	.portfolio-about-copy { padding: 60px 35px; }
}
@media (width <= 760px) {
	.portfolio-hero { min-height: calc(100svh - 72px); }
	.portfolio-hero-inner { padding-block: 60px 30px; }
	.portfolio-hero h1 { font-size: 54px; }
	html[dir="ltr"] .portfolio-hero h1 { font-size: 46px; }
	.portfolio-hero-top { gap: 35px; }
	.portfolio-hero-index { font-size: 31.5vw; bottom: 0; left: -0.02em; right: auto; text-align: start; }
	.portfolio-asterisk { top: 23%; left: 10%; }
	.portfolio-hero-art { width: 170px; height: 170px; top: 24%; left: -45px; }
	.hero-steps { grid-template-columns: repeat(2, 1fr); padding-top: 30px; }
	.hero-step { padding: 14px 16px 4px; }
	.hero-step:nth-child(odd) { padding-inline-start: 0; }
	.hero-step:nth-child(3)::before { display: none; }
	.step-title { font-size: 14px; }
	.step-line { font-size: 11px; }
	.scroll-note b { display: none; }
	.portfolio-position { border-radius: 24px; padding: 52px 24px; }
	.giant-statement { font-size: 34px; }
	.portfolio-services { grid-template-columns: 1fr; padding-block: 90px; }
	.editorial-services article { grid-template-columns: 35px 1fr 40px; padding-block: 22px; }
	.editorial-services article p { grid-column: 2 / -1; }
	.portfolio-method { padding: 48px 22px; }
	.method-head h2 { font-size: 40px; }
	.method-signals li { font-size: 16px; padding: 16px 0; }
	.portfolio-ai, .portfolio-review { padding-block: 85px; }
	.portfolio-process { padding-block: 90px; }
	.process-title-sticky { position: static; }
	.portfolio-faq > div:first-child { position: static; }
	.portfolio-about { grid-template-columns: 1fr; }
	.portfolio-about-visual { min-height: 480px; }
	.portfolio-about-visual > span { font-size: 170px; }
	.portfolio-about-copy { padding: 70px 20px; }
	.portfolio-about-copy h2 { font-size: 53px; }
	.portfolio-faq { padding-block: 90px; }
	.portfolio-contact { padding-block: 85px; }
	.portfolio-contact-copy h2 { font-size: 40px; }
	.portfolio-faq h2 { font-size: 38px; }
	.process-title-sticky h2 { font-size: 40px; }
}

/* ---------- Anchor landing: aim at the section's inner content, not the
   wrapper — offsets subtract each section's top padding so the divider and
   padding of the target (and the previous section) stay hidden under the
   sticky header, leaving a clean 20px gap above the content. ---------- */
#services,
#process,
#audit,
#contact {
	scroll-margin-top: 84px;
}
@media (width <= 760px) {
	#services,
	#process,
	#audit,
	#contact {
		scroll-margin-top: 72px;
	}
}

/* ---------- LTR (English) direction adjustments ---------- */
html[dir="ltr"] .svc-card:hover .svc-card-link i,
html[dir="ltr"] .method-note a:hover span,
html[dir="ltr"] .about-studio-cta a:hover span,
html[dir="ltr"] .method-signals li:hover .sig-arrow {
	transform: translateX(5px);
}