/* Holm Studio (fictional) - design concept by Gmax Media, 2026-10-07. Direction: studio backdrop, diagonal. */
:root{--teal:#1F5C5A;--teal2:#2E7D79;--teal3:#123A39;--cream:#F4EFE6;--tom:#E8553A;--ink:#17171A;--disp:"Unbounded",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif;--g:clamp(20px,3vw,44px)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--teal);color:var(--cream);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.pill{display:inline-flex;align-items:center;justify-content:center;background:var(--cream);color:var(--teal3);font:700 15px/1 var(--body);padding:14px 22px;border-radius:40px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pill:hover{transform:scale(1.05)}
.pill-lg{font-size:17px;padding:19px 30px}
.h2{font:800 clamp(44px,6vw,104px)/.92 var(--disp);letter-spacing:-.05em}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;max-width:34ch;opacity:.86}

.hd{position:absolute;z-index:20;left:0;right:0;top:0;display:flex;align-items:center;gap:30px;padding:26px var(--g)}
.logo{font:800 22px/1 var(--disp);letter-spacing:-.03em}.logo i{font-style:normal;color:var(--tom)}
.hd-nav{margin-left:auto;display:flex;gap:28px;font-weight:500;font-size:15px}
.hd-nav a:hover{opacity:.7}

/* hero: diagonal, nothing centred */
.hero{position:relative;min-height:max(100svh,760px);overflow:hidden;padding:clamp(110px,10vw,150px) var(--g) clamp(36px,4vw,60px)}
.sweep{position:absolute;inset:0;background:radial-gradient(80% 70% at 62% 58%,var(--teal2) 0%,var(--teal) 52%,var(--teal3) 100%)}
.sweep:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-30%;height:58%;border-radius:50% 50% 0 0/22% 22% 0 0;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.18))}
.hero-h{position:relative;z-index:3;font:800 clamp(64px,8.2vw,150px)/.86 var(--disp);letter-spacing:-.055em}
.hero-h span{color:transparent;-webkit-text-stroke:2px var(--cream)}
.pile{position:absolute;inset:0;z-index:2;pointer-events:none}
.pol{position:absolute;width:clamp(150px,15vw,250px);padding:clamp(8px,.8vw,13px) clamp(8px,.8vw,13px) clamp(34px,3vw,52px);background:var(--cream);box-shadow:0 26px 50px rgba(0,0,0,.35);margin:0}
.pol img{width:100%;aspect-ratio:1;object-fit:cover}
.pol figcaption{position:absolute;left:14px;bottom:12px;font:500 13px/1 var(--body);color:#5b5750}
.p1{left:38%;top:50%;transform:rotate(-8deg)}
.p2{left:50%;top:15%;transform:rotate(6deg)}
.p3{left:62%;top:27%;transform:rotate(4deg)}
.pol.new{animation:eject 1.1s cubic-bezier(.16,1,.3,1) both}
.pol.new img{animation:develop 2.6s ease-out .3s both}
@keyframes eject{0%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(0) scale(.5)}100%{opacity:1}}
@keyframes develop{0%{filter:brightness(2.2) contrast(.2) saturate(0)}100%{filter:none}}
.cam{position:absolute;z-index:4;right:clamp(-40px,-1vw,0px);bottom:clamp(40px,6vw,100px);width:clamp(320px,38vw,640px);background:none;border:0;cursor:pointer;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cam img{width:100%;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45));animation:fl 7s ease-in-out infinite}
.cam:hover{transform:scale(1.03) rotate(-2deg)}
.cam.shot img{animation:none;transform:scale(.97)}
.cam-hint{position:absolute;right:22%;top:12%;font:700 13px/1 var(--body);background:var(--tom);color:#fff;padding:9px 13px;border-radius:30px;transform:rotate(6deg)}
@keyframes fl{50%{transform:translateY(-12px) rotate(-1.5deg)}}
.flash{position:absolute;inset:0;z-index:10;background:#fff;opacity:0;pointer-events:none}
.flash.on{animation:fx .7s ease-out}
@keyframes fx{0%{opacity:.95}100%{opacity:0}}
.hero-foot{position:absolute;z-index:5;left:var(--g);bottom:clamp(36px,4vw,60px);display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero-p{max-width:30ch;font-size:clamp(17px,1.3vw,20px);line-height:1.45}

/* pick your paper */
.paper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--g);padding:clamp(80px,9vw,150px) var(--g);background:var(--bg);transition:background .7s ease,color .7s ease}
.paper.light{color:var(--ink)}.paper.light .rate{border-color:rgba(23,23,26,.25)}
.paper-l .lead{margin-top:26px}
.swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.swatches button{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:40px;border:1.5px solid currentColor;background:transparent;cursor:pointer;font-weight:500;opacity:.72;transition:opacity .3s}
.swatches button i{width:30px;height:30px;border-radius:50%;background:var(--s);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.swatches button[aria-checked=true],.swatches button:hover{opacity:1}
.swatches button[aria-checked=true]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.paper-ph{grid-row:span 2;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;align-self:start}
.paper-ph img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.rates{align-self:end;display:grid;gap:0}
.rate{display:grid;grid-template-columns:1fr auto;padding:18px 0;border-top:1.5px solid rgba(244,239,230,.3)}
.rate b{font:700 clamp(20px,1.7vw,26px)/1.2 var(--disp);letter-spacing:-.03em}
.rate span{grid-column:1;opacity:.75;font-size:15px}
.rate s{grid-row:1 / span 2;grid-column:2;text-decoration:none;font:700 clamp(20px,1.7vw,26px)/1 var(--disp);align-self:center}

/* prints on a line */
.line{position:relative;background:var(--cream);color:var(--ink);padding:clamp(80px,9vw,150px) 0 clamp(70px,7vw,110px)}
.line-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--g);padding:0 var(--g)}
.wire{position:relative;height:0;margin:clamp(50px,6vw,90px) 0 0;border-top:2px solid #3b3a36}
.prints{display:flex;gap:clamp(18px,2vw,30px);overflow-x:auto;padding:0 var(--g) 30px;margin-top:-2px;scrollbar-width:none;scroll-snap-type:x proximity}
.prints::-webkit-scrollbar{display:none}
.pr{flex:0 0 clamp(220px,20vw,320px);margin:0;padding:10px 10px 44px;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.14);position:relative;scroll-snap-align:start;transform-origin:50% 0;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.pr:before{content:"";position:absolute;left:50%;top:-14px;width:16px;height:30px;margin-left:-8px;background:#c7a36b;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.pr:nth-child(odd){transform:rotate(-2.5deg)}.pr:nth-child(even){transform:rotate(2deg)}
.pr:hover{transform:rotate(0) translateY(6px)}
.pr img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pr figcaption{position:absolute;left:14px;bottom:14px;font-size:14px;color:#5b5750}

/* how */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);padding:clamp(80px,9vw,140px) var(--g);background:var(--teal3)}
.how-s b{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--tom);font:800 26px/1 var(--disp)}
.how-s h3{font:700 clamp(26px,2.3vw,36px)/1.1 var(--disp);letter-spacing:-.04em;margin:26px 0 12px}
.how-s p{opacity:.8;max-width:30ch}

