/* Rangrayze / expressive studio edition */
:root { --deep:#102f2a; --acid:#dfbc77; --warm:#c56b49; }
.header { height:96px; padding-inline:5%; }
.header .brand-logo { height:83px; }
.announcement { background:var(--deep); letter-spacing:.12em; }
.header::after { left:5%; width:96px; }
nav { gap:28px; }
.hero { background:var(--deep); color:var(--paper); max-width:none; padding:70px 5% 65px; min-height:710px; grid-template-columns:1.05fr 1fr; gap:6%; overflow:hidden; position:relative; }
.hero-copy { position:relative; z-index:1; }
.hero .eyebrow { color:#d5d9ca; font-size:11px; letter-spacing:.14em; display:flex; gap:14px; align-items:center; }
.tiny-star { color:var(--acid); font-size:27px; line-height:1; }
.hero h1 { font-size:clamp(70px,7.7vw,118px); line-height:.97; letter-spacing:-.045em; }
.hero h1 em { color:#dba17c; font-size:.91em; }
.feeling-word { position:relative; }
.hero-period { color:var(--acid); }
.hero-description { color:#cad2c7; max-width:420px; font-size:15px; line-height:1.8; margin:29px 0; }
.hero .button { background:var(--acid); color:var(--deep); border-color:var(--acid); min-height:56px; padding-inline:29px; font-weight:600; }
.hero .button:hover { background:#efd5a0; box-shadow:0 10px 28px #0003; }
.hero .text-link { color:var(--paper); border-color:#8ea095; }
.hero .text-link:hover { color:var(--acid); }
.hero-footnote { margin-top:39px; color:#b1c1b5; font-size:11px; line-height:1.9; }
.hero-footnote .fine-rule { background:#c78c63; width:35px; }
.paint-experience { padding:0; align-self:center; min-width:0; transform:rotate(2deg); }
.canvas-topline { display:flex; justify-content:space-between; gap:12px; color:#c4cdbf; font-size:10px; letter-spacing:.13em; margin-bottom:14px; }
.paint-stage { position:relative; width:100%; aspect-ratio:1.05; background:#eee8d9; overflow:hidden; box-shadow:14px 25px 50px #0003; isolation:isolate; }
#paint-canvas { display:block; width:100%; height:100%; cursor:crosshair; touch-action:pan-y; }
.canvas-word { position:absolute; left:8%; top:17%; font:clamp(58px,5.2vw,86px)/.92 var(--serif); letter-spacing:-.04em; color:#fff5df; mix-blend-mode:difference; pointer-events:none; }
.canvas-word em { font-size:.64em; line-height:1.3; }
.canvas-caption { position:absolute; bottom:23px; left:7%; font-size:10px; letter-spacing:.18em; pointer-events:none; color:#263f34; background:#eee8d9da; padding:5px 8px; }
.canvas-corner { position:absolute; right:6%; bottom:20px; font:40px var(--serif); color:var(--deep); pointer-events:none; }
.paint-toolbar { display:flex; align-items:center; gap:18px; margin-top:22px; }
.paint-colors { display:flex; align-items:center; gap:10px; }
.paint-color { width:24px; height:24px; border-radius:50%; padding:0; background:var(--swatch); position:relative; border:1px solid #ffffff30; transition:transform .25s; }
.paint-color::after { content:''; position:absolute; inset:-5px; border:1px solid transparent; border-radius:50%; }
.paint-color.selected::after { border-color:#e1d6b9; }
.paint-color:hover { transform:scale(1.15); }
.paint-blast { margin-left:auto; color:#f3ead8; border-bottom:1px solid #81958b; padding:4px 0; white-space:nowrap; font-size:13px; display:flex; gap:12px; align-items:center; }
.paint-blast span { color:var(--acid); font-size:22px; }
.paint-reset { color:#ced8c9; font-size:26px; padding:2px; min-width:29px; }
.paint-hint { font-size:11px; color:#aebfb3; margin-top:15px; letter-spacing:.03em; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.studio-strip { background:var(--acid); color:var(--deep); border:none; padding:24px 4%; font-size:15px; gap:4%; }
.studio-strip span:nth-child(even) { color:var(--deep); font-size:19px; }
.section { padding:100px 6%; }
.section-heading { margin-bottom:48px; }
.section-heading h2 { font-size:clamp(56px,6.2vw,90px); }
.section-heading h2 em { color:var(--brand-teal); }
.section-heading>p { border-left:1px solid var(--brand-copper); padding-left:24px; margin-bottom:10px; font-size:14px; }
.collection-controls { padding-bottom:9px; }
.filters { gap:28px; }
.filters button { font-size:14px; }
.filters button.active { color:var(--paper); background:var(--deep); padding:10px 18px; border:none; border-radius:30px; }
.filters button:not(.active) { padding:10px 0; border:none; }
.preview-note { margin:20px 0 32px; }
.artwork-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:65px 7%; align-items:start; }
.art-card:nth-child(even) { margin-top:90px; }
.art-media { aspect-ratio:1/1.03; padding:clamp(25px,4vw,65px); background:#e2e7dd; }
.art-card:nth-child(3n+2) .art-media { background:#e4cec0; }
.art-card:nth-child(3n) .art-media { background:#cbded8; }
.work-placeholder { position:relative; background:#f8f6ecc9; border:1px solid #bac2b2; box-shadow:9px 11px 1px #1b382919,0 12px 25px #1b38291c; padding:25px; }
.work-placeholder .work-index { font-size:clamp(80px,10vw,145px); letter-spacing:-.075em; }
.work-placeholder span:first-child { letter-spacing:.16em; font-size:10px; }
.work-placeholder span:last-child { font-size:12px; }
.card-caption { padding-top:23px; }
.card-title { font-size:33px; margin:8px 0; }
.card-category { font-size:11px; letter-spacing:.16em; }
.card-price { font-size:13px; }
.card-arrow { min-width:46px; height:46px; font-size:21px; background:var(--paper); }
.story { background:#e9eade; gap:8%; border:none; }
.studio-image { height:540px; padding:0; border:none; background:#d5dcce; transform:rotate(-3deg); box-shadow:15px 20px 0 #bec9b830; }
.studio-placeholder { padding:40px; border-color:#b9c4af; background:#dce3d4; }
.studio-placeholder-title { font-size:clamp(55px,5vw,78px); }
.story-copy h2 { font-size:clamp(43px,4.4vw,64px); }
.story-copy>p:not(.eyebrow) { max-width:440px; }
.signature { font-size:45px; }
.commissions { background:var(--deep); gap:10%; position:relative; }
.commission-intro h2 { font-size:clamp(65px,8vw,116px); line-height:.98; }
.steps { border-top:1px solid #688175; padding-top:30px; }
.steps li { padding:30px 0; gap:28px; }
.step-number { font-size:40px; }
.steps h3 { font-size:33px; }
.commissions .button.light { padding:16px 25px; }
.center-heading h2 { font-size:clamp(48px,5.6vw,80px); }
.quote-card { background:#f0f0e7; border:none; border-top:2px solid var(--brand-gold); padding:35px; }
.quote-card .quote-placeholder { font-size:25px; }
.quote-mark { font-size:85px; }
.details-section { padding-top:60px; }
.details-section h2 { font-size:clamp(45px,4vw,63px); }
.closing { background:var(--acid); padding:88px 5%; position:relative; overflow:hidden; }
.closing h2 { font-size:clamp(58px,8vw,118px); }
.closing .eyebrow { letter-spacing:.2em; }
footer { padding:35px 6% 22px; }
.footer-top .brand-logo { height:122px; }
.footer-bottom { margin-top:25px; }
.enquiry-content .button { border-radius:0; }

@media(min-width:1600px){.hero{padding-inline:max(6%,calc((100% - 1440px)/2))}}
@media(max-width:1100px){
 .hero{gap:5%;padding:54px 5%;min-height:640px}.hero h1{font-size:80px}.hero .eyebrow{font-size:10px;letter-spacing:.06em}.canvas-word{font-size:60px}.paint-toolbar{gap:12px}.paint-colors{gap:8px}.paint-color{width:21px;height:21px}.paint-blast{font-size:12px}.hero-actions{gap:20px}.hero-description{font-size:14px}.canvas-caption{font-size:9px;letter-spacing:.08em}.story{gap:7%}.studio-image{height:440px}.section{padding:75px 5%}.header nav{gap:20px;font-size:13px}.card-title{font-size:29px}
}
@media(max-width:760px){
 .header{height:80px;padding-inline:6%}.header .brand-logo{height:70px}.header::after{left:6%}.header nav{top:80px;padding:22px 6%;font-size:15px;gap:20px}
 .hero{grid-template-columns:1fr;padding:38px 6% 46px;gap:48px;min-height:auto}.hero h1{font-size:clamp(72px,15vw,108px)}.hero .eyebrow{font-size:10px;letter-spacing:.065em;margin-bottom:24px}.tiny-star{font-size:23px}.hero-description{font-size:15px;margin:25px 0}.hero .button{padding:15px 23px;min-height:53px}.hero-actions{gap:20px}.hero-actions .text-link{font-size:13px}.hero-footnote{display:none}
 .paint-experience{margin:0 5px;transform:rotate(1.4deg)}.paint-stage{aspect-ratio:1.04}.canvas-word{font-size:clamp(62px,15vw,94px)}.canvas-topline{font-size:9px;letter-spacing:.08em}.paint-toolbar{gap:14px;flex-wrap:wrap}.paint-colors{gap:11px}.paint-color{width:23px;height:23px}.paint-blast{font-size:13px}.paint-hint{font-size:12px}.canvas-caption{font-size:9px;bottom:15px}.canvas-corner{font-size:30px;bottom:12px}.paint-reset{font-size:25px}
 .studio-strip{padding:20px 5%;font-size:12px;gap:10px}.section{padding:65px 6%}.section-heading h2{font-size:59px}.section-heading{margin-bottom:27px}.collection-controls{gap:12px}.filters{gap:8px 17px}.filters button{font-size:13px}.filters button.active{padding:9px 13px}.preview-note{font-size:12px;margin-bottom:25px}.artwork-grid{grid-template-columns:1fr;gap:38px}.art-card:nth-child(even){margin-top:0}.art-media{aspect-ratio:1.05;padding:35px}.work-placeholder{padding:23px}.work-placeholder .work-index{font-size:110px}.work-placeholder span:first-child{font-size:10px}.card-title{font-size:30px}.card-arrow{display:grid}.card-category{font-size:11px}.card-caption{padding-top:18px}.card-price{font-size:13px}
 .story{gap:45px}.studio-image{height:370px;margin:5px 7px}.studio-placeholder{padding:30px}.studio-placeholder-title{font-size:59px}.story-copy h2{font-size:44px}.commission-intro h2{font-size:73px}.steps{padding-top:25px;margin-top:10px}.steps h3{font-size:29px}.steps li{gap:23px}.step-number{font-size:34px}.center-heading h2{font-size:53px}.quote-card{padding:29px}.details-section h2{font-size:44px}.closing{padding:67px 6%}.closing h2{font-size:65px}.closing .eyebrow{font-size:10px;letter-spacing:.12em}.footer-top .brand-logo{height:107px}
}
@media(max-width:360px){.paint-color{width:19px;height:19px}.paint-colors{gap:9px}.paint-toolbar{gap:10px}.paint-blast{font-size:12px}.hero h1{font-size:69px}}
@media(max-width:760px){
 .paint-toolbar{display:grid;grid-template-columns:1fr auto;gap:14px}
 .paint-colors{grid-column:1;grid-row:1}
 .paint-reset{grid-column:2;grid-row:1}
 .paint-blast{grid-column:1/-1;grid-row:2;margin:0;justify-content:space-between;padding:8px 0}
}
@media(prefers-reduced-motion:reduce){.paint-experience,.studio-image{transform:none}}