/* ==========================================================================
   Carnival band photography · DevantayJ
   Built on the same system as The Listening Party: one dark room, one light
   source, three textures over everything, Bebas for display, DM Sans for
   reading, DM Mono for labels. The palette is the carnival five.
   ========================================================================== */

@font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue.woff2') format('woff2');
  font-weight:400;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-var.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap;}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-400.woff2') format('woff2');
  font-weight:400;font-display:swap;}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-500.woff2') format('woff2');
  font-weight:500;font-display:swap;}

:root{
  /* the five */
  --pink:#E65A7F;  --blue:#0091E0;  --yellow:#FBD839;  --blush:#EE9EAC;  --cyan:#6BE6F7;
  /* the room */
  --deep:#08070A;        /* the base, almost black, cool not warm */
  --room:#101018;        /* surfaces that sit on the base */
  --cream:#FBF4EA;
  --quiet:rgba(251,244,234,.62);
  --hair:rgba(251,244,234,.16);

  --display:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --body:'DM Sans','Inter',Helvetica,Arial,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Menlo,Consolas,monospace;

  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip;}
body{
  background:var(--deep);color:var(--cream);font-family:var(--body);font-weight:400;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;      /* the heat glow and the fan bleed past the edge on purpose */
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--yellow);color:var(--deep);}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:400;background:var(--yellow);color:var(--deep);padding:10px 16px;}

/* ---------- texture. Grain and scanlines are both gone, so the photographs are
   clean. Only the vignette is left, and it does not touch the pictures. ---------- */
.fx{position:fixed;inset:0;pointer-events:none;}
.vig{z-index:302;
  background:radial-gradient(ellipse at 50% 44%,transparent 42%,rgba(8,7,10,.42) 76%,rgba(8,7,10,.9) 100%);}

/* ---------- type ---------- */
.label,.readout{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.38em;
  text-transform:uppercase;color:var(--yellow);display:inline-block;
}
.label{margin-bottom:16px;}
.readout{border:1px solid rgba(251,216,57,.42);padding:8px 14px;letter-spacing:.26em;
  color:var(--yellow);}

h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;}
h1{font-size:clamp(50px,8.2vw,124px);line-height:.84;}
h2{font-size:clamp(40px,6.6vw,96px);line-height:.86;}
h3{font-size:clamp(24px,3vw,38px);line-height:.9;}
p{color:var(--quiet);max-width:58ch;}

/* the burn. Every heading on the page runs a different pair from the palette. */
.burn{
  --g1:var(--pink); --g2:var(--yellow); --g3:#FFF6D8; --glow:rgba(251,216,57,.26);
  background:linear-gradient(174deg,var(--g1) 0%,var(--g2) 46%,var(--g3) 62%,var(--g1) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px var(--glow));
}
.burn.b2{--g1:var(--blue);  --g2:var(--cyan);   --g3:#E9FBFF; --glow:rgba(107,230,247,.24);}
.burn.b3{--g1:var(--yellow);--g2:var(--pink);   --g3:#FFEAF1; --glow:rgba(230,90,127,.24);}
.burn.b4{--g1:var(--cyan);  --g2:var(--blush);  --g3:#FFF2F5; --glow:rgba(238,158,172,.24);}
.burn.b5{--g1:var(--pink);  --g2:var(--blue);   --g3:#E6F5FF; --glow:rgba(0,145,224,.26);}

.sec{padding:clamp(64px,8vw,124px) var(--pad);position:relative;}
#rates{padding-top:clamp(120px,15vw,220px);}
.secHead{max-width:840px;margin-bottom:clamp(30px,4vw,52px);}
.secHead h2{margin-bottom:18px;}
.secHead p{font-size:17px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  background:var(--yellow);color:var(--deep);padding:16px 26px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn:hover{background:var(--cream);}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--hair);}
.btn.ghost:hover{background:var(--cream);color:var(--deep);box-shadow:none;}
.btn.wide{display:block;text-align:center;}

/* ---------- nav ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  padding:14px var(--pad);
  background:linear-gradient(180deg,rgba(8,7,10,.92),rgba(8,7,10,0));
}
#nav .brand{font-family:var(--display);font-size:23px;text-decoration:none;letter-spacing:.03em;}
#nav .links{display:flex;gap:clamp(12px,1.8vw,26px);margin-left:auto;}
#nav .links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--quiet);transition:color .25s;
}
#nav .links a:hover{color:var(--yellow);}
#nav .navcta{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--deep);background:var(--yellow);padding:10px 18px;transition:.25s;
}
#nav .navcta:hover{background:var(--cream);}
@media(max-width:860px){#nav .links{display:none;}#nav{justify-content:space-between;}}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:end;
  grid-template-columns:1.02fr 1fr;
  padding:100px var(--pad) 0;
  margin-bottom:clamp(-160px,-11vw,-70px);   /* the figure carries on into the rates */
  z-index:1;
}
.heat{
  position:absolute;left:50%;bottom:-32%;transform:translateX(-50%);
  width:min(120vw,1500px);aspect-ratio:1.5;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(230,90,127,.4),rgba(0,145,224,.14) 42%,transparent 70%);
  filter:blur(40px);animation:heat 7.5s ease-in-out infinite;
}
@keyframes heat{0%,100%{opacity:.8;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.heroText{position:relative;z-index:3;padding-bottom:clamp(40px,6vh,80px);}
.heroText .readout{margin-bottom:20px;}
.hero h1{margin-bottom:18px;}
.hero .lead{font-size:clamp(15px,1.3vw,18px);max-width:42ch;color:rgba(251,244,234,.8);}
.heroStats{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,38px);margin:24px 0 24px;}
.heroStats div{display:flex;flex-direction:column;}
.heroStats strong{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,40px);
  line-height:.9;color:var(--cream);}
.heroStats span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--quiet);margin-top:8px;}
.heroBtns{display:flex;gap:10px;flex-wrap:wrap;}
.heroPhoto{position:relative;z-index:2;order:2;display:flex;justify-content:center;align-items:flex-end;
  margin-right:calc(var(--pad) * -1);}
/* her feet dissolve into the page rather than being cut off by the section edge */
.heroPhoto img{height:min(82svh,1040px);width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 76%,transparent 99%);}
.scrollCue{
  position:absolute;right:var(--pad);bottom:26px;z-index:4;
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--quiet);
  writing-mode:vertical-rl;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding:96px var(--pad) 0;margin-bottom:-40px;}
  .heroPhoto{order:2;margin:6px calc(var(--pad) * -1) 0;}
  .heroPhoto img{height:auto;width:100%;}
  .heroText{padding-bottom:26px;}
  .scrollCue{display:none;}
}