/* studio */
.studio{position:relative;min-height:min(80vw,820px);display:flex;align-items:flex-end;overflow:hidden}
.studio>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studio:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,58,57,.92) 0%,rgba(18,58,57,.55) 45%,rgba(18,58,57,0) 75%)}
.studio-tx{position:relative;z-index:2;padding:clamp(60px,7vw,120px) var(--g)}
.studio ul{list-style:none;margin:28px 0 34px;display:grid;gap:10px;font-size:18px}
.studio li:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tom);margin-right:14px}

/* book */
.book{padding:clamp(80px,9vw,150px) var(--g);display:grid;grid-template-columns:1fr 1fr;gap:var(--g) var(--g);align-items:end}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.slots button{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-radius:14px;border:1.5px solid rgba(244,239,230,.35);background:transparent;cursor:pointer;font-weight:500;transition:background .3s,color .3s}
.slots button b{font:700 20px/1 var(--disp)}
.slots button:hover{border-color:var(--cream)}
.slots button[aria-checked=true]{background:var(--cream);color:var(--ink)}
.book-go{grid-column:2;justify-self:start}

.ft{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:var(--g);padding:44px var(--g) 50px;border-top:1px solid rgba(244,239,230,.2);font-size:15px}
.ft-note{opacity:.6}

@media (max-width:900px){
  .hd-nav{display:none}.hd .pill{margin-left:auto}
  .hero{min-height:0;padding-bottom:0;display:flex;flex-direction:column}
  .hero-h{font-size:clamp(56px,16vw,110px)}
  .pile{position:relative;height:96vw;margin-top:18px}
  .pol{width:42vw}.p1{left:6%;top:6%}.p2{left:48%;top:0}.p3{left:22%;top:44%}
  .cam{position:relative;right:auto;bottom:auto;width:88vw;align-self:flex-end;margin-top:-40vw}
  .cam-hint{right:10%;top:6%}
  .hero-foot{position:relative;left:auto;bottom:auto;margin:10px 0 50px}
  .paper,.book{grid-template-columns:1fr}
  .paper-ph{grid-row:auto}
  .line-head{flex-direction:column;align-items:flex-start}
  .how{grid-template-columns:1fr}
  /* 2026-10-07 (Max, phone only): new prints land above the camera in a row of three (main.js PH / SH), a little smaller
     than the hero prints so all three stay fully visible; the 1 / 2 / 3 steps sit centred like the camera above them */
  .pol.new,.pol.lh{width:35vw;z-index:2}
  .how{justify-items:center;text-align:center}
  .how-s{max-width:34ch}.how-s p{margin-inline:auto}
  .studio{min-height:130vw}.studio:after{background:linear-gradient(0deg,rgba(18,58,57,.95) 0%,rgba(18,58,57,.5) 60%,rgba(18,58,57,0) 100%)}
  .slots{grid-template-columns:1fr}.book-go{grid-column:1}
  .ft{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.cam img{animation:none}.pol.new,.pol.new img{animation:none}html{scroll-behavior:auto}}

/* 2026-10-07 (Max): responsive across desktop sizes, no redesign. The hero scales with BOTH viewport width and height (so the
   composition keeps its proportions from 1280x720 to 2560x1440), and the camera sits inside the screen edge. */
@media (min-width:901px){
  .hero-h{font-size:clamp(64px,min(8.2vw,14.5vh),250px)}
  .pol{width:clamp(150px,min(15vw,26vh),380px)}
  .cam{right:max(32px,3.2vw);bottom:clamp(40px,7vh,130px);width:clamp(320px,min(38vw,64vh),940px)}
  .hero-p{font-size:clamp(17px,min(1.3vw,2.1vh),28px)}
  .hd{padding-top:clamp(20px,3vh,40px)}
}