/* ===========================================================
   TOKENS
   =========================================================== */
:root{
  --ink:        #0D0C0A;
  --paper:      #F5F1E8;
  --paper-dim:  #EAE4D6;
  --grey:       #8B8578;
  --brick:      #A83A1C;
  --brick-dim:  #C97E5E;
  --line:       rgba(13,12,10,0.14);
  --line-inv:   rgba(245,241,232,0.18);

  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --container: 1240px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 2px;
  --ease: cubic-bezier(.22,.7,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  .reveal{opacity:1 !important; transform:none !important;}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:default;
}

h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; line-height:1.05; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; background:none; border:none; cursor:pointer; color:inherit;}
input,textarea,select{font-family:inherit; font-size:1rem;}

.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:12px 20px; z-index:999;}
.skip-link:focus{left:12px; top:12px;}
:focus-visible{outline:2px solid var(--brick); outline-offset:3px;}

.eyebrow{
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--brick); display:inline-block; margin-bottom:14px;
}

.grain{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{position:fixed; top:0; left:0; height:2px; background:var(--brick); width:0%; z-index:200; transition:width .1s linear;}

/* ===== cursor accent ===== */
.cursor-dot{
  position:fixed; width:22px; height:22px; border:1px solid var(--brick); border-radius:50%;
  pointer-events:none; z-index:300; transform:translate(-50%,-50%); transition:width .2s var(--ease), height .2s var(--ease), opacity .2s;
  opacity:0; mix-blend-mode:difference;
}
.cursor-dot.is-active{opacity:1;}
.cursor-dot.is-large{width:56px; height:56px; background:var(--brick); border-color:transparent;}
@media (hover:none){.cursor-dot{display:none;}}

/* ===== scroll reveal ===== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:none;}

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad);
  background:rgba(245,241,232,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:padding .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-compact{padding:14px var(--pad); border-bottom:1px solid var(--line);}
.nav__mark{font-family:var(--f-display); font-size:1.05rem; letter-spacing:0.01em;}
.nav__links{display:flex; gap:36px; font-size:0.88rem;}
.nav__links a{position:relative; padding-bottom:2px;}
.nav__links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--ink); transition:width .25s var(--ease);}
.nav__links a:hover::after{width:100%;}
.nav__toggle{display:none; flex-direction:column; gap:5px; width:26px;}
.nav__toggle span{height:1px; background:var(--ink); width:100%;}

@media (max-width:840px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--ink); color:var(--paper);
    flex-direction:column; justify-content:center; gap:28px; padding:0 40px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    font-family:var(--f-display); font-size:1.5rem;
  }
  .nav__links.is-open{transform:translateX(0);}
  .nav__links a::after{background:var(--paper);}
  .nav__toggle{display:flex;}
}

/* ===========================================================
   HERO
   =========================================================== */
.hero{padding:64px var(--pad) 0; max-width:var(--container); margin:0 auto; position:relative; overflow:hidden;}
.hero__bg{
  position:absolute; top:-20%; right:-15%; width:60vw; height:60vw; max-width:800px; max-height:800px;
  background:radial-gradient(circle at 40% 40%, rgba(168,58,28,0.14), transparent 65%);
  z-index:-1; pointer-events:none;
}
.hero__spec{
  display:flex; gap:24px; font-family:var(--f-mono); font-size:0.68rem;
  letter-spacing:0.1em; color:var(--grey); text-transform:uppercase; margin-bottom:28px; flex-wrap:wrap;
}
.hero__title{font-size:clamp(2.8rem, 8vw, 6.6rem); max-width:14ch;}
.line-wrap{display:block; overflow:hidden;}
.hero__title .line{display:block; animation:lineUp .9s var(--ease) both;}
.hero__title .line-wrap:nth-child(2) .line{animation-delay:.12s;}
.hero__title .line-wrap:nth-child(3) .line{animation-delay:.24s;}
@keyframes lineUp{from{transform:translateY(110%);} to{transform:translateY(0);}}
.hero__title .line--accent{font-style:italic; color:var(--brick); font-weight:400;}
.hero__sub{max-width:46ch; font-size:1.08rem; color:#403C34; margin:28px 0 34px;}
.hero__sub strong{font-weight:600; color:var(--ink);}

.hero__cta{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:56px;}
.btn{
  font-family:var(--f-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:16px 30px; border-radius:var(--radius); transition:all .25s var(--ease); display:inline-block;
  position:relative; overflow:hidden;
}
.btn--primary{background:var(--ink); color:var(--paper);}
.btn--primary:hover{background:var(--brick); transform:translateY(-2px);}
.btn--ghost{border:1px solid var(--ink);}
.btn--ghost:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px);}

.hero__collage{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:200px 200px;
  gap:14px; margin-bottom:60px;
}
.swatch{background:var(--paper-dim); border:1px solid var(--line); position:relative; overflow:hidden; transition:transform .5s var(--ease);}
.swatch::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(168,58,28,0.08)); z-index:1; pointer-events:none;}
.swatch img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
.swatch:hover{transform:translateY(-4px);}
.swatch:hover img{transform:scale(1.04);}
.swatch img{transition:transform .6s var(--ease);}
.swatch--1{grid-row:1 / 3;}
.swatch--2{grid-column:2 / 4;}
.swatch__tag{
  position:absolute; bottom:12px; left:12px; font-family:var(--f-mono); font-size:0.62rem;
  letter-spacing:0.06em; color:var(--paper); line-height:1.5; z-index:2;
  background:rgba(13,12,10,0.55); padding:4px 8px; backdrop-filter:blur(2px);
}
@media (max-width:640px){
  .hero__collage{grid-template-columns:1fr 1fr; grid-template-rows:140px 140px 140px;}
  .swatch--1{grid-row:auto; grid-column:1/3;}
  .swatch--2{grid-column:auto;}
}

