/* Lookdrop — components (v0.1.0)
   Quiet, editorial, media-forward. Typography IS the design. */

/* ---------- base ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.ld-body{
  margin:0;background:var(--ld-bg);color:var(--ld-ink);
  font-family:var(--ld-sans);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.ld-wrap{max-width:var(--ld-maxw);margin:0 auto;padding:0 var(--ld-pad)}
.ld-section{padding:96px 0}
@media(max-width:760px){.ld-section{padding:64px 0}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--ld-accent);color:#fff}

/* accessibility */
:focus-visible{outline:2px solid var(--ld-accent);outline-offset:3px;border-radius:4px}
.ld-dark :focus-visible{outline-color:var(--ld-accent-soft)}
.ld-skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--ld-accent);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--ld-radius) 0;font-weight:600;text-decoration:none;
}
.ld-skip:focus{left:0}

h1,h2,h3{font-family:var(--ld-display);font-weight:650;line-height:1.06;margin:0;color:var(--ld-ink);letter-spacing:-.042em}
.ld-kicker{
  font-family:var(--ld-sans);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ld-ink-mid);margin:0 0 18px;
}
.ld-sub{font-size:19px;color:var(--ld-ink-mid);max-width:560px;line-height:1.6}

/* reveal-on-scroll (JS adds .is-in; no-JS shows everything) */
.ld-js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ld-ease),transform .7s var(--ld-ease)}
.ld-js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ld-js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- buttons ---------- */
.ld-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ld-sans);font-size:15px;font-weight:600;text-decoration:none;
  padding:14px 26px;border-radius:var(--ld-radius);
  transition:transform var(--ld-quick) var(--ld-ease),opacity var(--ld-quick) var(--ld-ease),background var(--ld-quick) var(--ld-ease),color var(--ld-quick) var(--ld-ease);
}
.ld-btn:active{transform:scale(.98)}
.ld-btn--primary{background:var(--ld-accent);color:#fff}
.ld-btn--primary:hover{opacity:.92}
.ld-btn--ink{background:var(--ld-ink);color:var(--ld-bg)}
.ld-btn--ghost{background:var(--ld-ink-ghost);color:var(--ld-ink)}
.ld-btn--onlight-ghost:hover,.ld-btn--ghost:hover{background:rgba(var(--ld-ink-rgb),.14)}
.ld-btn svg{width:18px;height:18px;flex:none}

/* ---------- header ---------- */
body.admin-bar .ld-header{top:32px}
body.admin-bar .ld-announce{top:32px}
@media(max-width:782px){body.admin-bar .ld-header{top:46px}body.admin-bar .ld-announce{top:46px}}
.ld-header{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--ld-nav-h);
  display:flex;align-items:center;
  transition:background var(--ld-standard) var(--ld-ease),box-shadow var(--ld-standard) var(--ld-ease);
}
.ld-header.is-solid{background:rgba(247,246,244,.86);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 10px 30px -18px rgba(20,20,22,.18)}
.ld-header__in{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:none;margin:0 auto;padding:0 40px}
@media(max-width:760px){.ld-header__in{padding:0 var(--ld-pad)}}
.ld-header__logo img{height:22px;width:auto}
.ld-logo--light{display:none}
body.lookdrop-home .ld-header:not(.is-solid) .ld-logo--ink{display:none}
body.lookdrop-home .ld-header:not(.is-solid) .ld-logo--light{display:block}
body.lookdrop-home .ld-header:not(.is-solid) .ld-nav a{color:rgba(242,240,235,.78)}
body.lookdrop-home .ld-header:not(.is-solid) .ld-nav a:hover{color:#fff}
body.lookdrop-home .ld-header:not(.is-solid) .ld-btn--ink{background:var(--ld-bg);color:var(--ld-ink)}
body.lookdrop-home .ld-header:not(.is-solid) .ld-btn--ink:hover{background:var(--ld-accent);color:#fff}
body.lookdrop-home .ld-header:not(.is-solid) .ld-burger span{background:#fff}
.ld-nav{display:flex;gap:34px;align-items:center}
.ld-nav a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ld-ink-mid);transition:color var(--ld-quick)}
.ld-nav a:hover{color:var(--ld-ink)}
.ld-header__cta{display:flex;gap:14px;align-items:center}
.ld-header .ld-btn{padding:10px 20px;font-size:14px}
.ld-header .ld-btn--ink:hover{background:var(--ld-accent);color:#fff;opacity:1}
.ld-burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.ld-burger span{display:block;height:1.5px;background:var(--ld-ink);margin:5px 0;transition:transform var(--ld-quick)}
@media(max-width:900px){
  .ld-nav,.ld-header__cta .ld-btn--ghost{display:none}
  .ld-burger{display:block}
}
.ld-mobile{
  position:fixed;inset:0;z-index:70;background:var(--ld-bg);
  display:flex;flex-direction:column;justify-content:center;padding:0 32px;
  opacity:0;pointer-events:none;transition:opacity var(--ld-standard) var(--ld-ease);
}
.ld-mobile.is-open{opacity:1;pointer-events:auto}
.ld-mobile a{font-family:var(--ld-display);font-weight:650;letter-spacing:-.035em;font-size:32px;text-decoration:none;padding:14px 0}
.ld-mobile__close{position:absolute;top:14px;right:18px;background:none;border:0;font-size:34px;line-height:1;cursor:pointer;color:var(--ld-ink);width:44px;height:44px}

/* ---------- hero (full-bleed background, rounded base) ---------- */
.ld-hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--ld-nav-h) + 60px) 0 80px;
  border-radius:0 0 var(--ld-radius-lg) var(--ld-radius-lg);
  background:var(--ld-dark);
}
.ld-hero__bg{position:absolute;inset:0;z-index:0}
.ld-hero__bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.ld-hero__bg:after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.62),rgba(8,8,10,.34) 55%,rgba(8,8,10,.58));
}
.ld-hero .ld-wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%}
.ld-hero h1{font-size:clamp(42px,6.5vw,94px);max-width:none;color:#fff}
.ld-hero__cta{display:flex;gap:16px;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-top:44px}
@media(max-width:760px){.ld-hero{padding:calc(var(--ld-nav-h) + 60px) 0 80px}}

/* ---------- featured work (Shot on Lookdrop) ---------- */
.ld-marquee{padding:72px 0 20px;overflow:hidden}
.ld-marquee__head{text-align:center;margin-bottom:48px}
.ld-marquee__head h2{font-size:clamp(30px,4vw,52px)}
.ld-marquee__head .ld-sub{margin:16px auto 0;max-width:46ch}
.ld-marquee__track{display:flex;gap:18px;width:max-content;will-change:transform}
.ld-marquee__tile{
  width:300px;aspect-ratio:4/5;border-radius:var(--ld-radius-lg);overflow:hidden;flex:none;
  transition:transform var(--ld-standard) var(--ld-ease),box-shadow var(--ld-standard) var(--ld-ease);
}
.ld-marquee__tile:hover{transform:translateY(-6px);box-shadow:0 24px 48px -18px rgba(74,16,212,.30)}
.ld-marquee__tile img{width:100%;height:100%;object-fit:cover}
.ld-marquee__submit{text-align:center;font-size:15px;color:var(--ld-ink-mid);margin:40px auto 0;padding:0 var(--ld-pad)}
.ld-marquee__submit a{color:var(--ld-accent);font-weight:600;text-decoration:none}
.ld-marquee__submit a:hover{text-decoration:underline}
@media(max-width:760px){.ld-marquee__tile{width:210px}}

/* ---------- editorial statement ---------- */
.ld-statement{padding:120px 0 32px}
.ld-statement p{
  font-family:var(--ld-display);font-weight:650;letter-spacing:-.035em;font-size:clamp(28px,4vw,52px);line-height:1.18;
  max-width:none;margin:0;text-align:center;
}
.ld-statement p .dim{color:var(--ld-ink-faint)}
@media(max-width:760px){.ld-statement{padding:80px 0 24px}}
#features{padding-top:0}

/* ---------- features (alternating editorial rows) ---------- */
.ld-feature{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:64px 0}
.ld-feature:nth-child(even) .ld-feature__media{order:2}
.ld-feature h3{font-size:clamp(30px,3.4vw,46px);max-width:14ch;margin:14px 0 0}
.ld-feature p{color:var(--ld-ink-mid);max-width:46ch;font-size:17.5px;margin:22px 0 0}
.ld-feature__media{border-radius:var(--ld-radius-lg);overflow:hidden;aspect-ratio:4/5;background:#ECEAE6}
.ld-feature__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
@media(max-width:900px){
  .ld-feature{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .ld-feature:nth-child(even) .ld-feature__media{order:0}
}

/* ---------- dark band ---------- */
.ld-dark{background:var(--ld-dark);color:var(--ld-ink-on-dark)}
.ld-dark h2,.ld-dark h3{color:var(--ld-ink-on-dark)}
.ld-dark .ld-kicker{color:var(--ld-ink-on-dark-mid)}
.ld-dark .ld-sub{color:var(--ld-ink-on-dark-mid)}
.ld-band{padding:120px 0;position:relative;overflow:hidden}
.ld-band > .ld-wrap{position:relative;z-index:1}
.ld-band:before{content:'';position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(60% 100% at 50% 100%,rgba(74,16,212,.30),transparent 70%);pointer-events:none}
.ld-band h2{font-size:clamp(34px,4.6vw,64px);max-width:16ch}
.ld-band__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ld-hairline-on-dark);margin-top:72px;border-radius:var(--ld-radius-lg);overflow:hidden}
.ld-band__cell{background:var(--ld-dark-elev);padding:34px 30px}
.ld-band__cell b{
  display:block;font-family:var(--ld-display);font-weight:650;letter-spacing:-.035em;font-size:28px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--ld-accent-soft),#B49CFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ld-band__cell span{font-size:14.5px;color:var(--ld-ink-on-dark-mid);line-height:1.55;display:block}
@media(max-width:900px){.ld-band__grid{grid-template-columns:1fr}}

/* ---------- pricing ---------- */
.ld-pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.ld-price{
  background:var(--ld-surface);
  border-radius:var(--ld-radius-lg);padding:38px 32px;display:flex;flex-direction:column;gap:0;
  box-shadow:0 1px 2px rgba(20,20,22,.04),0 16px 40px -24px rgba(20,20,22,.12);
}
.ld-price__tier{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ld-ink-mid)}
.ld-price__amount{font-family:var(--ld-display);font-weight:650;letter-spacing:-.035em;font-size:44px;margin:18px 0 2px}
.ld-price__amount small{font-family:var(--ld-sans);font-size:15px;color:var(--ld-ink-mid)}
.ld-price__yr{font-size:13.5px;color:var(--ld-ink-mid);margin:0 0 6px}
.ld-price__for{font-size:14.5px;font-weight:600;color:var(--ld-ink);margin:0 0 20px}
.ld-price ul{list-style:none;margin:0 0 30px;padding:0}
.ld-price li{padding:9px 0;border-top:1px solid var(--ld-hairline);font-size:15px;color:var(--ld-ink-mid)}
.ld-price li:first-child{border-top:0}
.ld-price .ld-btn{margin-top:auto;justify-content:center}
.ld-price--featured{background:var(--ld-dark-elev);box-shadow:0 30px 70px -30px rgba(74,16,212,.45)}
.ld-price--featured .ld-price__tier,.ld-price--featured .ld-price__yr{color:var(--ld-ink-on-dark-mid)}
.ld-price--featured .ld-price__amount{color:var(--ld-ink-on-dark)}
.ld-price--featured .ld-price__amount small{color:var(--ld-ink-on-dark-mid)}
.ld-price--featured li{color:var(--ld-ink-on-dark-mid);border-top-color:var(--ld-hairline-on-dark)}
.ld-price--featured .ld-price__for{color:var(--ld-ink-on-dark)}
.ld-pricing__trial{text-align:center;margin-top:28px;font-size:14px;color:var(--ld-ink-mid)}
@media(max-width:900px){.ld-pricing__grid{grid-template-columns:1fr}}

