:root{
  --paper:#f4f1ed;
  --paper-2:#ebe8e3;
  --ink:#20201f;
  --charcoal:#181817;
  --white:#f8f6f2;
  --muted:#77736e;
  --line:rgba(32,32,31,.17);
  --dark-line:rgba(248,246,242,.18);
  --yellow:#f1e45c;
  --orange:#efa654;
  --lilac:#c6bdd6;
  --blue:#385979;
  /* Accent colors sampled from the supplied 2026 logo */
  --logo-yellow:#ffca1a;
  --logo-orange:#f47829;
  --logo-red:#ef454e;
  --logo-purple:#614099;
  --logo-green:#57bc71;
  --logo-teal:#0eaab9;
  --ease:cubic-bezier(.2,.75,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}

.site-header{position:fixed;z-index:30;top:0;left:0;width:100%;height:84px;padding:0 3.5vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(244,241,237,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(32,32,31,.07)}
.brand{width:min(255px,24vw)}
.brand img{width:100%;height:auto}
.site-header nav{display:flex;gap:28px;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.09em}
.site-header nav a{position:relative;padding:10px 0}
.site-header nav a::after{content:"";position:absolute;left:0;bottom:4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.site-header nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header-cta{justify-self:end;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;border:1px solid var(--ink);padding:13px 15px;transition:background .25s,color .25s}
.header-cta:hover{background:var(--ink);color:var(--white)}
.header-cta span{margin-left:12px}

.section{position:relative;min-height:100svh;padding:11vw 7vw;overflow:hidden}
.section-mark{position:absolute;right:2.5vw;top:50%;writing-mode:vertical-rl;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.13em;color:var(--muted)}
.dark{background:var(--charcoal);color:var(--white)}
.dark .section-mark{color:#7e7b75}
.eyebrow,.hero-kicker{font:500 10px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em;text-transform:uppercase}
.eyebrow{margin:0 0 30px}

.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:130px}
.paper-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:8.333vw 8.333vw;mask-image:linear-gradient(to bottom,transparent 2%,black 18%,black 83%,transparent 100%);opacity:.38}
.glow{position:absolute;border-radius:50%;filter:blur(44px);opacity:.58;mix-blend-mode:multiply;pointer-events:none}
.glow-yellow{width:31vw;height:31vw;background:var(--yellow);right:4vw;top:12vh}
.glow-lilac{width:23vw;height:23vw;background:var(--lilac);left:-5vw;bottom:4vh}
.glow-orange{width:12vw;height:12vw;background:var(--orange);right:24vw;bottom:10vh}
.hero-kicker{position:relative;z-index:2;margin-bottom:38px;color:#55514d}
.hero-kicker span{padding:0 10px;color:#aaa39c}
.hero-title{position:relative;z-index:2;margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(92px,14.3vw,230px);font-weight:400;line-height:.68;letter-spacing:-.075em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.1em}
.hero-title .line>span{display:block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
.hero-title .line:nth-child(2)>span{animation-delay:.08s}.hero-title .line:nth-child(3)>span{animation-delay:.16s}
.hero-title .offset{padding-left:26vw;font-style:italic;font-size:.72em;color:#55514d}
@keyframes rise{to{transform:translateY(0)}}
.hero-bottom{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;margin-top:42px;padding-left:37vw;gap:40px}
.hero-bottom p{max-width:540px;margin:0;font-size:14px;line-height:1.75;color:#57534f}
.hero-bottom strong{color:var(--ink)}
.text-link{white-space:nowrap;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:8px}
.text-link span{margin-left:14px}

.about{display:grid;grid-template-columns:1.05fr .78fr;gap:9vw;align-items:center;background:linear-gradient(115deg,var(--paper) 0%,var(--paper) 70%,#eee7dc 100%)}
.about-copy h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,6.3vw,104px);line-height:.92;letter-spacing:-.055em;font-weight:400;margin:0 0 55px}
.about-copy h2 em{font-weight:400;color:#796d92}
.about-text{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:850px}
.about-text p{margin:0;font-size:13px;line-height:1.75;color:#5f5a55}
.about-text p:first-child{grid-column:1/-1;font-size:17px;color:var(--ink);max-width:660px}
.portrait-wrap{margin:0;position:relative}
.portrait-frame{position:relative;aspect-ratio:.64/1;overflow:hidden;border-radius:260px 260px 28px 28px;background:#eeeae5;box-shadow:0 35px 70px rgba(47,39,32,.14)}
.portrait-frame::before{content:"";position:absolute;inset:17px;border:1px solid rgba(32,32,31,.17);border-radius:250px 250px 22px 22px;z-index:2;pointer-events:none}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:49% 45%;transform:scale(1.08)}
.portrait-wrap figcaption{margin-top:16px;font:500 9px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

.experience{min-height:auto;padding-top:10vw;padding-bottom:9vw}
.experience-head{display:grid;grid-template-columns:.55fr 1.45fr;align-items:start;gap:5vw;margin-bottom:8vw}
.experience-head h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(52px,7.8vw,125px);line-height:.88;letter-spacing:-.06em;font-weight:400;max-width:1150px}
.experience-head h2 span{color:var(--yellow);font-style:italic}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dark-line);border-left:1px solid var(--dark-line)}
.proof-card{min-height:350px;padding:34px 28px 38px;border-right:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);display:flex;flex-direction:column}
.proof-number{font-family:Georgia,"Times New Roman",serif;font-size:clamp(58px,6vw,95px);line-height:1;color:var(--yellow);letter-spacing:-.055em}
.proof-card h3{font-size:17px;margin:45px 0 14px}
.proof-card p{font-size:12px;line-height:1.7;color:#aaa59e;margin:0}
.experience-line{display:flex;align-items:center;gap:20px;margin-top:42px;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:#99948e;white-space:nowrap}
.experience-line i{height:1px;background:#57544f;flex:1}

.capabilities{min-height:auto;padding-top:10vw;padding-bottom:10vw}
.cap-title{display:grid;grid-template-columns:.45fr 1.55fr;gap:5vw;align-items:start;margin-bottom:7vw}
.cap-title h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(58px,8.5vw,140px);line-height:.85;letter-spacing:-.065em;font-weight:400}
.cap-title h2 span{color:#8e849e;font-style:italic}
.cap-list{border-top:1px solid var(--line)}
.cap-item{display:grid;grid-template-columns:60px 1.05fr 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),background .3s}
.cap-item:hover{padding-left:18px;background:rgba(255,255,255,.24)}
.cap-item>span{font:500 9px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9b958f}
.cap-item h3{margin:0;font-size:22px;letter-spacing:-.02em}
.cap-item p{margin:0;max-width:650px;font-size:12px;line-height:1.75;color:#68635e}

.approach{min-height:auto;padding-top:10vw;padding-bottom:10vw}
.approach-quote h2{margin:0;max-width:1300px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(58px,7.7vw,126px);line-height:.9;letter-spacing:-.06em;font-weight:400}
.approach-quote h2 span{color:#77736e;font-style:italic}
.approach-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8vw;border-top:1px solid var(--dark-line);border-left:1px solid var(--dark-line)}
.step{padding:30px 26px 38px;border-right:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
.step b{font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--yellow)}
.step h3{font-family:Georgia,"Times New Roman",serif;font-size:34px;font-weight:400;margin:35px 0 14px}
.step p{font-size:12px;line-height:1.7;color:#a29e98;margin:0}

.contact{min-height:100svh;display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:center;padding-top:10vw;padding-bottom:12vw;background:linear-gradient(130deg,#f3f0ec 0%,#f3f0ec 55%,#ede7de 100%)}
.contact-intro h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(62px,7.2vw,116px);line-height:.86;letter-spacing:-.06em;font-weight:400}
.contact-intro h2 span{color:#7f7192;font-style:italic}
.contact-intro>p:last-of-type{max-width:560px;margin:42px 0 0;font-size:13px;line-height:1.8;color:#5f5a55}
.direct-links{display:flex;flex-wrap:wrap;gap:18px 25px;margin-top:38px;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.direct-links a{border-bottom:1px solid currentColor;padding-bottom:6px}.direct-links a span{padding-left:8px}
.direct-links>span{color:#8e8982}
.contact-form{background:rgba(255,255,255,.45);border:1px solid rgba(32,32,31,.16);padding:38px;backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(45,35,25,.08)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form label{display:block;margin-bottom:24px}
.contact-form label>span{display:block;margin-bottom:9px;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6d6761}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:0;border-bottom:1px solid #aaa49c;background:transparent;border-radius:0;padding:10px 0 12px;outline:none;color:var(--ink);font-size:14px;transition:border-color .2s}
.contact-form textarea{resize:vertical;min-height:125px}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--ink)}
.contact-form .invalid{border-color:#a24438}
.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:12px}
.form-bottom p{margin:0;max-width:330px;font-size:10px;line-height:1.5;color:#77716b}
.form-bottom button{display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:195px;border:1px solid var(--ink);background:var(--ink);color:var(--white);padding:15px 17px;cursor:pointer;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;transition:background .25s,color .25s}
.form-bottom button:hover{background:transparent;color:var(--ink)}
.contact footer{position:absolute;left:7vw;right:7vw;bottom:28px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#77716b;text-transform:uppercase}
.contact footer img{width:190px;opacity:.72}

.cursor-dot,.cursor-ring{position:fixed;z-index:100;pointer-events:none;border-radius:50%;opacity:0}.cursor-dot{width:5px;height:5px;background:var(--ink);transform:translate(-50%,-50%)}.cursor-ring{width:32px;height:32px;border:1px solid var(--ink);transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s,background .2s}
@media (pointer:fine){body:hover .cursor-dot,body:hover .cursor-ring{opacity:1}}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@media (max-width:1000px){
  .site-header{grid-template-columns:1fr auto}.site-header nav{display:none}.brand{width:230px}
  .section{padding:15vw 7vw}.hero{padding-top:130px}.hero-bottom{padding-left:22vw}
  .about{grid-template-columns:1fr .8fr;gap:6vw}.about-text{grid-template-columns:1fr}.about-text p:first-child{grid-column:auto}
  .proof-grid{grid-template-columns:1fr 1fr}.experience-line{flex-wrap:wrap}.experience-line i{min-width:50px}
  .approach-steps{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr;gap:8vw;padding-bottom:140px}.contact-intro{max-width:850px}.contact-form{max-width:800px}
}

@media (max-width:700px){
  .site-header{height:68px;padding:0 20px}.brand{width:180px}.header-cta{font-size:8px;padding:10px}.header-cta span{margin-left:7px}
  .section{padding:28vw 8vw 24vw}.section-mark{right:14px}.hero{padding-top:110px;min-height:100svh}
  .paper-grid{background-size:25vw 25vw}.glow-yellow{width:65vw;height:65vw;right:-20vw;top:14vh}.glow-lilac{width:50vw;height:50vw}.glow-orange{width:28vw;height:28vw;right:8vw}
  .hero-kicker{font-size:8px;max-width:300px;line-height:1.8}.hero-kicker span{padding:0 5px}.hero-title{font-size:23vw;line-height:.73}.hero-title .offset{padding-left:14vw}.hero-bottom{display:block;padding-left:10vw;margin-top:35px}.hero-bottom p{font-size:12px}.hero-bottom .text-link{display:inline-block;margin-top:28px}
  .about{display:block}.about-copy h2{font-size:15vw}.about-text p{font-size:12px}.about-text p:first-child{font-size:15px}.portrait-wrap{margin-top:16vw;width:88%}
  .experience-head,.cap-title{display:block}.experience-head h2,.cap-title h2{font-size:16vw}.proof-grid{grid-template-columns:1fr}.proof-card{min-height:auto}.experience-line{display:none}
  .cap-item{grid-template-columns:38px 1fr}.cap-item p{grid-column:2}.cap-item h3{font-size:18px}
  .approach-quote h2{font-size:15vw}.approach-steps{grid-template-columns:1fr}.step h3{font-size:30px}
  .contact{display:block;padding-bottom:150px}.contact-intro h2{font-size:17vw}.contact-form{margin-top:14vw;padding:25px 20px}.field-row{grid-template-columns:1fr;gap:0}.form-bottom{display:block}.form-bottom button{width:100%;margin-top:20px}.direct-links{flex-direction:column;align-items:flex-start}.contact footer{left:8vw;right:8vw;display:block}.contact footer img{width:150px;margin-bottom:12px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-title .line>span{animation:none;transform:none}.reveal{opacity:1;transform:none;transition:none}}

/* V1.2 motion refinements */
.glow-yellow{animation:glowYellowLoop 11s ease-in-out infinite}
.glow-lilac{animation:glowLilacLoop 13s ease-in-out infinite}
.glow-orange{animation:glowOrangeLoop 9s ease-in-out infinite}
@keyframes glowYellowLoop{
  0%,100%{background:#f1e45c;transform:translate3d(0,0,0) scale(1);opacity:.56}
  33%{background:#efb36c;transform:translate3d(-3vw,4vh,0) scale(1.12);opacity:.48}
  66%{background:#c9bddb;transform:translate3d(2vw,-2vh,0) scale(.92);opacity:.62}
}
@keyframes glowLilacLoop{
  0%,100%{background:#c6bdd6;transform:translate3d(0,0,0) scale(1);opacity:.54}
  36%{background:#e8c77d;transform:translate3d(4vw,-4vh,0) scale(1.08);opacity:.45}
  72%{background:#b8ced9;transform:translate3d(-2vw,3vh,0) scale(.9);opacity:.6}
}
@keyframes glowOrangeLoop{
  0%,100%{background:#efa654;transform:translate3d(0,0,0) scale(1);opacity:.55}
  45%{background:#e8d759;transform:translate3d(-4vw,-2vh,0) scale(1.18);opacity:.48}
  75%{background:#c7b8d6;transform:translate3d(2vw,3vh,0) scale(.86);opacity:.58}
}
.hero-title .line>span{animation:heroPhraseLoop 8.5s var(--ease) infinite}
.hero-title .line:nth-child(2)>span{animation-delay:.12s}
.hero-title .line:nth-child(3)>span{animation-delay:.24s}
@keyframes heroPhraseLoop{
  0%{transform:translateY(112%);opacity:0}
  8%,72%{transform:translateY(0);opacity:1}
  80%{transform:translateY(-112%);opacity:0}
  81%,100%{transform:translateY(112%);opacity:0}
}
.cap-item.reveal{transform:translateX(-54px);opacity:0}
.cap-item.reveal:nth-child(even){transform:translateX(54px)}
.cap-item.reveal.is-visible{transform:translateX(0);opacity:1}
.cap-item>span,.cap-item h3,.cap-item p{transition:transform .8s var(--ease),opacity .8s var(--ease)}
.cap-item.reveal>span,.cap-item.reveal h3,.cap-item.reveal p{opacity:0;transform:translateY(14px)}
.cap-item.reveal.is-visible>span,.cap-item.reveal.is-visible h3,.cap-item.reveal.is-visible p{opacity:1;transform:translateY(0)}
.cap-item.reveal.is-visible>span{transition-delay:.08s}
.cap-item.reveal.is-visible h3{transition-delay:.16s}
.cap-item.reveal.is-visible p{transition-delay:.25s}
.cap-item.reveal.is-visible>span{animation:capNumberPulse 1.2s var(--ease) .1s both}
@keyframes capNumberPulse{0%{letter-spacing:.4em;opacity:0}100%{letter-spacing:normal;opacity:1}}

@media (max-width:1000px){
  .site-header{grid-template-columns:1fr auto}
}
@media (max-width:700px){
  .site-header{grid-template-columns:1fr auto}
}
@media (prefers-reduced-motion:reduce){
  .glow-yellow,.glow-lilac,.glow-orange,.hero-title .line>span,.cap-item.reveal.is-visible>span{animation:none}
  .hero-title .line>span{transform:none;opacity:1}
  .cap-item.reveal,.cap-item.reveal:nth-child(even),.cap-item.reveal>span,.cap-item.reveal h3,.cap-item.reveal p{opacity:1;transform:none}
}

/* V1.3: editorial motion + portrait integration */
.about-text p:first-child strong{font-weight:700;color:var(--ink)}

/* Organic portrait — no card, no border, no hard frame */
.portrait-wrap{isolation:isolate}
.portrait-frame{
  aspect-ratio:.92/1;
  overflow:visible;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.portrait-frame::before{display:none}
.portrait-frame img{
  position:relative;
  z-index:3;
  width:108%;
  height:auto;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
  transform:none;
  mix-blend-mode:multiply;
  opacity:.88;
  filter:contrast(.88) saturate(.88) brightness(1.035);
  animation:portraitBreathe 10s ease-in-out infinite;
}
.portrait-glow{position:absolute;z-index:1;border-radius:50%;filter:blur(48px);mix-blend-mode:multiply;pointer-events:none;opacity:.26}
.portrait-glow-one{width:68%;aspect-ratio:1;background:#e8dc73;left:8%;top:12%;animation:portraitGlowOne 14s ease-in-out infinite}
.portrait-glow-two{width:54%;aspect-ratio:1;background:#cfc2dd;right:0;top:32%;animation:portraitGlowTwo 17s ease-in-out infinite}
.portrait-glow-three{width:38%;aspect-ratio:1;background:#efbc85;left:28%;bottom:3%;animation:portraitGlowThree 12s ease-in-out infinite}
@keyframes portraitBreathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-5px,0) scale(1.012)}}
@keyframes portraitGlowOne{0%,100%{transform:translate(0,0) scale(1);background:#e8dc73}45%{transform:translate(7%,-4%) scale(1.12);background:#e9bd8a}75%{transform:translate(-5%,6%) scale(.94);background:#c9c6dd}}
@keyframes portraitGlowTwo{0%,100%{transform:translate(0,0) scale(1);background:#cfc2dd}40%{transform:translate(-8%,6%) scale(1.08);background:#c4d6df}72%{transform:translate(5%,-4%) scale(.92);background:#ead58b}}
@keyframes portraitGlowThree{0%,100%{transform:translate(0,0) scale(1);background:#efbc85}50%{transform:translate(8%,-8%) scale(1.18);background:#e7dc7c}}

/* Ambient editorial thoughts */
.ambient-quote{position:absolute;z-index:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;white-space:nowrap;pointer-events:none;user-select:none;opacity:.055;letter-spacing:-.04em;animation:ambientQuote 15s ease-in-out infinite}
.about .ambient-quote,.capabilities .ambient-quote{color:var(--ink)}
.dark .ambient-quote{color:var(--white);opacity:.045}
.quote-a{font-size:clamp(54px,8vw,130px);right:-5vw;top:8%}
.quote-b{font-size:clamp(60px,8.5vw,140px);left:-3vw;bottom:3%;animation-delay:-4s}
.quote-c{font-size:clamp(58px,8vw,132px);right:-10vw;top:38%;animation-delay:-8s}
.quote-d{font-size:clamp(54px,7vw,118px);right:-3vw;bottom:4%;animation-delay:-2s}
@keyframes ambientQuote{0%,100%{transform:translate3d(0,0,0);opacity:.045}40%{transform:translate3d(-18px,7px,0);opacity:.075}70%{transform:translate3d(10px,-5px,0);opacity:.035}}

/* Display animation for major headings */
.motion-heading{clip-path:inset(0 0 100% 0);transform:translateY(38px);opacity:0;transition:clip-path 1.15s var(--ease),transform 1.15s var(--ease),opacity .7s ease}
.reveal.is-visible .motion-heading,.motion-heading.is-visible{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:1}

/* Count animations: numeral first, supporting copy follows */
.proof-card .proof-number{font-weight:400}
.proof-card h3,.proof-card p{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.proof-card.counter-complete h3{opacity:1;transform:none;transition-delay:.08s}
.proof-card.counter-complete p{opacity:1;transform:none;transition-delay:.2s}
.experience-counter-heading .count-copy{display:inline;opacity:0;transition:opacity .8s var(--ease)}
.experience-counter-heading.counter-complete .count-copy{opacity:1}
.count-inline{display:inline-block;min-width:1.65em;color:var(--yellow)!important;font-style:italic;font-variant-numeric:tabular-nums}
.counter{font-variant-numeric:tabular-nums;min-width:2.4ch;display:inline-block}

/* Stronger index numbers */
.cap-item{grid-template-columns:96px 1.05fr 1fr}
.cap-item>span{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,3.2vw,50px);
  line-height:.8;
  font-weight:700;
  letter-spacing:-.05em;
  color:#4c4844;
}
.cap-item.reveal.is-visible>span{animation:capNumberIn .9s var(--ease) .08s both}
@keyframes capNumberIn{0%{opacity:0;transform:translateY(18px) scale(.78)}65%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{opacity:1;transform:none}}

.step b{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(38px,4.1vw,64px);
  line-height:.85;
  font-weight:700;
  letter-spacing:-.055em;
  color:var(--yellow);
  opacity:0;
  transform:translateY(20px) scale(.84);
  transition:opacity .65s var(--ease),transform .8s var(--ease);
}
.step h3,.step p{opacity:0;transform:translateY(15px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.step.reveal.is-visible b{opacity:1;transform:none;transition-delay:.05s}
.step.reveal.is-visible h3{opacity:1;transform:none;transition-delay:.18s}
.step.reveal.is-visible p{opacity:1;transform:none;transition-delay:.31s}
.step h3{margin-top:26px}

@media (max-width:700px){
  .portrait-wrap{width:100%}.portrait-frame{aspect-ratio:.9/1}.portrait-frame img{width:110%}
  .ambient-quote{white-space:normal;width:120vw;line-height:.8}
  .cap-item{grid-template-columns:64px 1fr}.cap-item>span{font-size:34px}.cap-item p{grid-column:2}
  .step b{font-size:48px}
}

@media (prefers-reduced-motion:reduce){
  .portrait-frame img,.portrait-glow,.ambient-quote{animation:none}
  .motion-heading{clip-path:none;transform:none;opacity:1;transition:none}
  .proof-card h3,.proof-card p,.experience-counter-heading .count-copy,.step b,.step h3,.step p{opacity:1;transform:none;transition:none}
}


/* V1.3 final refinements: logo palette + stronger reading scale */
.hero-title .offset{color:var(--logo-purple)}
.about-copy h2 em{color:var(--logo-purple)}
.experience-head h2 span,.proof-number,.count-inline{color:var(--logo-yellow)!important}
.cap-title h2 span{color:var(--logo-purple)}
.approach-quote h2 span{color:var(--logo-orange)}
.contact-intro h2 span{color:var(--logo-purple)}
.text-link:hover,.direct-links a:hover{color:var(--logo-teal)}

/* Body copy is deliberately larger than V1.2 while preserving the editorial hierarchy. */
.hero-bottom p{font-size:16px;line-height:1.72}
.about-text p{font-size:15px;line-height:1.72}
.about-text p:first-child{font-size:19px;line-height:1.62}
.proof-card h3{font-size:19px}
.proof-card p{font-size:14px;line-height:1.68}
.cap-item h3{font-size:24px}
.cap-item p{font-size:14px;line-height:1.7}
.step h3{font-size:38px}
.step p{font-size:14px;line-height:1.68}
.contact-intro>p:last-of-type{font-size:15px;line-height:1.75}
.contact-form input,.contact-form textarea,.contact-form select{font-size:15px}
.form-bottom p{font-size:11px}

.quote-e{font-size:clamp(50px,7vw,116px);left:-3vw;top:7%;animation-delay:-6s;color:var(--ink)}

@media (max-width:700px){
  .hero-bottom p{font-size:14px}
  .about-text p{font-size:14px}
  .about-text p:first-child{font-size:17px}
  .proof-card p,.cap-item p,.step p,.contact-intro>p:last-of-type{font-size:14px}
  .cap-item h3{font-size:21px}
  .step h3{font-size:34px}
}


/* =========================================================
   V1.4 — rotating hero thoughts + drawn portrait refinement
   ========================================================= */

/* Rotating hero statements: stable stage, editorial transitions, no layout jump. */
.hero-title-stage{
  position:relative;
  min-height:2.32em;
  width:100%;
}
.hero-title-stage .hero-quote{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.hero-title-stage .hero-quote.is-active,
.hero-title-stage .hero-quote.is-leaving{
  visibility:visible;
}
.hero-title-stage .hero-quote.is-active{opacity:1;pointer-events:auto}
.hero-title-stage .hero-quote .line>span{
  animation:none!important;
  transform:translateY(112%);
  opacity:0;
  transition:transform 1.02s var(--ease),opacity .68s ease;
  will-change:transform,opacity;
}
.hero-title-stage .hero-quote.is-active .line>span{
  transform:translateY(0);
  opacity:1;
}
.hero-title-stage .hero-quote.is-active .line:nth-child(2)>span{transition-delay:.10s}
.hero-title-stage .hero-quote.is-active .line:nth-child(3)>span{transition-delay:.20s}
.hero-title-stage .hero-quote.is-leaving .line>span{
  transform:translateY(-108%);
  opacity:0;
  transition-duration:.72s,.5s;
  transition-delay:0s!important;
}
/* Keep the logo palette present, but use it as an accent rather than a rainbow. */
.hero-title-stage .hero-quote:nth-child(1) .offset{color:var(--logo-purple)}
.hero-title-stage .hero-quote:nth-child(2) .offset{color:var(--logo-orange)}
.hero-title-stage .hero-quote:nth-child(3) .offset{color:var(--logo-teal)}
.hero-title-stage .hero-quote:nth-child(4) .offset{color:var(--logo-purple)}

/* Updated portrait: the art is gently revealed while a temporary sketch draws on top. */
.portrait-frame{position:relative}
.portrait-art{
  opacity:0!important;
  filter:contrast(.82) saturate(.82) brightness(1.06)!important;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 2.25s var(--ease) .42s,opacity 1.35s ease .72s,filter 1.8s ease .72s;
  animation:none!important;
}
.portrait-frame.is-drawing .portrait-art{
  opacity:.84!important;
  clip-path:inset(0 0 0 0);
  animation:portraitBreathe 10s ease-in-out 3.4s infinite!important;
}
.portrait-sketch-layer{
  position:absolute;
  z-index:4;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.portrait-sketch{
  width:108%;
  height:auto;
  overflow:visible;
  opacity:0;
}
.portrait-sketch path,.portrait-sketch polygon{
  fill:none!important;
  stroke:#4c4947!important;
  stroke-width:5.2!important;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:.42;
}
.portrait-frame.is-drawing .portrait-sketch{animation:sketchLayerLife 4.5s ease both}
.portrait-frame.is-drawing .portrait-sketch path,
.portrait-frame.is-drawing .portrait-sketch polygon{
  animation:drawPortrait 2.25s var(--ease) var(--sketch-delay,0ms) forwards;
}
@keyframes drawPortrait{to{stroke-dashoffset:0}}
@keyframes sketchLayerLife{
  0%{opacity:0}
  8%{opacity:.78}
  68%{opacity:.55}
  100%{opacity:0}
}

/* The 20+ statement is now high-contrast on charcoal; yellow is only an accent. */
.experience-counter-heading .count-inline{
  color:#fff!important;
  text-shadow:0 0 32px rgba(255,202,26,.12);
  position:relative;
}
.experience-counter-heading .count-inline::after{
  content:"";
  position:absolute;
  left:.05em;
  right:.04em;
  bottom:-.04em;
  height:.055em;
  min-height:4px;
  background:var(--logo-yellow);
  transform:scaleX(.12);
  transform-origin:left;
  transition:transform 1s var(--ease) .25s;
}
.experience-counter-heading.counter-complete .count-inline::after{transform:scaleX(1)}
.experience-counter-heading .count-copy{color:#f4f0e9}
.experience-head h2 .count-copy{font-style:normal}

@media (max-width:700px){
  .hero-title-stage{min-height:2.4em}
  .portrait-sketch,.portrait-art{width:110%}
  .portrait-sketch path,.portrait-sketch polygon{stroke-width:3.8!important}
}

@media (prefers-reduced-motion:reduce){
  .hero-title-stage .hero-quote{display:none;position:static;opacity:1;visibility:visible}
  .hero-title-stage .hero-quote:first-child{display:block}
  .hero-title-stage .hero-quote .line>span{transform:none;opacity:1;transition:none}
  .portrait-art{opacity:.84!important;clip-path:none;transition:none;animation:none!important}
  .portrait-sketch-layer{display:none}
  .experience-counter-heading .count-inline::after{transform:scaleX(1);transition:none}
}

/* =========================================================
   V1.4.1 — hero safe-area refinement
   Keep the editorial scale without clipping letterforms.
   ========================================================= */
.hero-title{
  font-size:clamp(84px,12.9vw,205px);
  line-height:.74;
  letter-spacing:-.065em;
}
.hero-title-stage{min-height:2.52em}
.hero-title .line{
  padding:.07em .14em .17em .09em;
  margin-left:-.09em;
  width:calc(100% + .23em);
}
.hero-title .offset{padding-left:24vw}
@media (max-width:1000px){
  .hero-title{font-size:clamp(80px,13.2vw,170px);line-height:.75}
  .hero-title-stage{min-height:2.55em}
}
@media (max-width:700px){
  .hero-title{font-size:20.5vw;line-height:.78;letter-spacing:-.055em}
  .hero-title-stage{min-height:2.64em}
  .hero-title .line{padding:.06em .12em .18em .08em;margin-left:-.08em;width:calc(100% + .20em)}
  .hero-title .offset{padding-left:12vw}
}

/* =========================================================
   V1.5 — polish & interaction
   ========================================================= */
:root{--progress:0%}
.page-progress{position:fixed;z-index:50;right:18px;top:18vh;height:64vh;width:12px;pointer-events:none}
.page-progress:before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:rgba(32,32,31,.14)}
.progress-fill{position:absolute;left:5px;top:0;width:1px;height:var(--progress);background:linear-gradient(var(--logo-purple),var(--logo-orange),var(--logo-teal));transition:height .12s linear}
.page-progress i{position:absolute;left:2px;width:7px;height:7px;border-radius:50%;border:1px solid rgba(32,32,31,.28);background:#f3f0ec;transform:translateY(-50%)}
.page-progress i:nth-of-type(1){top:20%}.page-progress i:nth-of-type(2){top:40%}.page-progress i:nth-of-type(3){top:60%}.page-progress i:nth-of-type(4){top:100%}
.page-progress i.is-passed{background:var(--logo-purple);border-color:var(--logo-purple)}

/* Layered hero depth; transforms are JS-driven and intentionally tiny. */
.hero .glow{will-change:transform}
.hero-title-stage{will-change:transform}
.hero-kicker,.hero-bottom{will-change:transform}
/* The hero accent is owned by the emphasized word, never by the full line. */
.hero-quote .offset{position:relative}
.hero-quote .offset>span{position:relative;display:inline-block}
.hero-quote .offset>span:after{content:"";position:absolute;left:.02em;right:.02em;bottom:.015em;height:.035em;background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.48}
.hero-quote.is-active .offset>span:after{animation:accentDraw 1s .8s var(--ease) forwards}
@keyframes accentDraw{to{transform:scaleX(1)}}

/* Counter completion: count -> settle -> rule -> copy. */
.proof-card{--proof-accent:var(--logo-purple)}
.proof-card:nth-child(2){--proof-accent:var(--logo-orange)}.proof-card:nth-child(3){--proof-accent:var(--logo-teal)}.proof-card:nth-child(4){--proof-accent:var(--logo-yellow)}
.proof-number{display:inline-block;position:relative;transform-origin:left bottom}
.proof-number:after{content:"";position:absolute;left:0;bottom:-.08em;width:100%;height:3px;background:var(--proof-accent);transform:scaleX(0);transform-origin:left}
.proof-card.counter-complete .proof-number{animation:numberSettle .55s var(--ease)}
.proof-card.counter-complete .proof-number:after{animation:accentDraw .6s .2s var(--ease) forwards}
.proof-card h3,.proof-card p{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.proof-card:not(.counter-complete) h3,.proof-card:not(.counter-complete) p{opacity:.22;transform:translateY(8px)}
.proof-card.counter-complete h3,.proof-card.counter-complete p{opacity:1;transform:none;transition-delay:.38s}
@keyframes numberSettle{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-5px) scale(1.025)}100%{transform:none}}

.system-philosophy{margin:9vw 0 7vw;max-width:1200px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(52px,7.3vw,118px);line-height:.88;letter-spacing:-.055em}
.system-philosophy span,.system-philosophy em{display:block;font-style:normal}
.system-philosophy em{padding-left:10vw;color:var(--logo-purple);font-style:italic}
.system-philosophy.is-visible span{animation:softRise .9s var(--ease) both}.system-philosophy.is-visible em{animation:softRise .9s .13s var(--ease) both}
@keyframes softRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.contact{overflow:hidden}.contact-intro{position:relative;z-index:2}.contact-orbit{position:absolute;z-index:-1;width:42vw;height:42vw;left:-12vw;top:45%;border-radius:50%;filter:blur(58px);opacity:.2;background:radial-gradient(circle at 35% 35%,var(--logo-yellow),transparent 45%),radial-gradient(circle at 68% 58%,var(--logo-purple),transparent 50%);animation:contactBreath 11s ease-in-out infinite alternate;pointer-events:none}
@keyframes contactBreath{to{transform:translate(5vw,-3vw) scale(1.12);filter:blur(72px);opacity:.27}}
.contact-tagline{margin:24px 0 0!important;font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(27px,2.4vw,42px)!important;line-height:1.1!important;color:var(--ink)!important}.contact-tagline em{color:var(--logo-purple);font-weight:400}

/* Form micro-interactions */
.contact-form label{position:relative}.contact-form label:after{content:"";position:absolute;left:0;right:0;bottom:24px;height:2px;background:linear-gradient(90deg,var(--logo-purple),var(--logo-orange));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.contact-form label:focus-within:after{transform:scaleX(1)}
.contact-form label>span{transition:transform .3s var(--ease),color .3s}.contact-form label:focus-within>span{transform:translateY(-2px);color:var(--logo-purple)}
.contact-form button{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}.contact-form button:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(32,32,31,.15)}

/* Final typography/readability polish */
.about-text p{font-size:clamp(17px,1.3vw,20px);line-height:1.68}.cap-item p,.step p{font-size:clamp(16px,1.18vw,19px);line-height:1.62}.proof-card p{font-size:clamp(15px,1.12vw,18px);line-height:1.62}.contact-intro>p:not(.eyebrow):not(.contact-tagline){font-size:clamp(16px,1.2vw,19px);line-height:1.68;max-width:590px}

@media(max-width:700px){.page-progress{display:none}.hero-title-stage{font-size:20.5vw;line-height:.77}.hero-title .offset{padding-left:10vw}.system-philosophy{font-size:14vw;margin:20vw 0 16vw}.system-philosophy em{padding-left:6vw}.contact-orbit{width:100vw;height:100vw;left:-35vw}.contact-tagline{font-size:30px!important}.proof-number:after{height:2px}}
@media(prefers-reduced-motion:reduce){.progress-fill{transition:none}.hero-quote .offset>span:after{transform:scaleX(1);animation:none}.proof-card.counter-complete .proof-number,.proof-card.counter-complete .proof-number:after,.system-philosophy.is-visible span,.system-philosophy.is-visible em,.contact-orbit{animation:none}.contact-orbit{transform:none}}

/* V1.5.2 refinements */

/* Proof figures inherit the same individual accent as their completion rule. */
.proof-card .proof-number{color:var(--proof-accent)!important}

/* Slow, composed logo-palette color movement for the two philosophy statements. */
.cap-title h2 span,
.system-philosophy em{
  background:linear-gradient(100deg,var(--logo-purple) 0%,var(--logo-purple) 22%,var(--logo-orange) 46%,var(--logo-teal) 70%,var(--logo-purple) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.cap-title.reveal.is-visible h2 span{animation:editorialColorDrift 10s ease-in-out infinite alternate}
.system-philosophy.is-visible em{animation:softRise .9s .13s var(--ease) both,editorialColorDrift 11s 1s ease-in-out infinite alternate}
@keyframes editorialColorDrift{0%{background-position:0% 50%}50%{background-position:58% 50%}100%{background-position:100% 50%}}

/* Approach quote: two-stage reveal with a restrained accent transition. */
.approach-quote h2{overflow:visible}
.approach-quote h2>span{display:inline-block;background:linear-gradient(100deg,var(--logo-yellow),var(--logo-orange),var(--logo-purple),var(--logo-teal));background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important}
.approach-quote.reveal.is-visible h2>span{animation:approachColor 8s .8s ease-in-out infinite alternate}
@keyframes approachColor{from{background-position:0% 50%}to{background-position:100% 50%}}

/* Process reads as a sequence, not four simultaneous cards. */
.approach-steps .step{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease),background-color .75s ease}
.approach-steps.process-visible .step{opacity:1;transform:none}
.approach-steps.process-visible .step:nth-child(1){transition-delay:.05s}
.approach-steps.process-visible .step:nth-child(2){transition-delay:.48s}
.approach-steps.process-visible .step:nth-child(3){transition-delay:.91s}
.approach-steps.process-visible .step:nth-child(4){transition-delay:1.34s}
.approach-steps.process-visible .step:nth-child(1) b{color:var(--logo-purple)}
.approach-steps.process-visible .step:nth-child(2) b{color:var(--logo-orange)}
.approach-steps.process-visible .step:nth-child(3) b{color:var(--logo-teal)}
.approach-steps.process-visible .step:nth-child(4) b{color:var(--logo-yellow)}
.approach-steps.process-visible .step h3,.approach-steps.process-visible .step p{opacity:1;transform:none}
.approach-steps.process-visible .step:nth-child(1) h3{transition-delay:.17s}.approach-steps.process-visible .step:nth-child(1) p{transition-delay:.27s}
.approach-steps.process-visible .step:nth-child(2) h3{transition-delay:.60s}.approach-steps.process-visible .step:nth-child(2) p{transition-delay:.70s}
.approach-steps.process-visible .step:nth-child(3) h3{transition-delay:1.03s}.approach-steps.process-visible .step:nth-child(3) p{transition-delay:1.13s}
.approach-steps.process-visible .step:nth-child(4) h3{transition-delay:1.46s}.approach-steps.process-visible .step:nth-child(4) p{transition-delay:1.56s}

@media(prefers-reduced-motion:reduce){
 .cap-title h2 span,.system-philosophy em,.approach-quote h2>span{animation:none!important;background-position:0 50%}
 .approach-steps .step{opacity:1;transform:none;transition:none}
}

/* V1.5.3 — custom outline icon language.  Icons support the typography; they do not compete with it. */
.outline-icon{display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.outline-icon .icon-accent{stroke:var(--icon-accent,currentColor)}
.outline-icon path{stroke-dasharray:1;stroke-dashoffset:1}

/* Capability icons */
.cap-item{grid-template-columns:96px 1.02fr 1fr;align-items:start}
.cap-symbol{display:flex;align-items:flex-start;gap:15px;color:#706a64;min-width:0}
.cap-symbol>span{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:currentColor;padding-top:8px;letter-spacing:.04em}
.cap-icon{width:42px;height:42px;flex:0 0 42px;opacity:.9}
.cap-item:nth-child(1){--icon-accent:var(--logo-purple)}
.cap-item:nth-child(2){--icon-accent:var(--logo-orange)}
.cap-item:nth-child(3){--icon-accent:var(--logo-teal)}
.cap-item:nth-child(4){--icon-accent:var(--logo-yellow)}
.cap-item:nth-child(5){--icon-accent:var(--logo-purple)}
.cap-item:nth-child(6){--icon-accent:var(--logo-orange)}
.cap-item:nth-child(1) .cap-symbol{color:var(--logo-purple)}
.cap-item:nth-child(2) .cap-symbol{color:var(--logo-orange)}
.cap-item:nth-child(3) .cap-symbol{color:var(--logo-teal)}
.cap-item:nth-child(4) .cap-symbol{color:#a57a00}
.cap-item:nth-child(5) .cap-symbol{color:var(--logo-purple)}
.cap-item:nth-child(6) .cap-symbol{color:var(--logo-orange)}
.cap-item.reveal .cap-symbol{opacity:0;transform:translateY(12px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.cap-item.reveal.is-visible .cap-symbol{opacity:1;transform:none;transition-delay:.06s}
.cap-item.reveal.is-visible .cap-icon path{animation:iconLineDraw .62s var(--ease) forwards}
.cap-item.reveal.is-visible .cap-icon path:nth-child(2){animation-delay:.09s}
.cap-item.reveal.is-visible .cap-icon path:nth-child(3){animation-delay:.16s}
.cap-item.reveal.is-visible .cap-icon path:nth-child(4){animation-delay:.22s}

/* Process icons: a related visual sequence from seeing -> structure -> expression -> resolution. */
.step-icon{width:54px;height:54px;margin-bottom:25px;color:#9e9992;--icon-accent:currentColor}
.approach-steps .step:nth-child(1){--step-accent:var(--logo-purple)}
.approach-steps .step:nth-child(2){--step-accent:var(--logo-orange)}
.approach-steps .step:nth-child(3){--step-accent:var(--logo-teal)}
.approach-steps .step:nth-child(4){--step-accent:var(--logo-yellow)}
.approach-steps.process-visible .step-icon{color:var(--step-accent)}
.approach-steps.process-visible .step-icon path{animation:iconLineDraw .65s var(--ease) forwards}
.approach-steps.process-visible .step:nth-child(1) .step-icon path{animation-delay:.02s}
.approach-steps.process-visible .step:nth-child(2) .step-icon path{animation-delay:.45s}
.approach-steps.process-visible .step:nth-child(3) .step-icon path{animation-delay:.88s}
.approach-steps.process-visible .step:nth-child(4) .step-icon path{animation-delay:1.31s}
.approach-steps.process-visible .step-icon .icon-accent{stroke:var(--step-accent)}

/* Contact icons are intentionally smaller and quieter. */
.direct-links{align-items:center}
.contact-link,.contact-location{display:inline-flex!important;align-items:center;gap:9px}
.contact-link>span,.contact-location>span{display:inline-block}
.contact-link>i{font-style:normal;padding-left:2px}
.inline-icon{width:21px;height:21px;flex:0 0 21px;color:var(--logo-purple);--icon-accent:var(--logo-orange)}
.contact-location .inline-icon{color:var(--logo-orange);--icon-accent:var(--logo-purple)}
.contact-intro.reveal.is-visible .inline-icon path{animation:iconLineDraw .55s .35s var(--ease) forwards}

@keyframes iconLineDraw{to{stroke-dashoffset:0}}

@media(max-width:1000px){
  .cap-item{grid-template-columns:88px 1fr 1fr}.cap-icon{width:38px;height:38px;flex-basis:38px}.cap-symbol{gap:12px}
}
@media(max-width:700px){
  .cap-item{grid-template-columns:1fr;padding:28px 0;gap:14px}.cap-symbol{align-items:center}.cap-symbol>span{padding-top:0}.cap-icon{width:40px;height:40px;flex-basis:40px}
  .step-icon{width:48px;height:48px;margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .outline-icon path{stroke-dashoffset:0!important;animation:none!important}
  .cap-item.reveal .cap-symbol{opacity:1;transform:none;transition:none}
}


/* V1.5.4 — icon scale, proof contrast, wide-screen capability composition */

/* Experience proof cards: brighter first accent + compact white header icons */
.proof-card:nth-child(1){--proof-accent:#a98cff}
.proof-card h3{
  display:flex;
  align-items:center;
  gap:12px;
}
.proof-icon{
  width:25px;
  height:25px;
  flex:0 0 25px;
  color:#f8f6f2;
  opacity:.92;
  stroke-width:1.55;
}
.proof-card.counter-complete .proof-icon path{
  animation:iconLineDraw .55s .34s var(--ease) forwards;
}

/* Capabilities: balanced editorial 2-column modules on wide screens */
.cap-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.cap-item{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  grid-template-areas:
    "symbol title"
    "symbol copy";
  align-items:start;
  column-gap:26px;
  row-gap:14px;
  min-height:245px;
  padding:38px 34px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),transform .35s var(--ease);
}
.cap-item:hover{
  padding-left:34px;
  background:rgba(255,255,255,.28);
  transform:translateY(-2px);
}
.cap-symbol{
  grid-area:symbol;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.cap-symbol>span{
  font-size:15px;
  padding-top:0;
  min-width:23px;
}
.cap-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  stroke-width:1.55;
}
.cap-item h3{
  grid-area:title;
  align-self:center;
  margin:3px 0 0;
  font-size:clamp(22px,1.55vw,28px);
  line-height:1.12;
}
.cap-item p{
  grid-area:copy;
  max-width:560px;
  margin:0;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.62;
}

/* Approach: icons become visual anchors beside each process heading */
.step{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  grid-template-areas:
    "icon number"
    "icon title"
    ". copy";
  column-gap:20px;
  row-gap:7px;
  align-content:start;
  padding:38px 28px 42px;
}
.step-icon{
  grid-area:icon;
  width:72px;
  height:72px;
  margin:0;
  align-self:start;
  stroke-width:1.55;
}
.step b{
  grid-area:number;
  font-size:13px;
  align-self:end;
  margin-top:4px;
}
.step h3{
  grid-area:title;
  margin:0;
  font-size:clamp(31px,2.25vw,42px);
  line-height:1.03;
}
.step p{
  grid-area:copy;
  margin:10px 0 0;
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.62;
}

@media (max-width:1000px){
  .cap-list{grid-template-columns:1fr 1fr}
  .cap-item{grid-template-columns:88px minmax(0,1fr);min-height:225px;padding:32px 26px}
  .cap-item:hover{padding-left:26px;transform:none}
  .cap-icon{width:42px;height:42px;flex-basis:42px}
  .cap-symbol>span{font-size:14px}
  .step{grid-template-columns:76px minmax(0,1fr)}
  .step-icon{width:66px;height:66px}
}

@media (max-width:760px){
  .cap-list{grid-template-columns:1fr}
  .cap-item{
    grid-template-columns:82px minmax(0,1fr);
    min-height:auto;
    padding:28px 22px;
  }
  .cap-item:hover{padding-left:22px;background:transparent}
  .cap-icon{width:40px;height:40px;flex-basis:40px}
  .cap-item h3{font-size:21px}
  .cap-item p{font-size:16px}
  .proof-icon{width:23px;height:23px;flex-basis:23px}
  .step{
    grid-template-columns:70px minmax(0,1fr);
    padding:30px 22px 34px;
  }
  .step-icon{width:60px;height:60px}
  .step h3{font-size:32px}
}

@media (prefers-reduced-motion:reduce){
  .proof-card.counter-complete .proof-icon path{animation:none;stroke-dashoffset:0}
}

/* V1.5.5 — responsive breakpoint correction for Approach/process section */
/* Keep the four-step process spacious: 4 columns only when there is genuinely room. */
@media (min-width:1201px){
  .approach-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .step{
    grid-template-columns:68px minmax(0,1fr);
    column-gap:16px;
    padding:36px 24px 40px;
  }
  .step-icon{width:62px;height:62px}
  .step h3{font-size:clamp(30px,2vw,38px)}
}

/* Missing intermediate state: smaller desktops and tablets use a balanced 2 × 2 process grid. */
@media (min-width:701px) and (max-width:1200px){
  .approach-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:7vw;
  }
  .step{
    grid-template-columns:82px minmax(0,1fr);
    grid-template-areas:
      "icon number"
      "icon title"
      ". copy";
    column-gap:22px;
    row-gap:8px;
    min-height:270px;
    padding:36px 30px 40px;
  }
  .step-icon{width:72px;height:72px}
  .step h3{font-size:clamp(32px,4vw,42px)}
  .step p{max-width:520px;font-size:clamp(16px,1.7vw,19px)}
}

/* On tighter screens the side section marker competes with the process content. */
@media (max-width:900px){
  .approach .section-mark{display:none}
}

/* Mobile: one clear process step per row, with comfortable text measure. */
@media (max-width:700px){
  .approach-steps{grid-template-columns:1fr;margin-top:14vw}
  .step{
    grid-template-columns:76px minmax(0,1fr);
    grid-template-areas:
      "icon number"
      "icon title"
      ". copy";
    column-gap:18px;
    row-gap:7px;
    min-height:0;
    padding:30px 22px 34px;
  }
  .step-icon{width:64px;height:64px}
  .step h3{font-size:clamp(30px,9vw,38px)}
  .step p{max-width:34em;font-size:16px;line-height:1.62}
}

/* V1.5.6 — Approach responsive correction, second pass.
   The process cards were still entering the 4-column state too early,
   and the copy was constrained to the title column. */

/* Default / medium desktop: use a comfortable 2 × 2 layout. */
.approach-steps{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.step{
  grid-template-columns:84px minmax(0,1fr);
  grid-template-areas:
    "icon title"
    "copy copy";
  column-gap:22px;
  row-gap:20px;
  min-width:0;
}
.step b{display:none}
.step-icon{
  grid-area:icon;
  width:72px;
  height:72px;
  align-self:center;
}
.step h3{
  grid-area:title;
  align-self:center;
  min-width:0;
}
.step p{
  grid-area:copy;
  max-width:38em;
  margin:2px 0 0;
}

/* Only use four cards across on genuinely wide screens. */
@media (min-width:1600px){
  .approach-steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .step{
    grid-template-columns:70px minmax(0,1fr);
    grid-template-areas:
      "icon title"
      "copy copy";
    column-gap:16px;
    row-gap:22px;
    padding:36px 24px 40px;
  }
  .step-icon{width:62px;height:62px}
  .step h3{font-size:clamp(30px,2vw,38px)}
  .step p{max-width:none}
}

/* 2 × 2 remains active through tablets/smaller desktops. */
@media (min-width:761px) and (max-width:1599px){
  .approach-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:7vw;
  }
  .step{
    grid-template-columns:82px minmax(0,1fr);
    grid-template-areas:
      "icon title"
      "copy copy";
    column-gap:22px;
    row-gap:18px;
    min-height:245px;
    padding:34px 30px 38px;
  }
  .step-icon{width:70px;height:70px}
  .step h3{font-size:clamp(32px,3.2vw,42px)}
  .step p{max-width:34em;font-size:clamp(16px,1.55vw,19px)}
}

/* Mobile: one step per row. Keep icon/title together, copy full width below. */
@media (max-width:760px){
  .approach-steps{
    grid-template-columns:1fr;
    margin-top:14vw;
  }
  .step{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:
      "icon title"
      "copy copy";
    column-gap:18px;
    row-gap:17px;
    min-height:0;
    padding:30px 22px 34px;
  }
  .step-icon{width:62px;height:62px}
  .step h3{font-size:clamp(30px,9vw,38px)}
  .step p{max-width:34em;font-size:16px;line-height:1.62}
}

/* V1.5.7 — readable utility typography */
.site-header nav,
.eyebrow,
.hero-kicker,
.experience-line,
.text-link,
.direct-links,
.section-mark{
  font-size:13px;
}
.site-header nav{gap:32px;letter-spacing:.075em}
.eyebrow,.hero-kicker{line-height:1.55;letter-spacing:.095em}
.section-mark{line-height:1.15;letter-spacing:.11em}
.experience-line,.direct-links{line-height:1.35}

@media (max-width:760px){
  .eyebrow,.hero-kicker,.experience-line,.text-link,.direct-links,.section-mark{font-size:12px}
  .hero-kicker{max-width:420px;line-height:1.65}
}

/* V1.5.8 — final layout-polish pass
   Purpose: normalize rhythm, improve text measure, refine icons/portrait,
   add restrained capability hover feedback, and finish the footer. */

/* 1) Consistent vertical rhythm across the long-form page. */
:root{
  --section-space:clamp(112px,9.5vw,176px);
  --section-space-dark:clamp(124px,10.3vw,192px);
}
.section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.experience,.approach{padding-top:var(--section-space-dark);padding-bottom:var(--section-space-dark)}
.capabilities{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.contact{padding-top:var(--section-space);padding-bottom:clamp(174px,14vw,226px)}
.experience-head{margin-bottom:clamp(72px,6.5vw,116px)}
.cap-title{margin-bottom:clamp(64px,6vw,108px)}
.approach-steps{margin-top:clamp(70px,6.4vw,116px)}

/* 2) Dark editorial sections get a little more air. */
.proof-card{padding-top:42px;padding-bottom:46px;min-height:372px}
.approach-steps .step{padding-top:42px;padding-bottom:46px}

/* 3) Deliberate reading measure instead of filling every available pixel. */
.about-text{max-width:820px}
.about-text p{max-width:38em}
.about-text p:first-child{max-width:36em}
.proof-card p{max-width:31em}
.cap-item p{max-width:42em}
.step p{max-width:34em}
.contact-intro>p:not(.eyebrow):not(.contact-tagline){max-width:34em}

/* 4) Optical consistency for the custom outline icon language. */
.outline-icon{stroke-width:1.6}
.cap-icon{width:50px;height:50px;flex-basis:50px}
.cap-symbol{gap:14px}
.cap-symbol>span{font-size:16px;min-width:25px}
.step-icon{width:72px;height:72px}
.proof-icon{width:26px;height:26px;flex-basis:26px}
.inline-icon{width:22px;height:22px;flex-basis:22px}

/* 5) Capability cards: tactile but not falsely clickable. */
.cap-item{
  position:relative;
  transition:background-color .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease);
}
.cap-item::after{
  content:"";
  position:absolute;
  left:34px;bottom:-1px;
  width:0;height:2px;
  background:var(--icon-accent,var(--logo-purple));
  transition:width .34s var(--ease);
  opacity:.8;
}
.cap-item:hover{
  padding-left:34px;
  transform:translateY(-2px);
  background:rgba(255,255,255,.34);
  box-shadow:0 12px 28px rgba(45,35,25,.035);
}
.cap-item:hover::after{width:58px}
.cap-item:hover .cap-symbol{transform:translateX(3px)}
.cap-item .cap-symbol{transition:transform .24s var(--ease)}
.cap-item:hover .cap-icon{filter:saturate(1.08)}

/* 6) Portrait remains a supporting identity element at every breakpoint. */
.portrait-wrap{justify-self:center;width:min(100%,520px)}
.portrait-frame{min-height:0}
@media (min-width:1500px){
  .about{grid-template-columns:minmax(0,1.1fr) minmax(360px,.72fr);gap:clamp(80px,7vw,128px)}
  .portrait-wrap{width:min(92%,500px)}
}
@media (min-width:761px) and (max-width:1100px){
  .about{grid-template-columns:minmax(0,1.08fr) minmax(290px,.72fr);gap:6vw}
  .portrait-wrap{width:min(100%,410px)}
}

/* 8) Footer: intentional, compact career-card ending. */
.contact footer{
  align-items:flex-end;
  gap:34px;
  padding-top:22px;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.055em;
}
.contact footer img{width:176px;opacity:.76}
.footer-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.footer-meta strong{font:600 13px/1.25 Arial,Helvetica,sans-serif;color:var(--ink);letter-spacing:.01em;text-transform:none}
.footer-meta span{display:block}
.footer-meta .footer-role{text-transform:none;letter-spacing:.015em;color:#6e6862}
.footer-meta .footer-place{color:#817a73}

@media (max-width:1000px){
  :root{--section-space:clamp(100px,12vw,138px);--section-space-dark:clamp(112px,13vw,150px)}
  .proof-card{min-height:340px}
  .cap-item:hover{transform:none;box-shadow:none}
  .cap-item:hover::after{width:48px}
}

@media (max-width:760px){
  :root{--section-space:clamp(88px,24vw,118px);--section-space-dark:clamp(96px,25vw,126px)}
  .section{padding-top:var(--section-space);padding-bottom:var(--section-space)}
  .contact{padding-bottom:190px}
  .proof-card{min-height:0;padding-top:34px;padding-bottom:38px}
  .approach-steps .step{padding-top:32px;padding-bottom:36px}
  .cap-item::after{left:22px}
  .cap-item:hover{padding-left:22px;background:transparent}
  .cap-item:hover::after{width:42px}
  .cap-icon{width:44px;height:44px;flex-basis:44px}
  .cap-symbol>span{font-size:15px}
  .portrait-wrap{width:min(92%,430px)}
  .contact footer{display:flex;flex-direction:column;align-items:flex-start;gap:18px;font-size:11px}
  .contact footer img{width:150px;margin:0}
  .footer-meta{align-items:flex-start;text-align:left;gap:3px}
  .footer-meta strong{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .cap-item,.cap-symbol,.cap-item::after{transition:none!important}
}

/* V1.5.8.8 — photographic atmosphere, built strictly on the validated V1.5.8 layout.
   IMPORTANT: these layers are absolute backgrounds only. They do not participate in
   document flow and do not alter section heights, side-tab coordinates, Contact layout,
   or footer/copyright positioning. */

/* Hero: light editorial photography, faded into the existing grid/glow composition. */
.hero{isolation:isolate}
.hero::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:84px -4vw 0 38%;
  pointer-events:none;
  background:url('assets/visuals/hero-editorial.webp') 54% 48%/cover no-repeat;
  opacity:.20;
  filter:saturate(.78) contrast(.93) brightness(1.08);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.52) 16%,#000 39%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 10%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.52) 16%,#000 39%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 10%,#000 84%,transparent 100%);
  mask-composite:intersect;
}
.hero>.paper-grid,.hero>.glow,.hero>.hero-kicker,.hero>.hero-title,.hero>.hero-bottom,.hero>.section-mark{position:relative;z-index:1}
.hero>.paper-grid,.hero>.glow,.hero>.section-mark{position:absolute}

/* Experience: print-production photography lives behind the proof content, not between blocks. */
.experience{isolation:isolate}
.experience::before{
  content:"";
  position:absolute;
  z-index:0;
  right:-6vw;
  top:8%;
  width:min(54vw,980px);
  height:56%;
  pointer-events:none;
  background:url('assets/visuals/print-production.webp') 50% 52%/cover no-repeat;
  opacity:.105;
  filter:saturate(.72) contrast(1.12) brightness(.76);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
  mask-composite:intersect;
}
.experience>*{position:relative;z-index:1}
.experience>.section-mark{position:absolute}

/* Capabilities: subtle publication photography adds craft without changing the grid. */
.capabilities{isolation:isolate}
.capabilities::before{
  content:"";
  position:absolute;
  z-index:0;
  left:-7vw;
  bottom:4%;
  width:min(48vw,860px);
  height:47%;
  pointer-events:none;
  background:url('assets/visuals/publication-closeup.webp') 58% 50%/cover no-repeat;
  opacity:.075;
  filter:grayscale(.15) saturate(.72) contrast(.92) brightness(1.05);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect;
}
.capabilities>*{position:relative;z-index:1}
.capabilities>.section-mark{position:absolute}

/* Existing philosophy statement gets a quiet systems image beneath it. */
.system-philosophy{position:relative;isolation:isolate;overflow:hidden}
.system-philosophy::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-16% -5%;
  pointer-events:none;
  background:url('assets/visuals/systems-structure.webp') 50% 48%/cover no-repeat;
  opacity:.085;
  filter:saturate(.72) contrast(.96) brightness(1.04);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
}

/* Approach: motion/presentation studio becomes a very restrained dark atmospheric layer. */
.approach{isolation:isolate}
.approach::before{
  content:"";
  position:absolute;
  z-index:0;
  right:-5vw;
  top:12%;
  width:min(56vw,1020px);
  height:72%;
  pointer-events:none;
  background:url('assets/visuals/motion-studio.webp') 43% 50%/cover no-repeat;
  opacity:.09;
  filter:saturate(.88) contrast(1.05) brightness(.68);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;
}
.approach>*{position:relative;z-index:1}
.approach>.section-mark{position:absolute}

/* No photograph is applied to Contact. V1.5.8 Contact + footer geometry stays untouched. */

/* Responsive art direction only changes image visibility/crops, never layout geometry. */
@media (max-width:1100px){
  .hero::before{left:30%;right:-18vw;opacity:.15;background-position:58% 48%}
  .experience::before{width:66vw;right:-18vw;opacity:.08}
  .capabilities::before{width:64vw;left:-18vw;opacity:.06}
  .approach::before{width:68vw;right:-20vw;opacity:.07}
}
@media (max-width:760px){
  /* Keep the hero photo oversized beyond both viewport edges so no rectangular image edge can become visible on narrow screens. */
  .hero::before{
    inset:68px -46vw 18% -34vw;
    opacity:.09;
    background-position:57% 44%;
    background-size:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.88) 15%,#000 31%,#000 76%,rgba(0,0,0,.82) 90%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,rgba(0,0,0,.92) 70%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.88) 15%,#000 31%,#000 76%,rgba(0,0,0,.82) 90%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 9%,rgba(0,0,0,.92) 70%,transparent 100%);
    mask-composite:intersect;
  }
  .experience::before{right:-44vw;top:11%;width:96vw;height:42%;opacity:.05}
  .capabilities::before{left:-45vw;bottom:10%;width:100vw;height:42%;opacity:.045}
  .approach::before{display:none}
  .system-philosophy::before{opacity:.055;inset:-8% -35%}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.experience::before,.capabilities::before,.approach::before,.system-philosophy::before{transform:none!important}
}

/* V1.5.8.9 — simple single-line copyright */
.footer-meta .footer-copyright {
  display: inline !important;
  white-space: nowrap;
  color: #817a73;
  font: 500 13px/1.25 Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
  text-transform: none;
}
.footer-meta .footer-copyright #year { display: inline !important; }
@media (max-width: 720px) {
  .footer-meta .footer-copyright { font-size: 12px; }
}

/* V1.5.8.11 — mobile navigation. Fixed overlay only; no document-flow changes. */
.mobile-menu-toggle{
  display:none;
  position:relative;
  z-index:52;
  justify-self:end;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.mobile-menu-toggle span{
  position:absolute;
  left:9px;
  width:28px;
  height:1.5px;
  background:currentColor;
  transform-origin:center;
  transition:transform .38s var(--ease),top .38s var(--ease),opacity .25s ease;
}
.mobile-menu-toggle span:first-child{top:17px}
.mobile-menu-toggle span:last-child{top:28px}
.mobile-menu-toggle[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}

.mobile-menu{
  display:none;
  position:fixed;
  inset:0;
  z-index:45;
  min-height:100svh;
  padding:clamp(116px,16vh,160px) 8vw 54px;
  background:
    radial-gradient(circle at 78% 18%,rgba(241,228,92,.28),transparent 28%),
    radial-gradient(circle at 15% 76%,rgba(115,70,166,.18),transparent 30%),
    linear-gradient(180deg,rgba(244,241,237,.985),rgba(244,241,237,.995));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .34s;
  overflow:auto;
}
.mobile-menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.36;
  background-image:linear-gradient(rgba(32,32,31,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(32,32,31,.09) 1px,transparent 1px);
  background-size:22vw 22vw;
}
.mobile-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .34s ease,visibility 0s linear 0s;
}
.mobile-menu-nav{position:relative;z-index:1;display:grid;gap:0;max-width:760px}
.mobile-menu-nav a{
  display:flex;
  align-items:baseline;
  gap:18px;
  border-bottom:1px solid rgba(32,32,31,.16);
  padding:14px 0 16px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(42px,11vw,72px);
  line-height:.96;
  letter-spacing:-.035em;
  color:var(--ink);
  transform:translateY(18px);
  opacity:0;
  transition:color .2s ease,transform .48s var(--ease),opacity .48s ease;
}
.mobile-menu-nav a span{
  flex:0 0 auto;
  min-width:24px;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
  color:var(--logo-purple);
}
.mobile-menu.is-open .mobile-menu-nav a{transform:none;opacity:1}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(1){transition-delay:.05s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(2){transition-delay:.09s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(3){transition-delay:.13s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(4){transition-delay:.17s}
.mobile-menu.is-open .mobile-menu-nav a:nth-child(5){transition-delay:.21s}
.mobile-menu-nav a:hover,.mobile-menu-nav a:focus-visible{color:var(--logo-purple)}
.mobile-menu-foot{
  position:relative;
  z-index:1;
  margin-top:36px;
  max-width:620px;
  font:600 11px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#68625d;
}
.mobile-menu-foot i{font-style:normal;color:var(--orange);padding:0 7px}
body.menu-open{overflow:hidden}

@media (max-width:1000px){
  .site-header{grid-template-columns:1fr auto}
  .site-header>nav{display:none}
  .mobile-menu-toggle{display:block}
  .mobile-menu{display:block}
}
@media (max-width:700px){
  .mobile-menu{padding-top:104px;padding-left:8vw;padding-right:8vw}
  .mobile-menu-nav a{font-size:clamp(38px,12vw,58px);gap:14px;padding:13px 0 15px}
  .mobile-menu-foot{font-size:10px;line-height:1.7;margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu-toggle span,.mobile-menu-nav a{transition:none!important}
  .mobile-menu-nav a{transform:none;opacity:1}
}

/* V1.5.8.12 — hide decorative custom cursor when mobile navigation is active */
@media (max-width: 1000px) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}

/* V1.6.0 — production contact form */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.form-bottom button:disabled{cursor:wait;opacity:.65;transform:none;box-shadow:none}


/* V1.6.1 — contact field focus + one-shot success state */
.contact-form label:after{display:none}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{border-bottom-color:var(--logo-purple)}
.contact-form.is-sent{
  min-height:390px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-confirmation{
  width:100%;
  max-width:620px;
  padding:34px 0;
}
.contact-confirmation .eyebrow{
  margin:0 0 20px;
  color:var(--logo-purple);
}
.contact-confirmation h3{
  margin:0 0 18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(27px,2.35vw,38px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.035em;
  color:var(--ink);
}
.contact-confirmation p:last-child{
  margin:0;
  max-width:32em;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.65;
  color:#6e6862;
}
@media(max-width:700px){
  .contact-form.is-sent{min-height:320px}
  .contact-confirmation{padding:24px 0}
}

/* V1.6.2 — confirmation typography refined; cache-busting handled in index.html */