/* ============================================================
   Tommys Flytteservice — pitch site
   Design tokens: paper/kraft base, navy ink, signal red, haul
   yellow, fjord blue. Display: Anton. Body: Public Sans.
   Mono (data/manifest bits): IBM Plex Mono.
   ============================================================ */

:root{
  --ink:        #16233F;
  --ink-70:     rgba(22,35,63,.7);
  --ink-40:     rgba(22,35,63,.4);
  --paper:      #F5F1E6;
  --paper-2:    #ECE4D0;
  --paper-hi:   #FFFDF7;
  --signal:     #D6402C;
  --signal-dark:#AD3220;
  --haul:       #F0B400;
  --haul-hi:    #FFD54A;
  --fjord:      #3E6E8E;
  --fjord-dark: #2A4C63;
  --charcoal:   #262521;
  --line:       rgba(22,35,63,.16);
  --line-on-ink:rgba(245,241,230,.18);
  --shadow:     0 1px 0 rgba(22,35,63,.05), 0 12px 28px -14px rgba(22,35,63,.35);

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --container: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(rgba(22,35,63,.035) 1px, transparent 1px);
  background-size: 3px 3px;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
:focus-visible{
  outline: 3px solid var(--fjord);
  outline-offset: 2px;
}
.skip-link{
  position: absolute;
  left: 12px; top: -60px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus{ top: 12px; }
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 640px){
  .container{ padding-inline: 18px; }
}

/* ---------- type ---------- */
h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
h1{ font-size: clamp(2.5rem, 5.4vw + 1rem, 4.6rem); line-height: .98; }
h2{ font-size: clamp(1.9rem, 3.2vw + 1rem, 3rem); line-height: 1.02; }
h3{ font-size: clamp(1.15rem, 1vw + .9rem, 1.4rem); letter-spacing: .02em; }
p{ margin: 0; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 2px;
  background: var(--signal);
  display: inline-block;
}
.lede{
  font-size: clamp(1.02rem, .4vw + .95rem, 1.18rem);
  color: var(--ink-70);
  max-width: 54ch;
}
.section-head{
  max-width: 640px;
  margin-bottom: 44px;
}
.section-head.center{ margin-inline: auto; text-align: center; }

/* ---------- stripe divider (loading-dock hazard bar) ---------- */
.stripe{
  height: 12px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--haul) 0 18px,
    var(--ink) 18px 36px
  );
}
.stripe.thin{ height: 7px; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--paper-hi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: .01em;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); }
.btn.primary{ --btn-bg: var(--signal); --btn-fg: #fff; border-color: var(--signal); }
.btn.primary:hover{ background: var(--signal-dark); border-color: var(--signal-dark); }
.btn.ghost{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn.ghost:hover{ background: var(--ink); color: var(--paper-hi); }
.btn.on-ink{ --btn-fg: var(--ink); border-color: var(--paper); background: var(--paper); }
.btn.on-ink:hover{ background: var(--haul); border-color: var(--haul); }
.btn svg{ width: 1.05em; height: 1.05em; flex: none; }
.btn.small{ padding: 10px 18px; font-size: .86rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245,241,230,.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease, padding .2s ease;
}
.site-header.is-scrolled{ box-shadow: 0 6px 18px -12px rgba(22,35,63,.4); }
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 14px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand-badge{ width: 38px; height: 38px; flex: none; }
.brand-word{
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-word small{
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  color: var(--signal);
  font-weight: 600;
  margin-top: 3px;
}
.nav-links{
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
  font-weight: 600;
  font-size: .93rem;
}
.nav-links a{
  text-decoration: none;
  color: var(--ink-70);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color: var(--ink); border-color: var(--signal); }
.header-actions{ display: flex; align-items: center; gap: 10px; flex: none; }
.call-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  transition: border-color .15s ease, background .15s ease;
}
.call-chip:hover{ border-color: var(--ink); background: var(--paper-hi); }
.call-chip svg{ width: 16px; height: 16px; color: var(--signal); }

@media (max-width: 760px){
  .nav-links{ display: none; }
  .call-chip span{ display: none; }
  .call-chip{ padding: 10px; }
  .brand-word{ font-size: 1.05rem; }
  .header-actions .btn.small span.long{ display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  overflow: hidden;
  padding-block: 64px 30px;
}
.hero .container{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 40px;
  align-items: center;
}
.hero-copy h1{ margin-bottom: 18px; }
.hero-copy h1 .accent{ color: var(--signal); }
.hero-copy .lede{ margin-bottom: 30px; }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.trust-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trust-chip{
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-70);
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
}
.trust-chip b{
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 400;
}
.hero-art{
  position: relative;
  aspect-ratio: 6 / 5;
}
.hero-art svg{ width: 100%; height: 100%; }
.hero-note{
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-40);
  text-align: center;
}

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-art{ order: -1; max-width: 420px; margin-inline: auto; }
  .hero{ padding-block: 40px 20px; }
}

/* ============================================================
   SECTIONS (generic)
   ============================================================ */
section{ padding-block: 78px; }
@media (max-width: 640px){ section{ padding-block: 54px; } }

.bg-ink{ background: var(--ink); color: var(--paper); }
.bg-ink h2, .bg-ink h3{ color: var(--paper); }
.bg-ink .lede{ color: rgba(245,241,230,.75); }
.bg-ink .eyebrow{ color: var(--haul); }
.bg-ink .eyebrow::before{ background: var(--haul); }
.bg-paper-2{ background: var(--paper-2); }

