/*
  ArtForm — Shared components
  Reusable building blocks for every page. Depends on tokens.css + base.css.
*/

/* ---------- Navigation ---------- */

.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  color: var(--color-on-dark);
  background: transparent;
  border-bottom: 1px solid var(--color-on-dark-border);
  /* Insurance for the logo/links against busy patches of the hero photo —
     subtle on purpose, removed once the nav has a solid painted background. */
  text-shadow: 0 1px 3px rgba(20,23,22,.35);
  transition: background var(--duration-base) ease,
              color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}

/* Painted state once the page has scrolled past the hero — toggled by main.js */
.nav.is-scrolled,
.nav--solid{
  background: rgba(245,244,240,.94);
  color: var(--color-graphite);
  border-bottom-color: var(--color-on-light-border);
  text-shadow: none;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

/* .nav--solid: for pages whose content starts light (no dark hero image
   under the fixed nav) — e.g. subpages using .page-hero. The transparent/
   light-text nav treatment only makes sense over a dark hero photo; on a
   light page it would be unreadable until the user scrolls past 48px. */

.nav__row{
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: var(--page-padding-x);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
}

.nav__logo{
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: var(--weight-semibold);
  letter-spacing: .26em;
  line-height: 1;
}

.nav__logo-mark{
  display: block;
  width: 16px;
  height: 1px;
  background: var(--color-accent);
}

.nav__links{
  display: none;
  align-items: center;
  gap: clamp(18px, 2.1vw, 34px);
  flex: 1 1 auto;
  justify-content: flex-end;
}

.nav__link{
  color: inherit;
  position: relative;
  padding: 6px 0;
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__link::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 280ms ease;
}

.nav__link.is-active::after,
.nav__link:hover::after{
  opacity: 1;
}

.nav__cta{
  margin-left: clamp(4px, 1vw, 14px);
  padding: 13px 22px;
  background: var(--color-warm-white);
  color: var(--color-graphite);
  border: 1px solid var(--color-warm-white);
  text-shadow: none;
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

/* Transparent/hero state — light fill so the CTA never dissolves into the photo. */
.nav__cta:hover{
  background: var(--color-concrete);
  border-color: var(--color-concrete);
  color: var(--color-graphite);
}

/* Scrolled/solid state — invert to the graphite treatment. */
.nav.is-scrolled .nav__cta,
.nav--solid .nav__cta{
  background: var(--color-graphite);
  color: var(--color-warm-white);
  border-color: var(--color-graphite);
}

.nav.is-scrolled .nav__cta:hover,
.nav--solid .nav__cta:hover{
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-warm-white);
}

.nav__toggle{
  appearance: none;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.nav__toggle-bar{
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
}

@media (min-width: 1040px){
  .nav__links{ display: flex; }
  .nav__toggle{ display: none; }
}

/* ---------- Mobile menu overlay ---------- */

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--color-graphite);
  color: var(--color-warm-white);
  display: flex;
  flex-direction: column;
  /* Compact, capped padding — this used to grow via 6vw all the way to a
     56px ceiling, which is what made the panel feel oversized on larger
     phones/tablets still inside the mobile-menu range (<1040px). */
  padding: 0 clamp(20px, 5vw, 32px) clamp(18px, 3vw, 28px);
}

.mobile-menu[hidden]{
  display: none;
}

.mobile-menu__header{
  /* Deliberately decoupled from --nav-height (shared with the desktop bar)
     so this can be tuned for mobile alone; kept in sync with .nav__row's
     own mobile override below. */
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-on-dark-border);
}

.mobile-menu__close{
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-on-dark-border-strong);
  color: inherit;
  width: 40px;
  height: 40px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__links{
  display: flex;
  flex-direction: column;
  /* Items start close to the header, not vertically centered with a huge gap. */
  margin-top: clamp(10px, 3vw, 18px);
  max-width: 420px;
}

.mobile-menu__links a{
  color: inherit;
  /* Smaller ceiling and gentler vw scaling than before (was 26–34px) — stays
     inside the 24–30px range brief asked for across the whole mobile range,
     instead of ballooning toward display-heading size on wider phones. */
  font-size: clamp(24px, 5.5vw, 29px);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: 1.25;
  /* ~20px gap between adjacent items (10px bottom + 10px top), was 36px. */
  padding: 10px 0;
  border-bottom: 1px solid rgba(245,244,240,.12);
}

.mobile-menu__cta{
  margin-top: auto;
  max-width: 420px;
  background: var(--color-warm-white);
  color: var(--color-graphite);
  text-align: center;
  /* Normal button proportions (~44-46px tall), not a full hero-sized band. */
  padding: 14px 20px;
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 1040px){
  .mobile-menu{ display: none !important; }
}

