/* ==========================================================================
   RPM Living — landing
   System: two literal artboards (1600 / 375), 1rem = 10px at each,
   24-column grid, Beige/Juniper/Copper world, Gotham + Ideas.
   ========================================================================== */

@font-face{font-family:"Gotham";src:url("../fonts/Gotham-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("../fonts/Gotham-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Gotham";src:url("../fonts/Gotham-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham";src:url("../fonts/Gotham-Black.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Ideas";src:url("../fonts/IdeasRegular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --size:1600;
  --beige:#F5EFEC; --juniper:#444E4C; --sage:#8BA395; --mint:#BDDDD9;
  --copper:#AB784A; --black:#282D27; --white:#FFFFFF;
  --hair:color-mix(in srgb,var(--juniper) 20%,transparent);
  --hair-soft:color-mix(in srgb,var(--juniper) 10%,transparent);
  --hair-copper:color-mix(in srgb,var(--copper) 45%,transparent);
  --font-s:calc((100vw / var(--size)) * 10);
  --font-sans:"Gotham",system-ui,sans-serif;
  --font-script:"Ideas","Gotham",cursive;
  --ease-out-quart:cubic-bezier(.165,.84,.44,1);
  --ease-in-out-quart:cubic-bezier(.77,0,.175,1);
  --ease-underline:cubic-bezier(1,0,0,1);
  --frost:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.22));
}
@media (min-width:601px){:root{--font-s:min(calc((100vw / var(--size)) * 10),calc((100svh / 900) * 10))}}
@media (max-width:600px){:root{--size:375}}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--font-s);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--beige);color:var(--black);font-family:var(--font-sans);font-weight:300;line-height:1.3;height:100svh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
sup{font-size:.4em;vertical-align:top;position:relative;top:.35em}

/* ---------- scroll wrapper (Lenis) ---------- */
.scroll{position:fixed;inset:0;z-index:1;overflow:hidden auto;background:var(--beige);scrollbar-width:none;will-change:transform}
.scroll::-webkit-scrollbar{display:none}
@media (max-width:600px){.scroll{overflow:hidden}}
.content{position:relative;transform-origin:50% 50%}
main.main{position:relative;z-index:2;background:var(--beige)}

/* ---------- grid ---------- */
.container{display:grid;grid-template-columns:repeat(24,1fr);column-gap:2rem;padding:0 4rem}
.col-full{grid-column:1/-1}
@media (max-width:600px){.container{grid-template-columns:repeat(6,1fr);column-gap:1.5rem;padding:0 2rem}}