.scroll-cue{
  display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:0.68rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); padding-bottom:36px;
}
.scroll-cue span{width:1px; height:32px; background:var(--grey); position:relative; overflow:hidden;}
.scroll-cue span::after{content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--brick); animation:scrollLine 1.8s ease-in-out infinite;}
@keyframes scrollLine{0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}}

/* ===========================================================
   MARQUEE
   =========================================================== */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:18px 0; background:var(--paper-dim);
}
.marquee__track{
  display:flex; gap:14px; white-space:nowrap; width:max-content;
  font-family:var(--f-mono); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--grey); animation:marquee 32s linear infinite;
}
.marquee__track span:nth-child(odd){color:var(--brick);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===========================================================
   STATS
   =========================================================== */
.stats{padding:80px var(--pad); max-width:var(--container); margin:0 auto;}
.stats__row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-top:1px solid var(--line); padding-top:36px;}
.stats__num{display:block; font-family:var(--f-display); font-size:clamp(2rem,4vw,3.2rem); color:var(--brick); font-style:italic;}
.stats__label{display:block; font-family:var(--f-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); margin-top:8px;}
@media (max-width:700px){.stats__row{grid-template-columns:1fr 1fr; row-gap:32px;}}

/* ===========================================================
   SHARED SECTION HEAD
   =========================================================== */
.section-head{max-width:var(--container); margin:0 auto; padding:0 var(--pad); margin-bottom:48px;}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.9rem); max-width:20ch;}

/* ===========================================================
   WORK
   =========================================================== */
.work{padding:100px 0 40px;}
.filters{
  max-width:var(--container); margin:0 auto 40px; padding:0 var(--pad);
  display:flex; gap:10px; flex-wrap:wrap;
}
.filter{
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line); border-radius:100px; color:var(--grey);
  transition:all .2s var(--ease);
}
.filter.is-active, .filter:hover{border-color:var(--ink); color:var(--ink); background:var(--paper-dim);}

