@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* Draft styles for the redesigned Gesture homepage, from the Figma thumbnail. */
:root {
  --ink: #111111;
  --muted: rgb(17 17 17 / 62%);
  --paper: #ebebed;
  --line: rgb(17 17 17 / 18%);
  --panel: #b4b5b5;
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
h1, h2, h3, p, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 10; padding: 10px 16px; background: var(--ink); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.page-width { width: min(100% - 48px, 1280px); margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 28px; border-top: 1px solid currentColor; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 500; }
.button { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; background: var(--ink); color: white; font-size: 13px; font-weight: 500; }

.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.logo img { width: 40px; height: 40px; object-fit: cover; object-position: 58% 50%; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; border-bottom: 1px solid var(--line); }
.header-note { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.site-header nav { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.nav-link { padding-block: 6px; border-bottom: 1px solid transparent; }
.nav-link:hover { border-color: currentColor; }

.hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(56px, 8vw, 112px); }
.hero h1 { font-size: clamp(3.2rem, 7vw, 6.5rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; }
.hero-copy > p { max-width: 440px; margin-block: 32px 36px; font-size: 17px; line-height: 1.65; color: var(--muted); }
.hero-image img { display: block; width: 100%; height: auto; }
.rule-row { display: flex; justify-content: space-between; gap: 24px; padding-block: 16px; border-block: 1px solid var(--line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.section { padding-block: clamp(72px, 10vw, 136px); }
.section-heading { display: grid; grid-template-columns: .35fr 1fr; gap: 32px; align-items: start; margin-bottom: clamp(40px, 6vw, 72px); }
.section-heading > .eyebrow { padding-top: 14px; }
.section h2 { font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.section-copy { max-width: 620px; margin-top: 28px; font-size: 16px; line-height: 1.7; color: var(--muted); }

.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.sector { padding: 28px 28px 36px 0; }
.sector + .sector { padding-left: 28px; border-left: 1px solid var(--line); }
.sector h3 { display: flex; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 500; }
.sector p { margin-top: 16px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.sector:hover h3 { text-decoration: underline; text-underline-offset: 5px; }

.process { background: var(--panel); color: white; }
.process img { display: block; width: 100%; height: auto; }
.process figcaption { margin-inline: clamp(20px, 4vw, 56px); padding-block: 18px; border-top: 1px solid rgb(255 255 255 / 45%); font-size: 12px; }

.site-footer { background: var(--ink); color: white; }
.contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; padding-block: clamp(72px, 10vw, 128px); }
.contact .eyebrow { color: rgb(255 255 255 / 60%); }
.contact h2 { margin-block: 24px 32px; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.contact-aside p { max-width: 360px; font-size: 15px; line-height: 1.65; color: rgb(255 255 255 / 75%); }
.big-arrow { display: inline-block; margin-top: 40px; }
.big-arrow .arrow { width: 56px; height: 56px; }
.footer-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-block: 32px; border-top: 1px solid rgb(255 255 255 / 18%); }
.footer-main nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 13px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 18px 12px; font-size: 11px; color: rgb(255 255 255 / 55%); }

/* Work sector and project pages */
.page-hero { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); }
.page-hero-copy { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: 28px; }
.page-hero-copy > * { min-width: 0; }
.page-hero-copy h1 { font-size: clamp(3rem, 6.4vw, 5.8rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; overflow-wrap: anywhere; }
.page-hero-copy > p { max-width: 460px; font-size: 17px; line-height: 1.65; color: var(--muted); }
.sector-tabs { display: flex; flex-wrap: wrap; border-block: 1px solid var(--line); }
.sector-tabs a { padding: 16px 24px 16px 0; margin-right: 24px; font-size: 13px; font-weight: 500; color: var(--muted); }
.sector-tabs a:hover, .sector-tabs a[aria-current="page"] { color: var(--ink); }
.sector-tabs a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.sector-tabs + .section { padding-top: clamp(48px, 6vw, 80px); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px); }
.project-media { position: relative; aspect-ratio: 1000 / 920; overflow: hidden; background: var(--panel); }
.project-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.project-card:hover .project-media img { transform: scale(1.02); }
.project-media > span { position: absolute; top: 0; left: 0; padding: 10px 12px; background: var(--ink); color: white; font-size: 11px; font-weight: 600; }
.project-meta { margin-top: 20px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.project-meta strong { color: var(--ink); font-weight: 600; }
.project-title { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500; letter-spacing: -.03em; }
.project-card:hover .project-title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.project-summary { max-width: 560px; margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.project-page { padding-block: clamp(40px, 6vw, 72px) clamp(72px, 10vw, 128px); }
.back-link { font-size: 13px; color: var(--muted); }
.back-link:hover { color: var(--ink); }
.project-facts { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.project-facts dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.project-facts dd { margin: 6px 0 0; font-size: 15px; }
.project-feature { margin-top: clamp(40px, 6vw, 72px); background: var(--ink); }
.project-feature video, .project-feature img { display: block; width: 100%; max-height: 80vh; object-fit: contain; }
.project-body { display: grid; grid-template-columns: .35fr 1fr; gap: 32px; padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.project-body > .eyebrow { padding-top: 6px; }
.project-body p:not(.eyebrow) { max-width: 680px; margin-bottom: 28px; font-size: 18px; line-height: 1.7; }
.project-pager { display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; }
.project-pager a { display: grid; gap: 6px; font-size: 18px; font-weight: 500; }
.project-pager a.next { text-align: right; }
.project-pager span { font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.work-section + .work-section { padding-top: 0; }
.work-section-heading { display: grid; grid-template-columns: .9fr 1fr auto; gap: 32px; align-items: end; padding-top: 28px; margin-bottom: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ink); }
.work-section-heading > p { max-width: 520px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.work-section-heading h2 { margin-top: 14px; }
.project-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.project-grid.compact .project-title { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rule-row a:hover { color: var(--ink); }
.expertise-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 7vw, 112px); align-items: start; }
.expertise-body > div:first-child p { max-width: 680px; margin-bottom: 22px; font-size: 18px; line-height: 1.7; }
.deliverables { padding: 28px; background: white; }
.section .deliverables h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.deliverables ul { margin: 20px 0 0; padding: 0; list-style: none; }
.deliverables li { padding-block: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.expertise-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid var(--ink); }
.expertise-cta h2 { margin-top: 16px; }
.paper-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.paper-list li { border-bottom: 1px solid var(--line); }
.paper-list a { display: grid; grid-template-columns: 96px 1fr auto; gap: 32px; align-items: start; padding-block: 28px; }
.paper-year { padding-top: 4px; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.paper-title, .paper-venue { display: block; }
.paper-title { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.paper-venue { margin-top: 10px; font-size: 14px; color: var(--muted); }
.paper-list .arrow { margin-top: 6px; }
.paper-list a:hover .paper-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.footer-legal { padding-bottom: 28px; font-size: 11px; line-height: 1.6; color: rgb(255 255 255 / 45%); }
@media (max-width: 1023px) {
  .header-note { display: none; }
  .hero, .contact, .page-hero-copy { grid-template-columns: 1fr; }
  .work-section-heading { grid-template-columns: 1fr; gap: 16px; }
  .expertise-body { grid-template-columns: 1fr; }
  .project-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .page-width { width: min(100% - 32px, 1280px); }
  .site-header nav .nav-link { display: none; }
  .section-heading, .sector-grid, .project-grid, .project-body { grid-template-columns: 1fr; }
  .sector, .sector + .sector { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .rule-row { flex-direction: column; gap: 6px; }
  .paper-list a { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .paper-year { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }