@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root {
  --pf-bg: #0a0a09;
  --pf-panel: #11110f;
  --pf-text: #f2efe8;
  --pf-muted: #9e998f;
  --pf-line: rgba(242, 239, 232, 0.14);
  --pf-accent: #c7a86b;
  --pf-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; background: var(--pf-bg); }

.portfolio-site {
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(circle at 78% 0%, rgba(199,168,107,.09), transparent 26rem),
    var(--pf-bg);
  color: var(--pf-text);
  font-family: 'Manrope', system-ui, sans-serif;
}

.portfolio-site a { color: inherit; text-decoration: none; }
.portfolio-site section[id], .portfolio-site header[id] { scroll-margin-top: 82px; }
.portfolio-shell { width: min(calc(100% - 32px), var(--pf-max)); margin: 0 auto; }

.portfolio-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,10,9,.84); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--pf-line);
}
.portfolio-nav-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.portfolio-mark { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.portfolio-nav-links { display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--pf-muted); }
.portfolio-nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
.portfolio-nav-links a:hover { color: var(--pf-text); }

.portfolio-hero { padding: 78px 0 68px; border-bottom: 1px solid var(--pf-line); }
.portfolio-kicker { margin: 0 0 22px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pf-accent); }
.portfolio-title { margin: 0; max-width: 980px; font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(58px, 12vw, 142px); line-height: .84; letter-spacing: -.045em; }
.portfolio-title em { color: var(--pf-accent); font-weight: 500; }
.portfolio-hero-grid { margin-top: 42px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap: 48px; align-items: end; }
.portfolio-lead { margin: 0; max-width: 720px; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.4; }
.portfolio-meta { color: var(--pf-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }

.portfolio-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.portfolio-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--pf-line); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: .2s ease; }
.portfolio-btn.primary { color: #111; background: var(--pf-text); border-color: var(--pf-text); }
.portfolio-btn:hover { transform: translateY(-2px); border-color: var(--pf-accent); }
.portfolio-btn:focus-visible, .portfolio-site a:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 4px; }

