/* About and Rates use the same masthead and ruled navigation as Work / Journal. */
.studio-page{--p:0;background:#fff}
.studio-page .page{background:#fff}
.st{--st-gap:16px;background:#fff}
.st :is(a,button,summary):focus-visible{outline:2px solid currentColor;outline-offset:5px}
.st [id]{scroll-margin-top:100px}
.st figure{margin:0}
.st-mast .jn-hero{max-width:720px;margin-top:12px}
.st-mast .jn-hero p{font-size:16px;line-height:1.5;color:var(--mute);text-wrap:pretty}
.st-container{max-width:1280px;margin-inline:auto}
.st-label,.st-number{font-size:11px;line-height:1.5;color:var(--mute);font-weight:400}
.st-number{font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:10px;font-variant-numeric:tabular-nums}
.st-link{display:inline-flex;align-items:center;gap:16px;width:fit-content;font-size:14px;line-height:1.4}
.st-link svg,.st-button svg{width:14px;height:14px;flex:none;transition:transform .25s}
.st-link:hover svg,.st-button:hover svg{transform:translate(2px,-2px)}
.st-link:hover{text-decoration:underline;text-underline-offset:5px}
.st a.st-button{gap:20px;padding-inline:22px}
.st-section-nav{gap:clamp(18px,3vw,42px)}
.st-section-nav .jn-tab{font-size:16px;padding-inline:18px}
.st-section-nav .jn-tab,.st-rate-tabs .jn-tab{color:var(--faint)}
.st-section-nav .jn-tab:is(.on,:hover),.st-rate-tabs .jn-tab:is(.on,:hover){color:var(--ink)}
.st-section-nav>.st-link{margin-left:auto;margin-bottom:15px;padding-right:4px;white-space:nowrap}

/* A contact sheet, followed by one short introduction. */
.st-contact-sheet{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--st-gap);margin-top:24px}
.st-photo{position:relative;height:clamp(300px,32vw,500px);overflow:hidden;border-radius:8px;background:#EFEEEC}
.st-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.st-photo:hover img{transform:scale(1.025)}
.st-photo::after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#0007);pointer-events:none}
.st-photo figcaption{position:absolute;left:20px;bottom:18px;z-index:1;color:#fff;font-size:12px;line-height:1.4}
.st-photo-meta{display:flex;justify-content:space-between;gap:18px;padding-top:12px;font-size:11px;color:var(--mute)}
.st-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,7vw,112px);padding:clamp(48px,6vw,88px) 0}
.st-intro h2{font-size:clamp(26px,2.15vw,34px);line-height:1.18;letter-spacing:-.025em;text-wrap:pretty}
.st-copy{max-width:480px}
.st-copy p,.st-bio p{font-size:15px;line-height:1.65;color:var(--mute);text-wrap:pretty}
.st-copy p+p{margin-top:14px}
.st-copy .st-link{margin-top:22px}

/* The founder, kept human and brief. */
.st-founder{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,8vw,128px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--rule)}
.st-founder-photo{max-width:520px;width:100%}
.st-founder-photo img{display:block;width:100%;height:clamp(360px,39vw,520px);object-fit:cover;object-position:50% 43%;border-radius:8px}
.st-founder-photo figcaption{margin-top:10px;font-size:11px;color:var(--mute)}
.st-founder-copy{max-width:430px}
.st-founder-copy>h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(40px,3.61vw,58px);line-height:1.05;letter-spacing:-.03em;margin-top:14px}
.st-bio{margin-top:30px}
.st-bio h3{font-size:19px;line-height:1.35;letter-spacing:-.01em}
.st-bio>span{display:block;font-size:12px;color:var(--mute);margin-top:4px}
.st-bio p{margin-top:18px}
.st-bio p+p{margin-top:10px}
.st-crew{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;padding-block:18px;border-block:1px solid var(--rule);font-size:12px;color:var(--mute)}
.st-founder-copy>.st-link{margin-top:24px}
.st-approach{padding:clamp(40px,5vw,72px) 0 clamp(64px,7vw,104px)}
.st-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.st-section-head h2{font-size:clamp(24px,1.89vw,30px);line-height:1.2;letter-spacing:-.02em;text-wrap:pretty}
.st-section-head>.st-label{flex:none}
.st-steps,.st-ways-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);padding-top:28px}
.st-step h3,.st-ways-grid h3{font-size:19px;line-height:1.3;margin-top:16px;letter-spacing:-.015em}
.st-step p,.st-ways-grid p{font-size:14px;line-height:1.6;color:var(--mute);margin-top:10px;max-width:33ch;text-wrap:pretty}
.st-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--st-gap);margin-top:48px}
.st-visual-link{position:relative;display:block;overflow:hidden;aspect-ratio:16 / 9;border-radius:8px;background:#111;color:#fff!important}
.st-visual-link>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.st-visual-link:hover>img{transform:scale(1.035)}
.st-visual-link::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 20%,#0009)}
.st-visual-link>span{position:absolute;bottom:28px;left:28px;z-index:1;display:flex;flex-direction:column;gap:8px}
.st-visual-link small{font-size:12px}
.st-visual-link b{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,2.75vw,43px);line-height:1.04;letter-spacing:-.02em;font-weight:400}
.st-visual-link>svg{position:absolute;right:28px;bottom:30px;z-index:1;width:22px;height:22px}

