:root { --paper:#eeece7; --ink:#171719; --smoke:#706f6c; --rule:rgba(23,23,25,.2); --rose:#a67578; --night:#202628; --mono:"DM Mono",ui-monospace,monospace; --sans:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--paper); } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); } a { color:inherit; text-decoration:none; }
.page-noise { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.11; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:27px 4.25vw; position:absolute; inset:0 0 auto; z-index:3; }.brand { display:inline-flex; align-items:center; gap:11px; font:500 13px/1 var(--mono); letter-spacing:.29em; }.brand img { width:96px; height:96px; }.desktop-nav { display:flex; gap:30px; margin-left:auto; margin-right:45px; }.desktop-nav a,.nav-cta,footer,.overline,.eyebrow,.hero-record,.section-index,.cloud-caption,.service-list>article>span,.contact-note { font:500 10px/1.5 var(--mono); letter-spacing:.16em; }.desktop-nav a { opacity:.72; text-transform:uppercase; }.nav-cta { border-bottom:1px solid var(--ink); padding-bottom:5px; text-transform:uppercase; }.nav-cta span,.button span { font-size:16px; margin-left:8px; }
.hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(210px,.55fr); column-gap:8vw; padding:clamp(150px,18vw,225px) 4.25vw 0; }.hero-copy { max-width:760px; }.eyebrow,.overline { color:var(--smoke); margin:0 0 20px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(43px,5.1vw,76px); font-weight:500; letter-spacing:-.07em; line-height:1.04; margin-bottom:27px; }.hero-intro { max-width:565px; color:#494947; font-size:clamp(15px,1.35vw,18px); line-height:1.62; }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px 37px; margin-top:36px; }.button { min-height:58px; display:inline-flex; justify-content:center; align-items:center; padding:0 25px; font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; transition:transform .25s ease,background-color .25s ease; }.button:active { transform:translateY(1px) scale(.98); }.button-dark { color:var(--paper); background:var(--ink); }.button-dark:hover { background:#3e3c3c; }.text-link { padding-bottom:6px; border-bottom:1px solid var(--ink); font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }.hero-record { align-self:end; color:var(--smoke); line-height:2.25; padding-bottom:4px; }.hero-record p { margin:0; }.cloudscape-wrap { position:relative; grid-column:1/-1; height:clamp(330px,42vw,575px); overflow:hidden; margin:66px -4.25vw 0; }.cloudscape { display:block; width:100%; height:100%; object-fit:cover; object-position:center 59%; }.cloud-caption { position:absolute; right:4.25vw; bottom:25px; color:rgba(255,255,255,.84); }.cloud-marker { position:absolute; right:calc(4.25vw + 245px); bottom:23px; width:9px; height:9px; border-radius:50%; background:var(--rose); }
.manifesto,.services,.process,.contact { display:grid; grid-template-columns:minmax(145px,25%) minmax(0,1fr); padding:clamp(105px,14vw,190px) 4.25vw; }.section-index { color:var(--smoke); }.section-index span { margin-left:12px; }.manifesto-body,.services-content,.process-content { max-width:840px; } h2 { font-size:clamp(38px,4.6vw,68px); font-weight:500; letter-spacing:-.065em; line-height:1.05; margin-bottom:32px; }.large-copy { max-width:760px; color:#575653; font-size:clamp(18px,2vw,27px); letter-spacing:-.035em; line-height:1.4; }
.services { border-top:1px solid var(--rule); padding-top:clamp(90px,11vw,155px); }.services-content>h2 { max-width:700px; }.service-list { border-top:1px solid var(--rule); margin-top:60px; }.service-list article { display:grid; grid-template-columns:70px minmax(0,1fr) minmax(230px,.72fr); gap:25px; align-items:start; padding:28px 0 30px; border-bottom:1px solid var(--rule); }.service-list>article>span { color:var(--rose); }.service-list h3 { margin:0; font-size:23px; font-weight:500; letter-spacing:-.045em; }.service-list p { grid-column:3; margin:0; color:#5e5d59; font-size:15px; line-height:1.6; }
.process { background:#d7d4cc; }.process-content h2 { margin-bottom:56px; }.process-list { list-style:none; counter-reset:steps; border-top:1px solid var(--rule); margin:0; padding:0; }.process-list li { counter-increment:steps; display:grid; grid-template-columns:45px minmax(0,1fr) minmax(220px,.65fr); gap:20px; padding:24px 0; border-bottom:1px solid var(--rule); }.process-list li::before { content:"0" counter(steps); color:var(--rose); font:500 10px/1.5 var(--mono); letter-spacing:.15em; }.process-list strong { font-size:21px; font-weight:500; letter-spacing:-.045em; }.process-list span { color:#5e5d59; font-size:14px; line-height:1.6; }
.ledger { display:grid; grid-template-columns:minmax(135px,.42fr) minmax(300px,1fr) minmax(190px,.55fr); gap:9vw; padding:clamp(98px,12vw,170px) 4.25vw; }.ledger-stamp { display:grid; place-items:center; width:116px; height:116px; border:1px solid rgba(23,23,25,.45); transform:rotate(-5deg); text-align:center; font:500 13px/1.15 var(--mono); letter-spacing:.08em; }.ledger-copy h2 { font-size:clamp(36px,4vw,57px); }.ledger-copy>p:last-child { max-width:510px; color:#5b5a56; font-size:16px; line-height:1.65; }.ledger-metrics { margin:0; border-top:1px solid var(--rule); }.ledger-metrics div { padding:17px 0; border-bottom:1px solid var(--rule); }.ledger-metrics dt { margin-bottom:9px; color:var(--rose); font:500 11px/1 var(--mono); }.ledger-metrics dd { margin:0; font-size:16px; letter-spacing:-.03em; }
.contact { min-height:79dvh; position:relative; background:var(--night); color:var(--paper); }.contact .section-index,.contact .overline,.contact-note { color:#bdbcb5; }.contact-content { align-self:center; }.contact-content h2 { font-size:clamp(48px,6vw,88px); margin-bottom:43px; }.button-light { color:var(--ink); background:var(--paper); }.button-light:hover { background:#c9c7c0; }.contact-note { position:absolute; right:4.25vw; bottom:33px; } footer { display:flex; align-items:center; justify-content:space-between; padding:22px 4.25vw; color:#bdbcb5; border-top:1px solid rgba(238,236,231,.25); background:var(--night); } footer a { border-bottom:1px solid #bdbcb5; padding-bottom:4px; }
@media (max-width:760px) { .site-header { padding:20px 5.4vw; }.desktop-nav,.nav-cta { display:none; }.hero { display:block; padding:143px 5.4vw 0; }.hero-record { margin-top:43px; }.cloudscape-wrap { height:300px; margin:52px -5.4vw 0; }.cloud-caption { right:5.4vw; bottom:17px; font-size:8px; }.cloud-marker { right:calc(5.4vw + 242px); bottom:16px; }.manifesto,.services,.process,.contact { display:block; padding:92px 5.4vw; }.section-index { margin-bottom:63px; } h1 { font-size:clamp(41px,12vw,57px); } h2 { font-size:43px; }.service-list { margin-top:39px; }.service-list article { grid-template-columns:35px 1fr; gap:15px; }.service-list p { grid-column:2; margin-top:4px; }.process-list li { grid-template-columns:29px 1fr; gap:14px; }.process-list span { grid-column:2; }.process-list strong { font-size:19px; }.contact { min-height:640px; }.contact-content h2 { font-size:53px; }.contact-note { left:5.4vw; right:auto; bottom:23px; font-size:8px; } footer { align-items:flex-start; flex-direction:column; gap:13px; padding:22px 5.4vw; } }
/* .ledger's 3 fixed-width columns (135+300+190px) plus their gaps and padding
   need ~850px of inline space to fit without overflowing. The shared 760px
   breakpoint above left a 760-850px dead zone, exactly iPad-portrait's 768px,
   where the grid had already re-enabled but didn't yet have room. Ledger gets
   its own wider breakpoint instead of sharing the general one. */
@media (max-width:860px) { .ledger { display:block; padding:85px 5.4vw; }.ledger-stamp { margin-bottom:72px; }.ledger-copy { margin-bottom:63px; } }
#packages .service-list>article>span { font-size:15px; letter-spacing:.04em; }
#packages .pack-band { margin:72px 0 -46px; }
#packages .pack-band:first-of-type { margin-top:0; }
#packages .service-list>article>span i { font-style:normal; opacity:.62; }
#packages .pack-buy { grid-column:3; justify-self:start; margin-top:14px; padding-bottom:6px; border-bottom:1px solid var(--ink); font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
#packages .pack-buy span { font-size:14px; margin-left:7px; }
#packages .pack-more { margin:34px 0 0; color:#5e5d59; font-size:15px; line-height:1.6; }
#packages .pack-more a { border-bottom:1px solid var(--rule); padding-bottom:2px; }
@media (max-width:760px) { #packages .pack-band { margin:52px 0 -26px; }
#packages .service-list article { grid-template-columns:74px 1fr; }
#packages .service-list p { grid-column:2; }
#packages .pack-buy { grid-column:2; } }
.legal-links { flex-basis:100%; order:8; display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font:500 10px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.legal-links a { border-bottom:1px solid #bdbcb5; padding-bottom:4px; }
/* iOS safe areas. The viewport is viewport-fit=cover, so the page paints edge to
   edge instead of Safari letterboxing it and filling the gap with --paper (that
   band was the white chin under the toolbar). Only the chrome that touches a
   screen edge pads itself back out of the status bar and the home indicator.
   Held in variables so a test can substitute real iPhone inset values. */
:root { --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom); --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right); }
.site-header { padding-top:calc(27px + var(--sat)); padding-left:max(4.25vw,var(--sal)); padding-right:max(4.25vw,var(--sar)); }
.contact-note { bottom:calc(33px + var(--sab)); }
footer { padding-bottom:calc(22px + var(--sab)); padding-left:max(4.25vw,var(--sal)); padding-right:max(4.25vw,var(--sar)); }
@media (max-width:760px) {
  .site-header { padding-top:calc(20px + var(--sat)); padding-left:max(5.4vw,var(--sal)); padding-right:max(5.4vw,var(--sar)); }
  .contact-note { bottom:calc(23px + var(--sab)); }
  footer { padding-left:max(5.4vw,var(--sal)); padding-right:max(5.4vw,var(--sar)); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }