/* Tamra v6 homepage — 3 folds, cinematic film + glass + copper gradient */
:root{--bg:#0b0b0a;--ink:#f3eee6;--mut:#a9a197;--cu1:#e7b58a;--cu2:#b8743f;--cu3:#f6dcc0;--line:rgba(255,255,255,.12);--glass:rgba(20,18,16,.48);--r:22px;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.h5{background:var(--bg);color:var(--ink);font:300 1rem/1.65 "Jost",system-ui,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;color:#000;padding:.5rem 1rem}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
.grad{background:linear-gradient(100deg,var(--cu3),var(--cu1) 45%,var(--cu2));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cu1);font-weight:500}
.muted{color:var(--mut);font-size:.9rem}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line);border-radius:var(--r)}

/* nav */
.h5-nav{position:fixed;inset:1rem 1rem auto;z-index:50;display:flex;align-items:center;gap:2rem;padding:.7rem .8rem .7rem 1.2rem;border-radius:999px;border:1px solid transparent;transition:.5s var(--ease)}
.h5-nav.is-solid{background:rgba(12,11,10,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
.h5-brand{display:flex;align-items:center;gap:.6rem;font:500 1.05rem "Cormorant Garamond",serif;letter-spacing:.35em}
.h5-links{display:flex;gap:1.8rem;margin-left:auto;font-size:.82rem;letter-spacing:.08em}
.h5-links a{position:relative;opacity:.8;transition:opacity .3s}
.h5-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--cu1);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.h5-links a:hover{opacity:1}.h5-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* buttons */
.h5-btn{position:relative;display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.6rem;border-radius:999px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:transform .35s var(--ease),box-shadow .45s var(--ease),background .35s;isolation:isolate}
.h5-btn i{font-style:normal;transition:transform .35s var(--ease)}
.h5-btn:hover i{transform:translateX(5px)}
.h5-btn--sm{padding:.7rem 1.2rem;font-size:.7rem;background:var(--ink);color:#15110d}
.h5-btn--glow{background:linear-gradient(100deg,var(--cu3),var(--cu1),var(--cu2));color:#1a120b;box-shadow:0 0 0 0 rgba(231,181,138,0)}
.h5-btn--glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:inherit;filter:blur(18px);opacity:0;z-index:-1;transition:opacity .45s}
.h5-btn--glow:hover{transform:translateY(-2px);box-shadow:0 12px 40px -10px rgba(231,181,138,.7)}
.h5-btn--glow:hover::before{opacity:.75;animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{opacity:.35}}
.h5-btn--ghost{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
.h5-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--cu1)}
.h5-btn:focus-visible,.tile:focus-visible{outline:2px solid var(--cu1);outline-offset:3px}

/* FOLD 1 */
.f1{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.f1-film{position:absolute;inset:0;background:#12100e url("../videos/hero-poster.jpg") center 42%/cover no-repeat}
.f1-video{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:0;transition:opacity 1.4s var(--ease)}
.f1-video.is-ready{opacity:1}
.f1-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 35%,rgba(0,0,0,.75))}
.f1-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:120px 120px;mask-image:linear-gradient(180deg,transparent,#000 60%)}
.f1-inner{position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;padding:8rem clamp(1.1rem,4vw,3rem) 5.5rem;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:1.5rem;align-items:end}
.f1-card{padding:clamp(1.6rem,3.5vw,3rem);animation:rise 1.2s var(--ease) both .2s; width:80%;}
.f1-title{font:300 clamp(2.8rem,6.6vw,6.2rem)/.98 "Cormorant Garamond",serif;letter-spacing:-.01em;margin:1.1rem 0 1.2rem}
.title1{font:800 clamp(2.8rem,6.6vw,6.2rem)/.98 "Cormorant Garamond",serif;letter-spacing:-.01em;margin:1.1rem 0 1.2rem; font-size:30px;}
.f1-title span{display:block;animation:rise 1.2s var(--ease) both}
.f1-title span:nth-child(2){animation-delay:.15s}.f1-title span:nth-child(3){animation-delay:.3s}
.f1-sub{max-width:34rem;color:#ddd4c9}
.f1-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.f1-stats{display:grid;grid-template-columns:1fr 1fr;padding:.4rem;animation:rise 1.2s var(--ease) both .5s}
.f1-stats div{padding:1.2rem 1.3rem;border-radius:16px;transition:background .35s}
.f1-stats div:hover{background:rgba(255,255,255,.06)}
.f1-stats dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.f1-stats dd{font:400 clamp(1.6rem,2.6vw,2.4rem) "Cormorant Garamond",serif}
.f1-stats dd.dd-compact{font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.2;margin-top:.45rem}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* shared heads */
.f2{padding:clamp(5rem,11vh,8rem) 0}
.f-head{max-width:46rem;margin-bottom:3rem}
.f-title{font:300 clamp(2.2rem,4.6vw,4.2rem)/1.04 "Cormorant Garamond",serif;margin-top:.8rem}
.f-title .grad{font-style:normal}
.f-lead{color:var(--mut);margin-top:1rem;max-width:36rem}

/* FOLD 2 bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(200px,20vw,270px);gap:1rem}
.t-a{grid-column:span 2;grid-row:span 2}.t-b{grid-column:span 2}.t-c{grid-column:span 1}.t-d{grid-column:span 1}
.t-e{grid-column:span 2}.t-f{grid-column:span 1}.t-g{grid-column:span 1}
.tile{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:#161412;cursor:default;transition:border-color .5s,transform .5s var(--ease),box-shadow .5s}
.tile picture,.tile picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile img{transition:transform 1.2s var(--ease),filter .6s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85));transition:opacity .5s}
.tile__body{position:absolute;inset:auto 0 0;z-index:2;padding:1.4rem 1.5rem}
.tile h3{font:400 clamp(1.25rem,1.7vw,1.7rem)/1.15 "Cormorant Garamond",serif;margin-top:.6rem;transition:transform .5s var(--ease)}
.tile__body>p:not(.big){color:#d6cdc2;font-size:.88rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.tag{display:inline-block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.tile:hover,.tile:focus-visible{border-color:rgba(231,181,138,.55);transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.08);filter:brightness(1.08)}
.tile:hover .tile__body>p,.tile:focus-visible .tile__body>p{max-height:6rem;opacity:1;margin-top:.5rem}
.tile--num,.tile--list{background:radial-gradient(120% 120% at 0 0,rgba(231,181,138,.18),transparent 60%),#15120f}
.tile--num::after,.tile--list::after{display:none}
.tile--num .tile__body>p,.tile--list .tile__body>p{max-height:none;opacity:1}
.big{font:300 clamp(3.2rem,5vw,4.6rem)/1 "Cormorant Garamond",serif;margin:.5rem 0;transition:letter-spacing .6s var(--ease)}
.tile--num:hover .big{letter-spacing:.04em}
.tile--list{}.tile--list .tile__body{inset:0;display:flex;flex-direction:column;justify-content:flex-end}
.tile ul{list-style:none;margin-top:.7rem;font-size:.85rem;color:#d6cdc2}
.tile li{padding:.3rem 0;border-top:1px solid var(--line);transition:padding .4s var(--ease),color .3s}
.tile li:hover{padding-left:.5rem;color:var(--cu1)}


/* footer */
.h5-foot{padding:0 0 2.5rem}
.foot-cta{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding:clamp(1.8rem,4vw,3.4rem);background:radial-gradient(120% 160% at 100% 0,rgba(231,181,138,.2),transparent 55%),var(--glass)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;padding:4rem 0 2.5rem;border-bottom:1px solid var(--line)}
.foot-grid h3{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cu1);font-weight:500;margin-bottom:1rem}
.foot-grid nav a,.foot-grid>div>a{display:block;padding:.3rem 0;opacity:.85;transition:opacity .3s,transform .35s var(--ease)}
.foot-grid nav a:hover,.foot-grid>div>a:hover{opacity:1;transform:translateX(4px);color:var(--cu3)}
.foot-grid .h5-brand{margin-bottom:1rem}
.copy span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;margin-left:.4rem;color:var(--mut)}
.copy.is-copied span{color:var(--cu1);border-color:var(--cu1)}
.foot-legal{padding-top:1.6rem;font-size:.78rem}

/* responsive */
@media (max-width:1024px){
  .h5-links{display:none}.h5-nav .h5-btn{margin-left:auto}
  .f1-inner{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .t-a{grid-column:span 2;grid-row:span 1}.t-b,.t-e{grid-column:span 2}.t-c,.t-d,.t-f,.t-g{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .h5-nav{inset:.6rem .6rem auto}
  .f1-inner{padding-bottom:4.5rem}
  .f1-cta .h5-btn{flex:1 1 100%;justify-content:center}
  .f1-stats dd{font-size:1.5rem}
  .bento{grid-template-columns:1fr;grid-auto-rows:240px}
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g{grid-column:span 1}
  .tile__body>p:not(.big){max-height:6rem;opacity:1;margin-top:.5rem}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:768px){.f1-video{object-position:60% center}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.f1-video{display:none}}