/* Rates: a service selector and one visual quote panel at a time. */
.st-rate-tabs{gap:clamp(4px,1.4vw,24px);overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain}
.st-rate-tabs::-webkit-scrollbar{display:none}
.st-rate-tabs .jn-tab{font-size:clamp(14px,1.25vw,18px);padding-inline:clamp(12px,1.5vw,24px);flex:none}
.st-rate-tabs .jn-tab:focus-visible{outline-width:1px;outline-offset:-4px}
.st-rate-panels{margin-top:24px}
.st-rate-panel{display:grid;grid-template-columns:1.08fr 1fr;gap:var(--st-gap);margin-bottom:24px}
.st-rate-panel[hidden]{display:none}
.st-rate-art{position:relative;min-height:490px;overflow:hidden;border-radius:8px;background:#181817}
.st-rate-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.st-rate-art::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0009);pointer-events:none}
.st-rate-art-label{position:absolute;z-index:1;bottom:30px;left:30px;right:30px;display:flex;flex-direction:column;gap:8px;color:#fff}
.st-rate-art-label>span{font-size:11px}
.st-rate-art-label>b{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(38px,3.44vw,58px);font-weight:400;line-height:1.05;letter-spacing:-.03em}
.st-rate-portrait{background:#F3F3F0}
.st-rate-portrait>img{width:auto;max-width:74%;margin:auto;object-fit:contain}
.st-rate-portrait::after{inset:60% 0 0}
.st-rate-copy{padding:clamp(24px,3vw,48px) clamp(24px,3.5vw,56px);max-width:670px;width:100%;align-self:center;justify-self:center}
.st-rate-copy>h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(36px,3.01vw,49px);line-height:1.04;letter-spacing:-.025em;margin-top:12px;text-wrap:balance}
.st-rate-deck{font-size:14px;line-height:1.5;color:var(--mute);margin-top:12px!important;max-width:40ch}
.st-rate-price{display:flex;flex-direction:column;gap:4px;margin-top:26px}
.st-rate-price>b{font-size:24px;font-weight:400;letter-spacing:-.02em}
.st-rate-price>span{font-size:11px;color:var(--mute);line-height:1.5}
.st-includes{margin-top:24px;border-top:1px solid var(--rule)}
.st-include,.st-question{border-bottom:1px solid var(--rule)}
.st-include summary,.st-question summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;padding:13px 0;font-size:14px;line-height:1.4}
.st-include summary::-webkit-details-marker,.st-question summary::-webkit-details-marker{display:none}
.st-include summary>span,.st-question summary>span{font-size:19px;line-height:1;font-weight:300;transition:transform .2s}
.st-include[open] summary>span,.st-question[open] summary>span{transform:rotate(45deg)}
.st-include p,.st-question p{font-size:13px;line-height:1.6;color:var(--mute);padding:0 28px 16px 0;text-wrap:pretty}
.st-rate-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.st-web-art{display:flex;align-items:center;justify-content:center;padding:42px;background:#EDEDEA}
.st-web-art::after{display:none}
.st-browser{width:100%;overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 22px 60px #0002;transform:rotate(-3deg)}
.st-browser-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:9px;color:#898984;letter-spacing:.02em}
.st-browser-bar>span:first-child{letter-spacing:2px;color:#c3c2bc}
.st-web-screen{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:#111}
.st-web-screen>img:first-child{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.st-web-screen .st-web-logo{position:absolute;top:16px;left:18px;width:52px;height:auto;filter:invert(1)}
.st-web-screen>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(28px,2.58vw,41px);letter-spacing:-.05em}
.st-rate-caption{position:absolute;left:28px;bottom:24px;font-size:11px;color:var(--mute)}
.st-ways{padding-block:clamp(40px,5vw,72px)}
.st-faq{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px);padding:clamp(36px,4vw,56px) 0 clamp(64px,7vw,100px);border-top:1px solid var(--rule)}
.st-faq h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(36px,3.01vw,47px);line-height:1.08;letter-spacing:-.025em;margin-top:12px}
.st-faq .st-link{margin-top:24px}
.st-question summary{font-size:16px;padding-block:20px}
.st-question:first-child summary{padding-top:0}
.st-question p{font-size:14px;max-width:56ch;padding-bottom:20px}

@media(max-width:1000px){
  .st-contact-sheet{grid-template-columns:1.5fr 1fr 1fr}
  .st-rate-panel{grid-template-columns:1fr 1fr}
  .st-rate-copy{padding:28px 20px}
  .st-rate-copy>h2{font-size:38px}
  .st-rate-actions{gap:20px}
  .st-founder{gap:40px}
}
@media(max-width:760px){
  .st-section-nav{gap:8px;overflow-x:auto;scrollbar-width:none}
  .st-section-nav .jn-tab{font-size:14px;padding-inline:12px}
  .st-section-nav>.st-link{font-size:12px;padding-left:16px}
  .st-contact-sheet{grid-template-columns:1fr 1fr;gap:12px}
  .st-photo{height:230px}
  .st-photo:first-child{grid-column:1 / -1;height:auto;aspect-ratio:16 / 9}
  .st-photo figcaption{left:14px;bottom:14px;font-size:11px}
  .st-intro{grid-template-columns:1fr;gap:22px;padding-block:40px}
  .st-copy{max-width:560px}
  .st-founder{grid-template-columns:1fr;gap:28px;padding-block:36px}
  .st-founder-photo{max-width:none}
  .st-founder-photo img{height:440px;object-position:50% 43%}
  .st-founder-copy{max-width:560px}
  .st-founder-copy>h2{font-size:44px}
  .st-bio{margin-top:22px}
  .st-section-head{align-items:flex-start;flex-direction:column;gap:10px;padding-bottom:20px}
  .st-steps,.st-ways-grid{grid-template-columns:1fr;gap:24px;padding-top:24px}
  .st-step,.st-ways-grid>article{display:grid;grid-template-columns:28px 1fr;column-gap:12px;align-items:baseline}
  .st-step h3,.st-ways-grid h3{margin:0;font-size:18px}
  .st-step p,.st-ways-grid p{grid-column:2;max-width:48ch;margin-top:6px}
  .st-next-grid{gap:12px;margin-top:36px}
  .st-visual-link{aspect-ratio:4 / 5}
  .st-visual-link>span{left:18px;bottom:22px;right:18px}
  .st-visual-link small{font-size:10px}
  .st-visual-link b{font-size:34px}
  .st-visual-link>svg{top:18px;right:18px;bottom:auto;width:18px;height:18px}
  .st-rate-panel{grid-template-columns:1fr;gap:0}
  .st-rate-art{min-height:0;height:clamp(260px,65vw,400px)}
  .st-rate-art-label{bottom:22px;left:22px;right:22px}
  .st-rate-art-label>b{font-size:42px}
  .st-rate-copy{max-width:none;padding:28px 8px 12px}
  .st-rate-copy>h2{font-size:40px;text-wrap:pretty}
  .st-rate-price{margin-top:20px}
  .st-rate-actions{gap:24px}
  .st-web-art{padding:32px 42px 48px}
  .st-browser{max-width:420px}
  .st-web-screen{aspect-ratio:16 / 9}
  .st-rate-caption{left:22px;bottom:16px}
  .st-ways{padding-block:40px}
  .st-faq{grid-template-columns:1fr;gap:32px;padding-top:36px}
}
@media(max-width:380px){
  .st-mast .jn-hero p{font-size:14px}
  .st-photo{height:200px}
  .st-section-nav>.st-link{display:none}
  .st-visual-link b{font-size:30px}
  .st-visual-link>span{left:14px;right:14px}
}
@media(prefers-reduced-motion:reduce){
  .st :is(img,svg,summary>span){transition:none}
  .st-photo:hover img,.st-visual-link:hover>img{transform:none}
}

/* About: a small studio scrapbook, using the homepage hand and Rates artwork. */
.st-about{--ap-blue:#2955df;--ap-muted:#62625e;padding:0}
.ap-wrap{width:90%;max-width:1280px;padding-inline:17px;margin-inline:auto}
.ap-hand{display:block;font-family:'Caveat',cursive;font-size:28px;line-height:1.05;font-weight:400;letter-spacing:0}
.ap-doodle{display:block;width:120px;aspect-ratio:1;background:url('../img/quote/drawn-icons.webp') no-repeat;background-size:400% 300%;flex:none;pointer-events:none}
.ap-camera{background-position:0 0}.ap-megaphone{background-position:33.333333% 0}.ap-spark{background-position:33.333333% 100%}.ap-pencil{background-position:66.666667% 100%}.ap-rocket{background-position:66.666667% 50%}
/* The studio: a full-width band on a stadium photo that runs up under the floating nav, darkened so the type
   reads. The pull-up matches the nav's margin and height; equal padding top and bottom keeps the
   introduction in the middle of the whole photo. */
.ap-hero{--nav-room:calc(18px + clamp(54px,3.8vw,62px));position:relative;isolation:isolate;display:grid;place-items:center;min-height:min(64vh,560px);margin:calc(-1 * var(--nav-room)) calc(50% - 50vw) 0;padding:calc(var(--nav-room) + 24px) 24px;color:#FAFAFA;text-align:center;background:#FFFFFF;overflow:hidden}
@media(max-width:860px){.ap-hero{--nav-room:64px}}
.ap-studio{position:absolute;inset:0;z-index:-2;margin:0}
.ap-studio img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%;opacity:1}
.ap-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,12,24,.4),rgba(6,12,24,0) 32%),radial-gradient(ellipse 60% 75% at 50% 58%,rgba(6,12,24,.45),rgba(6,12,24,.25) 70%,rgba(6,12,24,.1))}
.ap-hero-copy{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:780px}
.ap-hero-note{color:#AFC3FF;font-size:26px;margin:0 0 12px;transform:rotate(-3deg)}
.ap-hero-title{display:flex;align-items:flex-start;font-family:'Instrument Serif',Georgia,serif;font-size:clamp(46px,5vw,72px);font-weight:400;line-height:1.04;letter-spacing:-.025em;margin:0 0 0 .4em}
.ap-hero-spark{width:.34em;margin:-.02em 0 0 .1em;transform:rotate(13deg)}
.ap-hero-copy>p{max-width:66ch;margin:22px 0 0;font-size:18px;line-height:1.65;color:rgba(250,250,250,.82);text-wrap:balance}
.ap-hero-side{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:32px}
.ap-hero .st-link{color:#FAFAFA}
.ap-hero-camera{width:72px;transform:rotate(-10deg)}
.ap-people{padding-top:clamp(64px,7vw,96px)}
.ap-intro{max-width:730px;margin:0 auto 48px;text-align:center}
@media(min-width:861px){.ap-intro{max-width:none}.ap-intro h2{white-space:nowrap}.ap-intro>p{max-width:690px;margin-left:auto;margin-right:auto}}
.ap-hello{color:var(--ap-blue);margin-bottom:20px;transform:rotate(-4deg)}
.ap-intro h2,.ap-difference h2,.ap-approach h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(42px,4.13vw,59px);line-height:1.04;letter-spacing:-.025em;font-weight:400}
.ap-mark{position:relative;display:inline-block}
.ap-underline{position:absolute;left:0;bottom:-12px;width:100%;height:18px;overflow:visible;fill:none;stroke:#2955DF;stroke-width:2.4;stroke-linecap:round}
.ap-intro>p{font-size:18px;line-height:1.65;margin-top:34px;color:var(--ap-muted);text-wrap:balance}
.ap-crew-board{position:relative;display:grid;grid-template-columns:1fr 1.5fr;gap:22px;max-width:1060px;margin:auto}
.ap-noah{display:flex;flex-direction:column;min-width:0}
.ap-noah>img{display:block;width:100%;height:450px;object-fit:cover;object-position:50% 33%;border-radius:7px;background:#e9e9e7}
.ap-noah figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:14px;font-size:14px;line-height:1.4}
.ap-noah figcaption>span:last-child{font-size:12px;color:var(--ap-muted)}
.ap-crew-right{display:flex;flex-direction:column;gap:20px;min-width:0}
@media(min-width:701px){.ap-crew-right{contain:size}}
.ap-crew-note{display:flex;align-items:center;gap:24px;flex:none;padding:24px 30px;border-radius:7px;background:#DCF59A}
.ap-crew-note>.ap-doodle{width:90px;transform:rotate(-9deg)}
.ap-crew-note h3{font-size:25px;line-height:1.2;letter-spacing:-.025em}
.ap-crew-note p{font-size:15px;line-height:1.55;margin-top:8px;max-width:46ch;text-wrap:pretty}
.ap-onset{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
/* the on-set photo fills what's left, so both photos end on the same line */
.ap-onset>img{display:block;width:100%;height:0;flex:1;min-height:180px;object-fit:cover;object-position:50% 60%;border-radius:7px}
.ap-onset figcaption{font-size:23px;line-height:1;margin-top:12px;text-align:right;color:var(--ap-blue);transform:rotate(-2deg);padding-right:8px}
.ap-noah-note{position:absolute;left:-73px;top:26px;max-width:160px;font-size:23px;color:var(--ap-blue);transform:translateX(-50%) rotate(-9deg);text-align:center;pointer-events:none}
.ap-noah-note svg{display:block;width:70px;height:65px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg);margin:6px 0 0 auto}
.ap-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:880px;margin:44px auto 70px;text-align:center}
.ap-facts>div{display:flex;flex-direction:column;align-items:center;gap:10px}
.ap-facts .ap-hand{font-size:52px;color:var(--ap-blue);transform:rotate(-4deg)}
.ap-facts>div:nth-child(2) .ap-hand{transform:rotate(4deg)}
.ap-facts>div>span:last-child{font-size:13px;color:var(--ap-muted);line-height:1.4}
.ap-difference{padding:44px;border-radius:10px;background:#2955DF;color:#fff}
.ap-difference-head{text-align:center;margin-bottom:32px}
.ap-difference-head>.ap-hand{font-size:25px;color:#DCF59A;margin-bottom:13px;transform:rotate(-3deg)}
.ap-difference h2{font-size:clamp(38px,3.44vw,49px)}
.ap-difference-head>p{font-size:16px;line-height:1.5;color:#CCDBFF;margin-top:16px}
.ap-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ap-comparison>figure{padding:26px 28px 23px;border-radius:7px;background:#F7F7F4;color:#1a1918;min-width:0}
.ap-comparison>.ap-short-way{background:#fff}
.ap-comparison h3{font-size:14px;line-height:1.5;font-weight:400}
.ap-long-way h3{color:#62625e}
.ap-route{position:relative;height:166px;margin-top:5px}
.ap-route>svg{position:absolute;inset:18px 7% 16px;width:86%;height:132px;fill:none;stroke:#98988f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ap-route-start,.ap-route-end{position:absolute;top:78px;transform:translateY(-50%);z-index:1;font-size:27px;background:#F7F7F4;line-height:1.1}
.ap-route-start{left:0;padding-right:10px}
.ap-route-end{right:0;padding-left:10px}
.ap-short-way .ap-route-start,.ap-short-way .ap-route-end{background:#fff}
.ap-short-way .ap-route>svg{left:48px;right:102px;width:calc(100% - 150px);stroke:var(--ap-blue);stroke-width:2.5}
.ap-route-end>img{display:block;width:88px;height:auto}
.ap-handoffs{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.5;color:#77776f}
.ap-direct-note{text-align:center;font-size:24px;color:var(--ap-blue);transform:rotate(-3deg)}
.ap-approach{padding-top:clamp(64px,7vw,96px);padding-bottom:48px}
.ap-approach-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:40px}
.ap-approach-head .ap-hand{color:var(--ap-blue);margin-bottom:17px;font-size:26px}
.ap-approach h2{font-size:clamp(38px,3.61vw,50px)}
.ap-approach-head>.st-link{flex:none}
.ap-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ap-principle{position:relative;padding:26px 26px 28px;border:1px solid #E7E5E0;border-radius:14px;background:#fff;min-width:0;transition:transform .3s ease,box-shadow .3s ease}
.ap-principle-art{display:grid;place-items:center;width:72px;height:72px;margin-bottom:22px;border-radius:14px}
.ap-idea .ap-principle-art{background:#FFE1DE}.ap-make .ap-principle-art{background:#FFEBC0}.ap-send .ap-principle-art{background:#DFE7FF}
.ap-principle-art>.ap-doodle{width:52px;margin:0;transform:rotate(-7deg);transition:transform .3s ease}
.ap-make .ap-principle-art>.ap-doodle{transform:rotate(6deg)}
.ap-send>.ap-doodle{transform:rotate(-10deg)}
.ap-card-number{position:absolute;right:22px;top:20px;font-size:24px;color:#2955DF;transform:rotate(6deg)}
.ap-principle h3{font-size:22px;line-height:1.2;letter-spacing:-.025em}
.ap-principle p{font-size:15px;line-height:1.55;margin-top:8px;color:#5b5a54;text-wrap:pretty}
.ap-outro{display:flex;justify-content:center;align-items:center;gap:24px;padding-top:44px}
.ap-outro>.ap-hand{font-size:26px;transform:rotate(-3deg);color:var(--ap-blue)}
.ap-project-context{max-width:780px;margin:40px auto 0;padding-top:28px;border-top:1px solid var(--rule)}
.ap-project-context h3{font-size:21px;line-height:1.35;letter-spacing:-.015em}
.ap-project-context p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--ap-muted);text-wrap:pretty}
.ap-project-context a{color:#1A1918;transition:color .2s}.ap-project-context a:hover{color:#2955DF}
.ap-project-context a:hover{text-decoration-color:currentColor}
@media(hover:hover){
  .ap-principle:hover{transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(20,18,14,.35)}
  .ap-principle:hover .ap-principle-art>.ap-doodle{transform:rotate(4deg) scale(1.06)}
}
@media(max-width:1550px){
  .ap-noah-note{left:-18px;top:19px;transform:rotate(-8deg);font-size:21px;background:#fff;padding:8px 12px 10px;border-radius:3px;max-width:155px;box-shadow:0 2px 4px #00000009}
  .ap-noah-note svg{display:none}
}
@media(max-width:1000px){
  .ap-wrap{width:94%}
  .ap-crew-board{grid-template-columns:1fr 1.2fr;gap:18px}
  .ap-noah>img{height:450px}
  .ap-crew-note{padding:24px;gap:16px}
  .ap-crew-note>.ap-doodle{width:65px}
  .ap-crew-note h3{font-size:22px}
  .ap-crew-note p{font-size:14px}
  .ap-onset>img{height:0}
  .ap-noah figcaption{flex-direction:column;gap:4px}
  .ap-difference{padding:32px 26px}
  .ap-comparison>figure{padding:22px 20px}
  .ap-handoffs{flex-wrap:wrap;justify-content:center;column-gap:16px}
  .ap-principle{padding:24px 22px}
  .ap-principle h3{font-size:22px}
  .ap-principle p{font-size:14px}
}
@media(max-width:700px){
  .ap-wrap{width:100%;padding-inline:20px}
  .ap-hero{--nav-room:64px;min-height:0;padding:calc(var(--nav-room) + 40px) 20px}
  .ap-studio img{object-position:50% 50%}
  .ap-hero-note{font-size:24px;margin-bottom:10px}
  .ap-hero-title{font-size:46px}
  .ap-hero-copy>p{font-size:16px;margin-top:16px;max-width:34ch}
  .ap-hero-side{margin-top:24px;padding:0}
  .ap-hero-camera{width:64px;margin:0;order:2}
  .ap-intro{margin-bottom:34px}
  .ap-hello{font-size:27px;margin-bottom:18px}
  .ap-intro h2{font-size:46px}
  .ap-intro>p{font-size:16px;line-height:1.65;margin-top:28px}
  .ap-crew-board{grid-template-columns:1fr;gap:28px;max-width:480px}
  .ap-noah>img{height:auto;aspect-ratio:4 / 4.6;object-position:50% 34%}
  .ap-noah figcaption{flex-direction:row;gap:10px}
  .ap-crew-note{min-height:0;padding:25px 22px}
  .ap-crew-note p{font-size:15px}
  .ap-crew-note>.ap-doodle{width:62px}
  .ap-crew-note h3{font-size:23px}
  .ap-crew-right{gap:18px}
  .ap-onset>img{height:auto;flex:none;min-height:0;aspect-ratio:4 / 3;object-position:50% 44%}
  .ap-onset figcaption{font-size:22px}
  .ap-noah-note{left:-10px;top:20px;font-size:22px}
  .ap-facts{gap:12px;margin:36px 0 52px}
  .ap-facts .ap-hand{font-size:40px}
  .ap-facts>div>span:last-child{font-size:12px;max-width:12ch}
  .ap-difference{padding:32px 18px 18px;border-radius:8px}
  .ap-difference-head{margin-bottom:24px}
  .ap-difference h2{font-size:40px}
  .ap-difference-head>.ap-hand{font-size:24px;margin-bottom:15px}
  .ap-difference-head>p{font-size:15px;max-width:26ch;margin:14px auto 0}
  .ap-comparison{grid-template-columns:1fr;gap:12px}
  .ap-comparison>figure{padding:22px 22px 24px}
  .ap-route{height:134px;margin-top:0}
  .ap-route>svg{inset:6px 6% 12px;width:88%;height:116px}
  .ap-route-start,.ap-route-end{top:65px;font-size:26px}
  .ap-route-end>img{width:83px}
  .ap-handoffs{font-size:11px;column-gap:12px}
  .ap-direct-note{font-size:23px}
  .ap-approach{padding-top:56px;padding-bottom:38px}
  .ap-approach-head{display:block;margin-bottom:28px}
  .ap-approach h2{font-size:42px}
  .ap-approach-head>.st-link{margin-top:22px}
  .ap-principles{grid-template-columns:1fr;gap:14px}
  .ap-principle{display:grid;grid-template-columns:64px 1fr;column-gap:18px;padding:22px 20px}
  .ap-principle-art{grid-row:1 / 3;width:64px;height:64px;margin:0;align-self:center}
  .ap-principle h3{font-size:23px;align-self:end;padding-right:12px}
  .ap-principle p{font-size:14px;margin-top:8px}
  .ap-principle p br{display:none}
  .ap-card-number{font-size:21px;top:12px;right:15px}
  .ap-outro{flex-direction:column;gap:16px;padding-top:34px}
}
@media(max-width:380px){
  .ap-intro h2,.ap-hero-title{font-size:40px}
  .ap-crew-note{gap:13px;padding:22px 18px}
  .ap-crew-note>.ap-doodle{width:46px}
  .ap-noah figcaption{flex-direction:column;gap:4px}
  .ap-facts .ap-hand{font-size:34px}
  .ap-difference{padding-inline:14px}
  .ap-comparison>figure{padding-inline:17px}
  .ap-handoffs{gap:5px 10px}
  .ap-principle{grid-template-columns:56px 1fr;column-gap:16px;padding:20px 18px}
  .ap-principle-art{width:56px;height:56px}
  .ap-principle h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .ap-principle,.ap-principle-art>.ap-doodle{transition:none}
  .ap-principle:hover{transform:none}
  .ap-principle:hover .ap-principle-art>.ap-doodle{transform:rotate(-7deg)}
}

/* the process: one set photo and one paragraph */
.ap-process{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1080px;margin:0 auto}
.ap-process-pic{margin:0}
.ap-process-pic>img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;object-position:50% 62%;border-radius:14px}
.ap-process-pic figcaption{font-size:23px;line-height:1;margin-top:12px;text-align:right;color:var(--ap-blue);transform:rotate(-2deg);padding-right:8px}
.ap-process-copy .ap-doodle{display:block;width:64px;height:auto;aspect-ratio:1;margin-bottom:18px}
.ap-process-copy p{margin:0;font-size:18px;line-height:1.65;color:var(--ap-muted);text-wrap:pretty;max-width:46ch}
@media(max-width:860px){.ap-process{grid-template-columns:1fr;gap:28px}.ap-process-pic>img{aspect-ratio:3 / 2}.ap-process-copy p{font-size:16px}}
.ap-process-copy>.ap-hand{display:block;color:var(--ap-blue);font-size:26px;transform:rotate(-2deg);transform-origin:left;margin-bottom:12px}
.ap-process-copy>h2{margin:0 0 22px}
.ap-process-copy>.st-link{margin-top:26px}