/* =========================================================
   HORIZON LUXE PHOTOGRAPHY
   ========================================================= */

:root{
  --paper:#FCFBF8;
  --paper-2:#F3F0E8;
  --paper-3:#EAE6DC;
  --ink:#16151A;
  --ink-2:#56545E;
  --ink-3:#8C8992;
  --rule:rgba(22,21,26,.13);
  --rule-2:rgba(22,21,26,.22);
  --blue:#1F51FF;
  --blue-deep:#1639C4;
  --ease:cubic-bezier(.19,1,.22,1);
  --gut:clamp(22px,5.2vw,96px);
  --max:1560px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Host Grotesk',system-ui,sans-serif; font-weight:400;
  font-size:17px; line-height:1.58; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
::selection{background:var(--ink);color:var(--paper);}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);width:100%;}
section{position:relative;}
.pad{padding:clamp(84px,10vw,180px) 0;}

/* ---------- type ---------- */
.idx{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--ink-3);
}
.idx .n{color:var(--blue);}
h1,h2,h3{font-weight:500;letter-spacing:-.04em;line-height:.96;}
h1{font-size:clamp(46px,9.5vw,152px);font-weight:600;letter-spacing:-.055em;}
h2{font-size:clamp(34px,5.6vw,86px);}
h3{font-size:clamp(20px,2.1vw,30px);letter-spacing:-.03em;line-height:1.1;}
.lead{font-size:clamp(18px,1.55vw,25px);line-height:1.44;color:var(--ink-2);font-weight:400;letter-spacing:-.018em;}
p{color:var(--ink-2);}
em{font-style:italic;}
.hair{height:1px;background:var(--rule);width:100%;}

/* ---------- top bar ---------- */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);gap:20px;
  transition:background .45s var(--ease),backdrop-filter .45s,padding .45s var(--ease);
}
.bar.stuck{
  background:rgba(252,251,248,.82);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);padding-block:14px;
  box-shadow:0 1px 0 var(--rule);
}
.mark{display:flex;align-items:center;gap:11px;}
.mark svg{width:34px;height:26px;flex:none;}
.mark b{font-size:15px;font-weight:600;letter-spacing:-.025em;line-height:1;}
.mark i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px;font-weight:500;}

.pill{
  display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 20px;
  border:1px solid var(--rule-2);border-radius:999px;font-size:13.5px;font-weight:500;
  letter-spacing:-.01em;transition:.35s var(--ease);white-space:nowrap;
}
.pill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pill.solid{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pill.solid:hover{background:var(--blue);border-color:var(--blue);}
.pill svg{width:15px;height:15px;}
.pill .bars{display:flex;flex-direction:column;gap:3.5px;}
.pill .bars span{display:block;width:15px;height:1.4px;background:currentColor;transition:.3s var(--ease);}
.bar-actions{display:flex;align-items:center;gap:10px;}

/* ---------- fullscreen menu ---------- */
.menu{
  position:fixed;inset:0;z-index:95;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gut);
  clip-path:inset(0 0 100% 0);transition:clip-path .78s var(--ease);
}
.menu.on{clip-path:inset(0 0 0 0);}
.menu .close{position:absolute;top:22px;right:var(--gut);}
.menu nav{display:flex;flex-direction:column;gap:2px;max-width:var(--max);margin:0 auto;width:100%;}
.menu nav a{
  font-size:clamp(34px,6.4vw,84px);font-weight:500;letter-spacing:-.045em;line-height:1.05;
  padding:10px 0;display:flex;align-items:baseline;gap:18px;
  opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
.menu.on nav a{opacity:1;transform:none;}
.menu nav a:nth-child(1){transition-delay:.14s}
.menu nav a:nth-child(2){transition-delay:.2s}
.menu nav a:nth-child(3){transition-delay:.26s}
.menu nav a:nth-child(4){transition-delay:.32s}
.menu nav a:nth-child(5){transition-delay:.38s}
.menu nav a:hover{color:var(--blue);}
.menu nav a span{font-size:12px;letter-spacing:.2em;color:var(--ink-3);font-weight:500;}
.menu .foot{
  position:absolute;left:var(--gut);right:var(--gut);bottom:34px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-2);
  opacity:0;transition:opacity .5s var(--ease) .44s;
}
.menu.on .foot{opacity:1;}
.menu .foot a:hover{color:var(--blue);}

/* ---------- hero ---------- */
.hero{height:100svh;min-height:620px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.plates{position:absolute;inset:0;z-index:1;}
.plate{position:absolute;overflow:hidden;will-change:transform;
  box-shadow:0 18px 50px -24px rgba(22,21,26,.5);}
.plate img{width:100%;height:auto;display:block;}
.hero-mid{position:relative;z-index:3;text-align:center;padding:0 var(--gut);
  pointer-events:none;mix-blend-mode:normal;}
.hero-mid h1{line-height:.88;}
.hero-mid .sub{
  margin-top:clamp(16px,2vw,26px);font-size:clamp(13px,1.15vw,16px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:500;
}
.hero-mid .tag{margin-top:clamp(14px,1.6vw,20px);font-size:clamp(16px,1.4vw,21px);
  color:var(--ink-2);letter-spacing:-.015em;}
.hero-cta{margin-top:clamp(24px,3vw,38px);display:flex;gap:10px;justify-content:center;
  flex-wrap:wrap;pointer-events:auto;}
.scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;gap:9px;font-weight:500;}
.scrollcue i{display:block;width:1px;height:34px;background:var(--rule-2);position:relative;overflow:hidden;}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--ink);
  animation:drop 2.4s var(--ease) infinite;}
