/* ============================================================
   TRYG — shared stylesheet
   Ground: near-black steel. Accent: safety orange #FF5A00.
   Hard corners throughout. Hairline rules as structure.
   ============================================================ */
:root{
  color-scheme: dark;

  --ink:        #0B0D10;
  --steel-900:  #14181D;
  --steel-800:  #1A1F26;
  --steel-700:  #232A33;
  --rule:       #262E38;
  --rule-soft:  #1C222A;

  --orange:     #FF5A00;
  --orange-hot: #FF7F33;
  --orange-dim: rgba(255,90,0,.14);

  --bone:       #F1F3F5;
  --zinc:       #8D96A3;
  --zinc-dim:   #646D79;

  --ok:         #4FB477;

  --display: "Arial Narrow","Helvetica Neue",Arial,system-ui,sans-serif;
  --body:    system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:    "Roboto Mono","Cascadia Mono",Consolas,"SF Mono",ui-monospace,monospace;

  --measure: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  background:var(--ink);
  color:var(--zinc);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:87.5%;
  color:var(--bone);
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.96;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}

.wrap{ max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter) }

/* mono utility label — spec-sheet language */
.code{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--zinc-dim);
}
.code b{ color:var(--orange); font-weight:500 }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(11,13,16,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{ display:flex; align-items:center; gap:28px; height:68px }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
.brand svg, .brand img{ width:34px; height:34px; display:block; color:var(--orange) }
.brand-txt{
  font-family:var(--display); font-weight:700; font-stretch:87.5%;
  font-size:26px; letter-spacing:.02em; color:var(--bone); line-height:1;
}
.brand-sub{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.3em;
  color:var(--zinc-dim); display:block; margin-top:3px;
}
.nav{ display:flex; gap:26px }
.nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--zinc); text-decoration:none;
  padding:4px 0; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--bone); border-bottom-color:var(--orange) }
@media(max-width:900px){ .nav{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 22px; border:1px solid transparent; text-decoration:none;
  cursor:pointer; transition:background .16s, border-color .16s, color .16s, transform .16s;
  white-space:nowrap;
}
.btn-pri{ background:var(--orange); color:#0B0D10; font-weight:600 }
.btn-pri:hover{ background:var(--orange-hot) }
.btn-ghost{ border-color:var(--rule); color:var(--bone); background:transparent }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange) }
.btn-wa{ background:#1F2C33; color:var(--bone); border-color:var(--rule) }
.btn-wa:hover{ background:#25D366; color:#07140C; border-color:#25D366 }
.btn:active{ transform:translateY(1px) }
.btn-sm{ padding:9px 15px; font-size:11px }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px }

/* ---------- hero (home) ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule) }
.hero-in{
  display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:center;
  padding-block:clamp(64px,10vw,120px);
}
@media(max-width:1000px){ .hero-in{ grid-template-columns:1fr } .hero-mark{ display:none } }
.hero h1{ font-size:clamp(46px,8.2vw,104px); letter-spacing:-.012em; margin-bottom:26px }
.hero h1 em{ font-style:normal; color:var(--orange) }
.hero-lede{ font-size:clamp(16px,2vw,19px); max-width:56ch; color:var(--zinc); margin-bottom:34px }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px }
.hero-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule); padding-top:22px; gap:24px; max-width:640px;
}
@media(max-width:620px){ .hero-stats{ grid-template-columns:1fr; gap:16px } }
.hero-stats dt{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--zinc-dim); margin-bottom:5px }
.hero-stats dd{ margin:0; font-family:var(--display); font-weight:700; font-stretch:87.5%; text-transform:uppercase; font-size:19px; color:var(--bone); line-height:1.1 }
.hero-mark{ justify-self:end; opacity:.5 }
.hero-mark svg{ width:340px; height:340px; display:block; color:var(--steel-700) }

/* the one flourish: industrial hazard band */
.hazard{
  height:7px;
  background:repeating-linear-gradient(-45deg, var(--orange) 0 14px, var(--ink) 14px 28px);
  opacity:.85;
}

/* ---------- category page hero ---------- */
.chero{ border-bottom:1px solid var(--rule); padding-block:clamp(40px,6vw,72px) }
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--zinc-dim); margin-bottom:20px }
.crumb a{ text-decoration:none; color:var(--zinc-dim) }
.crumb a:hover{ color:var(--orange) }
.crumb span{ color:var(--orange); margin-inline:8px }
.chero h1{ font-size:clamp(38px,6.2vw,74px); letter-spacing:-.01em; margin-bottom:22px; max-width:20ch }
.chero-lede{ font-size:clamp(16px,2vw,18.5px); max-width:62ch; margin-bottom:30px }
.chero-cta{ display:flex; gap:12px; flex-wrap:wrap }

/* ---------- generic section ---------- */
.sec{ padding-block:clamp(60px,8vw,104px); border-bottom:1px solid var(--rule) }
.sec-tight{ padding-block:clamp(48px,6vw,76px) }
.sec-head{ margin-bottom:46px; max-width:64ch }
.sec-head .code{ display:block; margin-bottom:14px }
.sec-head h2{ font-size:clamp(30px,4.4vw,50px); margin-bottom:16px }
.sec-head p{ font-size:17px }

/* ---------- chain / why direct ---------- */
.chain{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--rule) }
@media(max-width:820px){ .chain{ grid-template-columns:1fr } }
.chain-col{ background:var(--steel-900); padding:34px }
.chain-col h3{ font-size:22px; margin-bottom:6px }
.chain-col > .code{ display:block; margin-bottom:22px }
.chain-list{ list-style:none; padding:0; margin:0 }
.chain-list li{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  padding:11px 0; border-bottom:1px dashed var(--rule-soft);
  display:flex; justify-content:space-between; gap:16px;
}
.chain-list li:last-child{ border-bottom:0 }
.chain-list .tag{ color:var(--zinc-dim); white-space:nowrap }
.chain-a .chain-list .tag{ color:#B4534A }
.chain-b .chain-list .tag{ color:var(--ok) }
.chain-b{ box-shadow:inset 3px 0 0 var(--orange) }

/* ---------- category cards ---------- */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--rule) }
@media(max-width:940px){ .cats{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:620px){ .cats{ grid-template-columns:1fr } }
.cat{
  background:var(--steel-900); padding:30px 26px 26px; position:relative;
  transition:background .18s; display:flex; flex-direction:column; min-height:230px;
  text-decoration:none;
}
.cat:hover{ background:var(--steel-800) }
.cat:hover .cat-no, .cat:hover .cat-ask{ color:var(--orange) }
.cat-no{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--zinc-dim); margin-bottom:16px; transition:color .18s }
.cat h3{ font-size:23px; margin-bottom:12px }
.cat ul{ list-style:none; padding:0; margin:0 0 18px; font-size:14px; line-height:1.85 }
.cat li::before{ content:"—"; color:var(--orange); margin-right:8px; opacity:.6 }
.cat-ask{
  margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--zinc-dim);
  border-top:1px solid var(--rule-soft); padding-top:14px; transition:color .16s;
}
.cats-note{
  margin-top:2px; background:var(--steel-900); padding:26px;
  font-family:var(--mono); font-size:13px; color:var(--zinc);
  border-left:3px solid var(--orange);
}

/* ---------- process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--rule) }
@media(max-width:980px){ .steps{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .steps{ grid-template-columns:1fr } }
.step{ background:var(--steel-900); padding:30px 26px }
.step-n{
  font-family:var(--display); font-weight:700; font-stretch:87.5%;
  font-size:52px; line-height:1; color:var(--steel-700); margin-bottom:14px;
}
.step h3{ font-size:19px; margin-bottom:10px }
.step p{ font-size:14.5px }
.step-meta{
  margin-top:16px; padding-top:12px; border-top:1px dashed var(--rule-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--orange);
}

/* ---------- tables ---------- */
.tbl-scroll{ overflow-x:auto; background:var(--steel-900); padding:30px }
table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px; min-width:520px }
th,td{ text-align:left; padding:12px 16px 12px 0; border-bottom:1px solid var(--rule-soft); vertical-align:top }
th{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--zinc-dim); font-weight:400 }
td:first-child{ color:var(--bone) }
.tbl-num td:last-child, .tbl-num th:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
tr.total td{ border-bottom:0; border-top:2px solid var(--orange); color:var(--bone); padding-top:14px; font-size:15px }
.tbl-cap{ font-family:var(--mono); font-size:11px; color:var(--zinc-dim); margin-top:14px; line-height:1.6 }

/* ---------- landed cost ---------- */
.landed{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--rule); align-items:stretch }
@media(max-width:900px){ .landed{ grid-template-columns:1fr } }
.landed-copy{ background:var(--steel-900); padding:34px }
.landed-copy h3{ font-size:26px; margin-bottom:14px }
.landed-copy p{ font-size:15.5px; margin-bottom:14px }
.landed .tbl-scroll{ padding:34px }
.landed table{ min-width:0 }

/* ---------- buying guide ---------- */
.guide{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--rule) }
@media(max-width:820px){ .guide{ grid-template-columns:1fr } }
.guide-item{ background:var(--steel-900); padding:30px 28px }
.guide-item .code{ display:block; margin-bottom:12px }
.guide-item h3{ font-size:19px; margin-bottom:11px }
.guide-item p{ font-size:14.5px }

