/* =========================================================================
   SLA theme — Steven Lim Architect
   Tokens are declared once here. Adjust the :root block to retune the brand.
   ========================================================================= */

:root {
	/* Palette — dark is the default surface for the whole site */
	--sla-dark-bg:    #141414;
	--sla-dark-bg-2:  #1d1d1d;   /* image placeholders, insets */
	--sla-dark-ink:   #ece9e2;
	--sla-dark-ink-2: #AFA28E;
	--sla-dark-line:  #AFA28E1A;  /* 10% opacity */
	--sla-dark-accent:#9db9c7;

	/* Palette — light surfaces (opt-in via .sla-section--light) */
	--sla-ink:        #141414;
	--sla-ink-2:      #3d3a35;
	--sla-muted:      #6f6a60;
	--sla-paper:      #f2f0ea;
	--sla-paper-2:    #e7e3d9;
	--sla-line:       rgba(20, 20, 20, .14);
	--sla-accent:     #3c5c6e;

	/* Type */
	--sla-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sla-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;

	/* Fluid type scale. --sla-step--1 and --sla-step-1 are the fixed anchors;
	   every other step is a geometric interpolation off that pair (min track
	   ratio ~1.265, max track ratio ~1.25). */
	--sla-step--1: clamp(.75rem, .6rem + .3vw, 1.2rem);
	--sla-step-0:  clamp(.95rem, .75rem + .78vw, 1.2rem);
	--sla-step-1:  clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
	--sla-step-2:  clamp(1.52rem, 1.34rem + .72vw, 1.88rem);
	--sla-step-3:  clamp(1.92rem, 1.71rem + .84vw, 2.34rem);
	--sla-step-4:  clamp(2.43rem, 2.19rem + .99vw, 2.93rem);

	/* Layout */
	--sla-container: 1320px;
	--sla-gutter: clamp(1.25rem, 5vw, 4rem);
	--sla-section-y: clamp(3.5rem, 8vw, 9.5rem);

	/* Surface roles — default to DARK; .sla-section--light flips them locally */
	--sla-bg: var(--sla-dark-bg);
	--sla-fg: var(--sla-dark-ink);
	--sla-fg-2: var(--sla-dark-ink-2);
	--sla-fg-muted: var(--sla-dark-ink-2);
	--sla-hairline: var(--sla-dark-line);
	--sla-fg-accent: var(--sla-dark-accent);
}

/* -------------------------------------------------------------------------
   Licensed display face.
   Drop the woff2 files into assets/fonts/ and uncomment. The font stack
   already lists "Canela" first, so it takes over automatically.
   ------------------------------------------------------------------------- */
/*
@font-face {
	font-family: "Canela";
	src: url("../fonts/Canela-Regular.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Canela";
	src: url("../fonts/Canela-Medium.woff2") format("woff2");
	font-weight: 500; font-style: normal; font-display: swap;
}
*/

/* =========================================================================
   Reset / base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
	margin: 0;
	background: var(--sla-dark-bg);
	color: var(--sla-dark-ink);
	font-family: var(--sla-sans);
	font-size: var(--sla-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.elementor .sla-container {
  align-items: inherit !important;
}

/* Let theme sections span edge-to-edge even when nested inside a boxed
   Elementor / block container. */
.sla-hero,
.sla-phero,
.sla-ahero,
.sla-chero,
.sla-related,
.sla-faq,
.sla-text-image.sla-section,
.sla-quote.sla-section,
.sla-section--bleed {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }

h1, h2, h3, h4 {
	font-family: var(--sla-serif);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.012em;
	text-wrap: balance;
	margin: 0 0 .6em;
}

p { margin: 0 0 1em; }

:focus-visible {
	outline: 2px solid var(--sla-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.sla-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--sla-ink);
	color: #fff;
	padding: .8rem 1.2rem;
	z-index: 999;
	font-family: var(--sla-sans);
}
.sla-skip-link:focus { left: 1rem; top: 1rem; }

/* =========================================================================
   Layout primitives
   ========================================================================= */

.sla-container {
	width: 100%;
	max-width: var(--sla-container);
	margin-inline: auto;
	padding-inline: var(--sla-gutter);
}

.sla-section {
	padding-block: var(--sla-section-y);
	background: var(--sla-bg);
	color: var(--sla-fg);
}

/* Light section — opt-in. */
.sla-section--light {
	--sla-bg: var(--sla-paper);
	--sla-fg: var(--sla-ink);
	--sla-fg-2: var(--sla-ink-2);
	--sla-fg-muted: var(--sla-muted);
	--sla-hairline: var(--sla-line);
	--sla-fg-accent: var(--sla-accent);
}

/* Dark section — the default; kept explicit for clarity / nesting. */
.sla-section--dark {
	--sla-bg: var(--sla-dark-bg);
	--sla-fg: var(--sla-dark-ink);
	--sla-fg-2: var(--sla-dark-ink-2);
	--sla-fg-muted: var(--sla-dark-ink-2);
	--sla-hairline: var(--sla-dark-line);
	--sla-fg-accent: var(--sla-dark-accent);
}

.sla-measure--narrow { max-width: 34rem; margin-inline: auto; }
.sla-measure--normal { max-width: 46rem; margin-inline: auto; }
.sla-measure--wide   { max-width: 60rem; margin-inline: auto; }
.sla-measure--full   { max-width: none; }

/* =========================================================================
   Shared bits
   ========================================================================= */

.sla-eyebrow {
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sla-fg-muted);
	margin: 0 0 1.4rem;
}

.sla-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .95rem 1.7rem;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
.sla-btn:hover { background: currentColor; }
.sla-btn:hover > * { color: var(--sla-bg); }
.sla-btn--solid { background: var(--sla-ink); color: #fff; border-color: var(--sla-ink); }
.sla-btn--solid:hover { background: transparent; color: var(--sla-ink); }

.sla-rte > :first-child { margin-top: 0; }
.sla-rte > :last-child { margin-bottom: 0; }
.sla-rte h2 { font-size: var(--sla-step-2); margin-top: 1.6em; }
.sla-rte h3 { font-size: var(--sla-step-1); margin-top: 1.4em; }
.sla-rte a { color: var(--sla-fg-accent); }
.sla-rte img { margin-block: 1.5rem; }
.sla-rte blockquote {
	margin: 1.5rem 0;
	padding-left: 1.2rem;
	border-left: 2px solid var(--sla-hairline);
	font-family: var(--sla-serif);
	font-size: var(--sla-step-1);
}

/* =========================================================================
   Header
   ========================================================================= */

/* Transparent, fixed over the page. `.sla-main` reserves 74px on pages that
   don't open with a hero (see the `.sla-main` rules below). */
.sla-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	background: transparent;
	color: #fff;
	transition: background-color .3s ease;
}
/* Solid background once the page is scrolled (JS adds .is-scrolled). */
.sla-header.is-scrolled { background: var(--sla-dark-bg); }
.sla-header::before { transition: opacity .3s ease; }
.sla-header.is-scrolled::before { opacity: 0; }
.sla-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
	pointer-events: none;
	z-index: -1;
}

.sla-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 100px;
  max-width: none;
}

/* The header sits over the page. Pages that open with a full-bleed hero let it
   overlay the image; every other page reserves space so the first line of
   content clears it. Add class `sla-flush` to a page's first section
   (Elementor: Advanced → CSS Classes) if it opens with a full-width image. */
.sla-main { padding-top: 74px; }
.sla-front-page .sla-main,
.sla-single-project .sla-main,
.sla-main:has(.sla-hero),
.sla-main:has(.sla-phero),
.sla-main:has(.sla-ahero),
.sla-main:has(.sla-chero),
.sla-main:has(.sla-flush) {
	padding-top: 0;
}

/* --- Project hero vs. Elementor container spacing ---
   Whatever Elementor container wraps the SLA Project Hero, force its top
   padding/margin to zero so the hero image butts against the top of the page
   (behind a transparent / fixed header). Also drop any empty Elementor
   container on a project — a stray one above the hero pushes it down. */
.sla-single-project .elementor > .e-con:has(.sla-phero),
.sla-single-project .elementor > .e-con:has(.sla-phero) > .e-con-inner,
.sla-single-project .elementor > .elementor-section:has(.sla-phero),
.sla-single-project .elementor > .elementor-section:has(.sla-phero) > .elementor-container {
	--padding-block-start: 0px;
	--padding-top: 0px;
	--margin-block-start: 0px;
	--margin-top: 0px;
	padding-block-start: 0;
	padding-top: 0;
	margin-block-start: 0;
	margin-top: 0;
}
.sla-single-project .elementor > .e-con:not(:has(.elementor-widget)),
/* .sla-single-project .elementor > .elementor-section:not(:has(.elementor-widget)) {
	display: none;
} */

