/* ============================================================
   ADIPOSO — brand stylesheet
   Palette sampled directly from the logo artwork.
   ============================================================ */

:root{
  /* --- brand --- */
  --navy:        #042862;
  --navy-deep:   #021A42;
  --navy-soft:   #1B4586;
  --copper:      #CA7651;
  --copper-lift: #E08E68;

  /* --- neutrals (cool, clinical — deliberately not warm cream) --- */
  --paper:       #F6F8FB;
  --white:       #FFFFFF;
  --mist:        #DCE3EE;
  --slate:       #5B6B85;
  --slate-light: #9AAAC2;

  /* --- type --- */
  --display: "Jost", "Avenir Next", "Century Gothic", sans-serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- rhythm --- */
  --shell: 1200px;
  --pad-x: clamp(20px, 5vw, 64px);
  --gap-section: clamp(72px, 10vw, 148px);
  --header-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--body);
  font-size:clamp(15px, 1.02vw, 17px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px;
  font-family:var(--mono); font-size:12px; text-decoration:none;
}
.skip-link:focus{ left:0; }

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

/* ============================================================
   WORDMARK — the logo rebuilt in type so it scales and recolors
   ============================================================ */
.brand{
  font-family:var(--display);
  font-weight:300;
  font-size:20px;
  letter-spacing:.34em;
  color:var(--navy);
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}
.brand-o{ position:relative; display:inline-block; }
.brand-o::after{
  content:"";
  position:absolute;
  left:calc(50% - .17em); /* optical centre, offsets letter-spacing */
  top:50%;
  width:.30em; height:.30em;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--copper);
}
.brand-sm{ font-size:16px; }

/* ============================================================
   HEADER + NAV
   ============================================================ */
.progress{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:2px; background:transparent; pointer-events:none;
}
.progress-bar{
  display:block; height:100%; width:0;
  background:var(--copper);
  transition:width .12s linear;
}

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:110;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(246,248,251,.78);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-header.is-stuck{
  border-bottom-color:var(--mist);
  background:rgba(246,248,251,.92);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav-link{
  position:relative;
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:var(--display);
  font-size:14px; font-weight:400;
  letter-spacing:.02em;
  color:var(--slate);
  text-decoration:none;
  padding-block:6px;
  transition:color .25s ease;
}
.nav-num{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.08em; color:var(--slate-light);
  transition:color .25s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--copper);
  transform:scaleX(0); transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav-link:hover{ color:var(--navy); }
.nav-link.is-active{ color:var(--navy); }
.nav-link.is-active .nav-num{ color:var(--copper); }
.nav-link.is-active::after{ transform:scaleX(1); }

.nav-toggle{
  display:none;
  width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--mist); border-radius:2px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:16px; height:1.5px; background:var(--navy);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ============================================================
   TYPE SCALE
   ============================================================ */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate);
  margin:0 0 28px;
}
.eyebrow-num{ color:var(--copper); }
.eyebrow::after{
  content:""; flex:1; height:1px; background:var(--mist); max-width:120px;
}

h1{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(38px, 5.4vw, 68px);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 26px;
}
.h1-sub{
  display:block;
  margin-top:20px;
  font-size:clamp(17px, 1.6vw, 22px);
  line-height:1.4;
  letter-spacing:.005em;
  color:var(--slate);
}

.display{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(29px, 3.6vw, 48px);
  line-height:1.12;
  letter-spacing:-.012em;
  margin:0;
}

.lede{
  margin:0;
  max-width:62ch;
  color:var(--slate);
  font-size:clamp(15px, 1.08vw, 17.5px);
}
.lede-wide{ max-width:78ch; margin-bottom:64px; }

.rule-heading{
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate);
  margin:clamp(64px,8vw,110px) 0 36px;
  padding-top:20px;
  border-top:1px solid var(--mist);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px;
  font-family:var(--display); font-size:14.5px; font-weight:400;
  letter-spacing:.06em;
  text-decoration:none;
  border-radius:2px;
  border:1px solid transparent;
  transition:background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--navy); color:var(--white); }
