/* Hypotency — paid-search landing page.
   Black and gold, following the main site's palette and type so the click
   through to hypotency.com is continuous. The storefront leads the page the
   way it does there; everywhere else the depth is gold light, and every glow
   below is a CSS gradient rather than a background image. */

:root{
  --black:#0a0a0a;
  --black-2:#0d0d0c;
  --panel:#121110;
  --gold:#DEB43C;
  --gold-bright:#F4D266;
  --gold-deep:#966612;
  --grad:linear-gradient(135deg,#966612 0%,#DEB43C 38%,#F4D266 62%,#A9772A 100%);
  --cream:#f4efe3;
  --body:#a29c8e;
  --line:rgba(222,180,60,.16);
  --line-soft:rgba(244,239,227,.08);
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --label:'Oswald',Impact,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--black);color:var(--body);
  font-family:var(--sans);font-weight:300;line-height:1.72;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:#000;padding:12px 20px}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--serif);color:var(--cream);font-weight:400;letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(2.4rem,4.9vw,4.05rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
h3{font-size:1.2rem;line-height:1.3;font-weight:600}
em{font-style:normal;color:var(--gold)}

/* ---------- controls ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--grad);color:#140f03;
  font-size:.79rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;
  padding:15px 28px;border-radius:999px;
  box-shadow:0 10px 34px -14px rgba(222,180,60,.7);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease),filter .4s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 16px 46px -14px rgba(222,180,60,.95)}
.btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.btn-lg{padding:20px 40px;font-size:.84rem}
.arw{width:22px;height:11px;fill:currentColor;flex:none;transition:transform .4s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.quiet{
  display:inline-flex;align-items:center;gap:10px;color:var(--cream);
  font-size:.9rem;padding-bottom:3px;border-bottom:1px solid var(--gold-deep);
  transition:color .3s,border-color .3s;
}
.quiet .arw{width:18px;height:9px}
.quiet:hover{color:var(--gold-bright);border-color:var(--gold-bright)}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto;z-index:60;background:var(--black);
  border-bottom:1px solid transparent;transition:background .4s var(--ease),border-color .4s var(--ease);
}
header.stuck{background:rgba(10,10,10,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo{display:block;line-height:0}
.logo img{width:230px;transition:width .4s var(--ease)}
header.stuck .logo img{width:185px}
.bar-right{display:flex;align-items:center;gap:26px}
.tel{display:inline-flex;align-items:center;gap:10px;color:var(--cream);font-size:.95rem;transition:color .3s}
.tel svg{width:17px;height:17px;fill:var(--gold);flex:none}
.tel:hover{color:var(--gold-bright)}

/* ---------- hero ---------- */
/* Same banner as the main site: the storefront on a 1672/941 band capped at
   72vh, anchored to its top edge, with the copy underneath rather than beside
   it. The band starts BELOW the header — the header is fixed here where the
   main site's is sticky, so the padding stands in for the space its ribbon and
   nav occupy. Running the photograph up behind the header instead makes it read
   far larger than the main site's and pushes the crop off the building. */
.hero{position:relative;padding-top:84px;overflow:hidden}
.hero-shot{position:relative}
.hero-shot picture{display:block}
.hero-shot img{
  width:100%;aspect-ratio:1672/941;max-height:72vh;
  object-fit:cover;object-position:center top;
}
/* soften the seam where the photograph meets the page */
.hero-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:26%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--black) 92%);
}
.hero-in{position:relative;padding:52px 0 66px}
/* the gold light the copy sits in */
.hero-in::before{
  content:"";position:absolute;left:50%;top:-12%;width:1180px;height:124%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 48% 52% at 32% 46%,rgba(244,210,102,.11),transparent 70%);
}
.hero-copy{position:relative}
.kicker{
  font-family:var(--label);font-weight:400;font-size:.88rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--body);margin-bottom:26px;
}
.kicker b{color:var(--gold);font-weight:500}
.hero h1{max-width:14ch}
.lede{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.34rem);color:var(--gold-bright);margin:26px 0 14px}
.hero-copy>p:last-of-type{max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:38px}

.facts{
  position:relative;display:flex;list-style:none;
  border-top:1px solid var(--line-soft);font-size:.8rem;color:#6f6a5e;
}
.facts li{padding:20px 30px;border-left:1px solid var(--line-soft)}
.facts li:first-child{padding-left:0;border-left:0}

/* ---------- story ---------- */
.story{position:relative;background:var(--black-2);border-top:1px solid var(--line-soft);padding:120px 0}
.story::before{
  content:"";position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(222,180,60,.09),transparent 70%);
}
.story-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:70px}
.story h2{max-width:15ch}
.story-body p{margin-bottom:1.4em;max-width:56ch}
.story-body p:last-child{margin-bottom:0}

/* ---------- collection ---------- */
.collection{position:relative;padding:120px 0 130px;border-top:1px solid var(--line-soft)}
.col-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:70px}
.col-head p{max-width:46ch}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.prod{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel),#0c0b0a);
  border:1px solid var(--line-soft);border-radius:4px;padding:34px 30px 32px;overflow:hidden;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.prod:hover{transform:translateY(-5px);border-color:var(--line)}
