/* Rosewild Creative — editorial collage, after the Sep 2026 reference boards. */

@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-normal-300_700.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/caveat-normal-500.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --paper:#F3EDE2; --paper-2:#EBE3D5; --card:#FBF8F2;
  --ink:#1D1B19; --ink-soft:#5B5650; --rule:rgba(29,27,25,.14);
  --rust:#BF522F; --rust-d:#A1411F; --teal:#0E3B45; --teal-2:#2E7F87; --sea:#3A9AA2;
  --mustard:#E0AE3E; --olive:#A6B042; --coral:#E06F5B;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Bradley Hand",cursive;
  --gut:clamp(1.25rem,4vw,3.5rem); --max:1280px; --sec:clamp(4.5rem,9vw,8rem);
  --ease:cubic-bezier(.2,.7,.1,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --torn-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3 0 H100 V100 H2 L4 93 L1 86 L3.5 78 L0.5 70 L3 62 L1 54 L4 46 L1.5 38 L3.5 30 L0 22 L3 14 L1 7 Z'/%3E%3C/svg%3E");
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M2 1 L14 0 L27 2 L41 0 L55 1.5 L70 0 L84 2 L99 .5 L100 13 L98.5 27 L100 41 L99 56 L100 70 L98.8 84 L100 99 L86 100 L72 98.6 L57 100 L43 98.8 L29 100 L15 98.5 L1 100 L0 86 L1.5 72 L0 57 L1.2 43 L0 29 L1.4 15 Z'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:5.5rem}
html,body{overflow-x:clip}
body.rw{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:clamp(.98rem,.94rem + .2vw,1.06rem); line-height:1.6; -webkit-font-smoothing:antialiased}
body.rw::before{content:""; position:fixed; inset:0; z-index:9990; pointer-events:none; background:var(--grain); opacity:.16; mix-blend-mode:multiply}
.rw img{max-width:100%; height:auto; display:block}
.rw a{color:inherit}
.rw h1,.rw h2,.rw h3{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.01em; line-height:1}
.rw p{margin:0 0 1em}
.rw p:last-child{margin-bottom:0}
.rw :focus-visible{outline:2px solid var(--rust); outline-offset:3px}
.rw-skip{position:absolute; left:-999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:.8rem 1rem}
.rw-skip:focus{left:0}
.skip-link,.screen-reader-text,.sr-only{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Elementor gets out of the way */
.rw .elementor-widget:not(:last-child){margin-block-end:0}
.rw .e-con{--padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px; --gap:0px; --row-gap:0px; --column-gap:0px}
.rw .e-con.rw-sec{display:block !important}

/* ---------- shared parts ---------- */
.rw-sec{position:relative; padding:var(--sec) var(--gut); isolation:isolate}
.rw-wrap{max-width:var(--max); margin-inline:auto; position:relative}
.rw-paper2{background:var(--paper-2)}
.rw-teal{background:var(--teal); color:var(--paper)}
.lbl{font-family:var(--sans); font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.9rem; margin:0 0 1.6rem}
.lbl .n{color:var(--ink)}
.lbl .n::after{content:""; display:inline-block; width:2.2rem; height:1px; background:currentColor; opacity:.5; vertical-align:middle; margin-left:.9rem}
.rw-teal .lbl,.rw-teal .lbl .n{color:rgba(243,237,226,.72)}
.h2{font-family:var(--serif); font-size:clamp(2.6rem,1.2rem + 4.2vw,4.6rem); line-height:.98; letter-spacing:-.015em; margin:0 0 1.4rem}
.h2 em,.it{font-style:italic; color:var(--rust)}
.rw-teal .h2 em{color:var(--mustard)}
.lede{color:var(--ink-soft); max-width:40ch; margin:0 0 1.8rem}
.rw-teal .lede{color:rgba(243,237,226,.78)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:1.1rem 1.6rem; border:1px solid currentColor; border-radius:2px; transition:background .3s, color .3s, border-color .3s}
.btn-rust{background:var(--rust); border-color:var(--rust); color:#FFF7EE}
.btn-rust:hover{background:var(--rust-d); border-color:var(--rust-d)}
.btn-line{color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--paper)}
.btn-line-rust{color:var(--rust)}
.btn-line-rust:hover{background:var(--rust); color:#FFF7EE; border-color:var(--rust)}
.btn-light{color:var(--paper)}
.btn-light:hover{background:var(--paper); color:var(--teal)}
.tl{font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding-bottom:.35rem; border-bottom:1.5px solid currentColor; display:inline-flex; gap:.5rem}
.tl:hover{color:var(--rust)}
.hand{font-family:var(--hand); font-weight:500; line-height:1.05; color:var(--ink)}
.tape{position:absolute; width:74px; height:22px; background:rgba(226,208,170,.72); box-shadow:0 1px 2px rgba(0,0,0,.08); z-index:5; mix-blend-mode:multiply}
.polaroid{position:absolute; background:var(--card); padding:10px 10px 34px; box-shadow:0 18px 30px -14px rgba(40,28,15,.45), 0 2px 4px rgba(40,28,15,.12)}
.polaroid img{width:100%; aspect-ratio:1 / .82; object-fit:cover}
.torn{-webkit-mask:var(--torn) center/100% 100% no-repeat; mask:var(--torn) center/100% 100% no-repeat}
.arrow-c{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--rust); color:var(--rust); font-size:.8rem; flex:none; transition:background .3s, color .3s}

/* ---------- header ---------- */
.rw-head{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.1rem var(--gut); background:rgba(243,237,226,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:box-shadow .3s}
.rw-head.is-solid{box-shadow:0 1px 0 var(--rule)}
.rw-mark{font-family:var(--serif); font-size:1.35rem; text-decoration:none; letter-spacing:-.01em}
.rw-nav{display:flex; align-items:center; gap:clamp(1.3rem,2.6vw,2.6rem)}
.rw-nav a{font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; text-decoration:none}
.rw-nav a:hover,.rw-nav a[aria-current]{color:var(--rust)}
.rw-nav .pill{border:1px solid var(--ink); border-radius:999px; padding:.6rem 1.1rem}
.rw-nav .pill:hover{background:var(--ink); color:var(--paper)}
.rw-menu-btn{display:none; font:inherit; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; background:none; border:1px solid var(--ink); border-radius:999px; padding:.55rem 1rem; color:var(--ink); cursor:pointer}
.rw-menu{position:fixed; inset:0; z-index:60; background:var(--paper); padding:6rem var(--gut) 3rem; display:flex; flex-direction:column; justify-content:center; gap:2rem}
.rw-menu[hidden]{display:none}
.rw-menu nav{display:flex; flex-direction:column; gap:.3rem}
.rw-menu nav a{font-family:var(--serif); font-size:clamp(2.8rem,11vw,4rem); text-decoration:none; line-height:1.1}
.rw-menu nav a[aria-current]{color:var(--rust); font-style:italic}
.rw-menu p{color:var(--ink-soft); margin:0}
.rw-menu-close{position:absolute; top:1.1rem; right:var(--gut); font:inherit; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; background:none; border:1px solid var(--ink); border-radius:999px; padding:.55rem 1rem; cursor:pointer}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:center}
.hero-copy{grid-column:1 / span 6; padding-bottom:2rem}
.hero h1{font-size:clamp(4rem,1.2rem + 7.6vw,8.2rem); line-height:.88; letter-spacing:-.02em; margin:0 0 1.2rem}
.hero .sub{font-family:var(--serif); font-style:italic; font-size:clamp(1.7rem,1rem + 2vw,2.7rem); line-height:1.02; margin:0 0 1.4rem; max-width:18ch}
.hero .body{color:var(--ink-soft); max-width:44ch; margin:0 0 2rem}
.hero .btns{display:flex; flex-wrap:wrap; gap:1rem}
.collage{grid-column:7 / -1; position:relative; aspect-ratio:1 / .96; min-height:420px}
.cl-panel{position:absolute; right:0; top:3%; width:66%; height:74%; background:linear-gradient(135deg,#D96A45 0%,#C75A38 45%,#B9502F 100%); rotate:1.5deg}
.cl-panel::after{content:""; position:absolute; inset:0; background:var(--grain); opacity:.6; mix-blend-mode:multiply}
.cl-water{position:absolute; right:2%; bottom:6%; width:64%; height:30%; overflow:hidden; rotate:-1deg; z-index:1}
.cl-water img{width:100%; height:100%; object-fit:cover; object-position:50% 70%}
.cl-portrait{position:absolute; right:3%; bottom:12%; width:60%; z-index:2}
.cl-portrait img{width:100%; filter:drop-shadow(0 18px 24px rgba(40,28,15,.28))}
.cl-note{position:absolute; left:9%; top:12%; width:30%; background:#F6EFDF; padding:1.2rem 1rem 1.3rem 1.2rem; rotate:-5deg; z-index:3; box-shadow:0 10px 18px -10px rgba(40,28,15,.4)}
.cl-note .hand{font-size:clamp(1.05rem,.8rem + .8vw,1.5rem); line-height:1.25}
.cl-note .tape{top:-11px; left:34%; rotate:4deg}
.cl-polaroid{left:15%; bottom:4%; width:38%; rotate:-4deg; z-index:3}
.cl-polaroid .tape{top:-10px; right:18%; rotate:-8deg}
.cl-hand{position:absolute; right:-1%; bottom:0; z-index:4; font-size:clamp(1.1rem,.8rem + .8vw,1.55rem); rotate:-8deg; text-align:right}
.featured{display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem clamp(1.5rem,4vw,3.4rem); border-top:1px solid var(--rule); margin-top:clamp(2rem,4vw,3rem); padding-top:1.8rem}
.featured .lbl{margin:0}
.featured img{height:34px; width:auto; filter:grayscale(1) contrast(1.1); opacity:.72; mix-blend-mode:multiply; transition:opacity .3s, filter .3s}
.featured a:hover img{opacity:1; filter:none}

/* ---------- about band ---------- */
.about{padding:0; background:var(--paper-2)}
.about-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); min-height:clamp(420px,46vw,620px)}
.about-copy{padding:var(--sec) clamp(1.5rem,4vw,4rem) var(--sec) max(var(--gut), calc((100vw - var(--max)) / 2)); align-self:center}
.about-photo{position:relative; overflow:hidden}
.about-photo .ph{position:absolute; inset:0; -webkit-mask:var(--torn-l) left/100% 100% no-repeat; mask:var(--torn-l) left/100% 100% no-repeat}
.about-photo img{width:100%; height:100%; object-fit:cover}
.about-photo .hand{position:absolute; right:clamp(1.5rem,5vw,4rem); top:clamp(1.5rem,5vw,3.5rem); color:#FFF7EE; font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem); rotate:-8deg; text-shadow:0 2px 12px rgba(0,0,0,.25); z-index:2}

/* ---------- services grid ---------- */
.svc-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.svc-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.8rem,1.4vw,1.2rem)}
.svc{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--rule); text-decoration:none; transition:transform .5s var(--ease), box-shadow .5s}
.svc:hover{transform:translateY(-4px); box-shadow:0 18px 30px -18px rgba(40,28,15,.35)}
.svc:hover .arrow-c{background:var(--rust); color:#FFF7EE}
.svc .ph{position:relative; overflow:hidden; aspect-ratio:16 / 10}
.svc .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.svc:hover .ph img{transform:scale(1.05)}
.svc .no{position:absolute; left:.6rem; top:.6rem; background:var(--card); font-size:.62rem; font-weight:600; letter-spacing:.12em; padding:.3rem .45rem}
.svc .txt{padding:1rem 1rem 1.1rem; display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; align-items:start; flex:1}
.svc h3{font-size:clamp(1.25rem,1rem + .6vw,1.55rem); line-height:1.05}
.svc p{grid-column:1; font-size:.8rem; line-height:1.45; color:var(--ink-soft); margin:.25rem 0 0}
.svc .arrow-c{grid-column:2; grid-row:1}

/* ---------- map ---------- */
.map-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(2rem,4vw,4rem); align-items:center}
.map-stage{position:relative}
.map-stage svg{width:100%; height:auto; display:block; overflow:visible}
#mapSvg .land{fill:#2F7C83; opacity:.8; stroke:rgba(243,237,226,.25); stroke-width:.6; transition:fill .3s, opacity .3s}
#mapSvg .land.client{fill:#6FB3B4; opacity:1; cursor:pointer}
#mapSvg .land.client.active{fill:var(--mustard)}
#mapSvg .route{fill:none; stroke:rgba(243,237,226,.6); stroke-width:1.4; stroke-dasharray:4 6}
#mapSvg .pin{cursor:pointer; outline:none}
#mapSvg .pin .core{stroke:var(--teal); stroke-width:2}
#mapSvg .pin .ring{fill:none; stroke-width:1.5; transform-box:fill-box; transform-origin:center; animation:ping 2.6s ease-out infinite}
#mapSvg .pin .hit{fill:transparent}
#mapSvg .pin.active .core{stroke:var(--paper); stroke-width:3}
.tag{position:absolute; transform:translate(-50%,-50%) rotate(var(--r,-3deg)); background:#F6EFDF; color:var(--ink); font-family:var(--hand); font-size:1.15rem; line-height:1; padding:.35rem .7rem .4rem; box-shadow:0 6px 10px -6px rgba(0,0,0,.5); white-space:nowrap; pointer-events:none; z-index:3}
@keyframes ping{0%{transform:scale(.6); opacity:1}100%{transform:scale(2.6); opacity:0}}
.map-card{position:absolute; right:0; top:-4%; width:min(250px,36%); z-index:4; rotate:3deg; transition:opacity .35s}
.map-card .polaroid{position:relative; padding:10px 10px 14px}
.map-card .polaroid img{aspect-ratio:4 / 3}
.map-card h3{font-size:1.35rem; color:var(--ink); margin:.7rem 0 .3rem}
.map-card p{font-size:.78rem; color:var(--ink-soft); margin:0 0 .6rem; line-height:1.45}
.map-card .row{display:flex; justify-content:space-between; align-items:center; gap:.8rem}
.map-card .row span{font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rust)}
.map-card .tape{top:-10px; left:40%; rotate:-4deg}
.map-hint{font-family:var(--hand); font-size:1.3rem; color:rgba(243,237,226,.7); margin:0; rotate:-3deg}

/* ---------- journey ---------- */
.jr-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4rem)}
.jr-head .h2{margin:0}
.jr-track{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0}
.jr-line{position:absolute; left:calc(-1 * var(--gut)); width:calc(100% + 2 * var(--gut)); top:22px; height:30px; pointer-events:none}
.jr-line path{fill:none; stroke:var(--rust); stroke-width:1.2; opacity:.7}
.jr{position:relative; padding:0 clamp(.8rem,1.6vw,1.6rem); border-left:1px solid var(--rule)}
.jr:first-child{border-left:0; padding-left:0}
.jr .when{font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin:0 0 1rem; height:1rem}
.jr .dot{display:block; width:16px; height:16px; border-radius:50%; background:var(--c); margin:0 0 1.6rem 1.2rem; box-shadow:0 0 0 4px var(--paper)}
.jr .snap{position:relative; background:var(--card); padding:8px 8px 22px; box-shadow:0 14px 22px -12px rgba(40,28,15,.4); rotate:var(--r,-2deg); width:86%; margin-bottom:1.6rem}
.jr .snap img{width:100%; aspect-ratio:4 / 3; object-fit:cover}
.jr .snap.logo img{object-fit:contain; background:#fff; padding:14%}
.jr h3{font-size:clamp(1.5rem,1.1rem + 1vw,2rem); margin:0 0 .35rem}
.jr .role{font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rust); margin:0 0 .7rem}
.jr p{font-size:.88rem; color:var(--ink-soft); margin:0 0 1.2rem}
.jr .tl{border-bottom:3px solid var(--c); color:var(--ink)}
.jr-more{position:absolute; right:0; top:-3.6rem; font-size:1.35rem; rotate:-10deg; color:var(--ink-soft)}

/* ---------- recent work ---------- */
.wk-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.wk-nav{display:flex; gap:.6rem; justify-content:flex-end; margin-bottom:1.2rem}
.wk-nav button{width:40px; height:40px; border-radius:50%; border:1px solid var(--ink); background:none; color:var(--ink); cursor:pointer; font-size:1rem; transition:background .3s, color .3s}
.wk-nav button:hover{background:var(--ink); color:var(--paper)}
.wk-strip{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2 * 1.2rem) / 3); gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.wk-strip::-webkit-scrollbar{display:none}
.wk{scroll-snap-align:start; background:var(--card); border:1px solid var(--rule); text-decoration:none; display:flex; flex-direction:column}
.wk .ph{overflow:hidden; aspect-ratio:4 / 3}
.wk .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.wk:hover .ph img{transform:scale(1.05)}
.wk .txt{padding:1.1rem 1.1rem 1.3rem}
.wk h3{font-size:1.55rem; margin:0 0 .4rem}
.wk p{font-size:.84rem; color:var(--ink-soft); margin:0 0 1rem}
.wk .tl{color:var(--rust); font-size:.62rem}