/* ---------- testimonials ---------- */
.ld-reviews{overflow:hidden}
.ld-reviews__track{display:flex;gap:20px;width:max-content;will-change:transform;padding:56px 0 0}
.ld-review{
  width:400px;flex:none;background:var(--ld-surface);
  border-radius:var(--ld-radius-lg);padding:34px 32px;
  box-shadow:0 1px 2px rgba(20,20,22,.04),0 16px 40px -24px rgba(20,20,22,.12);
}
.ld-review p{margin:0 0 24px;font-size:16.5px;line-height:1.6}
.ld-review b{display:block;font-weight:600;font-size:14.5px}
.ld-review span{font-size:13.5px;color:var(--ld-ink-mid)}
@media(max-width:760px){.ld-review{width:300px;padding:26px 24px}}

/* ---------- FAQ ---------- */
.ld-faq{max-width:760px;margin:56px auto 0;display:flex;flex-direction:column;gap:12px}
.ld-faq details{background:var(--ld-surface);border-radius:var(--ld-radius-lg);box-shadow:0 1px 2px rgba(20,20,22,.04),0 12px 32px -22px rgba(20,20,22,.12)}
.ld-faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:22px 28px;font-weight:500;font-size:17px;gap:24px;
}
.ld-faq summary::-webkit-details-marker{display:none}
.ld-faq summary:after{content:'+';font-size:22px;color:var(--ld-ink-faint);transition:transform var(--ld-quick) var(--ld-ease);flex:none}
.ld-faq details[open] summary:after{transform:rotate(45deg)}
.ld-faq .ld-faq__a{padding:0 68px 24px 28px;color:var(--ld-ink-mid);font-size:16px}

