@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-Heavy.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron/Aileron-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --red: #fe1907;
  --surface-red: #de1e15;
  --red-dark: #951a1a;
  --link-red: #fe1907;
  --slate: #455560;
  --slate-dark: #3a4750;
  --blue: #003399;
  --ink: #111416;
  --muted: #63717a;
  --paper: #fff;
  --soft: #f4f6f7;
  --line: #dbe0e3;
  --shadow: 0 20px 60px rgba(17, 20, 22, .12);
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Aileron", "Helvetica Neue", Arial, sans-serif; line-height: 1.6; }
.contact-page { background: #faf7f1; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity 1.3s cubic-bezier(.16, 1, .3, 1), transform 1.3s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; color: #fff; background: var(--red); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 50; top: 0; width: 100%; color: #fff; background: var(--surface-red); border-radius: 0 0 12px 12px; }
#smooth-content { padding-top: 0; }
.site-header .header-inner { width: 100%; min-height: 72px; margin-inline: 0; padding-inline: 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; min-width: 0; align-items: center; color: #fff; text-decoration: none; }
.brand-logo { width: 190px; max-width: none; height: auto; filter: brightness(0) invert(1); }
.site-nav { justify-self: center; }
.site-nav ul { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; padding: 0; color: #fff; font-family: "Mona Sans", "Aileron", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1; transition: color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]:hover, .site-nav a[aria-current="page"]:focus-visible { color: #fff; }

/* Desktop Portfolio dropdown. */
.site-nav { align-self: stretch; }
.site-nav > ul { height: 100%; }
.site-nav > ul > .portfolio-menu-item {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.site-nav .portfolio-dropdown {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 50%;
  width: 280px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  list-style: none;
  color: #fff;
  background: rgba(0, 0, 0, .8);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 18px 38px rgba(17, 20, 22, .24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.site-nav .portfolio-menu-item:hover .portfolio-dropdown,
.site-nav .portfolio-menu-item:focus-within .portfolio-dropdown,
.site-nav .portfolio-menu-item.is-open .portfolio-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.site-nav .portfolio-dropdown > li {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.site-nav .portfolio-dropdown > li:last-child { border-bottom: 0; }
.site-nav .portfolio-dropdown a {
  display: block;
  width: 100%;
  padding: 12px 15px;
  color: #fff !important;
  background: transparent;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .035em;
  text-align: left;
  text-transform: uppercase;
  transition: background-color .16s ease, color .16s ease;
}
.site-nav .portfolio-dropdown a:hover,
.site-nav .portfolio-dropdown a:focus-visible {
  color: #fff !important;
  background: #de1e15;
  outline: 0;
}
@media (max-width: 900px) {
  .site-nav .portfolio-dropdown { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .portfolio-dropdown { transition: none; }
}
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.header-cta { display: inline-flex; min-height: 42px; align-items: center; gap: 10px; padding: 0; color: #fff; background: transparent; font-family: "Mona Sans", "Aileron", "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; transition: color .2s ease; }
.header-cta-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #000; background: #fff; border-radius: 50%; font-size: 1.1rem; font-weight: 900; -webkit-text-stroke: .35px currentColor; transition: color .2s ease, background .2s ease, transform .2s ease; }
.header-cta:hover, .header-cta:focus-visible { color: var(--ink); }
.header-cta:hover .header-cta-icon, .header-cta:focus-visible .header-cta-icon { color: #fff; background: var(--ink); transform: rotate(45deg); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.menu-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: #fff; transition: transform .2s ease, opacity .2s ease; }

.hero { overflow: hidden; min-height: 690px; display: grid; align-items: center; color: #fff; background: linear-gradient(115deg, var(--ink) 0 58%, var(--slate-dark) 58% 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 7vw, 100px); padding-block: 90px; }
.hero-copy h1, .page-hero h1 { max-width: none; width: 100%; margin: 12px 0 24px; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .94; letter-spacing: -.055em; }
.page-hero h1 { white-space: nowrap; }
.lede { max-width: 650px; color: #dbe0e3; font-size: clamp(1.08rem, 2vw, 1.32rem); }
.eyebrow { margin: 0; color: var(--red); font-size: .78rem; font-weight: 850; letter-spacing: .19em; text-transform: uppercase; }
.hero-art { position: relative; }
.hero-art img { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.85) contrast(1.04); box-shadow: var(--shadow); }
.hero-accent { position: absolute; z-index: 1; right: -28px; bottom: -28px; width: 74%; height: 74%; background: var(--red); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 36px; }
/* Universal CTA buttons: based on the Contact submit button */
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 4px 4px 20px;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.button::after {
  content: "↗";
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  color: var(--ink);
  background: #fff;
  border-radius: 50%;
  font-weight: 900;
  -webkit-text-stroke: .35px currentColor;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.button:hover, .button:focus-visible {
  color: var(--ink);
  background: #fff;
  transform: translateY(-2px);
}
.button:hover::after, .button:focus-visible::after {
  color: #fff;
  background: var(--ink);
  transform: rotate(45deg);
}

.text-link { color: #fff; font-weight: 750; transition: color .2s ease; }
.text-link:hover, .text-link:focus-visible { color: var(--link-red); }
.section { padding-block: clamp(52px, 6vw, 84px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 42px; }
.section-heading.compact { margin-bottom: 34px; }
.section-heading h2 { max-width: 700px; margin: 8px 0 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.05; letter-spacing: -.04em; }
.section-heading > p { max-width: 380px; color: var(--muted); }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.capability-grid a { padding-bottom: 26px; background: var(--soft); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.capability-grid a:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.capability-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.capability-grid h3, .capability-grid p { margin-right: 24px; margin-left: 24px; }
.capability-grid h3 { margin-top: 24px; margin-bottom: 6px; font-size: 1.35rem; }
.capability-grid p { margin-top: 0; color: var(--muted); }
.feature-band { color: #fff; background: var(--slate-dark); }
.split-callout { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.split-callout h2 { margin: 8px 0 0; font-size: clamp(2.1rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.04em; }
/* Use on dark backgrounds */
.button-light { color: var(--ink); background: #fff; }
.button-light::after { color: #fff; background: var(--ink); }
.button-light:hover, .button-light:focus-visible { color: #fff; background: var(--ink); }
.button-light:hover::after, .button-light:focus-visible::after { color: var(--ink); background: #fff; }

/* Optional inverse CTA for light backgrounds */
.button-dark { color: #fff; background: var(--ink); }
.button-dark::after { color: var(--ink); background: #fff; }
.button-dark:hover, .button-dark:focus-visible { color: var(--ink); background: #fff; }
.button-dark:hover::after, .button-dark:focus-visible::after { color: #fff; background: var(--ink); }

.about-intro, .contact-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr); align-items: start; gap: clamp(50px, 8vw, 110px); }
.about-copy h2, .contact-copy h2, .authorship h2, .contact-form-shell h2 { margin: 10px 0 26px; font-size: clamp(2.15rem, 4.4vw, 4.6rem); line-height: 1.03; letter-spacing: -.045em; }
.about-copy p:not(.eyebrow), .contact-copy p:not(.eyebrow), .authorship p, .contact-note p { color: var(--slate); font-size: 1.05rem; }
.portrait { position: sticky; top: 120px; margin: 0; background: var(--slate-dark); box-shadow: var(--shadow); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.portrait figcaption { padding: 20px 22px; color: #fff; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.portrait figcaption span { color: #cbd3d7; font-size: .78rem; font-weight: 650; }
.authorship, .contact-note { color: #fff; background: var(--slate-dark); }
.authorship-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 130px); }
.authorship .eyebrow, .contact-note .eyebrow { color: var(--red); }
.authorship p, .contact-note p { color: #dbe0e3; }
.strength-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.strength-grid article { padding: 30px; background: var(--soft); border-top: 4px solid var(--red); }
.strength-grid article > span { color: var(--red); font-weight: 850; }
.strength-grid h3 { margin: 24px 0 8px; font-size: 1.35rem; }
.strength-grid p { margin: 0; color: var(--muted); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 30px; margin-top: 38px; }
.contact-line { display: inline-flex; flex-direction: column; color: var(--ink); text-decoration: none; font-weight: 800; }
.contact-line span { color: var(--red); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.contact-form-shell { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: clamp(40px, 8vw, 100px); }
.embedded-form { min-height: 320px; padding: 28px; background: var(--soft); border-top: 4px solid var(--red); }

.contact-welcome { max-width: 1060px; text-align: center; }
.contact-welcome h2 { margin: 12px 0 0; color: var(--ink); font-family: "Mona Sans", "Aileron", sans-serif; font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; }
.contact-welcome h2 span { color: var(--muted); }
.contact-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-bottom: clamp(54px, 7vw, 90px); }
.contact-detail-card { min-width: 0; padding: 30px 25px 40px; background: #fff; border-radius: 12px; text-align: center; box-shadow: 0 10px 32px rgba(17, 20, 22, .07); }
.contact-detail-icon { display: grid; width: 88px; height: 88px; margin: 0 auto 22px; place-items: center; color: var(--red); background: #ffe4e1; border-radius: 50%; font-size: 32px; transition: color .25s ease, background .25s ease; }
.contact-detail-card:hover .contact-detail-icon { color: #fff; background: var(--red); }
.contact-detail-card h3 { margin: 0 0 20px; font-size: 24px; font-weight: 600; line-height: 1.2; }
.contact-detail-card p { max-width: 224px; margin: 0 auto; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.contact-detail-card a { transition: color .2s ease; }
.contact-detail-card a:hover, .contact-detail-card a:focus-visible { color: var(--red); }
.contact-message-context { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(32px, 6vw, 84px); padding-bottom: clamp(34px, 4vw, 52px); }
.contact-message-context h2 { max-width: 580px; margin: 10px 0 0; font-family: "Mona Sans", "Aileron", sans-serif; font-size: clamp(2rem, 3.8vw, 3.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.contact-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 591px); align-items: stretch; gap: 26px; padding-top: 0; }
.contact-form-card { display: flex; height: 100%; flex-direction: column; padding: clamp(30px, 4vw, 52px); background: #fff; border-radius: 16px; box-shadow: 0 10px 36px rgba(17, 20, 22, .08); }
.contact-form-card h2 { margin: 0 0 35px; font-family: "Mona Sans", "Aileron", sans-serif; font-size: clamp(1.8rem, 2.5vw, 2.5rem); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.contact-form-card form { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.contact-form-card .contact-form-grid { width: 100%; }
.contact-form-intro { margin: 0; color: var(--slate); font-size: 14px; line-height: 1.55; }
.contact-form-intro p { margin: 0 0 12px; }
.contact-form-intro p:last-child { margin-bottom: 0; }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 27px 24px; }
.contact-form-grid label { display: block; }
.contact-form-grid input, .contact-form-grid select, .contact-form-grid textarea { width: 100%; min-height: 48px; padding: 11px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed #bfc8cc; border-radius: 0; font: inherit; }
.contact-form-grid input::placeholder, .contact-form-grid textarea::placeholder { color: var(--muted); opacity: 1; }
.contact-form-grid textarea { min-height: 130px; padding-top: 0; resize: none; }
.contact-form-grid input:focus, .contact-form-grid select:focus, .contact-form-grid textarea:focus { outline: 0; border-bottom-color: var(--red); }
.contact-message { grid-column: 1 / -1; }
.contact-honeypot { position: absolute; left: -10000px; }
.contact-submit { display: inline-flex; min-height: 48px; align-items: center; gap: 14px; margin-top: 48px; padding: 4px 4px 4px 20px; color: #fff; background: var(--red); border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.contact-submit > span:last-child { display: grid; width: 40px; height: 40px; place-items: center; color: #000; background: #fff; border-radius: 50%; font-weight: 900; -webkit-text-stroke: .35px currentColor; transition: color .2s ease, background .2s ease, transform .2s ease; }
.contact-submit:hover, .contact-submit:focus-visible { color: var(--ink); background: #fff; transform: translateY(-2px); }
.contact-submit:hover > span:last-child, .contact-submit:focus-visible > span:last-child { color: #fff; background: var(--ink); transform: rotate(45deg); }
.form-status { margin-bottom: 24px; padding: 18px; border-radius: 10px; font-size: .92rem; }
.form-status p { margin: 0 0 10px; }
.form-status p:last-child { margin-bottom: 0; }
.form-success { color: #233b2e; background: #eaf5ee; }
.form-error { color: #6d1712; background: #ffe4e1; }
.contact-photo { position: relative; overflow: hidden; width: 100%; max-width: 591px; min-height: 0; height: 100%; aspect-ratio: 591 / 639; margin: 0; border-radius: 16px; background: var(--slate-dark) url("../images/contact/Contact-Giselle(591X639)-New-Site-3.jpg") top center / cover no-repeat; }
.contact-photo > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; will-change: transform; }
.contact-photo-marquee { position: absolute; z-index: 3; top: 0; right: -8px; width: 70px; height: 100%; overflow: hidden; display: flex; justify-content: center; pointer-events: none; }
.contact-photo-marquee-track { display: flex; flex-direction: column; align-items: center; will-change: transform; }
.contact-photo-marquee-track strong, .contact-photo-marquee-track span { flex-shrink: 0; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; color: #fff; }
.contact-photo-marquee-track strong { padding-block: 14px; font-size: 32pt; font-weight: 600; line-height: 1.35; }
.contact-photo-marquee-track span { padding-block: 14px; font-size: 37pt; line-height: 1; }
.contact-photo-caption-shell { position: absolute; z-index: 4; bottom: 0; left: 0; width: 241px; padding: 15px 15px 0 0; background: #faf7f1; border-radius: 0 12px 0 0; }
.contact-photo figcaption { display: flex; width: 226px; flex-direction: column; padding: 28px 30px 35px; color: var(--ink); background: #fff; border-radius: 10px; }
.contact-photo figcaption strong { margin-bottom: 2px; color: var(--red); font-size: 24px; font-weight: 700; line-height: 1.2; }
.contact-photo figcaption span { color: var(--muted); font-size: 18px; font-weight: 400; line-height: 1.25; }
.contact-callout { overflow: hidden; width: 100%; padding-block: clamp(58px, 8vw, 110px); color: #fff; background: linear-gradient(rgba(58, 71, 80, .44), rgba(58, 71, 80, .44)), url("../images/contact/OHIO-COLORIZE-1.jpg") center/cover; border-radius: 12px; }
.contact-callout h2 { max-width: 1000px; margin: 0 auto; font-family: "Mona Sans", "Aileron", sans-serif; font-size: clamp(2rem, 4.2vw, 4.2rem); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; text-align: center; }
.contact-portfolio { overflow: hidden; padding: clamp(50px, 6vw, 78px) 0; background: #faf7f1; }
.contact-portfolio-heading { margin-bottom: 28px; }
.contact-portfolio-heading h2 { margin: 8px 0 0; font-family: "Mona Sans", "Aileron", sans-serif; font-size: clamp(2rem, 3.5vw, 3.4rem); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.contact-portfolio-frame { position: relative; }
.contact-portfolio-track { display: flex; gap: 0; overflow-x: auto; padding: 0; scrollbar-width: none; }
.contact-portfolio-track::-webkit-scrollbar { display: none; }
.contact-portfolio-card { position: relative; overflow: hidden; flex: 0 0 220px; height: 155px; border-radius: 10px; }
.contact-portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.contact-portfolio-card span { position: absolute; inset: 0; display: flex; align-items: end; padding: 14px; color: #fff; background: rgba(52, 7, 5, .82); font-size: .78rem; font-weight: 700; line-height: 1.2; transition: opacity .35s ease; }
.contact-portfolio-card:hover span, .contact-portfolio-card:focus-visible span { opacity: 0; }
.contact-portfolio-card:hover img, .contact-portfolio-card:focus-visible img { transform: scale(1.04); }
.contact-portfolio-button { position: absolute; z-index: 3; top: 50%; width: 34px; height: 34px; padding: 0; color: #fff; background: var(--red); border: 0; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.contact-portfolio-prev { left: 10px; }
.contact-portfolio-next { right: 10px; }

.page-hero { overflow: hidden; width: 100%; margin: 0; padding-block: clamp(48px, 6vw, 82px); background: var(--soft); border-radius: 12px; }
.page-hero-dark { color: #fff; background: linear-gradient(120deg, var(--ink), var(--slate-dark)); }
.page-hero h1 { max-width: none; width: 100%; margin: 8px 0 20px; font-family: "Mona Sans", "Aileron", "Helvetica Neue", Arial, sans-serif; font-size: clamp(2.1rem, 5vw, 4.7rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.page-hero p:last-child { width: 100%; margin-bottom: 0; color: var(--muted); font-size: 16px; }
.page-hero-dark p:last-child { color: #fff; }
.portfolio-page .section { padding-top: clamp(40px, 4.8vw, 68px); padding-bottom: 68px; }
.portfolio-detail-page .section { padding-top: 32px; }
.portfolio-page main > .section.shell { width: min(956px, calc(100% - 40px)); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; gap: 68px 28px; }
.work-card { min-width: 0; background: transparent; }
.work-card h2 { margin: 0 0 10px; color: var(--blue); font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 1rem; font-weight: 400; line-height: 20px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.work-card h2 a { color: inherit; text-decoration: none; }
.work-card h2 a:hover, .work-card h2 a:focus-visible { color: var(--link-red); }
.work-image { overflow: hidden; display: block; width: 300px; max-width: 100%; aspect-ratio: 3 / 2; background: transparent; border-radius: 12px; text-decoration: none; }
.work-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .3s ease, opacity .3s ease; }
.work-image:hover img, .work-image:focus-visible img { opacity: .9; transform: scale(1.018); }
.work-copy { padding-top: 11px; text-align: center; }
.work-copy:empty { display: none; }
.work-copy p { margin: 0; color: var(--slate); font-size: .92rem; line-height: 1.5; }

.site-footer { position: relative; overflow: hidden; color: #fff; background: var(--surface-red); border-radius: 12px 12px 0 0; }
.site-footer::before { position: absolute; z-index: 0; inset: 0; content: ""; pointer-events: none; background: radial-gradient(ellipse 42% 180% at 50% 115%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .14) 34%, rgba(255, 255, 255, 0) 74%); }
.footer-bottom { position: relative; z-index: 1; background: transparent; border: 0; }
.footer-bottom-inner { min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 10px; }
.copyright { color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.footer-linkedin { display: grid; width: 30px; height: 30px; place-items: center; color: var(--red); background: #fff; border-radius: 50%; font-size: .76rem; font-weight: 800; line-height: 1; transition: color .2s ease, background .2s ease, transform .2s ease; }
.footer-linkedin:hover, .footer-linkedin:focus-visible { color: #fff; background: var(--ink); transform: translateY(-2px); }
.footer-nav { justify-self: end; }
.footer-nav ul { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.footer-nav li { display: inline-flex; align-items: center; gap: 12px; }
.footer-nav li + li::before { width: 1px; height: 12px; content: ""; background: rgba(255, 255, 255, .42); }
.footer-nav a { color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em; transition: color .2s ease; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ink); }

.lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 60px 24px 28px; color: #fff; background: rgba(7, 9, 10, .94); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1200px, 94vw); max-height: 80vh; object-fit: contain; }
.lightbox p { margin: 12px 0 0; }
.lightbox-close { position: absolute; top: 16px; right: 22px; width: 44px; height: 44px; color: #fff; background: transparent; border: 1px solid #fff; font-size: 2rem; line-height: 1; }

@media (max-width: 900px) {
  :root { --shell: min(100% - 32px, 760px); }
  .site-header .header-inner { min-height: 60px; padding-inline: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
  #smooth-content { padding-top: 0; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; padding: 18px 16px 26px; background: var(--surface-red); border-bottom: 2px solid var(--ink); }
  .site-nav.open { display: block; }
  .site-nav { justify-self: stretch; }
  .site-nav ul { width: var(--shell); margin-inline: auto; display: grid; gap: 0; }
  .site-nav a { display: block; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); }
  .site-nav a::after { display: none; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { background: linear-gradient(155deg, var(--ink) 0 74%, var(--slate-dark) 74% 100%); }
  .hero-grid { grid-template-columns: 1fr; padding-block: 70px 90px; }
  .hero-art { max-width: 560px; }
  .hero-art img { aspect-ratio: 16 / 10; }
  .portfolio-grid { grid-template-columns: repeat(2, 300px); }
  .capability-grid { grid-template-columns: 1fr; }
  .about-intro, .contact-intro, .authorship-grid, .contact-form-shell, .contact-message-context { grid-template-columns: 1fr; }
  .contact-details { grid-template-columns: repeat(2, 1fr); }
  .contact-workspace { grid-template-columns: 1fr; }
  .portrait { position: static; max-width: 430px; }
  .strength-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --shell: calc(100% - 28px); }
  .page-hero { width: 100%; margin-inline: 0; }
  .brand-logo { width: 158px; }
  .header-cta { min-height: 38px; gap: 7px; font-size: .78rem; }
  .header-cta-icon { width: 34px; height: 34px; }
  .menu-toggle { width: 40px; padding-inline: 8px; }
  .hero { min-height: auto; }
  .hero-copy h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .page-hero h1 { font-size: 45px; white-space: normal; }
  .section-heading, .split-callout { align-items: start; flex-direction: column; gap: 18px; }
  .portfolio-page main > .section.shell { width: min(300px, calc(100% - 28px)); }
  .portfolio-grid { grid-template-columns: 300px; }
  .contact-details { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-message { grid-column: auto; }
  .contact-portfolio-track { padding-inline: 0; }
  .footer-bottom-inner { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding-block: 14px; text-align: center; }
  .footer-nav { justify-self: center; }
  .footer-nav ul { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
  .contact-photo-marquee-track { animation: none !important; }
}

/* =========================================================
   SHARED PAGE INTRO ALIGNMENT
   Keeps each page hero's eyebrow, title and intro copy on the
   same left edge as that page's primary body content.
   One shared CSS rule means existing HTML pages do not need
   to be re-uploaded or edited individually.
   ========================================================= */

/* Standard pages (About, Contact, etc.) already use the main site shell. */
body {
  --wp-page-content-shell: var(--shell);
}

/* Portfolio listing/category pages use the 956px portfolio content width. */
.portfolio-page {
  --wp-page-content-shell: min(956px, calc(100% - 40px));
}

/* Retouching detail pages center their readable copy/navigation at 930px. */
.retouch-detail-page {
  --wp-page-content-shell: min(930px, calc(100% - 40px));
}

/* Editorial / brochure project pages use the same 930px readable text measure. */
.brochure-detail-page {
  --wp-page-content-shell: min(930px, calc(100% - 40px));
}

/* Apply the page-specific content width to the complete hero text block. */
.page-hero > .shell {
  width: var(--wp-page-content-shell) !important;
  margin-inline: auto !important;
}

@media (max-width: 700px) {
  body {
    --wp-page-content-shell: calc(100% - 28px);
  }

  /* Portfolio grids collapse to the existing 300px mobile width. */
  .portfolio-page:not(.retouch-detail-page):not(.brochure-detail-page) {
    --wp-page-content-shell: min(300px, calc(100% - 28px));
  }

  .retouch-detail-page,
  .brochure-detail-page {
    --wp-page-content-shell: calc(100% - 28px);
  }
}


/* =========================================================
   PAGE HERO VERTICAL SPACING RESTORE
   Keep the newly unified left alignment, while restoring the
   approved breathing room above and below the intro content.
   ========================================================= */
.page-hero {
  padding-top: clamp(64px, 5.5vw, 80px) !important;
  padding-bottom: clamp(64px, 5.5vw, 80px) !important;
}

@media (max-width: 700px) {
  .page-hero {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* =========================================================
   WEBPHOTOGRAPHIX — UNIFIED LIGHT SLATE + HERO SPACING
   2026-09-22
   Uses the same light slate introduced on Explorations in AI.
   This patch is intentionally shared so brochure/editorial,
   brand/project pages, and other light feature bands stay unified.
   ========================================================= */

:root {
  --wp-light-slate: #ebf0f6;
  --wp-deep-slate: #3a4750;
}

/* Restore the approved breathing room inside every standard page hero.
   Keep this at the very end so per-page inline rules cannot collapse it. */
body .page-hero {
  padding-top: clamp(64px, 5.5vw, 80px) !important;
  padding-bottom: clamp(64px, 5.5vw, 80px) !important;
  border-radius: 0 !important;
}

/* Editorial / brochure client-intro band. */
body.brochure-detail-page .brochure-overview {
  background: var(--wp-light-slate) !important;
}

/* Brand / campaign project overview sections such as Honda. */
body.project-page .project-overview {
  background: #fff !important;
}

/* Other full-width light feature bands already used throughout
   the responsive portfolio should use the same slate instead of teal-green. */
body .project-info-section,
body .project-details-section,
body .client-overview,
body .client-section,
body .light-section,
body .section-light {
  background: var(--wp-light-slate) !important;
}

/* Preserve full-bleed treatment where the existing page uses a centered shell
   for the light band. */
body.brochure-detail-page .brochure-overview {
  box-shadow: 0 0 0 100vmax var(--wp-light-slate);
  clip-path: inset(0 -100vmax);
}

@media (max-width: 700px) {
  body .page-hero {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* =========================================================
   PRODUCTION RULE: UNIFIED PAGE-INTRO H1 TYPOGRAPHY
   Approved reference: portfolio.html.
   Applies to every standard page intro H1 site-wide.
   ========================================================= */
html body main .page-hero > .shell > h1,
html body main .page-hero > .shell > h1.title-anim {
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 20px !important;
  font-family: "Aileron", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(2.1rem, 5vw, 4.7rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}

/* Optical alignment: bring the visible H1 glyph edge onto the same axis
   as the eyebrow and intro paragraph. */
html body main .page-hero > .shell > h1,
html body main .page-hero > .shell > h1.title-anim {
  position: relative;
  left: -2px;
}

/* =========================================================
   PRODUCTION RULE: UNIFIED INTERIOR INTRO-HERO HEIGHT
   Keeps standard intro heroes visually consistent site-wide.
   ========================================================= */
html body main .page-hero.page-hero-dark {
  min-height: clamp(310px, 24vw, 360px) !important;
}
html body main .page-hero.page-hero-dark > .shell {
  min-height: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (max-width: 980px) {
  html body main .page-hero.page-hero-dark {
    min-height: clamp(290px, 32vw, 340px) !important;
  }
}

@media (max-width: 700px) {
  html body main .page-hero > .shell > h1,
  html body main .page-hero > .shell > h1.title-anim {
    white-space: normal !important;
    left: -1px;
  }
  html body main .page-hero.page-hero-dark {
    min-height: 300px !important;
  }
}


/* =========================================================
   WEBPHOTOGRAPHIX — LINKED CLIENT PAGE COLOR SYSTEM
   Approved production layout, 2026-09-29.
   Project overview = white.
   Card field = light slate (#ebf0f6).
   Cards = deep slate (#3a4750).
   Design Approach = white.
   Selected Work + project navigation = light slate.
   ========================================================= */
html body.project-page .project-overview {
  background: #fff !important;
  box-shadow: none !important;
  clip-path: none !important;
}

html body.project-page .project-card-panel {
  background: var(--wp-light-slate, #ebf0f6) !important;
}

/* Support project pages still using the earlier project-meta card markup. */
html body.project-page .project-meta {
  position: relative;
  background: var(--wp-light-slate, #ebf0f6) !important;
  border-color: var(--wp-light-slate, #ebf0f6) !important;
}
html body.project-page .project-meta > div,
html body.project-page .project-info-card {
  background: var(--wp-deep-slate, #3a4750) !important;
  color: #fff !important;
}
html body.project-page .project-meta dt,
html body.project-page .project-meta dd,
html body.project-page .project-info-title,
html body.project-page .project-info-desc,
html body.project-page .project-info-icon,
html body.project-page .project-info-icon i {
  color: #fff !important;
}

html body.project-page .project-approach {
  position: relative;
  background: #fff !important;
  box-shadow: 0 0 0 100vmax #fff !important;
  clip-path: inset(0 -100vmax) !important;
}

html body.project-page .project-gallery,
html body.project-page main > .project-back,
html body.project-page .project-gallery > .project-back {
  background: var(--wp-light-slate, #ebf0f6) !important;
  box-shadow: 0 0 0 100vmax var(--wp-light-slate, #ebf0f6) !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Older brochure pages draw a separate full-width gallery layer with a
   pseudo-element. Keep that layer on the same approved light slate so the
   gallery and navigation field remain one continuous color to the footer. */
html body.brochure-detail-page .project-gallery::before {
  background: var(--wp-light-slate, #ebf0f6) !important;
}

/* Project navigation: deep slate at rest, restrained slate hover. */
html body.project-page .project-back .button.back-to-portfolio {
  color: #fff !important;
  background: var(--wp-deep-slate, #3a4750) !important;
}
html body.project-page .project-back .button.back-to-portfolio::after {
  color: var(--wp-deep-slate, #3a4750) !important;
  background: #fff !important;
}
html body.project-page .project-back .button.back-to-portfolio:hover,
html body.project-page .project-back .button.back-to-portfolio:focus-visible {
  color: #fff !important;
  background: #455560 !important;
}
html body.project-page .project-back .button.back-to-portfolio:hover::after,
html body.project-page .project-back .button.back-to-portfolio:focus-visible::after {
  color: #fff !important;
  background: var(--wp-deep-slate, #3a4750) !important;
  transform: rotate(45deg);
}

/* No orphan white strip between project navigation and the footer. */
html body.project-page main,
html body.project-page main > .project-back,
html body.project-page .project-back,
html body.project-page .site-footer {
  margin-bottom: 0 !important;
}
html body.project-page .site-footer { margin-top: 0 !important; }

/* Universal linked-client/project back button treatment. */
html body.project-page .project-back > a {
  display: inline-flex !important;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 3px 3px 3px 16px;
  border: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #fff !important;
  background: var(--wp-deep-slate, #3a4750) !important;
}
html body.project-page .project-back > a::after {
  content: "↗";
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  font-size: 14px;
  color: var(--wp-deep-slate, #3a4750) !important;
  background: #fff !important;
  border-radius: 50%;
  font-weight: 900;
  -webkit-text-stroke: .35px currentColor;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
html body.project-page .project-back > a:hover,
html body.project-page .project-back > a:focus-visible {
  color: #fff !important;
  background: #455560 !important;
  transform: translateY(-2px);
}
html body.project-page .project-back > a:hover::after,
html body.project-page .project-back > a:focus-visible::after {
  color: #fff !important;
  background: var(--surface-red, #de1e15) !important;
  transform: rotate(45deg);
}

/* Center paired portfolio/client buttons while allowing a clean mobile wrap. */
html body.project-page .project-back.project-back-centered {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 11px;
}

/* Every back button reverses the standard CTA direction and interaction. */
html body.project-page .project-back > a.back-button {
  padding: 3px 16px 3px 3px;
}
html body.project-page .project-back > a.back-button::before {
  content: "↖";
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  font-size: 14px;
  color: var(--wp-deep-slate, #3a4750) !important;
  background: #fff !important;
  border-radius: 50%;
  font-weight: 900;
  -webkit-text-stroke: .35px currentColor;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
html body.project-page .project-back > a.back-button::after {
  content: none !important;
  display: none !important;
}
html body.project-page .project-back > a.back-button:hover::before,
html body.project-page .project-back > a.back-button:focus-visible::before {
  color: #fff !important;
  background: var(--surface-red, #de1e15) !important;
  transform: rotate(-45deg);
}

/* Preserve the approved project-card hover interaction after the universal color override. */
html body.project-page .project-info-card:hover,
html body.project-page .project-info-card:focus-within {
  background: #fff !important;
}
html body.project-page .project-info-card:hover .project-info-title,
html body.project-page .project-info-card:focus-within .project-info-title {
  color: #0c1e21 !important;
}
html body.project-page .project-info-card:hover .project-info-desc,
html body.project-page .project-info-card:focus-within .project-info-desc {
  color: #364e52 !important;
}
html body.project-page .project-info-card:hover .project-info-icon,
html body.project-page .project-info-card:hover .project-info-icon i,
html body.project-page .project-info-card:focus-within .project-info-icon,
html body.project-page .project-info-card:focus-within .project-info-icon i {
  color: var(--wp-deep-slate, #3a4750) !important;
}





/* Approved universal responsive-project rules — 2026-09-30 */
i.tji-list,
.tji-list {
  color: #fe1907 !important;
}

/* Shorter plain gradient project headers.
   Does NOT target portfolio gallery/banner hero classes. */
.project-page .page-hero.page-hero-dark {
  min-height: 0 !important;
  padding-top: 72px !important;
  padding-bottom: 64px !important;
}

@media (max-width: 700px) {
  .project-page .page-hero.page-hero-dark {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
}

/* =========================================================
   FINAL PRODUCTION OVERRIDE — PLAIN PROJECT HERO SPACING
   2026-09-30
   Plain gradient project banners only:
   - moves eyebrow/content lower beneath the red header
   - height remains content-driven (not locked)
   - excludes designed portfolio/gallery banners
   ========================================================= */
html body.project-page main#main
.page-hero.page-hero-dark:not(.gallery-banner-hero):not(.social-media-gallery-hero):not(.retail-gallery-hero) {
  min-height: 0 !important;
  padding: 0 !important;
}

html body.project-page main#main
.page-hero.page-hero-dark:not(.gallery-banner-hero):not(.social-media-gallery-hero):not(.retail-gallery-hero) > .shell {
  min-height: 0 !important;
  display: block !important;
  padding-top: 144px !important;
  padding-bottom: 60px !important;
}

@media (max-width: 700px) {
  html body.project-page main#main
  .page-hero.page-hero-dark:not(.gallery-banner-hero):not(.social-media-gallery-hero):not(.retail-gallery-hero) > .shell {
    padding-top: 96px !important;
    padding-bottom: 48px !important;
  }
}