/* ---------- type voices ---------- */
.script{font-family:var(--font-script);font-weight:400;letter-spacing:0;font-size:1.12em;color:var(--copper);line-height:.9}
.eyebrow{display:flex;align-items:center;gap:1.2rem;font-weight:500;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;color:var(--juniper);border-top:1px solid var(--hair-copper);padding-top:2rem;margin-bottom:6rem}
.eyebrow.is-inverse{color:var(--white);border-top-color:color-mix(in srgb,var(--white) 30%,transparent)}
.sq{display:inline-block;width:.9rem;height:.9rem;background:var(--copper);flex-shrink:0}
.is-inverse .sq{background:var(--mint)}
.section-heading{font-weight:300;font-size:6.4rem;line-height:1.02;letter-spacing:-.02em;grid-column:1/15;margin-bottom:8rem}
.section-heading.right{grid-column:9/25}
.lead{font-size:1.8rem;line-height:1.45;max-width:48rem}
[data-split]{visibility:hidden}
[data-split].is-split{visibility:visible}
/* SplitText line masks: pad the clip so script ascenders / swashes are not cut, cancel with negative margins */
.sline-mask{padding:.22em .3em!important;margin:-.22em -.3em!important}
@media (max-width:600px){
  .eyebrow{margin-bottom:3rem}
  .section-heading,.section-heading.right{font-size:3.6rem;grid-column:1/-1;margin-bottom:4rem}
  .lead{font-size:1.6rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:1.2rem;padding:1.7rem 2.4rem;font-weight:500;font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;line-height:1;white-space:nowrap;user-select:none}
.btn.is-black{background:var(--black);color:var(--white)}
.btn.is-white{color:var(--white);background:var(--frost);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}
.btn.is-alpha{padding:1.7rem 0;color:inherit}
.btn .arrow-svg{width:1.4rem;height:1.1rem;stroke:currentColor;stroke-width:1.2;flex-shrink:0;transform:translateY(-.05rem)}
.btn .label{display:block;height:1.2rem;overflow:hidden;line-height:1.2rem}
.btn .label .line{display:block;height:1.2rem}
.text-link{display:inline-block;position:relative;font-weight:500;font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;padding-bottom:.4rem}
.text-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(1);transform-origin:0;transition:transform .5s var(--ease-underline)}
@media (hover:hover){.text-link:hover::after{transform-origin:100%;transform:scaleX(0)}}
.statement-cta{display:flex;align-items:center;gap:3rem;grid-column:1/-1;justify-content:center}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:99;background:var(--beige);display:flex;align-items:center;justify-content:center;color:var(--juniper)}
.intro-mark{width:9rem;opacity:0}
.mark-svg{display:block;width:100%;height:auto;fill:currentColor}
.bands{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.band{position:absolute;left:0;width:100%;height:25.2%;transform:translateX(-101%)}
.b1{top:0;background:var(--sage)}
.b2{top:25%;background:var(--juniper);transform:translateX(101%)}
.b3{top:50%;background:var(--copper)}
.b4{top:75%;background:var(--black);transform:translateX(101%)}

/* ---------- cursor pill ---------- */
.cursor{position:fixed;top:0;left:0;z-index:98;width:10rem;height:4.4rem;margin:2rem 0 0 2rem;display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:500;font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;background:var(--frost);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);opacity:0;transition:opacity .2s linear;pointer-events:none;will-change:transform}
.cursor.is-visible{opacity:1}
@media (hover:none){.cursor{display:none}}

/* ---------- docked pill nav ---------- */
.header{position:fixed;left:50%;bottom:4rem;z-index:20;width:27.6rem;height:5rem;transform:translateX(-50%);color:var(--white);display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none;cursor:pointer}
.header .background{position:absolute;left:50%;top:0;height:100%;width:27.6rem;transform:translateX(-50%);background:var(--black);z-index:0}
.header .logo,.header .burger,.header .close,.header .arrow{position:relative;z-index:1;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}
.header .logo{position:absolute;left:0;top:0}
.header .logo .mark-svg{width:2.2rem}
.header .burger{position:absolute;right:0;top:0}
.header .burger svg{width:2rem;height:1.1rem}
.header .close,.header .arrow{position:absolute;left:50%;top:0;transform:translateX(-50%);visibility:hidden}
.header .close svg{width:1.2rem;height:1.2rem}
.header .arrow svg{width:1.1rem;height:1.2rem}
.header .title{position:absolute;left:5rem;right:5rem;top:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;font-weight:500;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase}
.is-menu .header{cursor:default}
@media (max-width:600px){.header{bottom:3rem;width:28.7rem}.header .background{width:28.7rem}}

