/*
Theme Name: Rafael Rojas Portfolio
Theme URI: https://rafaelrojasruiz.com
Author: Rafael Rojas Ruiz
Description: Tema editorial, visual y administrable para un portafolio profesional de comunicación interna.
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: rrr-portfolio
*/

:root {
  --blue: #1d3144;
  --white: #ffffff;
  --orange: #b8653b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--blue);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; height: auto; max-width: 100%; }
button, input, textarea, select { font: inherit; }

/* Header */
.site-header {
  align-items: center;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(29,49,68,.18);
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr auto 1fr;
  min-height: 70px;
  padding: 0 clamp(22px, 5vw, 78px);
  position: sticky;
  top: 0;
  z-index: 30;
}
body.admin-bar .site-header { top: 32px; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; letter-spacing: -.035em; }
.brand > a, .custom-logo-link { align-items: center; display: inline-flex; }
.brand span { color: var(--orange); font-family: Arial, sans-serif; font-size: 7px; margin-left: 4px; }
.custom-logo { height: auto; max-height: 42px; width: auto; }
.site-header nav { justify-self: center; }
.site-header nav > a, .primary-menu a { border-bottom: 1px solid transparent; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 7px 0; text-transform: uppercase; }
.site-header nav > a + a { margin-left: 34px; }
.site-header nav a:hover { border-color: var(--orange); color: var(--orange); }
.primary-menu { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.header-year { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; justify-self: end; letter-spacing: .14em; }
.menu-toggle { display: none; }

/* Hero */
.portfolio-hero {
  min-height: 930px;
  overflow: hidden;
  padding: 62px clamp(24px, 6.5vw, 102px) 35px;
  position: relative;
}
.portfolio-hero::before { border: 1px solid rgba(29,49,68,.16); border-radius: 50%; content: ""; height: 570px; position: absolute; right: -150px; top: 125px; width: 570px; }
.portfolio-hero::after { background: var(--orange); content: ""; height: 10px; left: 0; position: absolute; top: 0; width: 13%; }
.hero-title { position: relative; text-align: center; z-index: 3; }
.hello-pill { border: 1px solid var(--blue); border-radius: 100px; display: inline-block; font-family: Georgia, serif; font-size: 15px; margin: 0 0 12px; padding: 7px 15px; }
.hero-title h1 { font-family: Georgia, serif; font-size: clamp(72px, 10vw, 148px); letter-spacing: -.075em; line-height: .82; margin: 0; }
.hero-title h1 em { color: var(--orange); font-style: normal; }
.hero-title h2 { font-family: Georgia, serif; font-size: clamp(26px, 3.7vw, 56px); letter-spacing: -.045em; margin: 17px 0 0; }
.hero-stage { height: 545px; margin-top: 10px; position: relative; }
.hero-circle { background: var(--orange); border-radius: 50%; bottom: 0; height: 430px; left: 50%; position: absolute; transform: translateX(-50%); width: 610px; }
.hero-photo { bottom: 0; height: 505px; left: 50%; margin: 0; overflow: hidden; position: absolute; transform: translateX(-50%); width: 520px; z-index: 2; }
.hero-photo img { height: 100%; object-fit: cover; object-position: center top; width: 100%; }
.floating-tag { animation: rrr-float 4.5s ease-in-out infinite; background: var(--blue); border: 2px solid var(--white); border-radius: 100px; box-shadow: 0 8px 24px rgba(29,49,68,.18); color: var(--white); font-family: Georgia, serif; font-size: 16px; padding: 10px 18px; position: absolute; z-index: 4; }
.tag-strategy { left: 24%; top: 140px; transform: rotate(-4deg); }
.tag-culture { animation-delay: -1.5s; right: 23%; top: 205px; transform: rotate(4deg); }
.tag-change { animation-delay: -3s; bottom: 64px; right: 18%; transform: rotate(-2deg); }
.hero-intro { border-left: 2px solid var(--orange); bottom: 88px; left: 0; max-width: 265px; padding-left: 18px; position: absolute; z-index: 4; }
.hero-intro span, .mini-label { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-intro p { font-family: Georgia, serif; font-size: 17px; line-height: 1.35; margin: 9px 0 0; }
.hero-years { position: absolute; right: 0; text-align: right; top: 92px; width: 220px; z-index: 4; }
.hero-years strong { display: block; font-family: Georgia, serif; font-size: 58px; line-height: .8; }
.hero-years p { font-size: 11px; line-height: 1.45; margin: 12px 0 0 auto; max-width: 180px; }
.hero-bottom { align-items: center; border-top: 1px solid rgba(29,49,68,.3); display: flex; font-size: 9px; justify-content: space-between; letter-spacing: .07em; padding-top: 20px; text-transform: uppercase; }
.hero-bottom p { margin: 0; }
.hero-bottom a { font-weight: 750; }
.hero-bottom a:hover { color: var(--orange); }

.specialty-band { align-items: center; background: var(--blue); color: var(--white); display: flex; font-family: Georgia, serif; font-size: clamp(19px, 2.2vw, 32px); gap: clamp(18px, 3vw, 46px); justify-content: center; min-height: 104px; overflow: hidden; padding: 20px 24px; white-space: nowrap; }
.specialty-band i { color: var(--orange); font-style: normal; }

/* Experience */
.responsibility-section, .results-section { padding: 115px clamp(24px, 6.5vw, 102px) 120px; }
.section-label { align-items: center; display: grid; gap: 20px; grid-template-columns: 44px auto; margin-bottom: 52px; }
.section-label span { align-items: center; background: var(--orange); border-radius: 50%; color: var(--white); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; height: 42px; justify-content: center; width: 42px; }
.section-label p { font-family: Georgia, serif; font-size: 17px; font-weight: 700; margin: 0; }
.responsibility-heading { align-items: end; display: grid; gap: 70px; grid-template-columns: 1.35fr .65fr; }
.responsibility-heading h2, .results-section > h2, .portfolio-case h2, .profile-section h2, .contact-section h2, .case-hero h1, .archive-heading h1, .content-page h1, .not-found h1 { font-family: Georgia, serif; font-size: clamp(48px, 6.8vw, 96px); letter-spacing: -.065em; line-height: .94; margin: 0; }
.responsibility-heading h2 em, .results-section > h2 em { color: var(--orange); font-style: normal; }
.responsibility-heading > p { border-top: 1px solid rgba(29,49,68,.28); font-size: 15px; line-height: 1.65; margin: 0; padding-top: 18px; }
.impact-grid { display: grid; gap: 12px; grid-template-columns: 1.35fr repeat(3, .65fr); margin-top: 82px; }
.impact-grid article { border: 1px solid rgba(29,49,68,.18); display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; padding: 25px; }
.impact-grid strong { display: block; font-family: Georgia, serif; font-size: clamp(39px, 4vw, 62px); letter-spacing: -.06em; line-height: 1; }
.impact-grid p { border-top: 1px solid rgba(29,49,68,.22); font-family: Georgia, serif; font-size: 19px; font-weight: 700; line-height: 1.1; margin: 14px 0 0; padding-top: 13px; }
.impact-grid .impact-primary { background: var(--blue); border-color: var(--blue); color: var(--white); }
.impact-primary strong { font-size: clamp(58px, 7vw, 104px); }
.impact-primary p { border-color: rgba(255,255,255,.28); }
.responsibility-list { border-top: 1px solid rgba(29,49,68,.25); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 86px; }
.responsibility-list article { border-bottom: 1px solid rgba(29,49,68,.25); border-right: 1px solid rgba(29,49,68,.25); min-height: 300px; padding: 25px; }
.responsibility-list article:first-child { border-left: 1px solid rgba(29,49,68,.25); }
.responsibility-list span { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.responsibility-list h3 { font-family: Georgia, serif; font-size: 25px; letter-spacing: -.04em; line-height: 1.05; margin: 100px 0 14px; }
.responsibility-list p { font-size: 12px; line-height: 1.6; margin: 0; opacity: .72; }

/* Workflow */
.system-section { background: var(--blue); color: var(--white); display: grid; gap: 80px; grid-template-columns: .8fr 1.2fr; padding: 120px clamp(24px, 6.5vw, 102px); }
.system-copy h2 { font-family: Georgia, serif; font-size: clamp(58px, 6.7vw, 92px); letter-spacing: -.065em; line-height: .86; margin: 25px 0 36px; }
.system-copy h2 em { color: var(--orange); font-style: normal; }
.system-copy > p:last-child { font-size: 15px; line-height: 1.65; max-width: 520px; opacity: .76; }
.workflow { border-top: 1px solid rgba(255,255,255,.25); }
.workflow > div { align-items: center; border-bottom: 1px solid rgba(255,255,255,.25); display: grid; gap: 20px; grid-template-columns: 55px 1fr auto; min-height: 80px; }
.workflow > div span { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.workflow > div b { font-family: Georgia, serif; font-size: 26px; }
.workflow > div i { color: var(--orange); font-size: 22px; font-style: normal; }
.workflow aside { background: var(--orange); margin: 24px 0 0 auto; padding: 22px; width: 52%; }
.workflow aside strong { display: block; font-family: Georgia, serif; font-size: 44px; letter-spacing: -.05em; }
.workflow aside p { font-size: 11px; margin: 5px 0 0; }

/* Results */
.results-section > h2 { max-width: 1180px; }
.result-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
.result-grid article { border: 1px solid var(--blue); display: flex; flex-direction: column; min-height: 350px; padding: 26px; }
.result-grid article:nth-child(1), .result-grid article:nth-child(4) { background: var(--blue); color: var(--white); }
.result-grid article:nth-child(3) { background: var(--orange); border-color: var(--orange); color: var(--white); }
.result-grid article > span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.result-grid strong { display: block; font-family: Georgia, serif; font-size: clamp(48px, 5vw, 78px); letter-spacing: -.07em; margin: auto 0 0; }
.result-grid p { border-top: 1px solid currentColor; font-family: Georgia, serif; font-size: 18px; line-height: 1.25; margin: 14px 0 0; padding-top: 14px; }

/* Campaign cases */
.cases-section { background: var(--blue); color: var(--white); padding-top: 110px; }
.cases-label { margin-left: clamp(24px, 6.5vw, 102px); margin-right: clamp(24px, 6.5vw, 102px); }
.portfolio-case { overflow: hidden; padding: 105px clamp(24px, 6.5vw, 102px) 115px; position: relative; }
.case-blue { background: var(--blue); color: var(--white); }
.case-orange { background: var(--orange); color: var(--white); }
.case-white { background: var(--white); color: var(--blue); }
.case-heading { align-items: start; display: grid; gap: 46px; grid-template-columns: .35fr 1.05fr .6fr; }
.case-heading > p, .case-heading span, .case-details span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; margin: 5px 0 0; text-transform: uppercase; }
.case-heading h2 { font-size: clamp(54px, 7vw, 96px); }
.case-heading > div { border-top: 1px solid currentColor; padding-top: 15px; }
.case-heading > div p { font-size: 13px; line-height: 1.6; margin: 10px 0 0; opacity: .76; }
.case-details { border-bottom: 1px solid currentColor; border-top: 1px solid currentColor; display: grid; grid-template-columns: repeat(3, 1fr); }
.case-details > div { border-right: 1px solid currentColor; padding: 22px; }
.case-details > div:last-child { border: 0; }
.case-details p { font-family: Georgia, serif; font-size: 16px; line-height: 1.35; margin: 12px 0 0; opacity: .78; }
.case-read-more { border-bottom: 1px solid currentColor; display: inline-block; font-family: Georgia, serif; font-size: 17px; margin-top: 32px; padding-bottom: 6px; }
.case-read-more:hover { color: var(--orange); }
.case-orange .case-read-more:hover { color: var(--blue); }

/* Editable mockup layouts */
.mockup-scene { height: 840px; margin: 70px 0; position: relative; }
.mock-window, .mock-laptop figure { background: var(--white); border: 1px solid rgba(29,49,68,.18); border-radius: 16px; box-shadow: 0 28px 70px rgba(29,49,68,.28); margin: 0; overflow: hidden; position: absolute; }
.mock-bar { align-items: center; background: var(--white); border-bottom: 1px solid rgba(29,49,68,.18); color: var(--blue); display: flex; gap: 6px; height: 36px; padding: 0 13px; }
.mock-bar i { background: var(--blue); border-radius: 50%; height: 7px; opacity: .35; width: 7px; }
.mock-bar i:first-child { background: var(--orange); opacity: 1; }
.mock-bar span { font-size: 8px; margin-left: 8px; opacity: .7; }
.mock-window img, .mock-laptop img { height: calc(100% - 36px); object-fit: cover; object-position: top; width: 100%; }
.mock-email .mock-main { height: 700px; left: 3%; top: 80px; transform: rotate(-2deg); width: 58%; z-index: 3; }
.mock-email .mock-back { height: 620px; right: 7%; top: 0; transform: rotate(4deg); width: 45%; z-index: 1; }
.mock-phone { background: var(--blue); border: 9px solid var(--blue); border-radius: 36px; box-shadow: 0 28px 70px rgba(29,49,68,.35); height: 500px; margin: 0; overflow: hidden; position: absolute; right: 4%; top: 320px; transform: rotate(2deg); width: 265px; z-index: 5; }
.mock-phone > span { background: var(--blue); border-radius: 0 0 12px 12px; height: 19px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 80px; z-index: 2; }
.mock-phone img { height: 100%; object-fit: cover; object-position: top; width: 100%; }
.mock-badge { align-items: center; background: var(--orange); border: 5px solid var(--white); border-radius: 50%; box-shadow: 0 18px 40px rgba(29,49,68,.24); color: var(--white); display: flex; flex-direction: column; height: 170px; justify-content: center; left: 48%; position: absolute; top: 560px; transform: rotate(-7deg); width: 170px; z-index: 7; }
.mock-badge strong { font-family: Georgia, serif; font-size: 34px; letter-spacing: -.06em; text-align: center; }
.mock-badge span { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }

.mock-laptop .mock-laptop { height: 710px; left: 7%; position: absolute; top: 30px; transform: rotate(-2deg); width: 78%; }
.mock-laptop .mock-laptop figure { height: 610px; position: relative; width: 100%; }
.mock-laptop-base { background: var(--blue); border-radius: 0 0 35px 35px; display: block; height: 28px; margin-left: -6%; width: 112%; }
.mock-laptop .mock-phone { height: 470px; right: 1%; top: 330px; width: 245px; }
.mock-laptop .mock-badge { left: 1%; top: 590px; }

.mock-posters { height: 790px; }
.mock-poster { background: var(--white); box-shadow: 0 30px 70px rgba(29,49,68,.22); height: 675px; margin: 0; overflow: hidden; position: absolute; top: 50px; width: 33%; }
.mock-poster img { height: 100%; object-fit: cover; width: 100%; }
.mock-poster-1 { left: 3%; transform: rotate(-5deg); z-index: 1; }
.mock-poster-2 { left: 34%; top: 0; transform: rotate(1.5deg); z-index: 3; }
.mock-poster-3 { right: 2%; transform: rotate(6deg); z-index: 2; }
.mock-posters .mock-badge { bottom: 10px; left: auto; right: 2%; top: auto; }

/* Profile and contact */
.profile-section { background: var(--blue); color: var(--white); display: grid; gap: 80px; grid-template-columns: .8fr 1.2fr; padding: 120px clamp(24px, 6.5vw, 102px); }
.profile-section figure { align-self: end; margin: 0; min-height: 650px; overflow: hidden; position: relative; }
.profile-section figure::before { background: var(--orange); border-radius: 50%; content: ""; height: 430px; left: 50%; position: absolute; top: 110px; transform: translateX(-50%); width: 430px; }
.profile-section figure img { bottom: 0; height: 610px; left: 50%; object-fit: cover; object-position: center top; position: absolute; transform: translateX(-50%); width: 610px; }
.profile-section figure span { background: var(--orange); bottom: 28px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; left: 22px; letter-spacing: .12em; padding: 12px 16px; position: absolute; text-transform: uppercase; }
.profile-section > div { align-self: center; }
.profile-section h2 { color: var(--white); font-size: clamp(52px, 6vw, 87px); margin-top: 26px; }
.profile-section > div > p:not(.mini-label) { font-size: 16px; line-height: 1.7; margin: 34px 0; max-width: 700px; opacity: .78; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-tags span { border: 1px solid rgba(255,255,255,.35); border-radius: 100px; font-size: 10px; padding: 9px 13px; }
.profile-link { border-bottom: 1px solid var(--white); display: inline-block; font-family: Georgia, serif; font-size: 18px; margin-top: 46px; padding-bottom: 7px; }
.profile-link:hover { color: var(--orange); }
.contact-section { background: var(--orange); color: var(--white); padding: 125px clamp(24px, 6.5vw, 102px) 85px; }
.contact-section > p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .13em; margin: 0 0 30px; text-transform: uppercase; }
.contact-section h2 { color: var(--white); font-size: clamp(63px, 9vw, 135px); max-width: 1280px; }
.contact-actions { border-top: 1px solid rgba(255,255,255,.5); display: flex; gap: 36px; margin-top: 80px; padding-top: 20px; }
.contact-actions a { border-bottom: 1px solid currentColor; font-size: 12px; padding-bottom: 5px; }
.contact-actions a:hover { color: var(--blue); }
.site-footer { align-items: center; background: var(--blue); color: var(--white); display: flex; font-size: 9px; justify-content: space-between; letter-spacing: .08em; padding: 28px clamp(24px, 6.5vw, 102px); text-transform: uppercase; }

/* Single campaign and archive */
.case-page { background: var(--white); }
.case-hero { padding: clamp(85px, 10vw, 140px) clamp(24px, 6.5vw, 102px) 70px; }
.case-hero h1 { max-width: 1180px; }
.case-meta { border-top: 1px solid rgba(29,49,68,.25); display: grid; gap: 30px; grid-template-columns: .35fr 1fr; margin-top: 55px; padding-top: 22px; }
.case-meta span { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.case-meta p { font-family: Georgia, serif; font-size: clamp(17px, 1.8vw, 24px); line-height: 1.5; margin: 0; }
.single-mockup { background: var(--blue); color: var(--white); padding: 30px clamp(24px, 6.5vw, 102px); }
.single-mockup .mockup-scene { margin: 0; }
.case-metrics { border-bottom: 1px solid rgba(29,49,68,.22); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 28px 24px; }
.case-metrics span { border: 1px solid var(--blue); border-radius: 100px; font-size: 11px; padding: 9px 14px; }
.case-content { margin: 0 auto; max-width: 850px; padding: 90px 24px; }
.entry-content { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.75; }
.entry-content h2 { font-family: Georgia, serif; font-size: clamp(31px, 4vw, 52px); letter-spacing: -.05em; line-height: 1.05; margin: 2em 0 .6em; }
.entry-content h3 { font-family: Georgia, serif; font-size: 25px; margin-top: 2em; }
.entry-content a { color: var(--orange); text-decoration: underline; text-underline-offset: 4px; }
.entry-content img { margin: 42px auto; }
.entry-content blockquote { border-left: 4px solid var(--orange); font-family: Georgia, serif; font-size: 1.2em; margin: 2.4em 0; padding: 4px 0 4px 28px; }
.case-navigation { border-top: 1px solid rgba(29,49,68,.25); display: grid; font-size: 11px; gap: 20px; grid-template-columns: 1fr auto 1fr; margin: 0 clamp(24px, 6.5vw, 102px); padding: 28px 0 80px; }
.case-navigation div:last-child { text-align: right; }
.case-navigation > a { color: var(--orange); }
.archive-page, .content-page, .not-found { min-height: 70vh; padding: 100px clamp(24px, 6.5vw, 102px); }
.archive-heading { margin-bottom: 70px; }
.archive-heading > p:last-child { font-size: 17px; line-height: 1.6; max-width: 680px; }
.archive-grid { display: grid; gap: 60px 30px; grid-template-columns: repeat(2, 1fr); }
.archive-grid article { border-bottom: 1px solid rgba(29,49,68,.25); padding-bottom: 28px; }
.archive-image { background: var(--blue); display: block; height: 460px; margin-bottom: 24px; overflow: hidden; }
.archive-image img { height: 100%; object-fit: cover; transition: transform .5s ease; width: 100%; }
.archive-image:hover img { transform: scale(1.025); }
.archive-grid h2 { font-family: Georgia, serif; font-size: clamp(28px, 3.5vw, 48px); letter-spacing: -.05em; line-height: 1.05; margin: 12px 0 18px; }
.eyebrow, .kicker { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-placeholder { align-items: center; color: var(--white); display: flex; font-family: Georgia, serif; font-size: 90px; height: 100%; justify-content: center; }
.pagination { margin-top: 50px; }
.content-page header { margin-bottom: 60px; }
.content-page .entry-content { max-width: 850px; }
.not-found .text-link { border-bottom: 1px solid var(--orange); display: inline-block; margin-top: 40px; padding-bottom: 5px; }

@keyframes rrr-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -9px; } }
@keyframes rrr-reveal { from { opacity: .35; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.impact-grid.is-visible, .responsibility-list.is-visible, .result-grid.is-visible, .portfolio-case.is-visible, .profile-section.is-visible { animation: rrr-reveal .75s both cubic-bezier(.2,.7,.2,1); }

@media (max-width: 1050px) {
  .hero-stage { height: 480px; }
  .hero-circle { height: 380px; width: 520px; }
  .hero-photo { height: 455px; width: 470px; }
  .tag-strategy { left: 14%; }
  .tag-culture { right: 14%; }
  .tag-change { right: 8%; }
  .impact-grid { grid-template-columns: repeat(3, 1fr); }
  .impact-primary { grid-column: 1 / -1; }
  .case-heading { grid-template-columns: 1fr 1.7fr; }
  .case-heading > div { grid-column: 2; }
  .mockup-scene { height: 760px; }
  .mock-email .mock-main { height: 630px; }
  .mock-email .mock-back { height: 550px; }
  .mock-phone { height: 430px; width: 225px; }
  .mock-badge { top: 515px; }
}

@media (max-width: 800px) {
  body.admin-bar .site-header { top: 46px; }
  .site-header { grid-template-columns: 1fr auto auto; }
  .menu-toggle { background: transparent; border: 1px solid var(--blue); color: var(--blue); cursor: pointer; display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 8px 10px; text-transform: uppercase; }
  .site-header nav { background: var(--white); border-bottom: 1px solid rgba(29,49,68,.2); display: none; left: 0; padding: 18px 24px 24px; position: absolute; right: 0; top: 70px; }
  .site-header nav.is-open { display: block; }
  .site-header nav > a { border-bottom: 1px solid rgba(29,49,68,.18); display: block; padding: 14px 0; }
  .site-header nav > a + a { margin-left: 0; }
  .primary-menu { flex-direction: column; gap: 0; }
  .primary-menu a { border-bottom: 1px solid rgba(29,49,68,.18); display: block; padding: 14px 0; }
  .header-year { font-size: 7px; }
  .portfolio-hero { min-height: 780px; padding-top: 52px; }
  .hero-title h1 { font-size: clamp(58px, 17vw, 92px); }
  .hero-title h2 { font-size: 25px; }
  .hero-stage { height: 440px; }
  .hero-circle { height: 320px; width: 410px; }
  .hero-photo { height: 400px; width: 410px; }
  .hero-intro, .hero-years { display: none; }
  .floating-tag { font-size: 12px; padding: 8px 12px; }
  .tag-strategy { left: 1%; top: 130px; }
  .tag-culture { right: 0; top: 190px; }
  .tag-change { bottom: 42px; right: 2%; }
  .hero-bottom p { display: none; }
  .hero-bottom { justify-content: flex-end; }
  .specialty-band { font-size: 17px; justify-content: flex-start; }
  .responsibility-heading, .system-section, .profile-section { grid-template-columns: 1fr; }
  .responsibility-heading { gap: 34px; }
  .impact-grid { grid-template-columns: 1fr; }
  .impact-primary { grid-column: auto; }
  .responsibility-list, .result-grid { grid-template-columns: repeat(2, 1fr); }
  .responsibility-list article:nth-child(3) { border-left: 1px solid rgba(29,49,68,.25); }
  .workflow aside { width: 100%; }
  .case-heading { grid-template-columns: 1fr; }
  .case-heading > div { grid-column: auto; }
  .portfolio-case { padding-top: 80px; }
  .mockup-scene { height: 650px; margin-left: -35px; margin-right: -35px; }
  .mock-email .mock-main { height: 540px; left: 0; width: 82%; }
  .mock-email .mock-back { display: none; }
  .mock-phone, .mock-laptop .mock-phone { height: 390px; right: 0; top: 260px; width: 205px; }
  .mock-badge, .mock-laptop .mock-badge { height: 125px; left: 40%; top: 470px; width: 125px; }
  .mock-badge strong { font-size: 25px; }
  .mock-laptop .mock-laptop { left: -2%; width: 96%; }
  .mock-laptop .mock-laptop figure { height: 500px; }
  .mock-posters { height: 560px; }
  .mock-poster { height: 470px; width: 39%; }
  .mock-poster-2 { left: 29%; width: 42%; }
  .case-details { grid-template-columns: 1fr; }
  .case-details > div { border-bottom: 1px solid currentColor; border-right: 0; }
  .profile-section figure { min-height: 540px; }
  .archive-grid { grid-template-columns: 1fr; }
  .case-meta, .case-navigation { grid-template-columns: 1fr; }
  .case-navigation div:last-child { text-align: left; }
}

@media (max-width: 520px) {
  .site-header, .portfolio-hero, .responsibility-section, .system-section, .results-section, .portfolio-case, .profile-section, .contact-section, .case-hero, .single-mockup, .archive-page, .content-page, .not-found { padding-left: 20px; padding-right: 20px; }
  .portfolio-hero { min-height: 740px; }
  .hero-circle { height: 280px; width: 340px; }
  .hero-photo { height: 365px; width: 365px; }
  .responsibility-list, .result-grid { grid-template-columns: 1fr; }
  .responsibility-list article { border-left: 1px solid rgba(29,49,68,.25); min-height: 235px; }
  .responsibility-list h3 { margin-top: 60px; }
  .result-grid article { min-height: 280px; }
  .mockup-scene { height: 580px; }
  .mock-email .mock-main { height: 475px; }
  .mock-phone, .mock-laptop .mock-phone { height: 325px; width: 170px; }
  .mock-badge, .mock-laptop .mock-badge { height: 105px; top: 430px; width: 105px; }
  .mock-badge strong { font-size: 20px; }
  .mock-laptop .mock-laptop figure { height: 430px; }
  .mock-posters { height: 460px; }
  .mock-poster { height: 370px; }
  .profile-section figure { min-height: 450px; }
  .profile-section figure::before { height: 320px; width: 320px; }
  .profile-section figure img { height: 440px; width: 440px; }
  .contact-actions, .site-footer { align-items: flex-start; flex-direction: column; }
  .site-footer { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floating-tag { animation: none; }
  .archive-image img { transition: none; }
  .impact-grid.is-visible, .responsibility-list.is-visible, .result-grid.is-visible, .portfolio-case.is-visible, .profile-section.is-visible { animation: none; }
}

/* Editorial portfolio layout inspired by presentation spreads */
.section-overline {
  color: var(--orange);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  margin: 0 0 22px;
  text-transform: uppercase;
}

.about-section {
  align-items: stretch;
  background: var(--white);
  display: grid;
  gap: 28px;
  grid-template-columns: 1.18fr .82fr;
  padding: 110px clamp(24px, 6.5vw, 102px);
}
.about-copy {
  border: 1px solid rgba(29,49,68,.16);
  border-radius: 34px;
  padding: clamp(34px, 5vw, 72px);
}
.about-copy h2,
.editorial-heading h2,
.capabilities-section > h2,
.cases-intro h2,
.free-content-section > h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 7vw, 104px);
  letter-spacing: -.065em;
  line-height: .9;
  margin: 0;
}
.about-copy .about-lead {
  color: var(--orange);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.7vw, 39px);
  font-weight: 700;
  line-height: 1.12;
  margin: 48px 0 24px;
}
.about-copy > p:last-child {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  max-width: 760px;
}
.about-photo {
  background: rgba(29,49,68,.06);
  border-radius: 34px;
  margin: 0;
  min-height: 650px;
  overflow: hidden;
  position: relative;
}
.about-photo span {
  background: var(--orange);
  border-radius: 50% 50% 0 0;
  bottom: 0;
  height: 58%;
  left: 7%;
  position: absolute;
  right: 7%;
}
.about-photo img {
  bottom: 0;
  height: 96%;
  left: 50%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  transform: translateX(-50%);
  width: 100%;
}

.experience-section {
  background: rgba(29,49,68,.06);
  padding: 110px clamp(24px, 6.5vw, 102px);
}
.editorial-heading {
  align-items: end;
  display: grid;
  gap: 60px;
  grid-template-columns: 1.25fr .75fr;
}
.editorial-heading .section-overline { grid-column: 1 / -1; margin-bottom: -24px; }
.editorial-heading > p:last-child {
  border-top: 2px solid var(--orange);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  padding-top: 18px;
}
.experience-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: 1.25fr .75fr;
  margin-top: 74px;
}
.experience-card,
.process-card,
.tools-panel,
.impact-panel {
  background: var(--white);
  border-radius: 30px;
  padding: clamp(28px, 3.4vw, 50px);
}
.responsibility-card article {
  border-bottom: 1px solid rgba(29,49,68,.18);
  display: grid;
  gap: 24px;
  grid-template-columns: 42px 1fr;
  padding: 27px 0;
}
.responsibility-card article:first-child { padding-top: 0; }
.responsibility-card article:last-child { border-bottom: 0; padding-bottom: 0; }
.responsibility-card article > span {
  color: var(--orange);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  padding-top: 7px;
}
.responsibility-card h3,
.process-card h3,
.tools-panel h3,
.impact-panel h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -.045em;
  line-height: 1;
  margin: 0;
}
.responsibility-card p {
  font-size: 13px;
  line-height: 1.6;
  margin: 9px 0 0;
  opacity: .76;
}
.metric-card {
  background: var(--blue);
  color: var(--white);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
}
.metric-card article {
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding: 22px;
}
.metric-card article:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.25); }
.metric-card article:nth-last-child(-n+2) { border-bottom: 0; }
.metric-card strong {
  color: var(--orange);
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4.4vw, 67px);
  letter-spacing: -.06em;
  line-height: 1;
}
.metric-card p { font-size: 11px; line-height: 1.4; margin: 9px 0 0; }
.process-card { margin-top: 20px; }
.process-card > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.process-card span {
  align-items: center;
  border: 1px solid var(--blue);
  border-radius: 100px;
  display: inline-flex;
  font-size: 11px;
  gap: 8px;
  padding: 10px 15px;
}
.process-card span b { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }

.capabilities-section { background: var(--white); padding: 110px clamp(24px, 6.5vw, 102px); }
.capabilities-section > h2 { max-width: 980px; }
.skills-cloud { display: flex; flex-wrap: wrap; gap: 9px; margin: 42px 0 64px; }
.skills-cloud span {
  border: 1px solid var(--blue);
  border-radius: 100px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  padding: 10px 17px;
}
.skills-cloud span:nth-child(3n+2) { background: var(--orange); border-color: var(--orange); color: var(--white); }
.capability-panels { display: grid; gap: 20px; grid-template-columns: 1.15fr .85fr; }
.tools-panel { background: rgba(29,49,68,.06); }
.tools-panel > div { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-top: 38px; }
.tools-panel span {
  align-items: center;
  background: var(--white);
  border: 1px solid rgba(29,49,68,.16);
  border-radius: 14px;
  display: flex;
  font-size: 12px;
  justify-content: center;
  min-height: 72px;
  padding: 13px;
  text-align: center;
}
.impact-panel { background: var(--orange); color: var(--white); }
.impact-mini-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); margin-top: 38px; }
.impact-mini-grid article { border-top: 1px solid rgba(255,255,255,.5); padding-top: 16px; }
.impact-mini-grid strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 4vw, 55px); letter-spacing: -.055em; }
.impact-mini-grid p { font-size: 10px; line-height: 1.35; margin: 5px 0 0; }