/* Collapsed mobile/tablet nav bar — a dedicated, non-fluid height and
   tighter horizontal padding, independent of the shared --nav-height and
   --page-padding-x tokens the desktop bar still uses above 1040px. */
@media (max-width: 1039px){
  .nav__row{
    height: 68px;
    padding-inline: 18px;
  }
}

/* ---------- Buttons ---------- */

.btn{
  display: inline-block;
  padding: 19px 32px;
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.btn--solid-light{
  background: var(--color-warm-white);
  color: var(--color-graphite);
}

.btn--solid-light:hover{
  background: var(--color-accent);
  color: var(--color-warm-white);
}

.btn--outline-dark{
  color: inherit;
  border: 1px solid var(--color-on-dark-border-strong);
}

.btn--outline-dark:hover{
  border-color: var(--color-warm-white);
  background: rgba(245,244,240,.08);
  color: inherit;
}

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Text link with an animating underline + arrow, used for "see more" links */
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-on-light-border-strong);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  transition: border-color var(--duration-fast) ease, gap var(--duration-fast) ease;
}

.link-arrow:hover{
  border-color: var(--color-accent);
  gap: 16px;
  color: inherit;
}

/* ---------- Section scaffolding ---------- */

.section{
  padding-block: var(--section-padding-y);
}

.section--lg{ padding-block: var(--section-padding-y-lg); }
.section--sm{ padding-block: var(--section-padding-y-sm); }
.section--alt{ background: var(--color-surface-alt); }
.section--dark{ background: var(--color-graphite); color: var(--color-warm-white); }

.section-label{
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: clamp(16px, 1.8vw, 26px);
}

.section-header{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
  margin-bottom: clamp(34px, 4.4vw, 66px);
}

.section-header h2{
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.section-header p{
  flex: 0 1 min(100%, 420px);
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--color-text-body-1);
}

/* Lede paragraph under an h2, inside the header's left-hand block (as
   opposed to .section-header > p, the right-hand short description). */
.section-header__lede{
  margin-top: 14px;
  max-width: 56ch;
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--color-text-body-1);
}

.section-header__actions{
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}

/* Decorative architectural corner motif — pure CSS, purely ornamental */
.motif-corner{
  position: absolute;
  width: clamp(56px, 7vw, 110px);
  height: clamp(56px, 7vw, 110px);
  pointer-events: none;
  border-color: var(--color-on-light-motif);
}

.motif-corner--tl{ left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
.motif-corner--tr{ right: 0; top: 0; border-right: 1px solid; border-top: 1px solid; }
.motif-corner--bl{ left: 0; bottom: 0; border-left: 1px solid; border-bottom: 1px solid; }

/* ---------- Category tile (Objekti grid) ---------- */

.category-tile{
  position: relative;
  overflow: hidden;
  background: var(--color-concrete);
  color: var(--color-warm-white);
  display: block;
  min-height: 165px;
}

.category-tile__media{
  position: absolute;
  inset: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-media) var(--ease-standard);
}

.category-tile__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-tile:hover .category-tile__media{
  transform: scale(1.03);
}

.category-tile__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scrim-tile);
  opacity: .72;
  transition: opacity 420ms ease;
}

.category-tile:hover .category-tile__scrim{
  opacity: 1;
}

.category-tile__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 1.5vw, 32px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.category-tile__index{
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  color: var(--color-on-dark-72);
  margin-bottom: 8px;
}

.category-tile__title{
  font-size: clamp(19px, 1.6vw, 32px);
  font-weight: var(--weight-medium);
  letter-spacing: -.015em;
  line-height: 1.1;
}

.category-tile__arrow{
  flex: 0 0 auto;
  transition: transform 400ms var(--ease-standard);
}

.category-tile:hover .category-tile__arrow{
  transform: translate(5px, -5px);
}

/* ---------- Project card ---------- */

.project-card{
  display: block;
}

.project-card__media{
  position: relative;
  overflow: hidden;
  background: var(--color-concrete);
  color: var(--color-text-muted);
}

.project-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-media) var(--ease-standard);
}

.project-card:hover .project-card__media img{
  transform: scale(1.03);
}

.project-card__meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--color-on-light-border);
  margin-top: 18px;
  padding-top: 16px;
}