/* ---------- rates. The poster from the reference: blocks stacked, the title
   lapping over the top one, a badge in the corner. Flat, no shadows, no radius. */
.ratesPanel{
  position:relative;max-width:940px;margin:0 auto;padding:clamp(22px,3vw,40px);
  background:linear-gradient(180deg,rgba(0,145,224,.16),rgba(0,145,224,.05));
  border:1px solid rgba(0,145,224,.42);
}
.ratesTitle{
  position:relative;z-index:3;margin:0 0 -14px;pointer-events:none;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,5.6vw,80px);line-height:.84;
  --g1:var(--blue);--g2:var(--cyan);--g3:#E9FBFF;--glow:rgba(107,230,247,.26);
  background:linear-gradient(174deg,var(--g1) 0%,var(--g2) 46%,var(--g3) 62%,var(--g1) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px var(--glow));
}
.rateBlock{
  position:relative;border:1px solid var(--hair);padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) 4px;
  margin-bottom:12px;background:rgba(8,7,10,.45);
}
.rateBlock:first-of-type{padding-top:clamp(30px,4vw,52px);}
.rateHead{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cyan);padding-bottom:12px;border-bottom:1px solid var(--hair);
}
.rateRow{
  display:grid;grid-template-columns:1fr auto;gap:2px 20px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--hair);transition:padding-left .3s var(--ease);
}
.rateBlock .rateRow:last-child{border-bottom:none;}
.rateRow:hover{padding-left:10px;}
.rateRow .rn{grid-column:1;grid-row:1;font-family:var(--display);font-size:clamp(20px,2.1vw,28px);
  line-height:1;letter-spacing:.02em;}
.rateRow .rd{grid-column:1;grid-row:2;font-size:13.5px;color:var(--quiet);}
.rateRow .rp{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center;
  font-family:var(--display);font-size:clamp(26px,2.8vw,40px);line-height:1;color:var(--yellow);}
.burst{
  position:absolute;right:clamp(-14px,-1vw,-6px);bottom:clamp(-16px,-1.2vw,-8px);z-index:4;
  width:clamp(96px,12vw,140px);aspect-ratio:1;display:grid;place-items:center;
  background:var(--pink);color:var(--deep);transform:rotate(-9deg);
  clip-path:polygon(50% 0%,60% 14%,75% 6%,78% 24%,94% 22%,89% 38%,100% 50%,89% 62%,94% 78%,78% 76%,75% 94%,60% 86%,50% 100%,40% 86%,25% 94%,22% 76%,6% 78%,11% 62%,0% 50%,11% 38%,6% 22%,22% 24%,25% 6%,40% 14%);
}
.burstIn{display:flex;flex-direction:column;align-items:center;font-family:var(--display);
  font-size:clamp(20px,2.4vw,30px);line-height:1;}
.burstIn em{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;}
.burstIn em:first-child{margin-bottom:3px;}
.burstIn em:last-child{margin-top:4px;}
.ratesFoot{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);
  line-height:1.05;color:var(--cream);text-align:center;margin:20px auto 0;max-width:min(76%,600px);
}
@media(max-width:620px){
  .burst{display:none;}
  .rateRow{grid-template-columns:1fr auto;}
}

/* ---------- packages. Sleeves on a shelf, spine facing you, click and the
   cover slides out. The window widens, the photograph never squashes. ---------- */
.shelf{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,1.6vw,20px);padding:4px 0;}
.pkg{
  --cw:clamp(220px,25vw,320px);
  --ch:calc(var(--cw) * 1.5);
  --sw:40px;
  width:calc(var(--sw) + var(--cw) * .34);
  transition:width .75s var(--ease);
}
.pkg.open{width:calc(var(--sw) + var(--cw));}
.case{position:relative;display:block;width:var(--sw);height:var(--ch);text-align:left;}
.stage{position:relative;display:block;width:100%;height:100%;}
.spine{
  position:absolute;inset:0;background:var(--c);background-size:cover;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 0;
}
.spineName,.spinePrice{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--deep);}
.spineName{font-family:var(--display);font-size:clamp(17px,2vw,22px);letter-spacing:.03em;}
.spinePrice{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;}
.face{
  position:absolute;left:100%;top:0;height:100%;width:calc(var(--cw) * .34);
  transition:width .75s var(--ease);background:var(--room);overflow:hidden;
}
.pkg.open .face{width:var(--cw);}
.face img{position:absolute;left:0;top:0;width:var(--cw);height:100%;object-fit:cover;max-width:none;}
.face::before{content:'';position:absolute;left:0;top:0;bottom:0;width:22px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0));}
.faceIn{
  position:absolute;left:0;top:0;bottom:0;width:var(--cw);z-index:3;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:20px 18px;
  background:linear-gradient(to top,rgba(8,7,10,.95) 34%,rgba(8,7,10,.7) 56%,transparent 82%);
  opacity:0;transition:opacity .5s .18s;
}
.pkg.open .faceIn{opacity:1;}
.pkName{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1;letter-spacing:.02em;}
.pkSub{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--quiet);}
.pkPrice{font-family:var(--display);font-size:clamp(22px,2.5vw,30px);line-height:1;color:var(--yellow);margin:2px 0 8px;}
.pkList{display:flex;flex-direction:column;gap:5px;}
.pkList span{font-size:13px;line-height:1.4;color:rgba(251,244,234,.88);padding-left:16px;position:relative;}
.pkList span::before{content:'✶';position:absolute;left:0;top:0;font-size:9px;color:var(--pink);}
.pkTiers{margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--quiet);}
.pkgNote{margin-top:clamp(26px,3.4vw,44px);font-size:14px;max-width:74ch;}

@media(max-width:860px){
  .shelf{flex-direction:column;align-items:stretch;gap:12px;max-width:520px;margin:0 auto;}
  .pkg,.pkg.open{width:100%;}
  .case{width:100%;height:auto;}
  .stage{height:auto;}
  .spine{position:relative;inset:auto;width:100%;height:auto;
    flex-direction:row;justify-content:space-between;padding:14px 18px;}
  .spineName,.spinePrice{writing-mode:horizontal-tb;transform:none;}
  .face{display:none;position:relative;left:auto;top:auto;width:100%;
    height:clamp(320px,86vw,430px);transition:none;}
  .pkg.open .face{display:block;width:100%;animation:coverIn .45s var(--ease) both;}
  .face::before{display:none;}
  .face img,.faceIn{width:100%;}
  .faceIn{opacity:1;}
  @keyframes coverIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}

/* ---------- what we shoot. The list is a plane tilted away from the camera and
   the cut out figure stands in front of it, as in the reference. ---------- */