@keyframes drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(30px);filter:blur(10px);
  transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease);}
.rv.in{opacity:1;transform:none;filter:blur(0);}

/* ---------- editorial two-column ---------- */
.two-col{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(28px,5vw,100px);align-items:start;}
.two-col .sticky{position:sticky;top:110px;}

/* ---------- gallery ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px;}
.filters button{
  height:40px;padding:0 18px;border:1px solid var(--rule-2);border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--ink-2);transition:.3s var(--ease);
}
.filters button:hover{border-color:var(--ink);color:var(--ink);}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.grid{display:flex;gap:clamp(14px,1.6vw,26px);margin-top:clamp(34px,4vw,58px);align-items:flex-start;}
.grid .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,26px);}
.cell{position:relative;cursor:zoom-in;
  opacity:0;transform:translateY(26px);filter:blur(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
.cell.in{opacity:1;transform:none;filter:blur(0);}
.cell .shot{overflow:hidden;background:var(--paper-3);position:relative;}
.cell img{width:100%;height:auto;transition:transform 1.1s var(--ease),filter .6s var(--ease);}
.cell:hover img{transform:scale(1.035);}
.cell .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-top:11px;font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;}
.cell .meta b{font-weight:500;color:var(--ink);}
.cell .meta .r{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;}
.cell.hide{display:none;}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(252,251,248,.985);
  display:none;align-items:center;justify-content:center;padding:clamp(52px,6vw,78px) clamp(16px,5vw,90px);}
.lb.on{display:flex;}
.lb img{max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 30px 80px -40px rgba(22,21,26,.45);}
.lb .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-size:13px;color:var(--ink-2);display:flex;gap:16px;justify-content:center;align-items:baseline;}
.lb .cap .r{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}
.lb .x{position:absolute;top:20px;right:clamp(16px,4vw,40px);width:44px;height:44px;
  border:1px solid var(--rule-2);border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:19px;background:var(--paper);}
.lb .x:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.lb .arw{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border:1px solid var(--rule-2);border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:18px;background:var(--paper);}
.lb .arw:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.lb .prev{left:clamp(10px,2vw,30px);} .lb .next{right:clamp(10px,2vw,30px);}

/* ---------- discipline list ---------- */
.disc{border-top:1px solid var(--rule);margin-top:clamp(34px,4vw,56px);}
.d{display:grid;grid-template-columns:72px 1.05fr 1.35fr;gap:clamp(16px,3vw,54px);
  padding:clamp(26px,3.2vw,46px) 0;border-bottom:1px solid var(--rule);
  align-items:start;transition:background .4s var(--ease);}
.d:hover{background:var(--paper-2);}
.d .no{font-size:12px;letter-spacing:.2em;color:var(--ink-3);font-weight:500;padding-top:7px;}
.d p{font-size:16px;line-height:1.56;}

/* ---------- statement band ---------- */
.band{position:relative;overflow:hidden;}
.band .ph{position:relative;height:clamp(300px,52vw,620px);overflow:hidden;}
.band .ph img{width:100%;height:100%;object-fit:cover;will-change:transform;}
.band .say{padding:clamp(44px,6vw,86px) 0 0;}
.band .say .q{font-size:clamp(26px,4.2vw,62px);font-weight:500;letter-spacing:-.04em;
  line-height:1.02;max-width:17ch;}
.band .say .q em{font-style:normal;color:var(--blue);}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);
  margin-top:clamp(34px,4vw,56px);}
.tier{padding:clamp(26px,2.6vw,38px) clamp(18px,1.8vw,30px) clamp(26px,2.6vw,34px);
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;transition:background .4s var(--ease);position:relative;}
.tier:last-child{border-right:0;}
.tier:hover{background:var(--paper-2);}
.tier .dur{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500;}
.tier .nm{font-size:19px;font-weight:500;letter-spacing:-.025em;margin-top:12px;}
.tier .amt{font-size:clamp(34px,3.4vw,50px);font-weight:500;letter-spacing:-.045em;
  margin-top:14px;line-height:1;}
.tier .inc{font-size:14.5px;color:var(--ink-2);margin-top:12px;line-height:1.5;}
.tier .go{margin-top:auto;padding-top:26px;}
.tier .go a{font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--rule-2);padding-bottom:3px;transition:.3s var(--ease);}
.tier .go a:hover{color:var(--blue);border-color:var(--blue);gap:12px;}
.tier.feat{background:var(--ink);color:var(--paper);}
.tier.feat .dur,.tier.feat .inc{color:rgba(252,251,248,.66);}
.tier.feat .go a{border-color:rgba(252,251,248,.3);}
.tier.feat .go a:hover{color:#fff;border-color:#fff;}
.tier.feat:hover{background:#0E0D11;}

.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,42px);
  margin-top:clamp(30px,3.4vw,50px);}
