@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/cormorant-garamond-italic-300.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-italic-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/cormorant-garamond-normal-300.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/jost-normal-300.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jost-normal-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jost-normal-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* beyondthelens.store — BTL Studio v3 (Charcoal / Chalk / Pebble), same language as btl-studio.pt */
:root{
  --bg:#EEEDEA; --bg-alt:#DCDAD5; --paper:#F5F5F3;
  --ink:#262524; --ink-70:rgba(38,37,36,.80); --ink-52:rgba(38,37,36,.76);
  --ink-40:rgba(38,37,36,.70); --rule:rgba(38,37,36,.20); --hair:rgba(38,37,36,.10);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(1.4rem,5vw,5.5rem); --maxw:1340px; --ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-weight:300;font-size:1.12rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hero :focus-visible{outline-color:#F5F5F3}
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:920px}
.label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;color:var(--ink-52);font-weight:400}
.label a{border-bottom:1px solid var(--rule)}
.rule{width:88px;height:1px;background:var(--rule);border:0;margin:1.5rem 0}
h1,h2,h3{font-weight:300;line-height:1.06;letter-spacing:.004em}
.display{font-size:clamp(2.6rem,6vw,5.2rem);max-width:16ch}
.h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:22ch}
.h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
p.lead{font-size:clamp(1.1rem,1.5vw,1.4rem);color:var(--ink-70);max-width:46ch;margin-top:1.3rem}
p.lead.wide{max-width:62ch}
.u,.prose a,.note a{border-bottom:1px solid var(--rule);transition:border-color .3s}
.u:hover,.prose a:hover,.note a:hover{border-color:var(--ink)}
.btn{display:inline-block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:400;padding:15px 34px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;transition:.35s var(--ease);border-radius:0}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-light{border-color:#F5F5F3;background:#F5F5F3;color:#262524}.btn-light:hover{background:transparent;color:#F5F5F3}
.btn-ghost-light{background:transparent;color:#F5F5F3;border-color:rgba(245,245,243,.65)}.btn-ghost-light:hover{background:#F5F5F3;color:#262524}
.btn[disabled]{opacity:.5;cursor:wait}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.card-img img{transition:none}}

header{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(245,245,243,.72);border-bottom:1px solid var(--hair);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
header::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
header.scrolled{background:rgba(245,245,243,.88);box-shadow:0 10px 30px rgba(38,37,36,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:1.05rem}
.brand{display:flex;align-items:center;gap:.9rem}
.brand-logo{display:block;height:20px;width:auto}
.brand-tag{font-family:var(--sans);text-transform:uppercase;letter-spacing:.26em;font-size:.6rem;color:var(--ink-40);border-left:1px solid var(--rule);padding-left:.9rem}
.brand-logo-foot{display:block;height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:2.1rem}
.nav-links a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--ink-52);transition:color .3s;padding-block:4px}
.nav-links a:hover{color:var(--ink)}
.nav-sel{color:var(--ink)!important}
.nav-sel span{display:inline-block;min-width:1.5em;text-align:center;border:1px solid var(--rule);border-radius:999px;padding:1px 6px;margin-left:.3rem;font-size:.62rem;letter-spacing:0}
.burger{display:none;background:none;border:0;cursor:pointer;width:30px;height:20px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:16px}
.burger[aria-expanded="true"] span:nth-child(1){top:9px;transform:rotate(45deg)}.burger[aria-expanded="true"] span:nth-child(2){opacity:0}.burger[aria-expanded="true"] span:nth-child(3){top:9px;transform:rotate(-45deg)}

.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;padding:0}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(38,37,36,.78),rgba(38,37,36,.45) 38%,rgba(38,37,36,.10) 62%,rgba(38,37,36,.30))}
.hero .hero-copy{position:relative;z-index:2;width:100%;padding-top:clamp(6rem,12vh,8rem);padding-bottom:clamp(3rem,8vh,6.5rem)}
.hero .display{color:#F5F5F3}.hero .label{color:rgba(245,245,243,.85)}.hero p.lead{color:rgba(245,245,243,.92)}.hero .rule{background:rgba(245,245,243,.5)}

section{padding-block:clamp(4rem,9vw,8rem)}
section.top{padding-top:clamp(7.5rem,13vw,10rem)}
.alt{background:var(--bg-alt);max-width:none}
.alt>*{max-width:calc(var(--maxw) - 2*var(--pad));margin-inline:auto}
.band{text-align:center}.band .h2{margin-inline:auto;max-width:20ch}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3.5rem);margin-top:2.6rem}
.three p{color:var(--ink-70);margin-top:.7rem}
.num{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;color:var(--ink-40);display:block;margin-bottom:.6rem}

