:root {
  --ivory: #f3fbfc;
  --paper: #ffffff;
  --ink: #202020;
  --turquoise: #12bfc0;
  --cobalt: #2667c9;
  --midnight: #172a55;
  --sky: #dff7f7;
  --line: rgba(23, 42, 85, 0.18);
  --serif: "Italiana", "Times New Roman", serif;
  --sans: "DM Sans", Arial, sans-serif;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { height: 104px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 30; transition: height .3s ease; }
.site-header.is-scrolled { height: 84px; }
.brand { display: inline-flex; align-items: center; width: max-content; }
.brand img { width: 88px; height: 88px; object-fit: contain; display: block; }
.site-header.is-scrolled .brand img { width: 72px; height: 72px; }
.desktop-nav { display: flex; gap: clamp(1.5rem, 3vw, 3rem); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; }
.desktop-nav a, .site-footer nav a { position: relative; }
.desktop-nav a::after, .site-footer nav a::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -.4rem; background: currentColor; transition: right .25s; }
.desktop-nav a:hover::after, .site-footer nav a:hover::after { right: 0; }
.header-cta { justify-self: end; border: 1px solid var(--ink); padding: .75rem 1.25rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; transition: .2s; }
.header-cta:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.menu-toggle,.mobile-menu { display: none; }
.eyebrow { margin: 0 0 1.25rem; font-size: .66rem; line-height: 1.3; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1,h2 { font-family: var(--serif); font-weight: 400; line-height: .96; letter-spacing: -.025em; }
h1 { font-size: clamp(4rem, 8.3vw, 8.8rem); margin-bottom: 1.7rem; }
h1 em { font-weight: 400; color: var(--cobalt); }
h2 { font-size: clamp(3.25rem, 6vw, 6.5rem); margin-bottom: 1.75rem; }
.hero { min-height: calc(100vh - 94px); padding: clamp(3.5rem, 7vw, 7rem) var(--pad) 3rem; display: grid; grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); align-items: center; gap: 7vw; position: relative; overflow: hidden; }
.hero::before { content:""; position:absolute; width: 34vw; aspect-ratio:1; border:1px solid rgba(18,191,192,.24); border-radius:50%; left:-18vw; top:10%; }
.hero-copy { max-width: 760px; position: relative; z-index: 2; }
.hero-intro { font-size: clamp(1rem, 1.4vw, 1.28rem); max-width: 36rem; line-height: 1.6; }
.hero-commission { max-width:36rem; margin:1.4rem 0 0; padding-left:1rem; border-left:2px solid var(--turquoise); color:#4f5965; font-size:.9rem; line-height:1.65; }
.hero-actions,.connect-actions { display:flex; align-items:center; gap: 1.8rem; margin-top: 2.2rem; flex-wrap: wrap; }
.button { display: inline-flex; align-items:center; justify-content:center; min-height: 51px; padding: .9rem 1.45rem; text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; font-weight:600; border: 1px solid transparent; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--midnight); color: var(--paper); }.button-dark:hover { background: var(--cobalt); }
.button-light { background: var(--paper); color: var(--ink); }
.text-link { display: inline-flex; gap: .8rem; align-items:center; border-bottom: 1px solid var(--ink); padding-bottom: .35rem; font-size: .73rem; text-transform: uppercase; letter-spacing: .14em; }
.text-link span { font-size: 1rem; transition: transform .2s; }.text-link:hover span { transform: translate(3px,-3px); }
.hero-art { height: min(70vh, 760px); min-height: 500px; position: relative; }
.art-panel { position: absolute; margin: 0; box-shadow: 0 25px 60px rgba(23,42,85,.18); overflow: hidden; background-color: var(--turquoise); }
.art-panel img { display:block; width:100%; height:100%; object-fit:cover; }
.art-one img { object-position:50% 47%; }
.art-two img,.art-three img { object-position:center; }
.story-portrait span { position:absolute; inset:auto 1rem 1rem; color:rgba(255,255,255,.78); font-size:.58rem; text-transform:uppercase; letter-spacing:.18em; }
.art-one { inset: 2% 7% 25% 24%; background: linear-gradient(145deg,var(--midnight) 4%,var(--cobalt) 38%,var(--turquoise) 39%,#8ce6e0 62%,var(--midnight) 85%); }
.art-two { width:40%; height:43%; left:0; bottom:3%; background: linear-gradient(30deg,var(--turquoise),#b8f1ef 48%,var(--cobalt) 49%,var(--midnight) 73%,#4d8ee4); transform: rotate(-2.5deg); }
.art-three { width:31%; height:35%; right:0; bottom:6%; background: conic-gradient(from 160deg,var(--midnight),var(--turquoise),#e9ffff,var(--cobalt),#0c3c8c); transform: rotate(3deg); }
.scroll-cue { position:absolute; left:var(--pad); bottom:1.5rem; display:flex; gap:1rem; align-items:center; font-size:.6rem; letter-spacing:.17em; text-transform:uppercase; }
.scroll-cue i { display:block; width:48px; height:1px; background:var(--ink); }
.statement { min-height: 72vh; background: var(--midnight); color: var(--paper); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding: 7rem var(--pad); overflow:hidden; }
.statement blockquote { font-family:var(--serif); font-size:clamp(3.1rem,7vw,7.2rem); line-height:1.04; margin:0; max-width:1200px; }
.statement-rule { width:min(540px,68vw); height:1px; background:rgba(255,255,255,.35); margin-top:3.5rem; position:relative; }
.statement-rule::after { content:""; width:11px;height:11px;border:1px solid var(--turquoise);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--midnight); }
.section { padding: clamp(6rem,10vw,11rem) var(--pad); }
.section-heading { display:grid; grid-template-columns:1fr minmax(260px,420px); gap:4rem; align-items:end; border-bottom:1px solid var(--line); padding-bottom:2.5rem; }
.section-heading h2 { margin:0; }.section-heading>p { color:#4f544e; line-height:1.7; margin:0; }
.art-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.5rem,5vw,6rem) clamp(1.5rem,3vw,3.2rem); align-items:start; margin-top:3.5rem; }
.work-card-tall .work-art { aspect-ratio:4/5; }.work-card-square .work-art { aspect-ratio:1; }
.work-button { appearance:none; border:0; background:none; width:100%; padding:0; text-align:left; cursor:pointer; }
.work-art { display:block; aspect-ratio:5/4; position:relative; overflow:hidden; background:var(--midnight); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.work-art img { display:block; width:100%; height:100%; object-fit:cover; }
.work-button:hover .work-art { transform:scale(.985); }
.work-meta { display:flex; justify-content:space-between; align-items:start; padding-top:1.1rem; }
.work-meta strong { display:block; color:var(--cobalt); font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em; }.work-meta small { display:block;margin-top:.5rem;color:var(--ink);font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.2; }.work-meta i { font-style:normal;font-size:1.2rem; }
.story { background:var(--paper); display:grid; grid-template-columns:minmax(280px,.85fr) minmax(320px,1.15fr); gap:clamp(3rem,9vw,10rem); align-items:center; }
.story-portrait { height:clamp(620px,68vw,820px);margin:0;position:relative;background:var(--midnight);overflow:hidden; }
.story-portrait img { display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%; }
.story-copy { max-width:650px; }.story-copy .lead { font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2.45rem);line-height:1.3; }.story-copy>p:not(.eyebrow):not(.lead) { max-width:35rem;line-height:1.8;color:#555a54; }.story-copy .text-link { margin-top:1.3rem; }
.process { display:grid;grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr);gap:clamp(4rem,10vw,12rem); }
.process-intro { position:sticky;top:130px;align-self:start; }.process-list { list-style:none;margin:0;padding:0; }.process-list li { display:grid;grid-template-columns:55px 1fr;gap:1.5rem;padding:0 0 2.4rem;margin-bottom:2.4rem;border-bottom:1px solid var(--line); }.process-list li>span { font-size:.66rem;letter-spacing:.15em; }.process-list h3 { font-family:var(--serif);font-size:2.4rem;font-weight:400;margin-bottom:.7rem; }.process-list p { color:#555a54;line-height:1.7;max-width:33rem;margin:0; }
.connect { min-height:78vh;background:linear-gradient(135deg,var(--cobalt),var(--midnight));color:var(--paper);display:flex;align-items:center;position:relative;overflow:hidden; }
.connect-layout { width:100%;display:grid;grid-template-columns:minmax(320px,.85fr) minmax(470px,1.15fr);gap:clamp(3rem,7vw,8rem);align-items:center;position:relative;z-index:2; }
.connect-inner { position:relative;z-index:2;max-width:720px; }
.connect-inner h2 { font-size:clamp(3.25rem,5.5vw,6rem); }
.connect-inner>p:not(.eyebrow) { max-width:38rem;font-size:1.08rem;line-height:1.7; }
.text-link-light { border-color:var(--paper); }
.channel-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;position:relative;z-index:2; }
.channel-card { background:var(--paper);color:var(--ink);padding:1.15rem;box-shadow:0 22px 55px rgba(7,24,61,.24); }
.channel-heading { display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:.2rem .2rem 1rem;border-bottom:1px solid var(--line); }
.channel-heading span { font-size:.56rem;text-transform:uppercase;letter-spacing:.16em;color:#606b80; }
.channel-heading strong { font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--midnight); }
.channel-card>a:has(img) { display:block;margin:1rem auto;width:min(100%,230px); }
.channel-card img { display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff; }
.channel-handle { display:flex;justify-content:space-between;align-items:center;gap:.6rem;border-top:1px solid var(--line);padding:.9rem .2rem .15rem;font-size:.66rem;font-weight:600;letter-spacing:.04em;color:var(--cobalt); }
.channel-handle span { font-size:.95rem; }
.channel-grid>small { grid-column:1/-1;color:rgba(255,255,255,.78);line-height:1.6; }
.connect-orbit { position:absolute;width:min(55vw,760px);aspect-ratio:1;right:-13vw;top:50%;transform:translateY(-50%); }.connect-orbit i { position:absolute;border:1px solid rgba(255,255,255,.3);border-radius:50%;inset:0; }.connect-orbit i:nth-child(2){inset:15%;}.connect-orbit i:nth-child(3){inset:31%;background:rgba(255,255,255,.04);}
.site-footer { background:var(--midnight);color:var(--paper);padding:4rem var(--pad) 2rem;display:grid;grid-template-columns:1.2fr 1fr .6fr;gap:4rem; }.brand-footer img{width:150px;height:150px;background:#fff;border-radius:50%}.site-footer>p{opacity:.75;line-height:1.7}.site-footer nav{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em}.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;margin-top:2rem;display:flex;justify-content:space-between;opacity:.6;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}
.piece-dialog { width:min(1080px,92vw);padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px rgba(0,0,0,.35);grid-template-columns:1.15fr .85fr; }.piece-dialog[open]{display:grid}.piece-dialog::backdrop{background:rgba(25,30,26,.76);backdrop-filter:blur(5px)}.dialog-art{min-height:600px;position:relative;background:var(--midnight)}.dialog-art img{display:block;width:100%;height:100%;object-fit:contain}.dialog-copy{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center}.dialog-copy h2{font-size:clamp(3rem,5vw,5rem)}.dialog-copy>p:not(.eyebrow){line-height:1.7;color:#555a54}.dialog-copy .button{align-self:flex-start;margin-top:1.5rem}.dialog-close{position:absolute;right:1rem;top:1rem;border:0;background:var(--paper);width:40px;height:40px;border-radius:50%;font-size:1.6rem;cursor:pointer;z-index:2}
.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }.reveal.is-visible { opacity:1;transform:none; }
[aria-disabled="true"] { opacity:.65; cursor:default; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}
@media (max-width:900px){.site-header{grid-template-columns:1fr auto;height:84px}.brand img,.site-header.is-scrolled .brand img{width:72px;height:72px}.desktop-nav,.header-cta{display:none}.menu-toggle{display:grid;gap:6px;border:0;background:none;padding:.6rem;cursor:pointer}.menu-toggle span{display:block;width:27px;height:1px;background:var(--ink)}.mobile-menu{display:flex;position:fixed;inset:84px 0 auto;background:var(--paper);padding:2rem var(--pad) 3rem;flex-direction:column;gap:1.5rem;transform:translateY(-120%);opacity:0;pointer-events:none;transition:.3s;box-shadow:0 15px 35px rgba(23,42,85,.1)}.menu-open .mobile-menu{transform:none;opacity:1;pointer-events:auto}.hero{grid-template-columns:1fr;min-height:auto;padding-top:5rem}.hero-art{height:70vw;min-height:430px}.scroll-cue{display:none}.section-heading,.story,.process,.connect-layout{grid-template-columns:1fr}.story-portrait{height:min(112vw,800px)}.process-intro{position:static}.channel-grid{max-width:670px}.site-footer{grid-template-columns:1fr 1fr}.site-footer nav{grid-column:2}.piece-dialog[open]{grid-template-columns:1fr;max-height:92vh;overflow:auto}.dialog-art{min-height:55vh}}
@media (max-width:600px){:root{--pad:1.25rem}.brand img,.site-header.is-scrolled .brand img{width:66px;height:66px}.hero{gap:3.5rem;padding-bottom:5rem}.hero-art{min-height:390px}.art-one{inset:0 2% 25% 16%}.art-three{right:2%}.image-note{display:none}.statement{min-height:62vh}.section{padding-top:6.5rem;padding-bottom:6.5rem}.section-heading{gap:1.5rem}.art-grid{grid-template-columns:1fr;margin-top:2.5rem}.story-portrait{height:118vw;max-height:620px}.connect-actions{align-items:flex-start;flex-direction:column}.channel-grid{grid-template-columns:1fr}.channel-grid>small{grid-column:1}.channel-card>a:has(img){width:min(100%,260px)}.site-footer{grid-template-columns:1fr;gap:2rem}.site-footer nav{grid-column:1}.footer-bottom{flex-direction:column;gap:.7rem}.piece-dialog{width:94vw}.dialog-art{min-height:48vh}}