.portfolio-section { padding: 76px 0; border-bottom: 1px solid var(--pf-line); }
.portfolio-section-head { display: grid; grid-template-columns: 180px 1fr; gap: 28px; margin-bottom: 34px; }
.portfolio-eyebrow { margin: 4px 0 0; font-family: 'DM Mono', monospace; color: var(--pf-accent); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.portfolio-h2 { margin: 0; max-width: 830px; font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(36px, 5vw, 70px); line-height: 1; }
.portfolio-copy { margin: 0; max-width: 720px; color: var(--pf-muted); font-size: 16px; line-height: 1.75; }

.portfolio-video { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 18px; border: 1px solid var(--pf-line); background: #000; }
.portfolio-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.portfolio-video-fallback { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--pf-muted); font-size: 12px; line-height: 1.5; }
.portfolio-video-fallback .portfolio-btn { flex: 0 0 auto; }

.portfolio-services, .portfolio-work, .portfolio-sectors { display: grid; gap: 1px; background: var(--pf-line); border: 1px solid var(--pf-line); }
.portfolio-services { grid-template-columns: repeat(3,1fr); }
.portfolio-service, .portfolio-card, .portfolio-sector { background: var(--pf-bg); }
.portfolio-service { padding: 28px; min-height: 200px; }
.portfolio-number { color: var(--pf-accent); font-family: 'DM Mono', monospace; font-size: 10px; }
.portfolio-service h3 { margin: 52px 0 10px; font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 500; }
.portfolio-service p { margin: 0; color: var(--pf-muted); font-size: 13px; line-height: 1.6; }

.portfolio-work { grid-template-columns: repeat(3, 1fr); }
.portfolio-card { min-width: 0; display: flex; flex-direction: column; transition: background .2s ease; }
.portfolio-card:hover { background: var(--pf-panel); }
.portfolio-card-media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #050505; border-bottom: 1px solid var(--pf-line); }
.portfolio-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, opacity .35s ease; }
.portfolio-card-media > span { position: absolute; right: 12px; bottom: 12px; padding: 8px 10px; border: 1px solid rgba(242,239,232,.22); border-radius: 999px; background: rgba(10,10,9,.78); backdrop-filter: blur(10px); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-card-media:hover img { transform: scale(1.025); opacity: .88; }
.portfolio-card-media-editorial { display: flex; align-items: end; padding: 18px; background: radial-gradient(circle at 20% 20%, rgba(199,168,107,.18), transparent 42%), linear-gradient(145deg, #151511, #0b0b09); }
.portfolio-card-media-editorial > span { position: static; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; color: var(--pf-accent); }
.portfolio-card-body { min-height: 220px; padding: 22px; display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 42px; }
.portfolio-card-top { display: flex; justify-content: space-between; gap: 18px; }
.portfolio-tag { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-accent); }
.portfolio-client { color: var(--pf-muted); font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.portfolio-card h3 { margin: 0 0 12px; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 500; line-height: 1.1; }
.portfolio-card p { margin: 0; color: var(--pf-muted); font-size: 12px; line-height: 1.6; }

.portfolio-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.portfolio-offer-box { padding: 30px; border: 1px solid var(--pf-line); border-radius: 18px; background: var(--pf-panel); }
.portfolio-offer-box h3 { margin: 0 0 16px; font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 500; }
.portfolio-offer-box ul { margin: 20px 0 0; padding: 0; list-style: none; }
.portfolio-offer-box li { padding: 11px 0; border-top: 1px solid var(--pf-line); color: var(--pf-muted); font-size: 13px; }

.portfolio-sectors { grid-template-columns: repeat(3,1fr); }
.portfolio-sector { padding: 22px; min-height: 90px; display: flex; align-items: end; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.portfolio-about-grid { display: grid; grid-template-columns: minmax(240px,.72fr) minmax(0,1.28fr); gap: 42px; align-items: stretch; }
.portfolio-portrait-wrap { min-height: 460px; overflow: hidden; border: 1px solid var(--pf-line); border-radius: 18px; background: var(--pf-panel); }
.portfolio-portrait { display: block; width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: 50% 36%; filter: saturate(.86) contrast(1.02); }
.portfolio-about-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; }
.portfolio-about-big { margin: 0; font-family: 'Playfair Display', serif; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.08; }
.portfolio-about-side { color: var(--pf-muted); font-size: 14px; line-height: 1.8; }

.portfolio-cta { padding: 88px 0 96px; }
.portfolio-cta h2 { margin: 0; max-width: 900px; font-family: 'Playfair Display', serif; font-size: clamp(48px, 7vw, 92px); font-weight: 500; line-height: .98; }
.portfolio-cta p { color: var(--pf-muted); max-width: 620px; line-height: 1.7; }
.portfolio-contact-details { margin-top: 34px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border: 1px solid var(--pf-line); background: var(--pf-line); }
.portfolio-contact-details a { min-height: 54px; padding: 16px 18px; display: flex; align-items: center; background: var(--pf-bg); color: var(--pf-muted); font-family: 'DM Mono', monospace; font-size: 11px; overflow-wrap: anywhere; transition: color .2s ease, background .2s ease; }
.portfolio-contact-details a:hover { color: var(--pf-text); background: var(--pf-panel); }
.portfolio-foot { padding: 24px 0 32px; border-top: 1px solid var(--pf-line); color: var(--pf-muted); display: flex; justify-content: space-between; gap: 20px; font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portfolio-btn, .portfolio-card-media img { transition: none; }
  .portfolio-btn:hover { transform: none; }
  .portfolio-card-media:hover img { transform: none; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 70px; }
  .portfolio-site section[id], .portfolio-site header[id] { scroll-margin-top: 70px; }
  .portfolio-nav-inner { min-height: 64px; }
  .portfolio-nav-links { gap: 14px; font-size: 10px; }
  .portfolio-hero { padding-top: 58px; }
  .portfolio-hero-grid, .portfolio-section-head, .portfolio-offer, .portfolio-about-grid { grid-template-columns: 1fr; gap: 24px; }
  .portfolio-services, .portfolio-work { grid-template-columns: 1fr 1fr; }
  .portfolio-sectors { grid-template-columns: 1fr 1fr; }
  .portfolio-section { padding: 58px 0; }
  .portfolio-card-body { min-height: 205px; gap: 34px; }
  .portfolio-portrait-wrap, .portfolio-portrait { min-height: 560px; }
  .portfolio-portrait { object-position: 50% 28%; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 62px; }
  .portfolio-site section[id], .portfolio-site header[id] { scroll-margin-top: 62px; }
  .portfolio-shell { width: min(calc(100% - 24px), var(--pf-max)); }
  .portfolio-nav-inner { min-height: 58px; }
  .portfolio-mark { display: none; }
  .portfolio-nav-links { width: 100%; justify-content: space-between; gap: 8px; font-size: 9px; letter-spacing: .02em; }
  .portfolio-nav-links a { min-height: 56px; }
  .portfolio-hero { padding: 42px 0 48px; }
  .portfolio-title { font-size: clamp(54px, 21vw, 94px); }
  .portfolio-lead { font-size: 18px; }
  .portfolio-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .portfolio-btn { width: 100%; min-height: 50px; }
  .portfolio-video { border-radius: 12px; }
  .portfolio-video-fallback { align-items: stretch; flex-direction: column; }
  .portfolio-video-fallback .portfolio-btn { width: 100%; }
  .portfolio-services, .portfolio-work, .portfolio-sectors, .portfolio-contact-details { grid-template-columns: 1fr; }
  .portfolio-card-body { min-height: 190px; padding: 20px; }
  .portfolio-service { min-height: 170px; }
  .portfolio-service h3 { margin-top: 34px; }
  .portfolio-portrait-wrap, .portfolio-portrait { min-height: 430px; }
  .portfolio-foot { flex-direction: column; }
}

@media (max-width: 430px) {
  .portfolio-section { padding: 50px 0; }
  .portfolio-hero { padding-top: 38px; }
  .portfolio-title { font-size: clamp(52px, 20.5vw, 86px); line-height: .88; }
  .portfolio-h2 { font-size: clamp(35px, 11vw, 48px); }
  .portfolio-card-media { aspect-ratio: 16/9; }
  .portfolio-card-body { min-height: 180px; }
  .portfolio-cta { padding: 68px 0 76px; }
  .portfolio-cta h2 { font-size: clamp(46px, 13vw, 62px); }
}