.projects{max-width:var(--container); margin:0 auto; padding:0 var(--pad);}
.project{
  display:grid; grid-template-columns:1fr 1.3fr; gap:40px; align-items:center;
  padding:44px 0; border-top:1px solid var(--line);
  transition:opacity .3s var(--ease);
}
.project:last-child{border-bottom:1px solid var(--line);}
.project.is-hidden{display:none;}
.project__media{order:2;}

/* device mockup frame */
.frame--device{background:var(--ink); border-radius:10px; padding:10px 10px 0; box-shadow:0 24px 50px -20px rgba(13,12,10,0.4);}
.frame__bar{display:flex; gap:6px; padding:2px 6px 10px;}
.frame__bar span{width:8px; height:8px; border-radius:50%; background:rgba(245,241,232,0.25);}
.frame__screen{aspect-ratio:16/10; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; border-radius:4px 4px 0 0; overflow:hidden;}

/* packaging mockup frame */
.frame--pack{aspect-ratio:4/3; background:linear-gradient(160deg, var(--paper-dim) 60%, #DED6C2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; padding:20px;}
.frame__pack-body{width:60%; aspect-ratio:3/4; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 30px -14px rgba(13,12,10,0.25); overflow:hidden;}
.frame__pack-body img{width:100%; height:100%; object-fit:contain; padding:8px;}

.frame--flat{aspect-ratio:4/3; background:var(--paper-dim); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}

.frame--photo{aspect-ratio:4/3; border:1px solid var(--line); overflow:hidden; box-shadow:0 24px 50px -20px rgba(13,12,10,0.3);}
.frame--photo img{width:100%; height:100%; object-fit:cover;}

.frame__screen img{width:100%; height:100%; object-fit:cover;}

.project:hover .frame--device, .project:hover .frame--pack, .project:hover .frame--flat, .project:hover .frame--photo{transform:scale(1.015);}
.frame--device, .frame--pack, .frame--flat, .frame--photo{transition:transform .5s var(--ease);}

.project__meta{order:1; display:flex; align-items:baseline; gap:22px;}
.project__num{font-family:var(--f-mono); font-size:0.78rem; color:var(--brick);}
.project__meta h3{font-size:1.7rem; margin-bottom:6px;}
.project__cat{font-family:var(--f-mono); font-size:0.72rem; color:var(--grey); text-transform:uppercase; letter-spacing:0.05em;}
.project__link{
  margin-left:auto; align-self:flex-end; font-family:var(--f-mono); font-size:0.74rem;
  letter-spacing:0.05em; border-bottom:1px solid var(--ink); padding-bottom:2px; white-space:nowrap;
}
.project__link:hover{color:var(--brick); border-color:var(--brick);}

.ph{
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.03em; color:var(--grey);
  text-align:center; line-height:1.6; padding:10px;
}
.ph em{font-style:italic; opacity:0.75;}

@media (max-width:760px){
  .project{grid-template-columns:1fr; gap:18px;}
  .project__media{order:1;}
  .project__meta{order:2; flex-wrap:wrap;}
  .project__link{margin-left:0;}
}

/* ===========================================================
   CASE STUDY PANELS
   =========================================================== */
.casestudies{position:relative;}
.cs{
  display:none; max-width:var(--container); margin:0 auto; padding:70px var(--pad);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink); color:var(--paper);
}
.cs.is-open{display:block; animation:csIn .5s var(--ease);}
@keyframes csIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.cs .eyebrow{color:var(--brick);}
.cs h3{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:8px;}
.cs__tags{font-family:var(--f-mono); font-size:0.74rem; color:#B8B2A2; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:32px;}
.cs__note{max-width:64ch; color:#C9C3B4; font-size:0.92rem; margin-bottom:28px; border-left:2px solid var(--brick); padding-left:16px;}
.cs__close{
  float:right; font-family:var(--f-mono); font-size:0.72rem; color:#C9C3B4;
  border:1px solid var(--line-inv); padding:8px 14px; border-radius:100px;
}
.cs__close:hover{color:var(--paper); border-color:var(--paper);}
.cs__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; margin-bottom:36px;}
.cs__grid h4{font-size:1rem; margin-bottom:8px; color:var(--paper);}
.cs__grid p{font-size:0.9rem; color:#B8B2A2; max-width:36ch;}
.cs__gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;}
.cs__gallery .ph{background:rgba(245,241,232,0.05); border:1px dashed var(--line-inv); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:#8B8578;}
.cs__gallery img{width:100%; aspect-ratio:4/3; object-fit:contain; background:rgba(245,241,232,0.06); border:1px solid var(--line-inv);}

.cs__linklist{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-inv);}
.cs__linklist a{
  display:grid; grid-template-columns:1fr 2fr auto; gap:24px; align-items:center;
  padding:22px 4px; border-bottom:1px solid var(--line-inv); transition:padding-left .3s var(--ease);
}
.cs__linklist a:hover{padding-left:14px; background:rgba(245,241,232,0.03);}
.cs__linklist-name{font-family:var(--f-display); font-size:1.1rem; color:var(--paper);}
.cs__linklist-desc{font-size:0.86rem; color:#B8B2A2; line-height:1.55;}
.cs__linklist-desc em{font-style:italic; color:#8B8578;}
.cs__linklist-url{font-family:var(--f-mono); font-size:0.72rem; color:var(--brick); white-space:nowrap; justify-self:end;}
@media (max-width:760px){
  .cs__linklist a{grid-template-columns:1fr; gap:8px;}
  .cs__linklist-url{justify-self:start;}
}

/* ===========================================================
   SERVICES
   =========================================================== */
.services{padding:120px 0; max-width:var(--container); margin:0 auto;}
.service-list{
  padding:0 var(--pad); display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--line);
}
.service-list li{
  display:grid; grid-template-columns:44px 1fr; gap:16px; padding:26px 24px 26px 0;
  border-bottom:1px solid var(--line); transition:background .3s var(--ease);
}
.service-list li:hover{background:var(--paper-dim);}
.service-list li:nth-child(odd){border-right:1px solid var(--line);}
.service-list span{font-family:var(--f-mono); font-size:0.78rem; color:var(--brick); padding-top:4px;}
.service-list h3{font-size:1.1rem; margin-bottom:6px;}
.service-list p{font-size:0.86rem; color:var(--grey); max-width:34ch;}
@media (max-width:700px){
  .service-list{grid-template-columns:1fr;}
  .service-list li:nth-child(odd){border-right:none;}
}

/* ===========================================================
   PROCESS
   =========================================================== */
.process{background:var(--ink); color:var(--paper); padding:90px 0;}
.process .section-head h2{color:var(--paper);}
.process .eyebrow{color:var(--brick);}
.process__row{
  max-width:var(--container); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(6,1fr); gap:20px;
}
.process__row h4{font-size:1rem; margin-bottom:8px;}
.process__row p{font-size:0.82rem; color:#B8B2A2;}
.process__row > div{border-top:1px solid var(--line-inv); padding-top:16px;}
@media (max-width:900px){
  .process__row{grid-template-columns:repeat(3,1fr); row-gap:36px;}
}
@media (max-width:560px){.process__row{grid-template-columns:repeat(2,1fr);}}

/* ===========================================================
   ABOUT
   =========================================================== */
.about{padding:120px var(--pad); max-width:var(--container); margin:0 auto;}
.about__grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.about__media{aspect-ratio:3/4; background:var(--paper-dim); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.about__text h2{font-size:clamp(1.6rem,3vw,2.3rem); margin:16px 0 20px; max-width:18ch;}
.about__text p{color:#403C34; max-width:56ch; margin-bottom:22px;}
.pull-quote{
  font-family:var(--f-display); font-style:italic; font-size:1.5rem; color:var(--brick);
  border-left:2px solid var(--brick); padding-left:22px; margin:32px 0; max-width:24ch;
}
.pull-quote cite{display:block; font-family:var(--f-mono); font-style:normal; font-size:0.7rem; color:var(--grey); margin-top:10px; text-transform:uppercase; letter-spacing:0.05em;}
.about__specialties{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px;}
.about__specialties li{font-family:var(--f-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--line); padding:8px 14px; border-radius:100px; color:var(--grey);}
.about__toolkit h4{font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; font-family:var(--f-mono); margin-bottom:8px; color:var(--brick);}
.about__toolkit p{font-size:0.86rem; color:var(--grey);}
@media (max-width:800px){.about__grid{grid-template-columns:1fr;}}

/* ===========================================================
   EXPERIENCE
   =========================================================== */
.experience{padding:0 var(--pad) 120px; max-width:var(--container); margin:0 auto;}
.timeline li{
  display:grid; grid-template-columns:200px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--line);
}
.timeline li:last-child{border-bottom:1px solid var(--line);}
.timeline__date{font-family:var(--f-mono); font-size:0.8rem; color:var(--brick);}
.timeline h3{font-size:1.2rem; margin-bottom:4px;}
.timeline p{color:var(--grey); font-size:0.9rem;}
.timeline__note{font-style:italic; margin-top:6px;}
.timeline__placeholder{opacity:0.55;}
@media (max-width:600px){.timeline li{grid-template-columns:1fr; gap:6px;}}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact{background:var(--ink); color:var(--paper); padding:120px 0; }
.contact__head{max-width:var(--container); margin:0 auto; padding:0 var(--pad); margin-bottom:56px;}
.contact__head h2{font-size:clamp(2rem,5vw,3.6rem); max-width:16ch; margin-bottom:18px;}
.contact__head p{color:#C9C3B4; max-width:42ch; margin-bottom:32px; font-size:1.05rem;}
.contact__cta{display:flex; gap:16px; flex-wrap:wrap;}
.contact .btn--ghost{border-color:var(--line-inv);}
.contact .btn--ghost:hover{background:var(--paper); color:var(--ink);}

.contact__form{
  max-width:var(--container); margin:0 auto 60px; padding:0 var(--pad);
  display:grid; gap:20px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-row--full{display:block;}
.contact__form label{display:flex; flex-direction:column; gap:8px; font-family:var(--f-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:#B8B2A2;}
.contact__form input, .contact__form select, .contact__form textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-inv); color:var(--paper);
  padding:10px 2px; font-size:0.95rem;
}
.contact__form input:focus, .contact__form select:focus, .contact__form textarea:focus{border-color:var(--brick);}
.contact__form select option{color:#000;}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0;}
.contact__form .btn{justify-self:start; margin-top:6px;}
.form-status{font-family:var(--f-mono); font-size:0.8rem; color:var(--brick); min-height:1.2em;}
.form-note{font-size:0.78rem; color:#8B8578;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

.contact__social{max-width:var(--container); margin:0 auto; padding:0 var(--pad); display:flex; flex-wrap:wrap; gap:28px; align-items:center;}
.contact__social a{font-size:0.9rem; border-bottom:1px solid transparent;}
.contact__social a:hover{border-color:var(--paper);}
.contact__social em{font-style:italic; color:#8B8578; font-size:0.78rem; margin-left:4px;}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{padding:60px var(--pad) 40px; text-align:center; color:var(--grey); font-size:0.85rem;}
.footer__mark{font-family:var(--f-display); font-size:1.2rem; color:var(--ink); margin-bottom:6px;}
.footer__links{display:flex; gap:24px; justify-content:center; margin:20px 0; font-size:0.8rem;}
.footer__legal{margin-top:20px; font-size:0.72rem; opacity:0.7;}

.to-top{
  position:fixed; right:22px; bottom:22px; width:42px; height:42px; border-radius:50%;
  background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:90;
}
.to-top.is-visible{opacity:1; pointer-events:auto;}