@import "tailwindcss";

:root {
  --ink: #11110f;
  --ink-soft: #1b1a17;
  --paper: #f4eee7;
  --paper-muted: #bdb6ae;
  --orange: #ff4b12;
  --line: rgba(244, 238, 231, 0.2);
  --line-dark: rgba(17, 17, 15, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 26px 4.5vw;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}
.brand-lockup img { height: auto; width: 146px; }
.desktop-nav { align-items: center; display: flex; gap: 28px; }
.desktop-nav a, .mobile-nav a, .back-top, .footer-bottom, .eyebrow, .section-marker, .frame-topline, .hero-coordinate, .service-number, .service-tags, .capability-card figcaption span, .approach-step span, .contact-side, .kicker {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.desktop-nav a { color: var(--paper-muted); transition: color .2s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--paper); }
.desktop-nav .nav-cta { color: var(--paper); padding: 11px 14px; border: 1px solid var(--line); }
.desktop-nav span, .nav-cta span { color: var(--orange); margin-left: 8px; }
.mobile-nav { display: none; }

.section-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-left: 4.5vw; padding-right: 4.5vw; }
.hero { align-items: end; min-height: 790px; padding-bottom: 94px; padding-top: 150px; position: relative; }
.hero-copy { grid-column: 1 / 7; position: relative; z-index: 2; }
.eyebrow { align-items: center; color: var(--paper-muted); display: flex; gap: 9px; }
.eyebrow-dot { background: var(--orange); border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(64px, 8.2vw, 148px); font-weight: 700; letter-spacing: -.085em; line-height: .86; margin: 33px 0 36px; max-width: 790px; text-transform: uppercase; }
h1 em, h2 span { color: var(--orange); font-style: normal; }
.hero-lede { color: var(--paper-muted); font-size: 15px; line-height: 1.55; margin-bottom: 35px; max-width: 390px; }
.hero-actions { align-items: center; display: flex; gap: 26px; }
.button { align-items: center; display: inline-flex; font-size: 11px; font-weight: 700; gap: 24px; letter-spacing: .09em; padding: 16px 19px; text-transform: uppercase; }
.button span { font-size: 16px; line-height: 0; }
.button-orange { background: var(--orange); color: var(--ink); }
.text-link { border-bottom: 1px solid var(--line); color: var(--paper-muted); font-size: 11px; letter-spacing: .08em; padding-bottom: 6px; text-transform: uppercase; }
.text-link span { color: var(--orange); font-size: 15px; margin-left: 10px; }
.hero-visual { grid-column: 8 / 13; margin-bottom: -5px; position: relative; }
.hero-frame { aspect-ratio: .82; overflow: hidden; position: relative; }
.hero-frame img { filter: saturate(.74) contrast(1.12); height: 100%; object-fit: cover; width: 100%; }
.hero-frame-shade { background: linear-gradient(180deg, rgba(17,17,15,.15), rgba(17,17,15,.76)); inset: 0; position: absolute; }
.frame-topline, .hero-caption { display: flex; justify-content: space-between; left: 20px; position: absolute; right: 20px; z-index: 1; }
.frame-topline { color: var(--paper-muted); top: 18px; }
.hero-caption { bottom: 18px; font-size: 11px; letter-spacing: .12em; }
.hero-caption b { color: var(--orange); font-size: 20px; font-weight: 400; }
.hero-orbit, .contact-orbit { align-items: center; background: var(--orange); border-radius: 50%; display: flex; justify-content: center; }
.hero-orbit { bottom: -42px; height: 123px; position: absolute; right: -36px; width: 123px; z-index: 2; }
.hero-orbit img { filter: brightness(0); width: 82px; }
.hero-coordinate { bottom: -80px; color: var(--paper-muted); left: -30px; line-height: 1.5; position: absolute; }

