@charset "UTF-8";
:root { color-scheme: light; --teal:#106e70; --teal-deep:#084c50; --teal-soft:#deece7; --burgundy:#713e40; --intro-background:#663638; --intro-ink:var(--champagne-gold); --intro-gold:var(--champagne-gold); --champagne-gold:#d8b45b; --antique-gold:#bd963e; --cream:#fcf8f0; --paper:#f3eee4; --ink:#283c38; --muted:#68716a; --line:#253c3829; --sans:"Manrope",Arial,sans-serif; --serif:"Instrument Serif",Georgia,serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:95px; }
/* Keep native scrolling while hiding the visual scrollbar. */
html,body,.media-viewer,.gallery-thumbnails,.work-viewport { scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar,.media-viewer::-webkit-scrollbar,.gallery-thumbnails::-webkit-scrollbar,.work-viewport::-webkit-scrollbar { display:none; width:0; height:0; }
body { margin:0; background:var(--cream); color:var(--ink); font:15px/1.75 var(--sans); -webkit-font-smoothing:antialiased; }
body.nav-open,body.viewer-open { overflow:hidden; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
a { color:inherit; }
figure,h1,h2,h3,p { margin:0; }
button { color:inherit; }
::selection { background:var(--champagne-gold); color:var(--teal-deep); }
:focus-visible { outline:2px solid var(--antique-gold); outline-offset:6px; }
[hidden] { display:none!important; }
.skip-link { position:fixed; z-index:1500; top:12px; left:12px; padding:12px 20px; background:var(--cream); color:var(--ink); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.intro-screen { display: none; }
html.intro-active .intro-screen {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
}
/* A quiet architectural scene, revealed on one shared animation clock. */
.entry-aperture { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: center bottom; will-change: transform; }
.entry-aperture:not([viewBox]) { background: var(--intro-background); }
.entry-surround { fill: var(--intro-background); }
.entry-frame-band { fill: var(--intro-gold); opacity: .09; }
.entry-cutout-motion, .entry-architecture { transform: translateY(78vh); }
html.intro-active { overflow: hidden; }
.entry-rim, .entry-frame, .entry-flutes, .entry-threshold, .entry-finials { fill: none; stroke: var(--intro-gold); stroke-width: 1; }
.entry-rim { stroke-width: 1.2; opacity: .9; }
.entry-frame-outer { opacity: .55; stroke-width: .8; }
.entry-frame-inner { opacity: .35; stroke-width: .7; }
.entry-flutes { opacity: .14; }
.entry-threshold { opacity: .38; }
.entry-finials { fill: var(--intro-gold); stroke-width: .5; opacity: .7; }
.intro-signature { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.intro-lettering { transform-origin: center; }
.entry-welcome { display: block; margin-bottom: 1.1rem; color: var(--intro-ink); font: italic 400 clamp(18px, 2vw, 26px)/1.3 "Cormorant Garamond", Georgia, serif; }
.entry-wordmark { display: block; width: min(78vw, 540px, 125vh); height: auto; max-height: 30vh; margin: 0 auto 1.2rem; }
.entry-gold-fill { transform: translate(-160px, 34px); transform-box: view-box; transform-origin: 0 0; will-change: transform; }
html.intro-active .intro-lettering { visibility: hidden; }
.intro-caption { display: block; color: var(--intro-ink); opacity: 1; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; }
.entry-side-note { position: absolute; top: 62%; display: grid; justify-items: center; gap: 22px; color: var(--intro-ink); font: italic 400 clamp(16px, 1.5vw, 22px)/1.3 "Cormorant Garamond", Georgia, serif; }
.entry-side-note-left { left: 7%; }
.entry-side-note-right { right: 7%; }
.entry-ornament { font: 28px Georgia, serif; opacity: .8; }
.entry-side-note i { width: 1px; height: 50px; background: linear-gradient(var(--intro-gold), transparent); opacity: .5; }
.entry-footnote { position: absolute; left: 5vw; bottom: 34px; color: var(--intro-ink); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.intro-skip { display: none; }
.intro-active .intro-skip { position: fixed; z-index: 1001; bottom: 24px; right: 5vw; display: flex; gap: 20px; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--intro-gold); color: var(--intro-ink); background: transparent; font: 10px var(--sans); letter-spacing: .08em; cursor: pointer; }
.intro-skip:focus-visible { outline: 2px solid var(--intro-gold); outline-offset: 6px; }
@media (max-width: 700px) {
  .entry-side-note { top: 76%; display: block; font-size: 13px; writing-mode: vertical-rl; }
  .entry-side-note-left { left: 4%; transform: rotate(180deg); }
  .entry-side-note-right { right: 4%; }
  .entry-side-note .entry-ornament { display: none; }
  .entry-side-note i { display: none; }
  .entry-footnote { bottom: 38px; max-width: 145px; font-size: 7px; line-height: 1.7; }
}

/* Page composition */
.container { width:min(100% - 112px,1440px); margin-inline:auto; }
.section-pad { padding-block:clamp(88px,9vw,150px); }
.eyebrow,.tiny { font-size:10px; font-weight:500; line-height:1.5; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow { color:var(--teal); }
.tiny { color:var(--muted); font-size:9px; letter-spacing:.12em; }
h1,h2,h3,.service-subtitle { font-family:var(--serif); font-weight:400; }
h2 { font-size:clamp(48px,5.3vw,82px); line-height:1.02; letter-spacing:-.045em; }
h2 em { font-weight:400; color:var(--teal); }
p { text-wrap:pretty; }
a { text-decoration:none; }
.muted { color:var(--muted); }
.section-top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:38px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:55px; }
.section-intro { max-width:350px; font-size:13px; color:var(--muted); padding-bottom:8px; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:space-between; gap:34px; padding:0 24px; border:1px solid transparent; border-radius:0; font-size:11px; letter-spacing:.025em; transition:background .22s,color .22s; }
.button span,.line-link span,.text-link span,.nav-cta span { display:inline-block; transition:transform .22s; }
.button:hover span,.line-link:hover span,.text-link:hover span,.nav-cta:hover span { transform:translate(3px,-3px); }
.button-gold { background:var(--champagne-gold); color:#283c38; }
.button-gold:hover { background:#e6c571; }
.button-teal { background:var(--teal); color:var(--cream); }
.button-teal:hover { background:var(--teal-deep); }
.text-link { font-size:11px; display:inline-flex; gap:16px; align-items:center; min-height:44px; border-bottom:1px solid #fcf8f070; }
.line-link { display:inline-flex; align-items:center; gap:36px; font-size:11px; padding-block:12px; border-bottom:1px solid var(--antique-gold); }
/* Navigation becomes quiet paper once the hero is behind us. */
.site-header { position:fixed; inset:0 0 auto; z-index:50; color:var(--cream); transition:background .35s,color .35s,box-shadow .35s; }
.header-inner { width:calc(100% - 112px); max-width:1600px; min-height:94px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.wordmark { font-size:30px; font-weight:500; letter-spacing:-.08em; line-height:1; display:inline-flex; align-items:baseline; }
.wordmark-ad { font:italic 500 1.25em var(--serif); letter-spacing:-.06em; }
.wordmark-period { color:var(--champagne-gold); margin-left:2px; }
.primary-nav { display:flex; align-items:center; gap:32px; }
.primary-nav a { font-size:11px; }
.primary-nav a:not(.nav-cta) { position:relative; padding-block:12px; }
.primary-nav a:not(.nav-cta)::after { content:""; position:absolute; bottom:5px; left:0; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .22s; }
.primary-nav a:hover::after { transform:scaleX(1); }
.nav-cta { display:flex; align-items:center; gap:28px; padding:12px 20px; border:1px solid #fcf8f070; }
.nav-cta:hover { background:var(--cream); color:var(--teal-deep); }
.site-header.is-scrolled { background:#fcf8f0f5; color:var(--ink); box-shadow:0 1px #253c381a; }
.site-header.is-scrolled .nav-cta { border-color:#bd963e80; }
.site-header.is-scrolled .nav-cta:hover { background:var(--teal); color:var(--cream); }
.menu-toggle { display:none; }
/* The hero is the scene behind the live intro cutout. */
.hero { position:relative; isolation:isolate; min-height:740px; height:100svh; max-height:1300px; color:var(--cream); background:var(--teal-deep); overflow:hidden; }
.hero-scene,.hero-shade { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.hero-scene { display:block; transform:scale(1.04); }
.hero-scene img { width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.hero-shade { background:linear-gradient(180deg,#122f37a6 0%,#183c3e80 35%,#16393620 72%,#102e35a6 100%); }
.hero-content { width:min(1120px,calc(100% - 80px)); margin:auto; text-align:center; padding-top:clamp(145px,20svh,240px); }
.hero .eyebrow { color:#f4e3b7; font-size:9px; letter-spacing:.22em; margin-bottom:28px; }
h1 { font-size:clamp(68px,7.7vw,120px); line-height:.99; letter-spacing:-.055em; text-shadow:0 2px 35px #102c3320; }
h1 span,h1 em { display:block; }
h1 em { color:#efd797; font-weight:400; }
.hero-intro { max-width:530px; margin:28px auto 0; font-size:12px; line-height:1.9; color:#fcf8f0e6; }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:27px; }
.hero-bottom { position:absolute; bottom:32px; left:56px; right:56px; display:flex; justify-content:space-between; align-items:end; font-size:9px; line-height:1.7; letter-spacing:.035em; }
.hero-caption { text-align:right; }
.scroll-cue { display:flex; align-items:center; gap:15px; font-size:9px; text-transform:uppercase; letter-spacing:.13em; }
.scroll-line { width:1px; height:42px; background:linear-gradient(transparent,#f4e3b7); }
html.intro-active .hero-entrance,html.intro-active .site-header { visibility:hidden; }
.perspective { background:var(--cream); }
.perspective-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:12%; padding-top:24px; }
.perspective h2 { font-size:clamp(52px,5.9vw,90px); }
.perspective-copy { max-width:370px; padding-top:13px; }
.small-ornament { display:block; color:var(--antique-gold); font-size:30px; margin-bottom:25px; }
.perspective-copy>p { font-size:17px; line-height:1.65; }
.perspective-copy .muted { margin-top:22px; font-size:13px; line-height:1.9; }
.perspective-copy .line-link { margin-top:24px; }
/* A single transform moves the horizontal project collection. */
.work { background:var(--cream); color:var(--ink); padding-bottom:75px; }
.work .eyebrow,.work h2 em { color:var(--teal); }
.work-intro { font-size:13px; padding-bottom:7px; }
.demo-note { font-size:10px; letter-spacing:.025em; opacity:.65; margin-top:14px; }
.work-filters { display:flex; gap:10px; margin-bottom:32px; }
.work-filters button { border:1px solid var(--line); background:transparent; border-radius:30px; padding:10px 19px; font-size:11px; transition:background .35s,color .35s,border-color .35s; }
.work-filters button span { margin-left:18px; opacity:.55; font-size:9px; }
.work-filters button:hover,.work-filters button[aria-pressed=true] { background:var(--teal-deep); border-color:var(--teal-deep); color:var(--cream); }
.work-sequence { position:relative; }
.work-viewport { --work-gutter:max(24px,calc((100vw - 1440px)/2)); --scene-width:min(1120px,86vw); width:100%; padding:0 var(--work-gutter); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--work-gutter); }
.work-grid { position:relative; display:flex; gap:24px; width:max-content; padding-inline-end:max(0px,calc((100vw - var(--scene-width))/2 - var(--work-gutter))); background:transparent; }
.is-scroll-driven .work-viewport { overflow:hidden; scroll-snap-type:none; }
.is-scroll-driven .work-grid { will-change:transform; }
.project-scene { position:relative; display:flex; flex:0 0 var(--scene-width); width:var(--scene-width); padding:0; scroll-snap-align:center; }
.project-frame { --project-surface:#dce4d9; position:relative; margin:0; width:100%; height:clamp(420px,65svh,620px); min-height:0; border:1px solid #253c3824; display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:24px; padding:24px 24px 64px; overflow:hidden; isolation:isolate; contain:paint; background:var(--cream); color:var(--teal-deep); }
.project-pancharatna .project-frame { --project-surface:#e8dccb; }
.project-rvt .project-frame { --project-surface:#dbe3e6; }
.project-atmosphere { position:absolute; z-index:-1; inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; }
.project-copy { padding:20px clamp(6px,2vw,32px); position:relative; z-index:2; min-width:0; }
.project-kicker { font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.project-copy h3 { font-size:clamp(44px,5vw,72px); letter-spacing:-.045em; line-height:1; max-width:600px; text-wrap:balance; }
.project-tagline { font:italic 400 clamp(22px,2.3vw,31px)/1.2 var(--serif); color:var(--teal); margin:20px 0 16px; }
.project-summary { font-size:12px; color:var(--muted); max-width:330px; }
.project-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.project-artwork { position:relative; align-self:stretch; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) minmax(0,.36fr); gap:12px; min-width:0; min-height:0; margin:0; padding:24px; border:1px solid #253c3812; border-radius:16px; isolation:isolate; overflow:hidden; background:var(--project-surface); transition:background .6s; }
.project-art { position:relative; width:100%; height:100%; min-height:0; object-fit:contain; box-shadow:0 8px 20px #203a321a; background:#efe9db; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.project-art-1,.project-art-2 { grid-row:1; }
.project-art-3 { grid-column:1 / -1; grid-row:2; }
.project-bottom { position:absolute; left:32px; right:32px; bottom:20px; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; text-transform:uppercase; letter-spacing:.12em; font-size:8px; color:var(--muted); }
.work-scroll-status { display:flex; align-items:center; gap:20px; padding:16px max(24px,calc((100vw - 1440px)/2)) 4px; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.work-navigation { display:flex; gap:8px; }
.work-navigation button { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--teal-deep); transition:background .35s,color .35s,opacity .35s; }
.work-navigation button:disabled { opacity:.3; cursor:default; }
.work-navigation button:hover:enabled { background:var(--teal-deep); color:var(--cream); }
.work-scroll-hint { margin-right:auto; }
.work-scroll-hint span { display:inline-block; margin-left:12px; }
.work-scroll-line { width:110px; height:2px; overflow:hidden; background:var(--line); border-radius:2px; }
.work-scroll-line i { display:block; width:100%; height:100%; background:var(--teal); transform:scaleX(.03); transform-origin:left; }





.accordion-toggle { display:flex; align-items:center; gap:24px; width:100%; text-align:left; border:0; padding:24px 0; background:none; }

.row-number { color:var(--teal); font:10px var(--sans); letter-spacing:.06em; }
.accordion-symbol { font:300 22px var(--sans); color:var(--teal); margin-left:auto; }
.accordion-panel { overflow:hidden; }
.accordion-inner { padding:0 0 28px 42px; }
.accordion-inner p { font:13px/1.9 var(--sans); color:var(--muted); max-width:490px; }
.accordion-inner .service-subtitle { font:400 23px/1.35 var(--serif); color:var(--ink); margin-bottom:12px; }
.accordion-inner .deliverables { margin-top:18px; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); }









.image-disclosure { font-size:8px; letter-spacing:.04em; color:#fcf8f099; margin-top:26px; }
.process { background:var(--cream); }
.process-grid { display:grid; grid-template-columns:1fr 1fr; gap:12%; align-items:start; }
.process-heading { position:sticky; top:135px; }
.process-heading h2 { margin:35px 0 26px; }
.process-heading>p:not(.eyebrow) { font-size:13px; color:var(--muted); }
.process-heading .line-link { margin-top:25px; }
.process-steps { position:relative; padding-left:45px; }
.process-track { position:absolute; top:10px; bottom:55px; left:0; width:1px; background:var(--line); }
.process-track span { display:block; width:100%; height:100%; background:var(--antique-gold); transform-origin:top; }
.process-step { position:relative; padding:0 0 58px; }
.process-number { position:absolute; top:0; left:-60px; width:30px; height:30px; display:grid; place-items:center; background:var(--cream); color:var(--teal); font-size:9px; }
.process-step h3 { font-size:40px; line-height:1.1; margin:16px 0 18px; letter-spacing:-.025em; }
.process-step>p:not(.eyebrow) { font-size:13px; color:var(--muted); }
.process-step .process-output { margin-top:22px; font-size:9px!important; text-transform:uppercase; letter-spacing:.1em; }
.process-output span { display:block; margin-top:5px; font-size:11px; color:var(--teal); text-transform:none; letter-spacing:0; }







.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:12%; }
.faq h2 { margin-top:30px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-item h3 { font:400 16px var(--sans); }
.faq-item .accordion-toggle { line-height:1.5; padding-block:24px; }
.faq-item .accordion-inner { padding:0 40px 25px 0; }
.contact { background:var(--burgundy); color:var(--cream); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:10%; }
.contact .eyebrow,.contact h2 em { color:var(--champagne-gold); }
.contact h2 { margin:33px 0; font-size:clamp(52px,5.4vw,82px); }
.contact-copy>p:not(.eyebrow) { color:#fcf8f0b3; font-size:13px; }
.contact-location { display:block; margin-top:52px; font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:var(--champagne-gold); }
.contact-form { background:var(--cream); padding:38px; color:var(--ink); }
.form-heading { border-bottom:1px solid var(--line); padding-bottom:23px; margin-bottom:25px; }
.form-heading h3 { font-size:30px; line-height:1.15; }
.form-heading p { font-size:10px; color:var(--muted); margin-top:12px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.contact-form label { display:block; margin-bottom:21px; font-size:10px; }
.contact-form label>span { color:var(--teal); }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; display:block; border:0; border-bottom:1px solid #283c3840; border-radius:0; background:transparent; font-size:12px; padding:12px 0; color:var(--ink); min-height:45px; outline-offset:4px; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-bottom-color:var(--teal); }
.contact-form textarea { resize:vertical; min-height:80px; }
.contact-form ::placeholder { color:#68716a99; }
.contact-form .button { width:100%; margin-top:4px; }
.form-status { font-size:11px; margin-top:14px; }
.form-status:empty { display:none; }
.site-footer { background:var(--cream); padding:55px 0 25px; }
.footer-top { display:flex; justify-content:space-between; align-items:start; gap:35px; }
.footer-top>p { font-size:12px; }
.footer-top nav { display:flex; flex-wrap:wrap; gap:27px; font-size:11px; }
.back-top { font-size:10px; display:flex; gap:25px; }
.footer-wordmark { display:block; margin:35px 0 25px; font:400 clamp(72px,16vw,255px)/1.05 var(--serif); letter-spacing:-.075em; text-align:center; color:var(--teal-deep); }
.footer-wordmark span { font-style:italic; }
.footer-wordmark i { color:var(--antique-gold); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:20px; font-size:8px; color:var(--muted); }
/* Native dialog supplies modal focus containment and Escape handling. */
.media-viewer { width:min(1200px,calc(100% - 40px)); max-height:92svh; padding:28px; border:1px solid #d8b45b50; background:var(--cream); color:var(--ink); }
.media-viewer::backdrop { background:#102a29e6; }
.viewer-toolbar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; }
.viewer-close { background:none; border:0; font-size:11px; padding:10px; display:flex; gap:22px; }
.viewer-close span { font-size:24px; line-height:.8; }
.viewer-stage { display:grid; place-items:center; min-height:100px; background:var(--paper); }
.viewer-stage img,.viewer-stage video { display:block; max-width:100%; max-height:65svh; margin:auto; object-fit:contain; }
.viewer-stage video { width:100%; }
.viewer-description h2 { font-size:32px; margin-top:20px; }
.viewer-description p { font-size:12px; color:var(--muted); margin-top:8px; }
@media (max-width:1100px) {
 .container { width:calc(100% - 72px); } .header-inner { width:calc(100% - 72px); } .hero-bottom { left:36px; right:36px; }
 .primary-nav { gap:24px; } .hero-content { padding-top:21svh; }
 .perspective-grid { gap:8%; } .contact-grid { gap:6%; }
 .contact-form { padding:28px; }
}
@media (max-width:800px) {
 .container { width:calc(100% - 48px); } .header-inner { min-height:78px; width:calc(100% - 48px); } .wordmark { font-size:26px; }
 .menu-toggle { display:grid; width:44px; height:44px; align-content:center; justify-items:center; gap:7px; border:1px solid currentColor; color:inherit; background:none; border-radius:50%; }
 .menu-toggle span { width:16px; height:1px; background:currentColor; transition:transform .22s; }
 .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(4px) rotate(45deg); } .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-4px) rotate(-45deg); }
 .primary-nav { display:none; } .primary-nav.is-open { position:absolute; top:78px; inset-inline:0; display:flex; flex-direction:column; align-items:stretch; gap:8px; background:var(--cream); color:var(--ink); padding:24px; border-bottom:1px solid var(--line); }
 .primary-nav.is-open a { padding:12px 0; font-size:15px; } .primary-nav.is-open .nav-cta { padding:14px 18px; border-color:var(--line); margin-top:8px; }
 .hero { min-height:700px; } h1 { font-size:clamp(58px,8.5vw,78px); } .hero-content { padding-top:21svh; width:calc(100% - 48px); }
 .hero-bottom { left:24px; right:24px; } .hero-caption { display:none; } .hero .eyebrow { max-width:280px; margin-inline:auto; }
 .section-heading { gap:30px; } .section-intro { max-width:250px; } h2 { font-size:56px; }
 .perspective-grid { grid-template-columns:1fr 1fr; gap:8%; } .perspective h2 { font-size:58px; }

 .process-heading { position:static; } .process-grid { gap:7%; } .process-step h3 { font-size:34px; }

 .faq-grid { gap:8%; grid-template-columns:.65fr 1.35fr; } .faq-item h3 { font-size:14px; }
 .contact-grid { grid-template-columns:1fr; gap:45px; } .contact-copy { max-width:650px; } .contact h2 { font-size:70px; } .contact-form { padding:38px; }
 .footer-top { flex-wrap:wrap; } .footer-top nav { gap:18px; } .footer-bottom { flex-wrap:wrap; }
}
@media (max-width:550px) {
 .section-pad { padding-block:64px; } .container { width:calc(100% - 40px); } .header-inner { width:calc(100% - 40px); }
 .hero { height:auto; min-height:100svh; max-height:none; } .hero-content { width:calc(100% - 40px); padding-block:clamp(118px,18svh,156px) 112px; }
 .hero .eyebrow { font-size:8px; margin-bottom:25px; max-width:230px; line-height:1.8; }
 h1 { font-size:clamp(47px,12.7vw,68px); line-height:1.04; letter-spacing:-.045em; } h1 span,h1 em { max-width:370px; margin:auto; }
 .hero-intro { font-size:11px; max-width:300px; margin-top:25px; line-height:1.85; } .desktop-break { display:none; }
 .hero-actions { flex-direction:column; gap:12px; margin-top:25px; } .hero-actions .button { min-width:210px; } .hero-actions .text-link { font-size:10px; }
 .hero-bottom { bottom:25px; left:20px; right:20px; font-size:8px; } .scroll-cue { font-size:7px; gap:10px; } .scroll-line { height:30px; }
 .hero-scene { transform:none; } .hero-scene img { object-position:50% 50%; } .hero-shade { background:linear-gradient(180deg,#173738a6,#17373880 48%,#17373820 80%,#102e35a6); }
 .section-top { align-items:start; padding-bottom:24px; } .section-top .tiny { max-width:120px; text-align:right; font-size:7px; } .eyebrow { font-size:9px; }
 h2 { font-size:clamp(40px,11.8vw,52px); } .section-heading { display:block; margin-bottom:26px; } .section-intro,.work-intro { margin-top:20px; max-width:100%; font-size:12px; }
 .perspective-grid { grid-template-columns:1fr; gap:26px; padding-top:5px; } .perspective h2 { font-size:clamp(42px,12.2vw,55px); } .perspective-copy { max-width:100%; padding-top:0; } .small-ornament { margin-bottom:20px; }
 .perspective-copy>p { font-size:17px; } .perspective-copy .muted { font-size:12px; }
 .accordion-toggle { gap:17px; padding-block:22px; } .accordion-inner { padding-left:32px; } .accordion-inner p { font-size:12px; }

 .process-grid { grid-template-columns:1fr; gap:55px; } .process-heading h2 { margin-top:25px; } .process-steps { padding-left:40px; } .process-number { left:-55px; } .process-step { padding-bottom:45px; } .process-step:last-child { padding-bottom:0; }

 .faq-grid { grid-template-columns:1fr; gap:35px; } .faq h2 { margin-top:25px; } .faq-item h3 { font-size:15px; } .faq-item .accordion-inner { padding-right:20px; }
 .contact h2 { font-size:clamp(44px,12.5vw,57px); } .contact-location { margin-top:30px; } .contact-form { padding:26px 22px; } .form-row { grid-template-columns:1fr; gap:0; } .form-heading h3 { font-size:29px; }
 .footer-top>p { width:100%; } .footer-top nav { gap:20px; font-size:10px; } .back-top { gap:12px; } .footer-wordmark { margin:38px 0 25px; font-size:18vw; } .footer-bottom { gap:12px; font-size:8px; } .footer-bottom>span:last-child { width:100%; }
 .media-viewer { padding:18px; width:calc(100% - 20px); } .viewer-description h2 { font-size:28px; }
}
@media (max-height:600px) and (min-width:551px) {
 .hero { min-height:620px; height:115svh; } .hero-content { padding-top:125px; } h1 { font-size:70px; } .hero .eyebrow { margin-bottom:18px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; }
 .intro-screen,.intro-skip { display:none!important; } html.intro-active { overflow:auto; }
 html.intro-active .hero-entrance,html.intro-active .site-header { visibility:visible; }
 .hero-scene { transform:none!important; } .process-heading { position:static; }
}

/* Tactile controls: sliding fills and a rolling arrow detail. */
.button,.nav-cta,.project-button { position:relative; isolation:isolate; overflow:hidden; border-radius:999px; transition:color .4s,background .4s,border-color .4s,box-shadow .4s; }
.button { padding:7px 8px 7px 25px; gap:26px; }
.button::before,.nav-cta::before,.project-button::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--cream); transform:translateY(105%); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.button:hover::before,.nav-cta:hover::before,.project-button:hover::before { transform:translateY(0); }
.button:hover,.nav-cta:hover,.project-button:hover { color:var(--teal-deep); box-shadow:0 8px 24px #0000000c; }
.button>span,.nav-cta>span,.project-button>i { display:grid; place-items:center; flex:0 0 35px; width:35px; height:35px; border-radius:50%; background:#ffffff26; font:normal 16px var(--sans); transition:transform .5s,background .4s; }
.button:hover>span,.nav-cta:hover>span,.project-button:hover>i { transform:rotate(45deg); background:#084c5012; }
.project-button { display:inline-flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 6px 6px 16px; border:1px solid var(--line); color:var(--teal-deep); background:transparent; font-size:10px; min-height:46px; }
.project-button>span { display:block; width:auto; height:auto; flex:initial; background:none; font:inherit; border-radius:0; }
.project-button>i { width:30px; height:30px; flex-basis:30px; background:#084c500c; }
.project-button:first-child { background:var(--teal-deep); border-color:var(--teal-deep); color:var(--cream); }
.project-button:first-child>i { background:#ffffff18; }
.text-link,.line-link { position:relative; overflow:hidden; }
.text-link::after,.line-link::after { content:""; position:absolute; bottom:0; left:0; height:1px; width:100%; background:currentColor; transform:translateX(-102%); transition:transform .5s; }
.text-link:hover::after,.line-link:hover::after { transform:translateX(0); }
/* A floating navigation bar with a quieter paper treatment after the hero. */
.site-header { top:14px; padding:0 20px; }
.header-inner { width:min(100%,1440px); min-height:70px; padding:0 23px; border:1px solid #ffffff26; border-radius:60px; background:#183c3e38; backdrop-filter:blur(18px); transition:background .45s,border-color .45s,box-shadow .45s; }
.wordmark { font-size:28px; }
.primary-nav { gap:30px; }
.primary-nav a { font-size:14px; font-weight:500; letter-spacing:.015em; }
.primary-nav .nav-cta { font-size:12px; }
.nav-cta { padding:6px 7px 6px 21px; gap:25px; border-color:#ffffff50; }
.site-header.is-scrolled { background:transparent; box-shadow:none; }
.site-header.is-scrolled .header-inner { background:#fcf8f0ed; border-color:#253c381a; box-shadow:0 8px 35px #102e3510; }
.site-header.is-scrolled .nav-cta { border-color:var(--line); }
.site-header.is-scrolled .nav-cta:hover { background:transparent; color:var(--teal-deep); }
.work-footnote { margin-top:45px; text-align:center; font:italic 400 23px var(--serif); color:var(--muted); }
.primary-nav a.is-active::after { transform:scaleX(1); }
.site-header.in-project { transform:translateY(-120%); transition:transform .45s; }
.site-header:focus-within { transform:none; }
.media-viewer { width:100%; max-width:none; height:100svh; max-height:100svh; margin:0; border:0; border-radius:0; padding:22px clamp(18px,4vw,65px); background:transparent; color:var(--cream); box-shadow:none; overflow:auto; }
.media-viewer::backdrop { background:#081a20b8; backdrop-filter:blur(24px) saturate(.65); -webkit-backdrop-filter:blur(24px) saturate(.65); }
.viewer-toolbar { min-height:46px; margin-bottom:12px; }
.viewer-toolbar .eyebrow { color:#fcf8f0a6; font-size:9px; }
.viewer-close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid #ffffff40; border-radius:50%; background:#ffffff0d; color:var(--cream); backdrop-filter:blur(12px); transition:background .3s,transform .45s,border-color .3s; }
.viewer-close span { font:300 29px/1 var(--sans); }
.viewer-close:hover { background:#ffffff20; border-color:#ffffff80; transform:rotate(90deg); }
.viewer-stage { display:flex; align-items:center; flex-direction:column; min-height:0; background:transparent; padding:0; border-radius:0; }
.viewer-stage>.gallery-image { max-height:64svh; width:auto; max-width:100%; object-fit:contain; box-shadow:0 18px 65px #0005; }
.viewer-stage>video { width:auto; max-width:100%; max-height:70svh; background:#121916; box-shadow:0 18px 65px #0005; }
.gallery-controls { display:flex; align-items:center; justify-content:center; gap:22px; padding-top:12px; }
.gallery-step { width:38px; height:38px; border-radius:50%; color:var(--cream); background:#ffffff0a; border:1px solid #ffffff40; transition:background .3s,transform .3s; }
.gallery-step:hover { background:#ffffff22; transform:scale(1.08); }
.gallery-position { font-size:10px; min-width:50px; text-align:center; font-variant-numeric:tabular-nums; }
.gallery-thumbnails { display:flex; gap:7px; max-width:100%; overflow:auto; margin-top:12px; padding:4px; }
.gallery-thumb { flex:0 0 55px; height:42px; border:2px solid transparent; border-radius:3px; padding:0; opacity:.5; background:none; }
.gallery-thumb[aria-current=true] { border-color:var(--champagne-gold); opacity:1; }
.gallery-thumb>img { width:100%; height:100%; object-fit:cover; }
.viewer-description { width:min(100%,1000px); margin:0 auto; text-align:center; }
.viewer-description h2 { font-size:28px; margin-top:14px; }
.viewer-description p { max-width:760px; margin:7px auto 0; font-size:11px; color:#fcf8f085; }
@media(max-width:800px) {
 .site-header { top:10px; padding:0 12px; }
 .header-inner { width:100%; min-height:64px; padding:0 16px; }
 .wordmark { font-size:25px; }
 .primary-nav.is-open { top:74px; left:0; right:0; border-radius:20px; box-shadow:0 20px 40px #0002; }
 .work-viewport { --work-gutter:20px; --scene-width:min(520px,calc(100vw - 52px)); }
 .work-grid { gap:14px; }
 .project-scene { flex-basis:var(--scene-width); width:var(--scene-width); }
 .project-frame { height:clamp(430px,67svh,520px); grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; align-content:normal; gap:0; padding:12px 12px 48px; }
 .project-copy { grid-row:2; padding:18px 10px 4px; }
 .project-kicker { margin-bottom:10px; font-size:8px; }
 .project-copy h3 { font-size:clamp(32px,7.8vw,43px); line-height:1.03; text-wrap:initial; }
 .project-summary { display:none; }
 .project-tagline { font-size:21px; margin:10px 0 0; }
 .project-actions { margin-top:17px; gap:7px; }
 .project-button { gap:8px; padding-left:12px; font-size:9px; min-height:44px; }
 .project-button>i { width:26px; height:26px; flex-basis:26px; font-size:14px; }
 .project-artwork { grid-row:1; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr); padding:16px 28px; gap:12px; border-radius:14px; }
 .project-art-3 { display:none; }
 .project-bottom { font-size:6px; letter-spacing:.08em; left:22px; right:22px; bottom:16px; padding-top:10px; gap:8px; }
 .work-scroll-status { padding:12px 20px 0; gap:12px; font-size:9px; }
 .work-scroll-line { width:48px; }
 .work-scroll-hint span { display:none; }
 .work-filters { gap:7px; flex-wrap:wrap; }
 .work-filters button { padding:9px 14px; font-size:10px; }
 .work-filters button span { margin-left:10px; }
 .media-viewer { padding:14px; width:100%; }
 .viewer-stage>.gallery-image { max-height:55svh; }
}
@media(prefers-reduced-motion:reduce) {
 .project-scene { height:auto; padding:0; }
 .project-frame { position:relative; top:auto; transform:none!important; }
 .site-header.in-project { transform:none; }
}
@media(min-width:801px) and (max-height:740px) {
 .project-summary { display:none; }
 .project-copy { padding-block:28px 45px; }
 .project-copy h3 { font-size:clamp(48px,5vw,72px); }
 .project-tagline { margin-block:18px 12px; }
 .project-actions { margin-top:22px; }
}

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .project-artwork:hover .project-art { transform:translateY(-3px); }
 .project-artwork:hover .project-art-2 { transform:translateY(3px); }
}

/* Shared curves: inner radii follow the containing frame and its inset. */
:root { --radius-small:10px; --radius-card:28px; --radius-section:clamp(32px,4vw,64px); --radius-join:clamp(24px,3vw,40px); }
.hero { border-radius:0; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:clamp(20px,3svh,32px); background:linear-gradient(to bottom,transparent,var(--cream)); pointer-events:none; }
.project-frame { --frame-radius:var(--radius-card); --frame-inset:24px; border-radius:var(--frame-radius); }
.project-artwork { border-radius:max(8px,calc(var(--frame-radius) - var(--frame-inset) - 1px)); }
.project-art { border-radius:6px; }







.process { position:relative; }
.process-number { border-radius:50%; }
.process-output { padding:14px 18px; border:1px solid var(--line); border-radius:var(--radius-small); }

.faq-item { border:1px solid var(--line); border-radius:20px; padding-inline:22px; margin-bottom:10px; transition:background .3s; }
.faq-item:hover,.faq-item:focus-within { background:var(--paper); }
.faq { padding-bottom:calc(clamp(88px,9vw,150px) + var(--radius-join)); }
.contact { position:relative; border-radius:var(--radius-section) var(--radius-section) 0 0; }
.contact-form { border-radius:var(--radius-card); box-shadow:0 20px 55px #36191b12; overflow:hidden; }
.contact-form input,.contact-form select,.contact-form textarea { border:1px solid #283c3826; border-radius:var(--radius-small); padding:12px 14px; margin-top:8px; background:#ffffff40; transition:border-color .25s,box-shadow .25s,background .25s; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--teal); background:#ffffff80; box-shadow:0 0 0 3px #106e7010; }
.viewer-stage>.gallery-image,.viewer-stage>video { border-radius:16px; }
.gallery-thumb { border-radius:8px; overflow:hidden; }
@media(max-width:800px) {
 .primary-nav.is-open a:not(.nav-cta) { font-size:18px; padding:13px 10px; border-radius:12px; }
 .primary-nav.is-open a:not(.nav-cta):hover { background:var(--teal-soft); }
 .primary-nav.is-open .nav-cta { font-size:14px; }
 .project-frame { --frame-radius:24px; --frame-inset:12px; }
.faq-item { padding-inline:16px; }

 .contact-form { border-radius:24px; }
 .viewer-stage>.gallery-image,.viewer-stage>video { border-radius:10px; }
 .primary-nav.is-open { max-height:calc(100svh - 96px); overflow-y:auto; overscroll-behavior:contain; }
 .contact-form input,.contact-form select,.contact-form textarea { font-size:16px; }

 .faq { padding-bottom:calc(64px + var(--radius-join)); }
 .work-footnote { margin-top:26px; font-size:20px; }
 .work-filters button { min-height:44px; }

}
@media(max-width:360px) {
 .project-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
 .project-button { font-size:8px; gap:4px; padding-left:8px; }
 .project-button>i { width:22px; height:22px; flex-basis:22px; }
 .work-scroll-hint { max-width:90px; line-height:1.5; }
 .work-scroll-status { gap:10px; }
 .work-navigation { gap:5px; }
 .work-navigation button { width:36px; height:36px; }
}

/* The studio: a compact editorial introduction with a framed architectural detail. */
.perspective { padding-block:clamp(72px,8vw,124px); }
#studio { scroll-margin-top:105px; }
.studio-introduction { display:grid; grid-template-columns:1.25fr .65fr .8fr; gap:4.5%; align-items:center; }
.studio-overline { font-size:10px; letter-spacing:.1em; color:var(--muted); margin-bottom:24px; }
.studio-statement h2 { font-size:clamp(48px,5.4vw,80px); line-height:1.03; }
.studio-signoff { font:italic 400 28px/1.2 var(--serif); color:var(--teal-deep); margin-top:34px; }
.studio-signoff span { display:block; margin-top:9px; font:8px/1.6 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.studio-detail { align-self:center; }
.studio-detail-frame { position:relative; isolation:isolate; height:clamp(240px,27vw,360px); overflow:hidden; border-radius:50% 50% 10px 10px / 38% 38% 10px 10px; background:var(--paper); }
.studio-detail-frame::after { content:""; position:absolute; z-index:1; inset:0; border:1px solid #bd963e66; border-radius:inherit; pointer-events:none; }
.studio-detail-frame img { width:100%; height:100%; object-fit:cover; border-radius:0; }
.studio-detail figcaption { margin-top:16px; max-width:210px; font:italic 17px/1.35 var(--serif); color:var(--teal-deep); }
.studio-detail figcaption span { display:block; margin-top:10px; font:7px/1.5 var(--sans); color:var(--muted); }
.studio-description { align-self:end; padding-bottom:15px; }
.studio-description>p { font-size:18px; line-height:1.55; }
.studio-description>.muted { margin-top:18px; font-size:12px; line-height:1.9; }
.studio-description .line-link { margin-top:20px; gap:16px; }

/* Services are the principal chapter: six visible offerings, each with its own study. */
.expertise { position:relative; isolation:isolate; overflow:hidden; background:#0b393a; color:var(--cream); border-radius:var(--radius-section) var(--radius-section) 0 0; }
.expertise::before { content:""; position:absolute; z-index:-1; top:70px; right:-100px; width:420px; height:650px; border:1px solid #d8b45b17; border-radius:240px 240px 0 0; transform:rotate(22deg); pointer-events:none; }
.expertise .section-top { border-bottom:1px solid #fcf8f024; padding-bottom:24px; margin-bottom:48px; }
.expertise .eyebrow { color:#e1c781; }
.expertise .tiny { color:#fcf8f09c; }
.expertise h2 { color:var(--cream); font-size:clamp(48px,5.6vw,84px); }
.expertise h2 em { color:#e2c991; }
.expertise .section-heading { align-items:center; margin-bottom:48px; }
.expertise-intro { max-width:280px; padding-right:10px; }
.expertise-intro p { color:#fcf8f0b3; font-size:12px; line-height:1.9; }
.expertise-flourish { display:block; margin-bottom:22px; color:#e2c991; font:48px/1 var(--serif); }
.service-collection { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.service-card { --service-radius:22px; --service-inset:8px; min-width:0; display:flex; flex-direction:column; padding:var(--service-inset); border:1px solid #e4d4a82e; border-radius:var(--service-radius); overflow:hidden; isolation:isolate; background:#ffffff05; transition:border-color .5s,background .5s,box-shadow .5s; }
.service-visual { position:relative; display:flex; align-items:center; justify-content:center; height:180px; flex-shrink:0; overflow:hidden; border-radius:calc(var(--service-radius) - var(--service-inset) - 1px); isolation:isolate; }
.service-visual small { position:absolute; bottom:15px; left:18px; font:8px/1.5 var(--sans); letter-spacing:.08em; }
.service-body { padding:22px 16px 12px; display:flex; flex:1; flex-direction:column; }
.service-index { font-size:8px; letter-spacing:.05em; line-height:1.6; color:#e2c991; margin-bottom:13px; }
.service-body h3 { font-size:clamp(28px,2.6vw,38px); letter-spacing:-.025em; line-height:1.08; color:var(--cream); }
.service-description { font-size:12px; line-height:1.85; color:#fcf8f0b3; margin-top:16px; margin-bottom:18px; }
.service-deliverables { display:flex; flex-wrap:wrap; gap:5px 14px; padding:0; margin:0 0 22px; list-style:none; color:#e2c991; font-size:8px; line-height:1.7; }
.service-deliverables li { display:flex; gap:6px; align-items:center; }
.service-deliverables li::before { content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.service-enquiry { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:48px; margin-top:auto; padding-top:12px; border-top:1px solid #fcf8f026; font-size:11px; color:var(--cream); }
.service-enquiry span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #e2c99155; border-radius:50%; color:#e2c991; transition:transform .55s,background .4s,color .4s; }
.expertise-closing { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:40px; padding-top:30px; border-top:1px solid #fcf8f024; }
.expertise-closing p { font-size:12px; color:#fcf8f0b3; }
.expertise-closing p em { display:block; color:#e2c991; font:italic 23px/1.4 var(--serif); margin-top:6px; }
.expertise-closing .line-link { border-color:#d8b45b80; }
.visual-identity { background:#e8dfcb; color:#234b45; justify-content:flex-start; padding:20px 26px; gap:24px; }
.visual-identity>p { font:400 36px/.95 var(--serif); letter-spacing:-.03em; margin-top:-10px; }
.visual-identity>p em { font-weight:400; }
.identity-emblem { position:relative; flex:0 0 70px; height:100px; border:1px solid #234b4570; border-radius:50px 50px 0 0; transform:translateY(-8px); }
.identity-emblem span { position:absolute; inset:9px; border:1px solid #234b4545; border-radius:50px 50px 0 0; }
.identity-emblem i { position:absolute; top:35%; left:15%; width:70%; height:1px; background:#234b4580; }
.identity-emblem::after { content:"a"; position:absolute; inset:0; display:grid; place-items:center; font:italic 54px var(--serif); }
.visual-website { background:#b3c4b8; padding:18px 20px 0; align-items:flex-start; }
.browser-study { width:100%; height:178px; overflow:hidden; border-radius:8px 8px 0 0; background:var(--cream); box-shadow:0 9px 30px #102e3526; transform:translateY(4px); }
.browser-study-bar { height:21px; display:flex; align-items:center; gap:3px; padding:0 9px; }
.browser-study-bar>i { width:3px; height:3px; border-radius:50%; background:#9caa9e; }
.browser-study-bar>span { margin-left:auto; font-size:5px; color:var(--muted); }
.browser-study-scene { height:117px; position:relative; display:grid; place-items:center; isolation:isolate; }
.browser-study-scene img { position:absolute; z-index:-1; width:100%; height:100%; object-fit:cover; filter:brightness(.65); }
.browser-study-scene>span { color:var(--cream); font:400 24px/.95 var(--serif); text-align:center; }
.browser-study-scene em { color:#e2c991; }
.browser-study-foot { display:flex; justify-content:center; gap:10px; padding:14px; }
.browser-study-foot i { height:2px; width:24%; background:#a1ada141; }
.visual-film { background:#26392d; }
.visual-film>img { width:100%; height:100%; object-fit:cover; object-position:50% 43%; }
.film-study-shade { position:absolute; inset:0; background:linear-gradient(transparent 30%,#172c2dcc); }
.film-study-play { position:absolute; display:grid; place-items:center; padding-left:3px; width:46px; height:46px; border:1px solid #fcf8f080; border-radius:50%; color:var(--cream); background:#102e3526; font-size:20px; }
.visual-film small { bottom:18px; color:var(--cream); }
.film-study-corner { position:absolute; top:14px; left:16px; color:var(--cream); font-size:7px; letter-spacing:.05em; text-shadow:0 1px 8px #000a; }
.visual-campaign { background:#9d8065; padding:20px 18px 35px; }
.campaign-sheet { width:100%; box-shadow:0 10px 25px #33231938; transform:rotate(-3deg); }
.campaign-sheet img { width:100%; height:auto; }
.visual-campaign small { color:#fff3df; }
.visual-social { background:#d9d8c7; gap:10px; padding:28px 22px; align-items:flex-start; }
.visual-social>img { width:29%; height:138px; object-fit:cover; box-shadow:0 5px 14px #283c3826; border-radius:5px; }
.visual-social>img:first-child { transform:translateY(12px); }
.visual-social>img:last-child { transform:translateY(-12px); }
.visual-performance { background:#2f4e50; flex-direction:column; padding:20px 24px 37px; }
.campaign-path { width:100%; max-width:245px; display:flex; align-items:center; flex-direction:column; }
.campaign-path>span { width:100%; padding:5px 12px; border:1px solid #e2c99155; text-align:center; border-radius:5px; color:#fcf8f0d9; font-size:8px; }
.campaign-path>span:nth-of-type(2) { width:86%; }
.campaign-path>span:nth-of-type(3) { width:72%; background:#e2c991; color:#173b38; }
.campaign-path>span b { margin-left:5px; font-weight:400; }
.campaign-path>i { width:1px; height:10px; background:#e2c99180; }
.visual-performance small { color:#e2c991; }

/* Muted project colours give the artwork a gallery-like setting. */
.project-frame { --project-tone:#263e35; --project-accent:#e4d1a5; --project-surface:#526650; background:var(--project-tone); color:var(--cream); border-color:#e4d4a82e; }
.project-pancharatna .project-frame { --project-tone:#513c30; --project-accent:#edd1a6; --project-surface:#7b6654; }
.project-rvt .project-frame { --project-tone:#1e3142; --project-accent:#d9d4b7; --project-surface:#4d626c; }
.project-frame::before { content:""; position:absolute; z-index:-1; width:45%; height:150%; top:-25%; right:40%; border:1px solid #fcf8f00a; border-radius:50%; pointer-events:none; }
.project-copy h3 { color:var(--cream); }
.project-kicker { color:var(--project-accent); }
.project-tagline { color:var(--project-accent); }
.project-summary { color:#fcf8f0b3; }
.project-artwork { border-color:#fcf8f01a; }
.project-art { box-shadow:0 8px 20px #0b171f33; }
.project-bottom { color:#fcf8f099; border-top-color:#fcf8f026; }
.project-button { color:var(--cream); border-color:#fcf8f040; }
.project-button>i { background:#fcf8f010; }
.project-button:first-child { background:var(--project-accent); border-color:var(--project-accent); color:#233c36; }
.project-button:first-child>i { background:#233c3610; }
.project-button:hover { color:var(--teal-deep); }

/* A quieter, precise process and practical answers lead into the enquiry. */
.process { border-radius:0; background:var(--paper); }
.process-heading h2 { font-size:clamp(48px,5vw,74px); }
.process-grid { grid-template-columns:.9fr 1.1fr; gap:12%; }
.process-step { padding-bottom:40px; }
.process-step:last-child { padding-bottom:0; }
.process-step h3 { font-size:36px; margin-block:12px 14px; }
.process-step .process-output { border:0; border-radius:0; padding:12px 0 0; border-top:1px solid var(--line); margin-top:18px; }
.process-number { background:var(--paper); border:1px solid #bd963e66; color:var(--teal-deep); }
.process-track { bottom:80px; }
.faq { background:var(--cream); }
.faq-item { border:0; border-bottom:1px solid var(--line); border-radius:0; padding-inline:0; margin:0; }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-item:hover,.faq-item:focus-within { background:transparent; }
.faq-item .accordion-toggle { gap:20px; padding-block:24px; font-size:14px; }
.faq-item .accordion-symbol { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; font-size:18px; transition:background .3s,color .3s; }
.faq-item.is-open .accordion-symbol { background:var(--teal-deep); color:var(--cream); }
.contact { overflow:hidden; }
.contact::after { content:""; position:absolute; pointer-events:none; width:460px; height:640px; border:1px solid #e2c99116; border-radius:260px 260px 0 0; bottom:-300px; left:-100px; transform:rotate(-18deg); }
.contact-copy,.contact-form { position:relative; z-index:1; }
.service-choice { padding-bottom:20px; margin-bottom:24px!important; border-bottom:1px solid var(--line); }

@media(min-width:801px) and (max-width:1100px) {
 .studio-introduction { grid-template-columns:1.2fr .8fr; gap:36px; }
 .studio-description { grid-column:1 / -1; max-width:620px; display:grid; grid-template-columns:1fr 1.5fr; gap:10px 30px; align-items:start; }
 .studio-description .small-ornament { display:none; }
 .studio-description>.muted { margin-top:0; }
 .studio-description .line-link { grid-column:2; justify-self:start; margin-top:8px; }
 .service-collection { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .service-body h3 { font-size:34px; }
}
@media(max-width:800px) {
 .studio-introduction { grid-template-columns:1.1fr .9fr; gap:28px 22px; }
 .studio-statement h2 { font-size:clamp(42px,6.5vw,58px); }
 .studio-detail-frame { height:260px; }
 .studio-overline { font-size:8px; margin-bottom:18px; }
 .studio-signoff { margin-top:24px; }
 .studio-description { grid-column:1 / -1; max-width:620px; }
 .studio-description .small-ornament { display:none; }
 .studio-description>.muted { max-width:540px; }
 .expertise .section-top { margin-bottom:30px; }
 .expertise .section-heading { gap:24px; margin-bottom:30px; }
 .expertise h2 { font-size:clamp(42px,6.5vw,60px); }
 .expertise-flourish { font-size:36px; }
 .expertise-intro { max-width:215px; }
 .service-collection { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .service-body { padding:18px 12px 8px; }
 .service-body h3 { font-size:30px; }
 .service-visual { height:155px; }
 .visual-identity { gap:16px; padding-inline:18px; }
 .identity-emblem { flex-basis:55px; height:82px; }
 .visual-identity>p { font-size:31px; }
 .visual-social { padding-inline:15px; }
 .visual-social>img { height:118px; }
 .expertise-closing p em { font-size:21px; }
 .process-grid { gap:8%; }
 .process-heading h2 { font-size:48px; }
 .process-step h3 { font-size:32px; }
}
@media(max-width:550px) {
 .perspective { padding-block:58px 64px; }
 .studio-introduction { grid-template-columns:1fr 110px; gap:24px 16px; align-items:start; }
 .studio-statement h2 { font-size:clamp(35px,9.6vw,51px); }
 .studio-overline { max-width:180px; line-height:1.7; font-size:8px; }
 .studio-signoff { font-size:23px; margin-top:22px; }
 .studio-signoff span { font-size:6px; max-width:160px; }
 .studio-detail { margin-top:46px; }
 .studio-detail-frame { height:170px; }
 .studio-detail figcaption { font-size:13px; margin-top:12px; }
 .studio-detail figcaption span { font-size:6px; }
 .studio-description { padding:22px 0 0; border-top:1px solid var(--line); }
 .studio-description>p { font-size:17px; }
 .studio-description>.muted { font-size:12px; margin-top:12px; }
 .studio-description .line-link { margin-top:12px; }
 .expertise { padding-block:58px; }
 .expertise .section-top { gap:20px; margin-bottom:28px; }
 .expertise .section-top .tiny { max-width:110px; }
 .expertise h2 { font-size:clamp(39px,10.5vw,55px); }
 .expertise .section-heading { display:block; }
 .expertise-intro { max-width:none; margin-top:22px; display:flex; align-items:center; gap:16px; }
 .expertise-intro p { font-size:11px; }
 .expertise-flourish { margin:0; flex-shrink:0; font-size:37px; }
 .service-collection { grid-template-columns:1fr; gap:16px; }
 .service-card { --service-radius:18px; --service-inset:10px; display:grid; grid-template-columns:88px minmax(0,1fr); gap:0 14px; }
 .service-visual { width:88px; height:142px; border-radius:44px 44px 10px 10px; align-self:start; margin-top:10px; }
 .service-body { padding:8px 2px 4px; }
 .service-index { font-size:8px; letter-spacing:0; margin-bottom:10px; }
 .service-body h3 { font-size:29px; }
 .service-description { font-size:12px; line-height:1.8; margin-top:12px; margin-bottom:12px; }
 .service-deliverables { gap:3px 10px; margin-bottom:12px; font-size:9px; }
 .service-enquiry { min-height:44px; font-size:10px; padding-top:10px; }
 .service-enquiry span { width:27px; height:27px; }
 .service-visual small,.film-study-corner { display:none; }
 .visual-identity { padding:0; gap:0; }
 .visual-identity>p { display:none; }
 .identity-emblem { flex-basis:54px; height:86px; transform:none; }
 .visual-website { padding:25px 0 0 10px; }
 .browser-study { width:130px; flex-shrink:0; height:126px; transform:rotate(-5deg); }
 .browser-study-scene { height:90px; }
 .browser-study-scene>span { font-size:20px; }
 .browser-study-bar { height:15px; }
 .browser-study-bar>span { display:none; }
 .film-study-play { width:35px; height:35px; font-size:16px; }
 .visual-film>img { object-position:50% 50%; }
 .visual-campaign { padding:12px; }
 .campaign-sheet { min-width:160px; transform:rotate(-12deg); }
 .visual-social { gap:5px; padding:25px 0; align-items:center; }
 .visual-social>img { width:57px; height:86px; flex-shrink:0; }
 .visual-social>img:first-child { display:none; }
 .visual-performance { padding:18px 7px; }
 .campaign-path>span { font-size:5px; padding:5px 2px; }
 .campaign-path>span:nth-of-type(3) { width:90%; }
 .campaign-path>span b { display:none; }
 .expertise-closing { display:block; margin-top:26px; padding-top:24px; }
 .expertise-closing .line-link { margin-top:16px; }
 .process-grid { grid-template-columns:1fr; gap:36px; }
 .process-heading h2 { font-size:46px; margin-block:22px; }
 .process-step h3 { font-size:32px; }
 .process-step { padding-bottom:34px; }
 .faq-grid { gap:24px; }
 .faq h2 { font-size:46px; margin-top:20px; }
 .faq-item .accordion-toggle { font-size:13px; padding-block:20px; }
}
@media(max-width:360px) {
 .studio-introduction { grid-template-columns:1fr 88px; gap:18px 12px; }
 .studio-statement h2 { font-size:34px; }
 .studio-detail-frame { height:145px; }
 .service-card { grid-template-columns:70px minmax(0,1fr); gap:0 11px; }
 .service-visual { width:70px; height:126px; }
 .service-body h3 { font-size:26px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .service-card:hover { border-color:#e2c99180; background:#ffffff0a; box-shadow:0 12px 35px #001b1d26; }
 .service-visual>img,.browser-study,.campaign-sheet,.identity-emblem,.campaign-path { transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
 .service-card:hover .visual-film>img { transform:scale(1.055); }
 .service-card:hover .browser-study { transform:translateY(-3px); }
 .service-card:hover .campaign-sheet { transform:rotate(0deg) translateY(-3px); }
 .service-card:hover .identity-emblem { transform:translateY(-8px) rotate(-5deg); }
 .service-card:hover .visual-social>img:first-child { transform:translateY(6px); }
 .service-card:hover .visual-social>img:last-child { transform:translateY(-6px); }
 .service-card:hover .campaign-path { transform:translateY(-4px); }
 .service-enquiry:hover span { transform:rotate(45deg); background:#e2c991; color:var(--teal-deep); }
}

/* Editorial type: direct statements in Manrope; a softer voice in Instrument Serif. */
body { font-size:15px; font-weight:400; }
h2,.studio-statement h2,.expertise h2,.process-heading h2,.faq h2,.contact h2 {
 font-family:var(--sans); font-size:clamp(46px,5.6vw,86px); font-weight:600;
 line-height:1.08; letter-spacing:-.045em;
}
h2 em { font-family:var(--serif); font-size:1.2em; line-height:.98; letter-spacing:-.025em; }
h1 { font-size:clamp(74px,8.6vw,138px); letter-spacing:-.025em; line-height:1.02; }
.studio-statement h2 { font-size:clamp(46px,5vw,74px); }
.studio-overline,.eyebrow,.tiny { font-weight:500; letter-spacing:.12em; }
.studio-description>p:first-of-type { font-family:var(--serif); font-size:30px; line-height:1.15; letter-spacing:-.015em; }
.studio-description>.muted,.process-step>p:not(.eyebrow):not(.process-output) { font-size:15px; line-height:1.85; }
.studio-detail figcaption { font-size:20px; }
.expertise-intro p,.work-intro,.process-heading>p:not(.eyebrow),.contact-copy>p:not(.eyebrow) { font-size:15px; line-height:1.85; }
.project-copy h3 { font-family:var(--serif); font-size:clamp(52px,6vw,92px); letter-spacing:-.025em; }
.process-step h3 { font-family:var(--sans); font-size:clamp(30px,2.9vw,42px); font-weight:600; letter-spacing:-.045em; }
.faq-item .accordion-toggle { font-size:15px; font-weight:500; letter-spacing:-.02em; }
.form-heading h3 { font-size:36px; letter-spacing:-.02em; }
.footer-wordmark { font-family:var(--serif); letter-spacing:-.035em; }

/* The service studies unfold beside the reading column, like the reference's split panels.
   Normal document flow remains the source of navigation, including without JavaScript. */
.expertise { overflow:clip; }
.service-experience { position:relative; }
.service-preview { display:none; }
.service-collection { display:block; }
.service-card {
 --service-radius:0px; --service-inset:0px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:7%; padding:40px 0; border:0; border-top:1px solid #fcf8f02e; border-radius:0;
 background:transparent; box-shadow:none; overflow:visible; align-items:center;
}
.service-card:hover { border-color:#fcf8f02e; background:transparent; box-shadow:none; }
.service-visual { width:100%; height:320px; margin:0; border-radius:8px; }
.service-body { padding:0; }
.service-index { font-size:10px; line-height:1.8; letter-spacing:.03em; margin-bottom:22px; }
.service-body h3 { max-width:480px; font-family:var(--sans); font-size:clamp(36px,3.8vw,58px); font-weight:600; line-height:1.08; letter-spacing:-.05em; text-wrap:balance; }
.service-description { max-width:410px; font-size:15px; line-height:1.85; margin:22px 0; color:#fcf8f0cc; }
.service-deliverables { font-size:10px; gap:8px 20px; margin-bottom:28px; color:#e5cd98; }
.service-enquiry { font-size:12px; max-width:390px; min-height:52px; border-color:#fcf8f02e; }
.service-enquiry span { width:36px; height:36px; }
.expertise-closing { margin-top:20px; }
.expertise-closing p { font-size:14px; }
.expertise-closing p em { font-size:30px; }

@media(min-width:901px) and (min-height:650px) {
 .service-experience.is-enhanced { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:9%; align-items:start; }
 .is-enhanced .service-preview { display:block; position:sticky; top:128px; padding-top:20px; }
 .service-preview-top,.service-preview-bottom { display:flex; justify-content:space-between; gap:20px; font-size:10px; line-height:1.6; }
 .service-preview-top { margin-bottom:20px; color:#fcf8f0a8; }
 .service-preview-count { color:#e5cd98; font-variant-numeric:tabular-nums; white-space:nowrap; }
 .service-preview-stage { position:relative; height:clamp(260px,44svh,500px); border-radius:8px; overflow:hidden; isolation:isolate; background:#294c47; }
 .service-preview-stage .service-visual { position:absolute; inset:0; height:100%; border-radius:0; opacity:0; clip-path:inset(0 0 100% 0); transition:clip-path .9s cubic-bezier(.22,1,.36,1),opacity .65s; pointer-events:none; }
 .service-preview-stage .service-visual.is-active { opacity:1; clip-path:inset(0); z-index:1; }
 .service-preview-stage .visual-identity { padding:40px; gap:35px; }
 .service-preview-stage .visual-identity>p { font-size:clamp(40px,4.6vw,72px); }
 .service-preview-stage .identity-emblem { flex-basis:100px; height:150px; border-radius:70px 70px 0 0; }
 .service-preview-stage .identity-emblem::after { font-size:90px; }
 .service-preview-stage .visual-website { padding:13% 9% 0; }
 .service-preview-stage .browser-study { height:100%; }
 .service-preview-stage .browser-study-scene { height:70%; }
 .service-preview-stage .browser-study-scene>span { font-size:clamp(36px,3.6vw,54px); }
 .service-preview-stage .browser-study-bar { height:30px; }
 .service-preview-stage .browser-study-foot { padding:25px; }
 .service-preview-stage .visual-campaign { padding:9% 10% 14%; }
 .service-preview-stage .visual-social { padding:10% 8%; align-items:center; gap:4%; }
 .service-preview-stage .visual-social>img { height:80%; object-fit:cover; }
 .service-preview-stage .visual-performance { padding:10%; }
 .service-preview-stage .campaign-path { max-width:330px; }
 .service-preview-stage .campaign-path>span { font-size:14px; padding:16px 18px; }
 .service-preview-stage .campaign-path>i { height:32px; }
 .service-preview-stage .service-visual small { font-size:10px; bottom:22px; left:26px; }
 .service-preview-stage .film-study-corner { font-size:9px; top:22px; left:26px; }
 .service-preview-bottom { margin-top:20px; color:#fcf8f080; }
 .service-preview-title { color:var(--cream); font-size:13px; }
 .service-preview-progress { display:flex; gap:7px; margin-top:20px; }
 .service-preview-progress i { flex:1; height:2px; background:#fcf8f026; transition:background .5s; }
 .service-preview-progress i.is-active { background:#e5cd98; }
 .is-enhanced .service-card { display:flex; min-height:clamp(390px,53svh,560px); padding:48px 0; }
 .is-enhanced .service-card>.service-visual { display:none; }
 .is-enhanced .service-card:last-child { padding-bottom:20px; }
 .is-enhanced .service-body { width:100%; flex:initial; }
 .is-enhanced .service-index { color:#fcf8f096; transition:color .5s; }
 .is-enhanced .service-card.is-active .service-index { color:#e5cd98; }
 .is-enhanced .service-card.is-active h3 { color:#e5cd98; }
 .is-enhanced .service-body h3 { transition:color .5s; }
}
@media(max-width:900px) {
 h2,.studio-statement h2,.expertise h2,.process-heading h2,.faq h2,.contact h2 { font-size:clamp(42px,6.5vw,64px); }
 h1 { font-size:clamp(65px,9vw,86px); }
 .studio-statement h2 { font-size:clamp(35px,5.3vw,48px); }
 .service-card { gap:6%; padding-block:32px; }
 .service-visual { height:280px; }
 .service-body h3 { font-size:36px; }
 .service-description { font-size:14px; margin-block:18px; }
 .service-index { margin-bottom:16px; }
 .service-deliverables { margin-bottom:20px; }
}
@media(max-width:600px) {
 h2,.studio-statement h2,.expertise h2,.process-heading h2,.faq h2,.contact h2 { font-size:clamp(40px,10.6vw,58px); line-height:1.08; letter-spacing:-.05em; }
 h1 { font-size:clamp(46px,13.5vw,74px); }
 .studio-statement h2 { font-size:clamp(30px,8vw,45px); }
 h2 em { font-size:1.17em; }
 .studio-description>p:first-of-type { font-size:28px; }
 .studio-description>.muted { font-size:13px; }
 .studio-detail figcaption { font-size:16px; line-height:1.35; }
 .service-card { display:flex; flex-direction:column; align-items:stretch; gap:26px; padding:30px 0; }
 .service-visual { width:100%; height:240px; border-radius:6px; }
 .service-visual small { display:block; font-size:9px; }
 .service-visual .film-study-corner { display:block; }
 .service-body { padding:0; }
 .service-body h3 { font-size:clamp(36px,10vw,44px); max-width:100%; }
 .service-index { font-size:10px; margin-bottom:12px; }
 .service-description { font-size:15px; line-height:1.8; margin-block:16px; }
 .service-deliverables { font-size:10px; }
 .service-enquiry { font-size:12px; max-width:none; }
 .visual-identity { padding:25px; gap:30px; }
 .visual-identity>p { display:block; font-size:50px; }
 .identity-emblem { flex-basis:80px; height:120px; }
 .visual-website { padding:24px 24px 0; }
 .browser-study { width:100%; height:235px; transform:translateY(4px); }
 .browser-study-bar { height:21px; }
 .browser-study-bar>span { display:block; }
 .browser-study-scene { height:160px; }
 .browser-study-scene>span { font-size:36px; }
 .visual-campaign { padding:20px 24px 34px; }
 .campaign-sheet { width:100%; max-width:320px; transform:rotate(-3deg); }
 .visual-social { padding:30px 24px; gap:12px; }
 .visual-social>img { width:28%; height:185px; }
 .visual-social>img:first-child { display:block; }
 .visual-performance { padding:24px 24px 40px; }
 .campaign-path { max-width:280px; }
 .campaign-path>span { font-size:12px; padding:8px 12px; }
 .campaign-path>span b { display:inline; }
 .expertise-closing p em { font-size:27px; }
 .faq-item .accordion-toggle { font-size:14px; }
 .project-copy h3 { font-size:clamp(40px,11.5vw,56px); }
 .form-heading h3 { font-size:32px; }
}
@media(prefers-reduced-motion:reduce) {
 .service-preview-stage .service-visual,.service-preview-progress i,.service-body h3,.service-index { transition:none; }
}

/* One smoothing clock, with native touch and reduced-motion fallbacks. */
html.has-smooth-scroll { scroll-behavior:auto; }
.work-pin { position:relative; }
.work-sequence.is-scroll-driven { height:calc(var(--showcase-height) + var(--showcase-runway)); }
.is-scroll-driven .work-pin { position:sticky; top:96px; }
.is-scroll-driven .work-viewport { overflow:clip; overflow-clip-margin:0; }
.work-scroll-status { position:relative; z-index:1; }
.work-viewport:focus-visible { outline-offset:-3px; }
@media(min-width:801px) and (min-height:600px) and (max-height:760px) {
 .project-frame { height:calc(100svh - 176px); padding-top:16px; padding-bottom:48px; }
 .project-copy { padding-block:4px; }
 .project-copy h3 { font-size:clamp(56px,5.8vw,84px); }
 .project-kicker { margin-bottom:14px; }
 .project-tagline { font-size:26px; margin:14px 0 0; }
 .project-actions { margin-top:18px; }
}
@media(min-width:801px) and (min-height:600px) and (max-height:660px) {
 .project-copy h3 { font-size:60px; }
 .project-kicker { margin-bottom:10px; }
 .project-tagline { font-size:22px; margin-top:10px; }
 .project-actions { margin-top:14px; }
}

/* The intro's custom letterforms become a single, consistent studio signature. */
.wordmark { gap:4px; flex:none; align-items:center; letter-spacing:0; }
.brand-mark { display:block; width:190px; height:auto; overflow:visible; fill:currentColor; }
.wordmark-period { font:600 30px/1 var(--sans); align-self:center; margin-top:11px; }
.primary-nav a { font-size:12px; font-weight:500; }

/* A final architectural chapter, anchored by the oversized studio signature. */
.site-footer { position:relative; isolation:isolate; overflow:hidden; padding:84px 0 26px; background:var(--hero-blue); color:var(--cream); }
.site-footer::before { content:""; position:absolute; z-index:-1; width:640px; height:900px; top:100px; left:-240px; border:1px solid #c9deea20; border-radius:50% 50% 0 0; transform:rotate(-24deg); pointer-events:none; }
.footer-invitation { display:flex; align-items:center; justify-content:space-between; gap:48px; padding-bottom:64px; border-bottom:1px solid #fcf8f033; }
.footer-invitation .eyebrow { color:var(--footer-accent); font-size:10px; margin-bottom:28px; }
.footer-invitation h2 { font-size:clamp(56px,6.4vw,100px); font-weight:600; letter-spacing:-.055em; line-height:1.05; }
.footer-invitation h2 em { color:var(--footer-accent); font-size:1.18em; }
.footer-conversation { display:flex; flex-direction:column; align-items:center; gap:18px; flex-shrink:0; font-size:12px; }
.footer-conversation-arrow { display:grid; place-items:center; width:116px; height:116px; border:1px solid #c9deea80; border-radius:50%; font:400 58px/1 var(--sans); color:var(--footer-accent); transition:background .4s,color .4s,transform .6s; }
.footer-conversation:hover .footer-conversation-arrow { background:var(--footer-accent); color:var(--hero-blue); transform:rotate(45deg); }
.footer-top { display:grid; grid-template-columns:1fr 1fr auto; gap:48px; align-items:start; padding-top:42px; }
.footer-top>p { width:auto; font-size:16px; line-height:1.65; letter-spacing:-.025em; }
.footer-top>p>span { display:block; margin-top:19px; font-size:10px; color:#fcf8f0b8; letter-spacing:.04em; }
.footer-top nav { display:grid; grid-template-columns:1fr 1fr; gap:17px 35px; font-size:12px; }
.footer-top nav a { display:flex; justify-content:space-between; gap:16px; color:#fcf8f0c9; }
.footer-top nav a span { color:var(--footer-accent); transition:transform .3s; }
.footer-top nav a:hover { color:var(--footer-accent); }
.footer-top nav a:hover span { transform:translate(2px,-2px); }
.site-footer .back-top { display:flex; gap:18px; align-items:center; font-size:10px; }
.back-top-arrow { display:grid; place-items:center; width:40px; height:40px; border:1px solid #fcf8f040; border-radius:50%; color:var(--footer-accent); font-size:18px; transition:background .3s,color .3s; }
.back-top:hover .back-top-arrow { background:var(--footer-accent); color:var(--hero-blue); }
.footer-brand-caption { display:flex; justify-content:space-between; gap:24px; margin-top:76px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#fcf8f0b8; }
.footer-wordmark { position:relative; display:block; width:100%; margin:28px 0 24px; padding:0; line-height:0; color:var(--cream); text-align:left; }
.footer-brand { display:block; width:100%; height:auto; overflow:visible; fill:currentColor; stroke:currentColor; stroke-width:.18; }
.footer-letter { transition:color .55s; }
.footer-letter:last-child { color:inherit; }
.footer-brand-rule { height:1px; background:#fcf8f026; overflow:hidden; }
.footer-brand-rule span { display:block; height:100%; width:100%; background:var(--footer-accent); transform-origin:left; }
.footer-bottom { align-items:center; border:0; padding-top:22px; font-size:9px; line-height:1.6; color:#fcf8f0b8; }
.footer-bottom>span:nth-child(2) { color:var(--footer-accent); }
@media(max-width:1000px) {
 .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
 .footer-top .back-top { grid-column:2; }
 .footer-invitation { gap:28px; }
 .footer-invitation h2 { font-size:clamp(48px,6.5vw,68px); }
 .brand-mark { width:170px; }
}
@media(max-width:600px) {
 .brand-mark { width:155px; }
 .wordmark-period { font-size:24px; margin-top:9px; }
 .site-footer { padding:56px 0 24px; }
 .footer-invitation { align-items:start; flex-direction:column; gap:30px; padding-bottom:36px; }
 .footer-invitation .eyebrow { font-size:9px; max-width:240px; margin-bottom:24px; line-height:1.7; }
 .footer-invitation h2 { font-size:clamp(42px,11.2vw,64px); }
 .footer-conversation { flex-direction:row; gap:16px; font-size:12px; }
 .footer-conversation-arrow { width:64px; height:64px; font-size:36px; }
 .footer-top { grid-template-columns:1fr; gap:28px; padding-top:32px; }
 .footer-top>p { font-size:17px; }
 .footer-top>p>span { margin-top:12px; }
 .footer-top nav { gap:18px 24px; font-size:12px; }
 .footer-top .back-top { grid-column:auto; justify-content:space-between; }
 .footer-brand-caption { margin-top:48px; font-size:8px; line-height:1.7; }
 .footer-brand-caption>span { max-width:47%; }
 .footer-brand-caption>span:last-child { text-align:right; }
 .footer-wordmark { margin:25px 0; }
 .footer-bottom { justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:8px; }
 .footer-bottom>span:last-child { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
 .footer-letter,.footer-conversation-arrow { transition:none; }
}

/* The blue in the architectural hero carries through the navigation and footer. */
:root { --hero-blue:#35556d; --hero-blue-deep:#233f55; --footer-accent:#c9deea; }
.site-header[data-tone="dark"] {
 --nav-surface:#233f55; --nav-glass:#233f55f7; --nav-ink:#fcf8f0;
 --nav-border:#d5e2ec50; --nav-accent:#c9deea; --nav-button:#ffffff16;
}
.site-header[data-tone="light"] {
 --nav-surface:#f1f5f7; --nav-glass:#f1f5f7fa; --nav-ink:#233f55;
 --nav-border:#233f5530; --nav-accent:#35556d; --nav-button:#233f5510;
}
.site-header[data-tone][data-section="top"] { --nav-glass:#233f5538; --nav-border:#ffffff38; }
.site-header[data-tone] { color:var(--nav-ink); background:transparent; box-shadow:none; transition:color .35s; }
.site-header[data-tone] .header-inner {
 background:var(--nav-glass); color:var(--nav-ink); border-color:var(--nav-border);
 box-shadow:0 7px 28px #102e3521; -webkit-backdrop-filter:blur(18px);
 transition:background .4s,border-color .4s,color .35s,box-shadow .4s;
}
.site-header[data-section="top"] .header-inner { box-shadow:0 4px 24px #102e350a; }
.site-header[data-tone] .wordmark-period { color:var(--nav-accent); }
.site-header[data-tone] .primary-nav a { color:var(--nav-ink); }
.site-header[data-tone] .primary-nav a.is-active::after { background:var(--nav-accent); }
.site-header[data-tone] .nav-cta { color:var(--nav-ink); background:transparent; border-color:var(--nav-border); }
.site-header[data-tone] .nav-cta::before { background:var(--nav-ink); }
.site-header[data-tone] .nav-cta>span { background:var(--nav-button); }
.site-header[data-tone] .nav-cta:hover { color:var(--nav-surface); background:transparent; }
.site-header[data-tone] .nav-cta:hover>span { background:var(--nav-button); }
.site-header[data-tone] .menu-toggle { color:var(--nav-ink); border-color:var(--nav-border); }
.site-header[data-tone] .primary-nav.is-open { background:var(--nav-surface); color:var(--nav-ink); border-color:var(--nav-border); }
.site-header[data-tone] .primary-nav.is-open a:not(.nav-cta):hover { background:var(--nav-button); }

/* Right-to-left liquid ink, kept separate from the letter entrance transforms. */
.footer-wave { opacity:0; pointer-events:none; stroke:none; }
.footer-wave-motion { transform:translateX(510px); }
@media(prefers-reduced-motion:reduce) {
 .site-header[data-tone],.site-header[data-tone] .header-inner { transition:none; }
 .footer-wave { display:none; }
}