/* ---------- big CTA ---------- */
.ld-cta{padding:150px 0;text-align:center;position:relative;overflow:hidden}
.ld-cta > .ld-wrap{position:relative;z-index:1}
.ld-cta:before{content:'';position:absolute;inset:-30% -20% auto -20%;height:90%;background:radial-gradient(50% 60% at 50% 30%,rgba(74,16,212,.38),rgba(94,140,255,.10) 60%,transparent 75%);pointer-events:none}
.ld-cta h2{font-size:clamp(38px,5.4vw,74px);max-width:16ch;margin:0 auto}
.ld-cta .ld-sub{margin:28px auto 40px}
@media(max-width:760px){.ld-cta{padding:96px 0}}

/* ---------- footer ---------- */
.ld-footer{border-top:1px solid var(--ld-hairline-on-dark);padding:72px 0 44px}
.ld-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
.ld-footer__brand img{height:20px;width:auto;margin-bottom:20px}
.ld-footer__brand p{font-size:14.5px;color:var(--ld-ink-on-dark-mid);max-width:34ch;margin:0}
.ld-footer h4{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ld-ink-on-dark-mid);margin:0 0 16px}
.ld-footer ul{list-style:none;margin:0;padding:0}
.ld-footer li{margin:10px 0}
.ld-footer a{font-size:14.5px;text-decoration:none;color:var(--ld-ink-on-dark);opacity:.85;transition:opacity var(--ld-quick)}
.ld-footer a:hover{opacity:1}
.ld-footer__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--ld-hairline-on-dark);font-size:13px;color:var(--ld-ink-on-dark-mid)}
@media(max-width:760px){.ld-footer__grid{grid-template-columns:1fr}}