.project-card__title{
  font-size: clamp(19px, 1.7vw, 27px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.project-card__specs{
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-body-3);
}

/* ---------- LGSF / numbered feature row ---------- */

.feature-row{
  border-top: 1px solid var(--color-on-light-border);
}

.feature-row__item{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(18px, 1.8vw, 26px) 0;
  border-bottom: 1px solid var(--color-on-light-border);
}

.feature-row__index{
  flex: 0 0 auto;
  width: 34px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-meta);
  color: var(--color-accent);
  padding-top: 3px;
}

.feature-row__title{
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -.01em;
}

.feature-row__desc{
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-body-3);
  max-width: 48ch;
}

/* ---------- Process step ---------- */

.process-step{
  flex: 1 1 19%;
  min-width: min(100%, 190px);
  position: relative;
  border-top: 1px solid var(--color-on-light-border-strong);
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 34px) clamp(8px, 1vw, 14px) 0;
}

.process-step::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--color-accent);
}

.process-step__index{
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: var(--weight-regular);
  letter-spacing: -.02em;
  color: var(--color-graphite);
  line-height: 1;
}

.process-step__title{
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: var(--weight-semibold);
  letter-spacing: -.01em;
}

.process-step__desc{
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-body-3);
  max-width: 26ch;
}

/* ---------- CTA band ---------- */

.cta-band{
  position: relative;
  overflow: hidden;
  background: var(--color-graphite);
  color: var(--color-warm-white);
}

.cta-band__media{
  position: absolute;
  inset: 0;
  color: var(--color-on-dark-55);
}

.cta-band__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-band__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scrim-cta);
}

.cta-band__content{
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 168px) var(--page-padding-x);
}

.cta-band h2{
  max-width: min(100%, 780px);
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: var(--weight-medium);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
}

.cta-band p{
  margin-top: clamp(20px, 2.2vw, 32px);
  max-width: 56ch;
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--color-on-dark-78);
}

/* ---------- Footer ---------- */

.site-footer{
  background: var(--color-graphite-deep);
  color: var(--color-warm-white);
  padding: clamp(56px, 6vw, 96px) 0 clamp(24px, 2.4vw, 36px);
}

.site-footer__grid{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 80px);
  justify-content: space-between;
}

.site-footer__heading{
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark-45);
  margin-bottom: 18px;
}

.site-footer__links{
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
}

.site-footer__links a{
  color: var(--color-on-dark-82);
}

.site-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(40px, 4.5vw, 72px);
  padding-top: 20px;
  border-top: 1px solid rgba(245,244,240,.14);
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-on-dark-45);
}

/* ---------- Scroll reveal ---------- */

[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--duration-reveal) var(--ease-standard),
              transform var(--duration-reveal) var(--ease-standard);
}

[data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity: 1;
    transform: none;
  }
}

/* ---------- Homepage section layouts ---------- */
/* Composition classes for the sections on index.html. Built from the
   primitives above (.section, .category-tile, .project-card, .feature-row,
   .process-step) rather than duplicating their rules. */

.hero{
  position: relative;
  min-height: clamp(600px, 92vh, 980px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--color-graphite);
  color: var(--color-warm-white);
  scroll-margin-top: 0;
}

.hero__media{
  position: absolute;
  inset: 0;
}

.hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source image is an ultra-wide panorama with the building weighted to
     the right — bias toward it so narrow/tall crops (mobile) don't lose it. */
  object-position: 70% 42%;
}

/* LGSF page hero photo is a 4:3 interior shot — the machine and steel coils
   sit in the lower half, the bright skylight structure fills the top. Bias
   down so the wide hero crop keeps the machine, not the roof glare. */
[data-page="lgsf"] .hero__media img{
  object-position: center 68%;
}

.hero__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20,23,22,.5) 0%, rgba(20,23,22,.14) 18%, rgba(20,23,22,0) 30%),
    linear-gradient(to right, rgba(20,23,22,.62) 0%, rgba(20,23,22,.3) 42%, rgba(20,23,22,.04) 78%, rgba(20,23,22,0) 100%),
    linear-gradient(to top, rgba(20,23,22,.86) 0%, rgba(20,23,22,.6) 30%, rgba(20,23,22,.26) 60%, rgba(20,23,22,.08) 100%);
}

.hero__content{
  position: relative;
  padding-top: clamp(130px, 15vh, 190px);
  padding-bottom: clamp(28px, 3vw, 44px);
}

.hero__eyebrow{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 2vw, 30px);
}

.hero__eyebrow-rule{
  display: block;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--color-accent);
}

.hero__eyebrow-text{
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-on-dark-82);
}

.hero h1{
  max-width: min(100%, 17ch);
  font-size: var(--text-hero);
  font-weight: var(--weight-medium);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
}

