/*!
 * Strategically Yours — Home template only.
 */

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
/*
 * Capped, not 100vh: the content is bottom-aligned, so on a tall screen the
 * whole extra height piled up as dead space between the header and the title.
 */
#hero {
	position: relative;
	min-height: min(100vh, 760px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: calc(var(--header-height) + 50px) 80px;
	overflow: hidden;
}


.hero-content {
	position: relative;
	z-index: 1;
	max-width: 900px;
}


.hero-name {
	font-family: var(--font-display);
	font-size: clamp(30px, 3.9vw, 54px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -1.4px;
	color: var(--teal);
	opacity: 0;
	animation: fadeUp 0.8s ease forwards 0.5s;
}

/* Each field is one line. Blocks, so a long one cannot pull the next up. */
.hero-name .accent,
.hero-name .soft {
	display: block;
}

.hero-name .accent {
	color: var(--coral);
}

.hero-name .soft {
	color: var(--lavender);
}

.hero-lead {
	margin-top: 24px;
	max-width: 620px;
	font-family: var(--font-display);
	font-size: clamp(18px, 1.9vw, 24px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.4px;
	color: var(--teal);
	opacity: 0;
	animation: fadeUp 0.8s ease forwards 0.65s;
}

.hero-tagline {
	margin-top: 28px;
	max-width: 37em;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--text);
	opacity: 0;
	animation: fadeUp 0.8s ease forwards 0.8s;
}

.hero-tagline p + p {
	margin-top: 16px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
	opacity: 0;
	animation: fadeUp 0.8s ease forwards 0.9s;
}

/* Refs sit beside the scroll cue, not under it. */




.hero-scroll {
	position: absolute;
	right: var(--gutter);
	bottom: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0;
	animation: fadeIn 1s ease forwards 1.4s;
}

.hero-scroll span {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--teal);
	writing-mode: vertical-rl;
}

.scroll-line {
	width: 1px;
	height: 60px;
	background: linear-gradient(to bottom, var(--teal), transparent);
	animation: scrollPulse 2s ease infinite;
}

@media (max-width: 900px) {
	#hero {
		min-height: 0;
		padding-block: calc(var(--header-height) + 64px) 64px;
	}

	/* Stacked buttons sit over it here, so drop it back to a texture. */

	/* Stacked but content-width, as in the client's mobile mockup. */
	.hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-scroll {
		display: none;
	}
}

@media (max-width: 600px) {
	/* "communications," alone runs ~290px at 34px — past a 375px viewport. */
	.hero-name {
		font-size: clamp(24px, 6vw, 30px);
		letter-spacing: -0.4px;
	}
}

/*--------------------------------------------------------------
# Manifesto
--------------------------------------------------------------*/
.manifesto {
	padding-block: 88px;
	background: var(--cream);
	border-top: 1px solid rgba(65, 147, 166, 0.1);
	border-bottom: 1px solid rgba(65, 147, 166, 0.1);
}

.manifesto-line {
	max-width: 1080px;
	/* Same as .hero-tagline — she asked for one body size across the top. */
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 400;
	line-height: 1.85;
	color: var(--text);
}

.manifesto p + p {
	margin-top: 40px;
}

/*
 * Set to the hero headline's own clamp rather than an em ratio, so the two
 * track each other at every width. line-height: 1 keeps the oversized word
 * from stretching the line it sits in.
 */
.manifesto-word {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(30px, 3.9vw, 54px);
	line-height: 1;
	letter-spacing: -1.5px;
}

.manifesto-word.is-strategic {
	color: var(--teal);
}

.manifesto-word.is-ally {
	color: var(--lavender);
}

.manifesto-word.is-yours {
	color: var(--coral);
}

.manifesto-close {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--text);
}

/* The real mark, stacked and off-register — not re-typeset. */
.manifesto-logo {
	width: auto;
	height: clamp(34px, 4.4vw, 68px);
}

@media (max-width: 900px) {
	.manifesto {
		padding-block: 64px;
	}

	.manifesto p + p {
		margin-top: 32px;
	}
}

/*--------------------------------------------------------------
# About — image left and full-bleed, copy right, nothing framed:
# "bütün ekranı kaplasın, sol tarafında dursun, kutucuk yapmaya gerek yok"
--------------------------------------------------------------*/
#about {
	padding-block: 88px;
	background: var(--cream);
}

.about-grid {
	display: grid;
	/* The portrait is cropped to the subject, so it needs less room than the copy. */
	grid-template-columns: 0.55fr 1fr;
	gap: clamp(24px, 3.5vw, 56px);
	align-items: center;
}

.about-portrait {
	width: 100%;
	height: auto;
}

.about-copy {
	min-width: 0;
}

.about-body {
	max-width: 34em;
	margin-top: 28px;
	/* One body size across the page — same clamp as the hero and manifesto. */
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.75;
	color: var(--text);
}

