/* ========================================================================== 
   HAMMUWORKS — Design tokens and responsive components
   Change the tokens below to update every page. No CSS framework is required.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #090d17;
  --surface: #111827;
  --surface-2: #182235;
  --text: #f3f5f9;
  --muted: #a5afc0;
  --line: #2a3549;
  --accent: #d8fc79;
  --accent-text: #172309;
  --blue: #a7c6ff;
  --header: rgba(9,13,23,.72);
  --header-scrolled: rgba(9,13,23,.52);
  --radius: 16px;
  --max: 1360px;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #e5ebf4;
  --text: #121b2b;
  --muted: #536176;
  --line: #cbd3df;
  --accent: #385919;
  --accent-text: #ffffff;
  --blue: #2857a5;
  --header: rgba(244,246,250,.72);
  --header-scrolled: rgba(244,246,250,.56);
}
/* Base: readable text, predictable sizing, and visible keyboard focus. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; font: 17px/1.65 "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); position: relative; isolation: isolate; }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: .18; }
body::before { width: 44vw; height: 44vw; top: -18vw; right: -10vw; background: radial-gradient(circle, #6f8cff 0%, transparent 68%); }
body::after { width: 38vw; height: 38vw; bottom: 6vh; left: -18vw; background: radial-gradient(circle, #c9ff6a 0%, transparent 68%); opacity: .10; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
::selection { color: var(--accent-text); background: var(--accent); }
[hidden] { display: none !important; }
h1,h2,h3,h4,p,figure { margin-top: 0; }
h1,h2,h3 { line-height: 1.08; letter-spacing: -.055em; font-weight: 600; }
p { margin-bottom: 1.3em; }
.wrap { width: min(var(--max), 90%); margin-inline: auto; }
.section { padding-block: 104px; }
.border-top { border-top: 1px solid var(--line); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.kicker { font: 12px/1.6 Consolas, monospace; text-transform: uppercase; letter-spacing: .14em; }
.section-title { font-size: clamp(36px,4.5vw,64px); margin-bottom: 25px; }
.lead { font-size: clamp(19px,1.8vw,24px); line-height: 1.6; color: var(--muted); max-width: 720px; }
.reading { max-width: 740px; }
.text-link { display: inline-flex; gap: 20px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--line); }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--accent); color: var(--accent-text); }
.skip-link:focus { top: 10px; }
/* Shared navigation is ordinary HTML, so links work with JavaScript disabled. */
.header { position: sticky; top: 0; z-index: 30; background: var(--header); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 35px rgba(0,0,0,.08); transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease; }
/* Kuntal-inspired scrolled state: the page remains visible, while the content passing beneath the bar is optically softened. */
.header.is-scrolled { background: var(--header-scrolled); backdrop-filter: blur(30px) saturate(185%); -webkit-backdrop-filter: blur(30px) saturate(185%); border-bottom-color: color-mix(in srgb, var(--line) 46%, transparent); box-shadow: 0 10px 32px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.08); }
.header.is-scrolled::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 20%, transparent), transparent); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.brand { display: flex; gap: 10px; align-items: center; font-size: 22px; font-weight: 700; letter-spacing: -.07em; }
.brand-mark { display: inline-block; width: 31px; height: 31px; margin-right: 4px; color: transparent; background: url('../hammuworks-mark.svg') center / contain no-repeat; font-size: 0; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.nav a { padding: 12px 0; color: var(--muted); }
.nav a:hover,.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { box-shadow: 0 1px var(--accent); }
.header-actions { display: flex; gap: 12px; align-items: center; }
.icon-button { width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); font-size: 20px; }
.menu-toggle { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 52px; padding: 13px 24px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: transparent; font-size: 14px; font-weight: 600; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); background: var(--surface-2); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.button.small { min-height: 44px; padding: 9px 18px; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* Home: editorial typography and actual work carry the first screen. */
.hero { position: relative; padding: 66px 0 48px; }
.hero-topline { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 35px; }
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(62px,7.1vw,106px); line-height: .94; margin-bottom: 28px; letter-spacing: -.07em; text-wrap: balance; }
.hero h1 .outline { color: var(--text); }
.hero-intro { max-width: 540px; color: var(--muted); font-size: 18px; }
.hero-intro strong { color: var(--text); font-weight: 500; }
.hero-art { min-width: 0; position: relative; padding: 24px 0; }
.hero-editorial { min-height: 390px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 12px 24px; overflow: hidden; }
.editorial-rule { position: absolute; inset: 8% 0 8% 14%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: skewY(-8deg); opacity: .8; }
.editorial-number { position: relative; z-index: 1; grid-column: 1 / -1; font-size: clamp(150px, 18vw, 275px); line-height: .72; letter-spacing: -.1em; font-weight: 600; color: var(--text); }
.editorial-number span { color: var(--accent); font-size: .48em; vertical-align: top; letter-spacing: -.08em; }
.editorial-label { position: relative; z-index: 1; color: var(--muted); line-height: 1.45; }
.editorial-stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; color: var(--accent); font-size: 11px; letter-spacing: .18em; }
.editorial-stack span:nth-child(2) { color: var(--text); }
.editorial-stack span:nth-child(3) { color: var(--muted); }
.hero-editorial .annotation { position: relative; z-index: 1; grid-column: 1 / -1; margin: 22px 0 0; color: var(--muted); }
.hero-art .annotation { margin: 27px 0 0 18px; color: var(--muted); }
.hero-footer { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 30px; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 64px; }
.hero-footer strong { display: block; font-size: 25px; font-weight: 500; letter-spacing: -.04em; }
.hero-footer p { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 40px; }
.section-heading h2 { margin-bottom: 0; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 55px 28px; }
.project-card { min-width: 0; }
.project-image { position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; display: block; }
.project-image img { width: 100%; aspect-ratio: 1.65; object-fit: cover; transition: transform .5s ease; }
.project-image:hover img { transform: scale(1.025); }
.card-arrow { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: #d8fc79; color: #172309; font-size: 23px; }
.card-meta { display: flex; justify-content: space-between; gap: 15px; margin: 19px 0 9px; color: var(--muted); font-size: 12px; }
.project-card h3 { font-size: clamp(26px,2.4vw,34px); margin-bottom: 12px; }
.project-card p { color: var(--muted); max-width: 530px; font-size: 16px; margin-bottom: 10px; }
.project-card h3 a:hover { color: var(--accent); }
.pill { display: inline-block; border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px; font: 12px/1.6 Consolas,monospace; }
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; align-items: start; }
.principle { padding: 28px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 38px 1fr; gap: 15px; }
.principle h3 { font-size: 24px; margin: 0 0 12px; }
.principle p { color: var(--muted); margin: 0; font-size: 16px; }
.recognition { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 35px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.recognition strong { font-size: 24px; letter-spacing: -.03em; font-weight: 500; }
.recognition p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.testimonials { padding-block: 104px; }
.testimonial-shell { display: grid; grid-template-columns: .8fr 1.5fr; gap: 80px; align-items: end; }
.testimonial-intro .section-title { margin-bottom: 18px; }
.testimonial-intro p { color: var(--muted); max-width: 340px; }
.testimonial-controls { display: flex; gap: 8px; margin-top: 28px; }
.testimonial-control { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: transparent; }
.testimonial-control:hover { background: var(--surface-2); border-color: var(--accent); }
.testimonial-track { overflow: hidden; }
.testimonial-list { display: flex; gap: 18px; transition: transform .45s ease; }
.testimonial-card { flex: 0 0 min(100%, 650px); padding: 34px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.testimonial-quote { font-size: clamp(23px,2.3vw,34px); line-height: 1.25; letter-spacing: -.04em; margin-bottom: 32px; }
.testimonial-quote::before { content: "“"; color: var(--accent); font-family: Georgia, serif; font-size: 1.6em; line-height: 0; vertical-align: -.25em; margin-right: 5px; }
.testimonial-person { display: flex; justify-content: space-between; gap: 20px; align-items: end; padding-top: 18px; border-top: 1px solid var(--line); }
.testimonial-person strong { display: block; font-size: 16px; font-weight: 600; }
.testimonial-person span { color: var(--muted); font-size: 13px; }
.testimonial-source { color: var(--accent); font: 12px Consolas, monospace; text-transform: uppercase; letter-spacing: .12em; }
.cta { position: relative; padding-block: 90px; }
.cta h2 { font-size: clamp(46px,7vw,100px); max-width: 1050px; margin-bottom: 28px; }
.cta-bottom { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.cta-bottom p { color: var(--muted); max-width: 550px; margin-bottom: 0; }
.footer { border-top: 1px solid var(--line); padding: 32px 0; font-size: 13px; color: var(--muted); }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 25px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.footer-links a,.footer-links button { padding: 10px 0; }
.plain-button { background: none; color: inherit; border: 0; font: inherit; text-decoration: underline; text-underline-offset: 4px; }
/* Internal pages and case studies. */
.page-hero { padding: 75px 0 55px; }
.page-hero h1 { font-size: clamp(50px,6.5vw,92px); max-width: 1050px; margin: 22px 0 28px; }
.page-hero .lead { margin-bottom: 0; }
.breadcrumb { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.filter { color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 100px; min-height: 44px; padding: 8px 20px; font-size: 14px; }
.filter[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.filter-status { font-size: 14px; color: var(--muted); margin-bottom: 25px; }
.about-banner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 60px; }
.portrait { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 45px; min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; }
.portrait strong { font-size: 100px; letter-spacing: -.09em; line-height: 1; color: var(--blue); font-weight: 400; }
.timeline-row { display: grid; grid-template-columns: 180px 1fr; gap: 35px; padding: 32px 0; border-top: 1px solid var(--line); }
.timeline-row h3 { font-size: 28px; margin-bottom: 10px; }
.timeline-row p { margin: 10px 0 0; color: var(--muted); max-width: 660px; }
.skills { display: flex; flex-wrap: wrap; gap: 12px; }
.skills span { border: 1px solid var(--line); padding: 10px 15px; border-radius: 6px; font-size: 14px; }
.case-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; padding-block: 25px; border-block: 1px solid var(--line); margin-bottom: 40px; }
.case-summary dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.case-summary dd { margin: 0; font-size: 15px; }
.case-cover img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.case-cover figcaption,.case-figure figcaption { color: var(--muted); font-size: 13px; margin-top: 14px; }
.case-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 75px; padding-top: 75px; }
.case-nav { position: sticky; top: 120px; align-self: start; display: grid; gap: 7px; font-size: 14px; }
.case-nav a { color: var(--muted); padding: 9px 0; }
.case-nav a:hover { color: var(--accent); }
.case-body section { padding: 0 0 55px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.case-body h2 { font-size: clamp(32px,3.4vw,46px); margin: 15px 0 25px; }
.case-body p { color: var(--muted); max-width: 800px; }
.case-body h3 { font-size: 23px; margin: 30px 0 13px; }
.case-figure { margin: 35px 0 0; }
.case-figure img { border-radius: 10px; width: 100%; }
.outcome { background: var(--surface); border-left: 3px solid var(--accent); padding: 30px; margin: 25px 0; }
.outcome strong { font-size: 36px; line-height: 1.2; display: block; color: var(--accent); letter-spacing: -.04em; margin-bottom: 12px; }
.outcome p { margin-bottom: 0; }
.next-project { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 45px 0 80px; }
.next-project h2 { font-size: clamp(32px,4vw,55px); margin: 12px 0 0; }
/* Contact works with mailto now, or an optional public form endpoint later. */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 90px; padding: 15px 0 90px; }
.contact-info { padding-top: 20px; }
.contact-email { font-size: clamp(21px,2.4vw,32px); display: block; margin: 12px 0 25px; letter-spacing: -.04em; overflow-wrap: anywhere; }
.contact-methods { padding: 24px 0; border-top: 1px solid var(--line); }
.contact-methods h2 { font-size: 22px; margin-bottom: 15px; }
.form-panel { padding: 35px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.form-panel h2 { font-size: 30px; margin-bottom: 12px; }
.field { margin-top: 22px; }
.field label { display: block; margin-bottom: 8px; font-size: 14px; }
.field input,.field select,.field textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 13px; background: var(--bg); color: var(--text); }
.field textarea { min-height: 150px; resize: vertical; }
.field-note { font-size: 13px; color: var(--muted); margin-top: 7px; }
.form-status { font-size: 14px; margin-top: 18px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.faq details { padding: 22px 0; border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-size: 20px; }
.faq details p { margin: 18px 0 0; color: var(--muted); }
/* Optional analytics consent: equal choices; no tags load before acceptance. */
.consent { position: fixed; bottom: 20px; left: 5%; width: min(570px,90%); z-index: 60; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 15px 60px #0005; }
.consent h2 { font-size: 22px; margin-bottom: 12px; }
.consent p { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions button { flex: 1; }
.consent a { text-decoration: underline; }
/* Progressive enhancement: text remains visible if scripting fails. */
@keyframes arrive { from { opacity: .4; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reveal.is-visible { animation: arrive .65s ease both; }
@supports (view-transition-name: root) { @view-transition { navigation: auto; } }
/* Tablet and phone layouts. */
@media (max-width: 1050px) {
  .hero-grid { gap: 30px; }
  .hero h1 { font-size: clamp(60px,7.3vw,84px); }
  .split,.about-banner,.contact-grid { gap: 45px; }
  .case-layout { grid-template-columns: 160px minmax(0,1fr); gap: 35px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { width: 89%; }
  .header-inner { min-height: 75px; gap: 12px; flex-wrap: wrap; }
  .brand { font-size: 20px; }
  .header-actions { margin-left: auto; gap: 8px; }
  .header-actions > .button { display: none; }
  .menu-toggle { display: inline-block; }
  .nav { width: 100%; order: 3; gap: 10px; justify-content: space-between; padding-bottom: 15px; }
  .js .nav { display: none; }
  .js .nav.is-open { display: flex; }
  .hero { padding-top: 40px; }
  .hero-topline { margin-bottom: 30px; }
  .hero-topline > span:last-child { display: none; }
  .hero-grid,.split,.about-banner,.contact-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(52px,11.8vw,86px); }
  .hero-intro { font-size: 17px; }
  .hero-art { padding: 25px 10px 5px; margin-top: 15px; }
  .hero-editorial { min-height: 300px; }
  .editorial-number { font-size: clamp(128px, 34vw, 210px); }
  .hero-footer { margin-top: 40px; gap: 18px; grid-template-columns: 1fr 1fr; }
  .hero-footer > div:last-child { grid-column: 1 / -1; }
  .hero-footer strong { font-size: 24px; }
  .section { padding-block: 65px; }
  .section-heading { display: block; }
  .section-heading > a { margin-top: 25px; }
  .work-grid { grid-template-columns: 1fr; gap: 42px; }
  .recognition,.cta-bottom { align-items: start; flex-direction: column; }
  .testimonial-shell { grid-template-columns: 1fr; gap: 34px; }
  .testimonials { padding-block: 65px; }
  .testimonial-card { padding: 25px; }
  .recognition { padding: 25px; }
  .cta { padding-block: 65px; }
  .cta h2 { font-size: 50px; }
  .page-hero { padding: 45px 0 35px; }
  .page-hero h1 { font-size: clamp(46px,10.5vw,74px); }
  .case-summary { grid-template-columns: 1fr 1fr; }
  .case-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; }
  .case-nav { position: static; display: flex; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
  .case-nav .kicker { flex-basis: 100%; }
  .case-body section { margin-bottom: 25px; padding-bottom: 35px; }
  .timeline-row { grid-template-columns: 1fr; gap: 12px; }
  .portrait { min-height: 300px; }
  .contact-grid { gap: 35px; }
  .form-panel { padding: 25px; }
  .footer-row { align-items: start; flex-direction: column; }
  .consent { bottom: 12px; max-height: 85vh; overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*) { animation: none !important; }
}
@media print {
  .header,.footer,.consent,.case-nav,.button-row { display: none; }
  body { background: white; color: black; }
  .wrap { width: 100%; }
  .case-layout { display: block; }
  .muted,.lead,.case-body p { color: #333; }
}
/* Preserve the complete artwork rather than cropping embedded portfolio labels. */
.project-image img { aspect-ratio: 16 / 9; object-fit: contain; }
/* Editorial refinement: strong hierarchy with comfortable spacing at every size. */
:root { --bg: #101010; --surface: #1b1b1b; --surface-2: #252525; --text: #ffffff; --muted: #bcbcbc; --line: #393939; --header: #101010cc; --header-scrolled: #101010a8; }
[data-theme="light"] { --bg: #fafafa; --surface: #ffffff; --surface-2: #ededed; --text: #111111; --muted: #555555; --line: #cccccc; --header: #fafafacc; --header-scrolled: #fafafaa8; }
.brand { letter-spacing: -.04em; gap: 12px; }
.brand-mark { width: 48px; height: 36px; flex: 0 0 48px; background: var(--text); mask: url('../hammuworks-mark.svg') center/contain no-repeat; -webkit-mask: url('../hammuworks-mark.svg') center/contain no-repeat; }
.brand-copy { line-height: 1.2; }
.brand-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: .08em; }
.theme-switch { position: relative; display: flex; justify-content: space-between; align-items: center; width: 76px; height: 44px; padding: 0 10px; border-radius: 30px; border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }
.theme-switch::after { content: ''; position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--text); transition: transform .25s ease; }
[data-theme="light"] .theme-switch::after { transform: translateX(32px); }
.hero { padding-top: clamp(45px,6vw,90px); }
.hero h1 { font-size: clamp(44px,7.8vw,112px); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; text-transform: uppercase; margin: 0 0 64px; }
.hero h1 span { display: block; }
.hero h1 .outline { color: var(--text); }
.hero-intro-row { display: grid; grid-template-columns: minmax(0,720px); gap: 40px; }
.hero-intro-row h2 { font-size: 20px; text-transform: uppercase; font-weight: 400; letter-spacing: 0; line-height: 1.6; }
.hero-intro { font-size: 19px; line-height: 1.65; max-width: 720px; }
.hero-footer { margin-top: 65px; }
.project-image { border-radius: 22px; border: 0; }
.project-image img { aspect-ratio: 4/3; object-fit: contain; background: #171717; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.project-image:hover img,.project-image:focus-visible img { transform: scale(1.04); }
.card-arrow { inset: 50% auto auto 50%; transform: translate(-50%,-40%); display: flex; gap: 20px; width: max-content; height: auto; padding: 12px 24px; background: #ffffffdf; color: #111; font-size: 16px; border-radius: 40px; opacity: 0; backdrop-filter: blur(16px); transition: opacity .25s,transform .25s; }
.project-image:hover .card-arrow,.project-image:focus-visible .card-arrow { opacity: 1; transform: translate(-50%,-50%); }
.project-card h3 { letter-spacing: -.025em; line-height: 1.25; }
.testimonial-shell { align-items: start; gap: 50px; }
.testimonial-track { min-width: 0; border-radius: 22px; }
.testimonial-list { gap: 0; }
.testimonial-list { display: block; }
.testimonial-card:not([hidden]) { animation: quote-in .4s ease both; }
.testimonial-quote { margin-inline: 0; }
.testimonial-controls { align-items: center; }
[data-testimonial-count] { color: var(--muted); margin-left: 12px; font-size: 14px; }
@keyframes quote-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.testimonial-card { flex-basis: 100%; min-width: 0; border-radius: 22px; padding: clamp(25px,4vw,55px); }
.testimonial-quote { line-height: 1.45; letter-spacing: -.02em; font-size: clamp(22px,2.3vw,32px); }
.testimonial-person { flex-wrap: wrap; }
.cta h2 { text-transform: uppercase; font-size: clamp(44px,7.4vw,104px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 35px; }
.cta p { max-width: 640px; color: var(--muted); font-size: 18px; }
.email-pill { display: inline-flex; align-items: center; gap: 30px; padding: 17px 28px; border-radius: 50px; background: var(--surface-2); font-size: clamp(17px,2vw,24px); overflow-wrap: anywhere; }
.email-pill:hover { text-decoration: underline; text-underline-offset: 5px; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 5px; }
.nav a { min-height: 44px; }
@media (hover:none) { .card-arrow { opacity: 1; transform: translate(-50%,-50%); } }
@media (max-width:760px) {
 .header-inner { gap: 12px; }
 .brand { font-size: 19px; gap: 7px; }
 .brand-mark { width: 36px; flex-basis: 36px; }
 .theme-switch { width: 64px; }
 [data-theme="light"] .theme-switch::after { transform: translateX(20px); }
 .hero h1 { font-size: clamp(35px,8.3vw,62px); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 40px; }
 .hero-intro-row { grid-template-columns: 1fr; gap: 10px; }
 .hero-intro-row h2 { margin-bottom: 0; }
 .hero-intro { font-size: 17px; }
 .email-pill { gap: 15px; padding: 15px 20px; }
}
@media (prefers-reduced-motion:reduce) { .project-image:hover img,.project-image:focus-visible img { transform: none; } }
@media (forced-colors:active) { .brand-mark { background: CanvasText; } .theme-switch::after { background: ButtonText; } .card-arrow { border: 1px solid ButtonText; } }
/* Shared polish: warmer atmosphere, restrained glass, and a compact header. */
.header-inner > .nav { margin-left: auto; }
.header-inner { gap: 36px; }
.brand-mark { width: 50px; height: 34px; flex-basis: 50px; }
.theme-switch { width: 62px; height: 44px; border: 0; background: transparent; padding-inline: 9px; font-size: 13px; }
.theme-switch::before { content: ''; position: absolute; inset: 7px 0; border: 1px solid var(--line); background: var(--surface-2); border-radius: 30px; z-index: -1; }
.theme-switch { isolation: isolate; }
.theme-switch::after { top: 11px; left: 4px; width: 22px; height: 22px; }
[data-theme="light"] .theme-switch::after { transform: translateX(32px); }
body { background-image: radial-gradient(ellipse at 85% 35%,rgba(142,77,99,.065),transparent 45%); background-attachment: fixed; }
body::before { background: radial-gradient(circle,#6685a4 0%,transparent 68%); }
body::after { background: radial-gradient(ellipse at 35% 30%,#b6835e 0%,#8d657e 30%,transparent 70%); opacity: .14; }
.case-summary { border-radius: 18px; padding: 25px; background: color-mix(in srgb,var(--surface) 60%,transparent); border: 1px solid var(--line); backdrop-filter: blur(14px); }
.case-cover { margin: 40px 0 0; }
.case-cover img { border: 0; }
.cinematic-cover img { border-radius: 0; mask-image: linear-gradient(to bottom,transparent,#000 8%,#000 82%,transparent); }
.case-figure { padding: clamp(12px,2vw,26px); border-radius: 24px; background: radial-gradient(ellipse at top right,rgba(120,83,125,.2),transparent 65%),radial-gradient(ellipse at bottom left,rgba(48,122,133,.16),transparent 70%),color-mix(in srgb,var(--surface) 70%,transparent); border: 1px solid var(--line); }
.case-figure img { border-radius: 14px; box-shadow: 0 18px 48px #0002; }
.full-process { padding-top: 80px; margin-top: 30px; border-top: 1px solid var(--line); }
.full-process > h2 { font-size: clamp(34px,4vw,58px); }
.full-process > p { max-width: 680px; color: var(--muted); }
.process-step { margin: 65px 0 90px; scroll-margin-top: 120px; }
.process-step > header { display: flex; align-items: baseline; gap: 24px; margin-bottom: 22px; }
.process-step > header .kicker { color: var(--muted); }
.process-step h3 { font-size: clamp(23px,2.5vw,34px); margin: 0; letter-spacing: -.025em; }
.process-figure { margin: 0; padding: clamp(10px,2vw,28px); border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 15% 10%,rgba(131,84,102,.15),transparent 65%),color-mix(in srgb,var(--surface) 65%,transparent); }
.process-figure img { width: 100%; height: auto; border-radius: 12px; }
.process-figure figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.process-transcript { margin-top: 12px; font-size: 16px; }
.process-transcript summary { min-height: 44px; cursor: pointer; color: var(--muted); padding-block: 10px; }
.process-transcript > div { max-width: 850px; border-left: 2px solid var(--line); padding-left: 24px; overflow-wrap: anywhere; }
.process-transcript p { margin-bottom: .5em; }
.cta { padding-block: clamp(65px,8vw,120px); }
.cta h2 { font-size: clamp(38px,6.2vw,88px); line-height: 1.14; letter-spacing: -.03em; }
.cta p { max-width: 850px; margin-bottom: 30px; }
.email-pill { margin-top: 8px; }
.reveal.is-visible { animation: arrive .8s cubic-bezier(.2,.65,.3,1) both; }
@media(max-width:760px) {
 .header-inner { gap: 12px; }
 .header-actions { margin-left: auto; gap: 7px; }
 .brand-mark { width: 40px; flex-basis: 40px; height: 30px; }
 .theme-switch { width: 58px; }
 [data-theme="light"] .theme-switch::after { transform: translateX(28px); }
 .case-summary { padding: 18px; }
 .full-process { padding-top: 50px; }
 .process-step { margin-block: 40px 60px; }
 .process-step > header { display: block; }
 .process-step h3 { margin-top: 8px; }
 .cta h2 { font-size: clamp(33px,6.8vw,54px); }
}
@media(prefers-reduced-motion:reduce) { .reveal.is-visible { animation: none; } }
/* Dark-only editorial layout. Header actions now contain only the mobile menu. */
.about-banner { grid-template-columns: minmax(0,850px); }
.header-actions { gap: 0; }
@media(min-width:761px) { .header-actions { display:none; } }
/* Static frames clip image overscan, while text remains free to reflow. The JS
   updates only transform and opacity on their children for scroll-linked depth. */
.motion-frame { min-width:0; }
.motion-image { overflow:hidden; border-radius:inherit; }
.motion-layer { transform-origin:center; }
.motion-image img { transition:none; }
.project-image:hover .motion-image { filter:brightness(1.05); }
/* Vertical carousel inspired by the CodingNepal reference. The staggered depth
   is driven by data-position, so controls and screen-reader state stay in sync. */
.vertical-cards .testimonial-shell { align-items:center; }
.vertical-cards .testimonial-track { overflow:visible; padding-block:85px; }
.vertical-cards .testimonial-list { display:grid; isolation:isolate; }
.vertical-cards .testimonial-card { grid-area:1/1; align-self:center; width:100%; margin:0; background:#1b1b1b; box-shadow:0 12px 40px #0003; animation:none; transition:transform .6s cubic-bezier(.22,.7,.25,1),opacity .5s ease; }
.vertical-cards [data-position="active"] { opacity:1; transform:translateY(0) scale(1); z-index:3; }
.vertical-cards [data-position="before"] { opacity:.22; transform:translateY(-75px) scale(.92); z-index:1; pointer-events:none; }
.vertical-cards [data-position="after"] { opacity:.22; transform:translateY(75px) scale(.92); z-index:2; pointer-events:none; }
.vertical-cards [data-position="away"] { opacity:0; transform:translateY(130px) scale(.85); pointer-events:none; z-index:0; visibility:hidden; }
.testimonial-controls { flex-wrap:wrap; }
.testimonial-pause { border:1px solid var(--line); border-radius:30px; padding:8px 18px; min-height:46px; color:var(--text); background:var(--surface); }
.testimonial-pause:hover { border-color:var(--muted); }
/* Full-bleed portfolio crops: same dimensions and hover treatment on every page. */
.project-image { aspect-ratio:4/3; padding:0; overflow:hidden; }
.project-image > img { display:block; width:100%; height:100%; aspect-ratio:auto; margin:0; object-fit:cover; object-position:center; transform:scale(1); transition:transform .5s cubic-bezier(.2,.65,.3,1); }
.project-image:hover > img,.project-image:focus-visible > img { transform:scale(1.06); }
/* Opaque fallback plus a restrained frost layer; quote contrast remains high. */
.vertical-cards .testimonial-card { background:radial-gradient(ellipse at 95% 0%,rgba(30,142,163,.22),transparent 65%),radial-gradient(ellipse at 10% 100%,rgba(146,53,112,.18),transparent 65%),linear-gradient(135deg,rgba(40,42,57,.97),rgba(23,27,33,.97)); border-color:rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(110%); -webkit-backdrop-filter:blur(18px) saturate(110%); box-shadow:inset 0 1px rgba(255,255,255,.04),0 16px 45px #0003; }
@media(prefers-reduced-motion:reduce) { .project-image:hover > img,.project-image:focus-visible > img { transform:none; } }
.vertical-cards .testimonial-quote { font-size:clamp(20px,1.85vw,28px); line-height:1.5; }
@media(max-width:760px) {
 .vertical-cards .testimonial-track { padding-block:60px; }
 .vertical-cards [data-position="before"] { transform:translateY(-48px) scale(.92); }
 .vertical-cards [data-position="after"] { transform:translateY(48px) scale(.92); }
 .vertical-cards .testimonial-card { padding:24px; }
}
@media(prefers-reduced-motion:reduce) {
 .motion-layer { transform:none !important; opacity:1 !important; }
 .vertical-cards .testimonial-card { transition:none; }
 .vertical-cards [data-position="before"],.vertical-cards [data-position="after"] { opacity:0; visibility:hidden; }
}

/* The gradient lives around the footage: interface details stay unobscured. */
.animated-cover .flow-stage { position:relative; isolation:isolate; overflow:hidden; border-radius:24px; background:linear-gradient(180deg,#526477 0%,#303a43 28%,#15171a 67%,#111 100%); box-shadow:none; }
.animated-cover .flow-video { display:block; width:100%; height:auto; aspect-ratio:1272/720; object-fit:contain; border-radius:0; mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 72%,transparent 100%); }
.flow-stage::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#111b 0%,#1113 4%,transparent 13%,transparent 87%,#1113 96%,#111b 100%),linear-gradient(180deg,#65788a55 0%,transparent 22%,transparent 74%,#111a 94%,#111 100%); border-radius:inherit; }
.flow-toggle { position:absolute; z-index:2; bottom:18px; right:18px; border:1px solid #ffffff30; border-radius:30px; padding:10px 16px; min-height:44px; background:#151922cc; backdrop-filter:blur(14px); color:#fff; font:inherit; font-size:13px; cursor:pointer; }
.flow-toggle:hover { background:#29313ce6; }
.flow-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:760px) { .animated-cover .flow-stage { border-radius:16px; } .flow-toggle { bottom:8px; right:8px; padding:8px 12px; font-size:12px; } }

/* Shift the artwork right within its crop; keep the complete phone clear on hover. */
.project-image > img[src$="remote-showcase.webp"] { object-position:15% center; }
/* Quiet the coloured backdrop at the perimeter without dimming the phone UI. */
.project-image[href="remote-control-ui"]::before,
.project-image[href="remote-control-ui.html"]::before,
.project-image[href="/remote-control-ui"]::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg,rgba(17,17,17,.2),transparent 38%,transparent 72%,rgba(17,17,17,.16)),linear-gradient(90deg,rgba(17,17,17,.12),transparent 30%,transparent 80%,rgba(17,17,17,.12)); }
.gxd-mug-section { margin-block:48px 80px; overflow:hidden; border-radius:24px; } .gxd-mug-section img { display:block; width:100%; height:auto; margin:0; }
/* A restrained overhead studio light, scoped to the GXD identity overview. */
#process-69 .motion-image, .studio-spotlight .motion-image { position:relative; isolation:isolate; }
#process-69 .motion-image::after, .studio-spotlight .motion-image::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 45% 72% at 50% -12%,rgba(235,240,248,.16),rgba(218,231,244,.045) 48%,transparent 78%); }

/* Supplied transparent H artwork: white, proportional and optically balanced. */
.brand-mark { width:44px; height:auto; aspect-ratio:1377/813; flex:0 0 44px; background:#fff; mask:url('../hammuworks-h.png') center/contain no-repeat; -webkit-mask:url('../hammuworks-h.png') center/contain no-repeat; }
@media(max-width:760px) { .brand-mark { width:36px; flex-basis:36px; } }
.studio-spotlight .motion-image::after { background:radial-gradient(ellipse 46% 95% at 50% -16%,rgba(247,244,237,.34),rgba(228,233,240,.14) 35%,rgba(221,229,240,.035) 66%,transparent 84%); }
/* Original transparent product render, composed with live text and a soft studio light. */
.printer-overview { position:relative; isolation:isolate; display:grid; grid-template-columns:.85fr 1.35fr; align-items:center; gap:20px; padding:clamp(28px,4vw,64px); padding-bottom:110px; overflow:hidden; border:1px solid #ffffff12; border-radius:24px; background:radial-gradient(ellipse 65% 70% at 65% -18%,#d6e3ed38,transparent 80%),radial-gradient(ellipse at 95% 50%,#672e2c1c,transparent 64%),linear-gradient(160deg,#202329,#111214 70%); }
.printer-overview-copy { position:relative; z-index:1; }
.printer-overview-copy .kicker { color:#aeb7bf; font-size:10px; }
.printer-overview-copy h4 { font-size:clamp(32px,4.2vw,62px); line-height:1.05; letter-spacing:-.045em; margin:32px 0 22px; color:#f6f6f4; }
.printer-overview-copy .overview-subtitle { color:#e2e3e5; font-size:clamp(18px,1.8vw,26px); line-height:1.4; }
.printer-overview-copy p:last-child { font-size:14px; line-height:1.7; max-width:36ch; color:#a7aab0; }
.printer-overview-visual img { display:block; width:100%; height:auto; filter:drop-shadow(0 22px 20px #0005); }
.ux-award-badge { position:absolute; bottom:24px; right:28px; display:grid; grid-template-columns:auto auto; column-gap:10px; align-items:center; border:1px solid #ffffff24; border-radius:10px; padding:12px 16px; color:#eee; background:#ffffff05; }
.ux-award-badge>span { grid-row:span 2; font-size:30px; font-weight:300; letter-spacing:-3px; padding-right:4px; }
.ux-award-badge strong { font-size:10px; letter-spacing:.13em; }
.ux-award-badge small { font-size:10px; color:#aaaeb5; }
@media(max-width:760px) { .printer-overview { grid-template-columns:1fr; gap:16px; padding:28px 24px 105px; } .printer-overview-copy h4 { margin-top:20px; } .printer-overview-copy p:last-child { max-width:46ch; } .ux-award-badge { right:24px; bottom:22px; } }
.printer-overview { padding-bottom:160px; }
.printer-overview-visual img { border-radius:12px; filter:none; }
.ux-award-thumbnail { position:absolute; right:28px; bottom:24px; display:block; width:68px; border-radius:3px; overflow:hidden; box-shadow:0 6px 20px #0004; transition:transform .25s ease; }
.ux-award-thumbnail img { display:block; width:100%; height:auto; }
.ux-award-thumbnail:hover { transform:translateY(-3px); }
.ux-award-thumbnail:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
@media(max-width:760px) { .printer-overview { padding-bottom:148px; } .ux-award-thumbnail { right:24px; width:64px; } }
/* Full-card project overview image with readable foreground typography. */
.printer-overview { display:flex; align-items:center; min-height:640px; padding:clamp(28px,4vw,64px); padding-bottom:140px; background:#090a0b; }
.printer-overview-visual { position:absolute; inset:0; z-index:-2; }
.printer-overview-visual img { width:100%; height:100%; object-fit:cover; object-position:center; border-radius:0; }
.printer-overview::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(5,6,7,.94),rgba(5,6,7,.75) 30%,rgba(5,6,7,.15) 64%,transparent),linear-gradient(0deg,rgba(5,6,7,.55),transparent 28%); pointer-events:none; }
.printer-overview-copy { max-width:42%; }
.ux-award-thumbnail { z-index:2; }
@media(max-width:760px) { .printer-overview { min-height:660px; align-items:flex-start; padding:32px 24px 148px; } .printer-overview-copy { max-width:100%; } .printer-overview-visual img { object-position:60% center; } .printer-overview::after { background:linear-gradient(180deg,rgba(5,6,7,.94),rgba(5,6,7,.8) 40%,rgba(5,6,7,.15) 72%,rgba(5,6,7,.5)); } }
/* Quiet editorial hierarchy for the project overview. */
.printer-overview-copy { max-width:48%; }
.printer-overview-copy h4.overview-subtitle { margin:0 0 28px; font-size:clamp(24px,2.4vw,36px); font-weight:500; line-height:1.3; letter-spacing:-.025em; color:#f6f6f4; text-wrap:balance; }
.printer-overview-copy p:last-child { margin:0; max-width:38ch; font-size:clamp(14px,1.1vw,16px); line-height:1.8; color:#bdc0c5; }
@media(max-width:760px) { .printer-overview-copy { max-width:100%; } .printer-overview-copy h4.overview-subtitle { font-size:24px; margin-bottom:24px; } .printer-overview { padding-top:48px; } }
.vds-project-work { padding-block:40px 120px; }
.vds-project-work h2 { font-size:clamp(36px,5vw,64px); }
.vds-feature { display:grid; grid-template-columns:.85fr 1.3fr; align-items:center; background:#0b111a; border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.vds-feature>div { padding:clamp(28px,4vw,64px); }
.vds-feature h3 { font-size:clamp(32px,4vw,54px); margin:28px 0; }
.vds-feature p { color:var(--muted); max-width:35ch; }
.vds-feature img { width:100%; transition:transform .6s; }
.vds-feature:hover img { transform:scale(1.035); }
.vds-body section { padding-bottom:80px; margin-bottom:64px; }
.vds-body .vds-figure { margin-top:36px; }
.vds-figure a { display:block; }
.vds-expand { display:block; padding-top:14px; color:var(--muted); font-size:12px; }
.vds-team { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.vds-team strong { display:block; color:var(--text); margin-bottom:8px; font-weight:500; }
.vds-foundation-grid,.vds-spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; align-items:start; }
.vds-type,.vds-color { min-height:290px; padding:32px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(140deg,#182b38,#111216); }
.vds-type b { display:block; font-size:86px; font-weight:400; line-height:1.3; letter-spacing:-.07em; }
.vds-type p,.vds-color p { font-size:14px; margin-bottom:0; }
.vds-swatches { display:flex; margin:44px 0 32px; }
.vds-swatches i { width:25%; height:64px; }
.vds-details { margin-top:32px; border-block:1px solid var(--line); padding:20px 0; }
.vds-details summary { cursor:pointer; color:var(--text); }
.vds-spec-grid .vds-figure { margin-top:0; }
.vds-spec-grid img { max-height:620px; object-fit:contain; object-position:top; background:#fff; }
#accessibility>.vds-figure img { max-height:800px; object-fit:contain; background:#12131a; }
@media(max-width:760px) { .vds-feature,.vds-foundation-grid,.vds-spec-grid { grid-template-columns:1fr; } .vds-feature img { order:-1; } .vds-team { grid-template-columns:1fr; gap:18px; } .vds-body section { padding-bottom:48px; margin-bottom:40px; } }
@media(prefers-reduced-motion:reduce) { .vds-feature img { transition:none; } }
/* EWS: quieter editorial hierarchy and deliberate section rhythm. */
.ews-refined h2 { font-size:clamp(30px,3.2vw,44px); line-height:1.16; letter-spacing:-.035em; max-width:22ch; margin:18px 0 28px; }
.ews-refined>section { padding-bottom:80px; margin-bottom:80px; }
.ews-refined>section>p:not(.kicker) { max-width:62ch; font-size:17px; line-height:1.85; margin-bottom:24px; }
.ews-refined .vds-figure { margin-top:40px; }
.ews-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:0 32px; margin-top:32px; }
.ews-principles span { padding:20px 0; border-top:1px solid var(--line); font-size:18px; }
.ews-atomic { list-style:decimal-leading-zero; padding-left:28px; margin:36px 0; }
.ews-atomic li { padding:20px 0 20px 16px; border-top:1px solid var(--line); }
.ews-atomic h3 { margin:0 0 10px; font-size:21px; font-weight:500; }
.ews-atomic p { margin:0; font-size:16px; line-height:1.75; }
.ews-colors { display:flex; height:72px; border-radius:12px; overflow:hidden; margin:36px 0; }
.ews-colors span { flex:1; }
.ews-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:40px 0; }
.ews-metrics strong { display:block; font-size:clamp(36px,4vw,54px); line-height:1.2; font-weight:500; letter-spacing:-.04em; }
.ews-metrics span { display:block; color:var(--muted); font-size:14px; margin-top:14px; }
.ews-refined>section>p.ews-source-note { font-size:13px; line-height:1.65; color:var(--muted); }
.ews-refined #color img,.ews-refined #components img { max-height:850px; object-fit:contain; background:#fff; }
@media(max-width:760px) { .ews-refined>section { padding-bottom:48px; margin-bottom:48px; } .ews-refined>section>p:not(.kicker) { font-size:16px; line-height:1.8; } .ews-principles { grid-template-columns:1fr 1fr; gap:0 20px; } .ews-metrics { gap:24px; grid-template-columns:1fr; } .ews-metrics>div { padding-bottom:24px; border-bottom:1px solid var(--line); } }
/* Source documents must never inherit cropped presentation effects. */
.pdf-gallery { padding-block:40px 80px; overflow:visible; }
.pdf-gallery>h2 { font-size:clamp(32px,4vw,52px); margin:20px 0 24px; }
.pdf-gallery>p { max-width:65ch; }
.pdf-page { margin-top:64px; height:auto; overflow:visible; }
.pdf-page header { display:flex; align-items:baseline; gap:24px; margin-bottom:20px; }
.pdf-page h3 { font-size:24px; margin:0; letter-spacing:-.025em; }
.pdf-page-card { margin:0; padding:clamp(12px,2vw,28px); border:1px solid var(--line); border-radius:24px; background:var(--surface); height:auto; max-height:none; overflow:visible; }
.pdf-page-card>a { display:block; height:auto; max-height:none; overflow:visible; }
.pdf-page-card img { display:block; width:100%; height:auto; max-height:none; aspect-ratio:auto; object-fit:contain; transform:none!important; border-radius:0; }
.pdf-page-card figcaption { display:flex; justify-content:space-between; gap:20px; padding-top:18px; color:var(--muted); font-size:13px; }
.pdf-page-card figcaption a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:760px) { .pdf-page header { display:block; } .pdf-page h3 { margin-top:12px; } .pdf-page-card figcaption { flex-wrap:wrap; } }
/* Supplied EWS cover: preserve the complete artwork, without zoom. */

.case-cover img.ews-exact-cover,.vds-feature img.ews-exact-cover { display:block; width:100%; height:auto; object-fit:contain; transform:none!important; }
.ews-identity-spotlight>a { position:relative; isolation:isolate; }
.ews-identity-spotlight>a::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 48% 65% at 50% 0%,rgba(222,236,255,.24),rgba(218,233,255,.07) 45%,transparent 76%); mix-blend-mode:screen; }

/* Requested portfolio refinements. */
.project-image > img[src$="smart-cover.webp"],
.project-image:hover > img[src$="smart-cover.webp"],
.project-image:focus-visible > img[src$="smart-cover.webp"] { object-fit: contain; transform: none; }
.ews-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.ews-summary > div { min-width: 0; }
@media (max-width: 760px) { .ews-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ews-summary { grid-template-columns: minmax(0, 1fr); } }

.process-figure img.static-process-image { display: block; width: 100%; max-width: 1920px; height: auto; object-fit: contain; transform: none; border-radius: 0; }

.project-image:has(> img[src$="smart-card.png"]) { aspect-ratio: 4 / 3; }
.project-image > img[src$="smart-card.png"] { object-fit: cover; transform: scale(1); }
.project-image:hover > img[src$="smart-card.png"], .project-image:focus-visible > img[src$="smart-card.png"] { transform: scale(1.06); }
.case-figure img.static-process-image { display:block; width:100%; height:auto; transform:none; }
@media (prefers-reduced-motion: reduce) { .project-image:hover > img[src$="smart-card.png"], .project-image:focus-visible > img[src$="smart-card.png"] { transform:none; } }

.recognition .external-link-note { display:block; color:var(--muted); font-size:12px; margin-top:6px; }
.recognition strong a:hover { text-decoration:underline; text-underline-offset:4px; }

.case-cover .magic-awards { display:flex; align-items:center; gap:24px; padding:20px 0; }
.case-cover .magic-awards img { width:auto; height:auto; max-width:100%; object-fit:contain; transform:none; }
.magic-awards a:first-child { width:72px; flex-shrink:0; }
.magic-awards a:last-child { width:207px; }
.mui-program > p { max-width:850px; margin-bottom:28px; }
.mui-program-video { display:block; width:100%; height:auto; border-radius:12px; }

.case-cover img.static-process-image { display:block; width:100%; height:auto; transform:none; }

.motion-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:28px 0}.motion-toolbar [role=status]{color:var(--muted);font-size:14px}.motion-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.motion-sample{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface)}.motion-sample.is-active{border-color:var(--accent,#d6ff70)}.sample-select{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}.sample-select:focus-visible{outline:2px solid var(--accent,#d6ff70);outline-offset:-4px}.sample-screen{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#000;overflow:hidden}.sample-screen video,.sample-screen canvas{display:block;width:100%;height:100%;object-fit:contain}.sample-label{display:flex;justify-content:space-between;gap:12px;padding:18px;font-size:14px}.sample-state{color:var(--muted)}@media(max-width:640px){.motion-samples{grid-template-columns:1fr}}

/* Give motion samples more room and enlarge the interface details. */
#motion-in-action .sample-screen{aspect-ratio:8/5}
#motion-in-action .sample-screen video,#motion-in-action .sample-screen canvas{transform:scale(1.15)}


/* Enlarge samples 01–03 by 20% relative to their existing 1.15 scale. */
#motion-in-action .motion-sample:nth-child(-n+3) .sample-screen video{transform:scale(1.38)}


.case-study-action{margin:20px 0 16px}.case-study-link{min-height:48px}

.about-intro-links{display:flex;align-items:center;flex-wrap:wrap;gap:16px 32px}

.portfolio-panel{display:flex;align-items:center;gap:24px;width:100%;box-sizing:border-box;margin-top:36px;padding:28px 32px;border:1px solid var(--line);border-radius:22px;background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .2s,background .2s}
.portfolio-panel:hover{border-color:var(--accent);background:rgba(255,255,255,.045)}
.portfolio-panel:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.portfolio-pdf-icon{width:42px;height:50px;flex:none;color:var(--accent)}
.portfolio-panel-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.portfolio-panel-copy .kicker{color:var(--muted);font-size:12px}
.portfolio-panel-copy strong{font-size:20px;font-weight:600;line-height:1.35}
.portfolio-panel-detail{font-size:13px;color:var(--muted)}
.portfolio-panel-arrow{margin-left:auto;font-size:28px;flex:none}
@media(max-width:600px){.portfolio-panel{padding:22px 20px;gap:16px}.portfolio-panel-copy strong{font-size:18px}.portfolio-pdf-icon{width:32px;height:40px}.portfolio-panel-detail{font-size:12px}}

.hero-intro-single{display:block;width:100%;max-width:720px;min-width:0}.hero-intro-single>div{width:100%;min-width:0}.hero-intro-single .hero-intro{width:100%;max-width:none}.hero-intro-single .button-row{width:100%}.hero-intro-single .button{flex-shrink:0;max-width:100%;box-sizing:border-box}

.portfolio-panel .portfolio-pdf-icon{display:block;width:42px;height:50px;max-width:42px;max-height:50px;flex:0 0 42px}.portfolio-panel{min-width:0}.portfolio-panel-copy{overflow-wrap:anywhere}@media(max-width:600px){.portfolio-panel .portfolio-pdf-icon{width:32px;height:40px;max-width:32px;max-height:40px;flex-basis:32px}}

.portfolio-unlock{margin-left:auto;flex-shrink:0}.portfolio-panel{flex-wrap:wrap}@media(max-width:600px){.portfolio-unlock{margin-left:0;width:100%;justify-content:center}}