.hero__lede{
  margin-top: clamp(22px, 2.6vw, 36px);
  max-width: min(100%, 54ch);
  font-size: var(--text-body-lg);
  line-height: 1.62;
  color: var(--color-on-dark-80);
}

.hero__actions{
  margin-top: clamp(28px, 3.2vw, 46px);
}

.hero__ticker{
  position: relative;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: var(--page-padding-x);
}

.hero__ticker-row{
  border-top: 1px solid rgba(245,244,240,.22);
  padding: 16px 0 clamp(18px, 2vw, 26px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 34px);
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark-72);
}

.hero__ticker-row span[aria-hidden]{
  color: var(--color-accent);
}

/* Category grid (Objekti koje gradimo) — compact editorial composition.
   Three columns sharing one overall height, anchored off the dominant
   "Kuće" tile via flex stretch: Kuće (large) | Vikendice/Kompaktne stack
   (medium, uneven split) | Hale+Garaže / Letnje kuhinje+Kamini (2x2 small).
   Whole thing targets fitting within roughly one desktop viewport. */

.category-grid-v2{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tile);
}

.category-col--kuce{
  flex: 1.6 1 300px;
  min-width: min(100%, 300px);
}

.category-tile--kuce{
  height: clamp(320px, 30vw, 420px);
}

.category-col--stack{
  flex: 1.05 1 230px;
  min-width: min(100%, 220px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-tile);
}

.category-tile--vikendice{
  flex: 1.35 1 0;
  min-height: 0;
}

.category-tile--kompaktne{
  flex: 1 1 0;
  min-height: 0;
}

.category-col--secondary{
  flex: 1.5 1 260px;
  min-width: min(100%, 240px);
  display: flex;
  flex-direction: column;
  gap: var(--gap-tile);
}

.category-secondary-row{
  display: flex;
  gap: var(--gap-tile);
  flex: 1 1 0;
  min-height: 0;
}

.category-secondary-row .category-tile{
  flex: 1 1 50%;
  min-width: 0;
}

@media (max-width: 1023px){
  .category-col--kuce,
  .category-col--stack,
  .category-col--secondary,
  .category-secondary-row{
    display: contents;
  }

  .category-grid-v2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .category-tile--kuce{
    grid-column: 1 / -1;
    height: clamp(280px, 34vw, 380px);
  }

  /* Vikendice and Kompaktne now sit side by side in one grid row — they
     must share a height, or the shorter one leaves a visible gap. */
  .category-tile--vikendice,
  .category-tile--kompaktne{
    height: clamp(220px, 28vw, 300px);
  }

  .category-secondary-row .category-tile{
    height: clamp(180px, 22vw, 230px);
  }
}

@media (max-width: 767px){
  .category-grid-v2{
    grid-template-columns: 1fr;
  }

  .category-tile--kuce{
    grid-column: 1;
    height: clamp(260px, 58vw, 320px);
  }

  .category-tile--vikendice{
    height: clamp(220px, 50vw, 280px);
  }

  .category-tile--kompaktne{
    height: clamp(200px, 44vw, 240px);
  }

  .category-secondary-row .category-tile{
    height: clamp(170px, 38vw, 210px);
  }
}

.motif-corner--sm{
  width: 44px;
  height: 44px;
}

.motif-corner--lg{
  width: clamp(60px, 8vw, 130px);
  height: clamp(60px, 8vw, 130px);
}

/* Offset outside the block it decorates, top-left / bottom-left */
.motif-corner--offset-tl{
  left: calc(-1 * clamp(14px, 1.6vw, 28px));
  top: calc(-1 * clamp(18px, 2vw, 34px));
}

.motif-corner--offset-bl{
  left: calc(-1 * clamp(10px, 1.2vw, 20px));
  bottom: calc(-1 * clamp(10px, 1.2vw, 20px));
}

.motif-corner--on-dark{
  border-color: rgba(245,244,240,.35);
}

/* Philosophy statement */

.philosophy-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: flex-start;
}

.philosophy-grid__heading{
  flex: 1 1 min(100%, 620px);
  position: relative;
}

.philosophy-grid__heading h2{
  max-width: min(100%, 22ch);
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

.philosophy-grid__body{
  flex: 1 1 min(100%, 380px);
  padding-top: clamp(6px, 3vw, 54px);
}

.philosophy-grid__body p{
  font-size: var(--text-body-lg);
  line-height: 1.68;
  color: var(--color-text-body-1);
}

.philosophy-grid__body p:first-child{
  color: var(--color-text-body-2);
}

.philosophy-grid__body p + p{
  margin-top: 20px;
}

/* LGSF technology section */

.lgsf-grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: stretch;
}