.ticker { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); overflow: hidden; padding: 18px 0; white-space: nowrap; }
.ticker-track { align-items: center; animation: ticker 30s linear infinite; display: flex; gap: 27px; width: max-content; }
.ticker span { color: var(--paper-muted); font-size: 11px; letter-spacing: .16em; }
.ticker i { color: var(--orange); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.intro { padding-bottom: 166px; padding-top: 151px; }
.section-marker { color: var(--paper-muted); grid-column: 1 / 4; }
.intro-body { grid-column: 5 / 12; }
.kicker { color: var(--orange); margin-bottom: 24px; }
h2 { font-size: clamp(48px, 6vw, 96px); letter-spacing: -.08em; line-height: .92; margin-bottom: 53px; text-transform: uppercase; }
.intro h2 { max-width: 770px; }
.intro-bottom { align-items: end; display: flex; gap: 100px; }
.intro-bottom > p { color: var(--paper-muted); font-size: 15px; line-height: 1.6; margin: 0; max-width: 400px; }
.stat-line { align-items: flex-start; border-left: 1px solid var(--orange); display: flex; gap: 15px; min-width: 160px; padding-left: 15px; }
.stat-line strong { color: var(--orange); font-size: 32px; font-weight: 400; letter-spacing: -.08em; }
.stat-line span { color: var(--paper-muted); font-size: 10px; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }

.services-section { background: var(--paper); color: var(--ink); padding-bottom: 140px; padding-top: 128px; }
.services-section .section-marker { color: #817a72; }
.section-heading { align-items: start; padding-bottom: 70px; }
.section-heading > div:nth-child(2) { grid-column: 5 / 9; }
.section-heading h2 { margin: 0; }
.heading-note { color: #817a72; font-size: 14px; line-height: 1.55; margin: 32px 0 0; max-width: 275px; }
.service-list { border-top: 1px solid var(--line-dark); margin: 0 4.5vw; }
.service-row { border-bottom: 1px solid var(--line-dark); }
.service-trigger { align-items: center; background: transparent; border: 0; cursor: pointer; display: grid; grid-template-columns: 8% 1fr 30px; padding: 25px 0; text-align: left; width: 100%; }
.service-number { color: #817a72; }
.service-title { font-size: clamp(28px, 4vw, 56px); font-weight: 700; letter-spacing: -.07em; text-transform: uppercase; }
.service-toggle { align-items: center; border: 1px solid var(--line-dark); border-radius: 50%; display: flex; font-size: 20px; height: 28px; justify-content: center; line-height: 1; width: 28px; }
.service-detail { display: grid; grid-template-columns: 28% 1fr; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .25s ease, padding .35s ease; }
.service-detail p { color: #625d57; font-size: 14px; line-height: 1.55; margin: 0; max-width: 320px; }
.service-tags { align-content: start; display: flex; flex-wrap: wrap; gap: 8px; }
.service-tags span { border: 1px solid var(--line-dark); color: #625d57; padding: 8px 10px; }
.service-row.is-open .service-detail { max-height: 170px; opacity: 1; padding: 0 0 32px 8%; }
.service-row.is-open .service-toggle { background: var(--orange); border-color: var(--orange); }

.work-section { background: var(--paper); color: var(--ink); padding-bottom: 165px; }
.work-section .section-marker { color: #817a72; }
.capability-grid { display: grid; gap: 16px; grid-template-columns: 1.2fr .8fr 1fr; margin: 0 4.5vw; }
.capability-card { margin: 0; min-height: 420px; overflow: hidden; position: relative; }
.capability-card img { filter: saturate(.7) contrast(1.08); height: 100%; object-fit: cover; transition: transform .6s ease; width: 100%; }
.capability-card:hover img { transform: scale(1.04); }
.capability-card::after { background: linear-gradient(180deg, transparent 35%, rgba(17,17,15,.8)); content: ""; inset: 0; position: absolute; }
.capability-card-wide { grid-row: span 2; min-height: 650px; }
.capability-card-tall { min-height: 405px; }
.capability-card-small { min-height: 230px; }
.capability-card figcaption { bottom: 23px; color: var(--paper); display: flex; flex-direction: column; gap: 13px; left: 23px; position: absolute; right: 23px; z-index: 1; }
.capability-card figcaption span { color: var(--orange); }
.capability-card figcaption strong { font-size: clamp(24px, 2.4vw, 37px); letter-spacing: -.06em; line-height: .95; text-transform: uppercase; }
.capability-statement { align-items: flex-start; background: var(--orange); display: flex; flex-direction: column; justify-content: space-between; padding: 25px; }
.orange-mark { color: var(--ink); font-size: 40px; line-height: .6; }
.capability-statement p { font-size: clamp(23px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.07em; line-height: .95; margin: 0; max-width: 300px; text-transform: uppercase; }
.text-link-dark { border-color: rgba(17,17,15,.4); color: var(--ink); }
.text-link-dark span { color: var(--ink); }

.approach-section { background: var(--orange); color: var(--ink); padding-bottom: 140px; padding-top: 128px; }
.approach-section .section-marker { color: rgba(17,17,15,.6); }
.approach-section h2 span { color: var(--ink); }
.approach-section .kicker { color: var(--ink); }
.approach-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 4.5vw; }
.approach-step { border-left: 1px solid rgba(17,17,15,.35); min-height: 240px; padding: 0 24px; }
.approach-step:last-child { border-right: 1px solid rgba(17,17,15,.35); }
.approach-step span { display: block; margin-bottom: 56px; }
.approach-step h3 { font-size: 33px; letter-spacing: -.07em; margin-bottom: 12px; text-transform: uppercase; }
.approach-step p { font-size: 14px; line-height: 1.45; max-width: 170px; }

.contact-section { align-items: center; min-height: 640px; overflow: hidden; padding-bottom: 120px; padding-top: 120px; position: relative; }
.contact-copy { grid-column: 2 / 9; position: relative; z-index: 1; }
.contact-copy h2 { font-size: clamp(55px, 8vw, 125px); margin: 35px 0 34px; }
.contact-copy p { color: var(--paper-muted); font-size: 15px; line-height: 1.55; max-width: 365px; }
.button-cream { background: var(--paper); color: var(--ink); margin-top: 7px; }
.contact-orbit { height: 430px; opacity: .96; position: absolute; right: -65px; top: 88px; width: 430px; }
.contact-orbit img { filter: brightness(0); opacity: .88; width: 64%; }
.contact-side { bottom: 50px; color: var(--paper-muted); display: flex; justify-content: space-between; left: 4.5vw; position: absolute; right: 4.5vw; }
.contact-side span:last-child { text-align: right; }
.site-footer { border-top: 1px solid var(--line); padding: 26px 4.5vw 28px; }
.footer-top { align-items: center; display: flex; justify-content: space-between; padding-bottom: 60px; }
.footer-top .brand-lockup img { width: 128px; }
.back-top { color: var(--paper-muted); }
.back-top span { color: var(--orange); font-size: 17px; margin-left: 9px; }
.footer-bottom { color: #77736d; display: flex; justify-content: space-between; line-height: 1.5; }

@media (max-width: 800px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; position: relative; }
  .mobile-nav summary { cursor: pointer; list-style: none; padding: 8px 0 8px 8px; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { background: var(--paper); display: block; height: 1px; margin: 5px 0; width: 24px; }
  .mobile-nav-panel { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; gap: 22px; padding: 24px; position: absolute; right: 0; top: 38px; width: 210px; }
  .mobile-nav-panel a:last-child { color: var(--orange); }
  .section-grid { grid-template-columns: repeat(4, 1fr); gap: 17px; padding-left: 7vw; padding-right: 7vw; }
  .hero { display: block; min-height: auto; padding-bottom: 98px; padding-top: 160px; }
  h1 { font-size: clamp(58px, 17vw, 100px); margin-top: 28px; }
  .hero-visual { margin: 72px 10vw 0 0; }
  .hero-frame { aspect-ratio: .88; }
  .hero-orbit { height: 92px; right: -33px; width: 92px; }
  .hero-orbit img { width: 65px; }
  .hero-coordinate { bottom: -53px; left: auto; right: -5px; }
  .ticker-track { gap: 20px; }
  .intro { display: block; padding-bottom: 110px; padding-top: 108px; }
  .section-marker { margin-bottom: 56px; }
  .intro-body { display: block; }
  h2 { font-size: clamp(49px, 14vw, 80px); margin-bottom: 38px; }
  .intro-bottom { align-items: start; flex-direction: column; gap: 40px; }
  .services-section, .approach-section { padding-bottom: 92px; padding-top: 92px; }
  .section-heading { display: block; padding-bottom: 56px; }
  .section-heading .section-marker { margin-bottom: 48px; }
  .heading-note { margin-top: 33px; }
  .service-list { margin: 0 7vw; }
  .service-trigger { grid-template-columns: 15% 1fr 30px; padding: 20px 0; }
  .service-title { font-size: 29px; }
  .service-row.is-open .service-detail { display: block; padding-left: 15%; }
  .service-tags { margin-top: 22px; }
  .work-section { padding-bottom: 100px; }
  .capability-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0 7vw; }
  .capability-card-wide { grid-column: span 2; min-height: 440px; }
  .capability-card-tall, .capability-card-small { min-height: 300px; }
  .capability-statement { grid-column: span 2; min-height: 250px; }
  .capability-card figcaption { left: 16px; right: 16px; }
  .approach-steps { grid-template-columns: 1fr 1fr; margin: 0 7vw; }
  .approach-step { min-height: 210px; padding: 0 16px; }
  .approach-step:nth-child(3), .approach-step:nth-child(4) { padding-top: 35px; }
  .approach-step:nth-child(3) { border-top: 1px solid rgba(17,17,15,.35); }
  .approach-step:nth-child(4) { border-right: 1px solid rgba(17,17,15,.35); border-top: 1px solid rgba(17,17,15,.35); }
  .contact-section { display: block; min-height: 640px; padding-bottom: 90px; padding-top: 100px; }
  .contact-copy h2 { font-size: clamp(54px, 15vw, 92px); }
  .contact-orbit { height: 260px; right: -85px; top: 310px; width: 260px; }
  .contact-side { bottom: 30px; left: 7vw; right: 7vw; }
  .contact-side span { max-width: 145px; }
  .footer-bottom { flex-direction: column; gap: 11px; }
}