.shotWrap{
  position:relative;max-width:1060px;margin:0 auto;min-height:clamp(380px,44vw,560px);
  display:flex;align-items:flex-end;perspective:1500px;
}
.shotList{
  position:absolute;left:0;bottom:4%;z-index:1;width:min(64%,600px);
  transform:rotateY(23deg) rotateX(3deg) rotateZ(-1.5deg);
  transform-origin:left center;will-change:transform;
  padding:clamp(16px,2.2vw,26px);
  border:1px solid var(--hair);background:rgba(16,16,24,.72);
}
.shotPhoto{position:relative;z-index:2;margin-left:38%;width:min(58%,520px);}
.shotPhoto img{width:100%;}
.tabs{display:flex;gap:7px;margin-bottom:10px;}
.tab{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  padding:9px 15px;color:var(--quiet);box-shadow:inset 0 0 0 1px var(--hair);transition:.25s;
}
.tab.on{background:var(--yellow);color:var(--deep);box-shadow:none;}
.shots{list-style:none;display:none;}
.shots.on{display:block;}
.shots li{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--hair);
  transition:padding-left .3s var(--ease);}
.shots li:hover{padding-left:10px;}
.shots .num{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--pink);}
.shots .what{font-family:var(--display);font-size:clamp(17px,1.8vw,24px);line-height:1;letter-spacing:.02em;}
.shotList .readout{margin-top:16px;}

@media(max-width:900px){
  .shotWrap{display:flex;flex-direction:column;perspective:none;min-height:0;}
  .shotPhoto{order:1;width:min(78%,340px);margin:0 auto;}
  .shotList{order:2;position:relative;left:auto;bottom:auto;width:100%;transform:none;margin-top:16px;}
}

/* ---------- gallery. The fan from the reference, turning as it moves. ---------- */
.sec--work{background:var(--room);}
.fanWrap{position:relative;}
.fan{
  position:relative;height:clamp(400px,50vw,600px);
  perspective:1600px;overflow:hidden;cursor:grab;touch-action:pan-y;
}
.fan.grabbing{cursor:grabbing;}
.fcard{
  position:absolute;top:50%;left:50%;width:clamp(200px,24vw,310px);
  aspect-ratio:3/4;margin:0;overflow:hidden;background:var(--deep);
  border:1px solid var(--hair);transform-origin:center;will-change:transform,opacity;
}
.fcard img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.fcard .cap{
  position:absolute;left:0;bottom:0;padding:7px 11px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream);background:rgba(8,7,10,.78);opacity:0;transition:opacity .3s;
}
.fcard.mid .cap{opacity:1;}
.fanBtns{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;}
.fanBtn{
  width:44px;height:44px;display:grid;place-items:center;font-size:15px;color:var(--cream);
  box-shadow:inset 0 0 0 1px var(--hair);transition:.25s;
}
.fanBtn:hover{background:var(--yellow);color:var(--deep);box-shadow:none;}
.drag{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--quiet);}

/* ---------- estimate. The form sits over a photograph, as in the reference. ---------- */
.sec--est{overflow:hidden;}
.estBg{position:absolute;inset:0;z-index:0;}
.estBg img{width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:.5;}
.estBg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--deep) 0%,rgba(8,7,10,.66) 34%,rgba(8,7,10,.72) 70%,var(--deep) 100%);}
.estWrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(28px,4vw,70px);align-items:start;}
.estText h2{margin-bottom:18px;}
.calc{border:1px solid var(--hair);padding:clamp(22px,2.6vw,32px);background:rgba(8,7,10,.72);}
.field{display:block;margin-bottom:20px;}
.fLab{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:9px;}
.fHint{display:block;font-size:12.5px;color:var(--quiet);margin:-4px 0 9px;}
.field select,.field input{
  width:100%;font-family:var(--body);font-size:16px;color:var(--cream);
  background:var(--deep);border:1px solid var(--hair);padding:14px 15px;
  appearance:none;-webkit-appearance:none;border-radius:0;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 14px) 23px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select:focus,.field input:focus{outline:1px solid var(--yellow);outline-offset:2px;}
.field option{background:var(--room);color:var(--cream);}
.total{padding:22px 0;margin:4px 0 20px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.tNum{display:block;font-family:var(--display);font-size:clamp(54px,7vw,92px);line-height:.86;
  --g1:var(--yellow);--g2:var(--pink);--g3:#FFEAF1;--glow:rgba(230,90,127,.24);
  background:linear-gradient(174deg,var(--g1) 0%,var(--g2) 46%,var(--g3) 62%,var(--g1) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px var(--glow));}
.tBreak{display:block;font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.04em;
  color:var(--quiet);margin-top:10px;}
.estNote{font-size:12.5px;margin-top:14px;}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;}
.payCard{border-top:1px solid var(--hair);padding-top:16px;}
.payCard p{font-size:13.5px;margin-top:9px;}
.payCard p strong{color:var(--cream);font-weight:500;}
.payTag{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--yellow);}
.payTag.alt{color:var(--cyan);}
.payFoot{margin-top:20px;font-size:13px;}
@media(max-width:900px){.estWrap{grid-template-columns:1fr;}}
@media(max-width:560px){.pay{grid-template-columns:1fr;}}

/* ---------- questions. The flying cards from the reference, over a photograph. ---------- */
.sec--qs{overflow:hidden;}
.qsBg{position:absolute;inset:0;z-index:0;}
.qsBg img{width:100%;height:100%;object-fit:cover;object-position:center 18%;opacity:.42;}
.qsBg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--deep) 0%,rgba(8,7,10,.7) 30%,rgba(8,7,10,.74) 72%,var(--deep) 100%);}
.sec--qs .secHead{position:relative;z-index:2;}
.qs{position:relative;z-index:2;max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.qcard{
  align-self:center;width:min(100%,480px);text-align:left;position:relative;
  transform:translateX(var(--x)) rotate(var(--r));
  border:1px solid var(--hair);background:rgba(8,7,10,.78);
  padding:16px 44px 16px 20px;
  animation:float 7s ease-in-out infinite;animation-delay:var(--d);
  transition:transform .45s var(--ease),border-color .3s,background .3s;
}
.qcard:hover{border-color:rgba(251,216,57,.5);}
.qcard .q{display:block;font-family:var(--display);font-size:clamp(18px,2.1vw,26px);line-height:1.02;
  letter-spacing:.02em;}
.qcard::after{content:'+';position:absolute;right:16px;top:16px;font-family:var(--mono);color:var(--yellow);
  transition:transform .3s var(--ease);}
.qcard.on::after{transform:rotate(45deg);}
.qcard .a{display:block;max-height:0;overflow:hidden;opacity:0;font-size:14px;line-height:1.65;
  color:var(--quiet);transition:max-height .5s var(--ease),opacity .4s,margin .4s;}
.qcard.on{transform:translateX(calc(var(--x) * .2)) rotate(0deg);animation-play-state:paused;
  background:rgba(8,7,10,.92);border-color:rgba(251,216,57,.4);}
.qcard.on .a{max-height:340px;opacity:1;margin-top:12px;}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(prefers-reduced-motion:reduce){.qcard{animation:none;}}
@media(max-width:760px){.qcard,.qcard.on{width:100%;transform:none;}}

/* ---------- book and footer ---------- */
.sec--book{text-align:center;padding-top:clamp(76px,9vw,140px);padding-bottom:clamp(76px,9vw,140px);}
.sec--book h2{margin-bottom:20px;}
.sec--book p{margin:0 auto 30px;}
.bookBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
footer{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:22px var(--pad) 34px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);
}
footer a{color:var(--cream);text-decoration:none;}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:350;background:rgba(4,3,6,.96);
  display:none;align-items:center;justify-content:center;padding:64px 20px 20px;}
