/* ==========================================================================
   Onwards Tissue — homepage
   Rebuilt from onwardstissue.com (Wix) as a static, responsive page.
   Measured values from the original at a 1440px viewport are noted inline.
   ========================================================================== */

/* ── Fonts (self-hosted, Inter — SIL OFL; stand-in for the original's SF Pro) */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  --ink:            #111111;   /* body text                     */
  --steel:          #4682B4;   /* focus ring + footer icon hover */
  --btn-ink:        #0658B2;   /* button label                  */
  --btn-border:     #E3E0DC;   /* button outline                */
  --tint:           #F5F5F7;   /* cards band                    */
  --white:          #ffffff;

  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",
              Roboto,"Helvetica Neue",Arial,sans-serif;

  --header-h:       54px;      /* measured: header 54px tall    */
  --canvas:         980px;     /* measured: content canvas      */
  --gutter:         20px;
  --radius-card:    20px;      /* measured: 20px                */
  --radius-pill:    20px;

  --ease:           cubic-bezier(.22,.61,.36,1);
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;
  font-size:14px;transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

/* The original lays everything out on a 980px canvas with no side padding,
   so the cards run edge-to-edge of that canvas. The gutter only exists on
   screens narrower than the canvas. */
.container{
  width:100%;
  max-width:calc(var(--canvas) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── Header (fixed, 54px, white — matches original) ───────────────────── */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  background:var(--white);
  transition:box-shadow .25s var(--ease);
}
.site-header.is-stuck{box-shadow:0 1px 0 rgba(17,17,17,.06),0 6px 18px rgba(17,17,17,.05)}

.header-inner{
  position:relative;
  height:100%;
  max-width:var(--canvas);
  margin-inline:auto;
  padding-inline:0;
}

/* Logo sits 28px inside the canvas (measured). It is the only thing left in
   the bar — the nav was removed — so it stays absolutely positioned rather
   than falling back on flex alignment. */
.brand{
  position:absolute;
  left:28px;
  top:50%;
  transform:translateY(-50%);
  display:block;
}
/* Lakunci lockup: mark + script + caps. 40px is the tallest size that keeps
   ~7px of breathing room inside the 54px bar while staying legible — the
   previous single-line badge could afford to sit at 28px. */
.brand img{height:40px;width:auto}

/* No nav, no dropdown, no hamburger: every menu item the original had pointed
   at a separate page that this build does not contain, and the logo itself
   links back to the top. See README for the list of removals. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* The original pinned this band to a fixed 800px, which cropped the baked-in
   tagline ("Think of Tissue. Think of us.").
   The artwork is now Lakunci's key visual: a 1024x572 (1.79:1) poster with
   the headline top-left and the product podium filling the bottom, so there
   is no slack edge left to crop — cover would guillotine the headline or the
   podium. The photo is therefore fitted whole (contain) and the leftover band
   around it is filled with a blurred, dimmed copy of that very same photo, so
   the seam reads as a soft halo instead of a hard letterbox. 44vw keeps the
   band as tall as before, stepping down at the breakpoints below. */
.hero{
  position:relative;
  margin-top:var(--header-h);
  height:clamp(400px,44vw,800px);
  background:#20242a;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-8%;                          /* hides the blurred edge falloff */
  z-index:0;
  background:url("../assets/hero.jpg") center/cover no-repeat;
  filter:blur(38px) brightness(.70) saturate(1.05);
}
.hero__media{position:relative;z-index:1;display:block;width:100%;height:100%}
.hero__media img{
  width:100%;height:100%;
  object-fit:contain;                 /* never crop the poster */
  object-position:50% 50%;
  animation:heroIn 1.6s var(--ease) both;
}
@keyframes heroIn{
  from{transform:scale(1.045);opacity:.55}
  to{transform:none;opacity:1}
}

/* The hero is ONE static product image — no carousel, no pager.
   The original shipped Wix slideshow arrows here, but the slideshow held a
   single slide, so the arrows were dead UI. They are gone, and the round
   pulsing dot that briefly stood in for them is gone too: on a product
   display it reads as a slideshow pager, which this band is not. */

/* ── Cards band ───────────────────────────────────────────────────────── */
.cards{
  background:var(--tint);             /* measured: #F5F5F7 */
  padding:31px 0 30px;
}
.cards__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;                           /* measured: 30px */
}
.card{
  background:var(--white);
  border:1px solid rgba(17,17,17,0);
  border-radius:var(--radius-card);
  padding:31px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,17,17,.07)}