.lgsf-grid__media{
  flex: 1 1 46%;
  min-width: min(100%, 320px);
  position: relative;
}

.lgsf-grid__frame{
  position: relative;
  height: clamp(360px, 45vw, 700px);
  background: var(--color-concrete);
  overflow: hidden;
}

.lgsf-grid__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* This specific technical/annotated photo must show every callout —
   contain instead of cover so no dimension or label is cropped. */
.lgsf-grid__frame--contain img{
  object-fit: contain;
  background: var(--color-concrete);
}

.lgsf-grid__caption{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-label);
}

.lgsf-grid__caption-rule{
  display: block;
  width: clamp(24px, 3vw, 52px);
  height: 1px;
  background: var(--color-accent);
}

.lgsf-grid__content{
  flex: 1 1 44%;
  min-width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lgsf-grid__content h2{
  font-size: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: 1.07;
  letter-spacing: -.032em;
}

.lgsf-grid__content > p{
  margin-top: clamp(20px, 2vw, 30px);
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: 1.66;
  color: var(--color-text-body-1);
}

/* Featured projects grid */

.project-grid__row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-top: clamp(40px, 4.5vw, 84px);
  align-items: flex-start;
}

.project-card--feature .project-card__media{
  height: clamp(300px, 44vw, 680px);
}

.project-card--wide{
  flex: 1 1 56%;
  min-width: min(100%, 300px);
}

.project-card--wide .project-card__media{
  height: clamp(280px, 38vw, 560px);
}

.project-card--narrow{
  flex: 1 1 34%;
  min-width: min(100%, 280px);
  padding-top: clamp(0px, 4vw, 72px);
}

.project-card--narrow .project-card__media{
  height: clamp(280px, 32vw, 470px);
}

/* Construction process track */

.process-track{
  display: flex;
  flex-wrap: wrap;
}

/* Credibility / statistics band */

.stats-band{
  display: flex;
  flex-wrap: wrap;
}

.stat{
  flex: 1 1 22%;
  min-width: min(50%, 180px);
  padding: clamp(8px, 1vw, 14px) clamp(16px, 2vw, 36px);
  border-left: 1px solid rgba(245,244,240,.18);
}

.stat:first-child{
  border-left: 0;
  padding-left: 0;
}

.stat__value{
  font-family: var(--font-heading);
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: var(--weight-regular);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--color-on-dark);
}

.stat__label{
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-on-dark-60);
}

.stats-band__note{
  margin-top: clamp(24px, 2.6vw, 40px);
  padding-top: 16px;
  border-top: 1px solid rgba(245,244,240,.14);
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-on-dark-45);
}

/* Why ArtForm */

.about-grid{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 100px);
  align-items: flex-start;
}

.about-grid__intro{
  flex: 1 1 34%;
  min-width: min(100%, 300px);
  position: sticky;
  top: clamp(90px, 11vw, 140px);
}

.about-grid__intro h2{
  font-size: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: 1.05;
  letter-spacing: -.032em;
}

.about-grid__intro p{
  margin-top: clamp(20px, 2vw, 30px);
  max-width: 38ch;
  font-size: var(--text-body);
  line-height: 1.66;
  color: var(--color-text-body-1);
}

.about-grid__list{
  flex: 1 1 52%;
  min-width: min(100%, 320px);
}

@media (max-width: 767px){
  .about-grid__intro{
    position: static;
  }
}

/* ---------- Objekti overview page ---------- */

/* Section 01 — light architectural intro hero (as opposed to the dark,
   full-bleed homepage hero). */

.page-hero{
  padding-top: calc(var(--nav-height) + clamp(56px, 7vw, 110px));
  padding-bottom: clamp(56px, 7vw, 110px);
}

.page-hero__row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: center;
}

.page-hero__text{
  flex: 1 1 min(100%, 560px);
  position: relative;
}

.page-hero__text h1{
  margin-top: clamp(16px, 1.8vw, 26px);
  font-size: var(--text-display);
  font-weight: var(--weight-medium);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.page-hero__text p{
  margin-top: clamp(20px, 2.2vw, 30px);
  max-width: 56ch;
  font-size: var(--text-body-lg);
  line-height: 1.62;
  color: var(--color-text-body-1);
}

.page-hero__media{
  flex: 1 1 min(100%, 420px);
}

.page-hero__media-frame{
  position: relative;
  height: clamp(260px, 30vw, 420px);
  background: var(--color-concrete);
  overflow: hidden;
}

.page-hero__media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section 02 — editorial category grid. A shared card primitive
   (.category-feature) with size/layout modifiers, not six identical tiles. */

.category-feature{
  display: block;
  color: inherit;
}

.category-feature__media{
  position: relative;
  overflow: hidden;
  background: var(--color-concrete);
  color: var(--color-text-muted);
}

.category-feature__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-media) var(--ease-standard);
}