/* ---------- kind words ---------- */
.kw-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.kw blockquote{margin:0; font-family:var(--serif); font-size:clamp(1.9rem,1rem + 2.2vw,3rem); line-height:1.08; letter-spacing:-.01em}
.kw .who{display:flex; align-items:center; gap:1.2rem; margin-top:2rem}
.kw .who img{height:60px; width:auto}
.kw .who span{font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.kw-photo{position:relative; justify-self:center; width:min(360px,100%)}
.kw-photo .polaroid{position:relative; rotate:3deg}
.kw-photo .polaroid img{aspect-ratio:4 / 5}
.kw-photo .tape{top:-10px; left:38%; rotate:-5deg}
.kw-photo .back{position:absolute; inset:6% -6% -4% 8%; background:#E9DDC5; rotate:-4deg; z-index:-1; box-shadow:0 12px 20px -14px rgba(40,28,15,.4)}

/* ---------- closing band + footer ---------- */
.cta{position:relative; overflow:hidden; isolation:isolate; color:var(--paper); text-align:center; padding:clamp(6rem,12vw,10rem) var(--gut); background:var(--teal)}
.cta video,.cta .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.cta::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,38,46,.45), rgba(8,38,46,.7))}
.cta h2{font-size:clamp(3.2rem,1.5rem + 6vw,6.6rem); line-height:.95; margin:0 0 1.2rem}
.cta p{max-width:44ch; margin:0 auto 2.2rem; color:rgba(243,237,226,.85)}
.cta .btns{display:flex; flex-wrap:wrap; justify-content:center; gap:1rem}
.cta .hand{position:absolute; right:clamp(1.5rem,8vw,9rem); bottom:clamp(2rem,6vw,4rem); color:var(--paper); font-size:clamp(1.4rem,1rem + 1.2vw,2.2rem); rotate:-10deg; opacity:.9}
.rw-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem; padding:1.6rem var(--gut); border-top:1px solid var(--rule); background:var(--paper)}
.rw-foot .rw-mark{font-size:1.2rem}
.rw-foot nav{display:flex; flex-wrap:wrap; gap:1.6rem}
.rw-foot nav a,.rw-foot .meta a,.rw-foot .meta span{font-size:.64rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-decoration:none}
.rw-foot nav a:hover,.rw-foot .meta a:hover{color:var(--rust)}
.rw-foot .meta{display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; color:var(--ink-soft)}

.hero-grid>*,.svc-grid>*,.map-grid>*,.wk-grid>*,.kw-grid>*,.about-grid>*{min-width:0}

/* ---------- motion ---------- */
.rw-js [data-reveal]{opacity:0; transform:translateY(26px)}
.rw-js [data-reveal].is-in{opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease)}
.rw-split .w{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .rw-js [data-reveal]{opacity:1; transform:none}
  .rw *{animation:none !important; transition:none !important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .svc-grid,.map-grid,.wk-grid{grid-template-columns:1fr}
  .jr-track{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:3rem}
  .jr:nth-child(4){border-left:0; padding-left:0}
  .jr-line,.jr-more{display:none}
}
@media (max-width:900px){
  .rw-nav{display:none}
  .rw-menu-btn{display:inline-block}
  .hero-grid{display:flex; flex-direction:column}
  .hero-copy{padding-bottom:1rem}
  .collage{width:100%; max-width:560px; align-self:center; margin-top:1rem}
  .about-grid{grid-template-columns:1fr}
  .about-copy{padding:var(--sec) var(--gut) 2.5rem}
  .about-photo{min-height:340px}
  .svc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kw-grid{grid-template-columns:1fr}
  .map-card{position:relative; width:min(280px,80%); margin:1.5rem 0 0 auto; top:0}
  .wk-strip{grid-auto-columns:78%}
}
@media (max-width:620px){
  .svc-cards{grid-template-columns:1fr}
  .jr-track{grid-template-columns:1fr}
  .jr{border-left:0; padding-left:0}
  .jr .snap{width:70%}
  .featured img{height:26px}
  .rw-foot{flex-direction:column; align-items:flex-start}
}

/* ================= INNER PAGES ================= */
/* page hero with a small collage */
.ph-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:center}
.ph-copy{grid-column:1 / span 7}
.ph-copy h1{font-size:clamp(3.4rem,1.2rem + 6vw,6.8rem); line-height:.92; letter-spacing:-.02em; margin:0 0 1.4rem}
.ph-copy h1 em{font-style:italic; color:var(--rust)}
.ph-copy .body{color:var(--ink-soft); max-width:46ch; margin:0 0 2rem; font-size:1.05rem}
.ph-copy .btns{display:flex; flex-wrap:wrap; gap:1rem}
.crumb{font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 1.6rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--rust)}
.ph-col{grid-column:8 / -1; position:relative; aspect-ratio:1 / .95; min-height:360px}
.ph-col .p1{left:4%; top:6%; width:56%; rotate:-4deg; z-index:2}
.ph-col .p2{right:0; top:30%; width:50%; rotate:5deg; z-index:3}
.ph-col .p1 .tape{top:-10px; left:36%; rotate:5deg}
.ph-col .p2 .tape{top:-10px; right:20%; rotate:-6deg}
.ph-col .note{position:absolute; left:8%; bottom:2%; z-index:4; background:#F6EFDF; padding:1rem 1.2rem; rotate:-3deg; box-shadow:0 10px 18px -10px rgba(40,28,15,.4); max-width:62%}
.ph-col .note .hand{font-size:clamp(1.15rem,.9rem + .7vw,1.55rem); margin:0}
.ph-col .blob{position:absolute; right:6%; top:0; width:58%; height:62%; background:linear-gradient(135deg,#D96A45,#B9502F); rotate:3deg; z-index:1}
.ph-col .blob::after{content:""; position:absolute; inset:0; background:var(--grain); opacity:.6; mix-blend-mode:multiply}

/* quick index of services */
.sv-index{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem; border-top:1px solid var(--rule)}
.sv-index a{font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; border:1px solid var(--rule); border-radius:999px; padding:.6rem 1rem; background:var(--card); transition:background .3s, color .3s, border-color .3s}
.sv-index a:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* service spreads */
.sv{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:center; padding:clamp(3.5rem,7vw,6rem) 0; border-top:1px solid var(--rule); scroll-margin-top:5rem}
.sv:first-child{border-top:0; padding-top:0}
.sv-vis{grid-column:1 / span 6; position:relative}
.sv-vis .big{overflow:hidden; aspect-ratio:5 / 4}
.sv-vis .big img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.sv-vis:hover .big img{transform:scale(1.04)}
.sv-vis .polaroid{width:36%; right:-4%; bottom:-8%; rotate:5deg; z-index:3}
.sv-vis .polaroid video,.sv-vis .polaroid img{width:100%; aspect-ratio:3 / 4; object-fit:cover; display:block}
.sv-vis .polaroid .tape{top:-10px; left:34%; rotate:-5deg}
.sv-vis .stick{position:absolute; left:-2%; top:-6%; z-index:3; background:#F6EFDF; padding:.7rem 1rem; rotate:-5deg; box-shadow:0 8px 14px -8px rgba(40,28,15,.4)}
.sv-vis .stick .hand{font-size:1.35rem; margin:0}
.sv-txt{grid-column:8 / span 5}
.sv:nth-child(even) .sv-vis{grid-column:7 / span 6; order:2}
.sv:nth-child(even) .sv-txt{grid-column:1 / span 5; order:1}
.sv:nth-child(even) .sv-vis .polaroid{right:auto; left:-4%; rotate:-5deg}
.sv:nth-child(even) .sv-vis .stick{left:auto; right:-2%; rotate:4deg}
.sv-txt h2{font-size:clamp(2.4rem,1.2rem + 3.2vw,4rem); line-height:.95; margin:0 0 .8rem}
.sv-txt .line{font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,1rem + .7vw,1.6rem); line-height:1.2; color:var(--rust); margin:0 0 1.6rem; max-width:30ch}
.inc{list-style:none; margin:0 0 1.6rem; padding:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule); counter-reset:inc}
.inc li{counter-increment:inc; padding:.7rem 0; border-bottom:1px solid var(--rule); font-size:.92rem; display:flex; gap:.7rem}
.inc li::before{content:counter(inc, decimal-leading-zero); font-size:.62rem; font-weight:600; letter-spacing:.1em; color:var(--rust); padding-top:.3rem}
.inc li:nth-child(odd){padding-right:1rem}
.ai-note{position:relative; background:var(--card); border:1px solid var(--rule); padding:1rem 1.1rem; margin:0 0 1.4rem; font-size:.9rem; color:var(--ink-soft)}
.ai-note b{display:block; font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-2); margin-bottom:.35rem}
.seen{font-size:.88rem; margin:0 0 1.6rem; display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:baseline}
.seen span{font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.seen a{text-underline-offset:.25em}
.price-row{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; padding-top:1.2rem; border-top:1px solid var(--rule)}
.price{font-family:var(--serif); font-size:1.6rem; line-height:1}
.price small{display:block; font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-2); margin-bottom:.35rem}

/* packages band on the services page */
.pk-band .rw-wrap{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.offer{position:relative; background:#F6EFDF; color:var(--ink); padding:1.8rem 1.6rem 1.6rem; rotate:-1.5deg; box-shadow:0 22px 34px -18px rgba(0,0,0,.55)}
.offer .tape{top:-11px; left:40%; rotate:3deg}
.offer .k{font-size:.64rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); margin:0 0 .8rem}
.offer h3{font-size:1.9rem; line-height:1.02; margin:0 0 .8rem}
.offer p{font-size:.9rem; color:var(--ink-soft); margin:0 0 1rem}
.offer .hand{font-size:1.35rem; color:var(--rust); margin:0}
.offer a.tl{color:var(--ink)}

/* package cards */
.pk-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.4vw,1.2rem)}
.pk{position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--rule); border-top:4px solid var(--c); padding:1.5rem 1.3rem 1.4rem}
.pk .k{font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--c); margin:0 0 .7rem}
.pk h3{font-size:1.9rem; line-height:1; margin:0 0 .6rem}
.pk .for{font-size:.86rem; color:var(--ink-soft); margin:0 0 1.2rem}
.pk ul{list-style:none; padding:0; margin:0 0 1.4rem; font-size:.88rem}
.pk li{padding:.45rem 0; border-top:1px solid var(--rule)}
.pk .price{margin-top:auto; padding-top:1rem; border-top:1px solid var(--rule)}
.pk .std{display:block; font-family:var(--sans); font-size:.78rem; color:var(--ink-soft); margin-top:.35rem}
.pk-wide{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.5rem; align-items:end}
.pk-wide .price{margin:0; border:0; padding:0; text-align:right}

/* build your own package */
.pb-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.pb-group{border:0; margin:0 0 2.6rem; padding:0}
.pb-group legend{font-family:var(--serif); font-size:1.9rem; padding:0 0 .9rem}
.pb-item{display:grid; grid-template-columns:1fr auto; grid-template-areas:"name price" "note ctl"; gap:.35rem 1.5rem; width:100%; text-align:left; background:transparent; border:0; border-top:1px solid var(--rule); padding:1.15rem 0; color:inherit; font:inherit; cursor:pointer; transition:background .25s}
.pb-group .pb-item:last-child{border-bottom:1px solid var(--rule)}
.pb-name{grid-area:name; font-weight:600; font-size:1rem}
.pb-note{grid-area:note; font-size:.88rem; color:var(--ink-soft)}
.pb-price{grid-area:price; font-family:var(--serif); font-size:1.3rem; white-space:nowrap; text-align:right}
.pb-mark,.pb-inc,.pb-stepper,.pb-seg{grid-area:ctl; justify-self:end; align-self:center}
.pb-inc{font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-2)}
.pb-mark{width:1.6rem; height:1.6rem; border:1px solid var(--ink); border-radius:50%; position:relative; transition:background .25s}
.pb-toggle[aria-pressed="true"] .pb-mark{background:var(--rust); border-color:var(--rust)}
.pb-toggle[aria-pressed="true"] .pb-mark::after{content:""; position:absolute; left:.52rem; top:.3rem; width:.4rem; height:.72rem; border:solid #FFF7EE; border-width:0 2px 2px 0; transform:rotate(45deg)}
.pb-toggle:hover{background:rgba(191,82,47,.05)}
.pb-count,.pb-pack{cursor:default}
.pb-stepper{display:inline-flex; align-items:center; gap:.9rem}
.pb-stepper button{width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--ink); background:transparent; color:var(--ink); font:400 1.2rem/1 var(--sans); cursor:pointer}
.pb-stepper button:disabled{opacity:.3; cursor:default}
.pb-n{font-family:var(--serif); font-size:1.4rem; min-width:1.4rem; text-align:center}
.pb-seg{display:inline-flex; border:1px solid var(--ink); border-radius:999px; overflow:hidden}
.pb-seg button{border:0; background:transparent; color:var(--ink); font:600 .72rem/1 var(--sans); letter-spacing:.08em; padding:.6rem .85rem; cursor:pointer}
.pb-seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.pb-sum{position:sticky; top:6rem; background:var(--teal); color:var(--paper); padding:2rem 1.7rem}
.pb-sum::before{content:""; position:absolute; inset:0; background:var(--grain); opacity:.25; mix-blend-mode:screen; pointer-events:none}
.pb-sum-k{font-family:var(--serif); font-size:1.9rem; margin:0 0 1.1rem}
.pb-lines{list-style:none; margin:0 0 1.4rem; padding:0; font-size:.9rem}
.pb-lines li{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid rgba(243,237,226,.16)}
.pb-lines li span:last-child{white-space:nowrap; opacity:.85}
.pb-tot{display:flex; justify-content:space-between; align-items:baseline; padding:.35rem 0}
.pb-tot span{font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; opacity:.75}
.pb-tot strong{font-family:var(--serif); font-weight:400; font-size:2.5rem; line-height:1}
.pb-tot-m strong{font-size:1.6rem}
.pb-sum .btn{width:100%; margin-top:1.3rem}
.pb-wa{display:block; margin-top:1rem; text-align:center; font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--paper)}
.pb-fine{font-size:.78rem; opacity:.7; margin:1.2rem 0 0}
.pb-sum .hand{position:absolute; right:-.6rem; top:-1.9rem; color:var(--rust); font-size:1.5rem; rotate:-6deg}

@media (max-width:1100px){
  .pk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-band .rw-wrap{grid-template-columns:1fr}
}
@media (max-width:900px){
  .ph-grid{display:flex; flex-direction:column; align-items:stretch}
  .ph-col{width:100%; max-width:460px; align-self:center; margin-top:2rem}
  .sv{display:flex; flex-direction:column; align-items:stretch; gap:2.6rem}
  .sv:nth-child(even) .sv-vis{order:0}
  .inc{grid-template-columns:1fr}
  .pb-grid{grid-template-columns:1fr}
  .pb-sum{position:sticky; bottom:0; top:auto; margin:0 calc(-1 * var(--gut)); padding:1.1rem var(--gut) calc(1.1rem + env(safe-area-inset-bottom,0px)); z-index:5}
  .pb-sum-k,.pb-lines,.pb-fine,.pb-sum .hand{display:none}
  .pb-tot strong{font-size:1.8rem}
  .pb-sum .pb-tot{display:inline-flex; gap:.6rem; margin-right:1.2rem}
  .pb-sum .btn{margin-top:.6rem; padding:.9rem}
  .pk-wide{grid-template-columns:1fr}
  .pk-wide .price{text-align:left}
}
@media (max-width:620px){
  .pk-grid{grid-template-columns:1fr}
}

/* ---------- featured work belt: client logos in colour, drifting across the full width ---------- */
.belt{position:relative; width:100vw; margin:clamp(2rem,4vw,3rem) 0 0 calc(50% - 50vw); display:flex; align-items:center; background:var(--card); border-block:1px solid var(--rule); overflow:hidden}
.belt-lbl{flex:none; position:relative; z-index:2; margin:0; padding:1.5rem clamp(1.2rem,3vw,2.4rem) 1.5rem var(--gut); background:var(--card); font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); box-shadow:18px 0 22px 4px var(--card)}
.belt-view{flex:1; min-width:0; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent)}
.belt-track{display:flex; width:max-content; animation:belt 38s linear infinite}
.belt-set{display:flex; align-items:center; gap:clamp(3rem,6vw,5.5rem); padding:1.2rem clamp(3rem,6vw,5.5rem) 1.2rem 0}
.belt-set img{height:clamp(38px,3.6vw,54px); width:auto; max-width:none; transition:transform .4s var(--ease)}
.belt-set a:hover img{transform:scale(1.08) rotate(-2deg)}
.belt:hover .belt-track,.belt:focus-within .belt-track{animation-play-state:paused}
@keyframes belt{to{transform:translateX(-25%)}}
@media (prefers-reduced-motion:reduce){ .belt-track{animation:none} }
@media (max-width:620px){ .belt-lbl{display:none} }

/* hero note: a handwritten list with inked bullets */
.cl-list{list-style:none; margin:0; padding:0; font-size:clamp(1.05rem,.8rem + .8vw,1.5rem); line-height:1.3}
.cl-list li{position:relative; padding-left:1.05em}
.cl-list li::before{content:""; position:absolute; left:.1em; top:.5em; width:.36em; height:.36em; border-radius:50%; background:var(--rust); transform:rotate(-8deg) scaleX(1.15)}
.cl-list li:nth-child(even)::before{background:var(--teal-2)}
.cl-hand{max-width:13em}

