/* Visual craft refinement. The light palette and native content remain the baseline. */
:root { --atelier-ease: cubic-bezier(.2,.75,.2,1); }
::selection { background: #dfca91; color: #171816; }
.agency-site .site-header { padding-block: 1.35rem; min-height: 116px; }
.agency-site .site-header .wordmark { width: 11.8rem; }
.agency-site .site-header nav { display: flex; justify-content: center; }
.agency-site .site-header .nav-list { width: fit-content; max-width: 100%; padding: .3rem; gap: .1rem; border: 1px solid #dfdfd5; border-radius: 999px; background: #f0efe7; }
.agency-site .nav-list a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: .55rem 1rem; border-radius: 999px; color: #5c6055; font-size: .76rem; text-decoration: none; }
.agency-site .nav-list a:hover { color: #171816; background: #e6e5db; }
.agency-site .nav-list a[aria-current=page] { background: #fffefa; box-shadow: 0 1px 4px #252a1910; color: #171816; }
.agency-site .button:not(:disabled) { box-shadow: 0 2px 0 #05060508, inset 0 1px 0 #ffffff12; }
.agency-site .header-cta span { color: #dbc58e; }
.agency-site .button:hover { text-decoration: none; }
.agency-hero { padding-top: clamp(2rem, 4vw, 4.4rem); padding-bottom: 3.5rem; }
.agency-hero h1 { font-weight: 500; letter-spacing: -.07em; }
.agency-hero h1 span { color: #76796f; }
.agency-hero .eyebrow { display: flex; align-items: center; gap: .75rem; }
.agency-hero .eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #a28a49; box-shadow: 0 0 0 4px #b39c5d13; flex-shrink: 0; }
.agency-hero .agency-lead { max-width: 490px; font-size: 1rem; }
.scene-frame { border: 1px solid #dfdfd2; border-radius: 1rem; background: #f1f0e8; padding: .8rem .7rem 0; }
.scene-header { color: #606455; padding-inline: .6rem; gap: .5rem; }
.scene-stage { border-radius: .6rem; overflow: hidden; background: var(--paper); }
.scene-stage > img, .scene-stage > canvas { transition: none; }
.scene-stage::before { inset: 12%; }
.scene-footer { margin-inline: .6rem; border-bottom: 0; font-size: .61rem; }
.motion-toggle { font-size: .61rem; }
.agency-tools { padding-block: 1.5rem; }
.agency-heading h2, .agency-principle h2, .agency-contact h2 { font-weight: 500; letter-spacing: -.055em; }
.agency-heading .eyebrow { color: #777148; }

/* Service illustrations are whole PNGs; diagrams below are actual HTML/CSS. */
.agency-services { gap: 1.15rem; }
.ai-service-card { border-radius: 1rem; padding: clamp(1.5rem, 2.5vw, 2.5rem); overflow: hidden; background: #f1f0e7; }
.ai-service-card.featured { background: #242922; }
.ai-service-card h3 { font-size: clamp(1.8rem, 2.7vw, 2.7rem); font-weight: 500; letter-spacing: -.045em; margin-bottom: .9rem; }
.ai-service-card > p { max-width: 460px; font-size: .88rem; min-height: 5.3em; }
.service-card-top { margin-bottom: 2.3rem; }
.service-card-top .agency-icon { width: 32px; height: 32px; }
.service-card-index { letter-spacing: .08em; }
.service-card-bottom { flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.5rem; }
.service-card-bottom > span { font-size: .65rem; }
.service-card-bottom a { display: inline-flex; gap: .6rem; min-width: 44px; min-height: 44px; padding: .5rem .7rem .5rem 0; border: 0; border-radius: 0; }
.service-card-bottom a .explore-label { font: 500 .76rem Manrope,Arial,sans-serif; }
.service-card-bottom a > span[aria-hidden] { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #c5c8b9; border-radius: 50%; font-size: 1rem; }
.service-card-bottom a:hover { background: transparent; transform: none; text-decoration: underline; }
.featured .service-card-bottom a:hover { background: transparent; }
.featured .service-card-bottom a > span[aria-hidden] { border-color: #657059; }
.capability-visual { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 220px; min-width: 0; margin: 1rem -.5rem 0; border-radius: .6rem; }
.visual-coordinate { position: relative; z-index: 1; font: .55rem/1.7 'Courier New',monospace; letter-spacing: .08em; color: #6a6f5b; }
.capability-visual img { display: block; width: 100%; height: 220px; object-fit: contain; }
.visual-intelligence { background: #ebe9dc; padding: .8rem; }
.visual-support { background: #e8e7dc; padding: .8rem; }
.mini-flow { display: flex; align-items: center; justify-content: center; gap: .55rem; padding-block: 2.5rem 1.5rem; }
.mini-flow > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1.2rem; min-height: 100px; padding: .8rem; border: 1px solid #d1d1c2; background: #fffef7; border-radius: .6rem; box-shadow: 0 6px 12px #41482a08; }
.mini-flow > div:nth-of-type(2) { background: #292f25; border-color: #292f25; color: #f4f1e4; }
.mini-flow i { width: 25px; height: 25px; border: 1px solid #b6bba8; display: grid; place-items: center; border-radius: .3rem; font: .6rem 'Courier New',monospace; font-style: normal; }
.mini-flow span { font-size: .68rem; line-height: 1.5; }
.mini-flow b { color: #8e7947; font-weight: 400; }
.flow-baseline { font-size: .6rem; text-align: center; color: #6a6f5b; }
.report-composition { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: 1rem; }
.source-stack { width: 36%; max-width: 125px; display: flex; flex-direction: column; gap: .4rem; }
.source-stack > span, .report-sheet > span:first-child { font: .62rem/1.6 'Courier New',monospace; }
.source-stack > i { height: 28px; display: block; border-radius: .25rem; border: 1px solid #cecfbc; background: repeating-linear-gradient(0deg,#e8e8dc 0 2px,#faf9f1 2px 6px); }
.report-composition > b { font-weight: 400; color: #8e7947; }
.report-sheet { width: 48%; max-width: 190px; padding: 1rem; background: #fffefa; border: 1px solid #d1d0c1; border-radius: .4rem; transform: rotate(-4deg); box-shadow: 4px 10px 20px #4b4e2f0c; }
.report-lines { display: grid; gap: 4px; margin-block: .8rem; }
.report-lines i { display: block; height: 3px; background: #dedfd2; border-radius: 2px; }
.report-lines i:last-child { width: 65%; }
.report-bars { display: flex; align-items: end; gap: .5rem; height: 45px; border-bottom: 1px solid #cfcebc; }
.report-bars i { width: 16%; height: 45%; background: #b9c0a7; border-radius: 2px 2px 0 0; }
.report-bars i:nth-child(2) { height: 70%; }
.report-bars i:nth-child(3) { height: 58%; }
.report-bars i:nth-child(4) { height: 95%; background: #aa904f; }
.report-bars i:nth-child(5) { height: 78%; }
.review-seal { display: block; font-size: .55rem; color: #6c744f; margin-top: .7rem; }
.connection-map { position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.5rem 2rem; align-items: center; padding: 2rem 1rem; }
.connection-map::before { content: ''; position: absolute; inset: 30% 15%; border: 1px solid #b8bda5; border-radius: 50%; }
.connection-map > span, .connection-map > strong { position: relative; z-index: 1; background: #faf9f1; border: 1px solid #cdd1bd; padding: .8rem; text-align: center; font-size: .7rem; border-radius: .4rem; }
.connection-map > span:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.connection-map strong { grid-column: 2; grid-row: 1 / 3; background: #30372b; color: #f1eddc; font-weight: 400; padding: 1rem .5rem; box-shadow: 0 8px 20px #29301b1a; }
.connection-map > span:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.connection-map > span:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.connection-map svg { display: block; width: 50px; height: 50px; margin: 0 auto .7rem; fill: none; stroke: #c6ac65; stroke-width: 1.2; }
.agency-main > .agency-section .ai-service-card:last-child .capability-visual { min-height: 210px; }

/* The catalogue has its own spacious, asymmetric composition. */
.atelier-services .agency-catalogue-intro { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-top: 3.2rem; gap: 2rem; }
.atelier-services .agency-catalogue-intro h1 { font-size: clamp(3.5rem,6.15vw,6.2rem); max-width: 720px; }
.orbital-frame .scene-stage { aspect-ratio: 1.07; }
.orbital-frame .scene-stage::before { inset: 9%; border-style: dashed; }
.atelier-services .service-index { position: sticky; top: .6rem; z-index: 5; justify-content: space-between; gap: .3rem; padding: .45rem; margin-top: 1rem; border: 1px solid #d6d8c8; border-radius: .7rem; background: #f7f6f1f5; box-shadow: 0 8px 24px #343b1810; backdrop-filter: blur(16px); }
.atelier-services .service-index a { gap: .6rem; flex: 1 1 auto; justify-content: center; border-radius: .4rem; padding: .55rem .7rem; font-size: .73rem; text-decoration: none; }
.atelier-services .service-index a:hover { background: #ebece0; }
.atelier-services .service-index a[aria-current=location] { background: #2b3227; color: #f9f6e9; }
.index-number { font: .6rem 'Courier New',monospace; opacity: .7; }
.atelier-services .agency-services { grid-template-columns: repeat(12,minmax(0,1fr)); }
.atelier-services .ai-service-card { grid-column: span 5; padding: 2.1rem; scroll-margin-top: 7rem; }
.atelier-services .ai-service-card:nth-child(1), .atelier-services .ai-service-card:nth-child(4) { grid-column: span 7; }
.atelier-services .ai-service-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
.atelier-services .ai-service-card:last-child .service-card-top { grid-column: 1; }
.atelier-services .ai-service-card:last-child h3, .atelier-services .ai-service-card:last-child > p { grid-column: 1; }
.atelier-services .ai-service-card:last-child .capability-visual { grid-column: 2; grid-row: 1 / 5; margin-block: 0; }
.atelier-services .ai-service-card:last-child .service-card-bottom { grid-column: 1; }
.atelier-services .capability-visual { min-height: 275px; }
.atelier-services .capability-visual img { height: 260px; }
.atelier-services .visual-workflow { background-image: radial-gradient(#a9af932e 1px,transparent 1px); background-size: 16px 16px; padding: 1rem; }
.atelier-services .mini-flow { flex-direction: column; padding-block: 1rem; gap: .3rem; }
.atelier-services .mini-flow > div { flex-direction: row; align-items: center; width: 100%; min-height: 56px; gap: 1rem; padding: .7rem 1rem; }
.atelier-services .mini-flow b { transform: rotate(90deg); font-size: .9rem; }
.atelier-services .report-composition { padding-top: 2rem; }
.atelier-services .report-sheet { max-width: 250px; padding: 1.5rem; }
.atelier-services .report-bars { height: 65px; }
.atelier-services .visual-integrations { align-self: center; }
.system-bridge { border-block: 1px solid #d8dacb; }
.system-bridge > div { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem 3rem; align-items: end; }
.system-bridge .eyebrow { grid-column: 1 / -1; }
.system-bridge h2 { margin: 0; font-size: clamp(2.4rem,4.5vw,4.5rem); line-height: 1.12; font-weight: 500; letter-spacing: -.055em; }
.system-bridge h2 span { color: #76796f; }
.system-bridge > div > p:last-child { color: var(--muted); font-size: .9rem; max-width: 430px; margin-bottom: 0; }
.bridge-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; gap: 2rem; margin: 3rem 0 0; }
.bridge-stages li { padding-top: 1.5rem; border-top: 1px solid #b4b997; position: relative; }
.bridge-stages li::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border: 1px solid #9b8650; background: var(--paper); border-radius: 50%; }
.bridge-stages li > span { font: .65rem 'Courier New',monospace; color: #777148; }
.bridge-stages h3 { margin: 1.1rem 0 .7rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -.035em; }
.bridge-stages p { color: var(--muted); font-size: .85rem; margin: 0; max-width: 320px; }
.agency-faq details { padding-inline: 1rem; border-radius: .3rem; }
.agency-faq details[open] { background: #eeeee4; padding-bottom: .5rem; }
.agency-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.agency-faq summary::-webkit-details-marker { display: none; }
.agency-faq summary::after { content: ''; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #c6cab7; border-radius: 50%; background-image: linear-gradient(#626953,#626953),linear-gradient(#626953,#626953); background-size: 10px 1px,1px 10px; background-position: center; background-repeat: no-repeat; }
.agency-faq details[open] > summary::after { background-size: 10px 1px,0 0; }
.studio-signoff { padding-block: clamp(3rem,7vw,7rem); border-top: 1px solid #cdd1bd; }
.signoff-top { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.signoff-top .eyebrow { color: #626953; font-size: .63rem; }
.signoff-top > span { font-size: 3rem; line-height: 1; color: #9c8a4f; }
.studio-signoff h2 { font-size: clamp(4rem,11vw,11rem); line-height: .98; letter-spacing: -.075em; font-weight: 500; margin: 2rem 0 2.5rem; }
.studio-signoff h2 span { color: #848773; }
.signoff-bottom { display: flex; justify-content: space-between; gap: 1rem 3rem; align-items: center; }
.signoff-bottom p { font-size: .9rem; color: var(--muted); max-width: 340px; }
.signoff-bottom .button { font-size: .82rem; }
.agency-site .site-footer { padding-block: 2rem; border-top-color: #d9ddcd; }

@media (prefers-reduced-motion: no-preference) {
  .agency-site .nav-list a, .agency-site .button, .service-index a { transition: background .25s ease,color .25s ease,box-shadow .25s ease; }
  .agency-site .button:not(:disabled):hover { box-shadow: 0 5px 15px #28311e20; }
  .ai-service-card .capability-visual img { transition: transform .7s var(--atelier-ease); }
  .ai-service-card:hover .capability-visual img { transform: translateY(-5px); }
  .ai-service-card .agency-icon { transition: transform .5s var(--atelier-ease); }
  .ai-service-card:hover .agency-icon { transform: rotate(-8deg); }
  .ai-service-card:focus-within { border-color: #928452; }
  .agency-faq summary::after { transition: transform .25s ease; }
  .agency-faq details[open] summary::after { transform: rotate(180deg); }
}
@media (max-width: 70em) {
  .agency-site .site-header { gap: 1rem; }
  .agency-site .site-header .wordmark { width: 10.3rem; }
  .agency-site .nav-list a { padding-inline: .8rem; }
  .atelier-services .ai-service-card { padding: 1.6rem; }
  .atelier-services .service-index a { padding-inline: .4rem; gap: .4rem; font-size: .67rem; }
}
@media (max-width: 56em) {
  .agency-site .site-header .header-cta { display: none; }
  .agency-site .site-header nav { flex-basis: 380px; }
  .agency-hero .agency-lead { max-width: 590px; }
  .atelier-services .agency-catalogue-intro { grid-template-columns: minmax(0,1fr); padding-top: 2rem; }
  .atelier-services .agency-catalogue-intro h1 { font-size: clamp(3.5rem,8vw,5.5rem); }
  .scene-frame { max-width: 620px; }
  .orbital-frame .scene-stage { aspect-ratio: 1.25; }
  .atelier-services .service-index { position: static; flex-wrap: wrap; justify-content: start; }
  .atelier-services .service-index a { flex: 0 1 auto; padding-inline: .7rem; font-size: .72rem; }
  .atelier-services .agency-services { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .atelier-services .ai-service-card, .atelier-services .ai-service-card:nth-child(1), .atelier-services .ai-service-card:nth-child(4) { grid-column: span 1; }
  .atelier-services .ai-service-card:last-child { grid-column: 1 / -1; }
  .atelier-services .ai-service-card:last-child .capability-visual { align-self: center; }
  .atelier-services .connection-map { gap: 1.5rem 1rem; padding-inline: 0; }
  .system-bridge > div { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .system-bridge > div > p:last-child { max-width: 600px; }
  .ai-service-card h3 { font-size: 1.8rem; }
  .mini-flow { gap: .3rem; }
  .mini-flow > div { padding-inline: .5rem; }
}
@media (max-width: 42em) {
  .agency-site .site-header { min-height: 124px; padding-block: 1.2rem .5rem; gap: 1rem; }
  .agency-site .site-header .wordmark { width: 10.6rem; }
  .agency-site .site-header nav { justify-content: start; flex-basis: 100%; }
  .agency-site .site-header .nav-list { width: 100%; justify-content: space-between; gap: 0; padding: .2rem; border-radius: .55rem; }
  .agency-site .nav-list a { min-height: 44px; font-size: .75rem; padding: .5rem .45rem; border-radius: .35rem; }
  .agency-hero { padding-top: 2rem; padding-bottom: 2rem; }
  .agency-hero h1 { font-size: clamp(3rem,10.5vw,4.3rem); }
  .agency-hero .agency-lead { font-size: .94rem; }
  .agency-hero .eyebrow { font-size: .59rem; gap: .6rem; }
  .scene-frame { margin-top: .7rem; padding: .4rem .4rem 0; }
  .scene-header { font-size: .52rem; padding-inline: .2rem; }
  .scene-footer { font-size: .55rem; margin-inline: .3rem; }
  .atelier-services .agency-catalogue-intro { gap: 1rem; }
  .atelier-services .agency-catalogue-intro h1 { font-size: clamp(2.8rem,9.9vw,4rem); }
  .orbital-frame .scene-stage { aspect-ratio: 1.1; }
  .atelier-services .service-index { border-radius: .5rem; padding: .3rem; gap: .1rem; }
  .atelier-services .service-index a { padding: .5rem .4rem; font-size: .67rem; gap: .4rem; min-height: 44px; }
  .index-number { font-size: .57rem; }
  .agency-services, .atelier-services .agency-services { grid-template-columns: minmax(0,1fr); }
  .ai-service-card, .atelier-services .ai-service-card { padding: 1.5rem; }
  .atelier-services .ai-service-card:last-child { display: flex; grid-column: auto; }
  .ai-service-card > p { min-height: 0; }
  .service-card-top { margin-bottom: 1.6rem; }
  .capability-visual, .atelier-services .capability-visual { min-height: 215px; margin-top: .5rem; width: auto; }
  .atelier-services .capability-visual img { height: 220px; }
  .atelier-services .mini-flow { padding-block: .7rem; }
  .service-card-bottom { margin-top: 1.3rem; }
  .service-card-bottom > span { font-size: .62rem; }
  .service-card-bottom a .explore-label { font-size: .7rem; }
  .bridge-stages { grid-template-columns: minmax(0,1fr); gap: 1.8rem; margin-top: 2rem; }
  .bridge-stages p { max-width: 100%; }
  .system-bridge h2 { font-size: clamp(2.2rem,7.5vw,3rem); }
  .studio-signoff h2 { font-size: clamp(4rem,15vw,6.4rem); margin-block: 2rem; }
  .signoff-top .eyebrow { font-size: .56rem; max-width: 220px; }
  .signoff-bottom { align-items: start; flex-direction: column; gap: .7rem; }
  .signoff-bottom p { font-size: .85rem; }
  .agency-site .site-footer { padding-block: 1.5rem; }
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .capability-visual, .studio-signoff { display: none; }
  .atelier-services .service-index { position: static; }
  .atelier-services .agency-services { display: block; }
  .atelier-services .ai-service-card { break-inside: avoid; margin-bottom: 1rem; }
}