.cards{display:grid;gap:clamp(1.2rem,2.4vw,2.2rem);margin-top:2.8rem;align-items:end}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.coll{display:block}
.card-img,.coll-img{overflow:hidden;background:#E2E0DB}
.card-img img,.coll-img img{width:100%;transition:transform 1.5s var(--ease)}
.coll-img img{aspect-ratio:4/3;object-fit:cover}
.card:hover img,.coll:hover img{transform:scale(1.04)}
.card-meta,.coll-meta{display:flex;flex-direction:column;gap:.3rem;padding-top:.85rem}
.card-t{font-size:1.15rem;line-height:1.25}
.card-p{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40)}

.product{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.stage{background:#E2E0DB;display:flex;justify-content:center}
.stage img{max-height:78vh;width:auto;max-width:100%}
.thumbs{display:flex;gap:.7rem;margin-top:.8rem}
.thumb{border:1px solid transparent;background:none;padding:0;cursor:pointer;width:92px;height:70px;overflow:hidden;opacity:.6;transition:.3s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.active,.thumb:hover{opacity:1;border-color:var(--ink)}
.presets-gallery{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.buy{position:sticky;top:6.5rem}
.story{margin-top:1.4rem;color:var(--ink-70);max-width:48ch}
.story p+p{margin-top:.9rem}.story ul{margin:1rem 0 0 1.1rem}
.sizes{border:0;margin-top:2rem;display:grid;gap:.55rem}
.sizes legend{margin-bottom:.8rem}
.size{display:flex;align-items:center;gap:.9rem;border:1px solid var(--rule);padding:.85rem 1rem;cursor:pointer;transition:.25s;font-family:var(--sans);font-size:.86rem;letter-spacing:.04em}
.size:hover{border-color:var(--ink)}
.size:has(input:checked){border-color:var(--ink);background:var(--paper)}
.size input{accent-color:var(--ink)}
.size-l{flex:1}.size-p{font-weight:400}
.qty-row{display:flex;align-items:center;gap:1rem;margin-top:1.4rem}
.qty-row input:not([type=radio]):not([type=checkbox]){width:84px}
.check{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.2rem;font-family:var(--sans);font-size:.84rem;color:var(--ink-70);cursor:pointer}
.check input{margin-top:.3rem;accent-color:var(--ink)}
.note{font-family:var(--sans);font-size:.8rem;color:var(--ink-52);margin-top:1.2rem;max-width:58ch;line-height:1.55}
.price-line{font-size:1.7rem;margin-top:1.4rem}.price-line s{font-size:1.1rem;color:var(--ink-40);margin-left:.5rem}
.details{margin-top:2.2rem;border-top:1px solid var(--hair)}
.details div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--hair)}
.details dt{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--ink-40);padding-top:.35rem}
.details dd{font-size:1rem;color:var(--ink-70)}

.form{margin-top:2.4rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
.field.full{grid-column:1/-1}
.field label,.qty-row label{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--ink-52);margin-bottom:.45rem}
.field small{text-transform:none;letter-spacing:.02em;color:var(--ink-40);font-size:.72rem}
input:not([type=radio]):not([type=checkbox]),textarea{width:100%;font:300 1.05rem var(--serif);color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:.8rem .9rem;border-radius:0;transition:border-color .3s}
input:not([type=radio]):not([type=checkbox]):focus,textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.size:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{font-family:var(--sans);font-size:.84rem;margin-top:1rem;min-height:1.3em;color:#8a2c1c}
.sel-list{margin-top:2.4rem;border-top:1px solid var(--hair)}
.sel-item{display:grid;grid-template-columns:96px 1fr auto;gap:1.2rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--hair)}
.sel-item img{width:96px;height:72px;object-fit:cover;background:#E2E0DB}
.sel-item .t{font-size:1.2rem;line-height:1.2}
.sel-item .m{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);margin-top:.25rem}
.sel-item .r{text-align:right;font-family:var(--sans);font-size:.9rem}
.sel-item .q{display:flex;align-items:center;gap:.7rem;margin-top:.5rem;font-family:var(--sans);font-size:.85rem}
.sel-item .q button{width:28px;height:28px;border:1px solid var(--rule);background:none;cursor:pointer;font-size:1rem;line-height:1;color:var(--ink)}
.sel-item .q button:hover{border-color:var(--ink)}
.sel-item .r button{background:none;border:0;font:inherit;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);cursor:pointer;border-bottom:1px solid var(--rule);margin-top:.4rem}
.sel-total{font-family:var(--sans);font-size:.9rem;text-align:right;margin-top:1rem;color:var(--ink-70)}
.sel-total strong{color:var(--ink);font-weight:500;font-size:1.05rem}
.empty,.done{margin-top:2.4rem}
.done:focus{outline:none}
.prose p{margin-top:1rem;color:var(--ink-70);max-width:64ch}
.prose .h3{margin-top:2.6rem}
.prose strong{font-weight:400;color:var(--ink)}
.linkrow{display:flex;justify-content:space-between;border:1px solid var(--rule);padding:1.1rem 1.3rem;margin-top:.8rem;font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;transition:.3s}
.linkrow:hover{background:var(--ink);color:var(--bg)}

