/* ==========================================================================
   Özer+Tulgan Architects — static site
   Brand tokens come straight from the InDesign portfolio.
   ========================================================================== */

:root {
  --red: #ef2e31;
  --red-mark: #e02b2d;
  --red-deep: #a51e20;
  --red-dark: #7a1515;
  --gray: #c1c0c1;
  --charcoal: #444141;
  --ink: #111;
  --paper: #fff;
  --gutter: clamp(20px, 3.4vw, 65px);

  /* Licensed fonts: if you self-host Myriad Pro / Nice Headline (see the
     @font-face template at the bottom of this file), put them FIRST in
     these stacks. The remaining families are free stand-ins. */
  --f-sans: "Myriad Pro", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --f-head: "Nice Headline", "Newsreader", Georgia, serif;
  --f-bold: "Archivo", "Source Sans 3", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
em { font-family: var(--f-head); font-style: italic; font-weight: 400; }

/* Brand marks ------------------------------------------------------------- */
.mark { fill: currentColor; display: block; flex: none;
  width: calc(var(--w, 64.6) * 0.0417vw); height: calc(var(--h, 62.8) * 0.0417vw);
  min-width: 26px; }
.founded__marks .mark { width: calc(var(--w) * 0.052vw); height: calc(var(--h) * 0.052vw); min-width: 0; }
.mark--j { color: var(--red); width: clamp(34px, 3.4vw, 64px); height: clamp(33px, 3.3vw, 62px); }
.mark--j.mark--sm { width: clamp(16px, 1.6vw, 30px); height: clamp(15px, 1.55vw, 29px); }
/* use <symbol> viewBoxes: svg elements need their own viewBox via <use> */
.mark, .bracket { overflow: visible; }

.section-title {
  font-family: var(--f-head); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 2.1vw, 2.6rem); color: #fff; letter-spacing: .005em;
}