/* ---------- services ---------- */
.services-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.service-card{
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--signal);
}
.service-icon{
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--haul);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.service-icon svg{ width: 24px; height: 24px; }
.service-card h3{ margin-bottom: 10px; }
.service-card p{ color: var(--ink-70); font-size: .95rem; }
.service-tag{
  position: absolute;
  top: 22px; right: 20px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-40);
  letter-spacing: .08em;
}
.services-note{
  margin-top: 22px;
  font-size: .92rem;
  color: var(--ink-70);
  border-left: 3px solid var(--haul);
  padding-left: 14px;
}

@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .services-grid{ grid-template-columns: 1fr; }
}

/* ---------- coverage / route ---------- */
.coverage-wrap{
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 48px;
  align-items: center;
}
.route-facts{ list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.route-facts li{
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .96rem;
  color: rgba(245,241,230,.88);
}
.route-facts svg{ width: 20px; height: 20px; flex: none; color: var(--haul); margin-top: 2px; }
.route-art{ width: 100%; }
.route-art svg{ width: 100%; height: auto; }

@media (max-width: 900px){
  .coverage-wrap{ grid-template-columns: 1fr; }
  .route-art{ order: -1; }
}

/* ---------- about / timeline ---------- */
.about-wrap{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 56px;
  align-items: start;
}
.timeline{ list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li{ position: relative; padding: 0 0 30px 26px; }
.timeline li:last-child{ padding-bottom: 0; }
.timeline li::before{
  content: "";
  position: absolute;
  left: -7px; top: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--signal);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--signal);
}
.timeline .yr{
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--signal);
  margin-bottom: 4px;
}
.timeline p{ color: var(--ink-70); font-size: .97rem; max-width: 42ch; }
.about-copy .lede{ margin-top: 18px; margin-bottom: 0; }

@media (max-width: 900px){
  .about-wrap{ grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- social proof (stamp) ---------- */
.proof-wrap{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 46px;
  align-items: center;
}
.stamp{
  width: 176px; height: 176px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: none;
  position: relative;
  transform: rotate(-6deg);
}
.stamp::before{
  content: "";
  position: absolute; inset: 10px;
  border: 1px dashed var(--ink-40);
  border-radius: 50%;
}
.stamp .big{
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
}
.stamp .small{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--ink-70);
  text-align: center;
  margin-top: 6px;
  max-width: 120px;
}
.proof-stats{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.proof-link{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--signal);
  padding-bottom: 2px;
}
.proof-link svg{ width: 18px; height: 18px; color: var(--signal); }

@media (max-width: 640px){
  .proof-wrap{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .proof-stats{ justify-content: center; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 44px;
  align-items: start;
}
.contact-info{ display: grid; gap: 22px; }
.info-row{ display: flex; gap: 14px; }
.info-row svg{ width: 22px; height: 22px; flex: none; color: var(--signal); margin-top: 2px; }
.info-row a{ text-decoration: none; font-weight: 700; }
.info-row a:hover{ color: var(--signal); }
.info-row .label{
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-40);
  margin-bottom: 3px;
}
.info-card{
  margin-top: 6px;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: .88rem;
  color: var(--ink-70);
}
.info-card b{ color: var(--ink); }

.ticket{
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  position: relative;
}
.ticket::before, .ticket::after{
  content: "";
  position: absolute;
  top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
}
.ticket::before{ left: -10px; }
.ticket::after{ right: -10px; }
.ticket-head{
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px dashed var(--line);
  padding-bottom: 16px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
}
.ticket-head .no{ color: var(--ink-40); font-size: .74rem; letter-spacing: .06em; }
.ticket-head .to{ color: var(--signal); font-weight: 700; font-size: .8rem; letter-spacing: .06em; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.field{ display: flex; flex-direction: column; gap: 7px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink-70);
}
.field label .opt{ color: var(--ink-40); font-weight: 500; }
.field input, .field select, .field textarea{
  font: inherit;
  font-size: .95rem;
  padding: 12px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--charcoal);
  width: 100%;
}
.field textarea{ resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--fjord);
  box-shadow: 0 0 0 3px rgba(62,110,142,.18);
}
.form-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px dashed var(--line);
}
.form-status{
  font-size: .85rem;
  color: var(--ink-70);
  font-family: var(--font-mono);
}
.form-status[data-state="ok"]{ color: var(--fjord-dark); }

@media (max-width: 900px){
  .contact-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .form-grid{ grid-template-columns: 1fr; }
  .ticket{ padding: 22px 18px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--ink);
  color: rgba(245,241,230,.8);
  padding-block: 46px 26px;
}
.footer-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-on-ink);
}
.footer-brand{ display: flex; gap: 12px; align-items: flex-start; max-width: 320px; }
.footer-brand .brand-badge{ width: 34px; height: 34px; margin-top: 2px; }
.footer-brand .brand-word{ color: var(--paper); font-size: 1.15rem; }
.footer-brand p{ margin-top: 8px; font-size: .86rem; color: rgba(245,241,230,.6); }
.footer-cols{ display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--haul);
  margin: 0 0 12px;
}
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.footer-col a{ text-decoration: none; color: rgba(245,241,230,.82); }
.footer-col a:hover{ color: var(--haul); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: .78rem;
  color: rgba(245,241,230,.5);
  font-family: var(--font-mono);
}
.socials{ display: flex; gap: 10px; }
.socials a{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-on-ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.socials a:hover{ background: var(--haul); border-color: var(--haul); color: var(--ink); }
.socials svg{ width: 17px; height: 17px; }

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* ---------- route marker motion ---------- */
@media (prefers-reduced-motion: no-preference){
  .route-marker{
    offset-path: path(var(--route-d));
    animation: travel 7s linear infinite;
  }
  @keyframes travel{
    0%{ offset-distance: 0%; }
    100%{ offset-distance: 100%; }
  }
  .dash-anim{ animation: dashmove 1.6s linear infinite; }
  @keyframes dashmove{ to{ stroke-dashoffset: -24; } }
}