.home-page #about, .home-page #services, .home-page #projects { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* Hero slider */
.hero-section { padding: calc(var(--nav-h) + clamp(8px, 1vw, 14px)) var(--gut) 0; }
.hero-slider { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--nav-h) - 28px); overflow: hidden; isolation: isolate; background: #14100c; color: #fff; }
.hero-slider.theme-dark { color: #21190f; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; visibility: hidden; transition: opacity .75s ease, visibility .75s ease; }
.hero-slide.active { z-index: 1; opacity: 1; visibility: visible; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--object-position, center); transform: scale(1.005); }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,8,5,.56), rgba(12,8,5,.2) 31%, transparent 58%), linear-gradient(to top, rgba(9,6,4,.34), transparent 30%); pointer-events: none; }
.hero-slide[data-theme="dark"]::after { background: linear-gradient(90deg, rgba(255,250,238,.3), rgba(255,250,238,.1) 33%, transparent 60%), linear-gradient(to top, rgba(70,42,13,.12), transparent 28%); }
.slide-copy { position: absolute; z-index: 2; top: clamp(24px, 4vw, 62px); left: clamp(28px, 4.2vw, 66px); width: min(33vw, 430px); color: inherit; }
.slide-title { font-size: clamp(44px, 5.2vw, 82px); font-weight: 400; line-height: .88; letter-spacing: .015em; }
.slide-eyebrow { margin-top: clamp(12px, 1.15vw, 18px); font-size: clamp(17px, 1.42vw, 23px); line-height: 1.2; }
.slide-desc { max-width: 410px; margin-top: clamp(13px, 1.25vw, 20px); font-size: clamp(16px, 1.22vw, 20px); line-height: 1.34; opacity: .9; }
.slide-store { display: inline-block; margin-top: clamp(20px, 2.2vw, 34px); padding-bottom: 3px; border-bottom: 1px solid currentColor; color: inherit; font-size: clamp(15px, 1.12vw, 18px); line-height: 1; text-decoration: none; transition: color .22s ease, border-color .22s ease; }
.slide-store:hover, .slide-store:focus-visible { color: var(--orange); border-color: var(--orange); }
.slide-meta { position: absolute; z-index: 4; left: clamp(28px, 4.2vw, 66px); bottom: clamp(18px, 2vw, 30px); display: flex; align-items: baseline; gap: clamp(16px, 2vw, 30px); color: inherit; font-size: clamp(13px, 1.04vw, 17px); }
.slide-count { letter-spacing: .08em; }
.slider-since { position: absolute; right: clamp(26px, 3.6vw, 58px); bottom: clamp(16px, 1.8vw, 28px); z-index: 4; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: end; column-gap: 7px; color: inherit; font-size: clamp(9px, .68vw, 11px); line-height: .9; text-transform: uppercase; letter-spacing: .08em; }
.slider-since::after { content: ''; grid-column: 1; grid-row: 2; width: 28px; height: 1px; margin-top: 5px; background: currentColor; opacity: .75; }
.slider-since span:first-child { grid-column: 1 / 3; grid-row: 1; }
.slider-since span:last-child { grid-column: 2; grid-row: 2; }
.slider-arrow { position: absolute; z-index: 5; top: 50%; width: 44px; height: 60px; transform: translateY(-50%); border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .7; transition: opacity .22s ease, color .22s ease; }
.slider-arrow:hover, .slider-arrow:focus-visible { opacity: 1; color: var(--orange); }
.slider-arrow svg { width: 18px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.slider-prev { left: clamp(6px, 1vw, 16px); }
.slider-next { right: clamp(6px, 1vw, 16px); }
.slider-dots { position: absolute; z-index: 5; left: 50%; bottom: clamp(16px, 1.8vw, 28px); transform: translateX(-50%); display: flex; align-items: center; gap: 7px; }
.slider-dot { width: clamp(22px, 2.4vw, 38px); height: 14px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.slider-dot::before { content: ''; display: block; width: 100%; height: 2px; background: #e0e0e0; transition: background-color .24s ease; }
.slider-dot.active::before { background: #aa865b; }

/* Links under slider and Who we are */
.home-intro { position: relative; overflow: hidden; background: var(--paper); }
.journey-links { position: relative; z-index: 1; width: calc(100% - 2 * var(--gut)); max-width: var(--maxw); height: clamp(390px, 34vw, 510px); margin-inline: auto; }
.journey-link { --pillar-height: clamp(142px, 12vw, 184px); --pillar-hover-height: clamp(310px, 29vw, 440px); --pillar-width: clamp(100px, 8.7vw, 132px); position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: var(--pillar-height); min-width: clamp(180px, 18vw, 280px); padding-top: clamp(38px, 3.6vw, 54px); color: var(--ink); text-align: center; text-decoration: none; touch-action: manipulation; }
.journey-link::before { content: ''; position: absolute; z-index: 0; top: 0; left: 50%; width: var(--pillar-width); height: var(--pillar-height); transform: translateX(-50%); background: #deddd9; transition: height .7s cubic-bezier(.2,.76,.18,1), width .68s cubic-bezier(.2,.76,.18,1), background-color .3s ease; }
.journey-kicker, .journey-title { position: relative; z-index: 1; display: block; transition: transform .72s cubic-bezier(.2,.76,.18,1); }
.journey-kicker { color: var(--muted); font-size: clamp(22px, 2.4vw, 38px); line-height: .96; }
.journey-title { font-size: clamp(42px, 5.4vw, 78px); line-height: .82; letter-spacing: -.025em; }
.journey-link:focus-visible::before, .journey-link.is-pressed::before { height: var(--pillar-hover-height); background: var(--pillar-hover); }
.journey-link:focus-visible .journey-kicker, .journey-link:focus-visible .journey-title, .journey-link.is-pressed .journey-kicker, .journey-link.is-pressed .journey-title { transform: translateY(var(--journey-text-shift)); }
.journey-store { top: 0; left: 50%; transform: translateX(-50%); --pillar-hover-height: clamp(270px, 25vw, 380px); --journey-text-shift: clamp(24px, 3vw, 46px); }
.journey-start { bottom: 0; left: calc(25% - clamp(6px, .75vw, 12px)); padding-top: clamp(30px, 2.7vw, 40px); transform: translateX(-50%); --journey-text-shift: clamp(-118px, -7vw, -72px); }
.journey-featured { right: calc(25% - clamp(6px, .75vw, 12px)); bottom: 0; padding-top: clamp(26px, 2.2vw, 34px); transform: translateX(50%); --journey-text-shift: clamp(-118px, -7vw, -72px); }
.journey-start::before, .journey-featured::before { top: auto; bottom: 0; }

@media (hover: hover) and (pointer: fine) {
  .journey-link:hover::before { height: var(--pillar-hover-height); background: var(--pillar-hover); }
  .journey-link:hover .journey-kicker, .journey-link:hover .journey-title { transform: translateY(var(--journey-text-shift)); }
}

.who { position: relative; z-index: 2; width: calc(100% - 2 * var(--gut)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; padding-inline: 0; padding-bottom: clamp(40px, 5.5vw, 78px); }
.who-copy { display: flex; min-width: 0; flex-direction: column; }
.who h2 { width: 100%; min-height: clamp(58px, 5.5vw, 84px); display: flex; align-items: center; justify-content: center; padding-inline: .16em; background: #221f20; color: #fff; font-size: clamp(42px, 5.6vw, 82px); font-weight: 400; line-height: .88; letter-spacing: -.025em; text-align: center; white-space: nowrap; }
.who h2 span { display: block; transform: translateY(clamp(6px, .5vw, 8px)); }
.who p { width: 100%; margin-top: clamp(18px, 2.2vw, 30px); padding-inline: clamp(4px, .5vw, 8px); color: #252525; font-size: clamp(17px, 1.48vw, 23px); line-height: 1.42; }
.who-img { min-height: clamp(280px, 27vw, 420px); overflow: hidden; padding: clamp(8px, .75vw, 12px) 0 0 clamp(8px, .75vw, 12px); background: #221f20; }
.who-img img { display: block; width: 100%; height: calc(100% + 14px); margin-top: -14px; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.06); clip-path: inset(14px 0 0); transition: transform .75s ease; }
.who-img:hover img { transform: scale(1.025); }

/* Services */
.services { position: relative; padding: clamp(34px, 4.5vw, 68px) var(--gut) clamp(24px, 3.6vw, 54px); }
.services-word { text-align: right; font-size: clamp(68px, 8.6vw, 132px); font-weight: 400; line-height: .86; letter-spacing: -.035em; }
.services-stage { position: relative; min-height: clamp(260px, 25vw, 380px); margin-top: clamp(26px, 3.3vw, 50px); display: flex; justify-content: flex-end; align-items: flex-start; }
.services-stack { --svc-label-width: clamp(170px, 15.5vw, 245px); width: min(58%, 960px); list-style: none; display: flex; flex-direction: column; align-items: flex-end; }
.svc-item { width: var(--svc-width); color: var(--ink); transition: color .72s ease; }
.svc-item:nth-child(1) { --svc-width: 34%; }
.svc-item:nth-child(2) { --svc-width: 48%; }
.svc-item:nth-child(3) { --svc-width: 65%; }
.svc-item:nth-child(4) { --svc-width: 100%; }
.svc-trigger { width: 100%; min-height: clamp(44px, 3.55vw, 58px); display: grid; grid-template-columns: var(--svc-label-width) minmax(0, 1fr); align-items: stretch; padding: 0; border: 0; background: transparent; color: inherit; text-align: right; cursor: pointer; transition: min-height 1.3s cubic-bezier(.22, 1, .36, 1); }
.svc-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding: 0 clamp(12px, 1.2vw, 18px) clamp(8px, .8vw, 12px) 0; }
.svc-name { font-size: clamp(26px, 2.35vw, 38px); line-height: 1.02; letter-spacing: -.01em; white-space: nowrap; }
.svc-bar { width: 100%; min-width: 0; height: 100%; background: var(--ink); transition: background-color .72s ease; }
.svc-detail { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; margin-top: 0; transform: translateY(-10px); transition: grid-template-rows 1.3s cubic-bezier(.22, 1, .36, 1), opacity .82s ease .18s, transform 1.15s cubic-bezier(.22, 1, .36, 1), margin-top 1.15s cubic-bezier(.22, 1, .36, 1); }
.svc-detail-inner { display: block; min-height: 0; overflow: hidden; }
.svc-detail-inner > span { display: block; color: #252525; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.52; white-space: nowrap; cursor: pointer; transition: color .24s ease; }
.svc-detail-inner > span:hover { color: var(--orange); }
.services-stack.has-active .svc-item:not(.is-active) { color: #d9d9d9; }
.services-stack.has-active .svc-item:not(.is-active) .svc-bar { background: #e0e0e0; }
.svc-item.is-active { color: var(--ink); }
.svc-item.is-active .svc-trigger { min-height: clamp(154px, 12.5vw, 198px); }
.svc-item.is-active .svc-bar { background: var(--ink); }
.svc-item.is-active .svc-detail { grid-template-rows: 1fr; margin-top: clamp(10px, 1.1vw, 16px); opacity: 1; transform: none; }
.svc-trigger:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }

/* Featured projects */
.feat-head { padding: 0 0 clamp(26px, 3.4vw, 52px); }
.feat-head h2 { font-size: clamp(52px, 5.6vw, 86px); font-weight: 400; line-height: .84; letter-spacing: -.035em; }
.proj { display: flex; flex-direction: column; gap: clamp(12px, 1.1vw, 18px); padding-bottom: clamp(44px, 6vw, 90px); }
.band { display: grid; gap: clamp(12px, 1.1vw, 18px); }
.bandA { grid-template-columns: 1.6fr 1fr; }
.bandB { grid-template-columns: 1.18fr .52fr .82fr; grid-template-rows: clamp(250px, 24vw, 370px) clamp(180px, 18vw, 275px); grid-template-areas: 'boy nom quote' 'vis nom teh'; align-items: stretch; }
.card { position: relative; overflow: hidden; display: block; min-width: 0; background: #111; color: #fff; text-decoration: none; isolation: isolate; }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.03); transform: scale(1.002); transition: transform .72s cubic-bezier(.2,.72,.2,1), filter .45s ease; }
.card:hover img, .card:focus-visible img { transform: scale(1.035); filter: grayscale(0) contrast(1.02); }
.card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.project-label { position: absolute; z-index: 2; top: clamp(13px, 1.3vw, 21px); left: clamp(13px, 1.3vw, 21px); display: flex; flex-direction: column; align-items: flex-start; color: #fff; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.28); pointer-events: none; }
.project-name { font-size: clamp(25px, 2.45vw, 39px); font-weight: 400; line-height: .84; letter-spacing: -.012em; }
.project-meta { display: flex; flex-direction: column; align-items: flex-start; margin-top: clamp(2px, .28vw, 5px); font-size: clamp(13px, 1.14vw, 18px); font-weight: 400; line-height: 1.02; letter-spacing: .025em; opacity: .76; }
.bandA .card { height: clamp(210px, 24vw, 365px); }
.c-lamb .project-label { top: auto; bottom: clamp(13px, 1.3vw, 21px); }
.a-boy { grid-area: boy; min-height: 0; background: #e7e0d8; }
.a-boy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; transform: scale(1.002); }
.a-boy:hover img, .a-boy:focus-visible img { transform: scale(1.035); }
.a-nom { grid-area: nom; min-height: 0; background: #ebe6df; }
.a-nom img { object-position: center 62%; }
.a-teh { grid-area: teh; min-height: 0; }
.a-quote { grid-area: quote; display: flex; align-items: flex-start; padding: clamp(2px, .35vw, 6px) 0 0 clamp(2px, .4vw, 8px); }
.a-vis { grid-area: vis; display: flex; align-items: flex-start; padding: clamp(4px, .45vw, 7px) clamp(12px, 2vw, 28px) clamp(8px, 1vw, 14px) 0; }
.a-quote p, .a-vis p { font-size: clamp(20px, 1.78vw, 28px); font-weight: 400; line-height: 1.44; letter-spacing: -.004em; color: #252525; }
.a-vis p { max-width: 520px; }
.c-flat { aspect-ratio: 4.15 / 1; }
.c-flat img { object-position: center 27%; }

@media (max-width: 1000px) {
  .bandB { grid-template-columns: 1fr 1fr; grid-template-areas: 'boy nom' 'quote nom' 'teh vis'; }
  .a-quote { align-items: center; }
  .services-stack { --svc-label-width: clamp(165px, 25vw, 230px); width: 76%; }
}

@media (max-width: 760px) {
  .hero-section { padding: var(--nav-h) 0 0; }
  .hero-slider { aspect-ratio: 4 / 5; max-height: none; }
  .slide-copy { top: clamp(34px, 8vw, 54px); left: 24px; width: min(76vw, 350px); }
  .slide-title { font-size: clamp(42px, 13vw, 64px); }
  .slide-eyebrow { margin-top: clamp(24px, 6vw, 34px); font-size: 15px; }
  .slide-desc { max-width: 285px; font-size: 14px; }
  .slide-meta { left: 24px; bottom: 21px; gap: 14px; }
  .slider-since { right: 20px; bottom: 19px; }
  .slider-dots { bottom: 22px; gap: 5px; }
  .slider-dot { width: 22px; }
  .slider-arrow { width: 34px; }
  .slider-prev { left: 0; }
  .slider-next { right: 0; }
  .hero-slide[data-slide="laleh"] img, .hero-slide[data-slide="qasedak"] img { object-position: 56% center; }
  .hero-slide[data-slide="rija-family"] img, .hero-slide[data-slide="akbar-mashti"] img { object-position: 58% center; }
  .hero-slide[data-slide="damavand"] img { object-position: 62% center; }

  .journey-links { width: 100%; height: auto; display: grid; grid-template-columns: 1fr; gap: 22px; padding: 54px var(--gut) 58px; }
  .journey-link, .journey-store, .journey-start, .journey-featured { position: relative; inset: auto; min-width: 0; min-height: 108px; height: auto; padding: 18px 18px 18px 96px; transform: none; align-items: flex-start; justify-content: center; text-align: left; }
  .journey-link { --pillar-hover-width: min(74%, 250px); overflow: hidden; }
  .journey-link::before { top: 0; bottom: auto; left: 18px; width: 58px; height: 100%; transform: none; }
  .journey-link:hover::before, .journey-link:focus-visible::before, .journey-link.is-pressed::before, .journey-link.is-expanded::before, .journey-link:active::before { width: var(--pillar-hover-width); height: 100%; background: var(--pillar-hover); }
  .journey-link:hover .journey-kicker, .journey-link:hover .journey-title, .journey-link:focus-visible .journey-kicker, .journey-link:focus-visible .journey-title, .journey-link.is-pressed .journey-kicker, .journey-link.is-pressed .journey-title, .journey-link.is-expanded .journey-kicker, .journey-link.is-expanded .journey-title, .journey-link:active .journey-kicker, .journey-link:active .journey-title { transform: translateX(clamp(-76px, -12vw, -56px)); }
  .journey-kicker { margin-bottom: 2px; font-size: 22px; }
  .journey-title { font-size: clamp(42px, 13vw, 62px); }

  .who { grid-template-columns: 1fr; gap: 22px; }
  .who h2 { white-space: normal; }
  .who-img { min-height: 0; aspect-ratio: 16 / 9; }
  .services-stage { min-height: 0; margin-top: 40px; }
  .services-stack { width: 100%; align-items: stretch; }
  .services-stack > .svc-item { width: 100%; margin-inline-start: 0; }
  .services-stack > .svc-item:nth-child(1) { --svc-step-bar: clamp(44px, 12vw, 64px); }
  .services-stack > .svc-item:nth-child(2) { --svc-step-bar: clamp(62px, 17vw, 88px); }
  .services-stack > .svc-item:nth-child(3) { --svc-step-bar: clamp(80px, 22vw, 112px); }
  .services-stack > .svc-item:nth-child(4) { --svc-step-bar: clamp(98px, 27vw, 136px); }
  .svc-trigger { grid-template-columns: minmax(0, 1fr) var(--svc-step-bar); }
  .svc-name { font-size: clamp(22px, 7.8vw, 32px); }
  .svc-detail-inner > span { font-size: clamp(13px, 4.2vw, 16px); }
  .svc-item.is-active .svc-trigger { min-height: 176px; }
  .bandA { grid-template-columns: 1fr; }
  .bandB { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: 'boy' 'nom' 'quote' 'teh' 'vis'; }
  .a-boy, .a-nom { aspect-ratio: 4 / 5; }
  .a-nom img { object-position: center bottom; }
  .a-teh { aspect-ratio: 16 / 9; }
  .a-quote, .a-vis { padding: 5px 0; }
  .c-flat { aspect-ratio: 1 / 1; }
  .c-flat img { object-position: center 42%; }
}

@media (max-width: 480px) {
  .slide-desc { max-width: 250px; }
  .slider-arrow { display: none; }
  .feat-head h2 { font-size: clamp(46px, 16vw, 90px); }
  .project-name { font-size: 25px; }
  .project-meta { font-size: 14px; }
}