.sla-logo { text-decoration: none; /*display: inline-flex;*/ align-items: baseline; /*gap: .6rem;*/ color: inherit; }
.sla-logo__mark { font-family: var(--sla-serif); font-size: 1.35rem; font-weight: 500; letter-spacing: .02em; }
.sla-logo__word { font-family: var(--sla-sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.sla-logo__img { max-height: 55px; width: auto; }

.sla-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; }
.sla-menu a {
	font-family: var(--sla-sans);
	font-size: var(--sla-step-0);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	opacity: .85;
}
.sla-menu a:hover, .sla-menu .current-menu-item a { opacity: 1; }

.sla-header__nav { display: none; }

.sla-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: .4rem 0;
}
.sla-menu-toggle__lines { display: inline-flex; flex-direction: column; gap: 4px; width: 24px; }
.sla-menu-toggle__lines span { height: 1px; background: currentColor; display: block; }

@media (min-width: 900px) {
	.sla-header__nav { display: block; }
	.sla-menu-toggle { display: none; }
}

/* =========================================================================
   Fullscreen menu overlay
   ========================================================================= */

.sla-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--sla-dark-bg);
	color: var(--sla-dark-ink);
	display: flex;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility .35s;
}
.sla-overlay.is-open { opacity: 1; visibility: visible; }
/* Before JS runs the overlay keeps its [hidden] attribute (display:none). JS
   removes it and toggles .is-open instead. No-JS visitors keep the header nav. */

.sla-overlay__inner {
	margin: auto;
	width: 100%;
	max-width: var(--sla-container);
	padding: 5rem var(--sla-gutter);
	display: flex;
	flex-direction: column;
	gap: 3rem;
	align-items: flex-end;
	text-align: right;
}

.sla-overlay__close {
	position: absolute;
	top: 1.4rem;
	right: var(--sla-gutter);
	background: none;
	border: 0;
	color: inherit;
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
	padding: .3rem;
}

.sla-overlay__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.sla-overlay__menu a {
	font-family: var(--sla-serif);
	font-size: clamp(2.2rem, 8vw, 4rem);
	text-decoration: none;
	color: inherit;
	opacity: .55;
	transition: opacity .2s;
}
.sla-overlay__menu a:hover,
.sla-overlay__menu .current-menu-item a { opacity: 1; }

.sla-overlay__social { display: flex; gap: 1.6rem; }
.sla-overlay__social a {
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: .7;
}
.sla-overlay__social a:hover { opacity: 1; }

body.sla-menu-open { overflow: hidden; }

/* =========================================================================
   Hero carousel
   ========================================================================= */