/* ---------- menu card ---------- */
.menu{position:fixed;left:50%;bottom:10rem;z-index:19;width:40rem;padding:6rem;transform:translateX(-50%);color:var(--white);visibility:hidden;pointer-events:none}
.menu .background{position:absolute;inset:0;z-index:-1;background:linear-gradient(165deg,#3a4442 0%,var(--black) 70%);transform:scale(0)}
.menu .menu-title{font-weight:500;font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:3rem}
.menu .main{margin-bottom:4rem}
.menu .main .mask{display:flex;overflow:hidden;height:3.8rem}
.menu .main .link{display:block;font-weight:300;font-size:3.4rem;line-height:3.8rem;letter-spacing:-.02em}
.menu .main .link .line{display:block;height:3.8rem}
@media (hover:hover){
  .menu .main:hover .mask{color:color-mix(in srgb,currentColor 40%,transparent)}
  .menu .main:hover .mask:hover{color:color-mix(in srgb,currentColor 100%,transparent)}
}
.menu .sub{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2rem;margin-bottom:5rem}
.menu .sub .mask{overflow:hidden}
.menu .sub .link{position:relative;display:inline-block;font-size:1.6rem;opacity:.85}
.menu .sub .link::after{content:"";position:absolute;left:0;bottom:-.2rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100%;transition:transform .5s var(--ease-underline)}
@media (hover:hover){.menu .sub .link:hover::after{transform-origin:0;transform:scaleX(1)}}
.menu .btn{width:100%;justify-content:center}
.is-menu .menu{pointer-events:auto}
@media (max-width:600px){.menu{width:32rem;padding:6rem 4rem 3rem;bottom:10rem}}

/* ---------- connect drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:30;width:121.6rem;padding:4rem;background:var(--beige);color:var(--black);overflow-y:auto;scrollbar-width:none;display:none;flex-direction:column;visibility:hidden}
.drawer::-webkit-scrollbar{display:none}
.drawer-head{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:4rem;margin-bottom:12rem}
.drawer-heading{font-weight:300;font-size:6.4rem;line-height:1;letter-spacing:-.02em;flex:0 0 auto}
.drawer-heading .script{margin-right:.12em}
.drawer-text{flex:0 1 26rem;margin-left:auto;margin-right:4rem;padding-top:.8rem;font-size:1.6rem;color:color-mix(in srgb,var(--juniper) 70%,transparent)}
.drawer-close{width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;background:var(--black);color:var(--white);flex-shrink:0}
.drawer-close svg{width:1.2rem;height:1.2rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;padding-top:2rem;border-top:1px solid var(--hair);margin-bottom:10rem}
.form .prompt{font-size:2rem;font-weight:300}
.form .field{position:relative}
.form .field:not(:last-child){margin-bottom:1.5rem}
.flabel{position:absolute;top:1.5rem;left:2rem;pointer-events:none;font-weight:500;font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--juniper) 60%,transparent)}
.input{width:100%;height:8rem;padding:4rem 2rem 1.5rem;border:1px solid var(--hair);border-radius:0;outline:0;background:transparent;font:inherit;font-size:1.8rem;color:inherit}
.input:focus,.textarea:focus{border-color:var(--copper)}
.group:not(:last-child){margin-bottom:3rem}
.gtitle{font-weight:500;font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--juniper);margin-bottom:1.5rem}
.toggles{display:flex;flex-wrap:wrap;gap:1rem}
.toggle{height:4.4rem;padding:0 2.3rem;border:1px solid var(--hair);background:var(--beige);font-weight:500;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
@media (hover:hover){.toggle:hover{background:var(--juniper);color:var(--white);border-color:var(--juniper)}}
.toggle.is-active{background:var(--juniper);color:var(--white);border-color:var(--juniper)}
.textarea{width:100%;height:14.8rem;padding:1.5rem 2rem;border:1px solid var(--hair);border-radius:0;outline:0;background:transparent;resize:none;font:inherit;font-size:1.8rem;color:inherit}
.form .btn{margin-top:3rem}
.success{display:none;margin-top:3rem;font-size:1.8rem;color:var(--juniper)}
.success.is-on{display:block}
@media (max-width:600px){
  .drawer{width:100%;padding:12rem 2rem 4rem}
  .drawer-head{margin-bottom:6rem;flex-wrap:wrap}
  .drawer-heading{font-size:4.8rem}
  .drawer-text{flex-basis:100%;margin:2rem 0 0;padding-top:0}
  .drawer-close{position:fixed;top:2rem;right:2rem}
  .form .row{grid-template-columns:1fr;row-gap:3rem;margin-bottom:6rem}
}

/* ---------- page header ---------- */
.page-header{position:absolute;left:0;right:0;top:0;z-index:5;height:9rem;display:flex;align-items:center;justify-content:center;padding:0 4rem;pointer-events:none}
.page-header.is-white{color:var(--white);text-shadow:0 .1rem 1.6rem rgba(40,45,39,.55)}
.page-header .wordmark{font-weight:500;font-size:2rem;letter-spacing:.02em;pointer-events:auto}
.page-header .top-link{position:absolute;right:4rem;top:50%;transform:translateY(-50%);font-weight:500;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;pointer-events:auto}
@media (max-width:600px){.page-header{padding:0 2rem}.page-header .top-link{right:2rem}}

/* ---------- hero ---------- */
.home-header{position:relative;height:100svh;min-height:64rem;overflow:hidden;color:var(--white);background:var(--juniper)}
/* HERO-TWEAKS-START (written by the tweak panel's Save button) */
.home-header{
  --hero-x:78%;
  --hero-y:100%;
  --hero-zoom:1.09;
  --hero-title:8.7rem;
  --hero-sub:2rem;
  --hero-eyebrow:1.1rem;
  --hero-gap:2.8rem;
  --hero-align:center;
  --hero-justify:flex-end;
  --hero-maxw:120rem;
  --hero-pad-x:4rem;
  --hero-pad-t:12rem;
  --hero-pad-b:14rem;
  --hero-shift-x:0rem;
  --hero-shift-y:0rem;
  --hero-text-align:center;
}
/* HERO-TWEAKS-END */
.hero-bg{position:absolute;left:0;right:0;top:-15%;height:130%;filter:blur(var(--hero-blur,0px));will-change:transform,filter}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(40,45,39,.62) 0%,rgba(40,45,39,.42) 12%,rgba(40,45,39,.12) 30%,rgba(40,45,39,.22) 45%,rgba(40,45,39,.58) 72%,rgba(40,45,39,.78) 100%),
  radial-gradient(ellipse 62% 48% at 50% 66%,rgba(40,45,39,.42) 0%,rgba(40,45,39,0) 100%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img{width:100%;height:100%;object-fit:cover}
.hero-img,.hero-video{object-position:var(--hero-x) var(--hero-y);transform:scale(var(--hero-zoom));transform-origin:var(--hero-x) var(--hero-y)}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:var(--hero-align);justify-content:var(--hero-justify);padding:var(--hero-pad-t) var(--hero-pad-x) var(--hero-pad-b);text-align:var(--hero-text-align);transform:translate(var(--hero-shift-x),var(--hero-shift-y))}
.hero-content>*{max-width:var(--hero-maxw)}
.hero-eyebrow{display:inline-flex;align-items:center;font-weight:500;font-size:var(--hero-eyebrow);letter-spacing:.14em;text-transform:uppercase;margin-bottom:3rem;background:var(--mint);color:var(--black);padding:1rem 1.8rem .9rem;border-radius:3rem;line-height:1}
.hero-eyebrow .sq{display:none}
.hero-title{font-weight:300;font-size:var(--hero-title);line-height:1;letter-spacing:-.025em;margin-bottom:var(--hero-gap);text-shadow:0 .2rem 2.4rem rgba(40,45,39,.35)}
.hero-title .script{color:var(--mint);font-size:1.15em;vertical-align:-.04em;margin-right:-.18em}
.hero-sub{font-size:var(--hero-sub);line-height:1.4;max-width:min(60rem,var(--hero-maxw));margin-bottom:4.4rem;opacity:.92;text-shadow:0 .1rem 1.6rem rgba(40,45,39,.5)}
.search{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:2.4rem;width:76rem;height:6.4rem;padding:0 1rem 0 2.4rem;background:linear-gradient(rgba(40,45,39,.42),rgba(40,45,39,.5));border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem)}
.search-label{font-weight:500;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.search-input{height:3.6rem;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.45);outline:0;color:var(--white);font:inherit;font-size:1.8rem;padding:0}
.search-loc{font-weight:500;font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:.85}
.search-btn{height:4.4rem;padding:0 2.4rem;background:var(--black);color:var(--white);font-weight:500;font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;transition:background .3s}
@media (hover:hover){.search-btn:hover{background:var(--juniper)}}
.scroll-hint{position:absolute;left:4rem;bottom:4.6rem;font-weight:500;font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;display:flex;align-items:center;gap:1.2rem}
.scroll-hint::before{content:"";width:4rem;height:1px;background:currentColor}
@media (max-width:600px){
  .home-header{min-height:0}
  .home-header{--hero-pad-x:2rem;--hero-pad-b:12rem;--hero-title:5rem;--hero-sub:1.6rem;--hero-gap:2rem;--hero-maxw:100%}
  .hero-sub{margin-bottom:3rem}
  .hero-eyebrow{margin-bottom:2rem}
  .search{grid-template-columns:1fr auto;grid-template-rows:auto auto;width:100%;height:auto;padding:2rem;gap:1.6rem}
  .search-label{grid-column:1/-1}
  .search-loc{display:none}
  .scroll-hint{display:none}
}

