/* Flipp'd / studio edition. Shared chrome, type and optical finishing.
   Art-direction type inside portfolio artwork remains deliberately distinct. */
:root {
  --studio-ink: #101118;
  --studio-paper: #f8f5f0;
  --studio-blue: #167bff;
  --studio-orange: #ff641a;
  --studio-emerald: #00c67a;
  --studio-yellow: #ffd23f;
  --studio-nav-surface: #101118fa;
  --studio-nav-filter: none;
  --studio-nav-shadow: 0 12px 28px -20px #03050b8c;
  --studio-type: 'Syne', sans-serif;
  --studio-body: 'Inter', sans-serif;
  --site-header-offset: 104px;
  --dark: #101118;
  --dark2: #14161e;
  --text: #171920;
  --mid: #5c5e66;
  --muted: #62646c;
  --ink: #171920;
  --red: #d8450b;
  --red-h: #b63808;
  --terracotta: #d8450b;
  --terracotta-dark: #b63808;
  --cobalt: #086aff;
}
body { font-family: var(--studio-body); }
button, input, select, textarea { font: inherit; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid #167bff; outline-offset: 5px; }
/* Headings receive focus after navigation for screen readers. Only interactive
   elements need a visible focus ring. */
:where(h1,h2,h3,h4)[tabindex="-1"]:focus { outline: none; }
[id] { scroll-margin-top: calc(var(--site-header-offset) + 24px); }
.studio-skip {
  position: fixed; left: 20px; top: 12px; z-index: 6000; padding: 12px 18px;
  background: var(--studio-paper); color: var(--studio-ink); border-radius: 4px;
  font: 600 13px var(--studio-body); transform: translateY(-180%);
}
.studio-skip:focus { transform: none; }
/* A smoked-glass rail. Blur is confined to the fixed header, with a dense
   tint so underlying headlines cannot compete with navigation labels. */
body :is(#nav,.site-nav).studio-navigation {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  width: 100%; height: var(--site-header-offset); padding: 14px clamp(20px,3.5vw,64px);
  display: grid; grid-template-columns: minmax(156px,1fr) auto minmax(156px,1fr);
  align-items: center; gap: 28px;
  color: var(--studio-paper); background: var(--studio-nav-surface) !important;
  border: 0 !important; border-bottom: 1px solid #ffffff12 !important;
  box-shadow: var(--studio-nav-shadow);
  backdrop-filter: var(--studio-nav-filter) !important; -webkit-backdrop-filter: var(--studio-nav-filter) !important;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root { --studio-nav-surface: rgba(16,17,24,.9); --studio-nav-filter: blur(24px) saturate(.8); }
}
@media (prefers-reduced-transparency:reduce) {
  :root { --studio-nav-surface: #101118; --studio-nav-filter: none; }
}
.studio-navigation::before {
  content: ''; position: absolute; left: clamp(20px,3.5vw,64px); right: clamp(20px,3.5vw,64px); bottom: 8px;
  height: 1px; background: linear-gradient(90deg,#ffffff35,#ffffff0d 36%,#ffffff0d 65%,#ffffff28);
}
.studio-navigation::after {
  content: ''; position: absolute; left: clamp(20px,3.5vw,64px); bottom: 7px;
  width: 32px; height: 3px; background: #ff641a;
}
.studio-navigation :is(.n-logo,.brand) {
  grid-column: 1; grid-row: 1; justify-self: start; display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; text-decoration: none; padding: 0; min-width: 0;
}
body :is(#nav,.site-nav).studio-navigation .brand-signature { display: block; width: 142px; }
body :is(#nav,.site-nav).studio-navigation .brand-signature img { width: 100%; height: auto; max-height: none; border-radius: 0; }
.studio-brand-caption { display: block; margin-left: 7px; color: #9da2b0; font: 500 8px/1.4 var(--studio-body); letter-spacing: .14em; text-transform: uppercase; }
.studio-navigation :is(.n-links,.site-links) {
  position: static; inset: auto; transform: none; width: auto; grid-column: 2; grid-row: 1;
  display: flex !important; justify-content: center; align-items: center; gap: clamp(18px,2vw,32px);
  list-style: none; margin: 0; padding: 0; visibility: visible; opacity: 1;
}
.studio-navigation :is(.n-links,.site-links) a {
  display: block; padding: 12px 0; position: relative; font: 500 12px/1.2 var(--studio-body);
  color: #c7cbd5; text-decoration: none; white-space: nowrap; letter-spacing: -.01em; text-transform: none;
  transition: color .2s ease; background: none;
}
.studio-navigation :is(.n-links,.site-links) a:is(:hover,[aria-current="page"]) { color: #fff; }
.studio-navigation :is(.n-links,.site-links) a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 3px; height: 2px;
  width: auto; background: var(--nav-accent,#ff641a); transition: right .22s ease; border-radius: 0;
}
.studio-navigation a[data-discipline="web"] { --nav-accent: #167bff; }
.studio-navigation a[data-discipline="logos"] { --nav-accent: var(--studio-yellow); }
.studio-navigation a[data-discipline="campaigns"] { --nav-accent: #ff641a; }
.studio-navigation a[data-discipline="tools"] { --nav-accent: #00c67a; }
.studio-navigation :is(.n-links,.site-links) a:is(:hover,[aria-current="page"])::after { right: 0; }
.studio-navigation .n-links a:hover::after { width: auto; }
body .studio-navigation :is(.n-cta,.nav-cta) {
  display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; align-items: center; gap: 20px; min-height: 43px;
  padding: 11px 17px; border: 1px solid #ffffff42; border-radius: 6px 18px 6px 6px;
  color: #fffaf4; background: #ffffff03; box-shadow: inset 0 1px #ffffff08;
  font: 600 11px/1.4 var(--studio-body); text-decoration: none; white-space: nowrap; text-transform: none;
  transform: none; transition: background .2s,border-color .2s;
}
body .studio-navigation :is(.n-cta,.nav-cta)::after { content: '↗'; color: #ff7a36; font-size: 18px; font-weight: 400; }
body .studio-navigation :is(.n-cta,.nav-cta):hover { background: #ff641a; border-color: #ff641a; color: #101118; }
body .studio-navigation :is(.n-cta,.nav-cta):hover::after { color: inherit; }
body .studio-navigation :is(.n-menu-toggle,.menu-toggle) { display: none; }
/* All four shortcuts use the destination's field, including on focus. */
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher {
  grid-template-columns: repeat(4,minmax(0,1fr)); border-radius: 12px; border: 1px solid #ffffff24; gap: 1px;
  background: #101118; box-shadow: 0 16px 32px #10111812;
}
.work-switcher a[data-discipline="web"] { --destination-field: var(--discipline-web-field); }
.work-switcher a[data-discipline="logos"] { --destination-field: var(--discipline-logo-field); }
.work-switcher a[data-discipline="campaigns"] { --destination-field: var(--discipline-campaign-field); }
.work-switcher a[data-discipline="tools"] { --destination-field: var(--discipline-tools-field); }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a { padding: 20px; min-height: 90px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; background: #f8f5f0; color: #171920; isolation: isolate; }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#10111855,#10111855),var(--destination-field);
  opacity: 0; transition: opacity .22s ease;
}
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a:is(:hover,:focus-visible,.active) { background: #101118; color: #fffaf4; }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a:is(:hover,:focus-visible,.active)::before { opacity: 1; }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a span { color: #5c5e66; font: 500 9px/1.5 var(--studio-body); letter-spacing: .07em; }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a:is(:hover,:focus-visible,.active) span { color: #fffaf4; }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher b { font: 700 16px/1.1 var(--studio-type); letter-spacing: -.035em; }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a[data-discipline="logos"]::before { background: var(--discipline-logo-field); }
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a[data-discipline="logos"]:is(:hover,:focus-visible,.active),
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a[data-discipline="logos"]:is(:hover,:focus-visible,.active) span { color: #282116; }
/* One typographic system for the interface. The four logo collection titles
   remain intentional editorial display styles, not accidental font drift. */
.showcase-hero .hero-title { font-family: var(--studio-type); font-weight: 700; letter-spacing: -.055em; line-height: 1.03; }
.showcase-hero .hero-copy { font-family: var(--studio-body); line-height: 1.7; }
.showcase-hero .hero-actions .button { font: 600 12px/1.4 var(--studio-body); border-radius: 6px 16px 6px 6px; }
.home-page :is(.st,.proc-title,.why-head,.home-range h2,.discipline-intro h2) { font-family: var(--studio-type); font-weight: 700; }
.home-page :is(.scard-title,.svc-title,.pt,.reel-h,.who-h) { font-family: var(--studio-type); }
.home-page :is(.sl,.home-range-kicker) { font: 600 10px/1.6 var(--studio-body); letter-spacing: .18em; }
.home-page :is(.btn-p,.btn-o,.btn-t,.btn-ghost) { font: 600 13px/1.45 var(--studio-body); border-radius: 6px 18px 6px 6px; }
.home-page :is(.why,.home-range) { color: #f8f5f0; }
.home-page .home-range-kicker { color: #78b6ff; }
.home-page .proc-badges .pb { border-radius: 4px; }
.home-page .proc-step { border-radius: 0; box-shadow: none; border-bottom: 1px solid #17192020; }
.home-page .proc-step .pn { color: #d8450b; }
.home-page .wy-points { gap: 14px 32px; }
.home-page .wy-pt { border-radius: 0; padding: 8px 0; border: 0; border-top: 1px solid #ffffff2b; background: none; }
.home-page .home-range-copy { color: #adb2bd; }
.home-page .home-range-copy strong { color: #f8f5f0; }
.home-page .why .btn-p { color: #101118; background: #ff641a; }
/* Closing cards share the same studio signature, in their page's material. */
body :is(.cta-band,.logo-cta) {
  border-radius: 20px 20px 6px 6px; padding: clamp(28px,5vw,64px); overflow: hidden;
  color: #fffaf4; background: linear-gradient(#10111845,#10111880),var(--discipline-field);
  border: 1px solid #ffffff35; box-shadow: inset 0 1px #ffffff18;
}
body :is(.cta-band,.logo-cta)::before { display: none; }
body :is(.cta-band,.logo-cta) h2 { font: 700 clamp(32px,4vw,54px)/1.05 var(--studio-type); letter-spacing: -.05em; }
body :is(.cta-band,.logo-cta) p { color: #f3f0ec; max-width: 570px; }
body :is(.cta-band,.logo-cta) .button { border-radius: 5px 16px 5px 5px; background: #f8f5f0; color: #101118; }
body.logo-gallery-page .logo-cta { color: #282116; background: var(--discipline-logo-field); border-color: #28211630; }
body.logo-gallery-page .logo-cta p { color: #44351b; }
body.logo-gallery-page .logo-cta .button { background: #282116; color: #fff8e6; }
body :is(.site-footer,footer) {
  padding: 36px clamp(24px,5vw,76px); background: #101118;
  color: #f8f5f0; border-top: 1px solid #ffffff1f;
}
body :is(.site-footer,footer) .brand-signature { width: 148px; }
/* Override legacy mobile .brand span hiding without revealing old captions. */
body .site-footer .brand-signature { display: block; }
body :is(.footer-links,.f-links) a { font: 500 11px/1.6 var(--studio-body); color: #b6bac4; }
body :is(.footer-links,.f-links) a:hover { color: #fff; }
body :is(.footer-copy,.f-copy,.brand-footer-tag) { color: #9299a7; font: 400 10px/1.6 var(--studio-body); }
/* Content stays visible when scripts are unavailable or an observer fails. */
body .reveal { opacity: 1; transform: none; }
.home-page .rev { opacity: 1; transform: none; }
.home-page .cursor-dot { background: #ff7632; }
.home-page .cursor-ring::before { border-color: #ff76328c; }
.home-page .cursor-ring-outer::before { border-color: #ff763247; }
.home-page .studio-services { background: #f8f5f0; color: #171920; padding: 110px clamp(24px,5.5vw,88px); }
.studio-services-inner { max-width: 1200px; margin: auto; }
.studio-services-head { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 90px; margin-bottom: 48px; }
.studio-service-kicker { color: #5c5e66; font: 600 10px/1.5 var(--studio-body); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 24px; }
.studio-services h2 { font: 700 clamp(38px,4.8vw,66px)/1.03 var(--studio-type); letter-spacing: -.05em; }
.studio-services-head > p { font: 400 14px/1.8 var(--studio-body); color: #62646c; max-width: 360px; padding-bottom: 4px; }
.studio-service-list { border-top: 1px solid #17192038; }
.studio-service-row { display: grid; grid-template-columns: 45px 1fr minmax(200px,.9fr) 48px; gap: 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid #17192026; color: inherit; text-decoration: none; transition: background .2s; }
.studio-service-row > .studio-service-index { font: 500 11px var(--studio-body); color: #666b75; align-self: start; margin-top: 8px; }
.studio-service-row h3 { font: 600 clamp(22px,2.3vw,31px)/1.2 var(--studio-type); letter-spacing: -.04em; }
.studio-service-row div > span { display: block; margin-top: 10px; font: 400 10px/1.7 var(--studio-body); color: #60656e; }
.studio-service-row > p { max-width: 350px; font: 400 12px/1.8 var(--studio-body); color: #62646c; }
.studio-service-arrow { display: grid; place-items: center; border: 1px solid #17192038; border-radius: 50%; width: 44px; height: 44px; font: 400 23px var(--studio-body); transition: color .2s,background .2s,border-color .2s; }
.studio-service-row:hover .studio-service-arrow { color: #f8f5f0; background: #0755d6; border-color: #0755d6; }
.studio-service-row[data-discipline="campaigns"]:hover .studio-service-arrow { background: #d8450b; border-color: #d8450b; }
.studio-service-row[data-discipline="tools"]:hover .studio-service-arrow { color: #062c22; background: #00c67a; border-color: #00c67a; }
.studio-service-row[data-discipline="logos"]:hover .studio-service-arrow { color: #282116; background: var(--studio-yellow); border-color: #d49b14; }
@media (max-width:1100px) and (min-width:981px) {
  body :is(#nav,.site-nav).studio-navigation { grid-template-columns: 150px 1fr auto; gap: 16px; padding-inline: 24px; }
  .studio-navigation :is(.n-links,.site-links) { gap: 18px; }
  .studio-navigation :is(.n-links,.site-links) a { font-size: 11px; }
}
@media (max-width:980px) {
  :root { --site-header-offset: 88px; }
  body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 7px; padding: 18px; }
  body :is(#nav,.site-nav).studio-navigation { grid-template-columns: 1fr auto auto; gap: 14px; padding: 12px 24px; }
  body :is(#nav,.site-nav).studio-navigation .brand-signature { width: 126px; }
  .studio-brand-caption { display: none !important; }
  body .studio-navigation :is(.n-menu-toggle,.menu-toggle) {
    display: flex; grid-column: 3; grid-row: 1; order: 3; flex-direction: column; justify-content: center; align-items: center;
    width: 40px; height: 40px; gap: 0; border-radius: 5px; border: 1px solid #ffffff35; background: none; color: #f8f5f0;
  }
  .studio-navigation :is(.n-links,.site-links) {
    position: absolute; top: calc(100% - 1px); left: 16px; right: 16px; width: auto; grid-column: 1 / -1; grid-row: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 18px;
    background: #14161e; border: 1px solid #ffffff20; border-radius: 0 0 14px 14px;
    box-shadow: 0 24px 30px #0004; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s,transform .2s,visibility .2s; max-height: calc(100svh - 105px); overflow-y: auto;
  }
  .studio-navigation :is(.n-links.is-open,.site-links.open) { opacity: 1; visibility: visible; transform: none; }
  .studio-navigation :is(.n-links,.site-links) li { width: 100%; }
  .studio-navigation :is(.n-links,.site-links) a { font: 500 17px/1.4 var(--studio-body); padding: 15px 0; border-radius: 0; border-bottom: 1px solid #ffffff12; }
  .studio-navigation :is(.n-links,.site-links) a::after { display: none; }
  .studio-navigation :is(.n-links,.site-links) a[aria-current="page"] { color: var(--nav-accent); background: none; }
  body .studio-navigation :is(.n-cta,.nav-cta) { display: flex; grid-column: 2; padding: 9px 12px; gap: 12px; min-height: 40px; font-size: 10px; }
}
@media (max-width:680px) {
  body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
  body :is(#nav,.site-nav).studio-navigation { padding-inline: 18px; gap: 10px; }
  body :is(#nav,.site-nav).studio-navigation .brand-signature { width: 112px; }
  body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher { width: calc(100% - 32px); border-radius: 10px; }
  body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a { padding: 18px 9px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 7px; min-height: 94px; }
  body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher b { font-size: 13px; line-height: 1.15; }
  body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a span { font-size: 8px; line-height: 1.4; letter-spacing: 0; }
  body :is(.site-footer,footer) { gap: 24px; }
  .home-page .studio-services { padding: 78px 22px; }
  .studio-services-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .studio-services-head > p { max-width: 100%; font-size: 13px; }
  .studio-service-row { grid-template-columns: 26px 1fr 36px; gap: 12px; padding: 24px 0; }
  .studio-service-row h3 { font-size: 22px; }
  .studio-service-row > p { grid-column: 2; grid-row: 2; font-size: 11px; }
  .studio-service-row > .studio-service-arrow { grid-column: 3; grid-row: 1; width: 34px; height: 34px; font-size: 20px; }
  .studio-service-row div > span { font-size: 9px; }
}
/* Category names carry the navigation without a second descriptive label. */
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a {
  min-height: 70px; justify-content: center;
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .studio-navigation *, .work-switcher a::before { transition: none !important; }
}
@media (max-width:360px) {
  body :is(#nav,.site-nav).studio-navigation .brand-signature { width: 92px; }
  body .studio-navigation :is(.n-cta,.nav-cta) { padding-inline: 9px; gap: 8px; font-size: 9px; }
}

/* Service accents belong to key words and actions, with calm section surfaces. */
.campaigns-page .section-accent { color: #c4470a; }
.campaigns-page .dark .section-accent,
.campaigns-page .cta-band .section-accent { color: var(--discipline-orange); }
.campaigns-page .section.tint { background: #f8f5f0; padding-bottom: 36px; }
.campaigns-page #static-campaigns { padding-top: 56px; }
.campaigns-page .campaign-lead { margin-bottom: 0; }
.campaigns-page .campaign-path { border-radius: 12px; }
.campaigns-page .campaign-path:first-child { background: #fff4eb; color: #191c23; border-color: #c4470a40; }
.campaigns-page .campaign-path:first-child b { color: #c4470a; }
.campaigns-page .campaign-path:last-child { background: #171920; color: #fffaf4; }
.campaigns-page .campaign-path:last-child b { color: var(--discipline-orange); }
.campaigns-page .hero-rotator-caption b { margin-top: 0; }
body.campaigns-page .cta-band { background: #171920; border-color: #ffffff26; box-shadow: none; }
body.campaigns-page .cta-band .button { background: var(--discipline-orange); color: #171920; }
body.logo-gallery-page .logo-cta { background: #101118; color: #fffaf4; border: 0; border-radius: 0; box-shadow: none; }
body.logo-gallery-page .logo-cta p { color: #c5c7cf; }
body.logo-gallery-page .logo-cta .section-accent { color: var(--discipline-yellow); }
body.logo-gallery-page .logo-cta .button { background: var(--discipline-yellow); color: #282116; }