.category-feature:hover .category-feature__media img{
  transform: scale(1.03);
}

.category-feature__index{
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

.category-feature__desc{
  margin-top: 8px;
  max-width: 46ch;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-body-1);
}

.category-feature__row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
}

.category-feature__info{
  flex: 1 1 420px;
}

/* --lg: Montažne kuće, Hale — the two dominant, full-width horizontal features */

.category-feature--lg .category-feature__media{
  height: clamp(320px, 38vw, 560px);
}

.category-feature--lg .category-feature__title{
  margin-top: 10px;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.category-feature--lg .category-feature__row{
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: 16px;
  border-top: 1px solid var(--color-on-light-border);
}

/* --pair: Garaže, Vikendice — two medium blocks side by side */

.category-feature-pair{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.category-feature--pair{
  flex: 1 1 min(100%, 380px);
}

.category-feature--pair .category-feature__media{
  height: clamp(240px, 28vw, 360px);
}

.category-feature--pair .category-feature__title{
  margin-top: 10px;
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -.015em;
}

.category-feature--pair .category-feature__cta{
  margin-top: 14px;
}

/* --split: Letnje kuhinje — wide image/text split, vertically centered */

.category-feature--split{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: center;
}

.category-feature--split .category-feature__media{
  flex: 1 1 50%;
  min-width: min(100%, 340px);
  height: clamp(300px, 32vw, 460px);
}

.category-feature--split .category-feature__body{
  flex: 1 1 42%;
  min-width: min(100%, 320px);
}

.category-feature--split .category-feature__title{
  margin-top: 10px;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.category-feature--split .category-feature__desc{
  max-width: 42ch;
}

.category-feature--split .category-feature__cta{
  margin-top: clamp(18px, 2vw, 26px);
}

/* --closing: Kamini i roštilji — full-bleed dark closing block, image + overlaid copy */

.category-feature--closing{
  position: relative;
  overflow: hidden;
  height: clamp(360px, 42vw, 560px);
  color: var(--color-warm-white);
}

.category-feature--closing .category-feature__media{
  position: absolute;
  inset: 0;
  height: auto;
}

.category-feature--closing .category-feature__scrim{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(20,23,22,.78) 0%, rgba(20,23,22,.52) 40%, rgba(20,23,22,.18) 75%, rgba(20,23,22,.04) 100%);
}

.category-feature--closing .category-feature__body{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 48px);
  max-width: min(100%, 560px);
}

.category-feature--closing .category-feature__index{
  color: var(--color-on-dark-72);
}

.category-feature--closing .category-feature__title{
  margin-top: 10px;
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.category-feature--closing .category-feature__desc{
  color: var(--color-on-dark-80);
}

.category-feature--closing .category-feature__cta{
  margin-top: clamp(18px, 2vw, 26px);
}

.category-feature--closing .link-arrow{
  color: var(--color-warm-white);
  border-bottom-color: rgba(245,244,240,.4);
}

.category-feature--closing .link-arrow:hover{
  border-bottom-color: var(--color-accent);
}

@media (max-width: 767px){
  .category-feature--split{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Projects carousel (homepage "Izdvojeni projekti") ---------- */
/* A native scroll-snap gallery, not a JS-transform slider — free momentum
   scrolling and touch/trackpad swipe from the browser; main.js only adds
   arrow/dot controls and optional mouse-drag on top. */

.carousel{
  position: relative;
}

.carousel-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  /* hide scrollbar across engines — native scroll/swipe remains fully functional */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-viewport::-webkit-scrollbar{
  display: none;
}

.carousel-viewport.is-dragging{
  cursor: grabbing;
  scroll-snap-type: none;
}

.carousel-track{
  display: flex;
  gap: var(--gap-md);
  width: max-content;
}

.project-slide{
  display: block;
  /* vw, not %: .carousel-track is width:max-content (sized to fit its
     children), so a %-based flex-basis here resolves circularly against
     that indeterminate size and always pins to the clamp ceiling. vw is
     relative to the viewport instead, so it stays genuinely fluid. */
  flex: 0 0 clamp(300px, 62vw, 760px);
  scroll-snap-align: start;
  color: inherit;
}

.project-slide__media{
  position: relative;
  overflow: hidden;
  background: var(--color-concrete);
  color: var(--color-text-muted);
  aspect-ratio: 4 / 3;
}

.project-slide__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-standard);
}

.project-slide:hover .project-slide__media img{
  transform: scale(1.03);
}

.project-slide__meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--color-on-light-border);
  margin-top: 18px;
  padding-top: 14px;
}

