/* Ramptech Portfolio V1 — original art-directed stylesheet.
   PanGenerator inspired the *editorial project-first structure*, not reused assets. */
:root {
  --bg: #0A1218; --surface: #0F161F; --ink: #F4F4F6; --soft: #BCD1DC; --muted: #8A9AA6;
  --dim: #5C666E; --line: #2A3947; --paper: #F4F4F6;
  --accent: #00E8FF; --accent-2: #00B5FF; --accent-deep: #0172CC; --midnight: #0C4483;
  --brand-gradient: linear-gradient(90deg, #00B5FF, #00E8FF);
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; color:var(--ink); background:var(--bg); font-family:var(--body); -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
::selection { background:var(--accent); color:var(--bg); }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:999; padding:10px 16px; background:var(--accent); color:var(--bg); }
.skip-link:focus { top:15px; }
.scroll-progress { height:2px; width:100%; background:var(--brand-gradient); position:fixed; z-index:120; top:0; left:0; transform:scaleX(0); transform-origin:left; pointer-events:none; }
.cursor-orb { position:fixed; left:0;top:0; z-index:105; width:19px;height:19px; border:1px solid var(--accent); border-radius:50%; pointer-events:none; opacity:0; will-change:transform; transition:width .2s,height .2s,background .2s,opacity .2s; mix-blend-mode:difference; }
.cursor-active { opacity:1; }
.cursor-hover { width:48px;height:48px;background:rgba(0,232,255,.55); }
.site-header { position:fixed; top:0; left:0; right:0; height:88px; z-index:110; padding:0 clamp(20px,4.5vw,80px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(188,209,220,.14); background:rgba(10,18,24,.88); backdrop-filter:blur(17px); }
.wordmark { display:flex;align-items:center;gap:11px;white-space:nowrap; }
.brand-logo { height:52px; width:auto; }
.desktop-nav { height:100%;display:flex;align-items:stretch;gap:clamp(26px,4vw,62px); }
.desktop-nav a { display:flex;align-items:center;gap:7px;position:relative;font-weight:750;font-size:12px;letter-spacing:.12em;transition:color .2s; }
.desktop-nav a::after { content:"";position:absolute;bottom:-1px;left:0;right:100%;height:2px;background:var(--accent);transition:right .25s; }
.desktop-nav a:hover::after,.desktop-nav a.current::after { right:0; }
.desktop-nav a:hover,.desktop-nav a.current { color:var(--accent); }
.nav-count { color:var(--muted);font:10px var(--mono);align-self:baseline;margin-top:33px; }
.nav-toggle,.mobile-menu { display:none; }
.eyebrow,.hero-stamp,.hero-index,.scroll-down,.footer-kicker,.hero-bottomrule,.work-topline,.work-tags,.text-link,.section-head .eyebrow,.filter-bar,.art-label,.art-hover,.project-intro-line>span,.eyebrow-row,.project-cover figcaption,.project-facts span,.study-label,.process-rows,.next-project>span,.content-note,.footer-meta,.footer-links,.contact-config-notice { font-family:var(--mono); letter-spacing:.05em; }
.eyebrow { color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.13em; }
/* HERO */
.hero { padding:122px clamp(20px,4.5vw,80px) 0; min-height:780px; display:flex; flex-direction:column; overflow:hidden; }
.hero-stamp { padding:7px 0 14px; border-bottom:1px solid var(--line); color:var(--soft); font-size:9px; display:flex; align-items:center;gap:10px; }
.live-dot { background:var(--accent); width:6px;height:6px;border-radius:50%;box-shadow:0 0 12px var(--accent); }
.hero-stamp-right { margin-left:auto; }
.hero-columns { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr); gap:2vw;align-items:stretch;flex:1;min-height:575px; }
.hero-main { display:flex;flex-direction:column;justify-content:space-between; padding:42px 0 45px; position:relative; z-index:2; }
.hero-index { color:var(--muted);font-size:10px; }
.hero h1 { margin:34px -10vw 45px 0;z-index:1;position:relative;font-family:var(--display);font-size:clamp(5rem,10.2vw,12.3rem); font-weight:950;line-height:.82;letter-spacing:-.092em;white-space:nowrap; }
.hero h1 span { display:block; }
.text-outline { -webkit-text-stroke:1.5px var(--ink);color:transparent; }
.hero h1 .punct { display:inline;color:var(--accent);-webkit-text-stroke:0; }
.hero-bottom { display:flex;justify-content:space-between;align-items:flex-end;gap:25px; }
.hero-bottom p { max-width:300px;margin:0;line-height:1.45;font-size:clamp(16px,1.5vw,20px); }
.hero-bottom p em { font-weight:700;font-style:normal;color:var(--accent); }
.scroll-down { display:flex;gap:18px;align-items:center; white-space:nowrap;font-size:10px;font-weight:700; }
.scroll-down span { display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--dim);font-size:23px;transition:transform .2s; }
.scroll-down:hover span { transform:translateY(5px); }
.hero-visual { min-width:0;position:relative;display:flex;flex-direction:column;justify-content:center; padding:48px 0 27px; }
.hero-image {height:clamp(395px,37vw,610px);background:var(--surface); overflow:hidden;position:relative;transform:skewY(-3deg);box-shadow:26px 30px 0 rgba(0,181,255,.06); }
.hero-image img { width:100%;height:100%;object-fit:cover; filter:contrast(1.1) saturate(1.15);transform:scale(1.17) skewY(3deg); animation:hero-float 11s ease-in-out infinite alternate; }
@keyframes hero-float { from { transform:scale(1.17) translateY(0) skewY(3deg); } to { transform:scale(1.25) translateY(-13px) skewY(3deg); } }
.hero-image:after { content:"";position:absolute;inset:0;border:1px solid rgba(188,209,220,.18);pointer-events:none; }
.hero-image-caption { display:flex;justify-content:space-between;font:9px var(--mono);color:var(--muted);letter-spacing:.09em;margin-top:18px; }
.hero-bottomrule { border-top:1px solid var(--line); border-bottom:1px solid var(--line);min-height:55px; display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;color:var(--muted); }
/* WORKS */
.work-section { padding:110px clamp(20px,4.5vw,80px) 120px;scroll-margin-top:85px; }
.section-head { display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:72px; }
.section-head h2 { margin:25px 0 25px;font-family:var(--display);font-size:clamp(74px,12vw,185px);line-height:.76;letter-spacing:-.092em;font-weight:900; }
.section-head h2 em { font-style:normal;color:var(--accent); }
.section-head p {max-width:560px;color:var(--soft);line-height:1.6;font-size:16px;margin:0; }
.works-total { white-space:nowrap;display:flex;align-items:baseline;gap:10px; }
.works-total>span { font:800 clamp(55px,7vw,112px)/1 var(--display);letter-spacing:-.07em; }
.works-total small { font:10px var(--mono);color:var(--muted); }
.filter-bar { display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--dim);border-bottom:1px solid var(--dim);gap:24px;padding:18px 0; margin-bottom:32px; }
.filter-intro { flex:0 0 auto;font-size:10px;color:var(--soft);white-space:nowrap; }
.filter-intro span { color:var(--accent);font-size:16px;margin-left:10px; }
.filter-controls { display:flex;gap:5px;flex-wrap:wrap;justify-content:end; }
.filter-controls button { border:1px solid transparent;background:transparent;color:var(--soft);font:11px var(--mono);padding:10px 15px;transition:all .2s; }
.filter-controls button:hover {color:var(--ink);border-color:var(--dim); }
.filter-controls button.active { background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:700; }
.work-list { display:flex;flex-direction:column;gap:0; }
.work-card { display:grid;grid-template-columns:41% 59%;min-height:610px;gap:0;border-bottom:1px solid var(--line); padding:64px 0 72px; }
.work-card.is-reverse { grid-template-columns:59% 41%; }
.work-card.is-reverse .work-art { grid-column:1;grid-row:1;margin-right:3.5vw;margin-left:0; }
.work-card.is-reverse .work-text { grid-column:2;grid-row:1; }
.work-text { display:flex;flex-direction:column;padding:5px 3.5vw 0 0;min-width:0; }
.work-card.is-reverse .work-text { padding-left:3.5vw;padding-right:0; }
.work-topline {display:flex;gap:12px;justify-content:space-between;font-size:10px;letter-spacing:.075em;color:var(--muted); }
.work-topline span:first-child {color:var(--project-accent); }
.work-heading {margin-top:clamp(52px,8.5vw,138px); }
.work-heading h3 { max-width:600px; margin:0 0 15px;font-family:var(--display); font-size:clamp(63px,7.3vw,122px);line-height:.82;letter-spacing:-.083em; font-weight:900;overflow-wrap:anywhere; }
.work-heading h3 a {transition:color .2s;}
.work-heading h3 a:hover {color:var(--project-accent);}
.work-subtitle { margin:0;font-size:clamp(19px,1.8vw,28px);font-weight:650;letter-spacing:-.035em;line-height:1.14;max-width:410px; }
.work-excerpt { font-size:13px;line-height:1.65;color:var(--soft);max-width:380px;margin:30px 0 20px; }
.work-tags {display:flex;flex-wrap:wrap;gap:7px;color:var(--soft); }
.work-tags span {border:1px solid var(--dim);padding:7px 9px; font-size:9px; }
.text-link { display:inline-flex;align-items:center;align-self:flex-start;gap:15px;border-bottom:1px solid var(--ink);padding:10px 0 11px;margin-top:auto; font-size:10px; font-weight:700;letter-spacing:.09em;transition:color .2s, gap .2s; }
.text-link:hover {color:var(--project-accent,var(--accent)); gap:21px; }
.link-plus {font-size:23px;font-weight:400;line-height:.5; }
.text-link span:last-child {font-size:16px;margin-left:12px;}
.work-art {position:relative;display:block;overflow:hidden;min-width:0;margin-left:3.5vw;min-height:515px; background:var(--surface);align-self:stretch; }
.work-art img {width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transform:scale(1.015);transition:transform .8s cubic-bezier(.17,.67,.22,1),filter .8s; }
.work-art:hover img {transform:scale(1.075);filter:brightness(.8); }
.art-label {position:absolute;left:20px;bottom:20px;right:20px;color:var(--ink);display:flex;justify-content:space-between;font-size:10px;text-shadow:0 1px 8px var(--bg); }
.art-label span {font-size:22px;}
.art-hover {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);background:var(--project-accent);color:var(--bg); width:124px;height:124px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:13px;font-weight:700;line-height:1.4;opacity:0;transition:opacity .3s,transform .4s; }
.work-art:hover .art-hover {opacity:1;transform:translate(-50%,-50%) scale(1);}
/* STATEMENT AND SERVICES */
.manifesto {background:var(--brand-gradient);color:var(--bg);padding:104px clamp(20px,4.5vw,80px) 112px;position:relative;min-height:590px; }
.manifesto .eyebrow {color:var(--midnight); }
.manifesto p {font-family:var(--display);font-size:clamp(54px,8.65vw,145px);line-height:.91;letter-spacing:-.08em;font-weight:900;margin:66px 0 0; }
.manifesto p span {-webkit-text-stroke:1.4px var(--bg);color:transparent; }
.manifesto p em {font-style:normal;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.075em; }
.round-arrow {position:absolute;right:5%;bottom:11%;border:2px solid var(--bg);border-radius:50%;width:90px;height:90px;display:grid;place-items:center;font-size:37px;transition:transform .25s,background .25s; }
.round-arrow:hover {transform:rotate(45deg);background:var(--ink);}
.what-we-do {background:var(--paper);color:var(--surface);display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:125px clamp(20px,4.5vw,80px) 130px; }
.what-intro h2 {font:900 clamp(58px,6.2vw,109px)/.91 var(--display);letter-spacing:-.08em;margin:27px 0 24px; }
.what-intro .eyebrow {color:var(--dim); }
.what-intro p { max-width:390px;line-height:1.65;font-size:15px;color:var(--dim); }
.dark-link {border-color:var(--surface);color:var(--surface);margin-top:35px; }
.services>div { border-top:1px solid var(--soft); display:grid;grid-template-columns:52px 1fr; gap:8px 14px;padding:28px 0 34px; }
.services>div:last-child {border-bottom:1px solid var(--soft);}
.services>div>span {font:11px var(--mono);color:var(--dim);margin-top:7px;}
.services strong {font:800 clamp(22px,2.5vw,34px)/1.04 var(--display);letter-spacing:-.05em;}
.services small {grid-column:2;color:var(--dim);font-size:12px;margin-top:8px;}
/* FOOTER */
.site-footer {background:var(--surface);color:var(--ink);padding:95px clamp(20px,4.5vw,80px) 35px; }
.footer-kicker {font-size:11px;color:var(--accent); }
.footer-head {display:block;font:950 clamp(90px,14.5vw,235px)/1.15 var(--display);letter-spacing:-.095em;border-bottom:1px solid var(--dim); padding-bottom:40px;margin:8px 0 30px;transition:color .2s; }
.footer-head:hover {color:var(--accent); }
.footer-head span { font-size:.48em;vertical-align:top;float:right;margin-top:14px; }
.footer-meta {display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:9px;color:var(--muted);line-height:1.6; }
.footer-links {margin-top:35px;display:flex;gap:27px;font-size:10px;color:var(--soft); }
.footer-links a:hover {color:var(--accent);}
/* DETAIL PAGE */
.project-page {padding-top:88px; }
.project-intro {padding:57px clamp(20px,4.5vw,80px) 65px; }
.eyebrow-row {display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--dim);padding-bottom:22px;font-size:11px;color:var(--soft); }
.eyebrow-row a:hover {color:var(--project-accent); }
.project-intro h1 {font:900 clamp(80px,15vw,240px)/.9 var(--display);letter-spacing:-.105em;margin:72px 0 40px;overflow-wrap:anywhere; }
.title-star {font-size:.19em;vertical-align:top;letter-spacing:0;margin-left:12px;color:var(--project-accent);}
.project-intro-line {display:flex;justify-content:space-between;gap:30px;align-items:end; }
.project-intro-line h2 {max-width:780px;margin:0;font-size:clamp(23px,3vw,45px);line-height:1.1;letter-spacing:-.045em; }
.project-intro-line>span {max-width:230px;text-align:right;color:var(--muted);font-size:10px;line-height:1.6; }
.project-cover {margin:0; height:min(75vw,850px);position:relative; }
.project-cover img {width:100%;height:100%;object-fit:cover;}
.project-cover figcaption {position:absolute;right:4.5%;bottom:30px;font-size:10px;color:var(--ink);text-shadow:0 2px 15px var(--bg); }
.project-overview {display:grid;grid-template-columns:31% 1fr;gap:6vw;padding:130px clamp(20px,4.5vw,80px); }
.project-facts>div {border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;padding:20px 0 25px; }
.project-facts>div:last-child {border-bottom:1px solid var(--line); }
.project-facts span {color:var(--muted);font-size:10px; }
.project-facts strong {font-size:15px;line-height:1.35;font-weight:550; }
.project-story h2 {font:730 clamp(26px,4.5vw,65px)/1.07 var(--body);letter-spacing:-.055em;margin:27px 0 25px;max-width:1000px; }
.project-story p {font-size:17px;max-width:780px;color:var(--soft);line-height:1.75; }
.detail-tags {margin-top:35px; }
.study-detail {padding:0 clamp(20px,4.5vw,80px) 90px; }
.study-visual {height:min(53vw,640px);overflow:hidden;background:var(--surface);}
.study-visual img {width:100%;height:100%;object-fit:cover;object-position:50% 43%;filter:saturate(.8);transform:scale(1.23);}
.study-label {display:flex;justify-content:space-between;gap:25px;font-size:10px;color:var(--muted);padding-top:14px;}
.process-panel {padding:90px clamp(20px,4.5vw,80px) 125px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--paper);color:var(--surface); }
.process-panel .eyebrow {color:var(--dim); }
.process-panel h2 {font:900 clamp(53px,6vw,92px)/.92 var(--display);letter-spacing:-.075em;margin:30px 0; }
.process-row {border-bottom:1px solid var(--soft);display:grid;grid-template-columns:40px 1fr 25px;gap:12px;padding:28px 0;align-items:center; }
.process-row:first-child {border-top:1px solid var(--soft); }
.process-row span {font-size:11px;color:var(--dim); }
.process-row strong {font-size:18px;font-weight:650; }
.process-row span:last-child {font-size:20px;color:var(--surface);text-align:right; }
.next-project {padding:105px clamp(20px,4.5vw,80px) 120px; }
.next-project>span {color:var(--accent);font-size:11px;}
.next-project a {display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--dim);padding:12px 0 45px; font:900 clamp(62px,11vw,180px)/.95 var(--display);letter-spacing:-.075em;transition:color .2s; }
.next-project a:hover {color:var(--accent); }
.next-project a span {font-size:.5em; }
/* STUDIO / CONTACT */
.interior-page {padding-top:88px; }
.interior-hero {min-height:690px;padding:80px clamp(20px,4.5vw,80px) 62px;display:flex;flex-direction:column;justify-content:space-between; }
.interior-hero h1 {font:950 clamp(90px,13.2vw,210px)/.81 var(--display);letter-spacing:-.09em;margin:50px 0; }
.interior-hero h1 em {-webkit-text-stroke:1.6px var(--ink);color:transparent;font-style:normal; }
.accent-punctuation {color:var(--accent); }
.interior-hero-bottom {border-top:1px solid var(--dim);padding-top:24px;display:flex;justify-content:space-between;gap:30px;align-items:start; }
.interior-hero-bottom>span {font:11px var(--mono);color:var(--soft); }
.interior-hero-bottom p {font-size:19px;font-weight:550;line-height:1.4;max-width:500px;margin:0;letter-spacing:-.03em; }
.about-break {display:grid;grid-template-columns:1fr 1fr;background:var(--paper);color:var(--surface); }
.about-figure {min-height:710px;overflow:hidden;background:var(--surface); }
.about-figure img {width:100%;height:100%;object-fit:cover; }
.about-copy {padding:115px 7vw 80px;display:flex;flex-direction:column;justify-content:center; }
.about-copy .eyebrow {color:var(--dim);}
.about-copy h2 {font:900 clamp(40px,5.2vw,85px)/.98 var(--display);letter-spacing:-.075em;margin:22px 0 36px; }
.about-copy p {font-size:16px;line-height:1.65;color:var(--dim);max-width:550px; }
.about-copy .content-note {margin-top:20px;border-top:1px solid var(--soft);padding-top:14px;font-size:11px; }
.expertise {padding:130px clamp(20px,4.5vw,80px) 160px; }
.expertise h2 {font:900 clamp(77px,11vw,170px)/.84 var(--display);letter-spacing:-.08em;margin:29px 0 85px; }
.expertise-table>div {border-top:1px solid var(--line);display:grid;grid-template-columns:8% 1fr 32%;align-items:center;gap:20px;padding:30px 0; }
.expertise-table>div:last-child {border-bottom:1px solid var(--line); }
.expertise-table div span {font:11px var(--mono);color:var(--soft); }
.expertise-table strong {font:800 clamp(22px,3vw,45px)/1 var(--display);letter-spacing:-.04em; }
/* Contact */
.contact-hero {min-height:680px; }
.contact-hero h1 {font-size:clamp(78px,12vw,195px);}
.contact-main {background:var(--paper);color:var(--surface);display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:120px clamp(20px,4.5vw,80px) 145px; }
.contact-left .eyebrow {color:var(--dim); }
.contact-left h2 {font:900 clamp(61px,6.5vw,108px)/.94 var(--display);letter-spacing:-.085em;margin:28px 0 24px; }
.contact-left>p {max-width:460px;font-size:17px;line-height:1.6;color:var(--dim); }
.contact-config-notice {margin-top:95px;max-width:480px;padding:22px;border:1px solid var(--soft);background:#E3ECF1;font-size:11px;line-height:1.6; }
.contact-config-notice strong {font-size:12px; }
.contact-config-notice p {margin:6px 0 0; }
.contact-config-notice code {background:#D3E0E8;padding:2px 4px;}
.contact-form {display:flex;flex-direction:column; }
.contact-form label {font:11px var(--mono);font-weight:700;letter-spacing:.09em;margin:7px 0 13px; }
.contact-form label span {color:var(--accent-deep); }
.contact-form input,.contact-form select,.contact-form textarea {border:none;border-bottom:1px solid var(--soft);border-radius:0;background:transparent;color:var(--surface);padding:14px 0 19px;font-size:19px;outline:none;margin-bottom:38px;min-width:0; }
.contact-form :is(input,select,textarea):focus {border-color:var(--surface);box-shadow:0 1px var(--surface); }
.contact-form input::placeholder,.contact-form textarea::placeholder {color:var(--muted); }
.contact-form textarea {resize:vertical; }
.submit-button {border:1px solid var(--surface);background:var(--surface);color:var(--ink);display:flex;justify-content:space-between;align-items:center;padding:22px 24px;font:700 12px var(--mono);letter-spacing:.08em;transition:background .2s,color .2s; }
.submit-button span {font-size:22px; }
.submit-button:hover {background:var(--accent);color:var(--bg); }
.contact-status {min-height:36px;font-size:12px;color:var(--dim);line-height:1.5; }
.message-preview {border:1px solid var(--soft);padding:20px !important;min-height:160px;font:13px var(--mono) !important; }
.copy-button {align-self:flex-start;border:0;border-bottom:1px solid;background:none;padding:10px 0;font:11px var(--mono); }
/* DECK CONTENT */
.work-heading h3 { font-size:clamp(44px,4.8vw,84px);line-height:.88;letter-spacing:-.06em; }
.work-art img { object-position:50% 40%; }
.manifesto-sub { max-width:620px;margin-top:40px;font:600 clamp(17px,1.5vw,22px)/1.5 var(--body);letter-spacing:-.01em; }
.brands { padding:110px clamp(20px,4.5vw,80px) 120px;border-top:1px solid var(--line); }
.brands h2 { font:900 clamp(56px,8vw,130px)/.84 var(--display);letter-spacing:-.08em;margin:25px 0 60px; }
.brand-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line); }
.brand-grid span { display:flex;align-items:center;justify-content:center;min-height:120px;padding:20px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font:800 clamp(17px,1.6vw,24px)/1.1 var(--display);letter-spacing:-.02em;color:var(--soft);transition:color .2s,background .2s; }
.brand-grid span:hover { color:var(--bg);background:var(--brand-gradient); }
.partners h2 { margin-bottom:28px; }
.partners-intro { max-width:640px;color:var(--soft);font-size:17px;line-height:1.65;margin:0 0 56px; }
.brand-grid span { flex-direction:column;gap:10px; }
.brand-grid small { font:10px var(--mono);letter-spacing:.1em;color:var(--muted);transition:color .2s; }
.brand-grid span:hover small { color:var(--bg); }
.project-intro h1 { font-size:clamp(56px,8.5vw,150px);letter-spacing:-.07em; }
.project-cover { background:var(--surface); }
.project-cover img { object-fit:contain; }
.video-link { margin-top:10px; }
.project-gallery { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:0 clamp(20px,4.5vw,80px) 90px; }
.project-gallery img { width:100%;aspect-ratio:4/3;object-fit:cover; }
.expertise-note { max-width:620px;color:var(--soft);line-height:1.65;font-size:16px;margin:-45px 0 70px; }
.contact-direct { margin-top:60px;max-width:480px;display:flex;flex-direction:column;gap:18px; }
.contact-direct a { display:flex;justify-content:space-between;gap:20px;padding-bottom:12px;border-bottom:1px solid var(--surface);font:800 clamp(18px,1.8vw,26px)/1.2 var(--display);letter-spacing:-.02em;transition:color .2s; }
.contact-direct a:hover { color:var(--accent-deep); }
.playground { padding:110px clamp(20px,4.5vw,80px) 120px;border-top:1px solid var(--line); }
.playground h2 { font:900 clamp(56px,8vw,130px)/.84 var(--display);letter-spacing:-.08em;margin:25px 0 24px; }
.playground-intro { font:11px var(--mono);letter-spacing:.08em;color:var(--soft);margin:0 0 56px; }
.play-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px; }
.play-card { display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); }
.play-media { display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:4/3;overflow:hidden;background:var(--bg); }
.play-media.is-single { grid-template-columns:1fr; }
.play-media img { width:100%;height:100%;object-fit:cover;transition:transform .6s; }
.play-card:hover .play-media img { transform:scale(1.04); }
.play-body { display:flex;flex-direction:column;gap:16px;padding:24px 24px 26px;flex:1; }
.play-cat { font:10px var(--mono);letter-spacing:.1em;color:var(--accent); }
.play-body h3 { margin:0;font:900 clamp(24px,2.2vw,34px)/1 var(--display);letter-spacing:-.04em; }
.play-body .text-link { margin-top:auto; }
.founder { display:grid;grid-template-columns:1fr 1.15fr;gap:7vw;padding:120px clamp(20px,4.5vw,80px);border-bottom:1px solid var(--line); }
.founder h2 { font:900 clamp(48px,6vw,100px)/.88 var(--display);letter-spacing:-.07em;margin:24px 0 20px; }
.founder-role { font:11px var(--mono);letter-spacing:.08em;color:var(--accent); }
.founder-copy { align-self:end; }
.founder-copy p { font-size:18px;line-height:1.7;color:var(--soft);margin:0 0 20px;max-width:620px; }
.founder-copy p:first-child { font-size:clamp(22px,2.2vw,30px);line-height:1.3;color:var(--ink);font-weight:650;letter-spacing:-.03em; }
.hero-image img { object-position:50% 35%; }
.next-project a { font-size:clamp(52px,7.5vw,140px); }
@media (max-width:779px) {
  .playground { padding:85px 20px 95px; }
  .founder { display:block;padding:85px 20px; }
  .founder-copy { margin-top:40px; }
  .brands { padding:85px 20px 95px; }
  .brand-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .brand-grid span { min-height:90px; }
  .expertise-note { margin:-30px 0 50px; }
  .contact-direct { margin-top:40px; }
}
/* REVEALS */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity:0; transform:translateY(32px); transition:opacity .7s ease,transform .7s ease; }
  [data-reveal].is-visible { opacity:1;transform:translateY(0); }
}
/* TABLET */
@media (max-width:1130px) {
  .hero h1 {font-size:clamp(75px,9.4vw,140px);}
  .hero-main {padding-bottom:34px;}
  .hero-columns {grid-template-columns:1.1fr .9fr;}
  .work-card {min-height:530px;}
  .work-art {min-height:460px;}
  .work-heading {margin-top:60px;}
  .work-heading h3 {font-size:clamp(61px,7vw,93px);}
  .what-we-do {gap:5vw;}
  .footer-head {font-size:clamp(85px,14vw,140px);}
}
/* MOBILE */
@media (max-width:779px) {
  .site-header {height:72px;padding:0 20px;}
  .brand-logo {height:42px;}
  .desktop-nav {display:none;}
  .nav-toggle {display:flex;flex-direction:column;justify-content:center;gap:7px;width:43px;height:43px;background:transparent;border:1px solid var(--dim);padding:10px;}
  .nav-toggle span {width:100%;height:1px;background:var(--ink);transition:transform .2s;}
  .nav-toggle[aria-expanded="true"] span:first-child {transform:translateY(4px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:last-child {transform:translateY(-4px) rotate(-45deg);}
  .mobile-menu:not([hidden]) {display:flex;position:fixed;top:72px;left:0;right:0;bottom:0;z-index:90;background:var(--bg);padding:40px 20px 45px;flex-direction:column;gap:9px;}
  .mobile-menu a {border-bottom:1px solid var(--line);font:850 clamp(52px,12vw,75px) var(--display);letter-spacing:-.065em;padding:15px 0;}
  .mobile-menu a sup {font:14px var(--mono);color:var(--accent);vertical-align:top;}
  .mobile-menu-bottom {margin-top:auto;font:11px var(--mono);color:var(--soft);}
  .hero {padding:95px 20px 0;min-height:0;}
  .hero-stamp {font-size:8px;line-height:1.4;}
  .hero-stamp-right {display:none;}
  .hero-columns {display:block;min-height:0;}
  .hero-main {padding:30px 0 22px;}
  .hero-index {font-size:9px;}
  .hero h1 {font-size:clamp(58px,13.3vw,109px);margin:65px -5px 45px 0;letter-spacing:-.095em;}
  .hero-bottom {align-items:end;}
  .hero-bottom p {font-size:16px;max-width:250px;}
  .scroll-down {font-size:0;gap:0;}
  .scroll-down span {font-size:20px;width:37px;height:37px;}
  .hero-visual {padding:15px 0 24px;}
  .hero-image {height:75vw;transform:none;}
  .hero-image img {transform:scale(1.08);animation:none;}
  .hero-image-caption {font-size:8px;}
  .hero-bottomrule {min-height:65px;font-size:8px;line-height:1.45;}
  .hero-bottomrule span:first-child {max-width:220px;}
  .work-section {padding:90px 20px;scroll-margin-top:72px;}
  .section-head {align-items:end;margin-bottom:36px;}
  .section-head h2 {font-size:clamp(72px,16vw,120px);margin:19px 0 21px;}
  .section-head p {font-size:13px;max-width:300px;}
  .works-total {display:none;}
  .filter-bar {display:block;}
  .filter-intro {margin-bottom:14px;}
  .filter-controls {justify-content:flex-start;gap:6px;}
  .filter-controls button {font-size:9px;padding:9px 10px;}
  .work-card,.work-card.is-reverse {display:flex;flex-direction:column;min-height:0;padding:42px 0 53px;}
  .work-card .work-text,.work-card.is-reverse .work-text {padding:0;order:2;}
  .work-card .work-art,.work-card.is-reverse .work-art {margin:0 0 27px;order:1;min-height:0;height:69vw;}
  .work-heading {margin-top:39px;}
  .work-heading h3 {font-size:clamp(70px,14vw,110px);max-width:none;}
  .work-subtitle {font-size:21px;max-width:500px;}
  .work-excerpt {font-size:13px;margin:18px 0;max-width:510px;}
  .work-topline {font-size:9px;}
  .text-link {margin-top:28px;}
  .art-label {font-size:9px;left:14px;bottom:12px;right:14px;}
  .art-hover {display:none;}
  .manifesto {padding:73px 20px 100px;min-height:0;}
  .manifesto p {font-size:clamp(49px,10.1vw,85px);margin:61px 0 42px;}
  .round-arrow {position:static;width:58px;height:58px;font-size:28px;margin-left:auto;}
  .what-we-do {display:block;padding:90px 20px 110px;}
  .what-intro h2 {font-size:clamp(57px,12vw,90px);}
  .services {margin-top:75px;}
  .services strong {font-size:27px;}
  .site-footer {padding:75px 20px 28px;}
  .footer-head {font-size:clamp(67px,14vw,125px);margin-top:22px;padding-bottom:45px;}
  .footer-head span {font-size:.36em;}
  .footer-meta {flex-direction:column;gap:8px;}
  .footer-links {gap:19px;font-size:9px;flex-wrap:wrap;}
  .project-page,.interior-page {padding-top:72px;}
  .project-intro {padding:40px 20px 42px;}
  .eyebrow-row {font-size:9px;}
  .project-intro h1 {font-size:clamp(72px,14vw,145px);margin:58px 0 36px;}
  .project-intro-line {display:block;}
  .project-intro-line h2 {font-size:26px;}
  .project-intro-line>span {display:block;text-align:left;margin-top:15px;}
  .project-cover {height:78vw;}
  .project-cover figcaption {font-size:8px;right:20px;bottom:15px;}
  .project-overview {display:flex;flex-direction:column;gap:70px;padding:80px 20px;}
  .project-facts {display:grid;grid-template-columns:1fr 1fr;gap:0 25px;}
  .project-facts strong {font-size:13px;}
  .project-story h2 {font-size:clamp(29px,7vw,46px);}
  .project-story p {font-size:15px;}
  .study-detail {padding:0 20px 75px;}
  .study-visual {height:67vw;}
  .study-label {font-size:8px;line-height:1.5;}
  .process-panel {display:block;padding:85px 20px 110px;}
  .process-panel h2 {font-size:clamp(58px,12vw,92px);}
  .process-rows {margin-top:60px;}
  .next-project {padding:80px 20px 100px;}
  .next-project a {font-size:clamp(68px,13vw,122px);padding-bottom:30px;}
  .interior-hero {min-height:630px;padding:65px 20px 50px;}
  .interior-hero h1 {font-size:clamp(71px,13vw,132px);}
  .interior-hero-bottom {display:block;}
  .interior-hero-bottom>span {font-size:9px;}
  .interior-hero-bottom p {font-size:18px;margin-top:17px;max-width:520px;}
  .about-break {display:block;}
  .about-figure {min-height:0;height:81vw;}
  .about-copy {padding:85px 20px;}
  .about-copy h2 {font-size:clamp(55px,10vw,82px);}
  .expertise {padding:95px 20px 110px;}
  .expertise h2 {font-size:clamp(63px,12vw,100px);margin-bottom:60px;}
  .expertise-table>div {grid-template-columns:32px 1fr;gap:8px;padding:21px 0;}
  .expertise-table strong {font-size:24px;}
  .expertise-table>div>span:last-child {grid-column:2;}
  .contact-hero {min-height:620px;}
  .contact-hero h1 {font-size:clamp(65px,11.5vw,115px);}
  .contact-main {display:block;padding:85px 20px 100px;}
  .contact-left h2 {font-size:clamp(59px,11vw,90px);}
  .contact-config-notice {margin-top:35px;}
  .contact-form {margin-top:75px;}
  .contact-form input,.contact-form select,.contact-form textarea {font-size:17px;}
}
@media (max-width:400px) {
  .hero h1 {font-size:13.4vw;}
  .work-heading h3 {font-size:14vw;}
  .hero-bottomrule {font-size:7px;}
  .filter-controls button {font-size:8px;padding:9px 8px;}
  .footer-head {font-size:14vw;}
}
/* Long words must fit a 375px screen; kept last so it wins over the MOBILE block */
@media (max-width:779px) {
  .interior-hero h1,.contact-hero h1 {font-size:clamp(46px,13vw,132px);}
  .contact-left h2 {font-size:clamp(38px,10.5vw,90px);}
  .about-copy h2 {font-size:clamp(38px,10vw,82px);}
  .expertise h2 {font-size:clamp(44px,11.5vw,100px);}
  .project-intro h1 {font-size:clamp(42px,11vw,145px);overflow-wrap:normal;}
  .work-heading h3 {font-size:clamp(40px,11vw,110px);overflow-wrap:normal;}
  .next-project a {font-size:clamp(36px,10vw,122px);}
  .founder h2 {font-size:clamp(44px,12vw,100px);}
}
/* Tidier small screens: compact work cards, shorter interior heroes, aligned footer links */
@media (max-width:779px) {
  .work-card,.work-card.is-reverse {padding:32px 0 40px;}
  .work-card .work-art,.work-card.is-reverse .work-art {height:62vw;margin-bottom:20px;}
  .work-heading {margin-top:22px;}
  .work-heading h3 {font-size:clamp(34px,9.6vw,64px);line-height:.95;}
  .work-subtitle {font-size:18px;margin-top:10px;}
  .text-link {margin-top:22px;}
  .interior-hero,.contact-hero {min-height:0;gap:56px;}
  .interior-hero h1 {margin:24px 0 8px;}
  .footer-links {row-gap:14px;}
}
/* Tablet portrait: two-column work grid instead of one very tall column */
@media (min-width:600px) and (max-width:779px) {
  .work-list {display:grid;grid-template-columns:1fr 1fr;column-gap:24px;}
  .work-card .work-art,.work-card.is-reverse .work-art {height:auto;aspect-ratio:4/3;}
  .work-heading h3 {font-size:clamp(28px,4.6vw,38px);}
  .work-subtitle {font-size:16px;}
  .work-excerpt {display:none;}
  .work-card .work-text {flex:1;}
  .work-card .work-tags {margin-bottom:22px;}
  .work-card .text-link {margin-top:auto;}
}
/* Small laptops / landscape tablets: the text column is narrow, so keep words whole */
@media (min-width:780px) and (max-width:1130px) {
  .work-heading h3 {font-size:clamp(36px,4.6vw,52px);line-height:.92;overflow-wrap:normal;}
  .work-card {min-height:0;}
  .work-art {min-height:420px;}
}
/* Headline full stops: the tight display tracking pulls them into the last letter, so give them air */
.dot {margin-left:.06em;}
.accent-punctuation {margin-left:.12em;}
.hero h1 .punct {margin-left:.17em;} /* the K's open leg reaches the baseline */
/* Work and playground images rest in black & white and show their real colours on hover
   (mouse devices only, so touch screens keep the real colours) */
@media (hover:hover) {
  .work-art img,.play-media img {filter:grayscale(1);transition:transform .8s cubic-bezier(.17,.67,.22,1),filter .8s;}
  .work-art:hover img,.work-art:focus-visible img {filter:grayscale(0) brightness(.8);}
  .play-card:hover .play-media img {filter:grayscale(0);}
}
/* Hover states always use the brand cyan: some project accents are near-white and gave no visible change */
.work-heading h3 a:hover,.work-card .text-link:hover {color:var(--accent);}
.art-hover {background:var(--accent);}
.footer-links a {display:inline-flex;align-items:center;gap:4px;line-height:1;}
@media (prefers-reduced-motion:reduce) { html {scroll-behavior:auto;}*,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;} }