.sla-hero {
	position: relative;
	min-height: min(100svh, 900px);
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
  margin-top: -10px;
}
.sla-hero__slides { position: absolute; inset: 0; }
.sla-hero__slides::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  content: '';
  background: linear-gradient(90deg, #212121, transparent);
}
.sla-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .9s ease;
}
.sla-hero__slide.is-active { opacity: 1; }
.sla-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sla-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .7) 100%);
	z-index: 1;
}
.sla-hero__inner { position: relative; z-index: 2; padding-block: clamp(5rem, 12vh, 8rem); max-width: none; }
.sla-hero__eyebrow { color: rgba(255, 255, 255, .8); }
.sla-hero__heading { font-size: var(--sla-step-4); max-width: 14ch; margin-bottom: .5em; }
.sla-hero__text { font-size: var(--sla-step-0); max-width: 42ch; color: rgba(255, 255, 255, .9); }
.sla-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.sla-hero__cta .sla-btn:hover { background: #fff; color: var(--sla-ink); }
.sla-hero__cta .sla-btn--solid { background: #fff; color: var(--sla-ink); border-color: #fff; }
.sla-hero__cta .sla-btn--solid:hover { background: transparent; color: #fff; }

.sla-hero__caption {
	position: absolute;
	left: var(--sla-gutter);
	bottom: clamp(1.2rem, 4vh, 2.4rem);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	transition: opacity .5s;
}
.sla-hero__slide.is-active .sla-hero__caption { opacity: 1; }
.sla-hero__caption-label { margin: 0; color: rgba(255, 255, 255, .65); }
.sla-hero__caption-title {
	font-family: var(--sla-serif);
	font-size: var(--sla-step-2);
	line-height: 1.15;
	color: #fff;
}
.sla-hero__caption:hover .sla-hero__caption-title { text-decoration: underline; text-underline-offset: .2em; }

.sla-hero__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(1.2rem, 4vh, 2.4rem);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .9rem;
  max-width: none;
}
.sla-hero__copyright {
	margin: 0;
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .6);
}
.sla-hero__dots {
	display: flex;
	gap: .55rem;
}
.sla-hero__dot {
	width: 26px;
	height: 2px;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
}
.sla-hero__dot.is-active { background: #fff; }

/* Slider-only homepage (Template: "Home — Slider"): fill the viewport, no
   empty band under the 900px cap since nothing follows the hero. */
.sla-home-slider .sla-main { min-height: 100svh; }
.sla-home-slider .sla-hero { min-height: 100svh; }

/* Stack the caption above the copyright / dots on narrow screens. */
@media (max-width: 620px) {
	.sla-hero__inner { padding-bottom: 10rem; }
	.sla-hero__caption { bottom: 5.5rem; }
	.sla-hero__footer {
		align-items: flex-start;
		gap: .6rem;
	}
}

/* =========================================================================
   Project hero (single project)
   ========================================================================= */

.sla-phero { position: relative; color: #fff; margin-top: -10px; }
.sla-phero__media { position: relative; height: min(100svh, 860px); overflow: hidden; }

/* No hero image set — fall back to a dark title band. */
.sla-phero--plain { color: var(--sla-dark-ink); background: var(--sla-dark-bg); }
.sla-phero--plain .sla-phero__media { height: clamp(16rem, 34vh, 24rem); }
.sla-phero--plain .sla-phero__scrim { display: none; }
.sla-phero__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.sla-phero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 45%, rgba(0, 0, 0, .65));
}
.sla-phero__title {
	position: absolute;
	left: 0; right: 0;
	bottom: clamp(2rem, 7vh, 4.5rem);
  /* padding-left: 18px !important;
  padding-right: 18px !important; */
}
.sla-phero__title h1 { font-size: var(--sla-step-4); margin: 0; }
.sla-phero__eyebrow { 
  color: var(--sla-fg-muted); 
  font-family: var(--sla-sans);
  font-size: var(--sla-step-0);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .16rem;
}

.sla-meta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.8rem 2rem;
	padding-block: clamp(2rem, 5vw, 3.5rem);
  padding-left: 40px;
  padding-right: 40px;
	border-bottom: 1px solid var(--sla-hairline);
	background: var(--sla-bg);
	color: var(--sla-fg);
}
.sla-meta__cell { display: flex; flex-direction: column; gap: .5rem; }
.sla-meta__cell .sla-eyebrow { margin: 0; }
.sla-meta__value {
	font-family: var(--sla-serif);
	font-size: var(--sla-step-0);
	line-height: 1.35;
	color: var(--sla-fg);
}

@media (min-width: 640px) {
	.sla-meta { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
	/* auto-fit so a project with 4 details fills the row, one with 5 (incl. Services) still fits */
	.sla-meta { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}
@media (max-width: 1023px) {
  .sla-meta { padding-left: 0 !important; padding-right: 0 !important; }
}

/* =========================================================================
   About / page hero (standalone pages — About, Studio, Services)
   ========================================================================= */

.sla-ahero { position: relative; display: flex; color: #fff; }
.sla-ahero--tall { min-height: 100svh; }
.sla-ahero--medium { min-height: min(70svh, 640px); }
.sla-ahero--center { justify-content: center; }

.sla-ahero__media { position: absolute; inset: 0; overflow: hidden; }
.sla-ahero__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.sla-ahero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .7));
}

/* No image — dark title band, no scrim, natural height. */
.sla-ahero--plain { background: var(--sla-dark-bg); color: var(--sla-dark-ink); }
.sla-ahero--plain.sla-ahero--tall,
.sla-ahero--plain.sla-ahero--medium { min-height: 0; }
.sla-ahero--plain .sla-ahero__media { display: none; }

.sla-ahero__inner {
	position: relative;
	z-index: 2;
	align-self: flex-end;
	width: 100%;
	padding-block: clamp(6rem, 16vh, 10rem) clamp(2rem, 7vh, 4.5rem);
  padding-left: 18px !important;
  padding-right: 18px !important;
}
.sla-ahero--plain .sla-ahero__inner { padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 6vw, 4rem); }
.sla-ahero--center .sla-ahero__inner { text-align: center; }

