@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&display=swap');

:root{--paper:#f3f3eb;--ink:#171914;--muted:#72746c;--line:#d8d9cf;--lime:#dafa58;--font:'Manrope',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #6d8c00;outline-offset:6px}button{border:0}img{display:block;width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500}h2{letter-spacing:-2px;line-height:1.15;font-size:clamp(32px,3.5vw,52px)}em{font-family:Georgia,serif;font-weight:400}sup{font-size:9px;margin-left:3px;vertical-align:super}.wrap{width:min(1440px,calc(100% - 96px));margin-inline:auto}.header{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:13px;letter-spacing:-.3px;line-height:1.14}.brand-symbol{font-size:48px;line-height:1}.brand-dot{font-size:10px;vertical-align:top;margin-left:4px}.header nav{display:flex;gap:32px;font-size:13px;font-weight:600}.header nav a{position:relative}.header nav a:after{content:'';position:absolute;bottom:-5px;left:0;right:100%;height:2px;background:var(--ink);transition:right .2s}.header nav a:hover:after{right:0}.pill{display:inline-flex;align-items:center;justify-content:center;gap:28px;border-radius:30px;padding:15px 23px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}.pill span{font-size:21px;line-height:1}.dark{background:var(--ink);color:var(--paper)}.dark:hover{background:#343b25;transform:translateY(-2px)}.eyebrow,.section-kicker{font-size:10px;letter-spacing:1.8px;font-weight:700}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:26px}.status-dot{width:7px;height:7px;background:#748c26;border-radius:50%}.hero{padding-top:52px}.hero-grid{display:grid;grid-template-columns:1fr 300px;align-items:end;gap:45px;margin-bottom:49px}h1{font-size:clamp(52px,6.35vw,96px);line-height:1.02;letter-spacing:-5.5px;font-weight:600}.accent-word{position:relative;display:inline-block;isolation:isolate}.accent-word svg{position:absolute;width:101%;height:23px;left:0;bottom:-16px;z-index:-1;overflow:visible;fill:none;stroke:var(--lime);stroke-width:17}.hero-copy{padding-bottom:4px;font-size:16px}.hero-copy>p:first-child{font-weight:600;margin-bottom:14px;line-height:1.45}.hero-copy .muted{font-size:12px;line-height:1.85}.muted{color:var(--muted)}.text-link{display:inline-flex;gap:35px;align-items:center;border-bottom:1px solid var(--ink);padding:9px 0;font-size:12px;font-weight:700;background:transparent}.text-link span{font-size:22px}.hero-copy .text-link{margin-top:14px}.hero-visual{height:540px;position:relative;overflow:hidden;background:#926044}.hero-visual>img{width:100%;height:100%;object-fit:cover;object-position:center 47%;animation:hero-reveal 1.2s ease-out}.image-shade{position:absolute;inset:0;background:linear-gradient(transparent 50%,#000a)}.hero-visual figcaption{position:absolute;bottom:35px;left:36px;color:white;display:flex;flex-direction:column;gap:5px}.caption-top{font-size:9px;letter-spacing:1.7px}.hero-visual figcaption strong{font-size:32px;letter-spacing:-1px;font-weight:500}.hero-visual figcaption>span:last-child{font-size:11px;color:#eee}.round-link{position:absolute;right:36px;bottom:36px;width:58px;height:58px;background:var(--lime);border-radius:50%;display:grid;place-items:center;font-size:30px;transition:transform .2s}.round-link:hover{transform:rotate(45deg)}.image-index{position:absolute;right:25px;top:23px;color:white;font-size:10px;letter-spacing:2px;background:#0004;padding:6px 10px}.hero-foot{display:flex;justify-content:space-between;gap:15px;font-size:10px;padding-top:15px;color:#64685b}.hero-foot span:last-child{font-size:8px;letter-spacing:1.3px}.intro{padding-block:115px;display:grid;grid-template-columns:25% 1fr;gap:20px}.intro .section-kicker{padding-top:10px}.intro h2{font-size:clamp(32px,3.2vw,48px)}.intro-copy{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:35px;max-width:800px;color:#63665c;font-size:13px;line-height:1.9}.projects{padding-bottom:110px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px}.section-heading .section-kicker{margin-bottom:20px}.small-note{text-align:right;font-size:10px;color:var(--muted);line-height:1.7}.filters{display:flex;gap:7px;padding:28px 0 32px}.filter{background:transparent;border:1px solid var(--line);padding:8px 16px;border-radius:24px;font-size:10px;transition:background .2s}.filter:hover{background:#e5e8d8}.filter.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px 30px;align-items:start}.project-card{background:transparent;padding:0;text-align:left;min-width:0}.project-card.offset{margin-top:70px}.project-card[hidden]{display:none}.project-image{height:400px;overflow:hidden;position:relative;background:#e1e2d4}.project-image>img{height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.65,.3,1)}.project-card[data-project=splash] .project-image{background:#ffe300}.project-card[data-project=splash] img{object-fit:contain}.project-card[data-project=teacher] img{object-position:center 30%}.project-card:hover .project-image>img{transform:scale(1.04)}.project-arrow{position:absolute;right:18px;top:18px;border-radius:50%;background:var(--paper);width:36px;height:36px;display:grid;place-items:center;font-size:22px;transition:background .2s}.project-card:hover .project-arrow{background:var(--lime)}.project-label{position:absolute;left:17px;bottom:17px;font-size:8px;font-weight:700;letter-spacing:1px;padding:6px 10px;background:var(--paper);border-radius:3px}.project-info{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-top:16px}.project-info h3{font-size:17px;letter-spacing:-.5px}.project-info>span{color:var(--muted);font-size:9px;text-align:right}.services{background:var(--ink);color:var(--paper);padding-block:90px}.services .section-kicker{color:var(--lime)}.services h2{max-width:850px}.asterisk{font-size:130px;line-height:1;color:var(--lime)}.service-list{margin-top:50px}.service-list details{border-top:1px solid #41443b}.service-list details:last-child{border-bottom:1px solid #41443b}.service-list summary{display:flex;align-items:center;gap:45px;list-style:none;cursor:pointer;padding:30px 0}.service-list summary::-webkit-details-marker{display:none}.service-no{font-size:11px;color:#9ca190}.service-list h3{font-size:32px;letter-spacing:-1px}.service-plus{margin-left:auto;font-size:30px;color:var(--lime);transition:transform .2s}.service-list details[open] .service-plus{transform:rotate(45deg)}.service-body{padding:0 0 32px 61px;display:grid;grid-template-columns:1fr 1fr;gap:80px}.service-body p{font-size:13px;color:#b8beb0;max-width:510px;line-height:1.9}.tags{display:flex;flex-wrap:wrap;align-content:center;justify-content:flex-end;gap:8px}.tags span{padding:7px 13px;border:1px solid #4c5143;border-radius:20px;font-size:9px;color:#d8decd}.process{padding-block:105px}.process-intro{font-size:12px;color:var(--muted)}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:48px}.process-grid article{border-top:1px solid var(--line);padding-top:20px}.process-grid article>span{font-size:9px;letter-spacing:1.5px;color:#74796a}.process-grid h3{font-size:22px;letter-spacing:-.8px;margin:25px 0 15px}.process-grid p{font-size:12px;line-height:1.9;color:var(--muted);max-width:340px}.contact{background:var(--lime);padding:65px 0 75px}.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:70px;align-items:end;margin-top:30px}.contact h2{font-size:clamp(62px,7.4vw,105px);letter-spacing:-5px;line-height:.98}.contact-grid>div{padding-bottom:5px}.contact-grid p{font-size:16px;line-height:1.6;margin-bottom:24px}.contact small{display:block;font-size:9px;margin-top:12px;color:#475121}footer{display:flex;align-items:center;gap:30px;justify-content:space-between;padding-block:40px}footer .brand{font-size:10px}footer .brand-symbol{font-size:36px}footer p,footer>span{font-size:10px;color:var(--muted)}.back-top{border:1px solid var(--line);border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font-size:20px}.skip{position:absolute;top:-80px;left:10px;z-index:10;background:var(--lime);padding:10px}.skip:focus{top:10px}dialog{border:0;padding:0;background:var(--paper);color:var(--ink);max-height:90dvh;max-width:calc(100% - 32px);box-shadow:0 30px 100px #0004}dialog::backdrop{background:#111b;backdrop-filter:blur(6px)}body:has(dialog[open]){overflow:hidden}.dialog-close{position:absolute;z-index:2;right:15px;top:15px;width:39px;height:39px;font-size:28px;line-height:1;background:var(--paper);border:1px solid var(--line);border-radius:50%}.project-dialog{width:960px}.project-dialog>img{max-height:58dvh;object-fit:contain;background:#e6e7db}.detail-copy{padding:30px 40px}.detail-copy h2{margin:10px 0 20px;font-size:35px}.detail-copy>p{font-size:14px;max-width:730px;color:var(--muted)}.detail-copy .detail-note{font-size:10px;margin:20px 0}.brief-dialog{width:620px;padding:40px}.brief-dialog h2{margin:20px 0;font-size:42px}.brief-dialog>p{font-size:12px}.brief-dialog form{margin-top:25px;display:grid;gap:18px}.brief-dialog form>label{display:grid;gap:8px;font-size:11px;font-weight:600}.optional{display:contents;color:var(--muted);font-weight:400}.brief-dialog input:not([type=checkbox]),.brief-dialog textarea{width:100%;border:1px solid var(--line);padding:12px;background:#fff8;border-radius:0;color:var(--ink);font-size:12px}.brief-dialog textarea{resize:vertical}.brief-dialog input:focus,.brief-dialog textarea:focus{outline:2px solid #6d8c00;outline-offset:2px}.brief-dialog fieldset{margin:0;padding:0;border:0}.brief-dialog legend{font-size:11px;font-weight:600;margin-bottom:10px}.brief-options{display:flex;flex-wrap:wrap;gap:8px}.brief-options label{display:flex;align-items:center;gap:5px;font-size:10px;padding:7px 10px;border:1px solid var(--line);cursor:pointer}.brief-options input{accent-color:#455811}.brief-dialog small{font-size:9px;color:var(--muted)}#brief-status:empty{display:none}#brief-status{font-size:12px;color:#455811}.brief-dialog .pill{justify-self:start}
@keyframes hero-reveal{from{transform:scale(1.04)}to{transform:scale(1)}}
@media(min-width:1600px){h1{font-size:105px}.hero-visual{height:620px}}@media(max-width:1100px){.wrap{width:calc(100% - 56px)}h1{font-size:65px;letter-spacing:-3.5px}.hero-grid{grid-template-columns:1fr 255px;gap:25px}.hero-visual{height:470px}.project-image{height:330px}.project-info{display:block}.project-info>span{display:block;text-align:left;margin-top:4px}.intro{grid-template-columns:20% 1fr}.header nav{gap:20px}.header-cta{padding:13px 17px;font-size:11px}.service-body{gap:30px}.process-grid{gap:25px}.process-grid h3{font-size:20px}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.header{height:84px;gap:12px}.brand{font-size:10px}.brand-symbol{font-size:36px}.header nav{display:none}.header-cta{font-size:10px;gap:12px;padding:12px 15px}.hero{padding-top:35px}.eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:24px}.hero-grid{display:block;margin-bottom:30px}h1{font-size:clamp(39px,8.8vw,67px);letter-spacing:-2.5px;line-height:1.08}.accent-word svg{bottom:-12px;height:16px}.hero-copy{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;align-items:start}.hero-copy>p:first-child{font-size:14px}.hero-copy .muted{font-size:10px;line-height:1.8}.hero-copy .text-link{margin-top:0;grid-column:1/-1;justify-self:start;font-size:11px;gap:30px}.hero-visual{height:430px}.hero-visual>img{object-position:50% 50%}.hero-visual figcaption{bottom:22px;left:19px;max-width:calc(100% - 80px)}.hero-visual figcaption strong{font-size:23px;line-height:1.2}.caption-top{font-size:7px}.hero-visual figcaption>span:last-child{font-size:9px}.round-link{width:43px;height:43px;right:18px;bottom:23px;font-size:24px}.hero-foot{font-size:8px}.hero-foot span:last-child{display:none}.intro{padding-block:70px;grid-template-columns:1fr;gap:25px}.intro-copy{gap:22px;margin-top:25px;font-size:11px;line-height:1.9}.intro h2{font-size:30px;letter-spacing:-1.3px}.section-heading{display:block}.section-heading h2{font-size:34px;letter-spacing:-1.5px}.small-note{display:block;text-align:left;margin-top:15px;font-size:9px}.section-kicker{font-size:8px;letter-spacing:1.4px}.filters{padding:25px 0;gap:5px}.filter{font-size:9px;padding:8px 12px}.project-grid{gap:30px 16px}.project-image{height:245px}.project-card.offset{margin-top:40px}.project-info h3{font-size:14px;line-height:1.4}.project-info>span{font-size:8px;line-height:1.6}.project-label{font-size:6px;left:8px;bottom:9px;padding:4px 6px}.project-arrow{top:9px;right:9px;width:29px;height:29px;font-size:18px}.projects{padding-bottom:65px}.services{padding-block:60px}.asterisk{display:none}.service-list{margin-top:35px}.service-list summary{gap:20px;padding:23px 0}.service-list h3{font-size:23px;letter-spacing:-.8px}.service-no{font-size:9px}.service-body{display:block;padding:0 0 25px 33px}.service-body p{font-size:12px}.tags{justify-content:flex-start;margin-top:20px}.tags span{font-size:8px}.process{padding-block:65px}.process-intro{margin-top:20px;font-size:11px}.process-grid{margin-top:30px;grid-template-columns:1fr;gap:25px}.process-grid article{padding-top:15px}.process-grid h3{margin:12px 0 8px;font-size:22px}.process-grid p{max-width:none;font-size:12px}.process-grid article>span{font-size:8px}.contact{padding:45px 0}.contact-grid{grid-template-columns:1fr;gap:30px;margin-top:25px}.contact h2{font-size:65px;letter-spacing:-3px}.contact-grid p{font-size:14px}.contact small{font-size:8px}footer{flex-wrap:wrap;gap:20px;padding-block:30px}footer p{order:4;width:100%;font-size:9px}footer>span{margin-left:auto;font-size:8px}footer .brand{font-size:9px}footer .brand-symbol{font-size:30px}.back-top{width:32px;height:32px}.brief-dialog{padding:30px 23px}.brief-dialog h2{font-size:35px}.brief-dialog>.section-kicker{padding-right:35px;font-size:7px}.detail-copy{padding:25px}.detail-copy h2{font-size:28px}.detail-copy>p{font-size:12px}}@media(max-width:430px){.project-grid{grid-template-columns:1fr;gap:30px}.project-card.offset{margin-top:0}.project-image{height:315px}.project-info h3{font-size:18px}.project-info>span{font-size:10px}.project-label{font-size:8px}.hero-visual{height:360px}.intro-copy{grid-template-columns:1fr;gap:14px}.hero-copy{grid-template-columns:1fr}.hero-copy>p:first-child{margin-bottom:2px}.hero-copy .muted{font-size:12px}.hero-copy .text-link{margin-top:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Creative Visual Studio — full yellow art direction */
:root {
  --paper: #ffe000;
  --ink: #171914;
  --muted: #514710;
  --line: #b7a115;
  --lime: #ffe000;
}
::selection { background: var(--ink); color: var(--paper); }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline-color: var(--ink);
}
.status-dot { background: var(--ink); }
.accent-word svg { stroke: #d2ae00; }
.dark:hover { background: #393318; }
.hero-visual, .project-image, .project-dialog > img,
.project-card[data-project=splash] .project-image { background: var(--paper); }
.hero-visual figcaption, .hero-visual figcaption > span:last-child,
.image-index { color: var(--paper); }
.hero-foot, .intro-copy, .process-grid article > span,
.contact small, .service-no, .service-body p, .tags span,
#brief-status { color: var(--muted); }
.filter:hover { background: #f2cc00; }
.services { background: var(--paper); color: var(--ink); }
.services, .contact { border-top: 1px solid var(--line); }
.services .section-kicker, .asterisk, .service-plus { color: var(--ink); }
.service-list details, .service-list details:last-child,
.tags span { border-color: var(--line); }
.brief-dialog input:not([type=checkbox]), .brief-dialog textarea {
  background: #ffeb66;
  color: var(--ink);
  border-color: var(--line);
}
.brief-dialog input::placeholder, .brief-dialog textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
.brief-dialog input:focus, .brief-dialog textarea:focus {
  outline-color: var(--ink);
}
.brief-options input { accent-color: var(--ink); }

/* A dense, image-first portfolio on the studio's yellow canvas. */
.showcase { width: min(1600px, calc(100% - 64px)); padding-top: 35px; }
.showcase .section-heading { padding-bottom: 6px; }
.showcase-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.showcase .filters { flex-wrap: wrap; gap: 8px; padding: 22px 0; }
.showcase .filter { font-size: 11px; padding: 10px 16px; }
.gallery-count { flex-shrink: 0; font-size: 11px; color: var(--muted); }
.showcase .project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; }
.showcase .project-card { margin: 0; border-radius: 6px; }
.showcase .project-image { height: auto; aspect-ratio: 4 / 3; border-radius: 6px; isolation: isolate; border: 1px solid #17191418; }
.showcase .project-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.showcase .project-image.contain img { object-fit: contain; }
.showcase [data-project=teachers] img { object-position: center 24%; }
.showcase [data-project=baker] img { object-position: center 25%; }
.showcase .project-arrow { width: 32px; height: 32px; right: 12px; top: 12px; font-size: 21px; box-shadow: 0 2px 12px #0002; }
.showcase .project-label { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 8px; font-size: 7px; text-transform: uppercase; box-shadow: 0 2px 12px #0001; }
.showcase .project-info { display: block; padding: 13px 2px 0; }
.showcase .project-info h3 { font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.4px; }
.showcase .project-info > span { display: block; text-align: left; font-size: 10px; margin-top: 4px; }
.showcase-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; }
.showcase-foot p { font-size: 11px; color: var(--muted); }
.project-dialog { width: min(1180px, calc(100% - 32px)); }
.project-dialog > img { width: 100%; height: auto; max-height: 65dvh; object-fit: contain; }
.project-pagination { display: flex; align-items: center; justify-content: center; gap: 25px; padding: 14px 20px; border-block: 1px solid var(--line); }
.project-pagination button { width: 40px; height: 36px; border: 1px solid var(--ink); border-radius: 20px; background: transparent; font-size: 22px; }
.project-pagination button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.project-pagination button:disabled { opacity: .3; cursor: default; }
#project-position { min-width: 60px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .showcase .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 850px) {
 .showcase { width: calc(100% - 36px); }
 .showcase .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
 .showcase-toolbar { display: block; padding-bottom: 15px; }
 .showcase .filters { padding-bottom: 13px; }
 .showcase .filter { font-size: 10px; padding: 9px 13px; }
 .showcase-foot { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 539px) {
 .showcase { padding-top: 10px; }
 .showcase .project-grid { grid-template-columns: 1fr; gap: 28px; }
 .showcase .project-info h3 { font-size: 18px; }
 .showcase .project-info > span { font-size: 11px; }
 .showcase .project-label { font-size: 8px; }
 .project-dialog > img { max-height: 60dvh; }
}


:root { --display: 'Barlow Condensed', 'Impact', 'Arial Narrow', sans-serif; }
html { scroll-padding-top: 30px; }
body { overflow-x: clip; }
.wrap { width: min(1440px, calc(100% - 80px)); }
h1, h2 { font-family: var(--display); font-weight: 800; letter-spacing: -1.8px; }
h2 { font-size: clamp(52px, 6.5vw, 96px); line-height: .94; }
.outline-type { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.section-kicker { font-size: 10px; letter-spacing: 1.5px; }
.header { position: absolute; top: 18px; left: 40px; right: 40px; z-index: 5; height: 82px; width: auto; border: 0; color: var(--paper); }
.header .brand { font-size: 12px; }
.header .brand-symbol { font-size: 46px; }
.header nav { margin-left: auto; gap: 25px; font-family: var(--display); font-size: 20px; font-weight: 700; }
.header nav a:after { background: var(--paper); }
.header-cta { background: var(--paper); color: var(--ink); font-size: 12px; padding: 15px 22px; }
.header-cta:hover { background: var(--ink); color: var(--paper); }
.menu-toggle { display: none; }
.hero { padding: 16px 16px 0; }
.hero-stage { position: relative; height: min(76svh, 820px); min-height: 510px; border-radius: 24px; overflow: hidden; background: var(--ink); }
.hero-slides, .hero-slide, .stage-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slide { object-fit: cover; object-position: 50% 47%; opacity: 0; transition: opacity .9s ease; }
.hero-slide.is-current { opacity: 1; }
.stage-shade { background: linear-gradient(180deg, #0009, transparent 32%, transparent 55%, #000a); pointer-events: none; }
.hero-orbit { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: 128px; height: 128px; border: 1px solid #ffe000b0; border-radius: 50%; color: var(--paper); background: #17191438; backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 700; line-height: 1.35; text-align: center; transition: background .25s; }
.hero-orbit>span:last-child { font-size: 27px; line-height: 1; }
.hero-orbit:hover { background: var(--paper); color: var(--ink); }
.stage-bottom { position: absolute; bottom: 30px; left: 30px; right: 30px; display: flex; align-items: end; justify-content: space-between; gap: 20px; color: var(--paper); }
.stage-caption>span { display: block; font-size: 9px; letter-spacing: 1.5px; margin-bottom: 6px; }
.stage-caption strong { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.1; }
.slide-controls { display: flex; align-items: center; gap: 12px; }
.slide-controls button { background: transparent; color: var(--paper); border: 1px solid #ffe00070; border-radius: 50%; width: 35px; height: 35px; font-size: 18px; }
.slide-controls button:hover { background: var(--paper); color: var(--ink); }
#hero-index { font-size: 10px; font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; }
.hero-statement { position: relative; text-align: center; padding: 60px 100px 68px; }
.hero-statement h1 { font-size: clamp(70px, 8.5vw, 138px); line-height: .89; margin: 24px 0; letter-spacing: -2.5px; }
.hero-statement>p { font-size: 14px; }
.shape-burst { position: absolute; font-size: 145px; left: 12px; bottom: 50px; line-height: 1; transform: rotate(-12deg); }
.shape-ring { width: 110px; height: 110px; border: 20px solid var(--ink); border-radius: 50%; position: absolute; right: 8px; top: 100px; }
.scroll-cue { display: grid; place-items: center; width: 37px; height: 50px; border: 1px solid var(--ink); border-radius: 25px; margin: 26px auto 0; font-size: 23px; }
.discipline-strip { padding: 19px 30px; border-block: 1px solid var(--ink); display: flex; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 70px); font-family: var(--display); font-size: clamp(19px, 2.4vw, 34px); font-weight: 700; white-space: nowrap; overflow: hidden; }
.discipline-strip i { font-size: 27px; font-style: normal; }
.intro { display: block; padding-block: 100px; }
.studio-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; }
.tilted-tag { border: 1px solid var(--ink); border-radius: 30px; padding: 8px 18px; font-size: 11px; transform: rotate(4deg); }
.intro h2 { font-size: clamp(53px, 7.3vw, 105px); line-height: .97; letter-spacing: -1.7px; }
.studio-bottom { display: grid; grid-template-columns: .8fr 1.4fr; gap: 80px; margin-top: 45px; align-items: start; }
.studio-mark { display: flex; gap: 22px; align-items: center; }
.studio-mark strong { font-family: var(--display); font-size: 68px; font-weight: 800; line-height: 1; letter-spacing: -2px; }
.studio-mark strong>span { display: inline-block; font-size: 42px; vertical-align: middle; margin-left: 4px; }
.studio-mark>span { font-size: 8px; letter-spacing: 1px; }
.intro-copy { margin: 0; gap: 24px; font-size: 13px; }
.intro-copy .text-link { justify-self: start; }
.showcase { width: min(1600px, calc(100% - 48px)); padding: 60px 0 90px; border-top: 1px solid var(--ink); }
.showcase .section-heading { padding-inline: 16px; align-items: end; }
.section-heading .section-kicker { margin-bottom: 25px; }
.showcase .section-heading h2 { font-size: clamp(50px, 6.2vw, 92px); }
.showcase .small-note { font-size: 12px; color: var(--muted); }
.showcase-toolbar { margin-top: 15px; }
.showcase .filters { padding-block: 24px; }
.showcase .filter { border-color: #17191460; }
.showcase .project-grid { gap: 36px 18px; }
.showcase .project-image { border-radius: 16px; }
.showcase .project-label { border-radius: 20px; }
.showcase .project-info h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 25px; letter-spacing: -.3px; }
.showcase .project-info>span { font-size: 10px; }
.showcase-foot { margin-top: 45px; }
.services { padding-block: 80px; border-block: 1px solid var(--ink); }
.services .asterisk { font-size: 160px; }
.service-list { margin-top: 45px; }
.service-list summary { padding: 25px 0; gap: 28px; }
.service-list h3 { font-family: var(--display); font-size: clamp(33px, 4.7vw, 66px); font-weight: 700; text-transform: uppercase; letter-spacing: -.7px; }
.service-plus { font-size: 42px; }
.service-body { padding-left: 43px; }
.service-body p { color: var(--muted); }
.process { padding-block: 90px; }
.process-grid { gap: 24px; }
.process-grid article { border: 1px solid var(--ink); padding: 27px; border-radius: 18px; }
.process-grid h3 { font-family: var(--display); text-transform: uppercase; font-size: 33px; line-height: 1; font-weight: 700; margin-top: 30px; }
.process-grid p { font-size: 12px; }
.faq { padding-block: 70px 100px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.faq h2 { margin-top: 25px; font-size: clamp(40px, 4.5vw, 65px); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; font-size: 15px; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary>span { font-size: 25px; transition: transform .2s; }
.faq-list details[open] summary>span { transform: rotate(45deg); }
.faq-list p { color: var(--muted); font-size: 13px; padding-bottom: 25px; }
.contact { border-top: 1px solid var(--ink); padding: 65px 0 35px; }
.big-contact { display: flex; justify-content: space-between; width: 100%; background: transparent; align-items: center; text-align: left; margin-top: 30px; padding: 0; }
.big-contact>span:first-child { font-family: var(--display); font-size: clamp(90px, 14vw, 215px); font-weight: 800; line-height: .84; letter-spacing: -2px; }
.contact-arrow { font-size: clamp(80px, 12vw, 175px); border: 2px solid var(--ink); border-radius: 50%; width: clamp(130px, 22vw, 310px); aspect-ratio: 1; display: grid; place-items: center; transition: transform .25s, background .25s; }
.big-contact:hover .contact-arrow { background: var(--ink); color: var(--paper); transform: rotate(45deg); }
.contact-baseline { display: flex; justify-content: space-between; padding-top: 40px; font-size: 12px; gap: 25px; }
.contact-baseline>span { font-weight: 700; }
footer { border-top: 1px solid var(--line); }
.detail-copy h2, .brief-dialog h2 { font-family: var(--display); text-transform: uppercase; font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.6px; }
dialog { border-radius: 20px; }
.project-dialog>img { border-radius: 20px 20px 0 0; }
.dialog-close { border-color: var(--ink); }
.motion-enabled .reveal { opacity: .2; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.motion-enabled .reveal.in-view { opacity: 1; transform: none; }
@media (max-width: 1100px) {
 .header { left: 32px; right: 32px; gap: 20px; }
 .header nav { gap: 18px; font-size: 18px; }
 .header-cta { padding: 12px 17px; font-size: 10px; gap: 15px; }
 .shape-burst { font-size: 100px; left: 0; }
 .shape-ring { width: 80px; height: 80px; border-width: 14px; right: 0; }
 .hero-statement { padding-inline: 70px; }
 .studio-bottom { gap: 30px; }
}
@media (max-width: 760px) {
 .wrap { width: calc(100% - 36px); }
 .header { top: 12px; left: 24px; right: 24px; height: 70px; }
 .header .brand { font-size: 10px; }.header .brand-symbol { font-size: 35px; }
 .header-cta { display: none; }
 .menu-toggle { display: flex; align-items: center; gap: 10px; color: var(--ink); background: var(--paper); border-radius: 25px; padding: 10px 16px; font-size: 12px; margin-left: auto; }
 .header nav { display: none; position: absolute; left: -5px; right: -5px; top: 75px; background: var(--paper); color: var(--ink); padding: 25px; border: 1px solid var(--ink); border-radius: 16px; font-size: 28px; flex-direction: column; gap: 10px; box-shadow: 0 15px 40px #0004; }
 .header nav.is-open { display: flex; }
 .hero { padding: 10px 10px 0; }
 .hero-stage { height: 68svh; min-height: 460px; max-height: 700px; border-radius: 18px; }
 .hero-slide { object-position: 49% 50%; }
 .hero-orbit { width: 103px; height: 103px; font-size: 9px; }
 .stage-bottom { left: 18px; right: 18px; bottom: 20px; align-items: start; flex-direction: column; gap: 15px; }
 .stage-caption>span { font-size: 7px; }.stage-caption strong { font-size: 28px; }
 .slide-controls { gap: 10px; }.slide-controls button { width: 31px; height: 31px; font-size: 16px; }
 .hero-statement { padding: 40px 0 45px; width: 100%; }
 .hero-statement .section-kicker { font-size: 7px; letter-spacing: .8px; }
 .hero-statement h1 { font-size: clamp(49px, 11vw, 82px); line-height: .94; letter-spacing: -1px; margin-block: 22px; }
 .hero-statement>p { font-size: 11px; }
 .shape-burst { left: 8px; bottom: 32px; font-size: 46px; }.shape-ring { top: auto; right: 10px; bottom: 35px; width: 39px; height: 39px; border-width: 7px; }
 .outline-type { -webkit-text-stroke-width: 1px; }
 .discipline-strip { padding: 15px; gap: 16px; font-size: 18px; flex-wrap: wrap; }
 .discipline-strip i { font-size: 17px; }
 .intro { padding-block: 60px; }.studio-topline { margin-bottom: 35px; gap: 10px; }
 .tilted-tag { font-size: 8px; padding: 7px 10px; max-width: 200px; text-align: center; }
 .intro h2 { font-size: clamp(35px, 7.4vw, 58px); letter-spacing: -.6px; }
 .studio-bottom { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
 .studio-mark strong { font-size: 50px; }.studio-mark strong>span { font-size: 30px; }
 .intro-copy { font-size: 12px; grid-template-columns: 1fr 1fr; gap: 18px; }
 .showcase { width: calc(100% - 30px); padding: 45px 0 55px; }.showcase .section-heading { padding: 0; }
 .showcase .section-heading h2 { font-size: clamp(42px, 8.2vw, 62px); letter-spacing: -.6px; }
 .showcase .small-note { font-size: 10px; }.showcase .project-grid { gap: 26px 14px; }
 .showcase .project-info h3 { font-size: 24px; }.showcase .project-image { border-radius: 13px; }
 .services { padding-block: 55px; }.services h2, .process h2 { font-size: 58px; letter-spacing: -.8px; }
 .service-list h3 { font-size: clamp(28px, 6vw, 40px); letter-spacing: -.5px; }.service-list summary { gap: 14px; }.service-plus { font-size: 30px; }
 .service-body { padding-left: 28px; }.process { padding-block: 60px; }
 .process-grid { gap: 16px; }.process-grid article { padding: 23px; }.process-grid h3 { font-size: 30px; margin-top: 20px; }
 .faq { grid-template-columns: 1fr; gap: 25px; padding-block: 50px 60px; }.faq h2 { font-size: 50px; letter-spacing: -.6px; }.faq-list summary { font-size: 13px; }
 .contact { padding-top: 45px; }.contact .section-kicker { font-size: 8px; }.big-contact { gap: 15px; }.big-contact>span:first-child { font-size: clamp(74px, 16vw, 118px); letter-spacing: -.8px; }
 .contact-arrow { width: 95px; font-size: 61px; flex-shrink: 0; }.contact-baseline { flex-direction: column; gap: 10px; font-size: 10px; padding-top: 25px; }
 .detail-copy h2, .brief-dialog h2 { font-size: 37px; }
}
@media (prefers-reduced-motion: reduce) { .motion-enabled .reveal { opacity: 1; transform: none; }.hero-slide { transition: none; } }

/* Alternating yellow and black surfaces, with local contrast tokens. */
.surface-dark {
 --paper: #171914;
 --ink: #ffe000;
 --muted: #d5d0b0;
 --line: #555039;
 --lime: #ffe000;
 background: var(--paper);
 color: var(--ink);
}
.surface-dark ::selection { background: #ffe000; color: #171914; }
.surface-dark .outline-type { -webkit-text-stroke-color: #ffe000; }
.surface-dark .text-link { color: #ffe000; border-color: #ffe000; }
.surface-dark :is(a, button, summary):focus-visible { outline-color: #ffe000; }
.discipline-strip { background: #171914; color: #ffe000; border-color: #555039; }
.studio-band { border-bottom: 1px solid #555039; }
.studio-band .tilted-tag { background: #ffe000; color: #171914; border-color: #ffe000; }
.studio-band .intro-copy { color: #d5d0b0; }
.showcase { border-top: 0; }
.services.surface-dark { border-color: #555039; }
.services.surface-dark .tags span { border-color: #6f6640; color: #ffe000; }
.services.surface-dark details[open] .service-no { color: #ffe000; }
.process-grid article.surface-dark { border-color: #171914; }
.process-grid article.surface-dark :is(p, span) { color: #d5d0b0; }
.faq-band .faq { border-top: 0; }
.faq-band .faq-list summary { color: #ffe000; }
.faq-band .faq-list p { color: #d5d0b0; }
.contact { border-top: 0; }
.footer-band { border-top: 1px solid #555039; }
.footer-band footer { border-top: 0; }
.footer-band .back-top { border-color: #ffe000; }
.footer-band .back-top:hover { background: #ffe000; color: #171914; }

.showcase-band { border-block: 1px solid #555039; }
.showcase-band .showcase .filter { border-color: #ffe00070; }
.showcase-band .filter:hover:not(.active) { background: #302d16; color: #ffe000; }
.showcase-band .filter.active { background: #ffe000; color: #171914; border-color: #ffe000; }
.showcase-band .project-image { border-color: #555039; }
.showcase-band .project-arrow, .showcase-band .project-label { background: #171914; color: #ffe000; }
.showcase-band .project-card:hover .project-arrow { background: #ffe000; color: #171914; }