/* the photograph bleeds to the card edges, so it cancels the card padding */
.shot{position:relative;margin:-34px -30px 26px}
.shot picture{display:block}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s var(--ease)}
.prod:hover .shot img{transform:scale(1.03)}
.prod h3{margin-bottom:6px}
.note{font-family:var(--label);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}
.prod>p{font-size:.92rem}
.prod .quiet{margin-top:auto;padding-top:24px;align-self:flex-start;border-bottom:0;font-size:.86rem}
.prod .quiet span{border-bottom:1px solid var(--gold-deep);padding-bottom:3px}
.col-cta{margin-top:56px}

/* ---------- assurances ---------- */
.assure{position:relative;background:var(--black-2);border-top:1px solid var(--line-soft);padding:120px 0}
.assure::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:260px;pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 50% 100%,rgba(222,180,60,.08),transparent 72%);
}
.assure .wrap{position:relative}
.assure h2{margin-bottom:60px;max-width:16ch}
.assure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.assure-grid article{border-top:1px solid var(--line);padding-top:22px}
.num{font-family:var(--label);font-size:.82rem;letter-spacing:.16em;color:var(--gold-deep);display:block;margin-bottom:18px}
.assure-grid h3{margin-bottom:12px}
.assure-grid p{font-size:.92rem}

/* ---------- visit ---------- */
.visit{padding:120px 0 130px;border-top:1px solid var(--line-soft)}
.visit-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.visit-copy h2{margin-bottom:24px}
.visit-copy>p{max-width:42ch}
.facts-list{margin:36px 0 40px}
.facts-list>div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line-soft)}
.facts-list>div:last-child{border-bottom:1px solid var(--line-soft)}
.facts-list dt{display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.facts-list dt svg{width:15px;height:15px;fill:var(--gold-deep);flex:none}
.facts-list dd{color:var(--cream);font-size:.96rem}
.facts-list dd a:hover{color:var(--gold-bright)}
.visit-map{line-height:0;border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}
.visit-map iframe{width:100%;height:520px;border:0;filter:grayscale(1) invert(.92) contrast(.85) hue-rotate(175deg)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:62px 0 34px}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:38px;padding-bottom:40px}
.foot-in .logo img{width:185px;margin-bottom:18px}
.foot-in p{font-size:.88rem;line-height:1.95}
.foot-in p a:hover{color:var(--gold-bright)}
.foot-nav{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.foot-nav a{font-size:.87rem;transition:color .3s}
.foot-nav a:hover{color:var(--gold-bright)}
.legal{padding-top:26px;border-top:1px solid var(--line-soft);font-size:.76rem;color:#6f6a5e}

.dock{display:none}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .hero h1{max-width:none}
  .story-in,.visit-in,.col-head{grid-template-columns:1fr;gap:30px}
  .story-in,.visit-in{gap:44px}
  .shelf{grid-template-columns:1fr 1fr}
  .prod:last-child{grid-column:1/-1;max-width:calc(50% - 15px)}
  .assure-grid{grid-template-columns:1fr;gap:0}
  .assure-grid article{padding:22px 0 26px}
  .assure h2{margin-bottom:34px}
  .visit-map iframe{height:380px}
}
@media(max-width:760px){
  .wrap{padding:0 20px}
  body{font-size:.97rem;padding-bottom:86px}
  .bar-in{height:66px}
  .logo img,header.stuck .logo img{width:155px}
  .tel span{display:none}
  .tel svg{width:20px;height:20px}
  .bar-right{gap:14px}
  .btn{padding:13px 17px;font-size:.68rem;letter-spacing:.08em;gap:8px}
  .arw{width:18px;height:9px}
  .btn-lg{padding:18px 26px;font-size:.76rem;width:100%;justify-content:center}
  .hero{padding-top:66px}
  /* the main site drops the cap here too and lets the whole shopfront show */
  .hero-shot img{max-height:none}
  .hero-in{padding:34px 0 44px}
  .cta-row{gap:20px}
  .facts{flex-direction:column;font-size:.78rem}
  .facts li{padding:11px 0;border-left:0;border-top:1px solid var(--line-soft)}
  .facts li:first-child{border-top:0;padding-top:18px}
  .facts li:last-child{padding-bottom:18px}
  .story,.collection,.assure,.visit{padding:76px 0}
  .col-head{margin-bottom:44px}
  .shelf{grid-template-columns:1fr;gap:22px}
  .prod:last-child{max-width:none}
  .shot{margin:-34px -30px 22px}
  .col-cta{margin-top:40px}
  .facts-list>div{grid-template-columns:1fr;gap:8px}
  .visit-map iframe{height:300px}
  .foot-in{flex-direction:column;gap:28px}
  .dock{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:12px 20px;background:rgba(10,10,10,.95);border-top:1px solid var(--line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .dock .btn{width:100%;justify-content:center;padding:16px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}