.project-slide__title{
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.project-slide__type{
  font-family: var(--font-body);
  font-size: var(--text-metadata);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-body-3);
}

/* Ready for real data — not rendered on the placeholder slides yet. */
.project-slide__status{
  display: inline-block;
  margin-top: 10px;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-body-1);
  border: 1px solid var(--color-on-light-border-strong);
}

.carousel-arrows{
  display: flex;
  gap: 10px;
}

.carousel-arrow{
  appearance: none;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-on-light-border-strong);
  color: var(--color-graphite);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.carousel-arrow:hover{
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.carousel-arrow:disabled{
  opacity: .35;
  cursor: default;
  border-color: var(--color-on-light-border);
  color: var(--color-graphite);
}

.carousel-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: clamp(24px, 2.6vw, 36px);
}

.carousel-dot{
  appearance: none;
  padding: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--color-concrete);
  cursor: pointer;
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.carousel-dot:hover{
  background: var(--color-on-light-motif);
}

.carousel-dot.is-active{
  background: var(--color-accent);
  transform: scale(1.3);
}

@media (max-width: 1023px){
  .project-slide{
    flex-basis: clamp(280px, 82vw, 560px);
  }
}

@media (max-width: 767px){
  .project-slide{
    /* Same %-in-max-content pitfall as above — derive full content width
       from the viewport and the real page-padding token instead of "100%". */
    flex-basis: calc(100vw - 2 * var(--page-padding-x));
  }

  .carousel-arrows{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .carousel-viewport{
    scroll-behavior: auto;
  }

  .project-slide__media img{
    transition: none;
  }
}

/* ---------- LGSF tehnologija page ---------- */

/* Two-column variant of .feature-row for a longer list (8 benefits) where a
   single stacked column would run too long. Same item/index/title/desc
   classes — only the container changes from a stack to a wrapping grid. */

.feature-row--grid{
  display: flex;
  flex-wrap: wrap;
  border-top: none;
}

.feature-row--grid .feature-row__item{
  flex: 1 1 calc(50% - 18px);
  min-width: min(100%, 280px);
  border-top: 1px solid var(--color-on-light-border);
  border-bottom: none;
}

/* FAQ accordion — native <details>/<summary>, no JS required */

.faq{
  border-top: 1px solid var(--color-on-light-border);
  max-width: 860px;
}

.faq-item{
  border-bottom: 1px solid var(--color-on-light-border);
}

.faq-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2vw, 26px) 0;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

.faq-item summary h3{
  font-size: var(--text-subheading);
  font-weight: var(--weight-medium);
  letter-spacing: -.01em;
}

.faq-item__icon{
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) ease;
}

.faq-item__icon::before,
.faq-item__icon::after{
  content: '';
  position: absolute;
  background: var(--color-graphite);
}