/* ---------- inner pages ---------- */
.ld-pagehead{padding:calc(var(--ld-nav-h) + 96px) 0 56px}
.ld-pagehead h1{font-size:clamp(38px,5.4vw,72px);max-width:14ch}
.ld-pagehead .ld-sub{margin-top:24px}
.ld-prose{max-width:720px}
.ld-prose h2{font-size:clamp(26px,3vw,38px);margin:56px 0 18px}
.ld-prose p,.ld-prose li{color:var(--ld-ink-mid);font-size:17px}
.ld-prose .lead{font-family:var(--ld-display);font-weight:550;letter-spacing:-.015em;font-size:clamp(22px,2.6vw,30px);line-height:1.4;color:var(--ld-ink);margin:0 0 40px}
.ld-prose a{color:var(--ld-accent);text-decoration:none}
.ld-prose a:hover{text-decoration:underline}
.ld-pageimg{border-radius:var(--ld-radius-lg);overflow:hidden;aspect-ratio:16/9;margin:56px 0}
.ld-pageimg img{width:100%;height:100%;object-fit:cover}

/* contact cards */
.ld-contact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.ld-contact__card{background:var(--ld-surface);border-radius:var(--ld-radius-lg);padding:34px 30px;box-shadow:0 1px 2px rgba(20,20,22,.04),0 16px 40px -24px rgba(20,20,22,.12)}
.ld-contact__card h3{font-size:22px;margin-bottom:10px}
.ld-contact__card p{color:var(--ld-ink-mid);font-size:15px;margin:0 0 18px}
.ld-contact__card a{font-weight:600;font-size:15px;color:var(--ld-accent);text-decoration:none}
@media(max-width:900px){.ld-contact__grid{grid-template-columns:1fr}}