.terms h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);}
.terms p{font-size:14px;margin-top:10px;line-height:1.55;}

/* hourly rate panel */
.hourly{display:grid;grid-template-columns:minmax(230px,.8fr) 1.6fr;gap:clamp(24px,4vw,70px);
  background:var(--ink);color:var(--paper);margin-top:14px;
  padding:clamp(28px,3.4vw,52px) clamp(22px,2.6vw,46px);align-items:start;}
.hourly .dur{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(252,251,248,.6);font-weight:500;}
.hourly .amt{font-size:clamp(44px,5.4vw,78px);font-weight:500;letter-spacing:-.05em;
  line-height:.92;margin-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.hourly .amt small{font-size:14px;font-weight:400;letter-spacing:0;color:rgba(252,251,248,.6);}
.hourly .hr p{color:rgba(252,251,248,.72);font-size:16px;line-height:1.6;}
.hourly .hr p + p{margin-top:14px;}
.hourly .hr a{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:13.5px;font-weight:500;color:var(--paper);
  border-bottom:1px solid rgba(252,251,248,.3);padding-bottom:3px;transition:.3s var(--ease);}
.hourly .hr a:hover{border-color:var(--paper);gap:12px;}
@media(max-width:860px){.hourly{grid-template-columns:1fr;}}

/* ---------- studio ---------- */
.team{margin-top:clamp(26px,3vw,42px);border-top:1px solid var(--rule);}
.team .m{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule);}
.team .m b{font-weight:500;font-size:16.5px;letter-spacing:-.02em;}
.team .m span{font-size:13.5px;color:var(--ink-3);text-align:right;}
.studio-ph{overflow:hidden;background:var(--paper-3);}
.studio-ph img{width:100%;height:auto;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,88px);align-items:start;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;font-weight:500;}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-2);
  padding:11px 2px;color:var(--ink);font-family:inherit;font-size:17px;
  transition:border-color .3s var(--ease);border-radius:0;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--blue);}
.field textarea{resize:vertical;min-height:88px;}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8992' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 2px center;background-size:17px;padding-right:32px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);}
.formnote{font-size:13px;color:var(--ink-3);margin-top:16px;line-height:1.55;}

.reach{border-top:1px solid var(--rule);}
.reach a,.reach .row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--rule);transition:.3s var(--ease);}
.reach a:hover{padding-left:8px;color:var(--blue);}
.reach .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;white-space:nowrap;}
.reach .v{font-size:16px;text-align:right;overflow-wrap:anywhere;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:clamp(40px,4.6vw,66px) 0 36px;}
.fgrid{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.fgrid .links{display:flex;gap:24px;font-size:14px;}
.fgrid .links a:hover{color:var(--blue);}
.fgrid .cp{font-size:12.5px;color:var(--ink-3);}

/* floating whatsapp */
.fab{position:fixed;right:16px;bottom:16px;z-index:80;height:46px;padding:0 18px;
  border-radius:999px;background:var(--ink);color:var(--paper);
  display:none;align-items:center;gap:9px;font-size:13.5px;font-weight:500;
  box-shadow:0 14px 34px -14px rgba(22,21,26,.6);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;}
.fab.show{opacity:1;visibility:visible;transform:none;}
.fab svg{width:17px;height:17px;}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .tiers{grid-template-columns:repeat(2,1fr);}
  .tier:nth-child(2n){border-right:0;}
  .terms{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .two-col .sticky{position:static;}
  .d{grid-template-columns:52px 1fr;}
  .d p{grid-column:2;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .tiers{grid-template-columns:1fr;}
  .tier{border-right:0;}
  .terms{grid-template-columns:1fr;}
  .two{grid-template-columns:1fr;}
  .fab{display:flex;}
  .bar-actions .pill.solid{display:none;}
  .hero{min-height:600px;}
  .lb .arw{width:38px;height:38px;}

  /* desktop plate percentages collapse to nothing on a phone, so recompose */
  .plate.small{display:none;}
  .plate{box-shadow:0 10px 26px -16px rgba(22,21,26,.55);}
  .plate:nth-child(1){left:3%!important;top:8%!important;width:31%!important;}
  .plate:nth-child(4){right:3%!important;left:auto!important;top:6.5%!important;width:33%!important;}
  .plate:nth-child(3){left:2%!important;top:73%!important;width:31%!important;}
  .plate:nth-child(6){right:2%!important;left:auto!important;top:75%!important;width:33%!important;}
  .hero-mid .sub{letter-spacing:.13em;font-size:11.5px;}
  .hero-mid .tag{font-size:17px;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .pill{justify-content:center;height:48px;}
  .scrollcue{bottom:14px;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;}
  .rv,.cell{opacity:1!important;transform:none!important;filter:none!important;}
  .plate{transform:none!important;}
}