.lightbox.on{display:flex;}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;}
.lbClose{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;background:var(--yellow);color:var(--deep);padding:11px 18px;}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .heat{animation:none;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   PHONES
   ========================================================================== */
@media(max-width:640px){
  :root{--pad:18px;}
  html{scroll-padding-top:70px;}
  .sec{padding:52px var(--pad);}
  .secHead{margin-bottom:26px;}
  h1{font-size:clamp(46px,15vw,64px);}
  h2{font-size:clamp(34px,11vw,48px);}
  .secHead p,p{font-size:15px;}
  .btn,.fanBtn,.tab,.navcta{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .heroBtns .btn{flex:1 1 100%;}
  .hero{padding-top:84px;}
  .heroStats{gap:18px;margin:24px 0;}
  .rateRow{padding:15px 0;}
  .qcard{padding:17px 40px 17px 0;}
  .fan{height:clamp(330px,92vw,420px);}
  .fcard{width:clamp(170px,52vw,210px);}
  footer{flex-direction:column;gap:6px;}
}

/* ==========================================================================
   SITE FURNITURE
   The carnival page above is the reference for the whole of devantayj.com.
   Everything below extends that system to the rest of the site: a services
   menu, the glass poster covers, the gallery overlay they open, and the few
   page blocks the service pages need. Same five colours, same three faces,
   same one dark room.
   ========================================================================== */

/* ---------- nav, with a services panel ---------- */
#navToggle{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;margin-left:auto;padding:10px 4px;}
#nav .links a.on{color:var(--yellow);}
#nav .drop{position:relative;}
#nav .dropT{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);transition:color .25s;display:flex;align-items:center;gap:7px;}
#nav .dropT::after{content:'';width:4px;height:4px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s;}
#nav .drop:hover .dropT,#nav .drop.on .dropT,#nav .dropT[aria-expanded="true"]{color:var(--yellow);}
#nav .dropT[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px);}
#nav .panel{position:absolute;top:100%;left:-16px;padding-top:14px;min-width:190px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;}
#nav .drop:hover .panel,#nav .panel.open{opacity:1;visibility:visible;transform:none;}
#nav .panel > div{background:rgba(8,7,10,.97);border:1px solid var(--hair);
  display:flex;flex-direction:column;padding:6px 0;}
#nav .panel a{padding:10px 18px;color:var(--quiet);text-decoration:none;}
#nav .panel a:hover,#nav .panel a.on{color:var(--yellow);background:var(--room);}
@media(max-width:860px){
  #nav .links{display:none;position:fixed;inset:56px 0 auto 0;background:rgba(8,7,10,.98);
    flex-direction:column;gap:0;padding:8px 0 20px;border-bottom:1px solid var(--hair);
    max-height:calc(100svh - 56px);overflow-y:auto;margin-left:0;}
  #nav .links.open{display:flex;}
  #nav .links a{padding:14px var(--pad);font-size:12px;}
  #navToggle{display:block;}
  #nav .navcta{margin-left:12px;}
  #nav .drop{position:static;}
  #nav .dropT{padding:14px var(--pad) 8px;font-size:12px;color:rgba(251,244,234,.4);}
  #nav .dropT::after{display:none;}
  #nav .panel{position:static;opacity:1;visibility:visible;transform:none;padding-top:0;}
  #nav .panel > div{background:none;border:0;padding:0;}
  #nav .panel a{padding:12px var(--pad) 12px calc(var(--pad) + 18px);}
}

/* ---------- inside page hero ---------- */
.hero.page{min-height:clamp(560px,78svh,780px);display:flex;align-items:flex-end;
  margin-bottom:0;   /* the carnival hero pulls up into the next block, these do not */
  padding:clamp(120px,14vw,170px) var(--pad) clamp(40px,6vw,70px);overflow:hidden;position:relative;}
.hero.page .bg{position:absolute;inset:0;z-index:0;}
.hero.page .bg img{width:100%;height:100%;object-fit:cover;}
.hero.page .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,10,.7) 0%,rgba(8,7,10,.34) 32%,rgba(8,7,10,.86) 70%,rgba(8,7,10,.97) 100%);}
.hero.page .in{position:relative;z-index:3;width:100%;max-width:1240px;margin:0 auto;}
.hero.page h1{margin:14px 0 18px;}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(251,244,234,.42);margin-bottom:14px;}
.crumb a{color:inherit;text-decoration:none;}
.crumb a:hover{color:var(--yellow);}
.inner{max-width:1240px;margin:0 auto;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,60px);align-items:start;}
@media(max-width:880px){.two{grid-template-columns:1fr;}}

/* ---------- the glass posters ----------
   The photograph is untouched. A sheet of milky glass sits over it and the
   word is a hole cut through the glass, so what shows inside the letters is
   the picture exactly as it was taken. ---------- */
.plates{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,24px);}
.plates > figure{margin:0;grid-column:span 2;display:flex;flex-direction:column;}
.plates > figure.wide{grid-column:span 3;}
.plates > figure.wide .plate{aspect-ratio:1/1;}
.plates.one{display:block;}
@media(max-width:880px){
  .plates{grid-template-columns:repeat(2,1fr);}
  .plates > figure,.plates > figure.wide{grid-column:span 1;}
  .plates > figure.wide .plate{aspect-ratio:2/3;}
}
@media(max-width:540px){.plates{grid-template-columns:1fr;}}

.plate{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;display:block;
  background:var(--room);cursor:pointer;container-type:inline-size;text-decoration:none;}