.btn-primary:hover{ background:var(--copper); }
.btn-ghost{ border-color:var(--mist); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--navy); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{
  padding-block:var(--gap-section);
  position:relative;
}
.section-hero{
  padding-top:calc(var(--header-h) + clamp(56px, 8vw, 104px));
}
.section-dark{
  background:var(--navy);
  color:var(--white);
}
.section-dark .lede{ color:rgba(255,255,255,.72); }
.section-dark .eyebrow{ color:rgba(255,255,255,.6); }
.section-dark .eyebrow::after{ background:rgba(255,255,255,.18); }
.section-dark .rule-heading{
  color:rgba(255,255,255,.6);
  border-top-color:rgba(255,255,255,.16);
}
.section-dark .btn-ghost{ border-color:rgba(255,255,255,.32); color:var(--white); }
.section-dark .btn-ghost:hover{ border-color:var(--white); }
.section-dark .btn-primary{ background:var(--copper); color:var(--white); }
.section-dark .btn-primary:hover{ background:var(--copper-lift); }

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px, 5vw, 76px);
  align-items:start;
}

/* ============================================================
   HERO
   ============================================================ */
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(36px, 6vw, 88px);
  align-items:center;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

/* Secondary account access — deliberately quieter than the primary CTAs */
.account-access{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:22px;
  padding-top:18px;
  max-width:max-content;
  border-top:1px solid var(--mist);
}
.account-access-label{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--slate-light);
  white-space:nowrap;
}
.account-access-links{
  display:flex;
  align-items:center;
  gap:18px;
}
.account-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-block:3px;
  font-family:var(--display);
  font-size:13.5px;
  font-weight:400;
  letter-spacing:.035em;
  line-height:1.2;
  color:var(--navy);
  text-decoration:none;
  transition:color .24s ease;
}
.account-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:calc(100% - 17px);
  height:1px;
  background:var(--copper);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.account-arrow{
  color:var(--copper);
  font-size:12px;
  transform:translateY(-1px);
  transition:transform .24s ease;
}
.account-link:hover{ color:var(--copper); }
.account-link:hover::after{ transform:scaleX(1); }
.account-link:hover .account-arrow{ transform:translate(2px,-3px); }

.hero-figure{ display:flex; justify-content:center; }
.strata{ width:100%; max-width:440px; height:auto; overflow:visible; }

/* --- diagram styling --- */
.s-surface{ fill:none; stroke:var(--navy); stroke-width:1.8; }
.s-epi path{ fill:none; stroke:var(--navy); stroke-width:.85; opacity:.42; }
.s-bound{ fill:none; stroke:var(--navy); stroke-width:1.2; opacity:.65; }
.s-derm path{ fill:none; stroke:var(--navy); stroke-width:.85; opacity:.26; }
.s-cells circle{ fill:none; stroke:var(--navy); stroke-width:1; opacity:.22; }
.s-signal path{
  fill:none; stroke:var(--copper); stroke-width:1.1; opacity:.55;
  stroke-linecap:round;
}
.s-dot{ fill:var(--copper); }
.s-pulse{ fill:none; stroke:var(--copper); stroke-width:1; opacity:0; }
.s-label text{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.16em; fill:var(--slate);
}
.s-label-accent text{ fill:var(--copper); }

