/* ============================================================
   Jusera — jusera.com
   Static site. No build step, no dependencies.
   ------------------------------------------------------------
   PHOTOS: every photo slot is a CSS background-image with two
   layers. The first layer is your real photo; the second is a
   built-in vector placeholder. Drop a file with the right name
   into assets/img/ and it appears automatically — no code edit.
   See PHOTOS.md for the exact filenames and sizes.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --ink:        #0b1f33;
  --ink-2:      #10314f;
  --accent:     #ff6b2c;
  --accent-dk:  #e2551a;
  --paper:      #f6f4f1;
  --paper-2:    #ede9e4;
  --white:      #ffffff;
  --body:       #33414f;
  --muted:      #6b7a89;
  --line:       #e2ddd7;
  --line-dark:  rgba(255,255,255,.16);

  --wrap:       1180px;
  --radius:     14px;
  --radius-lg:  22px;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --shadow-sm: 0 1px 2px rgba(11,31,51,.06), 0 4px 14px rgba(11,31,51,.05);
  --shadow-md: 0 2px 6px rgba(11,31,51,.07), 0 18px 40px rgba(11,31,51,.09);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-weight:700;
}
h1{ font-size:clamp(2.6rem, 6.2vw, 4.6rem); font-weight:800; letter-spacing:-.035em; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.75rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* Anchor targets must clear the sticky header */
section[id]{ scroll-margin-top:86px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:15px 28px; border-radius:100px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-dk); }
.btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-sm{ padding:10px 20px; font-size:.94rem; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(11,31,51,.06); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:20px; }

