/* ==========================================================================
   Graphene Thermal Management, Inc.
   Palette and type derived from the GTM identity: navy #00429F, flame #E67E0D,
   near-black #14191C, on the hexagonal graphene lattice of the mark.
   ========================================================================== */

:root{
  --ink:#14191C;
  --ink-soft:#232A2F;
  --navy:#00429F;
  --navy-lift:#2E71CE;
  --flame:#E67E0D;
  --flame-soft:#F2A34A;
  --paper:#FFFFFF;
  --surface:#EFF3F6;
  --surface-deep:#E2E9EF;
  --slate:#5C6771;
  --hair:#D3DBE2;

  --measure:64ch;
  --gutter:clamp(20px, 5vw, 72px);
  --rhythm:clamp(56px, 8vw, 116px);

  --f-display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-text:'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-text); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--flame); outline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; letter-spacing:-.021em; line-height:1.06; margin:0; }
h1{ font-size:clamp(2.5rem, 5.4vw, 4.15rem); }
h2{ font-size:clamp(1.85rem, 3.3vw, 2.7rem); line-height:1.1; }
h3{ font-size:1.22rem; letter-spacing:-.012em; line-height:1.25; }
h4{ font-size:1.02rem; letter-spacing:0; }
p{ margin:0 0 1.05em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:1240px; margin:0 auto; padding-inline:var(--gutter); }
.band{ padding-block:var(--rhythm); }
.band--tight{ padding-block:calc(var(--rhythm) * .62); }
.band--surface{ background:var(--surface); }
.band--ink{ background:var(--ink); color:#E7ECF0; }
.band--ink h2,.band--ink h3{ color:#fff; }
.band--ink p{ color:#B9C4CD; }

/* ---- section marker: a navy rule that encodes "new section", not decoration ---- */
.marker{ display:block; width:52px; height:4px; background:var(--navy); margin-bottom:22px; }
.marker--flame{ background:var(--flame); }
.lede{ font-size:clamp(1.06rem,1.5vw,1.26rem); color:var(--slate); max-width:60ch; }
.band--ink .lede{ color:#AEBAC4; }

/* ---- header ---- */
.masthead{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(9px); border-bottom:1px solid var(--hair);
}
.masthead__in{ display:flex; align-items:center; gap:26px; min-height:74px; }
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:30px; width:auto; }
.brand:hover{ text-decoration:none; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav a{
  font-size:.94rem; font-weight:500; color:var(--ink-soft); padding:9px 13px; border-radius:2px;
  border-bottom:2px solid transparent;
}
.nav a:hover{ text-decoration:none; color:var(--navy); }
.nav a[aria-current="page"]{ color:var(--navy); border-bottom-color:var(--flame); }
.nav a.btn{ margin-left:12px; color:#fff; border-bottom:2px solid var(--navy); }
.nav a.btn:hover{ color:#fff; border-bottom-color:#00357E; }
.navtoggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--hair);
  border-radius:3px; padding:9px 12px; font:inherit; font-size:.9rem; cursor:pointer; color:var(--ink);
}

@media (max-width: 900px){
  .navtoggle{ display:block; }
  .nav{
    position:absolute; inset:74px 0 auto 0; background:var(--paper); border-bottom:1px solid var(--hair);
    flex-direction:column; align-items:stretch; gap:0; padding:10px var(--gutter) 22px; display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--hair); border-radius:0; }
  .nav a[aria-current="page"]{ border-bottom-color:var(--flame); }
  .nav .btn{ margin:16px 0 0; text-align:center; }
}

/* ---- buttons ---- */
.btn{
  display:inline-block; font-family:var(--f-text); font-weight:600; font-size:.95rem;
  padding:13px 22px; border:2px solid var(--navy); background:var(--navy); color:#fff;
  border-radius:2px; cursor:pointer; line-height:1.2;
}
.btn:hover{ background:#00357E; border-color:#00357E; text-decoration:none; color:#fff; }
.btn--ghost{ background:transparent; color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:#fff; }
.btn--onink{ background:var(--flame); border-color:var(--flame); color:#14191C; }
.btn--onink:hover{ background:var(--flame-soft); border-color:var(--flame-soft); color:#14191C; }
.btn--quiet{ background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.btn--quiet:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }

/* ---- hero ---- */
.hero{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.hero__lattice{ position:absolute; inset:0; opacity:.16; pointer-events:none; }
.hero__in{
  position:relative; z-index:2; display:grid; gap:clamp(34px,5vw,64px);
  grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center;
  padding-block:clamp(58px,8vw,104px);
}
.hero h1{ color:#fff; max-width:15ch; }
.hero p{ color:#B9C4CD; max-width:52ch; font-size:clamp(1.04rem,1.4vw,1.2rem); margin-top:24px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
@media (max-width: 940px){ .hero__in{ grid-template-columns:1fr; } }

/* the stack figure is the hero image: a cross-section of the thermal path */
.stackfig{ width:100%; height:auto; }
.stackfig .heat{ transform-origin:center; }
@media (prefers-reduced-motion: no-preference){
  .stackfig .rise{ animation:rise 2.6s cubic-bezier(.4,0,.2,1) .35s 1 both; }
  .stackfig .warm{ animation:warm 2.2s ease-out .5s 1 both; }
}
@keyframes rise{
  0%{ transform:translateY(26px); opacity:0; }
  55%{ opacity:1; }
  100%{ transform:translateY(-6px); opacity:.95; }
}
@keyframes warm{ from{ opacity:0; } to{ opacity:1; } }

/* ---- split content ---- */
.split{ display:grid; gap:clamp(30px,5vw,68px); grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
.split--even{ grid-template-columns:1fr 1fr; }
.split--flip > :first-child{ order:2; }
@media (max-width: 860px){
  .split,.split--even{ grid-template-columns:1fr; }
  .split--flip > :first-child{ order:0; }
}

/* ---- product rows ---- */
.prod{ display:grid; gap:clamp(26px,4vw,54px); grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  align-items:center; padding-block:clamp(38px,5vw,60px); border-top:1px solid var(--hair); }
.prod:first-of-type{ border-top:0; padding-top:0; }
.prod__shot{ background:#fff; border:1px solid var(--hair); border-radius:3px; overflow:hidden; }
.prod__shot img{ width:100%; height:270px; object-fit:contain; }
.prod h3{ font-size:1.55rem; }
@media (max-width: 860px){ .prod{ grid-template-columns:1fr; } .prod__shot img{ height:210px; } }

/* ---- capability chips: what we publish openly ---- */
.caps{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.caps li{
  font-size:.87rem; font-weight:600; color:var(--ink); background:var(--surface);
  border:1px solid var(--surface-deep); border-left:3px solid var(--flame);
  padding:8px 13px; border-radius:2px;
}
.band--ink .caps li{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
  border-left-color:var(--flame); color:#fff; }

/* ---- feature grid ---- */
.grid{ display:grid; gap:clamp(20px,2.6vw,30px); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 980px){ .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.tile{ border-top:3px solid var(--navy); padding-top:18px; }
.tile--flame{ border-top-color:var(--flame); }
.tile h3{ margin-bottom:9px; }
.tile p{ font-size:.97rem; color:var(--slate); }
.band--ink .tile{ border-top-color:var(--flame); }
.band--ink .tile p{ color:#AEBAC4; }

/* ---- the one place numbers appear big ---- */
.figure{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,5vw,3.9rem);
  letter-spacing:-.035em; color:var(--navy); line-height:.95; }
.figure span{ font-size:.4em; letter-spacing:-.01em; }
.figure--flame{ color:var(--flame); }
.figcap{ font-size:.95rem; color:var(--slate); margin-top:12px; max-width:34ch; }
.band--ink .figcap{ color:#AEBAC4; }
.band--ink .figure{ color:#7FB0F0; }
.band--ink .figure--flame{ color:var(--flame-soft); }

/* ---- steps (a genuine sequence, so numbered) ---- */
.steps{ counter-reset:s; display:grid; gap:clamp(22px,3vw,34px); grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width: 1000px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px){ .steps{ grid-template-columns:1fr; } }
.step{ counter-increment:s; border-left:3px solid var(--hair); padding-left:18px; }
.step::before{ content:counter(s); display:block; font-family:var(--f-display); font-weight:800;
  font-size:1.05rem; color:var(--flame); margin-bottom:7px; }
.step h3{ font-size:1.05rem; margin-bottom:7px; }
.step p{ font-size:.94rem; color:var(--slate); }

/* ---- lists ---- */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{ position:relative; padding-left:26px; margin-bottom:13px; max-width:var(--measure); }
.ticks li::before{
  content:''; position:absolute; left:0; top:.55em; width:10px; height:11px; background:var(--flame);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.band--ink .ticks li{ color:#C6D0D8; }

/* ---- callout ---- */
.note{ border-left:4px solid var(--navy); background:var(--surface); padding:22px 26px; }
.note h3{ font-size:1.06rem; margin-bottom:8px; }
.note p{ font-size:.97rem; color:var(--slate); }

/* ---- forms ---- */
.form{ display:grid; gap:18px; max-width:620px; }
.field label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--hair);
  border-radius:2px; background:#fff; color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--navy); }
.field textarea{ min-height:130px; resize:vertical; }
.field small{ display:block; margin-top:6px; font-size:.85rem; color:var(--slate); }
.form__row{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width: 620px){ .form__row{ grid-template-columns:1fr; } }

/* ---- footer ---- */
.foot{ background:var(--ink); color:#98A5AE; padding-block:clamp(46px,6vw,72px); font-size:.93rem; }
.foot a{ color:#C6D0D8; }
.foot a:hover{ color:#fff; }
.foot__grid{ display:grid; gap:34px; grid-template-columns:2fr 1fr 1fr 1fr; }
@media (max-width: 860px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .foot__grid{ grid-template-columns:1fr; } }
.foot img{ height:78px; width:auto; margin-bottom:20px; }
.foot h4{ color:#fff; font-size:.95rem; margin-bottom:12px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:9px; }
.foot__base{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.86rem; }

/* ---- misc ---- */
.crumb{ font-size:.88rem; color:var(--slate); margin-bottom:16px; }
.crumb a{ color:var(--slate); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--gutter); top:10px; z-index:100; background:#fff; padding:10px 16px;
  border:2px solid var(--navy); }
.center-narrow{ max-width:70ch; }