/* draw-in animation */
.s-signal path{
  stroke-dasharray:520;
  stroke-dashoffset:520;
  animation:draw 1.9s cubic-bezier(.35,.6,.25,1) forwards;
}
.s-signal path:nth-child(2){ animation-delay:.16s; }
.s-signal path:nth-child(3){ animation-delay:.32s; }
.s-signal path:nth-child(4){ animation-delay:.48s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.s-pulse{ animation:pulse 4.2s ease-out infinite; }
.s-pulse-2{ animation-delay:2.1s; }
@keyframes pulse{
  0%   { r:9;  opacity:.55; }
  70%  { opacity:0; }
  100% { r:44; opacity:0; }
}

/* ============================================================
   FEATURES
   ============================================================ */
.features{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);
}
.features li{ border-top:1px solid var(--mist); padding-top:22px; }
.features h3{
  font-family:var(--display); font-weight:400;
  font-size:19px; line-height:1.28; letter-spacing:-.005em;
  margin:0 0 12px;
}
.features p{ margin:0; color:var(--slate); font-size:15px; }

/* ============================================================
   STEPS (a real sequence — hence the numbering)
   ============================================================ */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,52px);
}
.steps li{
  position:relative;
  padding-top:34px;
  border-top:1px solid rgba(255,255,255,.18);
}
.steps li::before{
  content:""; position:absolute; top:-4.5px; left:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--copper);
}
.step-num{
  display:block;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; color:var(--copper);
  margin-bottom:14px;
}
.steps h4{
  font-family:var(--display); font-weight:400;
  font-size:20px; line-height:1.26; letter-spacing:-.005em;
  margin:0 0 12px; color:var(--white);
}
.steps p{ margin:0; color:rgba(255,255,255,.68); font-size:15px; }

/* ============================================================
   CARDS
   ============================================================ */
.cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);
}
.card{
  background:var(--white);
  border:1px solid var(--mist);
  border-top:2px solid var(--copper);
  border-radius:2px;
  padding:clamp(24px,2.6vw,34px);
  transition:transform .38s cubic-bezier(.2,.7,.3,1), box-shadow .38s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px -26px rgba(4,40,98,.42);
}
.card-label{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate-light);
  margin:0 0 20px;
}
.card h4{
  font-family:var(--display); font-weight:400;
  font-size:20px; line-height:1.26;
  margin:0 0 12px;
}
.card p{ margin:0; color:var(--slate); font-size:15px; }

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

.table-wrap{
  background:var(--white);
  border:1px solid var(--mist);
  border-radius:2px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.app-table{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  text-align:left;
}

.app-table thead th{
  background:var(--navy);
  color:var(--white);
  font-family:var(--mono);
  font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:16px clamp(18px,2vw,28px);
  white-space:nowrap;
}
.app-table thead th:first-child{ width:24%; }
.app-table thead th:nth-child(2){ width:32%; }

.app-table tbody th,
.app-table tbody td{
  padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,28px);
  border-top:1px solid var(--mist);
  vertical-align:top;
}
.app-table tbody tr:first-child th,
.app-table tbody tr:first-child td{ border-top:none; }