/* ---------- statement ---------- */
.text-cta{padding:15rem 4rem 0}
.text-cta .eyebrow{justify-content:center;border-top:0;padding-top:0}
.statement{grid-column:3/23;text-align:center;font-weight:300;font-size:5.6rem;line-height:1.08;letter-spacing:-.02em;margin-bottom:6rem}
@media (max-width:600px){
  .text-cta{padding-top:8rem}
  .statement{grid-column:1/-1;font-size:3rem}
  .statement-cta{flex-direction:column;gap:1rem}
}

/* ---------- keyhole duo ---------- */
.keyhole-duo{padding:15rem 4rem;align-items:start;position:relative}
.kh{position:relative;color:var(--copper)}
.kh-clip{position:relative;aspect-ratio:5/7;clip-path:url(#khClip);overflow:hidden;background:var(--juniper)}
.kh-clip .zoom,.asset-clip .zoom{position:absolute;inset:0;will-change:transform}
.asset-clip{position:relative}
/* overscan: the scaled image always covers the clip boundary, so fractional-pixel compositing can't expose a seam */
.kh-clip .zoom img,.asset-clip .zoom img{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);max-width:none}
.blocks{position:absolute;left:0;bottom:-1px;width:72%;height:auto;pointer-events:none;z-index:2;display:block;overflow:visible}
.blocks rect{fill:var(--beige);stroke:var(--beige);stroke-width:.04;paint-order:stroke}
.asset-clip img{backface-visibility:hidden}
.kh-clip img{width:100%;height:100%;object-fit:cover;will-change:transform}
.kh-outline{position:absolute;inset:-4% -6%;width:112%;height:108%;overflow:visible}
.kh-a{grid-column:3/10;margin-top:24rem}
.asset{position:relative}
.asset-clip{overflow:hidden;background:var(--juniper);aspect-ratio:3/4}
.asset-clip img{width:100%;height:100%;object-fit:cover;will-change:transform}
.asset-b{grid-column:12/23}
.duo-caption{grid-column:12/23;display:flex;align-items:center;gap:1.2rem;margin-top:2rem;font-weight:500;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;color:var(--juniper)}
@media (max-width:600px){
  .keyhole-duo{padding:8rem 2rem;row-gap:3rem}
  .kh-a{grid-column:1/4;margin-top:0}
  .asset-b{grid-column:3/7;margin-top:12rem}
  .duo-caption{grid-column:1/-1}
}

/* ---------- services index ---------- */
.services{padding:15rem 4rem 0}
.rows{position:relative;border-top:1px solid var(--hair-soft)}
.row-item{display:flex;align-items:center;gap:4rem;padding:2.6rem 0;border-bottom:1px solid var(--hair-soft);transition:border-color .5s}
.row-title{flex:0 0 32%;font-weight:300;font-size:4rem;line-height:1;letter-spacing:-.02em;opacity:.55;transition:opacity .5s}
.chips{display:flex;flex-wrap:wrap;gap:1rem;opacity:.55;transition:opacity .5s}
.chip{display:inline-block;padding:.8rem 1.4rem;border:1px solid var(--hair);border-radius:2rem;font-weight:500;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.row-arrow{margin-left:auto;width:1.5rem;height:1.2rem;stroke:currentColor;stroke-width:1.2;opacity:.2;transition:opacity .5s}
@media (hover:hover){
  .row-item:hover{border-color:color-mix(in srgb,var(--copper) 60%,transparent)}
  .row-item:hover .row-title,.row-item:hover .chips,.row-item:hover .row-arrow{opacity:1}
}
.row-image{position:absolute;left:40%;top:0;width:36rem;aspect-ratio:4/5;overflow:hidden;pointer-events:none;opacity:0;z-index:3;transform:translate(-50%,-50%) rotate(-2deg)}
.row-image img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){
  .services{padding-top:8rem}
  .row-item{flex-wrap:wrap;gap:1.2rem;padding:2rem 0}
  .row-title{flex:1 1 auto;font-size:2.8rem}
  .chips{flex-basis:100%;order:3}
  .row-image{display:none}
}

/* ---------- cities ---------- */
.cities{padding:15rem 4rem;align-items:end}
.cities-photo{grid-column:1/8;margin-bottom:8rem}
.cities-photo .asset-clip{aspect-ratio:4/3}
.cities-heading{grid-column:9/25;align-self:end}
.city-marquee{margin:0 -4rem;border-top:1px solid var(--hair-soft);overflow:hidden}
.m-row{display:flex;border-bottom:1px solid var(--hair-soft);padding:2.2rem 0;overflow:hidden;white-space:nowrap}
.m-track{display:flex;align-items:baseline;flex:0 0 auto;will-change:transform;padding-right:4rem;gap:4rem}
.m-item{display:inline-flex;align-items:baseline;gap:1.4rem;color:inherit;transition:color .4s}
.m-city{font-weight:300;font-size:6.4rem;line-height:1;letter-spacing:-.02em}
.m-state{font-weight:500;font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);transform:translateY(-.4em)}
.m-dot{display:inline-block;width:.9rem;height:.9rem;background:var(--copper);align-self:center;flex-shrink:0}
@media (hover:hover){.m-item:hover{color:var(--copper)}}
@media (max-width:600px){
  .cities{padding:8rem 2rem}
  .cities-photo{grid-column:1/-1;margin-bottom:3rem}
  .cities-heading{grid-column:1/-1}
  .city-marquee{margin:0 -2rem}
  .m-row{padding:1.6rem 0}
  .m-track{gap:2.4rem;padding-right:2.4rem}
  .m-city{font-size:3.6rem}
  .m-state{display:none}
  .m-dot{width:.7rem;height:.7rem}
}