/* Reveal ------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 1 · Cover --------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; min-height: max(560px, 100svh); color: #fff; overflow: hidden; background: #cfcfcf; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; }
.hero__logo { position: absolute; top: clamp(24px, 4.3vw, 82px); left: var(--gutter); width: clamp(220px, 45vw, 870px); color: #000; }
.logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-svg .ltr { fill: currentColor; }
.logo-svg .plus { fill: var(--logo-plus, var(--red)); }
.hero__tagline { position: absolute; left: var(--gutter); bottom: 25%; font-size: clamp(1.15rem, 1.75vw, 2.1rem); letter-spacing: .005em; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.hero__meta { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 3.4vw, 56px); display: flex; justify-content: space-between; gap: 1rem; font-size: clamp(.8rem, .95vw, 1.1rem); }
.hero__meta li:nth-child(2) { margin-left: auto; margin-right: auto; }

/* 2 · Intro --------------------------------------------------------------- */
.intro { position: relative; padding: clamp(28px, 4.6vw, 88px) var(--gutter) clamp(36px, 5vw, 96px); min-height: 100svh; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.intro .mark--j { color: #5c5c5e; margin-bottom: clamp(20px, 2.5vw, 48px); }
.intro__text { font-family: var(--f-serif); font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 2.1rem); line-height: 1.55; color: #555; max-width: 40ch; margin-left: clamp(0px, 1.1vw, 20px); letter-spacing: .005em; }
.marquee { margin-top: auto; display: grid; gap: .1em; font-size: clamp(1.7rem, 3.75vw, 4.4rem); line-height: 1.25; color: var(--red); white-space: nowrap; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
.marquee__row { overflow: hidden; }
.marquee__track { display: inline-flex; width: max-content; animation: marquee 80s linear infinite; }
.marquee__row--rev .marquee__track { animation-direction: reverse; animation-duration: 95s; }
.marquee span { padding-right: 3.4em; font-family: var(--f-sans); }
.marquee i { font-family: var(--f-head); font-weight: 400; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 3 · Cultural Depth (red) ------------------------------------------------ */
.founded { position: relative; background: var(--red); color: var(--red-dark); min-height: 100svh; padding: clamp(24px, 4vw, 76px) var(--gutter); display: grid; grid-template-rows: auto 1fr auto auto; align-items: start; overflow: hidden; }
.founded__logo { justify-self: end; width: clamp(190px, 22.5vw, 432px); color: #fff; --logo-plus: var(--red-dark); }
.founded__title { align-self: end; display: grid; font-size: clamp(2rem, 3.45vw, 4.2rem); line-height: 1.12; margin-top: 12vh; }
.founded__title em { font-weight: 300; }
.founded__title strong { font-family: var(--f-bold); font-weight: 800; letter-spacing: -.01em; }
.founded__marks { display: flex; align-items: center; gap: clamp(28px, 5vw, 96px); color: var(--red-dark); margin: clamp(22px, 3.2vw, 60px) 0 clamp(60px, 11vh, 190px); }
.founded__marks .mark { min-width: 0; }
.founded__text { display: flex; gap: .9rem; align-items: flex-start; color: #fff; font-size: clamp(.95rem, 1.3vw, 1.6rem); line-height: 1.5; max-width: 62ch; }
.founded__text .mark--j { color: #fff; margin-top: .35em; }
.founded__text b { font-weight: 700; font-style: italic; }
.founded__text em { font-weight: 300; }
.founded__text em b { font-weight: 700; }

/* 4 · Designed to Work ---------------------------------------------------- */
.work { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); min-height: 100svh; background: #fff; }
.work__copy { position: relative; z-index: 2; padding: clamp(24px, 3.4vw, 65px) 0 clamp(24px, 4vw, 70px) var(--gutter); color: var(--red); display: flex; flex-direction: column; }
.work__copy .mark--j { margin-bottom: clamp(28px, 4vw, 80px); }
.work__title { display: grid; line-height: 1.05; font-size: clamp(2.3rem, 5.1vw, 6.2rem); margin-bottom: clamp(24px, 3vw, 56px); white-space: nowrap; }
.work__title em { font-weight: 300; }
.work__title span { font-family: var(--f-sans); }
.work__copy p { font-family: var(--f-serif); font-weight: 600; font-size: clamp(1.05rem, 1.35vw, 1.65rem); line-height: 1.45; max-width: 24em; padding-right: 1rem; }
.work__copy p + p { margin-top: 1.4em; }
.work__img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: 50% 60%; }

/* 5 · Statement + strip --------------------------------------------------- */
.statement { background: #fff; padding: clamp(24px, 3.4vw, 65px) 0 clamp(24px, 4vw, 70px); display: flex; flex-direction: column; min-height: 100svh; }
.statement .mark--j { margin-left: var(--gutter); }
.statement__text { padding: clamp(40px, 8vw, 150px) var(--gutter) clamp(40px, 8vw, 150px) calc(var(--gutter) + 1.2vw); color: var(--red); font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 2.2rem); line-height: 1.95; max-width: 60ch; }
.statement__text em { font-weight: 300; font-size: 1.04em; }
.statement__text span { font-family: var(--f-sans); }
.strip { margin-top: auto; display: grid; gap: .5vw; }
.strip__row { display: flex; gap: .5vw; height: clamp(120px, 12.3vw, 240px); }
.strip__row img { flex: var(--g) 1 0; min-width: 0; height: 100%; object-fit: cover; }

/* 6 · Expertise ----------------------------------------------------------- */
.expertise { background: var(--gray); padding: clamp(24px, 3.4vw, 65px) var(--gutter) clamp(36px, 5vw, 90px); min-height: 100svh; }
.expertise .section-title { margin-bottom: clamp(32px, 5vw, 96px); }
.expertise__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(16px, 2vw, 40px); row-gap: clamp(24px, 3.4vw, 64px); align-items: center; }
.card--img { position: relative; aspect-ratio: 1; }
.card--img img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(25.7% 0, 100% 0, 100% 74.3%, 74.3% 100%, 0 100%, 0 25.7%); }
.bracket { position: absolute; width: 12%; height: auto; aspect-ratio: 45.9 / 44.6; fill: var(--red-mark); }
.bracket--tl { left: 3.7%; top: 4.8%; }
.bracket--br { right: 3.7%; bottom: 4.8%; transform: rotate(180deg); }
.card--txt h3 { font-family: var(--f-sans); font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.55rem); color: #4d4d4f; margin-bottom: .9em; }
.card--txt p { font-family: var(--f-serif); font-weight: 600; font-size: clamp(.98rem, 1.28vw, 1.55rem); line-height: 1.5; color: #555356; max-width: 17.5em; }
.card--txt { padding: 0 1vw; }

/* 7 · Global -------------------------------------------------------------- */
.global { position: relative; background: var(--red-deep); color: #fff; min-height: 100svh; padding: clamp(24px, 3.4vw, 65px) var(--gutter); display: flex; flex-direction: column; overflow: hidden; }
.global__map { position: absolute; left: 10.7%; top: 18.4%; width: 79.4%; height: auto; opacity: .95; pointer-events: none; }
.global__copy { position: relative; margin-top: auto; padding-bottom: clamp(24px, 6vw, 120px); max-width: 58rem; }
.global__lead { font-family: var(--f-head); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1.9vw, 2.3rem); line-height: 1.9; margin-bottom: 1.3em; }
.global__copy p:not(.global__lead) { font-size: clamp(.95rem, 1.4vw, 1.7rem); line-height: 1.9; max-width: 44rem; }

/* 8 · Team ---------------------------------------------------------------- */
.team { background: var(--charcoal); color: #fff; min-height: 100svh; padding: clamp(24px, 3.4vw, 65px) var(--gutter) clamp(36px, 5vw, 90px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "title title" "copy visual"; column-gap: clamp(24px, 4vw, 90px); row-gap: clamp(24px, 4vw, 70px); align-items: end; }
.team .section-title { grid-area: title; }
.team__copy { grid-area: copy; max-width: 31rem; font-size: clamp(.9rem, 1.05vw, 1.3rem); line-height: 2.1; align-self: end; }
.team__copy p + p { margin-top: 1.5em; }
.team__lead { font-family: var(--f-head); font-style: italic; font-weight: 300; font-size: clamp(1rem, 1.28vw, 1.55rem); line-height: 1.9; }
.team__visual { grid-area: visual; position: relative; align-self: start; padding-bottom: 36%; }
.team__img { width: 100%; height: auto; aspect-ratio: 1029 / 577; object-fit: cover; }
.team__marks { position: absolute; inset: 0; color: var(--red-mark); pointer-events: none; }
.team__marks .mark { position: absolute; transform: translate(-50%, -50%); width: calc(var(--w) * .136%); height: auto; aspect-ratio: var(--w) / var(--h); min-width: 0; }

/* Footer ------------------------------------------------------------------ */
.footer { background: #2b2929; color: #d8d6d6; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding: 1.6rem var(--gutter); font-size: .9rem; }
.footer .mark--j { color: var(--red); }
.footer ul { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; margin-left: auto; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 960px) {
  .expertise__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .card--txt-b { order: 0; }
  /* reorder so each image is followed by its text */
  .expertise__grid > :nth-child(5) { order: 7; }
  .expertise__grid > :nth-child(6) { order: 5; }
  .expertise__grid > :nth-child(7) { order: 8; }
  .expertise__grid > :nth-child(8) { order: 6; }
  .card--txt { padding: 0; }
}
@media (max-width: 760px) {
  .hero__tagline { bottom: 22%; }
  .hero__meta { flex-direction: column; gap: .15rem; }
  .hero__meta li:nth-child(2) { margin: 0; }
  .intro, .founded, .statement, .expertise, .global, .team, .work { min-height: 0; }
  .intro { min-height: 82svh; }
  .founded__title { margin-top: 18vh; }
  .work { grid-template-columns: 1fr; }
  .work__copy { padding-right: var(--gutter); }
  .work__title { white-space: normal; font-size: clamp(2.2rem, 11vw, 4rem); }
  .work__img { height: 70vw; min-height: 0; }
  .statement__text { padding-left: var(--gutter); }
  .strip__row { height: auto; flex-wrap: wrap; }
  .strip__row img { flex: 1 1 45%; height: 36vw; }
  .global { min-height: 90svh; }
  .global__map { left: -8%; width: 116%; top: 12%; }
  .team { grid-template-columns: 1fr; grid-template-areas: "title" "visual" "copy"; }
  .team__copy { max-width: none; line-height: 1.8; }
  .team__visual { padding-bottom: 36%; }
  .expertise__grid { grid-template-columns: 1fr; }
  .expertise__grid > * { order: 0 !important; }
  /* mobile: image then its text, in source order of image/text pairs */
  .expertise__grid > :nth-child(5) { order: 6 !important; }
  .expertise__grid > :nth-child(6) { order: 5 !important; }
  .expertise__grid > :nth-child(7) { order: 8 !important; }
  .expertise__grid > :nth-child(8) { order: 7 !important; }
  .card--img { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .marquee { overflow: hidden; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .marquee__track { animation: none; }
  .hero, .founded, .global, .team { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --------------------------------------------------------------------------
   Self-hosted licensed fonts (template). Upload the web-font files you are
   licensed to use into /fonts and uncomment.

   @font-face { font-family: "Myriad Pro"; src: url("../fonts/MyriadPro-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
   @font-face { font-family: "Nice Headline"; src: url("../fonts/NiceHeadline-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
   @font-face { font-family: "Nice Headline"; src: url("../fonts/NiceHeadline-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
   @font-face { font-family: "Nice Headline"; src: url("../fonts/NiceHeadline-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
   -------------------------------------------------------------------------- */