.plate > img{width:100%;height:100%;object-fit:cover;}
.plate::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  backdrop-filter:blur(9px) saturate(.84) brightness(1.04);
  -webkit-backdrop-filter:blur(9px) saturate(.84) brightness(1.04);
  background-image:
    linear-gradient(155deg,rgba(251,244,234,.24),rgba(251,244,234,.1) 46%,rgba(251,244,234,.2)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.26'/%3E%3C/svg%3E");
  background-size:100% 100%,240px 240px;
  transition:backdrop-filter .6s var(--ease),opacity .6s var(--ease);}
.plate:hover::after,.plate:focus-visible::after{
  backdrop-filter:blur(3px) saturate(.96) brightness(1.02);
  -webkit-backdrop-filter:blur(3px) saturate(.96) brightness(1.02);opacity:.7;}
.plate .cut{position:absolute;inset:0;z-index:2;display:grid;align-content:center;justify-items:center;
  text-align:center;padding:0 10px;white-space:nowrap;
  font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.84;
  font-size:clamp(34px,4.4vw,64px);
  font-size:22.4cqw;                 /* scales with the poster, not the page */
  letter-spacing:.01em;
  background-size:cover;background-position:center;   /* photograph set inline */
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:
    -1px -1px 0   rgba(0,0,0,.3),
     1px  1px 0   rgba(251,244,234,.6),
     2px  2px 4px rgba(251,244,234,.26),
     3px  3px 9px rgba(251,244,234,.12);
  transition:transform .55s var(--ease);}
.plate:hover .cut{transform:scale(1.04);}
.plate .edge{position:absolute;inset:11px;z-index:3;pointer-events:none;border:1px solid rgba(251,244,234,.2);}
.plate .meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:4;display:flex;
  justify-content:space-between;gap:10px;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);}
.plate .meta b{font-weight:400;color:var(--yellow);}
.plate.banner{aspect-ratio:21/9;}
.plate.banner .cut{font-size:clamp(34px,4.6vw,66px);font-size:11cqw;}
@media(max-width:700px){.plate.banner{aspect-ratio:4/3;}.plate.banner .cut{font-size:16cqw;}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .plate .cut{background:none;color:var(--cream);}
}
.plateCap{padding:13px 2px 0;display:flex;flex-direction:column;gap:8px;}
.plateCap p{font-size:14px;color:var(--quiet);margin:0;max-width:none;}
.plateCap a{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow);align-self:flex-start;text-decoration:none;border-bottom:1px solid rgba(251,216,57,.45);
  padding-bottom:3px;}
.plateNote{font-size:14px;color:var(--quiet);margin-top:16px;}

/* ---------- the gallery a poster opens ---------- */
body.lbOpen{overflow:hidden;}
.lb{position:fixed;inset:0;z-index:360;background:rgba(4,3,6,.97);display:flex;flex-direction:column;
  opacity:0;transition:opacity .3s var(--ease);}
.lb[hidden]{display:none;}
.lb.in{opacity:1;}
.lbBar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--pad);flex:0 0 auto;}
.lbBar .t{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,2.6vw,34px);line-height:1;}
.lbBar .x{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--quiet);padding:9px 14px;box-shadow:inset 0 0 0 1px var(--hair);transition:.2s;}
.lbBar .x:hover{background:var(--yellow);color:var(--deep);box-shadow:none;}
.lbAct{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.lbBar .full{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--deep);background:var(--yellow);padding:9px 14px;transition:.2s;white-space:nowrap;
  text-decoration:none;border:0;box-shadow:none;}
.lbBar .full:hover{background:var(--cream);}
.lbBar .full[hidden]{display:none;}
.lbStrip{flex:1 1 auto;display:flex;align-items:center;gap:clamp(5px,.7vw,11px);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;
  scroll-snap-type:x mandatory;padding:0 calc(50% - min(21vw,320px));}
.lbStrip::-webkit-scrollbar{display:none;}
.lbStrip.grabbing{cursor:grabbing;}
.lbStrip figure{margin:0;flex:0 0 auto;width:min(42vw,640px);scroll-snap-align:center;
  display:flex;flex-direction:column;gap:11px;}
.lbStrip img{width:100%;max-height:72svh;object-fit:contain;display:block;
  transform:scale(calc(.84 + var(--d,0) * .16));opacity:calc(.44 + var(--d,0) * .56);
  transition:transform .28s var(--ease),opacity .28s var(--ease);}
.lbStrip figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--quiet);text-align:center;opacity:0;transition:opacity .28s;}
.lbStrip figure.mid figcaption{opacity:1;}
.lbFoot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:18px;
  padding:12px var(--pad) 22px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--quiet);}
.lbFoot .n{color:var(--yellow);font-variant-numeric:tabular-nums;}
.lbFoot .bar{width:clamp(90px,18vw,220px);height:2px;background:var(--hair);position:relative;}
.lbFoot .bar i{position:absolute;top:0;bottom:0;left:0;background:var(--yellow);width:8%;
  transition:width .2s linear,left .2s linear;}
@media(max-width:760px){
  .lbStrip figure{width:74vw;}
  .lbStrip{padding:0 calc(50% - 37vw);}
  .lbStrip img{max-height:62svh;}
  .lbBar{flex-wrap:wrap;gap:10px;padding:14px var(--pad);}
  .lbBar .t{flex:1 1 100%;}
  .lbAct{flex:1 1 100%;justify-content:space-between;}
  .lbBar .full,.lbBar .x{padding:8px 11px;letter-spacing:.16em;}
}

/* ---------- lists, reused from the rates poster ---------- */
.rows{border-top:1px solid var(--hair);}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:6px 18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hair);transition:padding-left .3s var(--ease);}
.row:hover{padding-left:10px;}
.row .n{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--pink);}
.row .t{font-family:var(--display);font-size:clamp(19px,2.1vw,28px);text-transform:uppercase;line-height:1;}
.row .d{grid-column:2;font-size:14px;color:var(--quiet);max-width:none;}
.row .p{font-family:var(--display);font-size:clamp(21px,2.3vw,30px);color:var(--yellow);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.row .d a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(251,216,57,.5);}

/* ---------- the deliverables slate ---------- */
.slate{display:flex;flex-wrap:wrap;gap:1px;background:var(--hair);border:1px solid var(--hair);}
.slate div{flex:1 1 185px;background:var(--deep);padding:16px 18px;border-top:2px solid var(--yellow);}
.slate dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--quiet);margin-bottom:7px;}
.slate dd{font-family:var(--display);font-size:clamp(17px,1.8vw,23px);text-transform:uppercase;line-height:1;}
.sec--room{background:var(--room);}
.sec--room .slate div{background:var(--room);}

/* ---------- a pulled quote ---------- */
.pull{border-left:3px solid var(--pink);padding:2px 0 2px 22px;margin:clamp(26px,3vw,44px) 0;
  font-family:var(--display);text-transform:uppercase;line-height:1;
  font-size:clamp(22px,2.8vw,38px);max-width:22ch;}