/* ---------- featured (pinned horizontal) ---------- */
.featured{position:relative;background:var(--juniper);color:var(--white)}
.featured-pin{position:relative;height:100svh;overflow:hidden}
.featured-head{position:relative;padding-top:5rem;z-index:2}
.featured-head .eyebrow{margin-bottom:0;padding-bottom:2rem;border-top:0;padding-top:0;grid-column:1/13}
.counter{grid-column:19/25;justify-self:end;font-weight:500;font-size:1.2rem;letter-spacing:.14em;color:var(--mint)}
.hairline{grid-column:1/-1;height:1px;background:color-mix(in srgb,var(--white) 30%,transparent);transform:scaleX(0);transform-origin:0}
.track{position:absolute;left:0;top:14rem;display:flex;align-items:flex-start;gap:5rem;padding:0 4rem;will-change:transform}
.card{flex:0 0 auto;width:52rem;margin-top:4rem}
.card.is-tall{width:36rem;margin-top:0}
.card-img{overflow:hidden;background:var(--black);aspect-ratio:4/3;width:100%;margin-bottom:2.4rem}
.card.is-tall .card-img{aspect-ratio:3/4}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out-quart)}
@media (hover:hover){.card:hover .card-img img{transform:scale(1.05)}}
.card-title{font-weight:300;font-size:3.2rem;line-height:1;letter-spacing:-.02em;margin-bottom:.8rem}
.card-loc{font-weight:500;font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:1.6rem}
.card-text{font-size:1.5rem;line-height:1.45;opacity:.8;margin-bottom:1.6rem;max-width:46rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.track-end{flex:0 0 auto;width:40rem;height:52rem;display:flex;align-items:center;justify-content:center}
@media (max-width:600px){
  .featured-pin{height:auto;padding-bottom:6rem}
  .featured-head .eyebrow{grid-column:1/5}
  .counter{grid-column:5/7;display:none}
  .track{position:static;flex-direction:column;gap:5rem;padding:4rem 2rem 0}
  .card,.card.is-tall{width:100%;margin-top:0}
  .card-text{-webkit-line-clamp:unset;display:block}
  .track-end{width:100%;height:auto;padding:2rem 0}
}

/* ---------- careers ---------- */
.careers{padding:15rem 4rem;align-items:center}
.careers-copy{grid-column:1/11}
.careers-copy .lead{margin-bottom:4rem}
.careers-copy .section-heading{grid-column:auto;margin-bottom:3rem}
.kh-big{grid-column:14/23}
@media (max-width:600px){
  .careers{padding:8rem 2rem;row-gap:4rem}
  .careers-copy{grid-column:1/-1}
  .kh-big{grid-column:1/6}
}

/* ---------- connect ---------- */
.connect{padding:0 4rem 15rem}
.connect-frame{grid-column:1/-1;position:relative;overflow:hidden;border:1px solid var(--hair-copper);padding:0;display:grid;grid-template-columns:repeat(24,1fr);column-gap:2rem;align-items:center}
.connect-copy{grid-column:14/25;padding:12rem 6rem 12rem 0}
.connect-photo{grid-column:1/12;align-self:stretch;margin-left:-2rem;order:-1}
.connect-photo .asset-clip{aspect-ratio:auto;height:100%;min-height:56rem}
.connect-frame .eyebrow{border-top:0;padding-top:0;margin-bottom:3rem}
.connect-heading{font-weight:300;font-size:9.6rem;line-height:1;letter-spacing:-.025em;margin-bottom:3rem}
.connect-heading .script{font-size:1.1em;vertical-align:-.03em;margin-left:.18em}
.connect-frame .lead{margin-bottom:5rem}
.connect-frame .statement-cta{justify-content:flex-start}
@media (max-width:600px){
  .connect{padding:0 2rem 8rem}
  .connect-frame{padding:0 0 3rem;grid-template-columns:1fr;row-gap:3rem}
  .connect-copy,.connect-photo{grid-column:1/-1}
  .connect-copy{padding:0 2rem}
  .connect-photo{order:-1;margin-left:0}
  .connect-photo .asset-clip{aspect-ratio:4/3;height:auto;min-height:0}
  .connect-heading{font-size:5.2rem}
  .connect-frame .statement-cta{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ---------- footer ---------- */
.footer{position:relative;z-index:1;height:100svh;min-height:70rem;overflow:hidden;background:var(--black);color:var(--white)}
.footer-inner{position:absolute;inset:0;will-change:transform}
.footer-bg{position:absolute;inset:0}
.footer-bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.footer-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,45,39,.2),rgba(40,45,39,.6))}
.ghost{position:absolute;inset:0;opacity:.32;-webkit-mask:url("../img/rpm-mark.svg") no-repeat;mask:url("../img/rpm-mark.svg") no-repeat;-webkit-mask-size:96rem auto;mask-size:96rem auto;-webkit-mask-position:-6rem calc(100% + 12rem);mask-position:-6rem calc(100% + 12rem);pointer-events:none}
.ghost img{width:100%;height:100%;object-fit:cover;transform:scale(1.5);will-change:transform;filter:brightness(1.6) saturate(.6)}
.footer-mark{position:absolute;left:50%;top:3rem;transform:translateX(-50%);width:4.2rem;color:var(--white)}
.footer-nav{position:absolute;right:4rem;bottom:16rem;display:flex;gap:2.4rem;font-weight:500;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;z-index:2}
.footer-nav a{position:relative}
.footer-nav a::after{content:"";position:absolute;left:0;bottom:-.4rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100%;transition:transform .5s var(--ease-underline)}
@media (hover:hover){.footer-nav a:hover::after{transform-origin:0;transform:scaleX(1)}}
.footer-bar{position:absolute;left:4rem;right:4rem;bottom:4rem;display:flex;gap:3rem;font-size:1.2rem;opacity:.75;z-index:2}
.footer-bar a:nth-child(2){margin-left:auto}
@media (max-width:600px){
  .footer{min-height:0}
  .ghost{-webkit-mask-size:50rem auto;mask-size:50rem auto;-webkit-mask-position:-4rem calc(100% + 8rem);mask-position:-4rem calc(100% + 8rem)}
  .footer-nav{left:2rem;right:2rem;bottom:34svh;flex-direction:column;align-items:center;gap:1rem}
  .footer-bar{left:2rem;right:2rem;bottom:11rem;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;font-size:1.1rem}
  .footer-bar a:nth-child(2){margin-left:0}
}

