/* Shared finishing layer: editorial spacing, quiet surfaces, consistent details. */
:root {
  --jg-ink: #071a38;
  --jg-muted: #53647a;
  --jg-line: rgba(7, 26, 56, .13);
  --jg-radius: 8px;
  --jg-space: clamp(80px, 8vw, 128px);
}
body { font-size: 1rem; -webkit-font-smoothing: antialiased; }
::selection { background: #ffbd17; color: #071a38; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}
:where(.home-nav, .home-footer, .campaigns-showcase, .video-reportages) :focus-visible {
  outline-color: var(--yellow);
}
.home-links a { font-weight: 500; }
.home-links a.active::after { bottom: -9px; }
.nav-cta, .outline-btn, .final-cta > a, .form-bottom button, .contact-options > a {
  min-height: 48px;
  border-radius: 4px;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.outline-btn { align-items: center; padding: 17px 24px; }
.text-link, .light-link, .section-link, .contact-map-head a { font-size: .9375rem; }
.section-mark, .kicker, .inner-tag { font-size: .8125rem; letter-spacing: .16em; }
.section-heading { gap: 40px; margin-bottom: 56px; }
.section-heading h2, .photo-heading h2, .websites-heading h2,
.campaigns-heading h2, .video-reportages-heading h2, .method-heading h2 {
  font-size: clamp(38px, 4.7vw, 68px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.section-heading > p, .about-copy p, .story-copy p,
.photo-heading > p, .contact-info > p { max-width: 36rem; line-height: 1.8; }
.about-home, .expertise-home, .process-home, .work-home,
.services-detail, .websites-showcase, .campaigns-showcase, .photo-reportages,
.video-reportages, .vision, .agency-story, .agency-method {
  padding-top: var(--jg-space);
  padding-bottom: var(--jg-space);
}
.about-home { background: #fff; }
.about-home::before { opacity: .55; }
.about-home::after { display: none; }
.about-title h2 { line-height: 1.08; letter-spacing: -.045em; }
.about-copy p { color: var(--jg-muted); }
.expertise-home { background: #eef4fb; }
.expertise-list { gap: 20px; }
.expertise-row {
  border-radius: var(--jg-radius);
  border-color: var(--jg-line);
  box-shadow: none;
}
.expertise-row:nth-child(2n) { background: #fff; }
.expertise-row h3 { line-height: 1.12; letter-spacing: -.04em; }
.expertise-row p { font-size: 1rem; line-height: 1.7; }
.expertise-row::after { opacity: .4; }
.expertise-row:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(7,26,56,.07); }
.step h3 { line-height: 1.2; }
.step p { line-height: 1.75; }
.step:hover .step-icon { transform: translateY(-4px); }
.work-home { background: #fff; }
.work-home .section-heading { border-top: 0; padding-top: 0; margin-bottom: 48px; }
.work-grid { gap: 24px; grid-template-rows: 410px 360px; }
.work-card { border-radius: var(--jg-radius); border: 0; }
.work-meta { left: 32px; right: 32px; bottom: 30px; }
.work-meta h3 { font-size: clamp(27px, 2.7vw, 39px); line-height: 1.12; letter-spacing: -.035em; }
.work-meta span, .work-meta > b { font-size: .8125rem; }
.work-card:focus-visible { outline-offset: 6px; }
.work-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(7,26,56,.13); }
.work-card:hover img { transform: scale(1.025); }
.proof-home { background: #f4f7fc; padding-top: 80px; padding-bottom: 90px; }
.proof-head > h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.1; color: var(--jg-ink); }
.proof-head > span { font-size: .875rem; }
.logo-line { border: 0; gap: 14px; margin-top: 32px; }
.logo-item { background: #fff; border: 1px solid var(--jg-line); border-radius: 6px; }
.final-cta { background: #0d3474; padding-top: var(--jg-space); padding-bottom: var(--jg-space); }
.final-cta h2 { font-size: clamp(40px, 5.3vw, 76px); line-height: 1.08; letter-spacing: -.045em; max-width: 1050px; margin-left: auto; margin-right: auto; }
.final-cta > a { align-items: center; padding: 18px 28px; }
.final-cta > a:hover { background: #ffd15c; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.home-footer { background: #071a38; border-top: 1px solid rgba(255,189,23,.6); gap: 40px; padding-top: 80px; }
.home-footer span { color: #a3b4cc; font-size: .8125rem; letter-spacing: .12em; }
.home-footer a, .home-footer p { color: #d0dbea; font-size: .9375rem; line-height: 1.9; overflow-wrap: anywhere; }
.home-footer a:hover { color: var(--yellow); }
.home-footer small { border-color: rgba(255,255,255,.15); color: #a3b4cc; font-size: .8125rem; }
.footer-social { border-color: rgba(255,255,255,.15); gap: 9px 16px; }
.footer-shortcuts { gap: 8px; }
.footer-shortcuts span { color: #a3b4cc; }
.website-grid { gap: 32px 24px; }
.website-visual { border-radius: var(--jg-radius); overflow: hidden; }
.website-meta { padding-top: 20px; gap: 16px; }
.website-meta h3 { line-height: 1.15; }
.website-meta span { font-size: .8125rem; }
.website-meta > b { font-size: .875rem; }
.websites-showcase { background: #f4f7fc; }
.web-code-studio, .design-studio { display: none; }
.websites-showcase::after, .campaigns-showcase::after,
.photo-reportages::before, .photo-reportages::after { display: none; }
.campaigns-showcase { background: #071a38; }
.campaign-grid { column-gap: 20px; }
.campaign-card { border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.photo-reportages { background: #fff; }
.photo-heading { margin-bottom: 56px; }
.photo-project + .photo-project { margin-top: 88px; }
.photo-grid { gap: 16px; }
.photo-card { border-radius: 6px; }
.photo-card:hover img { transform: scale(1.025); filter: brightness(.96); }
.photo-project-head h3 { line-height: 1.12; letter-spacing: -.04em; }
.photo-project-head span { font-size: .8125rem; }
.photo-project-meta b { font-size: .875rem; }
.video-reportages { background: #0b2245; }
.video-reportages-player { border-radius: var(--jg-radius); overflow: hidden; }
.video-player-meta { padding: 20px; }
.video-player-meta span, .video-player-meta a { font-size: .875rem; }
.video-reportage-choice small { font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.video-reportage-choice i { font-size: .75rem; }
.agency-story { background: #fff; }
.agency-story::before, .agency-story::after { display: none; }
.story-head h2 { line-height: 1.1; }
.vision-card, .detail-row { border-radius: var(--jg-radius); }
.vision-card h3, .detail-row h3 { line-height: 1.14; }
.vision-card p, .detail-row p { font-size: 1rem; line-height: 1.75; }
.detail-row li { font-size: .875rem; }
.agency-method::before { opacity: .35; }
.contact-main { gap: clamp(40px, 6vw, 96px); }
.project-form { border-radius: var(--jg-radius); box-shadow: 0 16px 48px rgba(7,26,56,.06); border: 1px solid var(--jg-line); }
.field label { font-size: .875rem; }
.field input, .field select, .field textarea { border-radius: 4px; font-size: 1rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.direct-contact span { font-size: .8125rem; color: var(--jg-muted); }
.direct-contact a { overflow-wrap: anywhere; }
.contact-map-frame { border-radius: var(--jg-radius); box-shadow: none; }
@media (max-width: 1024px) {
  .home-footer { gap: 32px; }
}
@media (max-width: 900px) {
  .work-grid { gap: 20px; }
  .section-heading { margin-bottom: 40px; gap: 24px; }
  .home-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-footer small { grid-column: 1 / -1; }
  .footer-shortcuts { grid-column: auto; padding-top: 0; border-top: 0; }
}
@media (max-width: 600px) {
  :root { --jg-space: 68px; }
  .section-heading h2, .photo-heading h2, .websites-heading h2,
  .campaigns-heading h2, .video-reportages-heading h2, .method-heading h2 {
    font-size: clamp(32px, 8.6vw, 44px);
    line-height: 1.12;
  }
  .section-mark, .kicker, .inner-tag { font-size: .75rem; letter-spacing: .12em; }
  .expertise-list { gap: 14px; }
  .expertise-row { padding: 26px; }
  .work-meta { left: 24px; right: 24px; bottom: 24px; }
  .work-meta h3 { font-size: 30px; }
  .proof-home { padding-top: 60px; padding-bottom: 68px; }
  .logo-line { gap: 10px; }
  .logo-item { height: 126px; }
  .final-cta h2 { font-size: clamp(34px, 9vw, 46px); }
  .home-footer { grid-template-columns: 1fr; padding-top: 60px; gap: 30px; }
  .footer-shortcuts { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); }
  .photo-grid { gap: 10px; }
  .photo-project + .photo-project { margin-top: 64px; }
  .campaign-grid { column-gap: 12px; }
  .campaign-card { margin-bottom: 12px; }
  .website-grid { gap: 28px; }
}
@media (hover: none) {
  .work-card:hover, .expertise-row:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .step, .culture-list article { opacity: 1; transform: none; }
}

/* Match the darker photographic treatment on the Expertises banner. */
.expertise-banner {
  --banner-exposure: 0.72;
  --banner-saturation: 0.78;
  --banner-tint: rgba(3, 15, 34, 0.25);
  --banner-shade: linear-gradient(90deg, rgba(3, 15, 34, 0.76) 0%, rgba(3, 15, 34, 0.54) 52%, rgba(3, 15, 34, 0.38) 100%),
    linear-gradient(0deg, rgba(3, 15, 34, 0.24), transparent 55%);
}

/* Editorial portfolio cards: imagery above, captions on a separate surface. */
.work-grid { grid-template-rows: auto 360px; }
.work-web, .work-campaign { grid-column: span 6; background: #fff; display: flex; flex-direction: column; border: 1px solid var(--jg-line); }
.work-web::before, .work-web::after, .work-campaign::after { display: none; }
.portfolio-cover { position: relative; height: clamp(260px, 27vw, 380px); overflow: hidden; background: #e8eef6; }
.work-web .portfolio-cover img, .work-campaign .portfolio-cover img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center 35%; }
.work-web .portfolio-cover img { object-position: center 42%; }
.portfolio-label { position: absolute; left: 20px; top: 20px; z-index: 1; background: rgba(255,255,255,.94); color: #071a38; padding: 9px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .03em; box-shadow: 0 3px 18px rgba(0,0,0,.08); }
.work-web .work-meta, .work-campaign .work-meta { position: relative; inset: auto; width: 100%; padding: 25px 28px 28px; color: #071a38; display: grid; grid-template-columns: 1fr auto; gap: 9px 16px; align-items: center; }
.work-web .work-meta > span, .work-campaign .work-meta > span { grid-column: 1 / -1; color: #50627a; font-size: 11px; letter-spacing: .12em; }
.work-web .work-meta h3, .work-campaign .work-meta h3 { max-width: 100%; font-size: clamp(25px, 2.4vw, 36px); margin: 0; line-height: 1.15; }
.work-web .work-meta > b, .work-campaign .work-meta > b { color: #0d3474; border: 0; padding: 0; font-size: 12px; white-space: nowrap; }
.work-web:hover .portfolio-cover img, .work-campaign:hover .portfolio-cover img { transform: scale(1.025); filter: none; }
@media(max-width: 900px) {
  .work-grid { grid-template-rows: none; }
  .work-web, .work-campaign { grid-column: 1 / -1; min-height: 0; }
  .portfolio-cover { height: clamp(260px, 55vw, 440px); }
}
@media(max-width: 600px) {
  .work-web .work-meta, .work-campaign .work-meta { padding: 22px; grid-template-columns: 1fr; }
  .work-web .work-meta > b, .work-campaign .work-meta > b { margin-top: 3px; }
  .portfolio-label { top: 14px; left: 14px; font-size: 10px; }
}

/* Keep all the wording on the selected Blotin creation visible. */
.campaign-cover { background: #f2e6d2; }
.work-campaign .campaign-cover img { object-fit: contain; object-position: center; }
.campaign-cover .portfolio-label { display: none; }

/* High-resolution production photo, with faces kept in the frame. */
.work-video img { object-position: center 28%; filter: saturate(.9) brightness(.93); }
.work-video:hover img { filter: saturate(.95) brightness(.96); }