.pull cite{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--quiet);margin-top:14px;font-style:normal;}

/* ---------- the strip of other services ---------- */
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);}
.next a{background:var(--deep);padding:22px 20px 24px;display:flex;flex-direction:column;gap:8px;
  transition:background .2s;text-decoration:none;}
.next a:hover{background:var(--room);}
.next h3{font-size:clamp(20px,2.2vw,28px);}
.next span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);}

/* ---------- the enquiry form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:clamp(22px,3vw,36px);}
.form .wide{grid-column:1 / -1;}
.form label{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--quiet);margin-bottom:9px;}
.form input,.form select,.form textarea{font-family:var(--body);font-size:15px;color:var(--cream);
  background:var(--room);border:1px solid var(--hair);padding:14px;width:100%;}
.form textarea{min-height:150px;resize:vertical;}
.form input:focus,.form select:focus,.form textarea:focus{outline:1px solid var(--yellow);outline-offset:2px;}
.form input::placeholder,.form textarea::placeholder{color:rgba(251,244,234,.3);}
.form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),
    linear-gradient(135deg,var(--yellow) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.form option{background:var(--room);color:var(--cream);}
.form button{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;background:var(--yellow);color:var(--deep);padding:16px 26px;
  justify-self:start;transition:background .25s;}
.form button:hover{background:var(--cream);}
.form .note{font-size:13px;color:var(--quiet);}
.form .note a{color:var(--cream);border-bottom:1px solid rgba(251,216,57,.5);text-decoration:none;}
.hp{position:absolute;left:-9999px;}
@media(max-width:700px){.form{grid-template-columns:1fr;}}

/* ---------- long read, for terms and privacy ---------- */
.read{max-width:74ch;}
.read h2{font-size:clamp(24px,3vw,38px);margin:clamp(32px,3.6vw,50px) 0 14px;}
.read h3{font-size:clamp(18px,2vw,24px);margin:26px 0 10px;}
.read p{margin-bottom:14px;font-size:15px;}
.read ul{list-style:none;margin:0 0 16px 0;}
.read li{display:grid;grid-template-columns:13px 1fr;gap:12px;align-items:baseline;
  font-size:15px;color:var(--quiet);margin-bottom:10px;}
.read li::before{content:'✶';color:var(--pink);font-size:9px;}
.read a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(251,216,57,.5);}
.updated{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(251,244,234,.4);}

/* ---------- the client wall ---------- */
.clients{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;}
.clients a{text-decoration:none;}
.clients span{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.4vw,32px);
  color:rgba(251,244,234,.34);transition:color .25s;display:inline-block;letter-spacing:.02em;}
.clients a:hover span{color:var(--yellow);}

/* ---------- package tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);}
.tier{background:var(--deep);padding:28px 24px 30px;display:flex;flex-direction:column;gap:14px;}
.tier.lead{background:var(--room);box-shadow:inset 0 0 0 1px rgba(251,216,57,.34);}
.tier .n{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--yellow);}
.tier .len{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--quiet);margin-top:-8px;}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.tier li{display:grid;grid-template-columns:11px 1fr;gap:11px;align-items:baseline;
  font-size:14px;color:rgba(251,244,234,.88);}
.tier li::before{content:'✶';color:var(--pink);font-size:9px;}
.tier .go{margin-top:auto;padding-top:18px;}

/* ---------- the three prices strip, used by the offer ---------- */
.deal{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:clamp(26px,3vw,44px);}
.deal a{background:var(--deep);padding:26px 22px;display:flex;flex-direction:column;gap:9px;
  transition:background .2s;text-decoration:none;}
.deal a:hover{background:var(--room);}
.deal a.lead{background:var(--room);box-shadow:inset 0 0 0 1px rgba(251,216,57,.34);}
.deal .n{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);}
.deal .p{font-family:var(--display);font-size:clamp(40px,5.4vw,66px);line-height:.86;
  font-variant-numeric:tabular-nums;color:var(--yellow);}
.deal .s{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(251,244,234,.4);}
@media(max-width:760px){.deal{grid-template-columns:1fr;}}

/* ---------- a package block on the offer page ---------- */
.pack{border-top:1px solid var(--hair);padding:clamp(28px,3.4vw,46px) 0;}
.pack:last-of-type{border-bottom:1px solid var(--hair);}
.packHead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;}
.packHead .price{font-family:var(--display);font-size:clamp(40px,5.6vw,72px);line-height:.86;
  font-variant-numeric:tabular-nums;color:var(--yellow);}
.packHead .price s{color:var(--pink);font-size:.46em;margin-right:12px;text-decoration-thickness:1px;}
.packPay{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);margin-top:12px;display:inline-block;
  border-bottom:2px solid var(--yellow);padding-bottom:3px;}
.incl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 34px;margin-top:24px;}
.incl li{display:grid;grid-template-columns:12px 1fr;gap:12px;align-items:baseline;
  font-size:15px;color:rgba(251,244,234,.88);}
.incl li::before{content:'✶';color:var(--pink);font-size:9px;}
.packNote{margin-top:22px;font-size:14px;color:var(--quiet);}
.packNote b{color:var(--cream);font-weight:500;}
@media(max-width:760px){.incl{grid-template-columns:1fr;}}

/* ---------- the poster strip that carries an offer ---------- */
.poster{position:relative;overflow:hidden;background:var(--room);aspect-ratio:2.39/1;display:block;}
.poster img{width:100%;height:100%;object-fit:cover;}
.poster .tag{position:absolute;left:16px;top:16px;z-index:3;}
.poster .sub{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  background:rgba(8,7,10,.78);padding:8px 14px;font-size:15px;text-align:center;max-width:84%;}
@media(max-width:700px){.poster{aspect-ratio:4/5;}}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hair);padding:36px var(--pad) 48px;}
footer.site .cols{display:flex;flex-wrap:wrap;gap:24px 44px;justify-content:space-between;
  max-width:1240px;margin:0 auto 28px;}
footer.site .col{display:flex;flex-direction:column;gap:8px;}
footer.site a{color:var(--quiet);text-decoration:none;}
footer.site a:hover{color:var(--yellow);}
footer.site .mono{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;}
footer.site .head{color:var(--yellow);}
.billing{font-family:var(--mono);font-size:clamp(8px,.95vw,10px);line-height:2;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;color:rgba(251,244,234,.4);
  transform:scaleY(1.3);transform-origin:center;padding:18px 0;max-width:980px;margin:0 auto;}
.billing b{color:var(--quiet);font-weight:400;}