.faq-item__icon::before{
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.faq-item__icon::after{
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item[open] .faq-item__icon{
  transform: rotate(45deg);
}

.faq-item__answer{
  max-width: 64ch;
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: var(--text-body);
  line-height: 1.62;
  color: var(--color-text-body-1);
}

/* Applications grid — thin-bordered link cells, no icons/shadows */

.applications-grid{
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-on-light-border);
  border-left: 1px solid var(--color-on-light-border);
}

.applications-grid a{
  flex: 1 1 33.33%;
  min-width: min(100%, 230px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: inherit;
  border-right: 1px solid var(--color-on-light-border);
  border-bottom: 1px solid var(--color-on-light-border);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.applications-grid a:hover{
  background: var(--color-warm-white);
  color: var(--color-accent);
}

.applications-grid a svg{
  flex: 0 0 auto;
  opacity: .5;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.applications-grid a:hover svg{
  opacity: 1;
  transform: translate(3px, -3px);
}

@media (max-width: 640px){
  .applications-grid a{
    flex-basis: 100%;
  }
}

/* ---------- LGSF page — compact editorial refinements ---------- */
/* Scoped to [data-page="lgsf"] on <body> so no other page is affected:
   narrower container, tighter section rhythm, and a handful of new
   storytelling components (facts strip, flow chain, wall layer stack,
   asymmetric advantages grid). */

[data-page="lgsf"] .container{
  max-width: 1280px;
}

[data-page="lgsf"] .section{
  padding-block: clamp(48px, 6vw, 88px);
}

[data-page="lgsf"] .section--lg{
  padding-block: clamp(52px, 6.5vw, 96px);
}

[data-page="lgsf"] .section--sm{
  padding-block: clamp(28px, 3.4vw, 52px);
}

.lgsf-copy{
  max-width: 680px;
}

.lgsf-copy p + p{
  margin-top: 14px;
}

/* Facts strip — compact label/value row, used as a quick-scan break */

.fact-strip{
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--color-on-light-border);
  border-bottom: 1px solid var(--color-on-light-border);
}

.fact-strip__item{
  flex: 1 1 200px;
  padding: 16px clamp(16px, 2vw, 26px);
  border-left: 1px solid var(--color-on-light-border);
}

.fact-strip__item:first-child{
  border-left: none;
}

.fact-strip__label{
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

.fact-strip__value{
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  font-weight: var(--weight-medium);
  letter-spacing: -.01em;
  color: var(--color-graphite);
  line-height: 1.3;
}

@media (max-width: 640px){
  .fact-strip__item{
    flex-basis: 50%;
    border-left: none;
    border-top: 1px solid var(--color-on-light-border);
  }

  .fact-strip__item:nth-child(odd){
    padding-left: 0;
  }
}

/* Flow chain — a compact, typographic process chain (digital project →
   profile, or steel → zinc → wall assembly → durability). No photos, no
   cards — just nodes and connectors, reads fast. */

.flow-chain{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid var(--color-on-light-border);
}

.flow-chain__node{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px clamp(14px, 1.6vw, 22px);
}

.flow-chain__node-label{
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-label);
}

.flow-chain__node-title{
  font-family: var(--font-heading);
  font-size: clamp(13.5px, 1vw, 15.5px);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
  white-space: nowrap;
}

.flow-chain__arrow{
  flex: 0 0 auto;
  display: flex;
  color: var(--color-accent);
  opacity: .6;
  padding: 0 2px;
}

@media (max-width: 767px){
  .flow-chain{
    flex-direction: column;
    align-items: stretch;
  }

  .flow-chain__node{
    border-top: 1px solid var(--color-on-light-border);
  }

  .flow-chain__node:first-child{
    border-top: none;
  }

  .flow-chain__node-title{
    white-space: normal;
  }

  .flow-chain__arrow{
    display: none;
  }
}

/* Wall layer stack — typographic cross-section, top to bottom */

.layer-stack{
  border: 1px solid var(--color-on-light-border);
}

.layer-stack__row{
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--color-on-light-border);
}

.layer-stack__row:last-child{
  border-bottom: none;
}

.layer-stack__row:nth-child(odd){
  background: rgba(32, 35, 34, .02);
}

.layer-stack__index{
  flex: 0 0 26px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--color-text-label);
}

.layer-stack__label{
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
}

/* Advantages — asymmetric editorial grid: 3 dominant blocks + 6 compact ones */

.advantages-primary{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tile);
}

.advantage--lg{
  flex: 1 1 300px;
  min-width: min(100%, 280px);
  padding: clamp(24px, 2.6vw, 38px);
  border: 1px solid var(--color-on-light-border);
}

.advantage--lg .advantage__index{
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.advantage--lg h3{
  margin-top: 14px;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: var(--weight-medium);
  letter-spacing: -.02em;
}

.advantage--lg ul{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advantage--lg li{
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-body-3);
}

.advantage--lg li::before{
  content: '';
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
}

.advantages-secondary{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tile);
  margin-top: var(--gap-tile);
}

.advantage--sm{
  flex: 1 1 calc(33.333% - 22px);
  min-width: min(100%, 220px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--color-on-light-border);
}

.advantage--sm h4{
  font-size: 15px;
  font-weight: var(--weight-medium);
  letter-spacing: -.01em;
}

.advantage--sm p{
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-body-3);
}

/* Full-bleed photo break — a deliberate pause, not a repeated pattern */

.photo-break{
  position: relative;
  height: clamp(280px, 34vw, 460px);
  overflow: hidden;
  background: var(--color-concrete);
}

.photo-break img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-break__caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(16px, 2vw, 28px) clamp(20px, 4vw, 56px);
  background: linear-gradient(to top, rgba(20,23,22,.65) 0%, rgba(20,23,22,0) 100%);
  color: var(--color-on-dark-82);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .04em;
}