/* ---------- app states ---------- */
.app.is-overlay .scroll{cursor:pointer}
.app.is-footer .main::after{opacity:0}

/* ---------- debug grid (Cmd/Ctrl+G) ---------- */
.grid-overlay{position:fixed;inset:0 4rem;z-index:97;display:none;grid-template-columns:repeat(24,1fr);column-gap:2rem;pointer-events:none}
.grid-overlay.is-on{display:grid}
.grid-overlay div{background:color-mix(in srgb,var(--copper) 12%,transparent)}
@media (max-width:600px){.grid-overlay{inset:0 2rem;grid-template-columns:repeat(6,1fr);column-gap:1.5rem}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  [data-split]{visibility:visible}
  .hairline{transform:none}
  .header .close,.header .arrow{visibility:hidden}
}

/* ---------- hero tweak panel (press T or ?tweak=1) ---------- */
.tweak{position:fixed;top:2rem;right:2rem;z-index:200;width:30rem;max-height:calc(100svh - 4rem);overflow:auto;background:var(--black);color:var(--white);padding:2rem;font-size:1.2rem;display:none;box-shadow:0 2rem 6rem rgba(0,0,0,.35);scrollbar-width:thin}
.tweak.is-on{display:block}
.tweak h4{margin:0 0 1.4rem;font-weight:500;font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);display:flex;justify-content:space-between;align-items:center}
.tweak h4 button{color:inherit;opacity:.6}
.tweak .grp{border-top:1px solid rgba(255,255,255,.12);padding:1.4rem 0 .4rem;margin-top:.6rem}
.tweak .grp>span{display:block;font-weight:500;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:1rem}
.tweak label{display:grid;grid-template-columns:8rem 1fr 7.4rem;align-items:center;gap:1rem;margin-bottom:.9rem;font-weight:300}
.tweak .num{display:flex;align-items:center;gap:.4rem;justify-content:flex-end}
.tweak .num input{width:5rem;background:#3a4442;color:inherit;border:1px solid rgba(255,255,255,.2);padding:.4rem .5rem;font:inherit;font-size:1.2rem;text-align:right;-moz-appearance:textfield}
.tweak .num input::-webkit-inner-spin-button{opacity:.5}
.tweak .num small{opacity:.6;font-size:1rem;width:2.2rem}
.tweak input[type=range]{width:100%;accent-color:var(--copper);height:1.6rem}
.tweak select{background:#3a4442;color:inherit;border:1px solid rgba(255,255,255,.2);padding:.5rem;font:inherit;grid-column:2/4}
.tweak .acts{display:flex;gap:1rem;margin-top:1.6rem}
.tweak .acts button{flex:1;padding:1.1rem;border:1px solid rgba(255,255,255,.25);font-weight:500;font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase}
.tweak .acts button.primary{background:var(--copper);border-color:var(--copper)}
.tweak .acts button.save{background:var(--sage);border-color:var(--sage);color:var(--black)}
.tweak .msg{margin-top:1rem;font-size:1.1rem;opacity:.7;min-height:1.4em}