@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/NotoSansArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/NotoSansArabic-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Kufi Arabic";src:url("../fonts/NotoKufiArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Kufi Arabic";src:url("../fonts/NotoKufiArabic-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url("../fonts/NotoNaskhArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url("../fonts/NotoNaskhArabic-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root {
  --s97-accent: #ff4d00;
  --s97-bg: #0a0a0a;
  --s97-text: #f4f1ea;
  --s97-surface: #151515;
  --s97-muted: #929292;
  --s97-border: var(--s97-border-color, rgba(255,255,255,.17));
  --s97-font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --s97-font-en: Inter, Arial, sans-serif;
  --s97-radius: 0px;
  --s97-header: 86px;
  --s97-gutter: clamp(20px, 4vw, 72px);
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--s97-bg); color: var(--s97-text); font-family: var(--s97-font-ar); font-size: var(--s97-body-size,16px); line-height: var(--s97-line-height,1.65); letter-spacing:var(--s97-letter-spacing,0); overflow-x: hidden; }
body.home #main { display:flex; flex-direction:column; }
body.s97-mode-light, body[data-theme="light"] { --s97-bg:#f3f0e9; --s97-text:#111; --s97-surface:#e8e4dc; --s97-muted:#606060; --s97-border:rgba(0,0,0,.18); color-scheme: light; }
body.s97-mode-auto { color-scheme: light dark; }
@media (prefers-color-scheme: light) { body.s97-mode-auto:not([data-theme="dark"]) { --s97-bg:#f3f0e9; --s97-text:#111; --s97-surface:#e8e4dc; --s97-muted:#606060; --s97-border:rgba(0,0,0,.18); } }
body.menu-open, body.search-open, body.modal-open { overflow: hidden; }
body.s97-cursor-active, body.s97-cursor-active a, body.s97-cursor-active button { cursor:none; }
.s97-cursor { pointer-events:none; position:fixed; z-index:9999; top:0; left:0; width:15px; height:15px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--s97-accent); mix-blend-mode:difference; transform:translate3d(-100px,-100px,0); transition:width .2s,height .2s,margin .2s; }
.s97-cursor.is-hover { width:46px; height:46px; margin:-23px 0 0 -23px; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--s97-selection,var(--s97-accent)); color: #fff; }
:focus-visible { outline: 2px solid var(--s97-accent); outline-offset: 5px; }
.s97-container { width: 100%; max-width:calc(var(--s97-content-width,1440px) + (var(--s97-gutter) * 2)); margin-inline:auto; padding-inline: var(--s97-gutter); }
.s97-skip { position: fixed; inset-block-start: -100px; inset-inline-start: 20px; z-index: 10000; padding: 12px 18px; background: var(--s97-accent); color: #fff; transition: .2s; }
.s97-skip:focus { inset-block-start: 10px; }
.s97-eyebrow { display: block; color: var(--s97-muted); font-family: var(--s97-font-en); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.s97-reveal { opacity: 0; transform: translateY(45px); transition: opacity var(--s97-transition,.8s) cubic-bezier(.2,.8,.2,1), transform var(--s97-transition,.8s) cubic-bezier(.2,.8,.2,1); }
.s97-reveal.is-visible { opacity: 1; transform: none; }
body[data-motion="minimal"] .s97-reveal { transform:translateY(16px); }
body[data-motion="cinematic"] .s97-reveal { transform:translateY(70px) scale(.985); }

/* Header */
.s97-header { position: fixed; inset: 0 0 auto; z-index: 900; height: var(--s97-header); color: #fff; transition: background .35s, color .35s, transform .35s; }
.s97-header.is-scrolled,.s97-header-solid .s97-header { background: color-mix(in srgb, var(--s97-header-bg) 92%, transparent); color: var(--s97-text); border-bottom: 1px solid var(--s97-border); backdrop-filter: blur(18px); }
.s97-header-static .s97-header { position:absolute; }
.s97-header-no-border .s97-header { border-bottom:0!important; }
.s97-header.is-hidden { transform: translateY(-101%); }
.s97-header-inner { height: 100%; display: flex; align-items: center; gap: clamp(24px,4vw,70px); padding-inline: var(--s97-gutter); }
.s97-brand { margin-inline-end: auto; }
.s97-wordmark { display: inline-flex; align-items: baseline; gap: 5px; font: 600 20px/1 var(--s97-font-en); letter-spacing: -.055em; white-space: nowrap; }
.s97-wordmark b { color: var(--s97-accent); font-weight: 600; }
.custom-logo { width: auto; max-width: var(--s97-logo-width,170px); height: 38px; object-fit: contain; }
.s97-option-logo { display:block; width:var(--s97-logo-width,170px); }
.s97-option-logo img { width:100%; max-height:48px; object-fit:contain; object-position:right center; }
.s97-logo-on-light { display:none; }
body.s97-mode-light .s97-logo-on-dark,body[data-theme="light"] .s97-logo-on-dark { display:none; }
body.s97-mode-light .s97-logo-on-light,body[data-theme="light"] .s97-logo-on-light { display:block; }
@media (prefers-color-scheme:light){body.s97-mode-auto:not([data-theme="dark"]) .s97-logo-on-dark{display:none}body.s97-mode-auto:not([data-theme="dark"]) .s97-logo-on-light{display:block}}
.s97-desktop-nav ul, .s97-footer ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.s97-desktop-nav a { position: relative; font-size: var(--s97-nav-size,14px); }
.s97-desktop-nav a::after { content:""; position:absolute; right:0; bottom:-6px; width:0; height:1px; background:currentColor; transition:.25s; }
.s97-desktop-nav a:hover::after { width:100%; }
.s97-header-tools { display: flex; align-items: center; gap: 9px; }
.s97-icon-button, .s97-menu-button { width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; background: transparent; display: grid; place-items: center; font-size: 20px; }
.s97-menu-button { display: none; gap: 5px; align-content: center; }
.s97-menu-button span { display:block; width:17px; height:1px; background:currentColor; }
.s97-start-button { display: inline-flex; min-height: 44px; align-items: center; padding: 0 19px; border-radius: var(--s97-button-radius,999px); background: var(--s97-button-bg,var(--s97-accent)); color:var(--s97-button-text,#fff); font-size:14px; }

/* Overlays */
.s97-full-menu, .s97-search-overlay, .s97-video-modal { position: fixed; inset: 0; z-index: 1100; visibility: hidden; opacity: 0; background: var(--s97-bg); transition: opacity .4s, visibility .4s; }
.s97-full-menu.is-open, .s97-search-overlay.is-open, .s97-video-modal.is-open { visibility: visible; opacity: 1; }
.s97-overlay-close, .s97-video-modal > button { position:absolute; top:28px; left:var(--s97-gutter); width:48px; height:48px; border:1px solid var(--s97-border); border-radius:50%; background:transparent; font-size:27px; z-index:2; }
.s97-full-menu-inner { min-height: 100%; display: flex; flex-direction: column; padding: 10vh var(--s97-gutter) 5vh; }
.s97-full-menu nav { margin:auto 0; }
.s97-full-menu ul { margin:0; padding:0; list-style:none; counter-reset:menu; }
.s97-full-menu li { counter-increment:menu; border-bottom:1px solid var(--s97-border); }
.s97-full-menu li a { display:flex; align-items:center; gap:20px; padding:9px 0; font-size:clamp(36px,6vw,92px); line-height:1.1; letter-spacing:-.05em; }
.s97-full-menu li a::before { content:"0" counter(menu); color:var(--s97-muted); font:11px var(--s97-font-en); letter-spacing:.12em; }
.s97-menu-foot { display:flex; justify-content:space-between; gap:20px; color:var(--s97-muted); }
.s97-search-inner { width:min(1100px, calc(100% - 40px)); margin:18vh auto 0; }
.s97-search-inner label { display:block; color:var(--s97-muted); font-size:13px; }
.s97-search-inner input { width:100%; margin-top:18px; padding:18px 0 24px; border:0; border-bottom:1px solid var(--s97-border); background:transparent; font-size:clamp(30px,5vw,72px); letter-spacing:-.04em; outline:0; }
.s97-live-results { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; max-height:42vh; overflow:auto; }
.s97-search-result { display:block; }
.s97-search-result img, .s97-search-thumb { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--s97-surface); }
.s97-search-result span { display:block; margin-top:9px; color:var(--s97-muted); font-size:12px; }
.s97-search-result strong { display:block; font-size:16px; }

/* Hero */
.s97-hero { position: relative; min-height: var(--s97-hero-height,100svh); background:#111; color:#fff; overflow:hidden; }
.s97-hero-media, .s97-hero-shade { position:absolute; inset:0; }
.s97-hero-media img, .s97-hero-media video { width:100%; height:100%; object-fit:cover; transform:scale(1.03); animation:s97Hero 10s ease-out both; }
@keyframes s97Hero { to { transform:scale(1); } }
.s97-hero-shade { background:linear-gradient(180deg,rgba(0,0,0,calc(var(--s97-hero-overlay,.45) * .45)),rgba(0,0,0,calc(var(--s97-hero-overlay,.45) * .35)) 40%,rgba(0,0,0,var(--s97-hero-overlay,.45))); }
.s97-hero-art { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg,#160b08,#ca3c00); }
.s97-hero-art span { color:rgba(255,255,255,.14); font:600 min(62vw,780px)/.8 var(--s97-font-en); letter-spacing:-.14em; transform:translateX(-4%); }
.s97-hero-content { position:relative; z-index:2; min-height:var(--s97-hero-height,100svh); display:flex; flex-direction:column; justify-content:flex-end; padding-block:140px 55px; }
.s97-hero-align-center .s97-hero-content { justify-content:center; }
.s97-hero-align-top .s97-hero-content { justify-content:flex-start; padding-top:calc(var(--s97-header) + 100px); }
.s97-hero-kicker { margin-bottom:18px; color:rgba(255,255,255,.67); }
.s97-hero h1 { width:min(var(--s97-hero-copy-width,1050px),94%); margin:0; font-size:clamp(50px,8.2vw,var(--s97-hero-title,148px)); font-weight:400; line-height:.98; letter-spacing:-.065em; text-wrap:balance; }
.s97-hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-top:42px; }
.s97-hero-bottom p { width:min(500px,100%); margin:0; color:rgba(255,255,255,.75); font-size:18px; }
.s97-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.s97-primary-link, .s97-ghost-link { display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:var(--s97-button-radius,999px); }
.s97-primary-link { background:var(--s97-button-bg,var(--s97-accent)); color:var(--s97-button-text,#fff); }
.s97-ghost-link { border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(8px); }
.s97-scroll-cue { position:absolute; z-index:2; bottom:26px; right:50%; transform:translateX(50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:10px; color:rgba(255,255,255,.6); }
.s97-scroll-cue span { display:block; width:1px; height:30px; background:rgba(255,255,255,.5); animation:s97Scroll 1.6s infinite; transform-origin:top; }
@keyframes s97Scroll { 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0);transform-origin:bottom} }

/* Shared headings */
.s97-section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; padding-block:120px 44px; border-bottom:1px solid var(--s97-border); }
.s97-section-head h2 { margin:9px 0 0; font-size:clamp(36px,5vw,var(--s97-section-title,82px)); line-height:1; font-weight:400; letter-spacing:-.055em; }
.s97-text-link { flex:none; padding-bottom:6px; border-bottom:1px solid currentColor; font-size:14px; }
.s97-text-link span { color:var(--s97-accent); margin-right:7px; }

/* Projects */
.s97-home-portfolio { padding-bottom:80px; background:var(--s97-portfolio-bg); }
.s97-project-grid { display:grid; grid-template-columns:repeat(var(--columns,3), minmax(0,1fr)); gap:var(--gap,4px); width:100%; }
.s97-project-card { min-width:0; overflow:hidden; background:var(--s97-surface); }
.s97-project-card.span-2 { grid-column:span 2; }
.s97-project-card.visible-mobile { display:none; }
.s97-project-media { position:relative; display:block; height:100%; min-height:280px; aspect-ratio:var(--s97-card-ratio,1/1); overflow:hidden; }
.s97-project-card.span-2 .s97-project-media { aspect-ratio:2/1; }
.s97-project-media img { width:100%; height:100%; object-fit:cover; transition:transform .75s cubic-bezier(.2,.8,.2,1), filter .4s; }
.s97-project-media:hover img { transform:scale(1.035); filter:brightness(.7); }
.s97-card-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(18px,2vw,34px); color:#fff; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72)); opacity:0; transition:.35s; }
.s97-project-media:hover .s97-card-overlay, .s97-project-media:focus .s97-card-overlay { opacity:1; }
.s97-hover-zoom .s97-card-overlay { display:none; }
.s97-hover-none .s97-card-overlay { display:none; }
.s97-hover-none .s97-project-media img { transition:none; }
.s97-hover-none .s97-project-media:hover img { transform:none; filter:none; }
.s97-hide-project-meta .s97-card-meta { display:none; }
.s97-card-title { font-size:clamp(22px,2.2vw,var(--s97-project-title,38px)); line-height:1.1; }
.s97-card-meta { margin-top:8px; color:rgba(255,255,255,.7); font-size:12px; }
.s97-card-arrow { position:absolute; top:22px; left:22px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; color:#111; font-size:20px; transform:scale(.7); transition:.35s; }
.s97-project-media:hover .s97-card-arrow { transform:scale(1); }
.s97-art-placeholder { display:grid; width:100%; height:100%; place-items:center; overflow:hidden; background:linear-gradient(145deg,var(--s97-surface),color-mix(in srgb,var(--s97-accent) 55%,#111)); }
.s97-art-placeholder i { color:rgba(255,255,255,.2); font:600 18vw/.8 var(--s97-font-en); letter-spacing:-.12em; }

/* Selected projects */
.s97-selected { padding-bottom:150px; background:var(--s97-selected-bg); }
.s97-featured-project { margin-top:80px; }
.s97-featured-project > a { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr); gap:clamp(25px,5vw,90px); align-items:end; }
.s97-featured-project:nth-of-type(odd) > a { grid-template-columns:minmax(260px,.45fr) minmax(0,1.55fr); }
.s97-featured-project:nth-of-type(odd) .s97-featured-image { order:2; }
.s97-featured-image { aspect-ratio:16/10; overflow:hidden; background:var(--s97-surface); }
.s97-featured-image img { width:100%; height:100%; object-fit:cover; transition:.7s; }
.s97-featured-project:hover img { transform:scale(1.025); }
.s97-featured-copy { position:relative; padding-bottom:24px; border-bottom:1px solid var(--s97-border); }
.s97-featured-copy > span { color:var(--s97-muted); font:11px var(--s97-font-en); }
.s97-featured-copy h3 { margin:12px 0 15px; font-size:clamp(32px,4vw,67px); font-weight:400; line-height:1; letter-spacing:-.05em; }
.s97-featured-copy p { margin:0; color:var(--s97-muted); }
.s97-featured-copy b { position:absolute; left:0; top:0; font-size:25px; color:var(--s97-accent); }

/* Services */
.s97-services-section { position:relative; padding-bottom:130px; background:var(--s97-services-bg,var(--s97-surface)); }
.s97-services-list { position:relative; }
.s97-service-row { position:relative; z-index:2; display:grid; grid-template-columns:55px minmax(180px,1fr) minmax(220px,.7fr) 35px; gap:20px; align-items:center; padding:27px 0; border-bottom:1px solid var(--s97-border); transition:padding .3s, color .3s; }
.s97-service-row:hover { padding-inline:16px; color:var(--s97-accent); }
.s97-service-row > span { color:var(--s97-muted); font:11px var(--s97-font-en); }
.s97-service-row h3 { margin:0; font-size:clamp(25px,3vw,48px); font-weight:400; letter-spacing:-.04em; }
.s97-service-row p { margin:0; color:var(--s97-muted); }
.s97-service-row b { justify-self:end; font-size:22px; }
.s97-service-preview { pointer-events:none; position:fixed; z-index:1; width:300px; aspect-ratio:4/3; background-size:cover; background-position:center; opacity:0; transform:translate(-50%,-50%) scale(.8); transition:opacity .25s, transform .25s; }
.s97-service-preview.is-visible { opacity:.9; transform:translate(-50%,-50%) scale(1); }

/* Reel / stats / clients / CTA */
.s97-showreel { position:relative; min-height:min(78vw,850px); display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.s97-showreel-cover { position:absolute; inset:0; }
.s97-showreel-cover img { width:100%; height:100%; object-fit:cover; }
.s97-showreel-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.75)); }
.s97-reel-art { width:100%; height:100%; display:grid; place-items:center; background:#d83d00; color:rgba(0,0,0,.18); font:600 19vw/.73 var(--s97-font-en); letter-spacing:-.09em; text-align:center; }
.s97-showreel-copy { position:relative; z-index:2; width:100%; display:grid; grid-template-columns:.4fr 1fr auto; align-items:end; gap:40px; padding:70px var(--s97-gutter); }
.s97-showreel-copy > span { font:11px var(--s97-font-en); letter-spacing:.13em; }
.s97-showreel-copy h2 { margin:0; max-width:850px; font-size:clamp(38px,6vw,98px); font-weight:400; line-height:.95; letter-spacing:-.06em; }
.s97-showreel-copy button { width:130px; height:130px; border:0; border-radius:50%; background:#fff; color:#111; }
.s97-showreel-copy button b { display:block; margin-top:5px; color:var(--s97-accent); }
.s97-video-modal { display:grid; place-items:center; background:rgba(0,0,0,.95); }
.s97-video-modal [data-video-frame] { width:min(1100px,88vw); aspect-ratio:16/9; }
.s97-video-modal iframe, .s97-video-modal video { width:100%; height:100%; border:0; }
.s97-lightbox { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:5vw; visibility:hidden; opacity:0; background:rgba(0,0,0,.94); transition:.3s; }
.s97-lightbox.is-open { visibility:visible; opacity:1; }
.s97-lightbox img { max-width:92vw; max-height:88vh; object-fit:contain; }
.s97-lightbox button { position:absolute; top:25px; left:25px; width:48px; height:48px; border:1px solid #555; border-radius:50%; background:#111; color:#fff; font-size:27px; }
.s97-numbers { padding-bottom:140px; background:var(--s97-numbers-bg); }
.s97-number-grid { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--s97-border); }
.s97-number-grid > div { min-height:230px; display:flex; flex-direction:column; justify-content:space-between; padding:32px; border-left:1px solid var(--s97-border); }
.s97-number-grid > div:last-child { border-left:0; }
.s97-number-grid strong { font:400 clamp(58px,8vw,128px)/.9 var(--s97-font-en); letter-spacing:-.08em; }
.s97-number-grid span { color:var(--s97-muted); }
.s97-clients { padding-bottom:140px; overflow:hidden; background:var(--s97-clients-bg); }
.s97-client-marquee { border-block:1px solid var(--s97-border); }
.s97-client-marquee > div { display:flex; width:max-content; animation:s97Marquee 24s linear infinite; }
.s97-client-marquee span { display:grid; min-width:250px; height:150px; place-items:center; padding:30px; border-left:1px solid var(--s97-border); color:var(--s97-muted); font:500 27px var(--s97-font-en); }
@keyframes s97Marquee { to { transform:translateX(50%); } }
.s97-final-cta { min-height:85svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border-top:1px solid var(--s97-border); background:var(--s97-cta-bg); }
.s97-final-cta h2 { max-width:1200px; margin:18px 0 45px; font-size:clamp(52px,9vw,155px); font-weight:400; line-height:.92; letter-spacing:-.07em; }
.s97-final-cta > a { display:flex; align-items:center; justify-content:center; min-width:190px; height:58px; border-radius:var(--s97-button-radius,999px); background:var(--s97-button-bg,var(--s97-accent)); color:var(--s97-button-text,#fff); }

/* Archive */
.s97-work-head { padding-top:calc(var(--s97-header) + 110px); padding-bottom:70px; }
.s97-work-head h1, .s97-page-hero h1 { margin:22px 0 42px; font-size:clamp(75px,15vw,245px); font-weight:400; line-height:.76; letter-spacing:-.09em; }
.s97-work-head > div { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.s97-work-head p { max-width:580px; margin:0; color:var(--s97-muted); font-size:20px; }
.s97-work-head strong { font-weight:400; font-size:14px; }
.s97-work-controls { position:sticky; top:var(--s97-header); z-index:10; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:18px; background:color-mix(in srgb,var(--s97-bg) 94%,transparent); border-block:1px solid var(--s97-border); backdrop-filter:blur(15px); }
.s97-filters { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.s97-filters button { flex:none; padding:9px 15px; border:1px solid var(--s97-border); border-radius:999px; background:transparent; font-size:13px; }
.s97-filters button.is-active { background:var(--s97-text); color:var(--s97-bg); }
.s97-view-switch { display:flex; flex:none; gap:4px; }
.s97-view-switch button { width:37px; height:37px; border:1px solid var(--s97-border); background:transparent; }
.s97-view-switch button.is-active { background:var(--s97-text); color:var(--s97-bg); }
.s97-archive-grid { min-height:60vh; transition:opacity .2s; }
.s97-archive-grid.is-loading { opacity:.35; pointer-events:none; }
.s97-archive-grid.view-masonry { display:block; columns:3; column-gap:var(--gap); }
.s97-archive-grid.view-masonry .s97-project-card { break-inside:avoid; margin-bottom:var(--gap); }
.s97-archive-grid.view-masonry .s97-project-card:nth-child(3n+2) .s97-project-media { aspect-ratio:3/4; }
.s97-archive-grid.view-list { display:block; padding-inline:var(--s97-gutter); }
.s97-archive-grid.view-list .s97-project-card { border-bottom:1px solid var(--s97-border); background:transparent; }
.s97-archive-grid.view-list .s97-project-media { min-height:0; aspect-ratio:auto; padding:25px 0; }
.s97-archive-grid.view-list img, .s97-archive-grid.view-list .s97-art-placeholder { display:none; }
.s97-archive-grid.view-list .s97-card-overlay { position:static; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; padding:0; background:none; color:var(--s97-text); opacity:1; }
.s97-archive-grid.view-list .s97-card-title { font-size:clamp(26px,4vw,55px); }
.s97-archive-grid.view-list .s97-card-arrow { position:static; justify-self:end; background:var(--s97-surface); color:var(--s97-text); }
.s97-load-wrap { display:grid; place-items:center; padding:80px; }
.s97-load-more { min-width:190px; height:55px; border:1px solid var(--s97-border); border-radius:999px; background:transparent; }
.s97-grid-status { text-align:center; padding:20px; color:var(--s97-muted); }

/* Case study */
.s97-case-head { padding-top:calc(var(--s97-header) + 105px); padding-bottom:60px; }
.s97-case-head h1 { max-width:1400px; margin:25px 0 60px; font-size:clamp(60px,12vw,195px); font-weight:400; line-height:.83; letter-spacing:-.085em; }
.s97-case-summary { display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:start; }
.s97-case-summary > p { margin:0; font-size:clamp(19px,2vw,29px); line-height:1.45; }
.s97-case-summary dl { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; }
.s97-case-summary dl div { border-top:1px solid var(--s97-border); padding-top:12px; }
.s97-case-summary dt { color:var(--s97-muted); font-size:12px; }
.s97-case-summary dd { margin:6px 0 0; }
.s97-case-cover { position:relative; margin:0; min-height:50vw; background:var(--s97-surface); }
.s97-case-cover > img { width:100%; max-height:94svh; min-height:60vw; object-fit:cover; }
.s97-case-cover > .s97-art-placeholder { min-height:80svh; }
.s97-case-tools { position:absolute; bottom:20px; left:var(--s97-gutter); display:flex; gap:8px; }
.s97-case-tools button { padding:11px 16px; border:0; border-radius:999px; background:rgba(255,255,255,.92); color:#111; backdrop-filter:blur(8px); }
.s97-problem-solution { display:grid; grid-template-columns:1fr 1fr; gap:9vw; padding-block:130px; }
.s97-problem-solution > div { border-top:1px solid var(--s97-border); padding-top:18px; }
.s97-problem-solution span { color:var(--s97-accent); font-size:13px; }
.s97-problem-solution p { font-size:clamp(21px,2.4vw,38px); line-height:1.45; }
.s97-case-content { max-width:none; }
.s97-case-content > *:not(.alignfull):not(.alignwide) { width:min(780px,calc(100% - 40px)); margin-inline:auto; }
.s97-case-content > .alignwide { width:calc(100% - (var(--s97-gutter) * 2)); max-width:1500px; margin-inline:auto; }
.s97-case-content > .alignfull { width:100%; }
.s97-case-content figure { margin-block:0; }
.s97-case-content img { width:100%; }
.s97-case-content h2 { margin-top:90px; font-size:clamp(36px,5vw,78px); font-weight:400; line-height:1.05; letter-spacing:-.055em; }
.s97-case-content p { font-size:var(--s97-article-size,19px); color:color-mix(in srgb,var(--s97-text) 78%,transparent); }
.s97-case-content .wp-block-columns { gap:4px; }
.s97-case-content .wp-block-gallery { gap:4px!important; }
.s97-credits { display:grid; grid-template-columns:.4fr 1fr; gap:50px; padding-block:130px; border-top:1px solid var(--s97-border); }
.s97-credits p { margin-top:0; }
.s97-next-project { position:relative; display:block; min-height:72svh; overflow:hidden; background:var(--s97-surface); color:#fff; }
.s97-next-project img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55); transition:.8s; }
.s97-next-project:hover img { transform:scale(1.03); filter:brightness(.4); }
.s97-next-project > span { position:relative; z-index:1; min-height:72svh; display:flex; flex-direction:column; justify-content:center; padding:var(--s97-gutter); }
.s97-next-project small { font-size:13px; }
.s97-next-project strong { max-width:1100px; margin-top:17px; font-size:clamp(60px,11vw,175px); font-weight:400; line-height:.88; letter-spacing:-.08em; }
.s97-next-project b { position:absolute; left:var(--s97-gutter); font-size:60px; }

/* Pages, journal, brief */
.s97-page-hero { padding-top:calc(var(--s97-header) + 110px); padding-bottom:70px; }
.s97-page-hero p { max-width:700px; color:var(--s97-muted); font-size:22px; }
.s97-page-content, .s97-article-content { width:min(820px,calc(100% - 40px)); margin:0 auto 130px; }
.entry-content h2 { margin-top:70px; font-size:clamp(34px,5vw,65px); line-height:1.1; font-weight:400; }
.entry-content p, .entry-content li { font-size:var(--s97-article-size,18px); }
.s97-journal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:55px 20px; padding-bottom:120px; }
.s97-journal-card img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:14px; }
.s97-journal-card span { color:var(--s97-muted); font-size:12px; }
.s97-journal-card h2 { margin:10px 0; font-size:28px; line-height:1.2; font-weight:400; }
.s97-journal-card p { color:var(--s97-muted); }
.s97-article-head { padding-top:calc(var(--s97-header) + 100px); padding-bottom:60px; }
.s97-article-head h1 { max-width:1200px; font-size:clamp(52px,9vw,135px); line-height:.92; font-weight:400; letter-spacing:-.07em; }
.s97-article-meta { display:flex; gap:28px; color:var(--s97-muted); }
.s97-article-cover { margin:0 0 100px; }
.s97-article-cover img { width:100%; max-height:82svh; object-fit:cover; }
.s97-reading-progress { position:fixed; z-index:1000; inset:0 0 auto; height:2px; transform:scaleX(0); transform-origin:right; background:var(--s97-accent); }
.s97-brief-page { padding-block:calc(var(--s97-header) + 90px) 130px; display:grid; grid-template-columns:.7fr 1.3fr; gap:9vw; }
.s97-brief-page > header h1 { margin:15px 0; font-size:clamp(46px,6vw,93px); line-height:.96; font-weight:400; letter-spacing:-.06em; }
.s97-brief-page > header p { color:var(--s97-muted); }
.s97-brief { min-width:0; }
.s97-brief-progress { position:relative; display:flex; justify-content:flex-end; padding-bottom:14px; border-bottom:1px solid var(--s97-border); }
.s97-brief-progress span { position:absolute; right:0; bottom:-1px; width:25%; height:2px; background:var(--s97-accent); transition:.35s; }
.s97-brief-step { display:none; min-height:490px; padding-top:35px; }
.s97-brief-step.is-active { display:block; animation:s97Step .4s ease both; }
@keyframes s97Step { from{opacity:0;transform:translateY(15px)} }
.s97-brief label, .s97-brief legend { display:block; margin-top:26px; font-size:14px; }
.s97-brief input:not([type=checkbox]), .s97-brief textarea, .s97-brief select { width:100%; margin-top:8px; padding:14px 0; border:0; border-bottom:1px solid var(--s97-border); border-radius:0; background:transparent; outline:0; }
.s97-brief input:focus, .s97-brief textarea:focus, .s97-brief select:focus { border-color:var(--s97-accent); }
.s97-form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.s97-brief fieldset { margin:0; padding:0; border:0; }
.s97-choice-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.s97-choice-grid label { margin:0; }
.s97-choice-grid input { position:absolute; opacity:0; }
.s97-choice-grid span { display:block; padding:10px 16px; border:1px solid var(--s97-border); border-radius:999px; }
.s97-choice-grid input:checked + span { background:var(--s97-text); color:var(--s97-bg); }
.s97-file-label { padding:20px; border:1px dashed var(--s97-border); }
.s97-file-label input { border:0!important; }
.s97-consent { display:flex!important; align-items:center; gap:10px; }
.s97-brief-actions { display:flex; gap:8px; padding-top:22px; border-top:1px solid var(--s97-border); }
.s97-brief-actions button { min-height:47px; padding:0 17px; border:1px solid var(--s97-border); background:transparent; }
.s97-brief-actions [data-brief-next], .s97-brief-actions [data-brief-submit] { margin-right:auto; background:var(--s97-button-bg,var(--s97-accent)); color:var(--s97-button-text,#fff); border-color:var(--s97-button-bg,var(--s97-accent)); border-radius:var(--s97-button-radius,0); }
.s97-form-message { padding-top:15px; color:var(--s97-accent); }
.s97-error-page { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; }
.s97-error-page > span { color:var(--s97-accent); font:600 clamp(120px,30vw,480px)/.65 var(--s97-font-en); letter-spacing:-.1em; }
.s97-error-page h1 { margin:45px 0 8px; font-size:clamp(32px,5vw,68px); font-weight:400; }
.s97-error-page p { color:var(--s97-muted); }
.s97-error-page a { margin-top:20px; padding-bottom:5px; border-bottom:1px solid; }

/* Footer */
.s97-footer { overflow:hidden; background:var(--s97-footer-bg,var(--s97-surface)); color:var(--s97-footer-text,var(--s97-text)); }
.s97-footer-marquee { border-block:1px solid var(--s97-border); overflow:hidden; }
.s97-footer-marquee div { width:max-content; padding:25px 0; font:500 clamp(45px,8vw,125px)/1 var(--s97-font-en); letter-spacing:-.065em; white-space:nowrap; animation:s97Marquee var(--s97-marquee-speed,35s) linear infinite reverse; }
.s97-footer-grid { display:grid; grid-template-columns:1.6fr .7fr .8fr 1fr; gap:5vw; padding:90px var(--s97-gutter); }
.s97-footer-intro p { max-width:300px; margin-top:25px; color:var(--s97-muted); }
.s97-footer-label { display:block; margin-bottom:24px; color:var(--s97-muted); font-size:11px; }
.s97-footer-grid ul { flex-direction:column; gap:8px; }
.s97-footer-grid > div > a:not(.s97-wordmark) { display:block; margin-bottom:7px; }
.s97-round-link { display:grid!important; place-items:center; width:150px; height:150px; border:1px solid var(--s97-border); border-radius:50%; transition:.3s; }
.s97-round-link:hover { background:var(--s97-button-bg,var(--s97-accent)); border-color:var(--s97-button-bg,var(--s97-accent)); color:var(--s97-button-text,#fff); transform:rotate(-5deg); }
.s97-footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:20px var(--s97-gutter); border-top:1px solid var(--s97-border); color:var(--s97-muted); font-size:12px; }
.s97-footer-bottom button { border:0; background:transparent; }

/* Responsive */
@media (max-width:1080px) {
  .s97-desktop-nav { display:none; }
  .s97-menu-button { display:grid; }
  .s97-hero h1 { width:100%; }
  .s97-project-grid { --columns:2!important; }
  .s97-showreel-copy { grid-template-columns:1fr auto; }
  .s97-showreel-copy > span { grid-column:1/-1; }
  .s97-footer-grid { grid-template-columns:1.2fr 1fr 1fr; }
  .s97-footer-grid > div:last-child { grid-column:1/-1; }
  .s97-brief-page { grid-template-columns:1fr; gap:40px; }
}

@media (max-width:700px) {
  :root { --s97-header:var(--s97-mobile-header,70px); --s97-gutter:var(--s97-mobile-gutter,18px); }
  body { font-size:var(--s97-body-mobile,15px); }
  .s97-start-button, .s97-header-tools .s97-icon-button:nth-child(2) { display:none; }
  .s97-header-inner { gap:8px; }
  .s97-icon-button, .s97-menu-button { width:38px; height:38px; }
  .s97-full-menu-inner { padding-top:12vh; }
  .s97-full-menu li a { font-size:42px; padding:12px 0; }
  .s97-menu-foot { flex-direction:column; }
  .s97-live-results { grid-template-columns:1fr 1fr; }
  .s97-search-inner { margin-top:15vh; }
  .s97-hero-content { padding-bottom:70px; }
  .s97-hero h1 { font-size:clamp(42px,16vw,var(--s97-hero-title-mobile,78px)); }
  .s97-hero-bottom { align-items:flex-start; flex-direction:column; margin-top:27px; }
  .s97-hero-bottom p { font-size:15px; }
  .s97-hero-actions { width:100%; }
  .s97-primary-link, .s97-ghost-link { min-height:48px; padding-inline:16px; font-size:13px; }
  .s97-scroll-cue { display:none; }
  .s97-section-head { padding-block:75px 26px; }
  .s97-section-head h2 { font-size:var(--s97-section-title-mobile,42px); }
  .s97-text-link { font-size:12px; }
  .s97-project-grid { --columns:var(--s97-mobile-columns,2)!important; --gap:2px!important; }
  .s97-project-card.span-2 { grid-column:1/-1; }
  .s97-project-card.visible-desktop { display:none; }
  .s97-project-card.visible-mobile { display:block; }
  .s97-project-media { min-height:0; }
  .s97-card-overlay { opacity:1; padding:12px; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72)); }
  .s97-card-title { font-size:16px; }
  .s97-card-meta, .s97-card-arrow { display:none; }
  .s97-selected { padding-bottom:90px; }
  .s97-featured-project { margin-top:50px; }
  .s97-featured-project > a, .s97-featured-project:nth-of-type(odd) > a { display:flex; flex-direction:column; align-items:stretch; gap:20px; }
  .s97-featured-project:nth-of-type(odd) .s97-featured-image { order:0; }
  .s97-featured-copy h3 { font-size:36px; }
  .s97-service-row { grid-template-columns:35px 1fr 25px; padding:22px 0; }
  .s97-service-row p { display:none; }
  .s97-service-row h3 { font-size:26px; }
  .s97-showreel { min-height:110vw; }
  .s97-showreel-copy { display:flex; flex-direction:column; align-items:flex-start; padding-bottom:30px; }
  .s97-showreel-copy h2 { font-size:43px; }
  .s97-showreel-copy button { width:90px; height:90px; }
  .s97-number-grid { grid-template-columns:1fr 1fr; }
  .s97-number-grid > div { min-height:150px; padding:20px; border-bottom:1px solid var(--s97-border); }
  .s97-number-grid strong { font-size:58px; }
  .s97-client-marquee span { min-width:180px; height:110px; }
  .s97-final-cta { min-height:75svh; }
  .s97-final-cta h2 { font-size:53px; }
  .s97-work-head { padding-top:135px; }
  .s97-work-head h1, .s97-page-hero h1 { font-size:82px; margin-block:18px 32px; }
  .s97-work-head > div { align-items:start; flex-direction:column; }
  .s97-work-controls { top:70px; }
  .s97-view-switch { display:none; }
  .s97-archive-grid.view-masonry { columns:2; }
  .s97-case-head { padding-top:130px; }
  .s97-case-head h1 { font-size:63px; margin-bottom:35px; }
  .s97-case-summary { grid-template-columns:1fr; gap:35px; }
  .s97-case-summary dl { grid-template-columns:1fr 1fr 1fr; }
  .s97-case-cover > img { min-height:100vw; }
  .s97-problem-solution { grid-template-columns:1fr; padding-block:80px; }
  .s97-credits { grid-template-columns:1fr; padding-block:80px; }
  .s97-next-project, .s97-next-project > span { min-height:60svh; }
  .s97-next-project strong { font-size:58px; }
  .s97-journal-grid { grid-template-columns:1fr; }
  .s97-article-meta { flex-wrap:wrap; }
  .s97-form-row { grid-template-columns:1fr; gap:0; }
  .s97-brief-step { min-height:560px; }
  .s97-brief-actions { flex-wrap:wrap; }
  .s97-footer-grid { grid-template-columns:1fr 1fr; padding-block:65px; }
  .s97-footer-intro { grid-column:1/-1; }
  .s97-footer-grid > div:last-child { grid-column:auto; }
  .s97-round-link { width:120px; height:120px; }
  .s97-footer-bottom { flex-wrap:wrap; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .s97-reveal { opacity:1; transform:none; }
}
@media (pointer:coarse) { .s97-cursor { display:none!important; } }