/* ---------- announcement banner (panel-toggled) ---------- */
.ld-announce{
  position:fixed;top:0;left:0;right:0;z-index:66;height:var(--ld-announce-h,44px);
  background:var(--ld-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:14px;font-weight:500;padding:0 56px;text-align:center;
}
.ld-announce a{color:inherit;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.ld-announce__close{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer;
  width:44px;height:44px;opacity:.7;
}
.ld-announce__close:hover{opacity:1}
html.ld-has-announce .ld-header{top:var(--ld-announce-h,44px)}
html.ld-has-announce.ld-adminbar .ld-header{top:calc(var(--ld-announce-h,44px) + 32px)}
html.ld-has-announce main{padding-top:var(--ld-announce-h,44px)}
@media(max-width:760px){.ld-announce{font-size:13px;padding:0 48px}}

/* ---------- announcement popup (panel-toggled) ---------- */
.ld-popup{
  position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,8,10,.55);
}
.ld-popup.is-open{display:flex}
.ld-popup__card{
  background:var(--ld-surface);border-radius:var(--ld-radius-lg);max-width:520px;width:100%;
  overflow:hidden;position:relative;
  box-shadow:0 40px 100px -30px rgba(8,8,10,.6);
}
.ld-popup__media{aspect-ratio:16/9;background:#ECEAE6}
.ld-popup__media img{width:100%;height:100%;object-fit:cover;display:block}
.ld-popup__body{padding:32px}
.ld-popup__body h2{font-size:26px;margin:0 0 12px}
.ld-popup__body p{color:var(--ld-ink-mid);font-size:16px;margin:0 0 24px;line-height:1.6}
.ld-popup__close{
  position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;cursor:pointer;
  background:rgba(8,8,10,.45);color:#fff;border-radius:12px;font-size:20px;line-height:1;
}
.ld-popup__close:hover{background:rgba(8,8,10,.65)}
@media(max-width:520px){.ld-popup__body{padding:24px}}