.about-body p + p {
	margin-top: 20px;
}

.about-body strong {
	font-weight: 600;
	color: var(--teal);
}

/* The line that sends you to the About page: brand purple, body size. */
.about-hook {
	max-width: 30em;
	margin-top: 28px;
	font-family: var(--font-display);
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--lavender);
}

.about-cta {
	margin-top: 32px;
}

@media (max-width: 860px) {
	#about {
		padding-block: 56px;
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-portrait {
		max-width: 340px;
	}
}

@media (max-width: 480px) {
	.about-cta {
		width: 100%;
		justify-content: center;
	}
}

/*--------------------------------------------------------------
# Services — accordion on the dark plate, per the client's mockup
--------------------------------------------------------------*/
#services {
	padding-block: clamp(72px, 9vw, 110px);
	background: var(--teal);
	color: var(--cream);
}

.services-header {
	margin-bottom: 56px;
}


#services .section-title {
	color: var(--cream);
}

.services-list {
	border-top: 1px solid rgba(242, 240, 216, 0.16);
}

.service-item {
	border-bottom: 1px solid rgba(242, 240, 216, 0.16);
}

.service-heading {
	margin: 0;
	font: inherit;
}

.service-toggle {
	display: grid;
	grid-template-columns: 48px 1fr 24px;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding-block: 30px;
	text-align: left;
	color: inherit;
}

.service-num {
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1;
	color: var(--lavender);
	transition: color 0.2s;
}

/* The open row takes the coral; the rest stay lavender. */
.service-item.is-open .service-num {
	color: var(--coral);
}

/* min-width lets a long title wrap instead of blowing out the grid column. */
.service-head-text {
	min-width: 0;
}

.service-name {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(19px, 2.1vw, 27px);
	line-height: 1.25;
	letter-spacing: -0.4px;
	color: var(--cream);
}

.service-desc {
	display: block;
	margin-top: 8px;
	max-width: 46em;
	font-size: 17px;
	line-height: 1.6;
	/* Was 15px at 0.72 — thin and washed out against the teal. */
	color: rgba(242, 240, 216, 0.95);
}

/* Plus that becomes a minus: two bars, one rotated away. */
.service-sign {
	position: relative;
	width: 20px;
	height: 20px;
	justify-self: end;
}

.service-sign::before,
.service-sign::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: rgba(242, 240, 216, 0.75);
	translate: 0 -50%;
	transition: rotate 0.3s ease, opacity 0.2s ease, background 0.2s ease;
}

.service-item.is-open .service-sign::before,
.service-item.is-open .service-sign::after {
	background: var(--coral);
}

.service-sign::after {
	rotate: 90deg;
}

.service-item.is-open .service-sign::after {
	rotate: 0deg;
	opacity: 0;
}

/*
 * Collapsed with a grid row rather than max-height, so the panel opens to
 * whatever the copy actually needs — the lists run 2 to 5 items.
 */
.service-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.service-item.is-open .service-panel {
	grid-template-rows: 1fr;
}

/*
 * The clipped child must carry no padding: with box-sizing: border-box a
 * 0fr track still leaves the padding standing, and the first row shows
 * through the gap.
 */
.service-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.service-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 40px;
	padding: 4px 0 34px 64px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(242, 240, 216, 0.95);
}

.service-list li {
	position: relative;
	padding-left: 22px;
}

.service-list li::before {
	content: '';
	position: absolute;
	top: 0.65em;
	left: 0;
	width: 12px;
	height: 1.5px;
	background: var(--coral);
}


@media (max-width: 800px) {
	#services {
		padding-block: 64px;
	}

	.services-header {
		margin-bottom: 40px;
	}

	.service-toggle {
		grid-template-columns: 36px 1fr 20px;
		gap: 12px;
		padding-block: 24px;
	}

	.service-list {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-left: 44px;
		padding-bottom: 28px;
	}
}

/*--------------------------------------------------------------
# Reference logos
--------------------------------------------------------------*/
.refs {
	padding-block: 72px;
	background: var(--cream);
	overflow: hidden;
}

.refs-label {
	margin-bottom: 32px;
	font-family: var(--font-body);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--teal);
}

.marquee-wrap {
	position: relative;
	padding-block: 8px;
	border-top: 1px solid rgba(65, 147, 166, 0.12);
	border-bottom: 1px solid rgba(65, 147, 166, 0.12);
}

/* Fade the strip into the page rather than cutting it at the edge. */
.marquee-wrap::before,
.marquee-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: clamp(40px, 8vw, 120px);
	pointer-events: none;
}

.marquee-wrap::before {
	left: 0;
	background: linear-gradient(to right, var(--cream), rgba(242, 240, 216, 0));
}

