@font-face{font-family:Manrope;src:url('https://pub-80e42983eb5040a6ad8d1646d2ac9535.r2.dev/sites/spectrum-test-ee2d52dd/assets/77e46715-510f-4228-af5c-aff5e45df5a6-manrope-light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Manrope;src:url('https://pub-80e42983eb5040a6ad8d1646d2ac9535.r2.dev/sites/spectrum-test-ee2d52dd/assets/b70560e4-e682-4cc5-a2e3-e91fed0043b6-manrope-regular.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}

:root{--brand-size:calc((100cqw - 2 * var(--hero-inset)) / 4.48);--brand-stem-offset:.52704;--stone:#b8af9e;--ink:#342e27;--white:#f7f5ef;--paper:#f4f1eb;--paper-deep:#ebe6dd;--text:#2f2a24;--muted:#6e665c;--line:rgba(47,42,36,.14);--dark:#2b2621;--hero-inset:clamp(25px,3.7vw,64px);color-scheme:light;font-family:Manrope,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--white)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--white);outline-offset:5px}
.frame{padding:0}
.hero{position:relative;isolation:isolate;container-type:inline-size;display:flex;flex-direction:column;height:100svh;min-height:640px;overflow:hidden;background:#625b4e;--gap:clamp(28px,3.4vh,44px)}
.hero-image,.image-shade,.orbit-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-image{object-fit:cover;object-position:center 55%;z-index:-3}
.image-shade{z-index:-2;background:linear-gradient(90deg,rgba(32,25,17,.62) 0%,rgba(32,25,17,.46) 34%,rgba(32,25,17,.14) 66%,rgba(32,25,17,.06) 100%),linear-gradient(180deg,rgba(32,25,17,.38) 0%,rgba(32,25,17,0) 20%,rgba(32,25,17,0) 52%,rgba(32,25,17,.5) 100%)}
.orbit-lines{z-index:-1;color:rgba(247,245,239,.14)}
.orbit-star{fill:var(--white);stroke:none;opacity:.24}
.hero-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:32px var(--hero-inset) 0;position:relative}
.logo{display:inline-flex;align-items:center;justify-content:center;justify-self:start;width:62px;height:64px}
.logo img{display:block;width:62px;height:64px}
.navigation{display:flex;gap:4px;padding:5px;border:1px solid var(--glass-edge);border-radius:100px;background:var(--glass-surface)}
.nav-item{display:flex;align-items:center;justify-content:center;min-width:108px;min-height:40px;padding:10px 20px;border:0;border-radius:100px;background:transparent;color:var(--white);font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.025em;transition:background .2s,color .2s}
.nav-item:hover,.nav-item.is-current{background:rgba(247,245,239,.14)}
.tagline{justify-self:end;margin:0;text-align:right;font-size:14px;line-height:1.4;letter-spacing:-.025em}
.hero-intro{position:absolute;top:43%;left:0;translate:0 -50%;display:flex;flex-direction:column;gap:var(--gap);padding:0 var(--hero-inset);max-width:calc(520px + 2 * var(--hero-inset))}
.hero-statement{margin:0;font-size:clamp(22px,1.85vw,31px);line-height:1.28;letter-spacing:-.03em;font-weight:300;text-wrap:pretty}
.hero-statement span{color:rgba(247,245,239,.66)}
.hero-action{display:flex;align-items:center;gap:28px}
.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center}
.primary-button{background:var(--white);color:var(--ink);border:1px solid var(--white);border-radius:100px;padding:16px 28px;font-size:12px;line-height:1.2;letter-spacing:.035em;text-transform:uppercase;transition:background .2s,transform .2s;min-height:48px}
.primary-button:hover{background:var(--stone);border-color:var(--stone);transform:translateY(-2px)}
.primary-button,.secondary-button{position:relative}
.primary-button::after{content:"";position:absolute;inset:-1px -1px -5px}
.secondary-button::after{content:"";position:absolute;inset:-14px -12px -10px}
.secondary-button{border:0;border-bottom:1px solid rgba(247,245,239,.65);padding:3px 0 5px;background:transparent;color:var(--white);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.secondary-button:hover{border-bottom-color:var(--white)}
.hero-footer{position:relative;padding:0 var(--hero-inset);margin:auto 0 -1.6cqw}
.brand-name{margin:0 0 0 calc(var(--brand-size) * var(--brand-stem-offset));font-weight:300;pointer-events:none}
.brand-display{display:block;width:max-content;font-size:var(--brand-size);line-height:1.17;letter-spacing:-.062em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(min-width:1800px){.hero-header{padding-top:42px}.nav-item{font-size:14px;min-width:125px}.tagline{font-size:16px}.hero-intro{max-width:calc(640px + 2 * var(--hero-inset))}.primary-button{font-size:14px;padding:18px 32px}.secondary-button{font-size:14px}}
@media(max-width:1100px){.hero-header{gap:20px;padding-top:25px}.nav-item{min-width:85px;padding:10px 14px}.logo,.logo img{width:53px;height:55px}.tagline{font-size:12px}.hero-intro{max-width:calc(450px + 2 * var(--hero-inset))}.hero-statement{font-size:24px}}
@media(max-width:760px){
  :root{--hero-inset:26px}
  .hero{min-height:660px}
  .hero-image{object-position:57% center}
  .image-shade{background:linear-gradient(180deg,rgba(32,25,17,.42) 0%,rgba(32,25,17,.5) 30%,rgba(32,25,17,.46) 62%,rgba(32,25,17,.3) 78%,rgba(32,25,17,.55) 100%)}
  .hero-header{grid-template-columns:1fr 1fr;gap:24px 0;padding-top:25px}
  .logo,.logo img{width:51px;height:53px}.tagline{font-size:13px}
  .navigation{grid-column:1/-1;grid-row:2;justify-content:space-between;width:100%;padding:4px;gap:1px}
  .nav-item{flex:1;min-width:0;padding:10px 7px;font-size:12px;white-space:nowrap}
  .hero-intro{max-width:none}
  .hero-statement{font-size:24px;line-height:1.3}
  .hero-action{gap:22px}
  .primary-button{padding:15px 21px;min-height:46px}
  .orbit-lines{width:140%;max-width:none;left:-20%;opacity:.65}
  .hero-footer{margin:auto 0 -.4cqw}
}
@media(max-width:360px){:root{--hero-inset:21px}.hero-statement{font-size:22px}.hero-action{gap:16px}.primary-button{padding-inline:17px}.nav-item{font-size:11px;padding-inline:5px}}
@media(max-height:760px) and (min-width:761px){.hero{--gap:24px}.hero-header{padding-top:24px}.hero-statement{font-size:22px}}
@media(prefers-reduced-motion:no-preference){.hero-image{animation:image-arrive 1.1s ease-out both}.hero-header,.hero-intro,.hero-footer{animation:type-arrive .75s ease-out both}.hero-intro{animation-delay:.1s}.hero-footer{animation-delay:.2s}@keyframes type-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes image-arrive{from{transform:scale(1.035)}to{transform:scale(1)}}}

/* Menu toggle (mobile) */
.menu-toggle{display:none}

/* Page sections */
.wrap{width:100%;max-width:1520px;margin:0 auto;padding:0 var(--hero-inset)}
.section{position:relative;padding:clamp(96px,11vw,176px) 0;background:var(--paper);color:var(--text)}
.section p{margin:0}
.display{margin:0;font-weight:300;font-size:clamp(32px,3.3vw,54px);line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.heading{margin:0;font-weight:400;font-size:clamp(20px,1.45vw,24px);line-height:1.3;letter-spacing:-.02em}
.side-label{margin:0;font-size:15px;font-weight:400;line-height:1.5;color:var(--muted)}
.prose{display:flex;flex-direction:column;gap:20px;font-size:17px;line-height:1.72;color:#4a433b}
.prose .display{margin-bottom:12px;color:var(--text)}
.prose .heading{margin-bottom:6px;color:var(--text)}
.prose>a{align-self:flex-start;margin-top:16px}
.emphasis{color:var(--text);font-size:clamp(19px,1.4vw,22px);line-height:1.5;letter-spacing:-.01em}
.prose .emphasis:first-of-type{margin-top:12px}
.prose p.emphasis+p.emphasis{margin-top:-14px}
.note{color:var(--muted);font-size:15px}
.prose .display+.note{margin-top:-18px}
figure{margin:0}
figure img{display:block;width:100%;height:100%;object-fit:cover}
.text-link{display:inline-flex;align-items:center;gap:10px;padding:4px 0 6px;border-bottom:1px solid rgba(47,42,36,.4);color:var(--text);font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,gap .2s}
.text-link::after{content:"→";font-size:14px;letter-spacing:0}
.text-link:hover{border-bottom-color:var(--text);gap:14px}
.text-link:focus-visible,.section a:focus-visible,.site-footer a:focus-visible{outline:2px solid var(--text);outline-offset:5px}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);align-items:start}
.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);align-items:baseline;margin-bottom:clamp(48px,5vw,80px)}
.section-head .display{grid-column:1/9}
.columns{display:grid;column-gap:clamp(20px,2.4vw,40px);row-gap:48px}
.columns.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.columns.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.column{display:flex;flex-direction:column;gap:16px;padding-top:28px;border-top:1px solid var(--line);font-size:16px;line-height:1.7;color:#4a433b}
.column .heading{color:var(--text)}
.column-lead{color:var(--text);font-size:18px;line-height:1.5}
.column .text-link{align-self:flex-start;margin-top:auto;padding-top:14px}

/* Intro */
.intro{overflow:hidden;padding-top:clamp(64px,6.5vw,104px);padding-bottom:0}
.intro .wrap{align-items:center}
.intro-copy{position:relative;z-index:1;grid-column:1/7;gap:0;font-size:17px;line-height:1.75;color:#7a7268}
.intro-copy .display{max-width:12ch;font-size:clamp(38px,3.7vw,62px);line-height:1.08;color:#3e3832;margin-bottom:clamp(24px,2.4vw,36px)}
.intro-copy p{max-width:min(54ch,37vw)}
.intro-copy .text-link{margin-top:clamp(40px,4.4vw,72px);color:#5d564e}
.intro-visual{grid-column:7/13;align-self:end;justify-self:start;position:relative;width:min(92%,640px)}
.intro .intro-image{position:relative;margin:0;aspect-ratio:20/21;border-radius:999px 999px 0 0;overflow:hidden}
.intro .intro-image img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.intro-orbit{position:absolute;left:0;top:0;margin-left:-350%;margin-top:-125%;width:700%;height:auto;overflow:visible;color:rgba(47,42,36,.11);pointer-events:none;z-index:0}
.intro-star{fill:var(--ink);opacity:.2}

/* Services */
.services{padding-top:0}
.services .wrap{border-top:1px solid var(--line);padding-top:clamp(96px,11vw,176px)}
.services .wrap{max-width:none;width:auto;margin:0 var(--hero-inset);padding-left:0;padding-right:0}
.select-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);margin-top:clamp(80px,8vw,128px);padding-top:28px;border-top:1px solid var(--line)}
.select-list .heading{grid-column:1/4}
.categories{grid-column:4/13;display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none;font-size:clamp(20px,1.7vw,28px);font-weight:300;line-height:1.45;letter-spacing:-.02em;color:var(--text)}
.categories li:not(:last-child)::after{content:"·";margin:0 .55em;color:var(--muted)}

/* Approach */
.approach{background:var(--paper-deep)}
.approach .prose{grid-column:1/6}
.approach .approach-image{grid-column:7/13;aspect-ratio:5/6;position:sticky;top:48px}
.documented{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);margin-top:clamp(80px,8vw,128px)}
.documented .heading{grid-column:1/4;padding-top:28px;max-width:14ch}
.documented .columns{grid-column:4/13}

/* Projects */
.projects .display{margin-bottom:clamp(40px,4vw,64px)}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.project-card{display:flex;flex-direction:column;gap:18px;color:var(--text)}
.project-image{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-deep)}
.project-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .project-image img{transform:scale(1.03)}
.project-name{font-size:clamp(19px,1.4vw,22px);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.project-name::after{content:"→";font-size:16px;color:var(--muted);transition:transform .2s}
.project-card:hover .project-name::after{transform:translateX(4px)}

/* Builders */
.builders{background:var(--dark);color:var(--white)}
.builders .builders-image{grid-column:1/7;aspect-ratio:4/5}
.builders .prose{grid-column:8/13;align-self:center;color:rgba(247,245,239,.78)}
.builders .prose .display{color:var(--white)}
.builders .primary-button{margin-top:20px;align-self:flex-start}

/* About */
.about .prose{grid-column:1/7}
.about .about-image{grid-column:8/13;aspect-ratio:4/5;position:sticky;top:48px}

/* Timing */
.timing{padding-top:0}
.timing .wrap>.section-head{border-top:1px solid var(--line);padding-top:clamp(96px,11vw,176px)}
.timing .section-head{align-items:start}
.timing .section-head .display{grid-column:1/6}
.timing .section-lead{grid-column:7/13;font-size:clamp(18px,1.4vw,22px);line-height:1.55;color:var(--text);letter-spacing:-.01em}

/* Closing */
.closing{background:var(--dark);color:var(--white);overflow:hidden;text-align:center}
.closing-orbit{position:absolute;left:50%;top:50%;width:min(900px,120vw);height:auto;transform:translate(-50%,-50%);color:rgba(247,245,239,.16);pointer-events:none}
.closing-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:760px;font-size:17px;line-height:1.72;color:rgba(247,245,239,.78)}
.closing .display{color:var(--white);margin-bottom:8px}
.closing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:20px}

/* Footer */
.site-footer{background:#221e1a;color:rgba(247,245,239,.72);font-size:14px;line-height:1.6;padding:72px 0 32px}
.site-footer a{color:rgba(247,245,239,.72);transition:color .2s}
.site-footer a:hover{color:var(--white)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(247,245,239,.12)}
.footer-brand{display:flex;align-items:center;gap:18px}
.footer-brand p{margin:0;color:var(--white);font-size:15px}
.footer-brand span{display:block;margin-top:4px;color:rgba(247,245,239,.6);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 32px}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:28px;font-size:13px}
.footer-bottom p{margin:0}

@media(max-width:1100px){
  .intro-copy{grid-column:1/7}.intro-visual{grid-column:7/13;width:86%;justify-self:center}
  .builders .builders-image{grid-column:1/7}
  .builders .prose{grid-column:7/13}
  .approach .prose,.about .prose{grid-column:1/7}
  .approach .approach-image,.about .about-image{grid-column:8/13}
}
@media(max-width:900px){
  .navigation{display:none}
  .menu-toggle{display:inline-flex;align-items:center;justify-self:end;min-height:40px;padding:10px 20px;border:1px solid rgba(247,245,239,.38);border-radius:100px;background:rgba(247,245,239,.075);color:var(--white);font-size:12px;letter-spacing:.025em;text-transform:uppercase}
  .hero-header{grid-template-columns:1fr auto}
  .hero-header .tagline{display:none}
  .navigation.is-open{display:flex;position:fixed;inset:0;z-index:20;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;margin:0;padding:96px var(--hero-inset) 48px;border:0;border-radius:0;background:rgba(34,30,26,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .navigation.is-open .nav-item{justify-content:flex-start;min-width:0;min-height:0;padding:8px 0;border-radius:0;background:transparent;font-size:clamp(28px,8vw,40px);font-weight:300;letter-spacing:-.03em;text-transform:none}
  .navigation.is-open .nav-item.is-current{color:rgba(247,245,239,.55)}
  .menu-toggle[aria-expanded="true"]{position:relative;z-index:21}
  .split,.section-head,.select-list,.documented{grid-template-columns:1fr}
  .split>*,.section-head>*,.select-list>*,.documented>*{grid-column:1/-1!important}
  .split{row-gap:48px}
  .section-head{row-gap:16px}
  .intro-copy p{max-width:none}.intro-copy .text-link{margin-top:32px}.intro-visual{justify-self:center;width:min(78%,400px);margin-top:40px}
  .approach .approach-image,.about .about-image{position:static;aspect-ratio:4/3}
  .builders .builders-image{aspect-ratio:4/3}
  .select-list,.documented{row-gap:20px}
  .documented .heading{padding-top:0;max-width:none}
  .timing .section-head{row-gap:24px}
  .columns.three{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr 1fr}
  .project-grid .project-card:first-child{grid-column:1/-1}
  .project-grid .project-card:first-child .project-image{aspect-ratio:3/2}
}
@media(max-width:760px){
  .hero-header{grid-template-columns:1fr auto}
  .navigation{grid-row:auto}
  .menu-toggle{min-height:40px}
  .columns.two{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
  .project-grid .project-image,.project-grid .project-card:first-child .project-image{aspect-ratio:4/3}
  .prose{font-size:16px}
  .footer-top{flex-direction:column}
  .footer-bottom{flex-direction:column}
}

.intro-swatches{--sw:84px;--col:150px;position:relative;display:flex;gap:0;margin:clamp(36px,3.6vw,52px) 0 0;padding:0;list-style:none}
.intro-swatches::before{content:"";position:absolute;top:calc(var(--sw)/2);left:calc(var(--sw)/2);width:calc(var(--col)*2);height:1px;background:rgba(47,42,36,.14)}
.intro-swatches li{position:relative;width:var(--col);display:flex;flex-direction:column;gap:14px}
.intro-swatches img{position:relative;width:var(--sw);height:var(--sw);border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px var(--paper)}
.intro-swatches span{font-size:13px;line-height:1.4;color:#8a8278;max-width:13ch}
.sw-star{position:absolute;top:calc(var(--sw)/2 - 7px);left:calc((var(--sw) - var(--col))/2 - 5px);width:10px;height:14px;fill:var(--ink);opacity:.22;z-index:1}
.intro-swatches+.text-link{margin-top:clamp(36px,3.6vw,52px)}
@media(max-width:900px){.intro-swatches{--sw:72px;--col:110px}.intro-swatches::before{width:calc(var(--col)*2)}}

.x-statement{font-weight:300;font-size:clamp(22px,1.85vw,31px);line-height:1.32;letter-spacing:-.03em;text-wrap:pretty}
.x-statement h2,.x-statement p{display:inline;margin:0;font:inherit;letter-spacing:inherit}
.pill-dark{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:16px 28px;border-radius:100px;background:var(--ink);color:var(--white);font-size:12px;line-height:1.2;letter-spacing:.035em;text-transform:uppercase;transition:background .2s,transform .2s}
.pill-dark:hover{background:#4a4239;transform:translateY(-2px)}

.band{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;min-height:max(100svh,640px);display:flex;flex-direction:column;color:var(--ink);background:var(--paper)}
.band-image,.band-shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.band-image{object-fit:cover;object-position:30% 62%;z-index:-3}
.band-shade{z-index:-2;background:linear-gradient(270deg,rgba(244,241,235,.96) 0%,rgba(244,241,235,.9) 26%,rgba(244,241,235,.7) 42%,rgba(244,241,235,.12) 67%,rgba(244,241,235,.08) 100%)}
.band-copy{position:relative;align-self:flex-end;width:calc(490px + 2*var(--hero-inset));margin-top:auto;padding:48px var(--hero-inset) clamp(56px,12vh,140px)}
.band-title{max-width:14ch;margin:0;font-weight:300;font-size:clamp(30px,2.7vw,46px);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.band-copy .x-statement p{color:var(--muted)}
.band-copy .intro-swatches{margin-top:clamp(32px,3.2vw,48px)}
.band-copy .sel-action{margin-top:clamp(32px,3.2vw,48px)}
.band-copy .intro-swatches img{box-shadow:0 0 0 1px rgba(52,46,39,.12)}
.band-copy .intro-swatches::before{background:rgba(52,46,39,.16)}
.band-copy .intro-swatches span{color:var(--muted)}
.band-copy .sw-star{fill:var(--ink);opacity:.28}
.band-copy .primary-button{color:var(--ink);background:transparent;border-color:rgba(52,46,39,.3)}
.band-copy .primary-button:hover{background:rgba(247,245,239,.72);border-color:var(--ink)}
.band a:focus-visible{outline-color:var(--ink)}
/* Both words share one size. Keep selections at the left inset and shift spectrum
   by 1.08323em - .55619em so the l and p stems have the same centre.
   The 4.48em fit includes spectrum plus that shift, leaving room at the right edge. */
.band-word{order:-1;align-self:flex-start;margin:-.233em 0 0;padding:0 var(--hero-inset);font-weight:300;font-size:var(--brand-size);line-height:1.17;letter-spacing:-.062em;white-space:nowrap}
@media(max-width:900px){.band-copy{align-self:stretch;width:auto;padding:64px var(--hero-inset) 48px}.band-shade{background:linear-gradient(180deg,rgba(244,241,235,.16) 0%,rgba(244,241,235,.15) 30%,rgba(244,241,235,.74) 56%,rgba(244,241,235,.95) 100%)}}
/* Image section: cream ground, photo in a large circle bleeding off the lower right, hero-style two-tone statement */
.band{--top:calc(.937 * var(--brand-size) + clamp(28px,4vh,48px) - var(--rise,0px))}
.band-shade{display:none}
.band-image{inset:var(--top) 0 0 auto;width:50%;height:calc(100% - var(--top));object-position:42% 62%;clip-path:circle(31cqw at 31cqw 31cqw);z-index:-1}
.band-copy{position:absolute;left:0;top:calc(var(--top) + clamp(40px,9vh,110px));width:min(calc(540px + 2 * var(--hero-inset)),46%);margin:0;padding:0 var(--hero-inset)}
.band-statement{font-weight:300;font-size:clamp(22px,1.85vw,31px);line-height:1.28;letter-spacing:-.03em;text-wrap:pretty}
.band-statement h2,.band-statement p{display:inline;margin:0;font:inherit;letter-spacing:inherit}
.band-statement p{color:rgba(52,46,39,.5)}
.band-copy .sel-action{margin-top:clamp(24px,2.8vh,36px)}
@media(max-width:900px){
  .band{--top:0px}
  .band-copy{position:relative;top:auto;width:auto;padding:32px var(--hero-inset)}
  .band-image{position:relative;inset:auto;order:2;width:auto;height:auto;aspect-ratio:1;margin:0 var(--hero-inset) var(--hero-inset);border-radius:999px 999px 24px 24px;clip-path:none}
}
/* Contained image section: the whole photo circle sits inside the band, a hairline circle of the same size
   orbits it, and from the foot of that orbit a hairline sweeps down onto the Services rule. */
@media(min-width:901px){
  .band{--rise:clamp(40px,3.5vw,64px);--pr:23cqw;--below:7.5cqw;min-height:0}
  .band-image{position:relative;inset:auto;align-self:flex-end;flex:none;width:calc(2 * var(--pr));height:calc(2 * var(--pr));margin:calc(clamp(28px,4vh,48px) - var(--rise)) var(--hero-inset) var(--below) 0;object-position:43% 50%;clip-path:circle(50%)}
  .band-copy{top:calc(var(--top) + 1.3 * var(--pr));translate:0 -50%;width:min(calc(540px + 2 * var(--hero-inset)),44%)}
}
@media(min-width:1101px){.band-copy{top:calc(var(--top) + 1.2 * var(--pr))}}

/* ---------- Services: three packages, each with a small circle diagram that grows with the level of service ---------- */
.svc{container-type:inline-size;background:var(--paper);color:var(--ink);padding:var(--pad-top) var(--hero-inset) clamp(88px,10vw,150px);--pad-top:clamp(40px,3vw,56px);--w:calc(100cqw + 2 * var(--hero-inset));--fork-drop:calc(.937 * 100cqw / 4.48 - .176 * var(--w));--grid-gap:clamp(64px,8vw,120px)}
.svc-title{max-width:15ch;margin:0;font-weight:300;font-size:clamp(38px,4.6vw,78px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.svc-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--grid-gap);border-top:1px solid rgba(52,46,39,.18)}
.svc-item{position:relative;display:flex;flex-direction:column;padding:clamp(32px,3.4vw,48px) clamp(24px,3vw,48px) 0}
.svc-item:first-child{padding-left:0}
.svc-item+.svc-item{border-left:1px solid rgba(52,46,39,.18)}
.svc-mark{width:132px;height:80px;fill:none;stroke:rgba(52,46,39,.5);stroke-width:1}
.svc-mark circle{vector-effect:non-scaling-stroke}
.svc-mark .st{fill:var(--ink);stroke:none;opacity:.8}
.svc-name{margin:clamp(28px,3vw,44px) 0 0;font-weight:300;font-size:clamp(40px,4vw,68px);line-height:1;letter-spacing:-.05em}
.svc-text{max-width:30ch;margin:22px 0 36px;font-weight:300;font-size:clamp(17px,1.25vw,21px);line-height:1.42;letter-spacing:-.015em;color:rgba(52,46,39,.55);text-wrap:pretty}
.svc-text strong{font-weight:300;color:var(--ink)}
.svc .text-link{align-self:flex-start;margin-top:auto;color:var(--ink)}
.svc a:focus-visible,.abt a:focus-visible{outline-color:var(--ink)}

/* ---------- Recent projects: an editorial spread on the dark ground. The oversized two-tone statement opens the left
   column; Organic Curves stands as a tall feature arch on the right; Bronze Age and Tonal Depth sit beneath the statement
   as a modest pair whose arches share one baseline with the feature. A hairline orbit rings the top of the feature arch,
   leaves it at its widest point and settles onto the rule above the pair, with a star node at each end of that curve. ---------- */
.prj{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);color:var(--white);padding:clamp(96px,11vw,170px) var(--hero-inset)}
.prj-layout{--g:clamp(20px,2.4vw,40px);--wf:calc((500cqw - 7 * var(--g)) / 12);--r:calc(var(--wf) / 2);--d:min(calc(var(--wf) * .06),calc(var(--hero-inset) - 20px));--hair:rgba(247,245,239,.24);position:relative;container-type:inline-size;max-width:1840px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:var(--g)}
.prj-statement{grid-area:1/1/2/7;max-width:12.8em;margin:0;padding-bottom:clamp(48px,5vw,88px);font-weight:300;font-size:clamp(30px,calc((50cqw - var(--g) / 2) / 12.8),66px);line-height:1.1;letter-spacing:-.045em;text-wrap:pretty}
.prj-statement span{color:rgba(247,245,239,.42)}
.prj-head{grid-area:2/1/3/7;display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,3vw,52px);padding-top:clamp(24px,2.4vw,36px);border-top:1px solid var(--hair)}
.prj-title{margin:0;font-weight:300;font-size:clamp(24px,2.1vw,36px);line-height:1.1;letter-spacing:-.035em}
.prj-tail{grid-area:1/7/2/8;position:relative;margin:var(--r) calc(var(--d) - var(--g)) -.5px calc(-1 * var(--g));pointer-events:none}
.prj-curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--hair);stroke-width:1}
.prj-curve path,.prj-halo circle{vector-effect:non-scaling-stroke}
.prj-node{position:absolute;width:clamp(12px,1.15vw,19px);height:auto;aspect-ratio:20/28;fill:var(--white);opacity:.6}
.prj-node-top{top:0;right:0;translate:50% -50%}
.prj-node-end{bottom:0;left:0;translate:-50% 50%}
.prj-grid{grid-area:1/1/4/13;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;margin:0;padding:0;list-style:none;pointer-events:none}
.prj-card{pointer-events:auto}
.prj-card a{position:relative;display:flex;flex-direction:column;height:100%}
.prj-feature{grid-area:1/8/4/13}
.prj-card:nth-child(2){grid-area:3/1/4/4}
.prj-card:nth-child(3){grid-area:3/4/4/7}
.prj-frame{position:relative;isolation:isolate;display:block;overflow:hidden;aspect-ratio:4/4.4;border-radius:999px 999px 0 0;background:#3a342d}
.prj-feature .prj-frame{flex:1 1 auto;aspect-ratio:auto;min-height:calc(var(--wf) * 1.1)}
.prj-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.prj-feature .prj-frame img{object-position:78% 50%}
.prj-card a:hover img{transform:scale(1.04)}
.prj-halo{position:absolute;left:calc(-1 * var(--d));top:calc(-1 * var(--d));width:calc(100% + 2 * var(--d));height:auto;aspect-ratio:1;overflow:visible;fill:none;stroke:var(--hair);stroke-width:1;pointer-events:none;z-index:-1}
.prj-name{margin-top:clamp(18px,1.7vw,26px);font-weight:300;font-size:clamp(20px,1.6vw,28px);line-height:1.2;letter-spacing:-.03em}
.prj-meta{margin-top:6px;font-size:13px;line-height:1.4;letter-spacing:.01em;color:rgba(247,245,239,.58)}
.prj a:focus-visible{outline-color:var(--white)}

/* ---------- About: the oversized two-tone statement, then image and copy ---------- */
.abt{background:var(--paper);color:var(--ink);padding:clamp(96px,11vw,170px) var(--hero-inset) clamp(96px,11vw,170px)}
.abt-statement{max-width:24em;font-weight:300;font-size:clamp(30px,3.9vw,66px);line-height:1.1;letter-spacing:-.045em;text-wrap:pretty}
.abt-statement h2,.abt-statement p{display:inline;margin:0;font:inherit;letter-spacing:inherit}
.abt-statement p{color:rgba(52,46,39,.38)}
.abt-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,128px);align-items:end;margin-top:clamp(64px,8vw,128px)}
.abt-visual{position:relative;width:min(88%,520px);aspect-ratio:1;margin-left:7%}
.abt-visual img{width:100%;height:100%;display:block;object-fit:cover;object-position:72% 50%;border-radius:50%}
.abt-ring{position:absolute;inset:-7%;width:114%;height:114%;fill:none;stroke:rgba(52,46,39,.28);stroke-width:1;pointer-events:none}
.abt-ring circle{vector-effect:non-scaling-stroke}
.abt-copy{max-width:520px;padding-bottom:8px}
.abt-copy p{margin:0 0 20px;font-weight:300;font-size:clamp(16px,1.15vw,19px);line-height:1.6;color:var(--muted)}
.abt-copy .abt-lead{margin-bottom:28px;font-size:clamp(22px,1.85vw,31px);line-height:1.28;letter-spacing:-.03em;color:var(--ink)}
.abt .text-link{margin-top:20px;color:var(--ink)}

/* ---------- Contact: closes the page the way the hero opens it ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;min-height:max(100svh,700px);display:flex;flex-direction:column;color:var(--white);background:#4a443b}
.cta-image,.cta-shade,.cta-orbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cta-image{object-fit:cover;object-position:50% 55%;z-index:-3}
.cta-shade{z-index:-2;background:linear-gradient(90deg,rgba(32,25,17,.72) 0%,rgba(32,25,17,.58) 40%,rgba(32,25,17,.3) 75%,rgba(32,25,17,.22) 100%),linear-gradient(180deg,rgba(32,25,17,.2) 0%,rgba(32,25,17,0) 30%,rgba(32,25,17,.15) 70%,rgba(32,25,17,.6) 100%)}
.cta-orbit{z-index:-1;color:rgba(247,245,239,.14)}
.cta-orbit circle{vector-effect:non-scaling-stroke}
.cta-orbit .o-star{fill:var(--white);opacity:.24}
.cta-inner{margin:auto 0;padding:clamp(96px,12vh,160px) var(--hero-inset) 64px;max-width:calc(760px + 2 * var(--hero-inset))}
.cta-title{margin:0;font-weight:300;font-size:clamp(40px,4.8vw,82px);line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
.cta-text{max-width:34em;margin:clamp(24px,2.6vw,36px) 0 0;font-weight:300;font-size:clamp(18px,1.4vw,23px);line-height:1.42;letter-spacing:-.02em;color:rgba(247,245,239,.66)}
.cta-text span{color:var(--white)}
.cta-actions{display:flex;align-items:center;gap:28px;margin-top:clamp(32px,3.6vw,48px)}
.cta-footer{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin:0 var(--hero-inset);padding:28px 0 32px;border-top:1px solid rgba(247,245,239,.22);font-size:13px;color:rgba(247,245,239,.7)}
.cta-footer p{margin:0}
.cta-tag{color:var(--white)}
.cta-nav{display:flex;gap:28px;flex-wrap:wrap}
.cta-footer a{transition:color .2s}
.cta-footer a:hover{color:var(--white)}

@media(max-width:900px){
  .svc-grid{grid-template-columns:1fr;border-top:0}
  .svc-item,.svc-item:first-child{padding:36px 0 44px;border-top:1px solid rgba(52,46,39,.18)}
  .svc-item+.svc-item{border-left:0}
  .svc-text{max-width:none}
  .abt-body{grid-template-columns:1fr;gap:56px}
  .abt-visual{width:min(78%,380px);margin:24px auto 0}
  .cta-shade{background:linear-gradient(180deg,rgba(32,25,17,.5) 0%,rgba(32,25,17,.66) 45%,rgba(32,25,17,.72) 100%)}
  .cta-actions{flex-wrap:wrap;gap:22px}
  .cta-footer{flex-direction:column;align-items:flex-start}
}
@media(min-width:901px) and (max-width:1100px){.svc-text{font-size:16px}.svc-name{font-size:40px}}
.svc-head{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 0;align-items:end}
.svc-title{grid-column:1 / span 2}
.svc-select{grid-column:3;padding-left:clamp(24px,3vw,48px)}
.svc-select{max-width:34em;margin:0;font-weight:300;font-size:clamp(15px,1.05vw,17px);line-height:1.7;color:rgba(52,46,39,.55)}
.svc-select .nw{white-space:nowrap}
.svc-select strong{display:block;margin-bottom:10px;font-weight:300;font-size:clamp(20px,1.6vw,26px);letter-spacing:-.02em;color:var(--ink)}
@media(max-width:900px){.svc-head{grid-template-columns:1fr}.svc-title,.svc-select{grid-column:1}.svc-select{padding-left:0}}
/* The hairline that leaves the orbit in the image section and settles onto the Services rule at the first column divider */
.svc-tail,.svc-node{display:none}
@media(min-width:901px){
  .svc-tail{display:block;position:absolute;left:calc(100% / 3 + .5px);top:calc(-1 * (var(--pad-top) + var(--fork-drop)));width:calc(200% / 3 - .5px - .31 * var(--w) + var(--hero-inset));height:calc(100% + var(--pad-top) + var(--fork-drop) + var(--grid-gap) + .5px);overflow:visible;fill:none;stroke:rgba(52,46,39,.3);stroke-width:1;pointer-events:none}
  .svc-tail path{vector-effect:non-scaling-stroke}
  .svc-node{display:block;position:absolute;left:calc(100% / 3 + .5px);top:-.5px;width:calc(var(--w) / 70);height:calc(var(--w) / 50);translate:-50% -50%;fill:var(--ink);opacity:.75;pointer-events:none}
}

/* Recent projects, narrow screens: statement, then the heading row, the feature arch at full width and the pair side by side */
@media(max-width:900px){
  .prj-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .prj-statement{order:-1;grid-area:auto;padding-bottom:56px;font-size:calc(100cqw / 12.8)}
  .prj-head{grid-area:auto;margin-bottom:36px}
  .prj-tail{display:none}
  .prj-grid{grid-area:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:48px 16px;pointer-events:auto}
  .prj-feature,.prj-card:nth-child(2),.prj-card:nth-child(3){grid-area:auto}
  .prj-feature{grid-column:1/-1}
  .prj-feature .prj-frame{flex:none;aspect-ratio:4/5;min-height:0}
  .prj-halo{display:none}
  .prj-name{font-size:20px}
}
/* Tablet portrait: a square feature, so the full-width arch does not tower over the pair */
@media(min-width:601px) and (max-width:900px){.prj-feature .prj-frame{aspect-ratio:1}}

/* The giant "projects" wordmark: same size, weight and tracking as "spectrum" and "selections", set in a quiet warm grey on
   the dark ground and cropped by the top of the section the way "selections" is. Its own container makes --brand-size
   resolve against the full section width, so it matches the other two words exactly. */
.prj{padding-top:0}
.prj-wordbox{container-type:inline-size;margin:0 calc(-1 * var(--hero-inset)) var(--word-gap,clamp(48px,5vw,88px));pointer-events:none;user-select:none}
/* Align the visible p stem with the text column, including its maximum width. */
.prj-word{margin:-.233em 0 0;padding:0 max(var(--hero-inset),calc((100cqw - 1840px) / 2));text-indent:-.07em;font-weight:300;font-size:var(--brand-size);line-height:1.17;letter-spacing:-.062em;white-space:nowrap;color:#3d3731}
/* On desktop the Organic Curves arch rises into the foot of the word, so the photo stands in front of "projects" */
@media(min-width:901px){
  .prj-layout{--lift:calc((100vw - 2 * var(--hero-inset)) / 4.48 * var(--lift-k,.8))}
  .prj-feature{margin-top:calc(-1 * var(--lift))}
  .prj-tail{margin-top:calc(var(--r) - var(--lift))}
}

/* The trademark is Manrope's own glyph, scaled down and raised so its top meets the cap height instead of crowding the word */
.atl-tm{font-size:.72em;line-height:0;letter-spacing:0;vertical-align:.28em}
.atl-sub .atl-tm{font-size:.6em;vertical-align:.48em;margin-left:.06em}

/* Design direction to documented decisions */
/* A quieter chapter on the deeper paper. The two-part heading is set on one line, fitted to the content width, the first half in
   full ink and the second faded. Beneath it one hairline runs the full width: a star node at its start, one at the half where
   the second item begins and one at its end, so each item owns one segment of the line. On phones the line turns vertical. */
.doc{container-type:inline-size;background:var(--paper-deep);color:var(--ink);padding:clamp(104px,11vw,176px) var(--hero-inset) clamp(120px,12.5vw,200px);--pad:clamp(24px,3vw,48px);--hair:rgba(52,46,39,.24)}
.doc-title{margin:0;font-weight:300;font-size:calc(100cqw / 19.37);line-height:1.1;letter-spacing:-.045em;white-space:nowrap}
.doc-l1{margin-left:-.07em}
.doc-l2{color:rgba(52,46,39,.38)}
.doc-flow{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(64px,7vw,120px);padding-top:clamp(40px,3.8vw,64px)}
.doc-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);pointer-events:none}
.doc-node{position:absolute;top:.5px;width:clamp(13px,1.2vw,19px);height:auto;aspect-ratio:20/28;translate:-50% -50%;fill:color-mix(in srgb,var(--ink) 75%,var(--paper-deep));pointer-events:none}
.doc-node-a{left:0}
.doc-node-b{left:50%}
.doc-node-end{left:100%}
.doc-item{padding-right:var(--pad)}
.doc-name{margin:0;font-weight:300;font-size:clamp(28px,2.6vw,44px);line-height:1.1;letter-spacing:-.04em;text-wrap:balance}
.doc-item+.doc-item .doc-name{margin-left:-.07em}
.doc-name .atl-tm{font-size:.6em;vertical-align:.48em;margin-left:.04em}
.doc-item p{max-width:26em;margin:clamp(20px,1.8vw,28px) 0 0;font-weight:300;font-size:clamp(17px,1.25vw,21px);line-height:1.5;letter-spacing:-.015em;color:var(--muted);text-wrap:pretty}
.doc-item p+p{margin-top:.8em}
@media(max-width:900px){
  .doc-title{font-size:calc(100cqw / 10.47)}
  .doc-l1,.doc-l2{display:block}
.doc-l2{margin-left:-.04em}
  .doc-l2{margin-left:-.01em}
}
@media(max-width:600px){
  .doc{--in:36px;--h3:30px}
  .doc-title{font-size:calc(100cqw / 6.6);white-space:normal}
  .doc-flow{grid-template-columns:minmax(0,1fr);row-gap:56px;margin-top:56px;padding:0 0 56px var(--in)}
  .doc-item{position:relative;padding-right:0}
  .doc-rule{top:calc(var(--h3) * .57);bottom:0;left:0;right:auto;width:1px;height:auto}
  .doc-node{width:14px}
  .doc-node-a,.doc-node-b{left:calc(.5px - var(--in));top:calc(var(--h3) * .57)}
  .doc-node-end{left:.5px;top:100%}
  .doc-name,.doc-item+.doc-item .doc-name{margin-left:0;font-size:var(--h3)}
}

/* Projects height: on desktop the whole section, wordmark included, is about one screen tall. The wordmark keeps its size and
   crop; everything below it is sized against the viewport height. The statement runs the full six columns, the heading
   steps down to keep it the larger voice, and the small arches shrink to a fixed height (Bronze Age on the left margin,
   Tonal Depth on the end of the rule) so they keep their tall arch shape. The feature arch, the hairline and its star
   nodes follow the grid, so the nodes stay on the halo springline and the end of the rule. */
@media(min-width:901px){
  .prj{--word-gap:clamp(20px,3svh,88px);padding-bottom:clamp(24px,4svh,120px)}
  .prj-layout{--ch:min(calc((300cqw - 9 * var(--g)) / 12 * 1.1),max(170px,27svh))}
  .prj-statement{max-width:none;padding-bottom:clamp(18px,3svh,88px);font-size:clamp(24px,min(calc((50cqw - var(--g) / 2) / 12.8),4svh),66px)}
  .prj-head{padding-top:clamp(12px,2svh,36px);margin-bottom:clamp(12px,2.4svh,52px)}
  .prj-title{font-size:clamp(20px,min(2.1vw,2.6svh),36px)}
  .prj-card:not(.prj-feature) a{width:min(100%,calc(var(--ch) / .92))}
  .prj-card:nth-child(3) a{margin-left:auto}
  .prj-card:not(.prj-feature) .prj-frame{aspect-ratio:auto;height:var(--ch)}
  .prj-name{margin-top:clamp(10px,1.4svh,26px);font-size:clamp(18px,min(1.6vw,2.2svh),28px)}
}

/* About and image section height: on desktop About is about one screen tall and the image section about 1.1 screens.
   Image section: the selections wordmark keeps its size and crop. The photo radius (--pr) is what gives: it is solved from the
   screen height so wordmark, photo and the space below it fill about 1.1 screens, between 15% and 23% of the width.
   The orbit hairline keeps the photo's size and its offset (left .19 and down .25 of the radius) and is drawn by the band
   itself, with its star at the foot. Services solves the same radius from its own width, so the S-curve still leaves
   the foot of the orbit and lands on the Services rule at the Space/Essentials divider.
   About: the same statement, photo and copy, with spacing, statement size and photo sized against the screen height. */
@media(min-width:901px){
  .band{--W:100cqw}
  .svc{--W:var(--w)}
  .band,.svc{--pr:clamp(calc(.15 * var(--W)),calc((110svh - .937 * (var(--W) - 2 * var(--hero-inset)) / 4.48 - clamp(28px,4vh,48px)) / 2.326),calc(.23 * var(--W)));--below:calc(.326 * var(--pr))}
  .band::before,.band::after{content:"";position:absolute;z-index:-2;pointer-events:none}
  .band::before{left:calc(100% - var(--hero-inset) - 2.19 * var(--pr) - .5px);top:calc(var(--top) + .25 * var(--pr) - .5px);width:calc(2 * var(--pr) + 1px);height:calc(2 * var(--pr) + 1px);box-sizing:border-box;border:1px solid rgba(52,46,39,.3);border-radius:50%}
  .band::after{left:calc(100% - var(--hero-inset) - 1.19 * var(--pr));top:calc(var(--top) + 2.25 * var(--pr));width:calc(100% / 70);aspect-ratio:20/28;translate:-50% -50%;background:var(--ink);opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -14 20 28'%3E%3Cpath d='M0 -13 C1.3 -3.6 3.4 -1.3 8 0 C3.4 1.3 1.3 3.6 0 13 C-1.3 3.6 -3.4 1.3 -8 0 C-3.4 -1.3 -1.3 -3.6 0 -13Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -14 20 28'%3E%3Cpath d='M0 -13 C1.3 -3.6 3.4 -1.3 8 0 C3.4 1.3 1.3 3.6 0 13 C-1.3 3.6 -3.4 1.3 -8 0 C-3.4 -1.3 -1.3 -3.6 0 -13Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  .svc{--fork-drop:calc(.076 * var(--pr))}
  .svc-tail{width:calc(200% / 3 - .5px - 1.19 * var(--pr))}

  .abt{padding-top:clamp(56px,11svh,170px);padding-bottom:clamp(48px,10svh,170px)}
  .abt-statement{font-size:clamp(30px,min(3.9vw,5.8svh),66px)}
  .abt-body{margin-top:clamp(40px,9svh,128px)}
  .abt-visual{width:min(88%,520px,max(260px,46svh))}
}
/* Heading rhythm */
/* Big/quiet/big/quiet after the hero: the "selections" wordmark and the SMART Atlas statement stay at display scale, while
   the Services title and the documentation heading step down to one calm section-heading size (Manrope Light, tight
   tracking) so the Services columns and the documentation timeline carry their sections. The S-curve, its star and the
   documentation hairline stars are all positioned from their containers, so they still land exactly. */
.svc-title,.doc-title{font-weight:300;font-size:clamp(32px,3.3vw,56px);line-height:1.12;letter-spacing:-.04em}
.svc-title{max-width:14ch}
.svc{--grid-gap:clamp(56px,6.4vw,104px)}
.doc{padding-top:clamp(88px,9vw,144px)}
.doc-flow{margin-top:clamp(40px,4.2vw,72px)}
@media(max-width:900px){
  .doc-title{white-space:normal}
}
@media(max-width:600px){
  .svc-title,.doc-title{font-size:32px}
  .doc-title{text-wrap:balance}
  .doc-l1,.doc-l2{display:inline}
  .doc-l2{margin-left:0}
  .doc-flow{margin-top:40px}
}

/* Section variety */
/* Services is a gallery of three tall arched photos (the arch of Recent projects). */

/* Services: tall arched photos in place of the circle marks. The heading row and grid gap are unchanged, so the S-curve
   from the image section still lands on the Services rule with its star at the Space/Essentials divider. */
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-arch{position:relative;display:block;width:calc(100cqw / 3 - 2 * clamp(24px,3vw,48px));max-width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px 0 0;background:#d9d1c4}
.svc-arch img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.svc-item:hover .svc-arch img{transform:scale(1.03)}
.svc-arch+.svc-name{margin-top:clamp(28px,2.8vw,44px)}
@media(max-width:900px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc-arch{width:min(86%,320px)}
}

/* Projects vibe */
/* SMART Atlas and the documentation timeline borrow the language of Recent projects on a light ground.
   SMART Atlas (deeper paper, so it parts from the Services cream): the giant faint "atlas" wordmark at the size, crop and tracking of
   "spectrum", "selections" and "projects"; the promise as the big two-tone statement; a tall arched photo with a hairline halo that
   rises into the foot of the word. Projects is mirrored: the arch stands on the left and the halo's right springline drops a hairline
   to the start of the rule under the statement, with a star at each end. The subheading and button sit on that rule like
   "Recent projects" and "All projects", with the lead and the method beneath.
   Documentation (on the Services cream, so it parts from SMART Atlas and from the dark Projects that follows): a large circular
   detail photo with an open halo whose hairline sweeps down onto the timeline at its half-way star. */
.atl{position:relative;isolation:isolate;overflow:hidden;container-type:normal;background:var(--paper-deep);color:var(--ink);padding:0 var(--hero-inset) clamp(72px,9vw,140px)}
.atl-wordbox{container-type:inline-size;margin:0 calc(-1 * var(--hero-inset)) var(--word-gap,clamp(40px,5vw,88px));pointer-events:none;user-select:none}
.atl-word{margin:-.233em 0 0;padding:0 0 0 calc(50cqw + clamp(20px,2.4vw,40px) / 2 - .02em);font-weight:300;font-size:var(--brand-size);line-height:1.17;letter-spacing:-.062em;white-space:nowrap;color:#ddd6ca}
.atl-layout{--g:clamp(20px,2.4vw,40px);--wf:calc((500cqw - 7 * var(--g)) / 12);--r:calc(var(--wf) / 2);--d:min(calc(var(--wf) * .06),calc(var(--hero-inset) - 20px));--hair:rgba(52,46,39,.26);position:relative;container-type:inline-size;max-width:1840px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto auto auto;column-gap:var(--g)}
.atl-title{grid-area:1/7/2/13;margin:0;padding-bottom:clamp(18px,3svh,88px);font-weight:300;font-size:clamp(34px,min(calc((50cqw - var(--g) / 2) / 9.2),6.8svh),92px);line-height:1.06;letter-spacing:-.05em}
.atl-l1,.atl-l2{display:block;white-space:nowrap}
.atl-l1{margin-left:-.06em}
.atl-l2{margin-left:-.06em;color:rgba(52,46,39,.4)}
.atl-rule{grid-area:2/7/3/13;align-self:start;border-top:1px solid var(--hair)}
.atl-sub{grid-area:2/7/3/13;align-self:baseline;margin:0;padding-top:clamp(12px,2svh,36px);font-weight:300;font-size:clamp(20px,min(2.1vw,2.6svh),36px);line-height:1.15;letter-spacing:-.035em}
.atl-sub .atl-tm{font-size:.6em;vertical-align:.48em;margin-left:.06em}
.atl .primary-button{display:flex;width:max-content;break-inside:avoid;white-space:nowrap;margin-top:clamp(16px,2.6svh,36px);color:var(--ink);background:transparent;border-color:rgba(52,46,39,.3)}
.atl .primary-button:hover{background:rgba(247,245,239,.72);border-color:var(--ink)}
.atl a:focus-visible{outline-color:var(--ink)}
.atl-intro{grid-area:3/7/4/13;max-width:30em;margin:clamp(12px,2.2svh,40px) 0 0;font-weight:300;font-size:clamp(18px,min(1.55vw,2.5svh),28px);line-height:1.3;letter-spacing:-.03em;color:rgba(52,46,39,.56);text-wrap:pretty}
.atl-copy{grid-area:4/7/5/13;margin-top:clamp(14px,2.6svh,44px);columns:2;column-gap:var(--g)}
.atl-copy p{margin:0 0 .9em;break-inside:avoid;font-weight:300;font-size:clamp(14px,min(1.05vw,1.95svh),18px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.atl-copy p:last-child{margin-bottom:0}
.atl-feature{grid-area:1/1/5/6;position:relative;display:flex;flex-direction:column}
.atl-frame{position:relative;isolation:isolate;display:block;flex:1 1 auto;min-height:calc(var(--wf) * 1.1);overflow:hidden;border-radius:999px 999px 0 0;background:#d9d1c4}
.atl-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.atl-halo{position:absolute;left:calc(-1 * var(--d));top:calc(-1 * var(--d));width:calc(100% + 2 * var(--d));height:auto;aspect-ratio:1;overflow:visible;fill:none;stroke:var(--hair);stroke-width:1;pointer-events:none;z-index:-1}
.atl-tail{grid-area:1/6/2/7;position:relative;margin:var(--r) calc(-1 * var(--g)) -.5px calc(var(--d) - var(--g));pointer-events:none}
.atl-curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--hair);stroke-width:1}
.atl-curve path,.atl-halo circle{vector-effect:non-scaling-stroke}
.atl-node{position:absolute;width:clamp(12px,1.15vw,19px);height:auto;aspect-ratio:20/28;fill:var(--ink);opacity:.7}
.atl-node-top{top:0;left:0;translate:-50% -50%}
.atl-node-end{bottom:0;right:0;translate:50% 50%}
@media(min-width:901px){
  .atl{--word-gap:clamp(20px,3svh,88px);padding-bottom:clamp(28px,5svh,120px)}
  .atl-layout{--lift:calc((100vw - 2 * var(--hero-inset)) / 4.48 * var(--lift-k,.8))}
  .atl-feature{margin-top:calc(-1 * var(--lift))}
  .atl-tail{margin-top:calc(var(--r) - var(--lift))}
}
@media(max-width:900px){
  .atl-word{padding:0 var(--hero-inset)}
  .atl-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .atl-layout>*{grid-area:auto}
  .atl-title{order:1;padding-bottom:48px;font-size:calc(100cqw / 9.2)}
  .atl-feature{order:2;width:min(100%,520px);margin-bottom:48px}
  .atl-frame{flex:none;aspect-ratio:4/5;min-height:0}
  .atl-halo,.atl-tail{display:none}
  .atl-rule{order:3}
  .atl-sub{order:4;padding-top:24px}
  .atl-intro{order:5}
  .atl-copy{order:6}
}
@media(max-width:600px){
  .atl-copy{columns:1}
  .atl-copy p{font-size:16px}
  .atl-intro{font-size:22px}
}

.doc{position:relative;background:var(--paper);--g:clamp(20px,2.4vw,40px)}
.doc-top{position:relative}
.doc-l1,.doc-l2{display:block}
.doc-l2{margin-left:-.04em}
.doc-frame{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:50%;background:#d9d1c4}
.doc-frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.doc-halo{position:absolute;left:calc(-1 * var(--d));top:calc(-1 * var(--d));width:calc(100% + 2 * var(--d));height:auto;aspect-ratio:1;overflow:visible;fill:none;stroke:var(--hair);stroke-width:1;pointer-events:none}
.doc-halo path,.doc-curve path{vector-effect:non-scaling-stroke}
.doc-curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--hair);stroke-width:1}
@media(min-width:901px){
  .doc{padding-top:clamp(32px,5svh,110px);padding-bottom:clamp(40px,8svh,150px)}
  .doc-top{--D:min(calc((400cqw - 8 * var(--g)) / 12 + 3 * var(--g)),46svh,540px);--d:calc(var(--D) * .06);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
  .doc-title{grid-column:1/8;align-self:end;padding-bottom:clamp(28px,5svh,80px);font-size:clamp(32px,min(calc(46cqw / 9.3),8.6svh),88px);line-height:1.06;letter-spacing:-.05em}
  .doc-feature{grid-column:9/13;justify-self:end;position:relative;width:var(--D);margin:var(--d) 0 clamp(28px,5svh,80px)}
  .doc-tail{position:absolute;left:50%;right:calc(var(--D) + var(--d));top:calc(var(--d) + var(--D) / 2);bottom:-.5px;pointer-events:none}
  .doc-node-top{top:0;left:auto;right:0;translate:50% -50%}
  .doc-flow{margin-top:0;padding-top:clamp(28px,4.4svh,64px)}
}
@media(max-width:900px){
  .doc-feature{position:relative;width:min(78%,420px);margin:48px 0 56px auto;--d:clamp(12px,3vw,22px)}
  .doc-tail{display:none}
}

/* Section words */
/* Every section carries a giant faint wordmark at the size, crop and tracking of "spectrum", "selections", "atlas" and
   "projects". Services, Documented decisions, About and the closing CTA crop theirs at the section top. In Services the S-curve from the
   image section is lengthened by the word's height, so it still lands on the Services rule with its star. */
.sec-wordbox{container-type:inline-size;margin:0 calc(-1 * var(--hero-inset)) clamp(28px,4svh,72px);pointer-events:none;user-select:none}
.sec-word{margin:-.233em 0 0;padding:0 var(--hero-inset);font-weight:300;font-size:var(--brand-size);line-height:1.17;letter-spacing:-.062em;white-space:nowrap;color:#e4ded3}
.svc{--pad-top:0px;--wb:calc(.937 * (100vw - 2 * var(--hero-inset)) / 4.48 + clamp(28px,4svh,72px))}
@media(min-width:901px){
  .svc-tail{top:calc(-1 * (var(--pad-top) + var(--fork-drop) + var(--wb)));height:calc(100% + var(--pad-top) + var(--fork-drop) + var(--wb) + var(--grid-gap) + .5px)}
}
.doc,.abt{padding-top:0}
.doc .sec-word{color:#e4ded3}
.cta .sec-wordbox{margin:0}
.cta .sec-word{color:rgba(247,245,239,.16)}
.cta-inner{padding-top:clamp(40px,6vh,96px)}
:root{--glass-surface:rgba(247,245,239,.075);--glass-edge:rgba(247,245,239,.38)}

.abt .sec-word{text-align:right}
.abt-statement{margin-left:auto}
@media(min-width:901px){
  /* The circle rises into "decisions" like the Projects arch; its hairline moves up with it. */
  .doc{--lift:calc(.55 * (100vw - 2 * var(--hero-inset)) / 4.48)}
  .doc .doc-feature{margin-top:calc(var(--d) - var(--lift))}
  .doc .doc-tail{top:calc(var(--d) - var(--lift) + var(--D) / 2)}
}

/* Approach (dark glass) */
/* Nick's dark glass section, set in the language of the rest of the page: the giant faint word over the blurred photo, the
   big two-tone statement above a landscape capsule photo with an offset hairline halo, and the current step on the right.
   A straight hairline runs from the foot of the halo across the section as the timeline, with a star where it leaves the
   halo and a star for each step (as in Documented decisions). The stars and the round glass arrows step through the three
   steps, so the section fits one screen. Without JavaScript all three steps are listed. */
.process-glass{position:relative;isolation:isolate;overflow:hidden;background:#28211b;color:var(--white);padding:0 var(--hero-inset) clamp(40px,6svh,96px)}
.process-glass::before,.process-glass::after{content:"";position:absolute;pointer-events:none}
.process-glass::before{inset:-40px;z-index:-3;background:url('https://pub-80e42983eb5040a6ad8d1646d2ac9535.r2.dev/sites/spectrum-test-ee2d52dd/assets/8f270760-f641-4358-ab78-aa0be9ddb2c8-project-tonal-depth.webp') center 48%/cover no-repeat;filter:blur(22px);transform:scale(1.06)}
.process-glass::after{inset:0;z-index:-2;background:linear-gradient(90deg,rgba(28,23,19,.5),rgba(28,23,19,.77)),linear-gradient(180deg,rgba(28,23,19,.22),rgba(28,23,19,.5))}
.process-glass .sec-wordbox{margin-bottom:clamp(20px,2.6svh,44px)}
.process-glass .sec-word{text-align:right;color:rgba(247,245,239,.16)}
.process-glass a:focus-visible,.process-glass button:focus-visible{outline:2px solid var(--white);outline-offset:4px}
.pg-layout{--g:clamp(20px,2.4vw,40px);--d:clamp(10px,1.1vw,18px);--rg:clamp(24px,3.6svh,56px);--ry:clamp(22px,1.8vw,28px);--col:calc((100cqw - 11 * var(--g)) / 12);--w5:calc(5 * var(--col) + 4 * var(--g));--hair:rgba(247,245,239,.3);position:relative;container-type:inline-size;max-width:1840px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:var(--g);row-gap:var(--rg)}
.pg-title{grid-area:1/1/2/6;margin:0;font-weight:300;font-size:clamp(34px,min(3.7vw,6.4svh),64px);line-height:1.06;letter-spacing:-.05em}
.pg-title span{color:rgba(247,245,239,.42)}
.pg-visual{grid-area:2/1/3/6;align-self:end;position:relative;margin:var(--d) 0 var(--d) var(--d)}
.pg-visual::before{content:"";position:absolute;inset:calc(-1 * var(--d));border:1px solid var(--hair);border-radius:999px;pointer-events:none}
.pg-frame{display:block;aspect-ratio:2/1;overflow:hidden;border-radius:999px;background:#3a342d}
.pg-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.pg-steps{grid-area:1/7/4/13;display:grid;grid-template-rows:subgrid}
.pg-panel{grid-row:1/3;display:grid;align-self:end;margin-bottom:clamp(28px,4svh,56px)}
.pg-step{grid-area:auto}
.pg-step p{margin:14px 0 0;max-width:34em;font-weight:300;font-size:clamp(15px,min(1.15vw,2svh),19px);line-height:1.55;color:rgba(247,245,239,.72);text-wrap:pretty}
.pg-step-title{margin:0;font-weight:300;font-size:clamp(28px,min(2.5vw,4.4svh),42px);line-height:1.1;letter-spacing:-.04em}
.pg-step .pg-name{margin-top:6px;color:var(--white);font-size:clamp(16px,min(1.3vw,2.3svh),22px);line-height:1.35;letter-spacing:-.02em}
.pg-tm{font-size:.65em;vertical-align:.4em;margin-left:.04em}
.pg-rail{display:none}
/* Stepped (JavaScript on) */
.pg-steps.is-ready .pg-step{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s ease}
.pg-steps.is-ready .pg-step.is-active{visibility:visible;opacity:1;transition:opacity .25s ease}
.pg-steps.is-ready .pg-step-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pg-steps.is-ready .pg-step .pg-name{margin-top:0;font-size:clamp(24px,min(2.1vw,3.8svh),36px);line-height:1.1;letter-spacing:-.04em}
/* The rail sits in the row after the photo, pulled up so its hairline lies exactly on the foot of the halo. */
.pg-steps.is-ready .pg-rail{grid-row:3;position:relative;display:flex;align-items:flex-start;gap:var(--g);margin-top:calc(-1 * var(--rg));height:calc(var(--ry) + clamp(28px,3.6svh,44px))}
.pg-steps.is-ready .pg-rail::before{content:"";position:absolute;top:0;left:var(--reach,0px);right:0;border-top:1px solid var(--hair);pointer-events:none}
.pg-node{display:none}
.pg-tabs{position:relative;flex:1;display:flex;height:1px}
.pg-tab{position:relative;flex:1;display:block;height:var(--ry);margin-top:calc(var(--ry) / -2);padding:0;border:0;background:none;color:rgba(247,245,239,.45);font:inherit;font-weight:300;font-size:clamp(17px,min(1.4vw,2.5svh),24px);letter-spacing:-.03em;text-align:left;cursor:pointer;transition:color .3s}
.pg-tab span{position:absolute;top:calc(var(--ry) / 2 + clamp(16px,2svh,24px));left:0;white-space:nowrap}
.pg-star{position:absolute;top:50%;left:0;width:clamp(13px,1.2vw,19px);height:auto;aspect-ratio:20/28;translate:-50% -50%;fill:var(--white);opacity:.4;transition:opacity .3s,scale .3s}
.pg-tab:hover,.pg-tab[aria-selected="true"]{color:var(--white)}
.pg-tab[aria-selected="true"] .pg-star{opacity:.9;scale:1.35}
.pg-arrows{position:relative;display:flex;gap:10px;translate:0 -50%}
.pg-arrow{display:grid;place-items:center;width:calc(var(--ry) * 2);aspect-ratio:1;padding:0;border:1px solid var(--glass-edge);border-radius:50%;background:rgba(40,33,27,.55);color:var(--white);cursor:pointer;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:background .2s,border-color .2s,opacity .2s}
.pg-arrow svg{width:42%;fill:none;stroke:currentColor;stroke-width:1.2}
.pg-arrow:hover:not(:disabled){background:rgba(247,245,239,.14);border-color:var(--white)}
.pg-arrow:disabled{opacity:.35;cursor:default}
@media(min-width:901px){
  /* The hairline reaches back from the timeline to the foot of the halo, directly under the middle of the capsule. */
  .pg-steps.is-ready .pg-rail{--reach:calc((var(--w5) + var(--d)) / 2 - 6 * var(--col) - 6 * var(--g))}
  .pg-steps.is-ready .pg-node{display:block;position:absolute;top:0;left:var(--reach);width:clamp(12px,1.15vw,19px);height:auto;aspect-ratio:20/28;translate:-50% -50%;fill:var(--white);opacity:.6}
}
@media(max-width:900px){
  .pg-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0}
  .pg-title{grid-area:auto;margin-bottom:40px;font-size:clamp(32px,8.6vw,48px)}
  .pg-visual{grid-area:auto;margin:var(--d) var(--d) 56px}
  .pg-frame{aspect-ratio:16/10}
  .pg-steps{grid-area:auto;display:flex;flex-direction:column;gap:0}
  .pg-panel{margin-bottom:48px}
  .pg-steps.is-ready .pg-rail{margin-top:var(--ry);align-self:stretch}
  .pg-tab{font-size:17px}
  .pg-tab:first-child .pg-star{translate:0 -50%}
  .pg-tab span{left:-.5em;opacity:0;transition:opacity .3s}
  .pg-tab:first-child span{left:0}
  .pg-tab[aria-selected="true"] span{opacity:1}
}

/* End the process line at the Document star, before the arrow controls. */
.pg-steps.is-ready .pg-rail{--controls-width:calc(4 * var(--ry) + 10px + var(--g))}
.pg-steps.is-ready .pg-rail::before{right:auto;width:calc((100% - var(--controls-width)) * 2 / 3 - var(--reach,0px))}
@media(prefers-reduced-motion:reduce){
  .pg-steps.is-ready .pg-step,.pg-tab,.pg-star,.pg-arrow{transition:none}
}

/* Services (dark glass) */
/* The glass section now carries Services: the three packages are the steps, and the capsule photo changes with them. */
.pg-frame{position:relative}
.pg-frame img{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.pg-frame img.is-active{opacity:1}
.pg-services .pg-frame img{object-position:50% 62%}
.pg-services .pg-frame img[src*="essentials"]{object-position:50% 72%}
.pg-services .pg-frame img[src*="premium"]{object-position:50% 78%}
.pg-select{grid-area:3/1/4/6;margin:0 0 0 var(--d);max-width:40em;font-weight:300;font-size:clamp(12px,min(.85vw,1.5svh),14px);line-height:1.7;color:rgba(247,245,239,.55);text-wrap:pretty}
.pg-select strong{display:block;margin-bottom:4px;font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(247,245,239,.85)}
.pg-step .text-link{justify-self:start;margin-top:clamp(18px,2.6svh,32px);color:var(--white);border-bottom-color:rgba(247,245,239,.4)}
.pg-step .text-link:hover{border-bottom-color:var(--white)}
.pg-step{display:grid;align-content:end}
@media(max-width:900px){
  .pg-select{grid-area:auto;margin:-24px 0 32px}
}
@media(prefers-reduced-motion:reduce){
  .pg-frame img{transition:none}
}
@media(min-width:901px){
  .pg-services .pg-title{grid-column:1/7;align-self:end;font-size:clamp(32px,min(3vw,5.4svh),52px)}
}

/* Keep the original Atlas geometry while leaving its oversized word empty. */
.word-space::before{content:"";display:block;height:calc(.937 * var(--brand-size))}
.pg-services,.abt{padding-top:clamp(64px,7vw,112px)}

/* Keep the selections image in its original position; move only its orbit ornament above and to the left. */
@media(min-width:901px){
  .band::before{left:calc(100% - var(--hero-inset) - 2.19 * var(--pr) - .5px);top:calc(var(--top) - .25 * var(--pr) - .5px)}
  .band::after{left:calc(100% - var(--hero-inset) - 1.897 * var(--pr));top:calc(var(--top) + .043 * var(--pr))}
}

/* Set the oversized enquiry word along the upper-right edge. */
.cta .sec-wordbox{position:absolute;inset:0 0 auto;z-index:0;translate:0 -20%}
.cta .sec-word{margin:0;text-align:right}
.cta-inner,.cta-footer{position:relative;z-index:1}

/* Services: "What we select" as a two-tone sentence in the top right, a taller capsule and more room under the link. */
.pg-services .pg-select{font-size:clamp(14px,min(1vw,1.8svh),16px);line-height:1.6;color:rgba(247,245,239,.5)}
.pg-services .pg-select strong{display:inline;margin:0 .35em 0 0;font-weight:300;font-size:inherit;letter-spacing:inherit;text-transform:none;color:var(--white)}
@media(min-width:901px){
  .pg-services .pg-select{grid-area:1/8/2/13;align-self:start;margin:.5em 0 0;max-width:32em}
  .pg-services .pg-frame{aspect-ratio:1.6/1}
  .pg-services .pg-panel{margin-bottom:clamp(48px,7svh,104px)}
}

/* Services: "What we select" shares the step copy's left edge, a step smaller. */
@media(min-width:901px){
  .pg-services .pg-select{grid-column:7/12;font-size:clamp(13px,min(.9vw,1.6svh),15px)}
}

/* Closing section: darker and richer, so the page ends on a premium note. The photo is dimmed and warmed, the shade
   deepens towards the text and the foot, and the copy sits lower so the buttons lead straight into the footer. */
.cta{background:#17130f}
.cta-image{filter:brightness(.72) saturate(.82) contrast(1.06)}
.cta-shade{background:linear-gradient(90deg,rgba(18,14,10,.88) 0%,rgba(18,14,10,.72) 42%,rgba(18,14,10,.42) 78%,rgba(18,14,10,.34) 100%),linear-gradient(180deg,rgba(18,14,10,.35) 0%,rgba(18,14,10,0) 32%,rgba(18,14,10,.25) 70%,rgba(18,14,10,.85) 100%)}
.cta-orbit{color:rgba(247,245,239,.1)}
.cta .sec-word{color:rgba(247,245,239,.1)}
.cta-inner{margin:auto 0 0;padding-bottom:clamp(56px,9svh,112px)}
@media(max-width:900px){
  .cta-shade{background:linear-gradient(180deg,rgba(18,14,10,.62) 0%,rgba(18,14,10,.78) 45%,rgba(18,14,10,.9) 100%)}
}