.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-name{
  font-family:var(--display); font-weight:800; font-size:1.42rem;
  letter-spacing:-.035em; color:var(--ink);
}

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-weight:500; font-size:.98rem; text-decoration:none; color:var(--ink);
  opacity:.82; transition:opacity .18s ease;
}
.nav a:hover{ opacity:1; }
.nav .btn{ opacity:1; color:#fff; }

.nav-toggle{
  display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0 10px;
}
.nav-toggle span{
  display:block; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.hero-media{
  position:absolute; inset:0;
  background-image:url('../img/hero.jpg'), url('../img/placeholder-hero.svg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero-scrim{
  position:absolute; inset:0;
  /* Two layers: a light vertical wash that anchors the mode strip at the bottom,
     and a horizontal one that darkens only the left, where the headline sits.
     Tuned so a sunrise photo keeps its colour on the right. */
  background:
    linear-gradient(180deg, rgba(11,31,51,.30) 0%, rgba(11,31,51,.18) 42%, rgba(11,31,51,.74) 100%),
    linear-gradient(90deg, rgba(11,31,51,.82) 0%, rgba(11,31,51,.67) 38%, rgba(11,31,51,.30) 72%, rgba(11,31,51,.02) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding:clamp(90px, 14vh, 150px) 24px clamp(70px, 10vh, 110px);
  max-width:960px; margin-inline:auto;
}
.hero h1{ color:#fff; margin-bottom:.35em; }
.hero .lede{ max-width:610px; }

.eyebrow{
  font-family:var(--display); font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1.1em;
}
.eyebrow--light{ color:var(--accent); }

.lede{ font-size:clamp(1.06rem, 1.7vw, 1.24rem); line-height:1.6; color:rgba(255,255,255,.86); }
.section .lede{ color:var(--body); }
.section--ink .lede{ color:rgba(255,255,255,.82); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.modes{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-dark);
  padding-block:0;
}
.modes li{
  position:relative;
  padding:22px 24px 26px 22px;
  font-family:var(--display); font-weight:600; font-size:1rem; color:#fff;
  border-right:1px solid var(--line-dark);
}
.modes li:last-child{ border-right:0; }
/* A short accent rule marks each service without implying an order. */
.modes li::before{
  content:""; position:absolute; left:0; top:calc(22px + .62em);
  width:11px; height:2px; background:var(--accent);
}

/* ---------- Sections ---------- */
.section{ padding:clamp(72px, 10vw, 120px) 0; }
.section--paper{ background:var(--paper); }
.section--ink{ background:var(--ink); color:rgba(255,255,255,.82); }
.section--ink h2,.section--ink h3,.section--ink h4{ color:#fff; }

.section-head{ max-width:660px; margin-bottom:clamp(40px, 5vw, 64px); }
.section-sub{ font-size:1.08rem; color:var(--muted); margin:0; }

.grid-2{ display:grid; gap:clamp(32px, 5vw, 72px); align-items:start; }
.grid-2--intro{ grid-template-columns:1fr 1.15fr; }
.grid-2--coverage{ grid-template-columns:1.05fr 1fr; align-items:center; }
.grid-2--why{ grid-template-columns:1fr 1.1fr; align-items:start; }
.grid-2--contact{ grid-template-columns:1fr 1fr; align-items:start; }

.big{ font-size:1.22rem; line-height:1.55; color:var(--ink); font-weight:500; }

/* ---------- Service cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 30px 30px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.card p{ margin:0; color:var(--muted); font-size:.98rem; }
.card h3{ margin-bottom:.45em; }
.ico{
  width:42px; height:42px; margin-bottom:20px;
  fill:none; stroke:var(--accent); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Photo split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.split-media{
  min-height:520px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.split-media--warehouse{
  background-image:url('../img/warehouse.jpg'), url('../img/placeholder-warehouse.svg');
}
.split-body{
  background:var(--ink); color:rgba(255,255,255,.82);
  display:flex; align-items:center;
  padding:clamp(56px, 7vw, 96px) clamp(28px, 5vw, 80px);
}
.split-copy{ max-width:520px; }
.split-copy h2{ color:#fff; }

.ticks{ margin-top:28px; display:grid; gap:13px; }
.ticks li{ position:relative; padding-left:32px; font-size:1rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:18px; height:10px; border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.step{ position:relative; padding-top:26px; border-top:2px solid var(--line); }
.step-n{
  display:block; font-family:var(--display); font-weight:800; font-size:.85rem;
  letter-spacing:.14em; color:var(--accent); margin-bottom:14px;
}
.step h3{ margin-bottom:.5em; }
.step p{ margin:0; color:var(--muted); font-size:.97rem; }

/* ---------- Coverage ---------- */
.coverage-media{
  min-height:420px; border-radius:var(--radius-lg);
  background-image:url('../img/port.jpg'), url('../img/placeholder-port.svg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.coverage-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:26px 32px; margin-top:38px;
  padding-top:34px; border-top:1px solid var(--line-dark);
}
.coverage-grid h4{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.5em;
}
.coverage-grid p{ margin:0; font-size:.97rem; color:rgba(255,255,255,.72); }

/* ---------- Why us ---------- */
.why-media{
  min-height:100%; border-radius:var(--radius-lg); min-height:460px;
  background-image:url('../img/office.jpg'), url('../img/placeholder-office.svg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.why-list{ display:grid; gap:30px; }
.why-list li{ padding-left:22px; border-left:2px solid var(--accent); }
.why-list h3{ margin-bottom:.4em; }
.why-list p{ margin:0; color:var(--muted); font-size:.99rem; }

/* ---------- Contact ---------- */
.contact-list{ margin:34px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:24px 30px; }
.contact-list dt{
  font-family:var(--display); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.contact-list dd{ margin:0; font-size:1.06rem; color:var(--ink); font-weight:500; }
.contact-list a{ color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--accent); }
.contact-list a:hover{ color:var(--accent); }

.form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(26px, 3vw, 38px); box-shadow:var(--shadow-sm);
}
.field{ margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{
  display:block; font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:7px;
}
.field input,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:10px;
  background:var(--white); transition:border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:#a6b0ba; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,107,44,.16);
}
.field textarea{ resize:vertical; min-height:110px; }
.field.has-error input,.field.has-error textarea{ border-color:#d64545; }
.field-error{ display:block; margin-top:6px; font-size:.85rem; color:#d64545; }
.form-note{ margin:14px 0 0; font-size:.88rem; color:var(--muted); text-align:center; }
.form-note a{ color:var(--ink); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.6); padding:56px 0 40px; }
.footer-inner{
  display:grid; grid-template-columns:1.4fr 1fr auto; gap:32px; align-items:start;
}
.brand--footer .brand-name{ color:#fff; }
.brand--footer .brand-mark rect{ fill:#173a5c; }
.footer-tag{ margin:14px 0 0; font-size:.95rem; max-width:280px; }
.footer-nav{ display:flex; flex-direction:column; gap:10px; }
.footer-nav a{ text-decoration:none; font-size:.95rem; color:rgba(255,255,255,.72); }
.footer-nav a:hover{ color:#fff; }
.copy{ margin:0; font-size:.88rem; align-self:end; }

/* ---------- Reveal on scroll ----------
   Scoped to .js so that without JavaScript every section is simply visible.
   Content is never hidden by something that might not run. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:32px 26px; }
  .grid-2--intro,.grid-2--coverage,.grid-2--why,.grid-2--contact{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split-media{ min-height:340px; }
  .coverage-media,.why-media{ min-height:320px; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .copy{ grid-column:1 / -1; align-self:auto; }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    padding:8px 24px 22px;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav .btn{ margin-top:16px; border-bottom:0; justify-content:center; }

  /* On narrow screens the text spans nearly the full width, so the
     side-weighted scrim no longer covers it — go evenly darker instead. */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(11,31,51,.66) 0%, rgba(11,31,51,.58) 42%, rgba(11,31,51,.88) 100%);
  }

  .modes{ grid-template-columns:1fr 1fr; }
  .modes li{ padding:16px 16px 18px 0; font-size:.94rem; }
  .modes li:nth-child(2){ border-right:0; }
  .modes li:nth-child(1),.modes li:nth-child(2){ border-bottom:1px solid var(--line-dark); }

  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .contact-list{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .split-body{ padding:52px 24px 60px; }
}

@media (max-width:460px){
  .contact-list{ grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- Print ---------- */
@media print{
  .site-header,.nav-toggle,.form,.hero-media,.hero-scrim{ display:none !important; }
  body{ color:#000; }
  .section--ink,.split-body,.hero{ background:#fff !important; color:#000 !important; }
  .section--ink h2,.split-copy h2,.hero h1{ color:#000 !important; }
}