footer{border-top:1px solid var(--hair);padding-block:clamp(3rem,6vw,4.5rem)}
.foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot a{color:var(--ink-70);transition:.3s}.foot a:hover{color:var(--ink)}
.foot-links{display:flex;flex-direction:column;gap:.6rem;font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem}
.foot-h{color:var(--ink-40);font-size:.6rem;letter-spacing:.24em;margin-bottom:.3rem}
.copy{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;color:var(--ink-40);text-transform:uppercase;margin-top:2.5rem;line-height:1.9}
.copy a{border-bottom:1px solid var(--rule)}

@media(max-width:1000px){.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}.product{grid-template-columns:minmax(0,1fr)}.buy{position:static}}
@media(max-width:860px){
  .nav-links{position:fixed;top:0;left:0;right:0;z-index:40;flex-direction:column;align-items:center;gap:1.3rem;padding:5rem 1.5rem 2rem;background:rgba(245,245,243,.96);border-bottom:1px solid var(--hair);box-shadow:0 18px 40px rgba(38,37,36,.10);transform:translateY(-105%);visibility:hidden;transition:transform .4s var(--ease),visibility .4s}
  .nav-links.open{transform:translateY(0);visibility:visible}.nav-links a{font-size:1rem}
  .burger{display:block;z-index:60}
  .hero{min-height:86vh}
  .three{grid-template-columns:1fr}
  .cards.three-col{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  body{font-size:1.06rem}
  .cards.three-col,.cards.four{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:1fr}
  .sel-item{grid-template-columns:72px 1fr}.sel-item img{width:72px;height:56px}.sel-item .r{grid-column:2;text-align:left}
  .details div{grid-template-columns:1fr;gap:.1rem}
  .brand-tag{display:none}
}