/* map: clearer islands, readable arrow, a hand-drawn hint */
.rw .arrow-c{color:var(--rust)}
.rw .svc:hover .arrow-c,.rw .map-card a.arrow-c:hover{background:var(--rust); color:#FFF7EE}
#mapSvg .land{fill:#2C7178; opacity:1; stroke:rgba(243,237,226,.18)}
#mapSvg .land.client{fill:#7CC1C0; stroke:rgba(243,237,226,.6); stroke-width:1}
#mapSvg .land.client:hover{fill:#A5D8D6}
#mapSvg .land.client.active{fill:var(--mustard)}
.map-card{transition:opacity .35s, rotate .5s var(--ease)}

/* kind words: a wide polaroid of Lauren and the Roots family */
.kw-photo.wide{width:min(560px,100%)}
.kw-photo.wide .polaroid{padding:12px 12px 14px; rotate:2deg}
.kw-photo.wide .polaroid img{aspect-ratio:auto; height:auto}
.kw-cap{font-size:1.35rem; margin:.7rem .2rem 0; color:var(--ink-soft)}
.kw-photo.wide .back{inset:10% -4% -8% 6%}
.cl-note{width:36%}
.cl-list li{white-space:nowrap}
.cl-hand{bottom:2%}

/* about band: the pool photo drifts and a caustic light pattern moves across it */
.about-photo .ph::after{content:""; position:absolute; inset:-20%; background:url(https://rosewildcreative.com/wp-content/uploads/2026/09/texture-gray.webp) center/60% auto repeat; mix-blend-mode:soft-light; opacity:.55; pointer-events:none; animation:caustic 14s linear infinite}
.about-photo .ph img{animation:poolDrift 22s ease-in-out infinite alternate; transform-origin:60% 40%}
@keyframes caustic{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-6%,4%) rotate(1.5deg)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes poolDrift{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-2%,1.5%)}}
.about-photo .hand{right:clamp(3rem,9vw,8rem)}
.about .h2{margin-bottom:1.6rem}
@media (prefers-reduced-motion:reduce){ .about-photo .ph::after,.about-photo .ph img{animation:none} }

/* work page */
.cs-logo{height:48px; width:auto; margin:0 0 1.2rem; object-fit:contain}
.cs-body{color:var(--ink-soft); margin:0 0 1.4rem; max-width:48ch}
.cs-cont{padding-top:0}
.cs-cont .sv:first-child{border-top:1px solid var(--rule); padding-top:clamp(3.5rem,7vw,6rem)}
.sv-vis .cs-panel{background:var(--teal); display:grid; place-items:center}
.sv-vis .cs-panel img{width:52%; height:auto; object-fit:contain; filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
/* hero collage v2: a big taped print of Cecelia, lemons behind, hibiscus in front */
.collage .cl-panel{right:2%; top:4%; width:64%; height:78%}
.cl-lemons{position:absolute; right:-7%; top:-7%; width:40%; z-index:1; rotate:14deg; pointer-events:none}
.cl-lemons img,.cl-hibiscus img{width:100%; filter:drop-shadow(0 14px 16px rgba(40,28,15,.28))}
.cl-print{position:absolute; right:7%; top:9%; width:52%; z-index:2; background:var(--card); padding:12px 12px 16px; rotate:3deg; box-shadow:0 26px 40px -18px rgba(40,28,15,.55), 0 2px 4px rgba(40,28,15,.12)}
.cl-print img{width:100%; aspect-ratio:4 / 4.6; object-fit:cover; object-position:50% 22%}
.cl-print .tape{top:-11px; left:38%; rotate:-4deg}
.cl-hibiscus{position:absolute; right:-3%; bottom:8%; width:25%; z-index:3; rotate:-12deg; pointer-events:none}
.collage .cl-note{left:4%; top:12%; width:37%; z-index:4}
.collage .cl-polaroid{left:8%; bottom:4%; width:35%; z-index:4}
.collage .cl-hand{right:20%; bottom:-3%; z-index:5}
@media (max-width:900px){ .collage .cl-note{width:44%} .collage .cl-polaroid{width:40%} }
/* services page v2: a fan of three service polaroids, and the full campaign film */
.sv-fan .blob{right:4%; top:2%; width:62%; height:70%}
.sv-fan .polaroid{width:48%}
.sv-fan .f1{left:2%; top:4%; rotate:-8deg; z-index:2}
.sv-fan .f2{right:0; top:12%; rotate:7deg; z-index:3}
.sv-fan .f3{left:22%; top:34%; width:54%; rotate:-1.5deg; z-index:4; padding-bottom:3.4rem}
.sv-fan .polaroid .tape{top:-10px; left:38%; rotate:-4deg}
.fan-note{position:absolute; left:14px; right:14px; bottom:.7rem; margin:0; font-size:clamp(1.05rem,.9rem + .5vw,1.4rem); color:var(--ink)}
.sv-vis .sv-film{position:relative; aspect-ratio:auto; overflow:visible; background:var(--card); padding:12px 12px 16px; rotate:-1deg; box-shadow:0 26px 40px -18px rgba(40,28,15,.5)}
.sv-film video{display:block; width:100%; aspect-ratio:16 / 9; height:auto; object-fit:contain; background:#000}
.sv-film .tape{top:-11px; left:42%; rotate:3deg}
.film-cap{margin:.8rem .2rem 0; font-size:.82rem; color:var(--ink-soft)}
.film-cap b{color:var(--ink)}
.sv-vis .film-pol{width:32%; right:-5%; bottom:-14%; rotate:6deg; z-index:3}
.sv-vis .film-pol img{aspect-ratio:4 / 3}
#video .sv-vis{grid-column:1 / span 7}
#video .sv-txt{grid-column:9 / span 4}
@media (max-width:900px){ .sv-vis .film-pol{position:relative; width:60%; margin:-1.5rem 0 0 auto; right:auto; bottom:auto} }
/* work page hero v2: deep sea, sun-yellow, a pile of real project prints */
.wk-hero{background:#0B3540; color:var(--paper); overflow:clip; padding-bottom:clamp(3rem,6vw,4.5rem)}
.wk-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:url(https://rosewildcreative.com/wp-content/uploads/2026/09/texture-gray.webp) center/cover; mix-blend-mode:soft-light; opacity:.35}
.wk-hero::after{content:""; position:absolute; z-index:-1; width:70vmax; height:70vmax; right:-25vmax; top:-30vmax; border-radius:50%; background:radial-gradient(closest-side, rgba(224,174,62,.28), transparent 70%)}
.wkh-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:center}
.wkh-copy{grid-column:1 / span 6}
.wk-hero .crumb{color:rgba(243,237,226,.6)}
.wk-hero h1{font-size:clamp(3.6rem,1.2rem + 6.8vw,7.6rem); line-height:.9; letter-spacing:-.02em; margin:0 0 1.4rem; color:var(--paper)}
.wk-hero h1 em{font-style:italic; color:#F2C14E}
.wk-hero .body{color:rgba(243,237,226,.82); max-width:44ch; margin:0 0 2rem; font-size:1.05rem}
.wk-hero .btns{display:flex; flex-wrap:wrap; gap:1rem}
.btn-sun{background:#F2C14E; border-color:#F2C14E; color:#0B3540}
.btn-sun:hover{background:#FFD978; border-color:#FFD978}
.wkh-stats{display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); margin:2.6rem 0 0; padding-top:1.6rem; border-top:1px solid rgba(243,237,226,.18)}
.wkh-stats div{margin:0}
.wkh-stats dt{font-family:var(--serif); font-size:clamp(2.6rem,1.6rem + 2.4vw,3.8rem); line-height:1; color:#F2C14E}
.wkh-stats dd{margin:.35rem 0 0; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,237,226,.7)}
.wkh-col{grid-column:7 / -1; position:relative; aspect-ratio:1 / 1; min-height:420px}
.wkh-sun{position:absolute; right:6%; top:8%; width:62%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 38%, #F6CF63, #E0943A 70%); opacity:.95}
.wkh-col .polaroid img{aspect-ratio:4 / 3.2}
.wkh-col .polaroid .hand{margin:.55rem .2rem 0; font-size:1.2rem; color:var(--ink)}
.wkh-col .polaroid{padding-bottom:12px}
.wkh-col .w1{left:0; top:10%; width:58%; rotate:-6deg; z-index:2}
.wkh-col .w2{right:0; top:30%; width:50%; rotate:5deg; z-index:3}
.wkh-col .w3{left:16%; bottom:0; width:42%; rotate:-2deg; z-index:4}
.wkh-col .polaroid .tape{top:-10px; left:38%; rotate:-4deg}
.wkh-lemons{right:-4%; top:-4%; width:34%; z-index:1; rotate:18deg}
.wkh-hib{right:4%; bottom:4%; width:22%; z-index:5}
.wkh-index{border-top-color:rgba(243,237,226,.18)}
.wkh-index a{background:transparent; color:var(--paper); border-color:rgba(243,237,226,.35)}
.wkh-index a:hover{background:#F2C14E; color:#0B3540; border-color:#F2C14E}
@media (max-width:900px){ .wkh-grid{display:flex; flex-direction:column; align-items:stretch} .wkh-col{width:100%; max-width:480px; align-self:center; margin-top:2.5rem} }
/* about page */
.ab-col .blob{right:6%; top:4%; width:58%; height:66%}
.ab-print{right:8%; top:8%; width:52%; rotate:3deg; z-index:2}
.ab-print img{aspect-ratio:4 / 5}
.ab-pit{left:2%; bottom:6%; width:40%; rotate:-6deg; z-index:3}
.ab-lemons{right:-6%; top:-6%; width:34%; z-index:1; rotate:16deg}
.ab-note{left:4%; top:10%; z-index:4; max-width:44%}
.ab-col .polaroid .tape{top:-10px; left:38%; rotate:-4deg}
.ab-ai-head{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4rem)}
.ab-pts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem)}
.ab-pts article{border-top:2px solid var(--mustard); padding-top:1.4rem}
.ab-pts .no{font-family:var(--hand); font-size:1.6rem; color:var(--mustard)}
.ab-pts h3{font-size:clamp(1.7rem,1.2rem + 1vw,2.3rem); margin:.3rem 0 .8rem; color:var(--paper)}
.ab-pts p{color:rgba(243,237,226,.78); margin:0; font-size:.95rem}
.ab-wild-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,6vw,6rem); align-items:center}
.ab-wild-pic{position:relative; justify-self:center; width:min(380px,100%)}
.ab-julia{position:relative; rotate:-4deg; padding-bottom:14px}
.ab-julia img{aspect-ratio:1 / 1}
.ab-julia .hand{margin:.6rem .2rem 0; font-size:1.35rem; color:var(--ink)}
.ab-julia .tape{top:-10px; left:38%; rotate:4deg}
.ab-hib{right:-12%; bottom:-10%; width:40%; z-index:3}
.ab-wild .lede{max-width:52ch}
.ab-sign{font-size:clamp(1.5rem,1rem + 1vw,2rem); color:var(--rust); rotate:-3deg; margin:1.6rem 0 0}
.ab-path{list-style:none; margin:2.5rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--rule); counter-reset:p}
.ab-path li{counter-increment:p; padding:1.3rem 1.2rem 1.4rem 0; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:.3rem}
.ab-path li::before{content:counter(p, decimal-leading-zero); font-size:.64rem; font-weight:600; letter-spacing:.14em; color:var(--rust)}
.ab-path b{font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.05}
.ab-path span{font-size:.9rem; color:var(--ink-soft)}
.ab-more{margin:2rem 0 0; color:var(--ink-soft)}
.ab-more a{color:var(--rust); text-underline-offset:.25em}
@media (max-width:900px){ .ab-ai-head,.ab-wild-grid{grid-template-columns:1fr} .ab-pts{grid-template-columns:1fr} .ab-path{grid-template-columns:1fr} .ab-note{max-width:60%} }
/* contact page */
.ct-grid{display:grid !important; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,6vw,6rem) !important; align-items:start; max-width:var(--max); margin-inline:auto}
.ct-copy h1{font-size:clamp(3.4rem,1.2rem + 6vw,6.8rem); line-height:.92; letter-spacing:-.02em; margin:0 0 1.4rem}
.ct-copy h1 em{font-style:italic; color:var(--rust)}
.ct-copy .body{color:var(--ink-soft); max-width:44ch; margin:0 0 2rem; font-size:1.05rem}
.ct-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); max-width:520px}
.ct-list li{display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--rule); align-items:baseline}
.ct-list span{font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.ct-list a{font-family:var(--serif); font-size:1.35rem; text-decoration:none; overflow-wrap:anywhere}
.ct-list a:hover{color:var(--rust)}
.ct-list b{font-weight:400; font-size:.98rem}
.ct-pics{position:relative; height:260px; margin-top:2.5rem; max-width:460px}
.ct-p1{left:6%; top:0; width:44%; rotate:-5deg; z-index:2}
.ct-p1 img{aspect-ratio:4 / 4.6; object-position:50% 20%}
.ct-p1 .tape{top:-10px; left:36%; rotate:4deg}
.ct-lem{left:38%; top:10%; width:30%; z-index:1; rotate:24deg}
.ct-hand{position:absolute; left:58%; top:48%; font-size:2rem; color:var(--rust); rotate:-8deg; margin:0}
.ct-card{position:relative; background:var(--card) !important; padding:2.4rem clamp(1.4rem,3vw,2.4rem) 2rem !important; box-shadow:0 30px 50px -24px rgba(40,28,15,.4), 0 1px 0 var(--rule); rotate:.6deg; display:block !important}
.ct-card .tape{top:-11px; left:42%; rotate:-3deg}
.ct-card-k{font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); margin:0 0 .6rem}
.ct-card-t{font-size:2.3rem; margin:0 0 1.6rem}
.ct-card .ff-el-group{margin-bottom:1.2rem}
.ct-card .ff-el-input--label label{font-family:var(--sans); font-size:.66rem !important; font-weight:600 !important; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) !important}
.ct-card .ff-el-form-control{background:transparent !important; border:0 !important; border-bottom:1px solid rgba(29,27,25,.3) !important; border-radius:0 !important; padding:.7rem 0 !important; font-family:var(--sans) !important; font-size:1.02rem !important; color:var(--ink) !important; box-shadow:none !important}
.ct-card .ff-el-form-control:focus{border-bottom-color:var(--rust) !important}
.ct-card textarea.ff-el-form-control{min-height:130px}
.ct-card .ff-el-form-check label{font-size:.95rem; color:var(--ink)}
.ct-card .ff-el-form-check input{accent-color:var(--rust)}
.ct-card .ff-btn-submit{background:var(--rust) !important; border:0 !important; border-radius:2px !important; color:#FFF7EE !important; font-family:var(--sans) !important; font-size:.72rem !important; font-weight:600 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:1.1rem 1.8rem !important; width:100%}
.ct-card .ff-btn-submit:hover{background:var(--rust-d) !important}
.ct-card .ff-message-success{background:var(--paper-2); border:0; font-family:var(--serif); font-size:1.3rem}
@media (max-width:900px){ .ct-grid{grid-template-columns:1fr} .ct-pics{display:none} }
/* homepage hero: pool water with floating flowers */
.hero{background:#BFD9CF url(https://rosewildcreative.com/wp-content/uploads/2026/09/rw-hero-pool-a.webp) center/cover no-repeat; overflow:clip}
.hero::before{content:""; position:absolute; inset:-15%; z-index:-1; background:url(https://rosewildcreative.com/wp-content/uploads/2026/09/texture-gray.webp) center/55% auto repeat; mix-blend-mode:soft-light; opacity:.45; pointer-events:none; animation:caustic 16s linear infinite}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(243,237,226,.72) 0%, rgba(243,237,226,.5) 32%, rgba(243,237,226,0) 58%)}
.hero .lbl{color:var(--ink)}
.hero .body{color:#3F3A35}
.hero .btn-line{background:rgba(251,248,242,.55); backdrop-filter:blur(4px)}
.hero .belt{border-top:0}
@media (max-width:900px){ .hero::after{background:linear-gradient(180deg, rgba(243,237,226,.75) 0%, rgba(243,237,226,.45) 45%, rgba(243,237,226,0) 70%)} }
@media (prefers-reduced-motion:reduce){ .hero::before{animation:none} }

/* homepage hero: floating frangipani video over the pool, nothing laid on top of the flowers */
.hero::before{content:none; display:none}
.about-photo .ph::after{content:none}
.hero-vid{position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.hero-vid video{width:100%; height:100%; object-fit:cover; display:block}
/* quieter, more luxe inner pages: champagne sand instead of bright yellow, fewer props */
.wk-hero h1 em{color:#E3CFA4}
.wkh-stats dt{color:#E3CFA4}
.btn-sun{background:#E3CFA4; border-color:#E3CFA4; color:#0B3540}
.btn-sun:hover{background:#F1E3C4; border-color:#F1E3C4; color:#0B3540}
.wkh-index a:hover{background:#E3CFA4; color:#0B3540; border-color:#E3CFA4}
.wk-hero::after{background:radial-gradient(closest-side, rgba(227,207,164,.14), transparent 70%)}
.wkh-col .polaroid{box-shadow:0 30px 50px -24px rgba(0,0,0,.6)}
.wkh-col .w1{rotate:-4deg}
.wkh-col .w2{rotate:3deg}
.wkh-col .w3{rotate:-1deg}

/* tidy join between hero, logo belt and About: belt is the hero's bottom edge, no stray strip of water below it */
.hero{padding-bottom:0 !important}
.hero .belt{margin-top:clamp(2.5rem,5vw,4rem); margin-bottom:0; background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); backdrop-filter:none}
.hero .belt-lbl{background:var(--paper); box-shadow:18px 0 22px 4px var(--paper)}
.hero .belt-set img{filter:none}
.about{border-top:0}
/* work page case studies v2: live-site browser + phone frames, Instagram phone, fresh Roots photography */
.cs2{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding:clamp(4rem,8vw,7rem) 0; border-top:1px solid var(--rule); scroll-margin-top:5rem}
.cs2:first-child{border-top:0; padding-top:0}
.cs2:nth-child(even) .cs2-head{order:2}
.rw .cs2-logo{height:56px; width:auto; max-width:230px; object-fit:contain; object-position:left center; margin:0 0 1.4rem}
.cs2-head h2{font-size:clamp(2.4rem,1.2rem + 3vw,4rem); line-height:.95; margin:0 0 .8rem}
.cs2-head .line{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,1rem + .6vw,1.5rem); line-height:1.2; color:var(--rust); margin:0 0 1.3rem; max-width:30ch}
.cs2-chips{list-style:none; margin:0 0 1.4rem; padding:0; display:flex; flex-wrap:wrap; gap:.45rem}
.cs2-chips li{font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:.5rem .8rem; border:1px solid var(--rule); border-radius:999px; background:var(--card)}
.cs2-res{margin:0 0 1.6rem; font-size:.95rem; color:var(--ink-soft); max-width:46ch; padding-left:1rem; border-left:2px solid var(--teal-2)}
.cs2-res b{display:block; font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-2); margin-bottom:.35rem}
.cs2-btns{display:flex; flex-wrap:wrap; gap:.8rem}
.cs2-stage{position:relative; padding:0 8% 10% 0}
.dev-browser{display:block; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 40px 70px -40px rgba(20,40,45,.55), 0 0 0 1px rgba(0,0,0,.06); text-decoration:none; transition:transform .6s var(--ease), box-shadow .6s}
.dev-browser .bar{display:flex; align-items:center; gap:.4rem; padding:.65rem .9rem; background:#F1ECE3; border-bottom:1px solid rgba(0,0,0,.06)}
.dev-browser .bar i{width:10px; height:10px; border-radius:50%; background:#D9CFC0}
.dev-browser .bar i:first-child{background:#E8A294}
.dev-browser .bar em{font-style:normal; font-size:.72rem; color:var(--ink-soft); margin-left:.8rem; background:#fff; padding:.25rem .8rem; border-radius:999px; flex:1; max-width:60%}
.dev-browser .scr{display:block; aspect-ratio:16 / 10; overflow:hidden}
.dev-browser .scr img{width:100%; height:auto; transition:transform 6s ease}
.dev-browser:hover{transform:translateY(-4px); box-shadow:0 50px 80px -40px rgba(20,40,45,.6), 0 0 0 1px rgba(0,0,0,.06)}
.dev-phone{position:absolute; right:0; bottom:0; width:26%; min-width:130px; background:#141414; border-radius:28px; padding:8px; box-shadow:0 40px 60px -30px rgba(10,30,35,.6); text-decoration:none; transition:transform .6s var(--ease)}
.dev-phone .scr{position:relative; display:block; border-radius:21px; overflow:hidden; aspect-ratio:390 / 844; background:#000}
.dev-phone .scr img,.dev-phone video{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.dev-phone::before{content:""; position:absolute; top:14px; left:50%; width:30%; height:14px; border-radius:10px; background:#141414; transform:translateX(-50%); z-index:3}
.dev-phone:hover{transform:translateY(-6px) rotate(-1deg)}
.dev-phone.ig video{object-position:center}
.ig-top{position:absolute; left:0; right:0; top:0; z-index:2; padding:34px 10px 10px; display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:600; color:#fff; background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.ig-top i{width:18px; height:18px; border-radius:50%; background:conic-gradient(#F58529,#DD2A7B,#8134AF,#515BD4,#F58529); box-shadow:0 0 0 2px #fff inset}
.ig-bar{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; gap:10px; padding:10px 10px 12px; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
.ig-bar svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round}
.ig-bar em{margin-left:auto; font-style:normal; font-size:.6rem; font-weight:600; color:#fff; letter-spacing:.1em; text-transform:uppercase}
.cs2-tip{position:absolute; right:30%; bottom:-.4rem; margin:0; font-size:1.3rem; color:var(--ink-soft); rotate:-4deg}
.cs2-strip{grid-column:1 / -1; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(.6rem,1.2vw,1rem); margin-top:clamp(1.5rem,3vw,2.5rem)}
.cs2-strip figure{margin:0; overflow:hidden; aspect-ratio:4 / 5}
.cs2-strip figure:first-child,.cs2-strip figure:last-child{aspect-ratio:auto}
.cs2-strip img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
.cs2-strip figure:hover img{transform:scale(1.04)}
.cs2-stage.film{padding:0}
.cs2-stage.film .sv-film{position:relative; background:var(--card); padding:12px 12px 16px; rotate:-1deg; box-shadow:0 26px 40px -18px rgba(40,28,15,.5)}
@media (max-width:900px){ .cs2{grid-template-columns:1fr} .cs2:nth-child(even) .cs2-head{order:0} .cs2-stage{padding:0 12% 14% 0} .dev-phone{width:34%} .cs2-strip{grid-template-columns:1fr 1fr} .cs2-strip figure{aspect-ratio:4 / 5 !important} .cs2-tip{display:none} }
/* ================= ABOUT v2: cinematic, raw, story-led ================= */
.ab2-open{position:relative; min-height:calc(100svh - 70px); display:flex; align-items:center; background:#0B3540; color:var(--paper); overflow:clip; isolation:isolate; padding:clamp(3rem,6vw,5rem) var(--gut)}
.ab2-open::before{content:""; position:absolute; z-index:-1; width:80vmax; height:80vmax; left:-30vmax; bottom:-45vmax; border-radius:50%; background:radial-gradient(closest-side, rgba(227,207,164,.16), transparent 70%)}
.ab2-open-grid{width:100%; max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:center}
.ab2-open-copy{grid-column:1 / span 7}
.ab2-open .crumb{color:rgba(243,237,226,.55)}
.ab2-open h1{font-size:clamp(3.4rem,1rem + 7.2vw,8.6rem); line-height:.9; letter-spacing:-.025em; margin:0 0 1.8rem; color:var(--paper)}
.ab2-open h1 .ln{display:block; overflow:hidden; padding-bottom:.08em}
.ab2-open h1 .ln > span{display:inline-block; transform:translateY(110%); animation:abRise 1.2s var(--ease) forwards}
.ab2-open h1 .ln:nth-child(2) > span{animation-delay:.14s}
.ab2-open h1 .ln:nth-child(3) > span{animation-delay:.28s}
.ab2-open h1 em{font-style:italic; color:#E3CFA4}
@keyframes abRise{to{transform:none}}
.ab2-sub{font-size:clamp(1.05rem,1rem + .4vw,1.3rem); color:rgba(243,237,226,.75); margin:0; opacity:0; animation:abFade 1s ease .9s forwards}
@keyframes abFade{to{opacity:1}}
.ab2-cue{margin:3rem 0 0; font-size:.64rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(243,237,226,.55); display:flex; align-items:center; gap:.8rem}
.ab2-cue::after{content:""; width:60px; height:1px; background:currentColor; transform-origin:left; animation:abCue 2.4s ease-in-out infinite}
@keyframes abCue{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0); transform-origin:right}}
.ab2-portrait{grid-column:8 / -1; margin:0; position:relative; aspect-ratio:4 / 5; overflow:hidden; clip-path:inset(100% 0 0 0); animation:abClip 1.5s cubic-bezier(.7,0,.2,1) .2s forwards}
.ab2-portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; transform:scale(1.18); animation:abZoom 3s var(--ease) .2s forwards}
@keyframes abClip{to{clip-path:inset(0 0 0 0)}}
@keyframes abZoom{to{transform:scale(1)}}
.ab2-portrait figcaption{position:absolute; right:1rem; bottom:.6rem; font-size:2.2rem; color:#FFF7EE; rotate:-6deg; text-shadow:0 2px 12px rgba(0,0,0,.3)}
.ab2-story{background:var(--paper); padding:clamp(4rem,8vw,7rem) var(--gut)}
.ab2-story-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem)}
.ab2-frame-wrap{grid-column:1 / span 6; position:relative}
.ab2-frame{position:sticky; top:12vh; height:76vh; overflow:hidden; background:var(--paper-2)}
.ab2-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1.1s ease, transform 2.4s var(--ease)}
.ab2-frame img.on{opacity:1; transform:scale(1)}
.ab2-count{position:absolute; left:1.2rem; bottom:1.1rem; z-index:2; font-size:.7rem; font-weight:600; letter-spacing:.2em; color:#FFF7EE; background:rgba(11,53,64,.55); backdrop-filter:blur(6px); padding:.5rem .8rem}
.ab2-count b{font-family:var(--serif); font-weight:400; font-size:1.3rem; letter-spacing:0; margin-right:.3rem}
.ab2-chs{grid-column:8 / -1}
.ab2-ch{min-height:76vh; display:flex; flex-direction:column; justify-content:center; opacity:.22; transition:opacity .8s ease}
.ab2-ch.on{opacity:1}
.ab2-k{font-size:.66rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 1.2rem; display:flex; gap:.9rem; align-items:center}
.ab2-k span{color:var(--rust)}
.ab2-k span::after{content:""; display:inline-block; width:2rem; height:1px; background:currentColor; vertical-align:middle; margin-left:.9rem; opacity:.6}
.ab2-ch h2{font-size:clamp(2.6rem,1.2rem + 3.6vw,4.8rem); line-height:.95; letter-spacing:-.02em; margin:0 0 1.4rem}
.ab2-ch p{font-size:clamp(1rem,.96rem + .25vw,1.15rem); color:var(--ink-soft); max-width:40ch; margin:0}
.ab2-nums{background:#0B3540; color:var(--paper); padding:clamp(4rem,8vw,7rem) var(--gut)}
.ab2-nums-row{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,4rem)}
.ab2-nums-row > div{border-top:1px solid rgba(227,207,164,.35); padding-top:1.4rem}
.ab2-nums .big{display:block; font-family:var(--serif); font-size:clamp(4.4rem,2rem + 7vw,9rem); line-height:.85; color:#E3CFA4}
.ab2-nums .cap{display:block; margin-top:1rem; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,237,226,.7)}
.ab2-wild{background:var(--paper-2); padding:clamp(4.5rem,9vw,8rem) var(--gut)}
.ab2-wild-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,6vw,6rem); align-items:center}
.ab2-mum{margin:0; justify-self:center; width:min(380px,100%); background:var(--card); padding:12px 12px 16px; rotate:-3deg; box-shadow:0 30px 50px -26px rgba(40,28,15,.5)}
.ab2-mum img{width:100%; aspect-ratio:1; object-fit:cover}
.ab2-mum figcaption{margin:.6rem .2rem 0; font-size:1.4rem; color:var(--ink)}
.ab2-quote{font-size:clamp(3rem,1.4rem + 4.4vw,6rem); line-height:.92; letter-spacing:-.02em; margin:0 0 1.6rem}
.ab2-quote em{font-style:italic; color:var(--rust)}
.ab2-wild p{font-size:clamp(1.02rem,.96rem + .3vw,1.2rem); color:var(--ink-soft); max-width:44ch; margin:0}
.ab2-sign{font-size:clamp(1.6rem,1rem + 1.2vw,2.2rem) !important; color:var(--rust) !important; rotate:-3deg; margin-top:1.4rem !important}
.ab2-cred{background:var(--paper); padding:clamp(4.5rem,9vw,8rem) var(--gut)}
.ab2-cred-grid{max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(2rem,6vw,6rem); align-items:start}
.ab2-degree{border-top:2px solid #E3CFA4; padding-top:1.6rem}
.ab2-degree h2{font-size:clamp(2.8rem,1.4rem + 3.6vw,5rem); line-height:.95; margin:0 0 1rem}
.ab2-degree h2 em{font-style:italic; color:var(--rust)}
.ab2-deg-sub{font-family:var(--serif); font-size:clamp(1.3rem,1rem + .8vw,1.8rem); line-height:1.25; color:var(--ink-soft); margin:0}
.ab2-path ul{list-style:none; margin:0 0 2rem; padding:0; border-top:1px solid var(--rule)}
.ab2-path li{display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--rule); align-items:baseline}
.ab2-path li b{font-family:var(--serif); font-weight:400; font-size:1.4rem}
.ab2-path li span{font-size:.82rem; color:var(--ink-soft); text-align:right}
.ab2-links{display:flex; flex-wrap:wrap; gap:1rem; align-items:center}
@media (max-width:900px){
  .ab2-open-grid,.ab2-story-grid{display:flex; flex-direction:column}
  .ab2-portrait{width:100%; margin-top:2.5rem}
  .ab2-frame{top:70px; height:46vh}
  .ab2-ch{min-height:60vh}
  .ab2-nums-row,.ab2-wild-grid,.ab2-cred-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .ab2-open h1 .ln > span,.ab2-sub,.ab2-portrait,.ab2-portrait img{animation:none; transform:none; opacity:1; clip-path:none} .ab2-ch{opacity:1} }
.hero{background-image:url(https://rosewildcreative.com/wp-content/uploads/2026/09/rw-hero-sea-poster.webp)}
.about-photo img{object-position:60% 45%}
.about-photo .hand{right:clamp(2rem,7vw,6rem); top:auto; bottom:clamp(1.5rem,4vw,3rem); max-width:12em; text-align:right}
/* ================= PACKAGES v2: pool hero + drag-and-drop builder ================= */
.pk2-hero{position:relative; min-height:calc(92svh - 70px); display:grid; place-items:center; padding:clamp(3rem,7vw,6rem) var(--gut); overflow:clip; isolation:isolate; background:#7FC6CC url(https://rosewildcreative.com/wp-content/uploads/2026/09/rw-pk-pool-poster.webp) center/cover}
.pk2-vid{position:absolute; inset:0; z-index:-2}
.pk2-vid video{width:100%; height:100%; object-fit:cover; display:block}
.pk2-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center, rgba(11,53,64,.18), rgba(11,53,64,.42))}
.pk2-glass{max-width:760px; text-align:center; padding:clamp(2.2rem,5vw,3.6rem) clamp(1.5rem,5vw,4rem); background:rgba(251,248,242,.72); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:0 40px 80px -40px rgba(8,40,48,.55), inset 0 0 0 1px rgba(255,255,255,.6); border-radius:4px}
.pk2-glass .crumb{justify-content:center; display:block}
.pk2-glass h1{font-size:clamp(3.6rem,1.4rem + 7vw,8rem); line-height:.88; letter-spacing:-.025em; margin:0 0 1.4rem}
.pk2-glass h1 .ln{display:block; overflow:hidden; padding-bottom:.06em}
.pk2-glass h1 .ln > span{display:inline-block; transform:translateY(110%); animation:abRise 1.2s var(--ease) forwards}
.pk2-glass h1 .ln:nth-child(2) > span{animation-delay:.15s}
.pk2-glass h1 em{font-style:italic; color:var(--rust)}
.pk2-sub{font-size:clamp(1rem,.95rem + .3vw,1.18rem); color:#3F3A35; max-width:44ch; margin:0 auto 1.4rem}
.pk2-offer{display:inline-flex; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:center; font-size:.85rem; color:#3F3A35; margin:0 0 1.8rem; padding:.55rem 1rem; border:1px solid rgba(29,27,25,.18); border-radius:999px; background:rgba(255,255,255,.5)}
.pk2-offer b{font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rust)}
.dd{background:var(--paper); padding:clamp(4.5rem,8vw,7rem) var(--gut); scroll-margin-top:70px}
.dd-wrap{max-width:var(--max); margin:0 auto}
.dd-head{max-width:760px; margin-bottom:clamp(2rem,4vw,3rem)}
.dd-head .h2 em{font-style:italic; color:var(--rust)}
.dd-presets{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1.4rem}
.dd-presets span{font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-right:.3rem}
.dd-presets button{font:600 .7rem/1 var(--sans); letter-spacing:.08em; padding:.7rem 1rem; border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--ink); cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .25s}
.dd-presets button:hover{background:var(--teal); color:var(--paper); border-color:var(--teal); transform:translateY(-2px)}
.dd-presets .dd-clear{background:transparent; border-style:dashed}
.dd-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
.dd-group{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-bottom:1.8rem}
.dd-g{grid-column:1 / -1; font-family:var(--serif); font-size:1.6rem; margin:0}
.dd-tile{position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"grip name add" "grip note add" "grip price add"; column-gap:.8rem; text-align:left; font:inherit; color:var(--ink); padding:1rem 1rem 1rem .8rem; background:var(--card); border:1px solid var(--rule); border-radius:10px; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s, background .3s}
.dd-tile:hover{transform:translateY(-3px); box-shadow:0 18px 30px -20px rgba(11,53,64,.45); border-color:rgba(46,127,135,.45)}
.dd-tile:focus-visible{outline:2px solid var(--rust); outline-offset:3px}
.dd-grip{grid-area:grip; display:grid; gap:3px; align-content:center; padding-right:.2rem; opacity:.35}
.dd-grip i{display:block; width:10px; height:2px; background:currentColor; border-radius:2px}
.dd-t-name{grid-area:name; font-weight:600; font-size:.95rem}
.dd-t-note{grid-area:note; font-size:.8rem; color:var(--ink-soft); margin:.15rem 0 .5rem}
.dd-t-price{grid-area:price; font-family:var(--serif); font-size:1.2rem}
.dd-t-add{grid-area:add; align-self:center; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--teal-2); color:var(--teal-2); font-size:1.1rem; transition:background .3s, color .3s, transform .3s}
.dd-tile:hover .dd-t-add{background:var(--teal-2); color:#fff; transform:rotate(90deg)}
.dd-tile.in{border-color:var(--teal-2); background:#F2F7F5}
.dd-tile.in .dd-t-add{background:var(--teal-2); color:#fff}
.dd-tile.lifting{opacity:.35}
.dd-tile.shake{animation:ddShake .4s}
@keyframes ddShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.dd-ghost{position:fixed; z-index:9999; pointer-events:none; margin:0; rotate:-3deg; scale:1.04; box-shadow:0 30px 50px -18px rgba(11,53,64,.55); border-color:var(--teal-2); cursor:grabbing}
body.dd-dragging{cursor:grabbing; user-select:none}
.dd-tray{position:sticky; top:90px; border-radius:14px; overflow:hidden; background:#0B3540 url(https://rosewildcreative.com/wp-content/uploads/2026/09/rw-pk-pool-poster.webp) center/cover; color:var(--paper); box-shadow:0 40px 70px -40px rgba(8,40,48,.7); transition:box-shadow .3s, transform .3s}
.dd-tray::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,53,64,.88), rgba(11,53,64,.95)); pointer-events:none}
.dd-tray.hot{transform:scale(1.015); box-shadow:0 0 0 3px #E3CFA4, 0 40px 70px -40px rgba(8,40,48,.7)}
.dd-tray-in{position:relative; padding:1.8rem 1.6rem 1.6rem}
.dd-tray-k{font-family:var(--serif); font-size:2rem; margin:0 0 1rem}
.dd-list{list-style:none; margin:0; padding:0}
.dd-row{display:grid; grid-template-columns:1fr auto auto auto; gap:.7rem; align-items:center; padding:.75rem 0; border-bottom:1px solid rgba(243,237,226,.14); font-size:.92rem}
.dd-row.new{animation:ddIn .6s var(--ease)}
@keyframes ddIn{from{opacity:0; transform:translateY(-10px) scale(.98); background:rgba(227,207,164,.2)}}
.dd-r-name small{display:block; font-size:.72rem; opacity:.6}
.dd-row.locked .dd-r-name{grid-column:1 / 4}
.dd-r-price{white-space:nowrap; opacity:.85}
.dd-step{display:inline-flex; align-items:center; gap:.45rem}
.dd-step button,.dd-x{width:24px; height:24px; border-radius:50%; border:1px solid rgba(243,237,226,.35); background:none; color:var(--paper); cursor:pointer; font-size:.9rem; line-height:1; padding:0}
.dd-step button:hover,.dd-x:hover{background:#E3CFA4; color:#0B3540; border-color:#E3CFA4}
.dd-step b{font-weight:600; min-width:1.2rem; text-align:center}
.dd-drop{margin:1rem 0; padding:1.1rem; border:1.5px dashed rgba(227,207,164,.5); border-radius:10px; text-align:center; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,237,226,.6); transition:all .3s}
.dd-drop.has{padding:.6rem; font-size:.62rem}
.dd-tray.hot .dd-drop{background:rgba(227,207,164,.12); color:#E3CFA4; border-color:#E3CFA4}
.dd-tot{display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:1rem 0 .4rem; border-top:1px solid rgba(243,237,226,.2)}
.dd-tot span{display:block; font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; opacity:.7}
.dd-tot strong{font-family:var(--serif); font-weight:400; font-size:clamp(2rem,1.4rem + 1.4vw,2.8rem); line-height:1.05; color:#E3CFA4}
.dd-hint{font-size:.85rem; margin:.4rem 0 0; padding:0; max-height:0; opacity:0; overflow:hidden; transition:all .4s}
.dd-hint.on{max-height:90px; opacity:1; padding:.8rem 1rem; background:rgba(227,207,164,.12); border-radius:8px; margin:.8rem 0 0}
.dd-hint b{color:#E3CFA4; font-weight:600}
.dd-send{width:100%; margin-top:1.2rem}
.dd-wa{display:block; text-align:center; margin-top:.9rem; font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--paper)}
.dd-fine{font-size:.74rem; opacity:.6; margin:1rem 0 0}
.dd-ripple{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid #E3CFA4; pointer-events:none; animation:ddRipple 1.1s ease-out forwards; z-index:2}
@keyframes ddRipple{to{width:340px; height:340px; margin:-170px 0 0 -170px; opacity:0; border-width:1px}}
.pk2-ready{background:var(--paper-2)}
.pk2-ready .h2 em{font-style:italic; color:var(--rust)}
.pk2-cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2.5rem}
.pk2-card{display:flex; flex-direction:column; background:var(--card); border-top:3px solid var(--c); padding:1.6rem 1.4rem; box-shadow:0 20px 40px -32px rgba(40,28,15,.4); transition:transform .4s var(--ease)}
.pk2-card:hover{transform:translateY(-6px)}
.pk2-card .k{font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--c); margin:0 0 .7rem}
.pk2-card h3{font-size:1.9rem; line-height:1; margin:0 0 .7rem}
.pk2-card .d{font-size:.88rem; color:var(--ink-soft); margin:0 0 1.4rem; flex:1}
.pk2-card .p{font-family:var(--serif); font-size:1.8rem; line-height:1; margin:0 0 1.2rem}
.pk2-card .p small{display:block; font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-2); margin-bottom:.4rem}
.pk2-card .p span{display:block; font-family:var(--sans); font-size:.76rem; color:var(--ink-soft); margin-top:.4rem}
@media (max-width:1000px){ .dd-grid{grid-template-columns:1fr} .dd-tray{position:relative; top:auto} .pk2-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .dd-group{grid-template-columns:1fr} .pk2-cards{grid-template-columns:1fr} .dd-tray-in{padding:1.4rem 1.2rem} }
@media (prefers-reduced-motion:reduce){ .pk2-glass h1 .ln > span{animation:none; transform:none} }
/* ===== hero v3 preview: quiet luxury (one arched portrait, sea, type) ===== */
.hero2{position:relative; min-height:calc(100svh - 70px); display:flex; align-items:center; padding:clamp(3rem,6vw,5rem) var(--gut) clamp(4rem,7vw,6rem); overflow:clip; isolation:isolate; background:#C9C3B6}
.hero2::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg, rgba(243,237,226,.86) 0%, rgba(243,237,226,.62) 38%, rgba(243,237,226,.08) 70%, rgba(243,237,226,0) 100%)}
.h2-grid{width:100%; max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(1rem,2vw,2rem); align-items:center}
.h2-copy{grid-column:1 / span 6}
.h2-k{font-size:.66rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 2rem; opacity:0; animation:abFade 1.2s ease .2s forwards}
.hero2 h1{font-size:clamp(4.2rem,1.4rem + 8vw,9.4rem); line-height:.86; letter-spacing:-.03em; margin:0 0 2rem; font-weight:400}
.hero2 h1 .ln{display:block; overflow:hidden; padding-bottom:.05em}
.hero2 h1 .ln > span{display:inline-block; transform:translateY(110%); animation:abRise 1.4s cubic-bezier(.2,.7,.1,1) .3s forwards}
.hero2 h1 .ln:nth-child(2) > span{animation-delay:.45s; font-style:italic}
.h2-sub{font-family:var(--serif); font-size:clamp(1.35rem,1rem + 1vw,1.9rem); line-height:1.25; color:#2E2A26; max-width:24ch; margin:0 0 1.6rem; opacity:0; animation:abFade 1.2s ease .9s forwards}
.h2-svc{display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; font-size:.64rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 2.4rem; opacity:0; animation:abFade 1.2s ease 1.1s forwards}
.h2-svc i{display:inline-block; width:4px; height:4px; border-radius:50%; background:#C7A96B}
.h2-btns{display:flex; flex-wrap:wrap; align-items:center; gap:1.8rem; opacity:0; animation:abFade 1.2s ease 1.3s forwards}
.h2-link{font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding-bottom:.35rem; border-bottom:1px solid currentColor}
.h2-link:hover{color:var(--rust)}
.h2-arch{grid-column:8 / span 4; margin:0; position:relative}
.h2-arch img{display:block; width:100%; aspect-ratio:3 / 4.2; object-fit:cover; object-position:50% 30%; border-radius:999px 999px 6px 6px; filter:sepia(.14) saturate(.82) contrast(1.02) brightness(1.03); box-shadow:0 50px 80px -50px rgba(20,35,40,.7); clip-path:inset(100% 0 0 0 round 999px 999px 6px 6px); animation:h2Arch 1.8s cubic-bezier(.7,0,.2,1) .4s forwards}
@keyframes h2Arch{to{clip-path:inset(0 0 0 0 round 999px 999px 6px 6px)}}
.h2-arch::before{content:""; position:absolute; inset:-14px; border:1px solid rgba(199,169,107,.7); border-radius:999px 999px 10px 10px; pointer-events:none; opacity:0; animation:abFade 1.4s ease 1.6s forwards}
.h2-arch figcaption{margin-top:1.4rem; font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:rgba(29,27,25,.7); text-align:center}
.h2-arch figcaption span{display:block; font-family:var(--serif); font-size:1.3rem; letter-spacing:0; text-transform:none; color:var(--ink); margin-bottom:.2rem}
.h2-scroll{position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); margin:0; font-size:.6rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:rgba(29,27,25,.55); display:flex; flex-direction:column; align-items:center; gap:.7rem}
.h2-scroll::after{content:""; width:1px; height:40px; background:currentColor; animation:h2Line 2.4s ease-in-out infinite; transform-origin:top}
@keyframes h2Line{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0); transform-origin:bottom}}
@media (max-width:900px){ .h2-grid{display:flex; flex-direction:column; align-items:flex-start} .h2-arch{width:min(320px,80%); align-self:center; margin-top:3rem} .hero2::after{background:linear-gradient(180deg, rgba(243,237,226,.85), rgba(243,237,226,.5) 55%, rgba(243,237,226,.15))} }
@media (prefers-reduced-motion:reduce){ .hero2 *{animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important} }

/* logo belt now sits on its own under the quiet hero */
.belt-sec{position:relative; background:var(--paper)}
.belt-sec .belt{margin:0 0 0 calc(50% - 50vw); background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.belt-sec .belt-lbl{background:var(--paper); box-shadow:18px 0 22px 4px var(--paper)}

/* RoseWild logo in header and footer */
.rw-logo{display:inline-flex; align-items:center; line-height:0}
.rw .rw-logo img{height:40px; width:auto}
.rw-foot .rw-logo img{height:34px}
@media (max-width:620px){ .rw .rw-logo img{height:32px} }
/* hero v3.1: readable type, RoseWild wordmark, typewriter line, live client-site browser */
.hero2::after{background:linear-gradient(90deg, rgba(243,237,226,.94) 0%, rgba(243,237,226,.86) 34%, rgba(243,237,226,.35) 60%, rgba(243,237,226,0) 82%)}
.hero2 h1{color:#14120F}
.hero2 h1 em{font-style:italic; color:var(--rust)}
.hero2 h1 .ln:nth-child(2) > span{font-style:normal; font-size:.62em; letter-spacing:.02em; color:#2E2A26}
.h2-k{color:#3F3A35}
.h2-sub{color:#14120F; max-width:26ch}
.h2-rot{font-style:italic; color:var(--rust); white-space:nowrap}
.h2-caret{display:inline-block; width:2px; height:.95em; margin-left:3px; vertical-align:-.12em; background:var(--rust); animation:h2Blink 1s steps(1) infinite}
@keyframes h2Blink{50%{opacity:0}}
.h2-svc{color:#3F3A35}
.h2-svc a{text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .35s ease, color .25s}
.h2-svc a:hover{color:var(--rust); background-size:100% 1px}
.h2-right{grid-column:8 / span 5; position:relative}
.h2-right .h2-arch{width:78%; margin-left:auto}
.h2-arch figcaption{color:#3F3A35}
.h2-browser{position:absolute; left:-4%; bottom:9%; width:54%; z-index:3; display:block; background:#fff; border-radius:10px; overflow:hidden; text-decoration:none; rotate:-4deg; box-shadow:0 34px 60px -30px rgba(12,40,48,.6), 0 0 0 1px rgba(0,0,0,.05); opacity:0; animation:abFade 1s ease 1.8s forwards; transition:transform .5s var(--ease), rotate .5s var(--ease)}
.h2-browser:hover{rotate:-1deg; transform:translateY(-6px)}
.h2-browser .bar{display:flex; align-items:center; gap:.35rem; padding:.5rem .7rem; background:#F1ECE3}
.h2-browser .bar i{width:8px; height:8px; border-radius:50%; background:#D9CFC0}
.h2-browser .bar i:first-child{background:#E8A294}
.h2-url{font-style:normal; font-size:.66rem; color:var(--ink-soft); margin-left:.5rem; background:#fff; padding:.2rem .6rem; border-radius:999px; flex:1; white-space:nowrap; overflow:hidden}
.h2-url::after{content:""; display:inline-block; width:1px; height:.8em; background:var(--ink-soft); margin-left:1px; vertical-align:-.1em; animation:h2Blink 1s steps(1) infinite}
.h2-browser .scr{position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; background:#EDE7DC}
.h2-browser .scr img{position:absolute; inset:0; width:100%; height:auto; opacity:0; transform:translateY(0); transition:opacity .8s ease}
.h2-browser .scr img.on{opacity:1; animation:h2Scroll 6s ease-in-out forwards}
@keyframes h2Scroll{0%,20%{transform:translateY(0)}100%{transform:translateY(-18%)}}
.h2-live{position:absolute; right:.6rem; bottom:.6rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(11,53,64,.8); padding:.35rem .6rem; border-radius:999px}
.h2-live b{width:6px; height:6px; border-radius:50%; background:#7ED3A4; box-shadow:0 0 0 0 rgba(126,211,164,.7); animation:h2Pulse 1.8s infinite}
@keyframes h2Pulse{70%{box-shadow:0 0 0 7px rgba(126,211,164,0)}100%{box-shadow:0 0 0 0 rgba(126,211,164,0)}}
.h2-rose{position:absolute; right:-2%; top:-6%; width:13%; z-index:2; opacity:0; rotate:12deg; animation:abFade 1.4s ease 2.2s forwards; pointer-events:none}
@media (max-width:900px){ .h2-right{width:100%; margin-top:3rem} .h2-right .h2-arch{width:72%; margin:0 auto} .h2-browser{width:58%; left:0; bottom:12%} .h2-rose{display:none} }

/* services: packages message merged into the water band */
.cta-k{font-size:.66rem !important; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#E3CFA4 !important; margin:0 auto 1.2rem !important}
.cta h2 em{font-style:italic; color:#E3CFA4}
.cta-offer{display:inline-flex !important; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:center; font-size:.85rem; padding:.55rem 1.1rem; border:1px solid rgba(227,207,164,.45); border-radius:999px; background:rgba(11,53,64,.35); margin:0 auto 2rem !important}
.cta-offer b{font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#E3CFA4}
/* work page: fixed alignment + premium reveal motion */
.cs2 > .cs2-head,.cs2 > .cs2-stage{grid-row:1}
.cs2 > .cs2-strip{grid-row:2; order:3}
.cs2-stage.solo{padding:0}
.cs2-stage.solo .dev-browser{rotate:0deg}
.rw-js .cs2 .cs2-head > *{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rw-js .cs2.in .cs2-head > *{opacity:1; transform:none}
.rw-js .cs2.in .cs2-head > *:nth-child(2){transition-delay:.08s}
.rw-js .cs2.in .cs2-head > *:nth-child(3){transition-delay:.16s}
.rw-js .cs2.in .cs2-head > *:nth-child(4){transition-delay:.24s}
.rw-js .cs2.in .cs2-head > *:nth-child(5){transition-delay:.32s}
.rw-js .cs2.in .cs2-head > *:nth-child(6){transition-delay:.4s}
.rw-js .cs2.in .cs2-head > *:nth-child(7){transition-delay:.48s}
.rw-js .cs2.in .cs2-head > *:nth-child(n+8){transition-delay:.56s}
.rw-js .cs2 .dev-browser{clip-path:inset(0 0 100% 0 round 12px); transform:translateY(40px); transition:clip-path 1.3s cubic-bezier(.7,0,.2,1), transform 1.3s var(--ease), box-shadow .6s}
.rw-js .cs2.in .dev-browser{clip-path:inset(0 0 0 0 round 12px); transform:none}
.rw-js .cs2.in .dev-browser:hover{transform:translateY(-6px)}
.dev-browser .scr img{transition:transform 1.6s var(--ease)}
.dev-browser:hover .scr img{transform:scale(1.035)}
.rw-js .cs2 .dev-phone{opacity:0; transform:translate(30px,70px) rotate(8deg); transition:opacity 1s ease .55s, transform 1.4s var(--ease) .55s}
.rw-js .cs2.in .dev-phone{opacity:1; transform:none}
.rw-js .cs2.in .dev-phone:hover{transform:translateY(-6px) rotate(-1deg); transition-delay:0s}
.rw-js .cs2 .cs2-strip figure{clip-path:inset(100% 0 0 0); transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.rw-js .cs2.in .cs2-strip figure{clip-path:inset(0 0 0 0)}
.rw-js .cs2.in .cs2-strip figure:nth-child(2){transition-delay:.12s}
.rw-js .cs2.in .cs2-strip figure:nth-child(3){transition-delay:.24s}
.rw-js .cs2.in .cs2-strip figure:nth-child(4){transition-delay:.36s}
.rw-js .cs2 .cs2-tip{opacity:0; transition:opacity 1s ease 1.2s}
.rw-js .cs2.in .cs2-tip{opacity:1}
.rw-js .cs2 .sv-film{opacity:0; transform:translateY(50px) rotate(-4deg); transition:opacity 1s ease, transform 1.4s var(--ease)}
.rw-js .cs2.in .sv-film{opacity:1; transform:rotate(-1deg)}
.cs2-chips li{transition:background .3s, color .3s, border-color .3s}
.cs2-chips li:hover{background:var(--teal); color:var(--paper); border-color:var(--teal)}
.wkh-col .polaroid{animation:wkFloat 7s ease-in-out infinite}
.wkh-col .w2{animation-delay:-2.3s; animation-duration:8s}
.wkh-col .w3{animation-delay:-4.6s; animation-duration:9s}
@keyframes wkFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.wk-hero h1 .w{display:inline-block}
@media (prefers-reduced-motion:reduce){ .rw-js .cs2 *{opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important} .wkh-col .polaroid{animation:none} }
/* contact v2: sea backdrop, zoomed arch portrait, live Saint Lucia clock, copy email, next steps */
.rw-sec.ct{background:#D8D2C6 url(https://rosewildcreative.com/wp-content/uploads/2026/09/rw-hero-sea-poster.webp) center/cover fixed; position:relative; isolation:isolate}
.rw-sec.ct::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(243,237,226,.95) 0%, rgba(243,237,226,.9) 48%, rgba(243,237,226,.55) 100%)}
.ct-me{display:flex; align-items:center; gap:clamp(1.2rem,3vw,2rem); margin:0 0 2.2rem}
.ct-arch{margin:0; flex:none; width:clamp(120px,14vw,170px); position:relative}
.ct-arch img{display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; object-position:52% 24%; transform:scale(1.55); transform-origin:52% 26%; border-radius:999px 999px 6px 6px; filter:sepia(.12) saturate(.85) contrast(1.02)}
.ct-arch{overflow:hidden; border-radius:999px 999px 6px 6px; box-shadow:0 26px 40px -24px rgba(12,40,48,.55)}
.ct-arch::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(199,169,107,.6)}
.ct-me-txt .hand{font-size:clamp(1.8rem,1.2rem + 1.4vw,2.4rem); color:var(--rust); margin:0 0 .4rem; rotate:-4deg}
.ct-sig{font-family:var(--serif); font-size:1.4rem; margin:0 0 .8rem}
.ct-sig span{display:block; font-family:var(--sans); font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:.2rem}
.ct-clock{display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-soft); margin:0; padding:.45rem .85rem; border:1px solid var(--rule); border-radius:999px; background:rgba(251,248,242,.7)}
.ct-clock strong{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.ct-clock .dot{width:7px; height:7px; border-radius:50%; background:#5FBF8C; animation:h2Pulse 1.8s infinite; box-shadow:0 0 0 0 rgba(95,191,140,.6)}
.ct-list li{grid-template-columns:7.5rem 1fr auto}
.ct-copybtn,.ct-chip{font:600 .6rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; padding:.5rem .75rem; border:1px solid var(--rule); border-radius:999px; background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; font-family:var(--sans) !important; font-size:.6rem !important; transition:background .3s, color .3s, border-color .3s}
.ct-copybtn:hover,.ct-chip:hover{background:var(--teal); color:var(--paper); border-color:var(--teal)}
.ct-copybtn.done{background:#5FBF8C; color:#fff; border-color:#5FBF8C}
.ct-list li:last-child{grid-template-columns:7.5rem 1fr}
.ct-next{margin-top:2.6rem; max-width:520px}
.ct-next-k{font-size:.66rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--rust); margin:0 0 1.2rem}
.ct-next ol{list-style:none; margin:0; padding:0; counter-reset:n; position:relative}
.ct-next ol::before{content:""; position:absolute; left:15px; top:14px; bottom:14px; width:1px; background:rgba(199,169,107,.6)}
.ct-next li{position:relative; counter-increment:n; padding:0 0 1.3rem 3rem}
.ct-next li::before{content:counter(n); position:absolute; left:0; top:0; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:1rem; background:var(--card); border:1px solid rgba(199,169,107,.7)}
.ct-next b{display:block; font-family:var(--serif); font-weight:400; font-size:1.3rem; line-height:1.2}
.ct-next span{font-size:.88rem; color:var(--ink-soft)}
.rw-js .ct-next li{opacity:0; transform:translateX(-16px); transition:opacity .8s ease, transform .8s var(--ease)}
.rw-js .ct-next.in li{opacity:1; transform:none}
.rw-js .ct-next.in li:nth-child(2){transition-delay:.15s}
.rw-js .ct-next.in li:nth-child(3){transition-delay:.3s}
.ct-card{animation:ctIn 1.2s var(--ease) .3s both}
@keyframes ctIn{from{opacity:0; transform:translateY(40px) rotate(2deg)}}
@media (max-width:900px){ .rw-sec.ct{background-attachment:scroll} .ct-list li{grid-template-columns:1fr auto} .ct-list li span{grid-column:1 / -1} }
@media (prefers-reduced-motion:reduce){ .rw-js .ct-next li{opacity:1; transform:none} .ct-card{animation:none} }
/* hero v3.2: balanced right side, browser clear of the portrait, quote + stats */
.hero2 h1 .ln:nth-child(2){font-size:.5em; line-height:1.05; margin-top:.35em}
.hero2 h1 .ln:nth-child(2) > span{font-size:1em}
.h2-sub{min-height:3.8em}
.h2-right{grid-column:7 / -1}
.h2-right .h2-arch{width:52%; margin:0 auto 0 12%}
.h2-browser{left:auto; right:-2%; bottom:2%; width:44%; rotate:4deg}
.h2-browser:hover{rotate:1deg}
.h2-quote{position:absolute; right:0; top:4%; width:40%; margin:0; padding:1.3rem 1.3rem 1.1rem; background:rgba(251,248,242,.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:4px; box-shadow:0 30px 50px -30px rgba(12,40,48,.5); rotate:-2deg; opacity:0; animation:abFade 1s ease 2.4s forwards, wkFloat 8s ease-in-out 3.4s infinite}
.h2-quote::before{content:"\201C"; position:absolute; left:.9rem; top:-.9rem; font-family:var(--serif); font-size:3.4rem; line-height:1; color:#C7A96B}
.h2-quote p{font-family:var(--serif); font-size:clamp(1rem,.9rem + .35vw,1.2rem); line-height:1.3; margin:0 0 .8rem; color:var(--ink)}
.h2-quote cite{display:flex; align-items:center; gap:.5rem; font-style:normal; font-size:.58rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.h2-quote cite img{height:26px; width:auto}
.h2-rose{right:auto; left:2%; top:auto; bottom:12%; width:9%; rotate:-10deg}
.h2-stats{display:flex; gap:clamp(1.4rem,3vw,2.6rem); margin:2.6rem 0 0; padding-top:1.4rem; border-top:1px solid rgba(29,27,25,.15); opacity:0; animation:abFade 1.2s ease 1.5s forwards}
.h2-stats div{margin:0}
.h2-stats dt{font-family:var(--serif); font-size:clamp(2rem,1.4rem + 1.4vw,2.8rem); line-height:1; color:var(--ink)}
.h2-stats dd{margin:.3rem 0 0; font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
@media (max-width:1100px){ .h2-quote{display:none} .h2-right .h2-arch{width:62%; margin:0 auto} }
@media (max-width:900px){ .h2-browser{right:0; width:56%} .h2-stats{flex-wrap:wrap} }

/* RoseWild monogram placements */
.ct-mono{display:block; height:92px; width:auto; margin:-.6rem auto 1.2rem}
.ct-card .ct-card-k,.ct-card .ct-card-t{text-align:center}
.cta-mono{display:block; height:clamp(80px,9vw,120px); width:auto; margin:0 auto 1.6rem; opacity:.95}
.rw-foot{position:relative}
.foot-mono{height:44px; width:auto; order:-1; margin-right:-1rem}
/* hero right side v4: one composed collage around the arch */
.h2-right{grid-column:7 / -1; position:relative; aspect-ratio:1 / 1.02; max-width:640px; justify-self:end; width:100%}
.h2-right .h2-arch{position:absolute; left:22%; top:4%; width:50%; margin:0; z-index:2}
.h2-print{position:absolute; left:0; top:24%; width:36%; margin:0; z-index:1; background:var(--card); padding:10px 10px 30px; rotate:-6deg; box-shadow:0 30px 50px -28px rgba(12,40,48,.55); opacity:0; animation:abFade 1.2s ease 1.2s forwards}
.h2-print img{display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; object-position:55% 50%; filter:sepia(.1) saturate(.9)}
.h2-print figcaption{position:absolute; left:0; right:0; bottom:.45rem; text-align:center; font-family:var(--hand); font-size:1.15rem; color:var(--ink-soft)}
.h2-quote{right:0; left:auto; top:0; width:40%; z-index:3; rotate:3deg}
.h2-browser{right:0; left:auto; bottom:8%; width:48%; z-index:4; rotate:-3deg}
.h2-browser:hover{rotate:0deg}
.h2-seal{position:absolute; left:8%; bottom:6%; z-index:4; width:clamp(92px,8.5vw,124px); aspect-ratio:1; border-radius:50%; background:#F6F1E7; display:grid; place-items:center; box-shadow:0 20px 34px -18px rgba(12,40,48,.55), inset 0 0 0 1px rgba(199,169,107,.6), inset 0 0 0 7px #F6F1E7, inset 0 0 0 8px rgba(199,169,107,.45); rotate:-8deg; opacity:0; animation:abFade 1.2s ease 2s forwards, sealTurn 24s linear 3.2s infinite}
.h2-seal img{height:74%; width:auto}
@keyframes sealTurn{0%{rotate:-8deg}50%{rotate:4deg}100%{rotate:-8deg}}
@media (max-width:1100px){ .h2-right{justify-self:center; max-width:560px} .h2-quote{display:block; width:44%} }
@media (max-width:900px){ .h2-right{margin-top:3rem} .h2-right .h2-arch{left:24%; width:52%} .h2-quote{width:46%} .h2-print{width:34%} }
@media (max-width:560px){ .h2-quote{display:none} .h2-print{top:30%} }

/* browser preview nudged clear of the portrait */
.h2-browser{right:-14%; bottom:2%; width:44%}
@media (max-width:1300px){ .h2-browser{right:-6%} }
@media (max-width:900px){ .h2-browser{right:-2%; width:46%} }

/* monogram sizes (beat the general .rw img rule) */
.rw .rw-foot .foot-mono{height:42px; width:auto; max-width:none; margin-right:-.6rem}
.rw .cta .cta-mono{height:clamp(72px,7vw,100px); width:auto}
.rw .ct-card .ct-mono{height:88px; width:auto}
.rw .h2-seal img{height:74%; width:auto}
/* hero: launch-offer swing tag in the gap between the quote and the browser */
.h2-tag{position:absolute; right:-3%; top:33%; z-index:3; width:clamp(150px,13vw,190px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; padding:1.7rem 1rem 1.1rem; text-decoration:none; color:#FFF7EE; background:var(--rust); clip-path:polygon(18% 0, 82% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); rotate:7deg; transform-origin:50% -30px; filter:drop-shadow(0 18px 22px rgba(12,40,48,.35)); opacity:0; animation:abFade 1.1s ease 2.6s forwards, tagSwing 5s ease-in-out 3.7s infinite; transition:filter .3s}
.h2-tag::before{content:""; position:absolute; inset:6px; border:1px dashed rgba(255,247,238,.45); clip-path:inherit; pointer-events:none}
.h2-tag-hole{width:12px; height:12px; border-radius:50%; background:#F3EDE2; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); margin:-.9rem 0 .5rem}
.h2-tag-k{font-size:.52rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; opacity:.85}
.h2-tag-t{font-family:var(--serif); font-size:clamp(1.7rem,1.2rem + 1vw,2.2rem); line-height:.95}
.h2-tag-t em{font-style:italic; color:#F6D9A8}
.h2-tag-s{font-family:var(--hand); font-size:1.05rem; line-height:1.1; opacity:.95}
.h2-tag-go{margin-top:.5rem; font-size:.55rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid rgba(255,247,238,.6); padding-bottom:.2rem}
.h2-tag:hover{filter:drop-shadow(0 24px 26px rgba(12,40,48,.45)); animation-play-state:running, paused}
@keyframes tagSwing{0%,100%{rotate:7deg}50%{rotate:2deg}}
.rw .h2-seal{height:clamp(92px,8.5vw,124px); width:clamp(92px,8.5vw,124px)}
@media (max-width:1300px){ .h2-tag{right:0} }
@media (max-width:900px){ .h2-tag{top:auto; bottom:36%; right:2%; width:140px} }
@media (prefers-reduced-motion:reduce){ .h2-tag{animation:none; opacity:1} }
/* ===== motion pass: Services + Work ===== */
.rw .btn-sun{color:#0B3540}
/* shared: polaroids deal in, then float; mouse parallax via --mx/--my */
.sv-fan .polaroid,.wkh-col .polaroid{transform:translate(calc(var(--mx,0) * var(--d,14px)), calc(var(--my,0) * var(--d,14px))); transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.sv-fan .f1,.wkh-col .w1{--d:10px}
.sv-fan .f2,.wkh-col .w2{--d:18px}
.sv-fan .f3,.wkh-col .w3{--d:26px}
.rw-js .sv-fan .polaroid,.rw-js .wkh-col .polaroid{animation:dealIn 1.2s cubic-bezier(.2,.8,.2,1) both, wkFloat 7s ease-in-out 1.6s infinite}
.rw-js .sv-fan .f1,.rw-js .wkh-col .w1{animation-delay:.3s, 1.6s}
.rw-js .sv-fan .f2,.rw-js .wkh-col .w2{animation-delay:.5s, 2.4s}
.rw-js .sv-fan .f3,.rw-js .wkh-col .w3{animation-delay:.7s, 3.1s}
@keyframes dealIn{from{opacity:0; translate:160px 90px; scale:.8}}
.sv-fan .blob{animation:blobIn 1.4s cubic-bezier(.7,0,.2,1) .1s both}
@keyframes blobIn{from{clip-path:inset(0 0 100% 0); opacity:.2}}
.rw-js .sv-index a{opacity:0; transform:translateY(12px); animation:chipIn .7s cubic-bezier(.2,.7,.1,1) forwards}
.rw-js .sv-index a:nth-child(1){animation-delay:1s}.rw-js .sv-index a:nth-child(2){animation-delay:1.08s}.rw-js .sv-index a:nth-child(3){animation-delay:1.16s}.rw-js .sv-index a:nth-child(4){animation-delay:1.24s}.rw-js .sv-index a:nth-child(5){animation-delay:1.32s}.rw-js .sv-index a:nth-child(6){animation-delay:1.4s}
@keyframes chipIn{to{opacity:1; transform:none}}
/* services spreads: image wipes in, sticker pops, copy cascades */
.rw-js .sv .sv-vis .big{clip-path:inset(0 100% 0 0); transition:clip-path 1.5s cubic-bezier(.7,0,.2,1)}
.rw-js .sv:nth-child(even) .sv-vis .big{clip-path:inset(0 0 0 100%)}
.rw-js .sv.in .sv-vis .big{clip-path:inset(0 0 0 0)}
.sv .sv-vis .big img{transition:transform 2.4s cubic-bezier(.2,.7,.1,1)}
.rw-js .sv .sv-vis .big img{transform:scale(1.18)}
.rw-js .sv.in .sv-vis .big img{transform:scale(1)}
.rw-js .sv.in .sv-vis:hover .big img{transform:scale(1.05)}
.rw-js .sv .stick{scale:0; transition:scale .7s cubic-bezier(.3,1.6,.5,1) .9s}
.rw-js .sv.in .stick{scale:1}
.rw-js .sv .sv-vis .polaroid,.rw-js .sv .sv-film{opacity:0; translate:0 60px; transition:opacity 1s ease .7s, translate 1.3s cubic-bezier(.2,.7,.1,1) .7s}
.rw-js .sv.in .sv-vis .polaroid,.rw-js .sv.in .sv-film{opacity:1; translate:0 0}
.rw-js .sv .sv-txt > *{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.1,1)}
.rw-js .sv.in .sv-txt > *{opacity:1; transform:none}
.rw-js .sv.in .sv-txt > *:nth-child(2){transition-delay:.1s}.rw-js .sv.in .sv-txt > *:nth-child(3){transition-delay:.2s}.rw-js .sv.in .sv-txt > *:nth-child(4){transition-delay:.3s}.rw-js .sv.in .sv-txt > *:nth-child(5){transition-delay:.45s}.rw-js .sv.in .sv-txt > *:nth-child(6){transition-delay:.55s}.rw-js .sv.in .sv-txt > *:nth-child(7){transition-delay:.65s}
.rw-js .sv .inc li{opacity:0; transform:translateX(-14px); transition:opacity .6s ease, transform .6s ease}
.rw-js .sv.in .inc li{opacity:1; transform:none}
.rw-js .sv.in .inc li:nth-child(1){transition-delay:.4s}.rw-js .sv.in .inc li:nth-child(2){transition-delay:.48s}.rw-js .sv.in .inc li:nth-child(3){transition-delay:.56s}.rw-js .sv.in .inc li:nth-child(4){transition-delay:.64s}
.inc li{transition:color .3s}
.inc li:hover{color:var(--rust)}
.ai-note{transition:border-color .4s, background .4s}
.sv:hover .ai-note{border-color:var(--teal-2)}
/* work hero: moving light on the water, counters, chips */
.wk-hero::before{inset:-12%; animation:caustic 26s linear infinite}
.rw-js .wkh-index a{opacity:0; transform:translateY(12px); animation:chipIn .7s cubic-bezier(.2,.7,.1,1) forwards}
.rw-js .wkh-index a:nth-child(1){animation-delay:1.2s}.rw-js .wkh-index a:nth-child(2){animation-delay:1.3s}.rw-js .wkh-index a:nth-child(3){animation-delay:1.4s}.rw-js .wkh-index a:nth-child(4){animation-delay:1.5s}.rw-js .wkh-index a:nth-child(5){animation-delay:1.6s}
@media (prefers-reduced-motion:reduce){ .rw-js .sv *,.rw-js .sv-fan *,.rw-js .wkh-col *,.rw-js .sv-index a,.rw-js .wkh-index a{animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; translate:none !important; scale:1 !important; transition:none !important} .wk-hero::before{animation:none} }
/* about opening: deep-sea video background + better portrait crop in an arch */
.ab2-open{background:#073A4E}
.ab2-vid{position:absolute; inset:0; z-index:-3; overflow:hidden}
.ab2-vid video{width:100%; height:100%; object-fit:cover; display:block}
.ab2-open::before{z-index:-2; background:linear-gradient(90deg, rgba(4,34,46,.82) 0%, rgba(4,34,46,.55) 45%, rgba(6,60,82,.25) 100%); width:auto; height:auto; left:0; right:0; top:0; bottom:0; border-radius:0}
.ab2-portrait{aspect-ratio:4 / 5.2; border-radius:999px 999px 8px 8px; box-shadow:0 50px 90px -40px rgba(0,10,20,.8); clip-path:inset(100% 0 0 0 round 999px 999px 8px 8px); animation:abClipArch 1.6s cubic-bezier(.7,0,.2,1) .2s forwards}
@keyframes abClipArch{to{clip-path:inset(0 0 0 0 round 999px 999px 8px 8px)}}
.ab2-portrait img{object-position:52% 62%; transform-origin:52% 58%; transform:scale(1.7); animation:abZoomTight 3s cubic-bezier(.2,.7,.1,1) .2s forwards}
@keyframes abZoomTight{to{transform:scale(1.42)}}
.ab2-portrait::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(227,207,164,.55); pointer-events:none}
.ab2-portrait figcaption{right:50%; transform:translateX(50%); bottom:1rem}
@media (prefers-reduced-motion:reduce){ .ab2-portrait{clip-path:none} .ab2-portrait img{transform:scale(1.42)} }
/* contact form: larger card, no tape over the monogram */
.ct-card .tape{display:none}
.ct-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr) !important}
.ct-card{padding:clamp(2.6rem,4vw,3.6rem) clamp(1.8rem,4vw,3.4rem) clamp(2.2rem,3vw,3rem) !important; rotate:0deg}
.rw .ct-card .ct-mono{height:110px; margin:0 auto 1.4rem}
.ct-card-k{font-size:.72rem !important}
.ct-card-t{font-size:clamp(2.4rem,1.6rem + 1.6vw,3.2rem) !important; margin-bottom:2.2rem !important}
.ct-card .ff-el-group{margin-bottom:1.8rem !important}
.ct-card .ff-el-input--label label{font-size:.74rem !important}
.ct-card .ff-el-form-control{font-size:1.12rem !important; padding:.95rem 0 !important}
.ct-card textarea.ff-el-form-control{min-height:190px}
.ct-card .ff-el-form-check{display:inline-flex !important; width:calc(50% - .5rem); margin:.3rem 0 !important}
.ct-card .ff-el-form-check label{font-size:1.05rem !important; display:flex; align-items:center; gap:.6rem}
.ct-card .ff-el-form-check input{width:18px; height:18px}
.ct-card .ff-btn-submit{font-size:.8rem !important; padding:1.35rem 2rem !important}
@media (max-width:900px){ .ct-grid{grid-template-columns:1fr !important} .ct-card .ff-el-form-check{width:100%} }
/* hero fixes: monogram sits fully inside its seal; launch tag rebuilt for legibility */
.rw .h2-seal{position:absolute; display:block; overflow:hidden}
.rw .h2-seal img{position:absolute; left:50%; top:50%; width:auto; height:70%; max-width:none; transform:translate(-50%,-50%); object-fit:contain}
.h2-seal{box-shadow:0 20px 34px -18px rgba(12,40,48,.5), inset 0 0 0 1px rgba(199,169,107,.7), inset 0 0 0 6px #F6F1E7, inset 0 0 0 7px rgba(199,169,107,.35)}
.rw .h2-tag{clip-path:none; border-radius:10px; right:-7%; top:37%; width:clamp(190px,15vw,220px); padding:1.4rem 1.2rem 1.2rem; gap:.45rem; rotate:3deg; animation:abFade 1s ease 2.4s forwards; background:#B84D2C; box-shadow:0 26px 40px -22px rgba(12,40,48,.6); filter:none}
.rw .h2-tag::before{inset:7px; clip-path:none; border-radius:6px; border:1px solid rgba(255,247,238,.35)}
.rw .h2-tag:hover{rotate:0deg; transform:translateY(-4px)}
.h2-tag{transition:rotate .5s cubic-bezier(.2,.7,.1,1), transform .5s cubic-bezier(.2,.7,.1,1)}
.h2-tag-hole{margin:-.5rem 0 .3rem; width:10px; height:10px}
.h2-tag-k{font-size:.6rem; letter-spacing:.22em; opacity:1; color:#F6D9A8}
.h2-tag-t{font-size:clamp(2rem,1.4rem + 1vw,2.5rem); line-height:1; color:#FFF7EE}
.h2-tag-t em{color:#FFF7EE}
.h2-tag-s{font-family:var(--sans); font-size:.8rem; line-height:1.35; opacity:.92}
.h2-tag-go{margin-top:.6rem; font-size:.6rem; letter-spacing:.18em; border:0; padding:.6rem .9rem; border-radius:999px; background:#FFF7EE; color:#8E3A1F}
@media (max-width:1300px){ .rw .h2-tag{right:-2%} }
@media (max-width:900px){ .rw .h2-tag{top:auto; bottom:34%; right:0; width:170px} }
.rw a.h2-tag{color:#FFF7EE}
/* ===== header v2: offer strip, centred logo with split menu, transparent over hero videos ===== */
:root{--hh:84px}
.rw-strip{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem var(--gut); background:#0B3540; color:#F3EDE2; font-size:.72rem; position:relative; z-index:51}
.rw-strip a{text-decoration:none}
.rw-strip-offer{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.rw-strip-offer b{font-size:.58rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#E3CFA4}
.rw-strip-offer span{opacity:.9}
.rw-strip-offer em{font-style:normal; font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid rgba(227,207,164,.6); padding-bottom:1px; transition:color .3s}
.rw-strip-offer:hover em{color:#E3CFA4}
.rw-strip-clock{margin:0; display:flex; align-items:center; gap:.5rem; font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.85}
.rw-strip-clock strong{font-weight:600; letter-spacing:.08em}
.rw-strip-clock i{width:6px; height:6px; border-radius:50%; background:#5FBF8C; animation:h2Pulse 1.8s infinite}
.rw-head2{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; height:var(--hh); padding:0 var(--gut); transition:background .45s ease, box-shadow .45s ease, height .45s ease}
.rw-head2 .rw-nav-l{justify-self:start}
.rw-head2 .rw-nav-r{justify-self:end}
.rw-head2 .rw-logo{justify-self:center; position:relative}
.rw .rw-head2 .rw-logo img{height:44px; transition:height .45s ease, opacity .4s ease}
.rw-head2 .lg-light{position:absolute; left:0; top:0; opacity:0}
.rw-head2.is-solid{height:66px}
.rw .rw-head2.is-solid .rw-logo img{height:36px}
.rw-nav a:not(.pill){position:relative; padding:.4rem 0}
.rw-nav a:not(.pill)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#C7A96B; transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.2,.7,.1,1)}
.rw-nav a:not(.pill):hover::after{transform:scaleX(1); transform-origin:left}
.rw-nav a[aria-current]::before{content:""; position:absolute; left:50%; bottom:-9px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--rust)}
.rw-nav a[aria-current]{color:var(--ink)}
.rw-overlay .rw-head2{margin-bottom:calc(-1 * var(--hh)); background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
.rw-overlay .rw-head2.is-solid{background:rgba(243,237,226,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--rule)}
.rw-overlay .hero2,.rw-overlay .pk2-hero,.rw-overlay .ab2-open{padding-top:calc(var(--hh) + clamp(2rem,5vw,4rem))}
.rw-overlay-dark .rw-head2:not(.is-solid) .rw-nav a{color:#F3EDE2}
.rw-overlay-dark .rw-head2:not(.is-solid) .pill{border-color:rgba(243,237,226,.7)}
.rw-overlay-dark .rw-head2:not(.is-solid) .pill:hover{background:#F3EDE2; color:#0B3540}
.rw-overlay-dark .rw-head2:not(.is-solid) .lg-light{opacity:1}
.rw-overlay-dark .rw-head2:not(.is-solid) .lg-dark{opacity:0}
.rw-overlay-dark .rw-head2:not(.is-solid) .rw-menu-btn{color:#F3EDE2; border-color:rgba(243,237,226,.7)}
@media (max-width:900px){
  :root{--hh:68px}
  .rw-head2{grid-template-columns:auto 1fr auto}
  .rw-head2 .rw-nav{display:none}
  .rw-head2 .rw-logo{justify-self:start}
  .rw-head2 .rw-menu-btn{grid-column:3}
  .rw .rw-head2 .rw-logo img{height:34px}
  .rw-strip{font-size:.66rem}
  .rw-strip-offer span{display:none}
}
@media (max-width:560px){ .rw-strip-clock{display:none} .rw-strip{justify-content:center} }

/* closing band: larger monogram */
.rw .cta .cta-mono{height:clamp(130px,12vw,180px); margin-bottom:1.8rem; filter:drop-shadow(0 6px 18px rgba(0,20,30,.35))}
/* contact alignment pass */
.rw-sec.ct{background-attachment:scroll !important; background-size:cover; background-position:center; padding:clamp(3.5rem,6vw,5.5rem) var(--gut) clamp(4rem,7vw,6rem) !important}
.rw-sec.ct::before{background:linear-gradient(90deg, rgba(243,237,226,.95) 0%, rgba(243,237,226,.88) 50%, rgba(243,237,226,.6) 100%)}
.ct-grid{align-items:start !important}
.ct-copy{padding-top:.4rem}
.ct-copy h1{font-size:clamp(3.2rem,1.2rem + 5vw,6rem)}
.ct-arch img{transform:scale(1.18); transform-origin:50% 30%; object-position:50% 28%}
.ct-me{align-items:center}
.ct-list,.ct-next{max-width:none}
.ct-next li:last-child{padding-bottom:0}
.ct-next ol::before{bottom:18px}
/* footer: monogram and wordmark sit together, menu centred */
.rw-foot{display:grid !important; grid-template-columns:auto auto 1fr auto; align-items:center; gap:1rem 1.6rem}
.rw .rw-foot .foot-mono{margin:0}
.rw-foot > nav{justify-self:center}
@media (max-width:900px){ .rw-foot{grid-template-columns:auto 1fr} .rw-foot > nav,.rw-foot .meta{grid-column:1 / -1; justify-self:start} }
/* services v3: price lists, founding note */
.pl{list-style:none; margin:1.2rem 0 .6rem; padding:0; border-top:1px solid var(--rule)}
.pl li{display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem; padding:.75rem 0; border-bottom:1px solid var(--rule); font-size:.95rem}
.pl li span{color:var(--ink)}
.pl li b{font-family:var(--serif); font-weight:400; font-size:1.2rem; white-space:nowrap; color:var(--ink)}
.pl li s{display:block; font-family:var(--sans); font-size:.7rem; color:var(--ink-soft); text-align:right; opacity:.75}
.pl-note{font-size:.82rem; color:var(--ink-soft); margin:0 0 1.2rem}
.pl-note a{color:var(--rust); text-underline-offset:.2em}
.sv-founding{display:block; max-width:48ch; margin:0 0 1.8rem; padding:.9rem 1.1rem; border-left:2px solid #C7A96B; background:rgba(251,248,242,.7); font-size:.9rem; color:var(--ink-soft)}
.sv-founding b{display:block; font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); margin-bottom:.3rem}
.sv-founding a{color:var(--rust)}
.rw-js .sv .pl li{opacity:0; transform:translateX(-14px); transition:opacity .6s ease, transform .6s ease}
.rw-js .sv.in .pl li{opacity:1; transform:none}
.rw-js .sv.in .pl li:nth-child(1){transition-delay:.35s}.rw-js .sv.in .pl li:nth-child(2){transition-delay:.45s}.rw-js .sv.in .pl li:nth-child(3){transition-delay:.55s}.rw-js .sv.in .pl li:nth-child(4){transition-delay:.65s}
.pl li{transition:background .3s}
.pl li:hover{background:rgba(199,169,107,.08)}
@media (prefers-reduced-motion:reduce){ .rw-js .sv .pl li{opacity:1; transform:none} }
/* packages v3 */
.dd-budget{font-size:.8rem; margin:.6rem 0 0; opacity:.85}
.dd-budget a{color:#E3CFA4}
.pk2-cards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem}
.pk2-card{position:relative}
.pk2-badge{position:absolute; top:1rem; right:1rem; font-size:.55rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#8E6B2E; background:rgba(199,169,107,.16); border:1px solid rgba(199,169,107,.5); padding:.35rem .6rem; border-radius:999px}
.pk2-team{max-width:60ch; color:var(--ink-soft); margin:1rem 0 0}
.pk2-budget{margin:2.4rem auto 0; max-width:70ch; text-align:center; font-size:.95rem; color:var(--ink-soft)}
.pk2-budget b{display:block; font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); margin-bottom:.4rem}
.pk2-budget a{color:var(--rust)}
.dd-list:empty + .dd-drop{padding:1.6rem}
@media (max-width:1000px){ .pk2-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .pk2-cards{grid-template-columns:1fr} }
/* ===== homepage first-impression pass ===== */
/* homepage header: no logo while the big RoseWild headline is on screen; it fades in once you scroll */
.home .rw-head2 .rw-logo{transition:opacity .5s ease, transform .5s ease}
.home .rw-head2:not(.is-solid) .rw-logo{opacity:0; transform:translateY(-8px); pointer-events:none}
/* readable offer strip */
.rw-strip{font-size:.82rem; padding:.6rem var(--gut)}
.rw-strip-offer b,.rw-strip-offer em,.rw-strip-clock{font-size:.68rem}
/* headline: Creative tucked under RoseWild as one lockup */
.hero2 h1{margin-bottom:1.6rem}
.hero2 h1 .ln:nth-child(2){margin-top:-.02em; line-height:1}
/* collage edited to four pieces, nothing over the face or name */
.h2-grid{align-items:center}
.h2-right{aspect-ratio:1 / .98; max-width:620px; align-self:center}
.h2-right .h2-arch{left:24%; top:7%; width:50%}
.h2-print{left:0; top:24%; width:33%; rotate:-5deg}
.rw .h2-quote{right:-2%; left:auto; top:0; width:40%; rotate:1.5deg; padding:1.4rem 1.5rem 1.2rem; background:rgba(251,248,242,.95); animation:abFade 1s ease 2.2s forwards}
.h2-quote p{font-size:clamp(1.12rem,1rem + .4vw,1.32rem); line-height:1.3}
.h2-quote cite{font-size:.62rem}
.rw .h2-browser{right:-9%; left:auto; bottom:4%; width:42%; rotate:-2deg}
@media (max-width:1400px){ .rw .h2-browser{right:-3%} .rw .h2-quote{right:0} }
@media (max-width:1100px){ .rw .h2-quote{display:block} }
@media (max-width:900px){ .rw .h2-browser{right:0; width:46%} .rw .h2-quote{width:46%} }
@media (max-width:560px){ .rw .h2-quote{display:none} }
/* ================= MOBILE PASS (phones and small tablets) ================= */
html,body{overflow-x:hidden}
img,video,svg{max-width:100%}
@media (max-width:900px){
  /* every multi-column layout becomes a single, centred column */
  .hero-grid,.about-grid,.svc-grid,.map-grid,.wk-grid,.kw-grid,.ph-grid,.sv,.pk-band .rw-wrap,.pk-wide,.pb-grid,.wkh-grid,.ab-ai-head,.ab-wild-grid,.cs2,.ab2-open-grid,.ab2-story-grid,.ab2-wild-grid,.ab2-cred-grid,.dd-grid,.h2-grid,.ct-grid{display:grid !important; grid-template-columns:minmax(0,1fr) !important; row-gap:2rem}
  .hero-grid > *,.about-grid > *,.svc-grid > *,.map-grid > *,.wk-grid > *,.kw-grid > *,.ph-grid > *,.sv > *,.wkh-grid > *,.cs2 > *,.ab2-open-grid > *,.ab2-story-grid > *,.dd-grid > *,.h2-grid > *,.ct-grid > *{grid-column:1 / -1 !important; grid-row:auto !important; order:0 !important; max-width:100%}
  .jr-track,.ab-pts,.ab-path,.ab2-nums-row,.svc-cards{grid-template-columns:minmax(0,1fr) !important}
  .rw-sec,.ab2-story,.ab2-wild,.ab2-cred,.ab2-nums,.dd,.wk-hero{padding-top:clamp(3rem,10vw,4rem) !important; padding-bottom:clamp(3rem,10vw,4rem) !important}
  /* type scales down cleanly */
  .hero2 h1{font-size:clamp(3.4rem,15vw,5rem)}
  .ab2-open h1,.wk-hero h1,.ph-copy h1,.ct-copy h1,.pk2-glass h1{font-size:clamp(2.8rem,12vw,4.2rem)}
  .h2,.ab2-ch h2,.cs2-head h2,.sv-txt h2,.ab2-quote,.ab2-degree h2{font-size:clamp(2.1rem,9vw,3rem)}
  .h2-sub{font-size:1.25rem; max-width:none}
  .h2-svc{gap:.5rem; font-size:.58rem}
  .h2-scroll{display:none}
  /* homepage collage: portrait centred, print and browser tucked either side */
  .h2-right{width:100%; max-width:440px; margin:1rem auto 0; aspect-ratio:1 / 1.12; justify-self:center}
  .h2-right .h2-arch{left:17%; width:66%; top:0}
  .h2-print{left:0; top:30%; width:34%}
  .rw .h2-browser{right:0; bottom:0; width:54%}
  .rw .h2-quote{display:none}
  .h2-stats{gap:1.4rem}
  .h2-stats dt{font-size:1.9rem}
  /* inner-page collages */
  .sv-fan,.wkh-col,.ph-col{width:100%; max-width:420px; margin:0 auto; min-height:0; aspect-ratio:1 / 1}
  .ab2-portrait{width:100%; max-width:380px; margin:0 auto}
  /* services spreads */
  .sv-vis{margin-bottom:.5rem}
  .sv-vis .polaroid{width:46%}
  .pl li{flex-direction:column; align-items:flex-start; gap:.2rem}
  .pl li s{text-align:left}
  /* work case studies */
  .cs2-stage{padding:0 10% 12% 0}
  .rw .dev-phone{width:34%; min-width:0}
  .cs2-btns .btn{flex:1 1 100%; text-align:center}
  .cs2-strip{grid-template-columns:1fr 1fr !important}
  /* about story: pinned photo becomes a banner above each chapter group */
  .ab2-frame{top:64px; height:42vh}
  .ab2-ch{min-height:62vh}
  .ab2-mum{width:min(300px,80%)}
  /* packages builder */
  .dd-group{grid-template-columns:minmax(0,1fr) !important}
  .dd-tray{position:relative; top:auto}
  .dd-row{grid-template-columns:1fr auto auto; row-gap:.3rem}
  .dd-row .dd-r-price{grid-column:1 / 2; opacity:.7}
  .pk2-glass{padding:2rem 1.3rem}
  /* contact */
  .ct-me{flex-direction:row; align-items:center}
  .ct-list li{grid-template-columns:1fr auto !important}
  .ct-list li > span{grid-column:1 / -1}
  .ct-card{padding:2rem 1.3rem !important}
  /* buttons stack neatly */
  .btns{flex-direction:column; align-items:stretch}
  .btns .btn{text-align:center}
  .h2-btns{flex-wrap:wrap; gap:1.2rem}
}
@media (max-width:560px){
  .rw-strip{padding:.5rem 1rem; font-size:.72rem}
  .rw-strip-offer{gap:.5rem; justify-content:center}
  .rw-strip-offer em{display:none}
  .cs2-strip{grid-template-columns:1fr !important}
  .cs2-strip figure{aspect-ratio:4 / 3 !important}
  .h2-stats{justify-content:space-between}
  .ab2-nums .big{font-size:4rem}
  .pk2-cards{grid-template-columns:1fr !important}
}
.rw-head2 .rw-menu-btn{display:none; justify-self:end}
@media (max-width:900px){ .rw-head2 .rw-menu-btn{display:inline-flex; align-items:center} .rw-overlay .hero2,.rw-overlay .pk2-hero,.rw-overlay .ab2-open{padding-top:calc(var(--hh) + 1.5rem)} }
/* work hero: headline rises in, rotating word, counters with a gold sweep */
.wk-hero h1 .ln{display:block; overflow:hidden; padding-bottom:.08em}
.wk-hero h1 .ln > span{display:inline-block; transform:translateY(110%); animation:abRise 1.3s cubic-bezier(.2,.7,.1,1) .2s forwards}
.wk-hero h1 .ln:nth-child(2) > span{animation-delay:.38s}
.wk-rot{white-space:nowrap}
.wk-caret{display:inline-block; width:3px; height:.8em; margin-left:.08em; vertical-align:-.05em; background:#E3CFA4; animation:h2Blink 1s steps(1) infinite}
.rw-js .wk-hero .body,.rw-js .wk-hero .btns{opacity:0; transform:translateY(18px); animation:chipIn .9s cubic-bezier(.2,.7,.1,1) forwards}
.rw-js .wk-hero .body{animation-delay:.7s}
.rw-js .wk-hero .btns{animation-delay:.85s}
.wkh-stats > div{position:relative}
.wkh-stats > div::after{content:""; position:absolute; left:0; bottom:-.7rem; height:1px; width:100%; background:#E3CFA4; transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.wkh-stats.run > div::after{transform:scaleX(1)}
.wkh-stats.run > div:nth-child(2)::after{transition-delay:.2s}
.wkh-stats.run > div:nth-child(3)::after{transition-delay:.4s}
.wkh-stats dt{transition:text-shadow .6s}
.wkh-stats > div:hover dt{text-shadow:0 0 24px rgba(227,207,164,.45)}
.wkh-index{flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){ .wk-hero h1 .ln > span,.rw-js .wk-hero .body,.rw-js .wk-hero .btns{animation:none; transform:none; opacity:1} .wk-caret{display:none} }
/* services: keep every spread on one row (fixes the Video spread dropping its photo below) */
.sv > .sv-vis,.sv > .sv-txt{grid-row:1}
#video .sv-vis{grid-column:7 / span 6}
#video .sv-txt{grid-column:1 / span 5}
/* cleaner price lists: standard price struck through inline, launch price bold beside it */
.pl li b{display:flex; align-items:baseline; gap:.55rem; white-space:nowrap; font-size:1.15rem}
.pl li s{display:inline; order:-1; font-size:.78rem; text-align:left; color:var(--ink-soft); opacity:.6}
.pl{border-top:0}
.pl li:first-child{border-top:1px solid var(--rule)}
.pl::before{content:"Launch price"; display:block; text-align:right; font-size:.56rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--rust); margin-bottom:.5rem}
@media (max-width:900px){ .pl::before{text-align:left} }
/* packages: the tray follows you down the page (overflow:hidden on the page was breaking sticky) */
html,body{overflow-x:clip !important}
.dd,.dd-wrap,.dd-grid,.dd .elementor-widget-container,.dd-grid > *{overflow:visible}
@media (min-width:1001px){
  .dd-grid{align-items:start}
  .dd-tray{position:sticky !important; top:84px; max-height:calc(100vh - 100px); overflow:auto; scrollbar-width:thin}
}
/* and it feels alive: drifting water light, a marching drop line, a gentle glow */
.dd-tray{background-size:160% auto; animation:trayWater 22s ease-in-out infinite alternate, trayGlow 6s ease-in-out infinite}
@keyframes trayWater{from{background-position:0% 30%} to{background-position:100% 70%}}
@keyframes trayGlow{0%,100%{box-shadow:0 40px 70px -40px rgba(8,40,48,.7), 0 0 0 0 rgba(227,207,164,0)} 50%{box-shadow:0 40px 70px -40px rgba(8,40,48,.7), 0 0 0 1px rgba(227,207,164,.25)}}
.dd-drop{border:0; background-image:linear-gradient(90deg,rgba(227,207,164,.6) 50%,transparent 0),linear-gradient(90deg,rgba(227,207,164,.6) 50%,transparent 0),linear-gradient(0deg,rgba(227,207,164,.6) 50%,transparent 0),linear-gradient(0deg,rgba(227,207,164,.6) 50%,transparent 0); background-repeat:repeat-x,repeat-x,repeat-y,repeat-y; background-size:14px 1.5px,14px 1.5px,1.5px 14px,1.5px 14px; background-position:0 0,0 100%,0 0,100% 0; animation:ddMarch 1.2s linear infinite}
@keyframes ddMarch{to{background-position:14px 0,-14px 100%,0 -14px,100% 14px}}
.dd-tray.hot .dd-drop{background-color:rgba(227,207,164,.12)}
.dd-tot strong{transition:transform .3s}
.dd-row.new ~ * .dd-tot strong,.dd-tray.bump .dd-tot strong{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){ .dd-tray,.dd-drop{animation:none} }

/* packages: breathing room under the section headings */
.pk2-ready .h2,.dd-head .h2{line-height:1.02; margin:0 0 1.6rem}
.pk2-team{margin:0 0 .4rem !important; max-width:62ch}
.dd-head .lede{margin-top:0}
/* packages cards: no orphan card, tidy closing note */
@media (min-width:1001px){
  .pk2-card:last-child{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto auto; align-items:center; column-gap:2.4rem; padding:1.8rem 2rem}
  .pk2-card:last-child .k{grid-column:1; grid-row:1; margin:0 0 .4rem}
  .pk2-card:last-child h3{grid-column:1; grid-row:2; margin:0}
  .pk2-card:last-child .d{grid-column:2; grid-row:1 / span 2; margin:0}
  .pk2-card:last-child .p{grid-column:3; grid-row:1 / span 2; margin:0; white-space:nowrap}
  .pk2-card:last-child .tl{grid-column:4; grid-row:1 / span 2; white-space:nowrap}
  .pk2-card:last-child .pk2-badge{top:.8rem; right:1rem}
}
@media (min-width:621px) and (max-width:1000px){ .pk2-card:last-child{grid-column:1 / -1} }
.pk2-budget{max-width:none; margin:3rem 0 0; padding:1.6rem 2rem; text-align:center; background:var(--card); border:1px solid rgba(199,169,107,.45); border-radius:4px; font-size:1rem}
.pk2-budget b{margin-bottom:.5rem}
/* services closing band: one clear call to action */
.cta-offer{border:0 !important; background:none !important; padding:0 !important; flex-direction:column; gap:.35rem !important; margin:0 auto 2.2rem !important; font-size:.95rem; opacity:.9}
.cta-pk{display:flex; flex-direction:column; align-items:center; gap:1rem}
.rw .btn-champ{background:#E3CFA4; border:1px solid #E3CFA4; color:#0B3540; padding:1.15rem 2.6rem; font-size:.74rem; letter-spacing:.2em; transition:background .3s, transform .3s, box-shadow .3s}
.rw .btn-champ:hover{background:#F1E3C4; transform:translateY(-2px); box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}
.rw .cta-link{font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#F3EDE2; text-decoration:none; border-bottom:1px solid rgba(243,237,226,.45); padding-bottom:.25rem; transition:color .3s, border-color .3s}
.rw .cta-link:hover{color:#E3CFA4; border-color:#E3CFA4}
.cta-budget{margin:.6rem 0 0 !important; font-size:.85rem; opacity:.75}
.rw .cta-budget a{color:#E3CFA4}

/* video spread: the film is the hero, the drone photo is the small print */
#video .sv-film{rotate:1deg}
#video .sv-vis .film-pol{width:38%; right:auto; left:-6%; bottom:-16%; rotate:-6deg}
#video .sv-vis .film-pol img{aspect-ratio:4 / 3; object-fit:cover}
.rw-js #video.sv .sv-film{opacity:0; translate:0 50px; transition:opacity 1s ease, translate 1.3s cubic-bezier(.2,.7,.1,1)}
.rw-js #video.sv.in .sv-film{opacity:1; translate:0 0}
@media (max-width:900px){ #video .sv-vis .film-pol{position:relative; left:auto; bottom:auto; width:55%; margin:-1.5rem 0 0 auto; display:block} }

/* ===== mobile hero collage v2 (Oct 2026): name under the portrait stays readable, client-site browser sits below it ===== */
@media (max-width:900px){
  .h2-right{aspect-ratio:auto !important; max-width:420px; padding-bottom:.5rem}
  .h2-right .h2-arch{position:relative; left:auto; top:auto; width:62%; margin:0 auto}
  .h2-print{left:-4%; top:16%; width:33%; padding:7px 7px 24px}
  .h2-print figcaption{text-align:left; padding-left:.55rem; bottom:.3rem; font-size:1rem}
  .rw .h2-browser{position:relative; right:auto; left:auto; bottom:auto; width:88%; margin:1.8rem auto 0; rotate:-1.5deg}
  .rw .h2-browser:hover{rotate:0deg}
  .h2-live{font-size:.5rem; padding:.28rem .5rem; right:.45rem; bottom:.45rem}
}
/* ================= BRAND BOOK ================= */
.rw-bb .rw-strip,.rw-bb .rw-head2,.rw-bb .cta,.rw-bb .rw-foot,.rw-bb .rw-skip{display:none !important}
.rw-bb{background:#F3EDE2}
.bb{scroll-snap-type:y mandatory}
.bb-pg{position:relative; min-height:100vh; padding:clamp(3rem,6vw,6rem) clamp(1.5rem,7vw,7rem); scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; gap:2rem; background:#F3EDE2; color:#1D1B19; overflow:hidden; border-bottom:1px solid rgba(29,27,25,.08)}
.bb h2{font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,1.4rem + 3.4vw,4.8rem); line-height:1; letter-spacing:-.02em; margin:0; max-width:18ch}
.bb h2 em{font-style:italic; color:#BF522F}
.bb p{font-size:clamp(1rem,.95rem + .3vw,1.2rem); line-height:1.6; color:#5B5650; max-width:52ch; margin:0}
.bb-k{font-size:.7rem !important; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#BF522F !important}
.bb-note{font-size:.95rem !important}
.bb-hand{font-family:var(--hand); font-size:clamp(1.6rem,1rem + 1.5vw,2.4rem) !important; color:#BF522F !important; rotate:-3deg}
/* cover */
.bb-cover{align-items:center; text-align:center; background:#0E3B45 var(--img) center/cover; color:#F3EDE2}
.bb-cover::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(14,59,69,.55), rgba(8,36,44,.92))}
.bb-cover > *{position:relative}
.bb .bb-cover-logo{height:min(52vh,420px); width:auto}
.bb-cover .bb-k{color:#E3CFA4 !important}
.bb-cover-n{font-family:var(--serif); font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem) !important; color:#F3EDE2 !important; max-width:none !important}
.bb-cover-n em{color:#E3CFA4}
.bb-pdf{position:absolute !important; right:2rem; bottom:2rem; font:600 .64rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:#0E3B45; background:#E3CFA4; border:0; border-radius:999px; padding:.8rem 1.2rem; cursor:pointer}
/* split */
.bb-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.bb-txt{display:flex; flex-direction:column; gap:1.4rem}
.bb-img img{width:100%; height:78vh; object-fit:cover; border-radius:6px}
.bb-vals{list-style:none; margin:.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; border-top:1px solid rgba(29,27,25,.12); padding-top:1.2rem}
.bb-vals li{font-size:.9rem; color:#5B5650}
.bb-vals b{display:block; font-family:var(--serif); font-weight:400; font-size:1.6rem; color:#1D1B19}
/* logos */
.bb-duo{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.bb-tile{position:relative; display:grid; place-items:center; height:62vh; border-radius:6px}
.bb-tile.paper{background:#FBF8F2; box-shadow:inset 0 0 0 1px rgba(29,27,25,.08)}
.bb-tile.teal{background:#0E3B45}
.bb .bb-tile img{max-height:70%; width:auto}
.bb-tile span{position:absolute; left:1.2rem; bottom:1rem; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#5B5650}
.bb-tile.teal span{color:#E3CFA4}
.bb-grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
.bb-grid5 figure{margin:0; display:flex; flex-direction:column; border-radius:6px; overflow:hidden}
.bb-grid5 figure > img{display:block; height:38vh; width:100%; object-fit:contain; padding:2.2rem; box-sizing:border-box}
.bb-grid5 figure.paper > img{background:#FBF8F2}
.bb-grid5 figure.teal > img{background:#0E3B45}
.bb-grid5 figure.icon > img{padding:3.4rem; background:#E9E2D4}
.bb-grid5 figcaption{padding:.9rem 0; font-family:var(--serif); font-size:1.3rem}
.bb-grid5 figcaption span{display:block; font-family:var(--sans); font-size:.8rem; color:#5B5650}
/* in use */
.bb-mocks{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:1.4rem; align-items:center}
.bb-avatar{display:flex; flex-direction:column; align-items:center; gap:.5rem; background:#FBF8F2; padding:2.4rem 1.4rem; border-radius:6px; text-align:center}
.bb .bb-avatar img{width:130px; height:130px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px #F3EDE2, 0 0 0 4px #C7A96B}
.bb-avatar b{margin-top:.6rem; font-weight:600}
.bb-avatar span{font-size:.85rem; color:#5B5650}
.bb-card{aspect-ratio:1.75; background:#0E3B45; border-radius:8px; padding:2rem; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 40px 60px -36px rgba(8,36,44,.6); rotate:-2deg}
.bb .bb-card img{width:52%; height:auto}
.bb-card p{color:#F3EDE2 !important; font-family:var(--serif); font-size:1.3rem !important}
.bb-card p span{display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:#E3CFA4}
.bb .bb-card-c{font-family:var(--sans) !important; font-size:.8rem !important; color:rgba(243,237,226,.75) !important}
.bb-tab{display:flex; align-items:center; gap:.7rem; background:#FBF8F2; border-radius:12px 12px 0 0; padding:.9rem 1.2rem; box-shadow:0 20px 40px -30px rgba(0,0,0,.4)}
.bb-tab .dots{display:flex; gap:.35rem; margin-right:.6rem}
.bb-tab .dots i{width:10px; height:10px; border-radius:50%; background:#D9CFC0}
.bb .bb-tab img{width:22px; height:22px}
.bb-tab b{font-weight:500; font-size:.9rem}
/* colour */
.bb-sws{display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem}
.bb-sws.sm{grid-template-columns:repeat(4,1fr)}
.bb-sw{display:flex; flex-direction:column; justify-content:flex-end; gap:.15rem; height:30vh; padding:1.2rem; border-radius:6px; color:#F3EDE2; box-shadow:inset 0 0 0 1px rgba(29,27,25,.08)}
.bb-sws.sm .bb-sw{height:16vh}
.bb-sw.lt{color:#1D1B19}
.bb-sw b{font-family:var(--serif); font-weight:400; font-size:1.5rem}
.bb-sw span{font-size:.78rem; letter-spacing:.06em}
.bb-sw em{font-style:normal; font-size:.72rem; opacity:.75}
.bb-ratio{display:flex; height:22px; border-radius:999px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(29,27,25,.1)}
/* type */
.bb-types{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
.bb-types > div{display:flex; flex-direction:column; gap:.4rem; border-top:1px solid rgba(29,27,25,.15); padding-top:1.4rem}
.bb-aa{font-size:clamp(7rem,4rem + 8vw,12rem) !important; line-height:.9; color:#0E3B45 !important}
.bb-aa.serif{font-family:var(--serif)}
.bb-aa.sans{font-family:var(--sans); font-weight:300}
.bb-aa.hand{font-family:var(--hand); color:#BF522F !important}
.bb-types b{font-size:1.2rem; font-weight:600}
.bb-types span{font-size:.85rem; color:#5B5650; margin-bottom:1rem}
.bb-s1{font-family:var(--serif); font-size:2.6rem !important; color:#1D1B19 !important; line-height:1}
.bb-s1 em{color:#BF522F}
.bb-s2{font-size:1.1rem !important; color:#1D1B19 !important}
.bb-s3{font-size:.7rem !important; font-weight:600; letter-spacing:.26em}
.bb-s4{font-family:var(--hand); font-size:2.4rem !important; color:#1D1B19 !important}
/* imagery */
.bb-imagery{gap:1.4rem}
.bb-mosaic{display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:38vh 38vh; gap:.8rem}
.bb-mosaic img{width:100%; height:100%; object-fit:cover; border-radius:6px}
.bb-mosaic .a{grid-row:1 / span 2}
.bb-mosaic .e{display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:1.6rem; background:#0E3B45; border-radius:6px}
.bb-mosaic .e h2{color:#F3EDE2; font-size:clamp(2rem,1.2rem + 1.6vw,3rem)}
.bb-mosaic .e h2 em{color:#E3CFA4}
.bb-mosaic .e p{color:rgba(243,237,226,.8); font-size:.95rem}
/* bio */
.bb-bio{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); align-items:center; background:#EBE3D5}
.bb-arch{margin:0; justify-self:center; width:min(380px,100%)}
.bb-arch img{width:100%; aspect-ratio:3 / 4; object-fit:cover; object-position:50% 25%; border-radius:999px 999px 8px 8px; box-shadow:0 0 0 10px #F3EDE2, 0 0 0 11px #C7A96B, 0 40px 60px -30px rgba(8,36,44,.5)}
/* back */
.bb-back{align-items:center; text-align:center; background:#0E3B45}
.bb .bb-back img{height:min(40vh,300px); width:auto}
.bb-back p{color:rgba(243,237,226,.8) !important; max-width:none !important}
.bb-back .bb-hand{color:#E3CFA4 !important}
@media (max-width:900px){ .bb-split,.bb-bio,.bb-duo,.bb-mocks,.bb-types{grid-template-columns:1fr} .bb-grid5,.bb-sws,.bb-sws.sm{grid-template-columns:repeat(2,1fr)} .bb-mosaic{grid-template-columns:1fr 1fr; grid-template-rows:auto} .bb-mosaic img{height:30vh} .bb-mosaic .a{grid-row:auto; grid-column:1 / -1} .bb-mosaic .e{grid-column:1 / -1} .bb-img img,.bb-tile{height:44vh} .bb{scroll-snap-type:none} }
@media print{ @page{size:A4 landscape; margin:0} .bb-pg{min-height:100vh; page-break-after:always; break-after:page; -webkit-print-color-adjust:exact; print-color-adjust:exact} .bb-pdf{display:none} }