/* .sla-ahero__eyebrow { color: rgba(255, 255, 255, .8); } */
.sla-ahero--plain .sla-ahero__eyebrow { color: var(--sla-dark-ink-2); }
.sla-ahero__heading { font-size: var(--sla-step-4); font-weight: 300; max-width: 20ch; margin: 0 0 .3em; }
.sla-ahero--center .sla-ahero__heading { max-width: none; }
.sla-ahero__text {
	font-size: var(--sla-step-1);
	max-width: 46ch;
	margin: 0;
	color: rgba(255, 255, 255, .9);
}
.sla-ahero--plain .sla-ahero__text { color: var(--sla-dark-ink-2); }
.sla-ahero--center .sla-ahero__text { margin-inline: auto; }

.sla-ahero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.sla-ahero--center .sla-ahero__cta { justify-content: center; }
.sla-ahero__cta .sla-btn:hover { background: #fff; color: var(--sla-ink); }
.sla-ahero__cta .sla-btn--solid { background: #fff; color: var(--sla-ink); border-color: #fff; }
.sla-ahero__cta .sla-btn--solid:hover { background: transparent; color: #fff; }

/* =========================================================================
   Contact hero (contact page — heading | phone / email / socials)
   ========================================================================= */

.sla-chero { position: relative; display: flex; color: #fff; }
.sla-chero--tall { min-height: 100svh; }
.sla-chero--medium { min-height: min(70svh, 640px); }

.sla-chero__media { position: absolute; inset: 0; overflow: hidden; }
.sla-chero__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.sla-chero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .7));
}

/* No image — dark title band, no scrim, natural height. */
.sla-chero--plain { background: var(--sla-dark-bg); color: var(--sla-dark-ink); }
.sla-chero--plain.sla-chero--tall,
.sla-chero--plain.sla-chero--medium { min-height: 0; }
.sla-chero--plain .sla-chero__media { display: none; }

.sla-chero__inner {
	position: relative;
	z-index: 2;
	align-self: flex-end;
	width: 100%;
	display: grid;
	gap: 2.5rem;
	padding-block: clamp(6rem, 16vh, 10rem) clamp(2rem, 7vh, 4.5rem);
}
.sla-chero--plain .sla-chero__inner { padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 6vw, 4rem); }

.sla-chero--plain .sla-chero__eyebrow { color: var(--sla-dark-ink-2); }
.sla-chero__heading { font-size: var(--sla-step-4); font-weight: 300; max-width: 16ch; margin: 0 0 .3em; }
.sla-chero__text {
	font-size: var(--sla-step-0);
	max-width: 42ch;
	margin: 0;
	color: rgba(255, 255, 255, .9);
}
.sla-chero--plain .sla-chero__text { color: var(--sla-dark-ink-2); }