/* ---------- the tilted list, away from the carnival page ----------
   Same plane and the same photograph in front of it, but where there is no
   cut out the picture is framed instead, so it still reads as standing in
   front of the list rather than floating oddly on top of it. ---------- */
.shotPhoto.framed img{box-shadow:0 30px 70px rgba(0,0,0,.6);border:1px solid var(--hair);}
.shotList .lead{font-size:15px;margin-bottom:14px;}

/* A framed photograph is opaque where a cut out is not, so the plane behind it
   is pulled in and the photograph pushed out. Nothing ends up hidden. */
.shotWrap.tight{display:grid;grid-template-columns:1.05fr .78fr;align-items:center;
  gap:clamp(20px,3vw,54px);min-height:0;}
.shotWrap.tight .shotList{position:static;width:auto;bottom:auto;left:auto;
  transform:rotateY(17deg) rotateX(2deg) rotateZ(-1deg);transform-origin:right center;}
.shotWrap.tight .shotPhoto{position:static;margin:0;width:auto;}
@media(max-width:860px){
  .shotWrap.tight{display:block;}
  .shotWrap.tight .shotList{transform:none;}
  .shotWrap.tight .shotPhoto{margin-top:20px;}
}

/* ---------- the showreel, once it exists ---------- */
.reel{position:relative;aspect-ratio:16/9;background:var(--room);border:1px solid var(--hair);}
.reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ==========================================================================
   THE GALLERY
   ---------------------------------------------------------------------------
   Justified rows. Every photograph in a row is exactly the same height, and
   its width follows its own shape, so a landscape and a portrait carry equal
   weight and nothing is cropped to make them match. Nothing is rotated,
   dimmed or hidden behind anything else: the whole set is on the page at
   once, at full clarity.
   ========================================================================== */
.jgal{display:flex;flex-direction:column;gap:var(--jgap,4px);}
.jrow{display:flex;gap:var(--jgap,4px);}
.jcell{position:relative;display:block;overflow:hidden;background:var(--room);
  flex:0 0 auto;cursor:zoom-in;text-decoration:none;}
.jcell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease),filter .4s var(--ease);}
.jcell:hover img,.jcell:focus-visible img{transform:scale(1.03);filter:brightness(1.06);}
.jcell::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(251,244,234,0);transition:box-shadow .3s;}
.jcell:hover::after,.jcell:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(251,216,57,.55);}
.jcell .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:26px 12px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream);opacity:0;transition:opacity .3s;
  background:linear-gradient(to top,rgba(8,7,10,.82),transparent);}
.jcell:hover .cap,.jcell:focus-visible .cap{opacity:1;}
.jgalFoot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--quiet);flex-wrap:wrap;}
.jgalFoot b{color:var(--yellow);font-weight:400;}
/* before the script measures, the first row still looks like a row */
.jgal:not(.ready) .jrow{flex-wrap:wrap;}
.jgal:not(.ready) .jcell{flex:1 1 240px;height:260px;}
@media(max-width:620px){
  /* one photograph at a time, each at its own shape, nothing to compare it to */
  .jgal .jrow{flex-direction:column;}
  .jcell{width:100% !important;height:auto !important;}
  .jcell img{height:auto;}
  .jcell .cap{opacity:1;}
}


/* ==========================================================================
   METAL
   ---------------------------------------------------------------------------
   Bronze, silver and gold as actual metal rather than three flat colours. A
   sheen is just a gradient that changes direction faster than a light source
   would: dark, bright, dark, bright across the face of the strip, with one
   near white band where the highlight catches. The thin lines top and bottom
   are the milled edge.
   ========================================================================== */