.cases-section {
  background: rgba(29,49,68,.06);
  color: var(--blue);
  padding: 110px clamp(24px, 6.5vw, 102px);
}
.cases-intro { align-items: end; display: grid; gap: 60px; grid-template-columns: 1.25fr .75fr; margin-bottom: 74px; }
.cases-intro .section-overline { grid-column: 1 / -1; margin-bottom: -24px; }
.cases-intro > p:last-child { border-top: 2px solid var(--orange); font-size: 15px; line-height: 1.7; margin: 0; padding-top: 18px; }
.portfolio-case {
  background: transparent !important;
  color: var(--blue) !important;
  overflow: visible;
  padding: 0 0 34px;
}
.portfolio-case + .portfolio-case { margin-top: 30px; }
.campaign-spread {
  background: var(--white);
  border: 1px solid rgba(29,49,68,.12);
  border-radius: 34px;
  overflow: hidden;
  padding: clamp(28px, 4vw, 58px);
}
.campaign-heading { align-items: start; display: grid; gap: 22px; grid-template-columns: 45px 1fr; margin-bottom: 38px; }
.campaign-heading > span { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; padding-top: 7px; }
.campaign-heading p { color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .12em; margin: 0 0 9px; text-transform: uppercase; }
.campaign-heading h3 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(43px, 5.8vw, 80px); letter-spacing: -.06em; line-height: .94; margin: 0; }
.campaign-layout { display: grid; gap: 18px; grid-template-columns: .72fr 1.28fr; }
.campaign-copy-card,
.campaign-visual-card { border-radius: 28px; min-height: 650px; overflow: hidden; }
.campaign-copy-card { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3.5vw, 50px); }
.case-orange .campaign-copy-card { background: var(--orange); color: var(--white); }
.case-blue .campaign-copy-card { background: var(--blue); color: var(--white); }
.case-white .campaign-copy-card { background: var(--white); border: 1px solid var(--blue); color: var(--blue); }
.campaign-copy-card section + section { border-top: 1px solid currentColor; margin-top: 40px; padding-top: 28px; }
.campaign-copy-card h4 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px, 3vw, 43px); letter-spacing: -.04em; line-height: 1; margin: 0 0 18px; }
.campaign-copy-card p { font-size: 14px; line-height: 1.65; margin: 0; }
.campaign-visual-card { background: rgba(29,49,68,.06); padding: 18px; }
.case-blue .campaign-visual-card { background: var(--orange); }
.case-orange .campaign-visual-card { background: rgba(29,49,68,.06); }
.campaign-visual-card .mockup-scene { height: 614px; margin: 0; }
.campaign-visual-card .mock-email .mock-main { height: 500px; left: 2%; top: 66px; width: 63%; }
.campaign-visual-card .mock-email .mock-back { height: 440px; right: 3%; top: 18px; width: 43%; }
.campaign-visual-card .mock-phone { height: 375px; right: 2%; top: 230px; width: 195px; }
.campaign-visual-card .mock-badge { height: 125px; left: 43%; top: 455px; width: 125px; }
.campaign-visual-card .mock-badge strong { font-size: 25px; }
.campaign-visual-card .mock-laptop .mock-laptop { height: 560px; left: 2%; top: 42px; width: 82%; }
.campaign-visual-card .mock-laptop .mock-laptop figure { height: 480px; }
.campaign-visual-card .mock-laptop .mock-phone { height: 360px; right: 0; top: 245px; width: 188px; }
.campaign-visual-card .mock-laptop .mock-badge { left: 2%; top: 465px; }
.campaign-visual-card .mock-posters { height: 614px; }
.campaign-visual-card .mock-poster { height: 525px; top: 45px; }
.campaign-visual-card .mock-poster-2 { top: 18px; }
.campaign-facts { align-items: stretch; border-top: 1px solid rgba(29,49,68,.2); display: grid; gap: 0; grid-template-columns: 1fr 1fr auto; margin-top: 28px; }
.campaign-facts > div { border-right: 1px solid rgba(29,49,68,.2); padding: 22px; }
.campaign-facts span { color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.campaign-facts p { font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.35; margin: 9px 0 0; }
.campaign-facts > a { align-items: center; display: flex; font-size: 11px; font-weight: 700; padding: 22px; text-transform: uppercase; }
.campaign-facts > a:hover { color: var(--orange); }

.free-content-section { background: var(--white); padding: 110px clamp(24px, 6.5vw, 102px); }
.free-content-section > h2 { margin-bottom: 65px; }
.free-content-section .entry-content { margin: 0; max-width: none; padding: 0; }
.free-content-section .wp-block-gallery,
.free-content-section .wp-block-columns { gap: 18px; }
.free-content-section img { border-radius: 22px; }

@media (max-width: 980px) {
  .about-section,
  .editorial-heading,
  .experience-layout,
  .capability-panels,
  .cases-intro,
  .campaign-layout { grid-template-columns: 1fr; }
  .editorial-heading .section-overline,
  .cases-intro .section-overline { grid-column: auto; margin-bottom: -20px; }
  .about-photo { min-height: 570px; }
  .campaign-copy-card { min-height: 430px; }
  .campaign-visual-card { min-height: 620px; }
}

@media (max-width: 680px) {
  .about-section,
  .experience-section,
  .capabilities-section,
  .cases-section,
  .free-content-section { padding: 78px 20px; }
  .about-copy,
  .experience-card,
  .process-card,
  .tools-panel,
  .impact-panel,
  .campaign-spread { border-radius: 23px; padding: 25px; }
  .about-photo { border-radius: 23px; min-height: 470px; }
  .about-copy h2,
  .editorial-heading h2,
  .capabilities-section > h2,
  .cases-intro h2,
  .free-content-section > h2 { font-size: clamp(48px, 14vw, 72px); }
  .tools-panel > div { grid-template-columns: repeat(2, 1fr); }
  .metric-card,
  .impact-mini-grid { grid-template-columns: 1fr 1fr; }
  .campaign-heading { grid-template-columns: 1fr; }
  .campaign-copy-card { min-height: 390px; }
  .campaign-visual-card { min-height: 500px; padding: 8px; }
  .campaign-visual-card .mockup-scene { height: 485px; margin: 0 -10px; }
  .campaign-visual-card .mock-email .mock-main { height: 410px; width: 84%; }
  .campaign-visual-card .mock-email .mock-back { display: none; }
  .campaign-visual-card .mock-phone,
  .campaign-visual-card .mock-laptop .mock-phone { height: 300px; top: 180px; width: 155px; }
  .campaign-visual-card .mock-badge,
  .campaign-visual-card .mock-laptop .mock-badge { height: 92px; left: 38%; top: 365px; width: 92px; }
  .campaign-visual-card .mock-badge strong { font-size: 18px; }
  .campaign-visual-card .mock-laptop .mock-laptop { left: 0; width: 96%; }
  .campaign-visual-card .mock-laptop .mock-laptop figure { height: 385px; }
  .campaign-visual-card .mock-posters { height: 485px; }
  .campaign-visual-card .mock-poster { height: 410px; }
  .campaign-facts { grid-template-columns: 1fr; }
  .campaign-facts > div { border-bottom: 1px solid rgba(29,49,68,.2); border-right: 0; padding: 18px 0; }
  .campaign-facts > a { padding: 20px 0 0; }
}