.marquee-wrap::after {
	right: 0;
	background: linear-gradient(to left, var(--cream), rgba(242, 240, 216, 0));
}

/*
 * Grab-to-scroll: marquee.js auto-advances scrollLeft, and this inner element
 * is a scroll container so a mouse drag or a touch swipe moves the strip
 * directly. touch-action keeps vertical swipes scrolling the page.
 */
.marquee-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* legacy Edge */
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.marquee-scroll::-webkit-scrollbar {
	display: none;
}

.marquee-scroll.is-grabbing {
	cursor: grabbing;
}

.marquee-track {
	display: flex;
	width: max-content;
}

.marquee-group {
	display: flex;
	align-items: stretch;
}

.marquee-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: clamp(180px, 17vw, 230px);
	padding: 4px 24px;
	text-align: center;
}

/* A fixed logo row keeps every description on the same baseline. */
.marquee-logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
}

.marquee-desc {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	/* Grey like the logos beside them; teal on hover, with the colour. */
	color: #7a7770;
	transition: color 0.3s ease;
	text-align: left;
}

.marquee-item:hover .marquee-desc {
	color: var(--teal);
}

/*
 * Four brands, four palettes. Greyscale holds the strip together; the
 * real colours come back on hover.
 */
.marquee-logo {
	width: auto;
	max-width: 100%;
	height: 100%;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease;
	object-fit: contain;
}

.marquee-item:hover .marquee-logo {
	filter: none;
	opacity: 1;
}





@media (prefers-reduced-motion: reduce) {
	.marquee-logo {
		filter: none;
		opacity: 1;
	}
}

@media (max-width: 700px) {
	.refs {
		padding-block: 56px;
	}

	.marquee-item {
		width: clamp(150px, 42vw, 200px);
		padding-inline: 16px;
	}
}

/*--------------------------------------------------------------
# Work — alternating full-bleed rows, per the client's direction:
# "kutucuk yerine sayfanın içinde blend, sağlı sollu"
--------------------------------------------------------------*/
#work {
	/* Tight above the heading (the client found the gap too big); full below. */
	padding-block: 20px 88px;
	background: var(--cream);
}

.work-header {
	margin-bottom: 72px;
}

.work-eyebrow {
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--coral);
}

#work .section-title {
	color: var(--teal);
}

.work-rows {
	display: flex;
	flex-direction: column;
	gap: clamp(72px, 9vw, 132px);
}

/*
 * How far the image reaches past the content edge. Fixed at one gutter, so the
 * image stops at the outer edge of the --max-width frame (.sub-section) rather
 * than following the viewport out. Below --max-width that edge IS the viewport
 * edge, so the image still bleeds fully; above it the section is capped and
 * cream shows beyond the image, keeping it from growing without bound on a wide
 * monitor ("sağ sollu projelerin sectionına da max width").
 */
.work-rows {
	--bleed: var(--gutter);
}

.work-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* No gap on desktop — the client wants the copy tight against the image
	   ("metinle görseller birbirine yakın olmalı"). Mobile restores a gap. */
	gap: 0;
	align-items: center;
}

/*
 * The rows trade sides down the page — "görseller bir sağda bir solda
 * konumlanacak şekilde sıralı". The side is set in the template rather than
 * with :nth-child so the hand-built first row can sit outside the sequence
 * without shifting everything below it.
 */
.work-row.is-media-right .work-media {
	order: 2;
	margin-right: calc(var(--bleed) * -1);
}

.work-row.is-media-left .work-media {
	margin-left: calc(var(--bleed) * -1);
}

/*
 * No crop: the sources are 16:9 with the subject hard against one edge, so
 * any cover-crop cuts it. Full-bleed plus the images' own cream margin lets
 * the empty side dissolve into the page.
 */
.work-media img {
	width: 100%;
	height: auto;
}

/*
 * The first project is built by hand, on the client's instruction: it sits on
 * its own, above the alternating rows, with the copy set into the empty cream
 * sky of the sailing image rather than beside it
 * ("yelken bir istisna olarak ayrıca yukarda kalsa kendi başına").
 *
 * The image stays inside the content frame — it does NOT bleed to the screen
 * edges. On a wide screen the full-bleed version read "aşırı büyük"; the client
 * wants it centred within the page ("ekranda ortalı dursun, kenara dayanmasın",
 * per the 31.png mockup). The copy is set in from the left edge, over the sky,
 * roughly a fifth of the way across — not flush against the gutter.
 *
 * This is not a general layout — it only reads because that one image has an
 * empty top-left corner. Every other project uses the side-by-side rows above.
 */
@media (min-width: 1100px) {
	.work-row.is-featured {
		display: block;
		position: relative;
	}

	/* is-media-left would pull the image into the bleed; keep it in the frame. */
	.work-row.is-featured .work-media {
		margin-left: 0;
	}

	.work-row.is-featured .work-body {
		position: absolute;
		top: 0;
		left: 20%;
		width: min(46%, 600px);
	}
}