.card--wide{margin-top:30px}

.card__title{
  font-size:45px;                     /* measured: 45px */
  line-height:1.2;
  font-weight:500;                    /* SF Pro Display Medium */
  letter-spacing:-.4px;
  color:var(--ink);
}

/* pill button — measured 124x37, radius 20, 1px #E3E0DC, label #0658B2 14px/1.4px */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:124px;
  height:37px;
  margin-top:37px;                    /* measured gap under the heading */
  padding:0 20px;
  border:1px solid var(--btn-border);
  border-radius:var(--radius-pill);
  background:var(--white);
  color:var(--btn-ink);
  font-size:14px;
  letter-spacing:1.4px;
  line-height:1;
  transition:background .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{
  background:var(--btn-ink);
  border-color:var(--btn-ink);
  color:#fff;
  box-shadow:0 8px 20px rgba(6,88,178,.22);
}

/* product range chips */
.range{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:20px;
  max-width:620px;                    /* keeps the wrap balanced (4 + 3) */
}
.range li{
  padding:7px 15px;
  border-radius:999px;
  background:var(--tint);
  border:1px solid rgba(17,17,17,.05);
  font-size:13.5px;
  letter-spacing:.5px;
  color:#41454a;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.range li:hover{background:#ecedf1;color:var(--ink);transform:translateY(-1px)}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer{
  background:var(--white);
  padding:43px var(--gutter) 10px;
}
.footer-grid{
  /* Was 3x 1fr / 920px with a page-link column on the left. That column is
     gone, so the two remaining columns are pulled in to keep the original's
     ~230px gap between the contact block and the social icons instead of
     letting them drift to the far edges. */
  max-width:520px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
}

.fcol{text-align:center}

.ico-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.ico-link:hover{color:var(--steel);transform:translateY(-1px)}
.ico{display:block}
.ico--phone{width:28px;height:28px}     /* measured 28x28 */
.ico-link--mail{display:block;margin-top:70px}
.ico--mail{width:34px;height:24px;margin-inline:auto}   /* measured 34x23 */

.tel,.email{font-size:14px;color:var(--ink)}
.tel{line-height:29px;margin-top:2px}   /* measured: lines 29px apart */
.tel a,.email a{transition:color .2s var(--ease)}
.tel a:hover,.email a:hover{color:var(--btn-ink)}
.email{line-height:28px;margin-top:34px}

.fcol--social{padding-top:54px}
.social{display:flex;justify-content:center;gap:26px}
.social a{
  display:inline-flex;
  color:var(--ink);
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.social svg{width:40px;height:40px}     /* glyphs measured ~40px */
.social a:hover{color:var(--btn-ink);transform:translateY(-2px)}

.copyright{
  margin-top:62px;                      /* measured: 62px below the grid */
  text-align:center;
  font-size:14px;
  color:var(--ink);
  letter-spacing:.1px;
}

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease) var(--reveal-delay,0ms),
             transform .7s var(--ease) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* below the 980px canvas the header needs its own gutter again */
@media (max-width:1020px){
  .header-inner{padding-inline:var(--gutter)}
  .brand{left:var(--gutter)}
}

/* hero steps down on narrower desktops */
@media (max-width:1200px){
  .hero{height:clamp(400px,44vw,620px)}
}

/* tablet */
@media (max-width:900px){
  :root{--header-h:58px}

  /* band gets shorter; the poster stays centred and whole at every width */
  .hero{height:clamp(300px,62vw,480px)}

  .cards__row{grid-template-columns:1fr;gap:20px}
  .card--wide{margin-top:20px}
  .card{padding:28px 20px}
  .card__title{font-size:36px}
  .btn{margin-top:26px}

  .footer-grid{grid-template-columns:1fr;gap:34px;max-width:420px}
  .fcol--social{padding-top:0}
  .ico-link--mail{margin-top:0}
  .fcol--contact{order:-1}
  .copyright{margin-top:34px}
}

/* phones */
@media (max-width:600px){
  :root{--gutter:16px}
  .hero{height:clamp(280px,74vw,400px)}

  .card__title{font-size:30px}
  .cards{padding:20px 0}
  .range{gap:8px;margin-top:16px}
  .range li{padding:6px 12px;font-size:12.5px}
}

/* ── Motion / contrast preferences ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none}
}
@media (prefers-contrast:more){
  :root{--btn-border:#a9a49c}
}