.app-table tbody th{
  position:relative;
  font-family:var(--display);
  font-weight:400; font-size:18px; line-height:1.3;
  letter-spacing:-.004em;
  color:var(--navy);
}
.app-table tbody th::before{
  content:"";
  position:absolute; left:0; top:18%; bottom:18%;
  width:2px; background:var(--copper);
  transform:scaleY(0); transform-origin:center;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.app-table tbody td{ color:var(--slate); font-size:15px; }
.app-table tbody td::before{ display:none; }

.app-table tbody tr{ transition:background .28s ease; }
.app-table tbody tr:hover{ background:rgba(4,40,98,.025); }
.app-table tbody tr:hover th::before{ transform:scaleY(1); }

/* ============================================================
   RESOURCES + CONTACT
   ============================================================ */
.section-about{ background:var(--navy-deep); }
.resources{
  margin-top:clamp(48px,6vw,76px);
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
}
.resources h3{
  margin:0 0 18px;
  color:rgba(255,255,255,.58);
  font-family:var(--mono);
  font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
.resource-list{ border-bottom:1px solid rgba(255,255,255,.16); }
.resource-item{
  min-height:66px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border-top:1px solid rgba(255,255,255,.16);
}
.resource-name{
  display:flex; align-items:baseline; gap:12px;
  color:var(--white);
  font-family:var(--display); font-size:clamp(17px,1.6vw,20px); font-weight:300;
}
.resource-type{
  color:rgba(255,255,255,.4);
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.14em;
}
.resource-actions{ display:flex; align-items:center; gap:clamp(18px,3vw,34px); }
.resource-actions a{
  color:rgba(255,255,255,.72);
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.08em; text-decoration:none; text-transform:uppercase;
  transition:color .25s ease;
}
.resource-actions a span{ color:var(--copper-lift); }
.resource-actions a:hover{ color:var(--white); }
.contact{
  display:flex; flex-wrap:wrap; gap:32px;
  align-items:flex-end; justify-content:space-between;
  margin-top:clamp(44px,6vw,72px);
}
.contact h3{
  font-family:var(--display); font-weight:300;
  font-size:clamp(22px,2.4vw,30px); line-height:1.2;
  margin:0 0 10px; color:var(--white);
}
.contact p{ margin:0; color:rgba(255,255,255,.66); max-width:46ch; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--navy-deep);
  color:rgba(255,255,255,.5);
  padding-block:44px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-inner{
  display:flex; flex-wrap:wrap; gap:20px 40px;
  align-items:center; justify-content:space-between;
}
.site-footer .brand{ color:rgba(255,255,255,.85); }
.disclaimer{
  margin:0; flex:1 1 340px;
  font-size:11.5px; line-height:1.6;
  color:rgba(255,255,255,.42);
  max-width:60ch;
}
.copyright{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.05em; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .78s cubic-bezier(.2,.7,.3,1),
             transform .78s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--d, 0) * 90ms);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; max-width:380px; margin-inline:auto; }
  .split{ grid-template-columns:1fr; gap:24px; }
}

@media (max-width:860px){
  .features,.steps,.cards{ grid-template-columns:1fr; }
  .features li,.steps li{ padding-top:20px; }
  .steps li{ padding-top:30px; }
}

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white);
    border-bottom:1px solid var(--mist);
    padding:8px var(--pad-x) 20px;
    box-shadow:0 22px 40px -30px rgba(4,40,98,.5);
    transform:translateY(-8px);
    opacity:0; visibility:hidden;
    transition:opacity .26s ease, transform .26s ease, visibility .26s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav-link{ padding-block:14px; border-bottom:1px solid var(--mist); font-size:16px; }
  .nav-link:last-child{ border-bottom:none; }
  .nav-link::after{ display:none; }
  .resource-item{
    align-items:flex-start; flex-direction:column; gap:12px;
    padding-block:18px;
  }
  .resource-name{ flex-wrap:wrap; }
  .resource-actions{ width:100%; gap:24px; }
  .contact{ flex-direction:column; align-items:flex-start; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .account-access{ align-items:flex-start; gap:12px; }
  .account-access-links{ gap:16px; }

  /* table collapses into stacked cards rather than scrolling sideways */
  .table-wrap{ overflow-x:visible; }
  .app-table,
  .app-table tbody,
  .app-table tbody tr,
  .app-table tbody th,
  .app-table tbody td{ display:block; width:auto; }
  .app-table{ min-width:0; }
  .app-table thead{ display:none; }

  .app-table tbody tr{
    padding:22px clamp(18px,5vw,24px);
    border-top:1px solid var(--mist);
  }
  .app-table tbody tr:first-child{ border-top:none; }

  .app-table tbody th{
    padding:0 0 16px;
    border-top:none;
    font-size:20px;
  }
  .app-table tbody th::before{ display:none; }

  .app-table tbody td{
    padding:0 0 18px;
    border-top:none;
  }
  .app-table tbody tr td:last-child{ padding-bottom:0; }
  .app-table tbody td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--mono);
    font-size:9.5px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--slate-light);
    margin-bottom:7px;
  }
}

/* ============================================================
   MOTION 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;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .s-signal path{ stroke-dashoffset:0; }
  .s-pulse{ display:none; }
}