/* min-width stops a long word from forcing the column wider than its half. */
.work-body {
	min-width: 0;
}

.work-index {
	display: block;
	margin-bottom: 14px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--coral);
}

/* sy_accent_words() marks the chosen words in the project heading. */
.work-title .lav {
	color: var(--lavender);
}

.work-title {
	margin-bottom: 16px;
	font-family: var(--font-display);
	font-size: clamp(24px, 2.8vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.6px;
	color: var(--teal);
}

.work-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 20px;
}

/* Text, not pills: the client asked for nothing boxed. */
.work-tags li {
	position: relative;
	padding-left: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--teal);
}

.work-tags li::before {
	content: '';
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 9px;
	height: 1.5px;
	background: var(--coral);
}

.work-desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text);
}

.work-desc p + p {
	margin-top: 14px;
}

.work-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding-bottom: 3px;
	border-bottom: 1.5px solid rgba(255, 108, 108, 0.45);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-decoration: none;
	color: var(--coral);
	transition: gap 0.2s, border-color 0.2s;
}

.work-link:hover {
	gap: 12px;
	border-color: var(--coral);
}

.work-link svg {
	transition: transform 0.2s;
}

.work-link:hover svg {
	transform: translateX(3px);
}

@media (max-width: 860px) {
	#work {
		padding-block: 56px;
	}

	.work-header {
		margin-bottom: 36px;
	}

	.work-rows {
		gap: 64px;
	}

	.work-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* One column: the image always leads, and bleeds both ways. */
	.work-row.is-media-right .work-media {
		order: 0;
	}

	.work-row .work-media {
		margin-inline: calc(var(--bleed) * -1);
	}

}

/*--------------------------------------------------------------
# Process — vertical timeline, per the client's mockup
--------------------------------------------------------------*/
#process {
	padding-block: 88px;
	background: var(--cream);
}

/* The whole block sits centred on the page; the steps stay left-read inside it. */
.process-header {
	margin-bottom: 56px;
	text-align: center;
}


#process .section-title {
	color: var(--teal);
}

.process-steps {
	max-width: 760px;
	margin-inline: auto;
}

.process-step {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 24px;
	padding-bottom: 44px;
}

.process-step:last-child {
	padding-bottom: 0;
}

/* The line joining the markers, drawn behind them. */
.process-step:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 56px;
	left: 28px;
	bottom: -4px;
	width: 1.5px;
	background: rgba(255, 108, 108, 0.45);
}

.process-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1.5px solid var(--coral);
	border-radius: 50%;
	background: var(--cream);
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.5px;
	color: var(--coral);
}

.process-body {
	padding-top: 12px;
}

.process-name {
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-size: clamp(18px, 1.9vw, 22px);
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: var(--teal);
}

.process-desc {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
}

@media (max-width: 800px) {
	#process {
		padding-block: 56px;
	}

	.process-header {
		margin-bottom: 32px;
	}

	.process-step {
		grid-template-columns: 56px 1fr;
		gap: 18px;
		padding-bottom: 36px;
	}

	.process-step:not(:last-child)::before {
		top: 48px;
		left: 22px;
	}

	.process-num {
		width: 44px;
		height: 44px;
		font-size: 12px;
	}

	.process-body {
		padding-top: 8px;
	}
}

/*--------------------------------------------------------------
# Contact — a dark plate on the cream page, per the client's mockup
--------------------------------------------------------------*/
#contact {
	padding-block: clamp(72px, 10vw, 128px);
	background: var(--teal);
	text-align: center;
}

.contact-title {
	font-family: var(--font-display);
	font-size: clamp(32px, 4.6vw, 58px);
	line-height: 1.1;
	letter-spacing: -1.2px;
	color: var(--cream);
}

.contact-title .lav {
	color: var(--lavender);
}

.contact-sub {
	max-width: 34em;
	margin: 20px auto 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(242, 240, 216, 0.8);
}

.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	max-width: 940px;
	margin: 48px auto 0;
}

.contact-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 24px;
	border: 1px solid rgba(242, 240, 216, 0.22);
	border-radius: 16px;
	text-align: left;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.contact-card:hover,
.contact-card:focus-visible {
	background: rgba(242, 240, 216, 0.07);
	border-color: rgba(242, 240, 216, 0.4);
	transform: translateY(-2px);
}

.contact-card-title {
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: -0.2px;
	color: var(--coral);
}

.contact-card-desc {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(242, 240, 216, 0.8);
	overflow-wrap: anywhere;
}

@media (max-width: 800px) {
	#contact {
		padding-block: 72px;
	}

	.contact-cards {
		grid-template-columns: 1fr;
		margin-top: 36px;
	}
}