/* ---------- faq ---------- */
.faq{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--rule) }
@media(max-width:820px){ .faq{ grid-template-columns:1fr } }
.faq-item{ background:var(--steel-900); padding:28px }
.faq-item h3{ font-size:18px; margin-bottom:10px }
.faq-item p{ font-size:14.5px }

/* ---------- quote form ---------- */
.quote{ background:var(--steel-900); border-bottom:1px solid var(--rule) }
.quote-in{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; padding-block:clamp(56px,7vw,92px) }
@media(max-width:940px){ .quote-in{ grid-template-columns:1fr; gap:38px } }
.quote-aside h2{ font-size:clamp(30px,4.2vw,46px); margin-bottom:16px }
.quote-aside > p{ margin-bottom:26px }
.quote-points{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:12px }
.quote-points li{ font-family:var(--mono); font-size:12.5px; display:flex; gap:11px; align-items:flex-start; line-height:1.6 }
.quote-points li::before{ content:"\2713"; color:var(--orange); flex:none }
.quote-direct{ border-top:1px solid var(--rule); padding-top:22px; display:flex; flex-direction:column; gap:9px }
.quote-direct a{ font-family:var(--mono); font-size:13px; color:var(--bone); text-decoration:none; display:flex; gap:10px; align-items:center }
.quote-direct a:hover{ color:var(--orange) }
.quote-direct > span{ color:var(--zinc-dim); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--mono) }

form{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.f-full{ grid-column:1/-1 }
@media(max-width:560px){ form{ grid-template-columns:1fr } }
label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--zinc-dim); margin-bottom:7px;
}
label .req{ color:var(--orange) }
input,select,textarea{
  width:100%; background:var(--ink); border:1px solid var(--rule); color:var(--bone);
  font-family:var(--body); font-size:15px; padding:12px 13px; border-radius:0;
  transition:border-color .15s;
}
textarea{ resize:vertical; min-height:112px; line-height:1.6 }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--orange) }
input::placeholder,textarea::placeholder{ color:var(--zinc-dim); opacity:.7 }
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--zinc) 50%),linear-gradient(135deg,var(--zinc) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:38px;
}
.f-actions{ grid-column:1/-1; display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:4px }
.f-note{ grid-column:1/-1; font-family:var(--mono); font-size:11px; color:var(--zinc-dim); line-height:1.6 }
.f-msg{
  grid-column:1/-1; font-family:var(--mono); font-size:12.5px; padding:13px 15px;
  border-left:3px solid var(--orange); background:var(--ink); display:none; line-height:1.6;
}
.f-msg.show{ display:block }
.f-msg.ok{ border-left-color:var(--ok) }

/* ---------- cross-links ---------- */
.xlinks{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--rule) }
@media(max-width:820px){ .xlinks{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .xlinks{ grid-template-columns:1fr } }
.xlink{
  background:var(--steel-900); padding:22px 24px; text-decoration:none;
  display:flex; flex-direction:column; gap:6px; transition:background .18s;
}
.xlink:hover{ background:var(--steel-800) }
.xlink .code{ transition:color .18s }
.xlink:hover .code{ color:var(--orange) }
.xlink strong{
  font-family:var(--display); font-weight:700; font-stretch:87.5%; text-transform:uppercase;
  font-size:18px; color:var(--bone); line-height:1.1;
}

/* ---------- footer ---------- */
.ftr{ padding-block:52px 40px }
.ftr-in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px }
@media(max-width:820px){ .ftr-in{ grid-template-columns:1fr 1fr } }
@media(max-width:520px){ .ftr-in{ grid-template-columns:1fr } }
.ftr h4{
  font-size:13px; letter-spacing:.14em; font-family:var(--mono); font-weight:500;
  font-stretch:normal; color:var(--zinc-dim); text-transform:uppercase; margin-bottom:16px;
}
.ftr ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:14px }
.ftr a{ text-decoration:none; color:var(--zinc) }
.ftr a:hover{ color:var(--orange) }
.ftr-brand p{ font-size:14px; max-width:38ch; margin-top:14px }
.ftr-base{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--zinc-dim);
}

/* floating whatsapp */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#07140C; text-decoration:none;
  box-shadow:0 6px 24px rgba(0,0,0,.45); transition:transform .18s;
}
.wa-float:hover{ transform:scale(1.07) }
.wa-float svg{ width:28px; height:28px }

/* reveal
   Gated on .js so content is never hidden unless scripting is actually running.
   The inline head script adds .js and removes it again if tryg.js fails to load,
   so a blocked or broken script degrades to plain visible content. */
.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease }
.js .rv.in{ opacity:1; transform:none }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .rv{ opacity:1; transform:none; transition:none }
  *{ animation:none !important; transition-duration:.01ms !important }
}