.sla-chero__aside { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.sla-chero__aside-label { margin: 0; }
.sla-chero__contacts { display: flex; flex-wrap: wrap; gap: 1rem; }
.sla-chero__contact {
	display: inline-flex;
	align-items: center;
	padding: .95rem 1.7rem;
	border: 1px solid rgba(255, 255, 255, .4);
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}
.sla-chero__contact:first-child { background: #fff; color: var(--sla-ink); border-color: #fff; }
.sla-chero__contact:hover { background: #fff; color: var(--sla-ink); border-color: #fff; }

@media (max-width: 1023px) {
  .sla-chero__contact {
    padding: .65rem 1.2rem !important;
  }
}

.sla-chero__social { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.sla-chero__social a {
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sla-fg-muted);
}
.sla-chero__social a:hover { color: #fff; }
.sla-chero--plain .sla-chero__social a { color: var(--sla-dark-ink-2); }
.sla-chero--plain .sla-chero__social a:hover { color: var(--sla-dark-ink); }

@media (min-width: 900px) {
	.sla-chero__inner {
		grid-template-columns: 1.15fr 1fr;
		align-items: end;
		gap: 3rem 4rem;
	}
}

/* =========================================================================
   Work grid + cards
   ========================================================================= */

.sla-work__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.sla-work__title { font-size: var(--sla-step-4); margin: 0; }
.sla-work__intro { max-width: 42rem; margin-top: 1.2rem; color: var(--sla-fg-2); }

.sla-work__count {
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	padding-top: 3rem;
  padding-bottom: 1rem;
	border-top: 1px solid var(--sla-hairline);
	font-size: var(--sla-step--1);
	letter-spacing: .04em;
	color: var(--sla-fg-muted);
  max-width: unset;
}

.sla-work-grid {
	display: grid;
	grid-template-columns: 1fr;
  margin-top: 1.5rem;
	gap: clamp(2rem, 3vw, 4rem) 6px;
}

.sla-card { text-decoration: none; color: inherit; display: block; }
.sla-card__media { display: block; overflow: hidden; background: var(--sla-dark-bg-2); aspect-ratio: 4 / 5; }
.sla-section--light .sla-card__media { background: var(--sla-paper-2); }
.sla-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sla-card:hover .sla-card__img { transform: scale(1.03); }
.sla-card__body { display: block; padding-top: 1rem; }
.sla-card__title { font-family: var(--sla-serif); font-size: var(--sla-step-1); display: block; }
.sla-card__meta {
	display: block;
	margin-top: .3rem;
	font-size: var(--sla-step--1);
	letter-spacing: .04em;
	color: var(--sla-fg-muted);
}

@media (min-width: 720px) {
	.sla-work-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
	.sla-work-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
}
/* @media (min-width: 900px) {
	.sla-work-grid[data-columns="2"] > :nth-child(even) { transform: translateY(3.5rem); }
} */

.sla-related .sla-work-grid { margin-top: 2.5rem; }

/* =========================================================================
   In-body image layouts
   ========================================================================= */

.sla-image-pair,
.sla-image-row { margin: clamp(2.5rem, 6vw, 5rem) auto; }
.sla-image-pair { display: grid; gap: clamp(1rem, 3vw, 2rem); }
.sla-image-pair img { width: 100%; }
.sla-image-pair figcaption,
.sla-image-row figcaption {
	grid-column: 1 / -1;
	font-size: var(--sla-step--1);
	color: var(--sla-fg-muted);
	margin-top: .8rem;
}

@media (min-width: 800px) {
	.sla-image-pair { grid-template-columns: 1fr 1fr; }
	.sla-image-pair[data-split="60-40"] { grid-template-columns: 6fr 4fr; }
	.sla-image-pair[data-split="40-60"] { grid-template-columns: 4fr 6fr; }
}

.sla-image-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.sla-image-row[data-gutter="tight"] { gap: .4rem; }
.sla-image-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 800px) {
	.sla-image-row[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.sla-image-row[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
	.sla-image-row[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
}

.sla-text-image__grid { display: grid; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.sla-text-image__body > :first-child { margin-top: 0; }
.sla-text-image__body h2 { font-size: var(--sla-step-2); }

@media (min-width: 860px) {
	.sla-text-image__grid { grid-template-columns: 1fr 1fr; }
	.sla-text-image[data-ratio="40-60"] .sla-text-image__grid { grid-template-columns: 4fr 6fr; }
	.sla-text-image[data-side="left"] .sla-text-image__media { order: -1; }
	.sla-text-image[data-side="right"] .sla-text-image__media { order: 1; }
}

/* =========================================================================
   Quote
   ========================================================================= */

.sla-quote { margin: 0; }
.sla-quote:not(.sla-section) { padding-block: clamp(2.5rem, 7vw, 5rem); }
.sla-quote blockquote {
	font-family: var(--sla-serif);
	font-size: var(--sla-step-2);
	line-height: 1.3;
	max-width: 26ch;
	margin: 0 auto;
	text-align: center;
	font-style: italic;
}
.sla-quote figcaption {
	margin-top: 1.4rem;
	text-align: center;
	font-family: var(--sla-sans);
	font-size: var(--sla-step--1);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sla-fg-muted);
}

/* =========================================================================
   FAQ
   ========================================================================= */

.sla-faq h2 { font-size: var(--sla-step-3); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.sla-faq__eyebrow { font-family: var(--sla-sans); font-size: var(--sla-step--1); letter-spacing: .16rem; text-transform: uppercase; color: var(--sla-fg-muted); margin-bottom: 1.5rem; }
.sla-faq__list { border-top: 1px solid var(--sla-hairline); }
.sla-faq__item { border-bottom: 1px solid var(--sla-hairline); }
.sla-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.4rem 2.5rem 1.4rem 0;
	position: relative;
	font-family: var(--sla-serif);
	font-size: var(--sla-step-1);
	display: block;
}
.sla-faq__item summary::-webkit-details-marker { display: none; }
.sla-faq__icon { position: absolute; right: .2rem; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); }
.sla-faq__icon::before,
.sla-faq__icon::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: opacity .2s, transform .2s;
}
.sla-faq__icon::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.sla-faq__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.sla-faq__item[open] .sla-faq__icon::after { opacity: 0; }
.sla-faq__answer {
	padding: 0 2.5rem 1.6rem 0;
	max-width: 52ch;
	color: var(--sla-fg-2);
}
.sla-faq__answer > :first-child { margin-top: 0; }
.sla-faq__answer > :last-child { margin-bottom: 0; }

/* =========================================================================
   Misc page furniture
   ========================================================================= */

.sla-page-head { border-bottom: 1px solid var(--sla-hairline); }
.sla-page-head__title { font-size: var(--sla-step-4); margin: 0; }
.sla-page-content--elementor { display: block; }

.sla-archive-head { margin-bottom: 3rem; }
.sla-archive-head__title { font-size: var(--sla-step-3); }

.sla-entry { padding-block: 2rem; border-bottom: 1px solid var(--sla-hairline); }
.sla-entry__title { font-size: var(--sla-step-2); margin: 0 0 .4rem; }
.sla-entry-single__head { margin-bottom: 2.5rem; }
.sla-entry-single__title { font-size: var(--sla-step-3); }
.sla-entry-single__meta { font-size: var(--sla-step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--sla-fg-muted); }

.sla-404 h1 { font-size: var(--sla-step-3); }
.sla-404__actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.sla-empty { padding-block: 3rem; color: var(--sla-fg-muted); }

.sla-footer__inner {
	padding-block: clamp(3rem, 7vw, 5rem);
}
.sla-footer__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 4rem);
}
.sla-footer__brand { flex: 0 0 auto; }
@media (max-width: 1023px) {
	.sla-footer__brand { display: none; }
}
.sla-footer__nav {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
.sla-footer__nav .sla-menu { flex-wrap: wrap; gap: 2rem; }
.sla-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-left: auto;
	font-size: var(--sla-step--1);
}
@media (max-width: 1023px) {
	.sla-footer__social { margin-right: auto; }
}
.sla-footer__social a {
	text-decoration: none;
	color: var(--sla-dark-ink-2);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.sla-footer__social a:hover { color: var(--sla-dark-ink); }
.sla-footer__bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--sla-hairline);
}
.sla-footer__copyright,
.sla-footer__tagline { font-size: var(--sla-step--1); color: #3D3D3D; margin: 0; }
.sla-footer__tagline { letter-spacing: .14em; text-transform: uppercase; }

.sla-contact-details { display: flex; flex-direction: column; gap: .3rem; }

/* =========================================================================
   Reveal on scroll (progressive; safe if JS/IO absent)
   ========================================================================= */

.sla-js .sla-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
}
.sla-js .sla-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sla-js .sla-reveal { opacity: 1; transform: none; transition: none; }
	.sla-hero__slide { transition: none; }
	.sla-card__img { transition: none; }
	.sla-header, .sla-header::before { transition: none; }
	html { scroll-behavior: auto; }
}

/* =========================================================================
   Elementor niceties — keep native widgets on-brand
   ========================================================================= */

.elementor-widget-heading .elementor-heading-title { font-family: var(--sla-serif); }
.elementor-widget-text-editor { font-family: var(--sla-sans); }

/* The site is dark by default. Native Elementor Heading / Text widgets that
   have NO colour of their own inherit the current surface colour, so they stay
   readable on the dark ground (and on a .sla-section--light block). A colour set
   explicitly on the widget in Elementor still wins over this. */
:where(.sla-main) :is(.elementor-heading-title, .elementor-widget-text-editor),
:where(.sla-main) :is(.elementor-widget-text-editor) :is(p, li, span) {
	color: var(--sla-fg, var(--sla-dark-ink));
}
:where(.sla-main) .sla-section--light :is(.elementor-heading-title, .elementor-widget-text-editor),
:where(.sla-main) .sla-section--light .elementor-widget-text-editor :is(p, li, span) {
	color: var(--sla-ink);
}