.spine.metal{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.45),
             inset 1px 0 0 rgba(255,255,255,.22), inset -1px 0 0 rgba(0,0,0,.3);
}
.spine.metal .spineName,.spine.metal .spinePrice{
  color:rgba(22,14,4,.9);text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.spine.bronze{
  background:linear-gradient(104deg,
    #3f2410 0%, #7a4620 9%, #b3702f 20%, #d9a15f 30%, #f2cf9e 37%,
    #ffeacb 41%, #d79a55 48%, #a9682f 60%, #6d3f1b 74%, #45280f 86%, #8a5426 100%);
}
.spine.silver{
  background:linear-gradient(104deg,
    #5d6067 0%, #8d9197 9%, #b9bdc3 20%, #dfe2e6 30%, #f4f6f8 37%,
    #ffffff 41%, #d2d6db 48%, #a4a8ae 60%, #74787e 74%, #4f5258 86%, #9ca0a6 100%);
}
.spine.gold{
  background:linear-gradient(104deg,
    #5a4109 0%, #96700f 9%, #c99f22 20%, #e8c757 30%, #f7e49a 37%,
    #fff8d4 41%, #eccc61 48%, #c29a24 60%, #8a6410 74%, #5c4209 86%, #b08a1c 100%);
}
/* on a phone the sleeve lies flat, so the sheen runs the other way */
@media(max-width:860px){
  .spine.bronze,.spine.silver,.spine.gold{background-image:linear-gradient(14deg,
    var(--m1,#3f2410) 0%, var(--m2,#b3702f) 22%, var(--m3,#ffeacb) 41%,
    var(--m4,#a9682f) 62%, var(--m5,#45280f) 100%);}
  .spine.bronze{--m1:#3f2410;--m2:#b3702f;--m3:#ffeacb;--m4:#a9682f;--m5:#45280f;}
  .spine.silver{--m1:#5d6067;--m2:#b9bdc3;--m3:#ffffff;--m4:#a4a8ae;--m5:#4f5258;}
  .spine.gold{--m1:#5a4109;--m2:#c99f22;--m3:#fff8d4;--m4:#c29a24;--m5:#5c4209;}
}

/* ==========================================================================
   METAL SPINES, for bronze, silver and gold
   ---------------------------------------------------------------------------
   Metal reads as metal because of the banding: a run of light and dark stops
   across the face rather than one smooth fade, plus a hard specular streak
   and a lit top edge. The gradient runs across the spine, which is vertical,
   so the bands catch the way a real foil block would.
   ========================================================================== */
.spine.metal{overflow:hidden;}   /* position stays absolute, from .spine */
.spine.metal::after{           /* the specular streak */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%, rgba(255,255,255,.55) 46%,
    rgba(255,255,255,.08) 52%, rgba(255,255,255,0) 64%);
  mix-blend-mode:screen;}
.spine.metal::before{          /* the lit edge along the top */
  content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.8),rgba(255,255,255,.1));}
.spine.metal .spineName,.spine.metal .spinePrice{
  position:relative;z-index:3;color:rgba(18,12,4,.88);
  text-shadow:0 1px 0 rgba(255,255,255,.45);}

.spine.bronze{background:linear-gradient(97deg,
  #5A3315 0%, #8C5222 9%, #C4834A 21%, #F2C79C 31%, #B26F34 40%,
  #7A421A 52%, #D69B62 66%, #F6D6B0 74%, #A45E28 86%, #55300F 100%);}
.spine.silver{background:linear-gradient(97deg,
  #5C6368 0%, #8E979E 9%, #C9D1D7 21%, #FFFFFF 31%, #A9B2B9 40%,
  #6B7379 52%, #BFC7CD 66%, #F2F5F7 74%, #939CA3 86%, #545B60 100%);}
.spine.gold{background:linear-gradient(97deg,
  #6B4E0B 0%, #A8801A 9%, #D9AE33 21%, #FBEEA8 31%, #C99A20 40%,
  #8A6710 52%, #E3C24B 66%, #FDF3C4 74%, #B98F1C 86%, #6A4C09 100%);}
/* on a phone the sleeve spine lies flat, so the bands run the other way */
@media(max-width:860px){
  .spine.metal::after{background:linear-gradient(14deg,
    rgba(255,255,255,0) 34%, rgba(255,255,255,.5) 46%,
    rgba(255,255,255,.08) 52%, rgba(255,255,255,0) 64%);}
}

/* ---------- tighter rhythm between sections, and a hero that can grow ----- */
.sec{padding:clamp(48px,5.6vw,88px) var(--pad);}
.sec--book{padding-top:clamp(58px,6.6vw,104px);padding-bottom:clamp(58px,6.6vw,104px);}
.secHead{margin-bottom:clamp(22px,2.6vw,36px);}

/* a landscape cover wants the top of the frame kept and the foot faded out */
.hero.page.wide{min-height:clamp(520px,66svh,720px);}
.hero.page .bg img.top{object-position:center top;}
.hero.page .bg img.low{object-position:center 30%;}
.hero.page.wide .bg::after{
  background:linear-gradient(180deg,rgba(8,7,10,.34) 0%,rgba(8,7,10,.12) 22%,
    rgba(8,7,10,.72) 62%,rgba(8,7,10,.97) 100%);}

/* the offer strip, taller and holding the whole subject */
.poster{aspect-ratio:2/1;}
.poster img{object-position:center 22%;}
.poster .sub{white-space:nowrap;max-width:none;font-size:clamp(12px,1.25vw,16px);}
@media(max-width:700px){
  .poster{aspect-ratio:4/5;}
  .poster .sub{white-space:normal;max-width:88%;}
}

/* the why me block, running the full width now the picture beside it is gone */
.wide-block{max-width:none;}
.wide-block .lead,.wide-block p{max-width:78ch;}

/* ---------- the about portrait, sitting back in the page ---------- */
.aboutShot{position:relative;margin:0;}
.aboutShot img{width:100%;display:block;
  -webkit-mask-image:linear-gradient(105deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 62%);
  mask-image:linear-gradient(105deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 62%);
  opacity:.72;filter:saturate(.9);}
@media(max-width:880px){
  .aboutShot img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 46%);opacity:.8;}
}

/* ---------- the package name in its own metal ---------- */
.pkName.metalText{-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.45));}
.pkName.bronze{background-image:linear-gradient(97deg,#8C5222,#F2C79C 30%,#B26F34 48%,#F6D6B0 72%,#A45E28);}
.pkName.silver{background-image:linear-gradient(97deg,#8E979E,#FFFFFF 30%,#A9B2B9 48%,#F2F5F7 72%,#939CA3);}
.pkName.gold{background-image:linear-gradient(97deg,#A8801A,#FBEEA8 30%,#C99A20 48%,#FDF3C4 72%,#B98F1C);}

/* ==========================================================================
   THE REEL PLACEHOLDER
   A frame with sprocket holes down each side, a play button that pulses, and
   the state written across it, so it reads as a film in the edit rather than
   a broken video.
   ========================================================================== */
.reelFrame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:var(--room);border:1px solid var(--hair);text-decoration:none;}
.reelFrame img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.75);}

/* the reel band: the film cover carries the section, the video space itself
   stays black until the cut lands and an embed replaces it */
.sec--reel{position:relative;overflow:hidden;}
.sec--reel > .inner{position:relative;z-index:2;}
.reelBg{position:absolute;inset:0;z-index:0;}
.reelBg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:.8;}
.reelBg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,10,.72),rgba(8,7,10,.22) 44%,rgba(8,7,10,.78));}
.sec--reel{padding-top:clamp(64px,7vw,110px);padding-bottom:clamp(64px,7vw,110px);}
.reelFrame.blank{background:#000;border-color:rgba(251,244,234,.22);
  max-width:min(100%,1020px);margin:0 auto;box-shadow:0 34px 110px rgba(0,0,0,.72);}
.reelFrame.blank .reelIn{gap:clamp(16px,2.2vw,26px);}
.reelFrame::before,.reelFrame::after{content:'';position:absolute;top:0;bottom:0;width:clamp(18px,2.4vw,34px);
  z-index:3;background:
    repeating-linear-gradient(180deg,transparent 0 10px,rgba(251,244,234,.82) 10px 24px,transparent 24px 34px);
  -webkit-mask-image:linear-gradient(180deg,#000,#000);
  background-color:rgba(8,7,10,.9);background-blend-mode:normal;}
.reelFrame::before{left:0;} .reelFrame::after{right:0;}
.reelIn{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(14px,2vw,22px);text-align:center;padding:0 12%;}
.playBtn{position:relative;width:clamp(64px,8vw,104px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:rgba(8,7,10,.5);
  box-shadow:inset 0 0 0 2px var(--yellow);}
.playBtn i{display:block;width:0;height:0;margin-left:14%;
  border-left:clamp(18px,2.2vw,28px) solid var(--yellow);
  border-top:clamp(11px,1.3vw,17px) solid transparent;
  border-bottom:clamp(11px,1.3vw,17px) solid transparent;}
.playBtn::after{content:'';position:absolute;inset:-2px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(251,216,57,.5);animation:reelPulse 2.6s var(--ease) infinite;}
@keyframes reelPulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
.reelState{font-family:var(--display);text-transform:uppercase;line-height:.92;
  font-size:clamp(26px,4.4vw,62px);}
.reelSub{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--quiet);}
.reelBar{width:min(320px,60%);height:2px;background:rgba(251,244,234,.18);position:relative;overflow:hidden;}
.reelBar i{position:absolute;top:0;bottom:0;width:38%;background:var(--yellow);
  animation:reelRun 2.4s var(--ease) infinite;}
@keyframes reelRun{0%{left:-40%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){
  .playBtn::after,.reelBar i{animation:none;}
}