@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f0ece3;--ink:#11120f;--green:#142015;--sage:#a7b987;--red:#c93621;--gold:#d9ae31;--line:rgba(17,18,15,.55);--pad:clamp(22px,4vw,68px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.mono{font-family:"DM Mono",monospace;text-transform:uppercase;letter-spacing:.12em;font-weight:500}.serif{font-family:"Instrument Serif",serif}.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.rulehead{position:absolute;z-index:10;top:0;left:var(--pad);right:var(--pad);padding:22px 0 14px;border-bottom:1px solid currentColor;display:flex;justify-content:space-between;font:500 11px "DM Mono";letter-spacing:.13em;text-transform:uppercase}
.hero{min-height:100vh;position:relative;padding:120px var(--pad) 55px;display:flex;flex-direction:column;justify-content:center}
.hero-grid{display:grid;grid-template-columns:.34fr 1fr;gap:5vw;align-items:center}
.axis{height:58vh;position:relative;margin-left:8vw}.axis:before{content:"";position:absolute;top:36px;bottom:48px;left:14px;border-left:1px solid}.axis b{font:500 11px "DM Mono";letter-spacing:.14em}.axis .end{position:absolute;bottom:0;left:-20px;border:1px solid;padding:13px 18px}
.hero-kicker{font:500 clamp(16px,1.4vw,23px) "DM Mono";letter-spacing:.18em;margin-bottom:15px}
.hero h1{font-family:"Instrument Serif";font-weight:400;font-size:clamp(74px,9.4vw,164px);line-height:.76;letter-spacing:-.045em;margin:0;max-width:1200px}
.hero h1 strong{font-family:"DM Sans";font-weight:700}.hero h1 em{display:block;color:#6e824d;margin-left:7vw;font-size:.69em;line-height:.95}
.hero-lead{font-family:"Instrument Serif";font-size:clamp(26px,2.7vw,45px);line-height:1.05;max-width:740px;margin:48px 0 0}
.idea{background:var(--green);color:#f1eee5;min-height:100vh;padding:120px var(--pad) 75px;position:relative;display:flex;align-items:center}
.idea .rulehead{color:#f1eee5}.idea h2{font-size:clamp(65px,8.6vw,148px);line-height:.78;letter-spacing:-.055em;margin:0;font-weight:700;max-width:1450px}.idea h2 em{font-family:"Instrument Serif";font-weight:400;color:var(--sage);display:block;margin-left:13vw}
.flow{margin-top:75px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;font:600 14px "DM Mono";letter-spacing:.08em}.flow i{color:#697363;font-style:normal}
.idea-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:70px}.idea-bottom p{font-family:"Instrument Serif";font-size:clamp(26px,2.4vw,40px);line-height:1.1;margin:0}.idea-bottom .small{font:400 14px/1.65 "DM Sans";color:#c8cec2;max-width:520px}
.intro{padding:110px var(--pad) 65px}.intro h2{font:400 clamp(72px,9vw,150px)/.78 "Instrument Serif";letter-spacing:-.04em;margin:15px 0 40px}.intro h2 em{color:var(--red)}
.project{min-height:92vh;position:relative;overflow:hidden;border-top:1px solid var(--line);display:grid;grid-template-columns:.92fr 1.08fr}
.project-copy{padding:85px var(--pad);display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2}.num{font:400 clamp(110px,14vw,230px)/.7 "Instrument Serif";opacity:.18;position:absolute;right:15px;top:40px}
.project h3{font:700 clamp(63px,7.3vw,125px)/.76 "DM Sans";letter-spacing:-.065em;margin:80px 0 20px;text-transform:uppercase}.project h3 em{display:block;font:400 .58em/1 "Instrument Serif";text-transform:none;letter-spacing:-.02em;margin-left:4vw}
.project p{max-width:480px;line-height:1.65;font-size:14px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border:1px solid;border-radius:0;font-size:12px;font-weight:700;transition:.2s}.btn:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 currentColor}.btn.fill{background:var(--ink);color:#fff;border-color:var(--ink)}
.visual{padding:5vw 4vw 5vw 0;display:flex;align-items:center;position:relative}.visual img{width:100%;max-height:72vh;object-fit:cover;object-position:top;box-shadow:0 25px 60px rgba(0,0,0,.16)}.tag{position:absolute;right:var(--pad);bottom:45px;background:var(--paper);border:1px solid;padding:10px 14px;font:500 10px "DM Mono";letter-spacing:.08em}
.p2{background:#17232c;color:#f4f1e9}.p2 .project-copy{background:#17232c}.p2 .btn{color:#fff}.p2 .btn.fill{background:#fff;color:#111;border-color:#fff}.p2 .tag{background:#d9ae31;color:#111;border:0}.p2 .num{color:#fff}
.p3{background:#e9e8e3}.p4{background:#231919;color:#f6eee8}.p4 .btn{color:#fff}.p4 .btn.fill{background:#fff;color:#111;border-color:#fff}.p4 .tag{background:var(--red);color:#fff;border:0}.p4 .num{color:#fff}
.process{background:var(--red);color:#fff;min-height:90vh;padding:115px var(--pad) 70px;position:relative}.process .rulehead{color:#fff}.process h2{font:700 clamp(70px,9vw,150px)/.78 "DM Sans";letter-spacing:-.06em;margin:80px 0 20px}.process h2 em{font:400 .62em "Instrument Serif";display:block;margin-left:25vw}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:90px;border-top:1px solid rgba(255,255,255,.65)}.process-grid div{padding:20px 20px 30px 0;border-right:1px solid rgba(255,255,255,.35)}.process-grid div+div{padding-left:20px}.process-grid b{font:400 50px "Instrument Serif"}.process-grid strong{display:block;margin-top:35px}.process-grid p{font-size:12px;line-height:1.5;color:#f4c9c0}
.price{min-height:90vh;padding:110px var(--pad);position:relative;display:flex;align-items:center}.price-inner{width:100%}.price h2{font:700 clamp(76px,10vw,165px)/.73 "DM Sans";letter-spacing:-.065em;margin:70px 0 0}.price h2 em{font:400 .72em "Instrument Serif";display:block;margin-left:18vw}.amount{font:400 clamp(100px,17vw,270px)/.8 "Instrument Serif";margin:65px 0 20px;color:var(--red)}.includes{display:flex;gap:28px;flex-wrap:wrap;font:500 11px "DM Mono";letter-spacing:.05em}.includes span:before{content:"✓ ";font-weight:700}
.final{min-height:100vh;background:var(--green);color:#f2eee4;position:relative;padding:115px var(--pad) 65px;overflow:hidden}.final h2{font:700 clamp(78px,10vw,170px)/.75 "DM Sans";letter-spacing:-.065em;margin:100px 0 0}.final h2 em{font:400 .65em "Instrument Serif";color:var(--sage);display:block;margin-left:18vw}.final-row{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;margin-top:100px}.final p{font:400 clamp(25px,2.5vw,42px)/1.05 "Instrument Serif";margin:0}.final .btn{color:#f2eee4}.final .btn.fill{background:#f2eee4;color:#111;border-color:#f2eee4}.ifox{font:700 16px "DM Sans";margin-top:80px}.ifox small{font:500 9px "DM Mono";display:block;letter-spacing:.13em;margin-top:6px;color:#9ca696}
.reveal{opacity:0;transform:translateY(25px);transition:.7s ease}.reveal.on{opacity:1;transform:none}
@media(max-width:850px){.hero-grid,.project,.idea-bottom,.final-row{grid-template-columns:1fr}.axis{display:none}.project{min-height:0}.visual{padding:0 var(--pad) 70px}.project-copy{min-height:620px}.process-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:75px}.idea h2,.project h3,.process h2,.price h2,.final h2{font-size:64px}.rulehead span:last-child{display:none}}
@media(max-width:520px){.process-grid{grid-template-columns:1fr}.process-grid div{border-right:0;border-bottom:1px solid rgba(255,255,255,.3)}.process-grid div+div{padding-left:0}.amount{font-size:100px}.hero{min-height:850px}}

/* Accessibility / WCAG 2.2 AA */
html{scroll-padding-top:1rem}
body{line-height:1.5}
.skip-link{position:fixed;z-index:9999;left:1rem;top:1rem;padding:.8rem 1rem;background:#fff;color:#111;border:3px solid #111;transform:translateY(-200%);font-weight:700}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #0b63ce;outline-offset:4px}
.project.p2 :focus-visible,.project.p4 :focus-visible,.idea :focus-visible,.process :focus-visible,.final :focus-visible{outline-color:#fff}
a{min-height:24px}
.btn{min-height:44px;min-width:44px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
[id]{scroll-margin-top:1rem}
.project p{font-size:max(14px,1rem)}
.idea-bottom .small,.process-grid p{font-size:max(12px,.875rem)}
.visual img{height:auto}
@media(max-width:850px){.rulehead{position:static;margin-bottom:2rem}.hero,.idea,.process,.price,.final{padding-top:2rem}}
@media(max-width:420px){.hero h1,.idea h2,.project h3,.process h2,.price h2,.final h2{font-size:clamp(2.7rem,16vw,4.2rem);overflow-wrap:anywhere}.hero{min-height:auto;padding-bottom:5rem}.project-copy{min-height:0}.amount{font-size:clamp(5rem,28vw,7rem)}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .reveal{opacity:1!important;transform:none!important}
}
@media(forced-colors:active){.btn{border:2px solid ButtonText}.tag{border:1px solid CanvasText}}

.process-grid,.includes{list-style:none;padding-left:0}
.process-grid li{padding:20px 20px 30px 0;border-right:1px solid rgba(255,255,255,.35)}
.process-grid li+li{padding-left:20px}
.process-grid b{font:400 50px "Instrument Serif"}
.process-grid strong{display:block;margin-top:35px}
.process-grid p{font-size:.875rem;line-height:1.5;color:#f4c9c0}
.includes li:before{content:"✓ ";font-weight:700}
@media(max-width:520px){.process-grid li{border-right:0;border-bottom:1px solid rgba(255,255,255,.3)}.process-grid li+li{padding-left:0}}

/* Hand-made emphasis: visual layer only; <mark> remains meaningful in DOM. */
.marker{
  position:relative;display:inline;z-index:0;color:inherit;background:none;padding:0 .04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.marker::before{
  content:"";position:absolute;z-index:-1;left:-.07em;right:-.08em;bottom:.04em;height:.32em;
  opacity:.82;transform:rotate(-1.2deg) skewX(-7deg);border-radius:45% 10% 40% 15%;
  clip-path:polygon(0 28%,5% 8%,15% 18%,25% 5%,37% 16%,50% 7%,64% 18%,76% 6%,89% 16%,100% 2%,98% 78%,88% 91%,75% 80%,61% 94%,48% 82%,33% 96%,18% 84%,5% 96%);
}
.marker-yellow::before{background:#f0c934}
.marker-sage::before{background:#9fb27b;opacity:.68}
.idea .marker-sage::before{background:#c3d594;opacity:.72}
.final .marker-yellow::before{background:#e2b936;opacity:.9}

/* Very slow ambient movement. Decorative, non-interactive, hidden from AT. */
.hero,.idea,.process,.price,.final{overflow:hidden}
.drift{position:absolute;pointer-events:none;user-select:none;z-index:0;will-change:transform}
.drift-ring{width:clamp(180px,24vw,430px);aspect-ratio:1;border:1px solid currentColor;border-radius:50%;opacity:.08}
.drift-word{font:700 clamp(150px,27vw,520px)/.7 "DM Sans";letter-spacing:-.09em;opacity:.025}
.drift-a{right:-8vw;bottom:-10vw;animation:floatA 28s ease-in-out infinite alternate}
.drift-b{right:-4vw;top:22%;animation:floatB 36s ease-in-out infinite alternate}
.drift-c{left:-9vw;bottom:-10vw;animation:floatC 31s ease-in-out infinite alternate}
.drift-d{right:-2vw;top:20%;color:#c93621;opacity:.035;animation:floatB 40s ease-in-out infinite alternate}
.drift-e{right:-8vw;top:18%;color:#a7b987;animation:floatA 34s ease-in-out infinite alternate}
@keyframes floatA{from{transform:translate3d(0,0,0) rotate(-7deg)}to{transform:translate3d(-32px,-22px,0) rotate(5deg)}}
@keyframes floatB{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-24px,18px,0) rotate(-2deg)}}
@keyframes floatC{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(38px,-18px,0) scale(1.05)}}

/* Project imagery breathes almost imperceptibly while in view. */
.visual img{transition:transform 14s cubic-bezier(.2,.65,.25,1)}
.project.is-in-view .visual img{transform:scale(1.018)}
.project .num{transition:transform 18s ease-out}
.project.is-in-view .num{transform:translateY(-12px)}

/* Motion must never be required to understand content. */
@media(prefers-reduced-motion:reduce){
 .drift{animation:none!important}
 .visual img,.project .num{transition:none!important;transform:none!important}
}

/* Optical type matching in the mixed hero.
   Instrument Serif and DM Sans are NOT set at equal CSS size:
   sizes are tuned to approximate the same visible cap/x-height before line-height is applied. */
.hero h1{
  font-size:initial;
  line-height:initial;
}
.hero-line{display:block;white-space:nowrap}
.hero-line,
.hero-serif{
  font-family:"Instrument Serif",serif;
  font-size:clamp(72px,9.15vw,159px);
  line-height:.82;
  letter-spacing:-.045em;
}
.hero-mixed{display:flex;align-items:baseline;gap:.12em}
.hero-mixed strong,
.hero-grotesk strong{
  font-family:"DM Sans",sans-serif;
  font-size:.805em;
  line-height:1;
  letter-spacing:-.065em;
}
.hero-grotesk{
  font-family:"DM Sans",sans-serif;
  font-size:clamp(72px,9.15vw,159px);
  line-height:.68;
}
.hero-grotesk strong{font-size:.805em}
.hero h1>em{
  display:block;
  font-size:clamp(49px,6.25vw,109px);
  line-height:.96;
  margin-top:.16em;
}
@media(max-width:850px){
 .hero-line{white-space:normal}
 .hero-mixed{display:block}
 .hero-line,.hero-serif,.hero-grotesk{font-size:clamp(3.9rem,15vw,6.2rem)}
 .hero-mixed strong,.hero-grotesk strong{font-size:.805em}
 .hero h1>em{font-size:clamp(3rem,11vw,4.7rem);margin-left:0}
}

/* Small escape hatch back to the parent iFOX experience. */
.back-ifox{
 position:fixed;z-index:90;right:18px;top:18px;display:flex;align-items:center;gap:10px;
 min-width:44px;min-height:44px;padding:8px 12px 8px 10px;
 color:#111;background:rgba(240,236,227,.88);border:1px solid rgba(17,18,15,.45);
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 transition:transform .22s ease,background .22s ease;box-shadow:0 3px 18px rgba(0,0,0,.05)
}
.back-ifox:hover{transform:translateY(-2px);background:#f7f3ea}
.back-ifox-arrow{font-size:20px;line-height:1}
.back-ifox-text{display:flex;flex-direction:column;line-height:1}
.back-ifox-text strong{font-size:12px;letter-spacing:.04em}
.back-ifox-text small{font:500 8px/1.25 "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;color:#62615d}
.back-ifox:focus-visible{outline:3px solid #0b63ce;outline-offset:4px}
@media(max-width:600px){
 .back-ifox{right:10px;top:10px;padding:9px}
 .back-ifox-text small{display:none}
}
@media(forced-colors:active){.back-ifox{background:Canvas;color:CanvasText;border:2px solid CanvasText}}

/* Refined iFOX return widget — separated label, fixed to viewport while scrolling. */
.back-ifox{
 position:fixed!important;
 top:18px!important;right:18px!important;left:auto!important;
 display:grid!important;grid-template-columns:auto auto;align-items:center;column-gap:9px;
 width:auto;min-width:0;min-height:46px;
 padding:7px 13px 7px 10px!important;
 border:1px solid rgba(17,18,15,.28);
 border-radius:999px;
 background:rgba(248,245,237,.94);
 color:#111;
 box-shadow:0 8px 28px rgba(17,18,15,.10);
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 isolation:isolate;
}
.back-ifox-arrow{
 display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
 background:#111;color:#f8f5ed;font-size:17px;line-height:1;
}
.back-ifox-text{display:grid!important;grid-template-rows:auto auto;gap:2px;white-space:nowrap}
.back-ifox-text strong{font:700 12px/1 "DM Sans",sans-serif;letter-spacing:.06em}
.back-ifox-text small{display:block!important;font:500 7px/1.1 "DM Mono",monospace;letter-spacing:.10em;text-transform:uppercase;color:#67645e}
.back-ifox:hover{transform:translateY(-2px);background:#fff}
@media(max-width:600px){
 .back-ifox{top:10px!important;right:10px!important;min-height:44px;padding:7px 10px 7px 8px!important}
 .back-ifox-text small{display:block!important}
}