/* ==========================================================================
   Hostcol Ltd — site stylesheet
   Palette sampled directly from the HostCol mark:
   navy structure + four graduated wave blues on a cool paper ground.
   ========================================================================== */

:root{
  --ink:    #122C3C;
  --navy:   #26485E;
  --slate:  #266C90;
  --blue:   #3E9DC9;
  --sky:    #6FBBDD;
  --mist:   #A6D0E9;
  --paper:  #F2F7F9;
  --white:  #FFFFFF;
  --muted:  #5B7385;
  --rule:   rgba(38,72,94,.15);
  --rule-soft: rgba(38,72,94,.08);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band: clamp(4rem, 7.5vw, 7rem);
  --rail: clamp(140px, 16vw, 200px);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

::selection{ background:var(--mist); color:var(--ink); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--white);
  padding:.75rem 1.25rem; font-family:var(--mono); font-size:.75rem;
}
.skip:focus{ left:0; }

/* ---------- layout primitives -------------------------------------------- */

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

.band{ padding-block:var(--band); }
.band-tight{ padding-block:clamp(3rem, 6vw, 5rem); }

.band-line{ border-top:1px solid var(--rule-soft); }

.dark{ background:var(--ink); color:#DCE8EE; }
.dark h2,.dark h3,.dark .display{ color:var(--white); }
.dark .eyebrow{ color:var(--sky); }
.dark .lede{ color:#BFD3DE; }

/* An editorial rail: monospace index on the left, argument on the right. */
.rail{ display:grid; gap:clamp(1rem,2.5vw,2rem); }
@media (min-width:900px){
  .rail{ grid-template-columns:var(--rail) 1fr; gap:clamp(2rem,5vw,4.5rem); }
}

/* ---------- type ---------------------------------------------------------- */

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
  margin:0 0 1.25rem;
}
.eyebrow-sticky{ margin:0; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  font-optical-sizing:auto;
  color:var(--ink);
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}

h2{ font-size:clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height:1.05; }
h3{ font-size:clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); line-height:1.12; }
h4{ font-size:1.1875rem; line-height:1.25; font-weight:400; }

.display-em{ font-style:italic; font-weight:300; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  line-height:1.55;
  color:#33505F;
  max-width:60ch;
  font-weight:400;
}

.small{ font-size:.9375rem; color:var(--muted); }

.mono{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- the signature: wave rules lifted from the mark ---------------- */

.wave{ display:block; width:100%; height:14px; overflow:visible; }
.wave path{
  fill:none;
  stroke:var(--w, var(--blue));
  stroke-width:1.7;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.wave-draw{
  clip-path:inset(-12px 100% -12px 0);
  animation:wipe 1.4s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes wipe{ to{ clip-path:inset(-12px 0 -12px 0); } }

/* A stack of five strata — the mark's waves, opened out to page width. */
.strata{ display:grid; gap:clamp(9px,1.4vw,15px); padding-block:clamp(1.5rem,4vw,3rem); }
.strata .wave{ height:10px; }
.strata .wave:nth-child(1){ --w:var(--navy); }
.strata .wave:nth-child(2){ --w:var(--slate); }
.strata .wave:nth-child(3){ --w:var(--blue); }
.strata .wave:nth-child(4){ --w:var(--sky); }
.strata .wave:nth-child(5){ --w:var(--mist); }

.strata-drift .wave:nth-child(odd) path{ animation:drift 38s ease-in-out infinite alternate; }
.strata-drift .wave:nth-child(even) path{ animation:drift 46s ease-in-out infinite alternate-reverse; }
@keyframes drift{ from{ transform:translateX(-.8%); } to{ transform:translateX(.8%); } }

/* ---------- masthead ------------------------------------------------------ */

.masthead{
  position:sticky; top:0; z-index:40;
  background:rgba(242,247,249,.86);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.masthead-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:76px;
}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.brand img{ width:46px; }
.brand-name{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--navy); line-height:1.4;
}
.brand-name span{ display:block; color:var(--slate); letter-spacing:.14em; font-size:.62rem; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem); }
.nav a{
  font-size:.9375rem; text-decoration:none; color:var(--navy);
  padding-block:.35rem; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav .nav-mail{ display:none; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:none; color:var(--slate); }
@media (min-width:1080px){ .nav .nav-mail{ display:inline-block; } }
@media (max-width:600px){
  .masthead-in{ flex-wrap:wrap; min-height:0; padding-block:.9rem; gap:.6rem; }
  .nav{ width:100%; justify-content:space-between; gap:.5rem; }
  .nav a{ font-size:.875rem; }
}

/* ---------- hero ---------------------------------------------------------- */

.hero{ padding-top:clamp(3rem,7vw,6rem); }

.thesis{
  font-size:clamp(2.6rem, 1.4rem + 6.6vw, 6.5rem);
  line-height:.96;
  letter-spacing:-.03em;
  font-weight:300;
  display:grid;
  gap:clamp(.4rem,1.4vw,1rem);
  margin:0 0 clamp(2rem,5vw,3.5rem);
}
.clause{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
}
.clause .wave{ height:16px; opacity:.95; }
.clause:nth-child(1){ --w:var(--navy); }
.clause:nth-child(2){ --w:var(--slate); }
.clause:nth-child(3){ --w:var(--blue); }
@media (max-width:520px){
  .clause{ grid-template-columns:1fr; gap:.35rem; }
  .clause .wave{ height:12px; }
}

.hero-foot{
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  align-items:end;
}
@media (min-width:900px){
  .hero-foot{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
}

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  padding:.95rem 1.5rem; border:1px solid var(--navy);
  color:var(--white); background:var(--navy);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn:hover{ background:var(--slate); border-color:var(--slate); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.dark .btn{ background:var(--sky); border-color:var(--sky); color:var(--ink); }
.dark .btn:hover{ background:var(--white); border-color:var(--white); }
.dark .btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.dark .btn-ghost:hover{ background:var(--white); color:var(--ink); }

/* ---------- the arc of ownership ----------------------------------------- */

.arc{ margin-top:clamp(2.5rem,6vw,4rem); border-top:1px solid var(--rule); }

.phase{
  display:grid;
  gap:.75rem clamp(2rem,5vw,4.5rem);
  padding-block:clamp(2rem,4.5vw,3.25rem);
  border-bottom:1px solid var(--rule);
  position:relative;
}
@media (min-width:900px){
  .phase{ grid-template-columns:var(--rail) minmax(0,1fr) minmax(0,.85fr); align-items:start; }
}
.phase-tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ck, var(--c,var(--slate)));
  display:flex; align-items:center; gap:.6rem; padding-top:.4rem;
}
.phase-tag::before{
  content:""; width:26px; height:2px; background:var(--c,var(--slate)); flex:none;
}
.phase h3{ color:var(--ink); }
.phase h3 + p{ margin-top:.9rem; }
.phase p{ color:#3C5766; }
.phase:nth-of-type(1){ --c:var(--navy); }
.phase:nth-of-type(2){ --c:var(--slate); }
.phase:nth-of-type(3){ --c:var(--blue); --ck:var(--slate); }
.phase:nth-of-type(4){ --c:var(--sky); --ck:var(--slate); }
.phase-link{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); text-decoration:none; border-bottom:1px solid var(--rule);
  padding-bottom:.2rem; transition:border-color .3s ease, color .3s ease;
}
.phase-link:hover{ color:var(--slate); border-color:var(--slate); }

/* ---------- detailed service entries -------------------------------------- */

.entry{
  padding-block:clamp(2.5rem,6vw,4.5rem);
  border-top:1px solid var(--rule);
  scroll-margin-top:110px;
}
.entry-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.entry .wave{ margin:1.75rem 0 2rem; height:12px; }
.covers{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.05rem clamp(1.5rem,4vw,3rem);
}
@media (min-width:700px){ .covers{ grid-template-columns:1fr 1fr; } }
.covers li{
  padding:.7rem 0 .7rem 1.6rem;
  border-bottom:1px solid var(--rule-soft);
  position:relative; font-size:.9688rem; color:#3C5766;
}
.covers li::before{
  content:""; position:absolute; left:0; top:1.25rem;
  width:8px; height:1px; background:var(--c,var(--blue));
}

/* ---------- cards / principles -------------------------------------------- */

.grid-3{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (min-width:760px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.grid-2{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
@media (min-width:760px){ .grid-2{ grid-template-columns:repeat(2,1fr); } }

.note{ border-top:2px solid var(--c,var(--blue)); padding-top:1.1rem; }
.note h4{ margin-bottom:.55rem; font-size:1.25rem; }
.note p{ font-size:.9688rem; color:#3C5766; }
.dark .note p{ color:#AFC5D2; }
.dark .note{ border-top-color:var(--c,var(--sky)); }

/* ---------- ledger (corporate record) ------------------------------------- */

.ledger{ margin:0; border-top:1px solid var(--rule); }
.ledger div{
  display:grid; gap:.15rem 2rem;
  padding:.9rem 0; border-bottom:1px solid var(--rule-soft);
}
@media (min-width:640px){ .ledger div{ grid-template-columns:220px 1fr; align-items:baseline; } }
.ledger dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.ledger dd{ margin:0; font-size:.9688rem; }
.ledger a{ color:var(--slate); text-decoration:none; border-bottom:1px solid var(--rule); }
.ledger a:hover{ border-color:var(--slate); }
.dark .ledger{ border-top-color:rgba(255,255,255,.16); }
.dark .ledger div{ border-bottom-color:rgba(255,255,255,.09); }
.dark .ledger dt{ color:var(--sky); }
.dark .ledger a{ color:var(--sky); border-bottom-color:rgba(255,255,255,.25); }

/* ---------- pull quote ---------------------------------------------------- */

.pull{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 1.8vw, 2.5rem);
  line-height:1.18; letter-spacing:-.015em;
  max-width:22ch;
}
.sig{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:1.5rem; }

/* ---------- contact ------------------------------------------------------- */

.mailto-big{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.75rem,1rem + 3.6vw,3.5rem);
  letter-spacing:-.02em; text-decoration:none; color:var(--ink);
  display:inline-block; border-bottom:1px solid var(--rule);
  padding-bottom:.15em; transition:color .3s ease, border-color .3s ease;
  word-break:break-word;
}
.mailto-big:hover{ color:var(--slate); border-color:var(--slate); }
.dark .mailto-big{ color:var(--white); border-bottom-color:rgba(255,255,255,.3); }
.dark .mailto-big:hover{ color:var(--sky); border-bottom-color:var(--sky); }

.form{ display:grid; gap:1.25rem; max-width:640px; }
.field{ display:grid; gap:.45rem; }
.field label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--rule);
  padding:.8rem .9rem; border-radius:0; width:100%;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--slate);
  box-shadow:0 0 0 3px rgba(46,127,157,.14);
}
.form-note{ font-size:.875rem; color:var(--muted); }

/* ---------- footer -------------------------------------------------------- */

.foot{ background:var(--ink); color:#B9CEDA; padding-block:clamp(3.5rem,7vw,5.5rem); }
.foot .strata{ padding-block:0 clamp(2.5rem,5vw,3.5rem); }
.foot .strata .wave:nth-child(1){ --w:rgba(255,255,255,.28); }
.foot .strata .wave:nth-child(2){ --w:var(--slate); }
.foot .strata .wave:nth-child(3){ --w:var(--blue); }
.foot .strata .wave:nth-child(4){ --w:var(--sky); }
.foot .strata .wave:nth-child(5){ --w:var(--mist); }
.foot-grid{ display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:820px){ .foot-grid{ grid-template-columns:1.2fr .8fr .8fr; } }
.foot img{ width:64px; margin-bottom:1.25rem; }
.foot h5{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky); margin:0 0 1rem; font-weight:500;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot a{ color:#CFE0E9; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease; }
.foot a:hover{ color:var(--white); border-bottom-color:var(--sky); }
.foot address{ font-style:normal; font-size:.9375rem; line-height:1.7; }
.colophon{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#8AA6B5;
}

/* ---------- reveal on scroll ---------------------------------------------- */

.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .wave-draw{ clip-path:none; }
}

/* ---------- hero meta row ------------------------------------------------- */
.hero-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  align-items:baseline; justify-content:space-between;
  padding-bottom:1rem; margin-bottom:clamp(2rem,5vw,3.25rem);
  border-bottom:1px solid var(--rule);
}
.hero-meta .record{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
}

/* ---------- surface utilities --------------------------------------------- */
.white{ background:var(--white); }
.dark.navy{ background:var(--navy); color:#DBE8EF; }
.dark.navy .lede{ color:#C6DAE4; }
.bleed{ overflow:hidden; }
.stack-sm > * + *{ margin-top:1rem; }
.mt-l{ margin-top:clamp(2rem,4vw,3rem); }

/* ---------- capability keys in the arc ------------------------------------ */
.keys{ list-style:none; margin:0 0 1.1rem; padding:0; display:grid; gap:.4rem; }
.keys li{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
@media (min-width:900px){ .phase > div:last-child{ padding-top:.5rem; } }

/* Hero strata run to the page edges so the drift never shows an end. */
.strata-bleed{ width:100%; }

/* ---------- interior page heads ------------------------------------------- */
.page-head{ padding-top:clamp(2.5rem,6vw,4.5rem); }
.page-title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
  line-height:1.02; letter-spacing:-.025em; margin:0 0 clamp(1.25rem,3vw,2rem);
  max-width:18ch; text-wrap:balance;
}
.page-head .lede{ max-width:56ch; }

/* Lifecycle index: the four phases as an ordered strip of entry points. */
.index-row{ display:grid; gap:1.25rem; margin-top:clamp(2.5rem,5vw,3.5rem); }
@media (min-width:760px){ .index-row{ grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2rem); } }
.index-row a{
  text-decoration:none; display:block; padding-top:.9rem;
  border-top:2px solid var(--c,var(--blue));
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.index-row a:hover{ transform:translateY(-3px); }
.index-row .k{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ck, var(--c,var(--slate))); margin-bottom:.4rem;
}
.index-row .t{ display:block; font-family:var(--display); font-size:1.25rem; font-weight:300; line-height:1.2; color:var(--ink); }

.stepline{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(2rem,4vw,3rem); }
@media (min-width:760px){ .stepline{ grid-template-columns:repeat(3,1fr); } }
.stepline .step{ border-top:1px solid var(--rule); padding-top:1rem; }
.stepline .step .when{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); display:block; margin-bottom:.6rem;
}
.stepline .step p{ font-size:.9688rem; color:#3C5766; }

.footnote{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.25rem;
  border-top:1px solid var(--rule); font-size:.875rem; color:var(--muted); max-width:70ch;
}

/* ---------- small-screen adjustments -------------------------------------- */
.keys{ margin-top:.35rem; }

@media (max-width:600px){
  /* Stacked buttons read as one control group when they share a width. */
  .actions{ width:100%; }
  .actions .btn{ flex:1 1 100%; justify-content:center; }
  .hero-meta{ gap:.35rem; }
  .hero-meta .record{ gap:.25rem 1rem; }
  .page-title{ max-width:none; }
  .ledger div{ padding:.8rem 0; }
}

@media (max-width:400px){
  .brand img{ width:40px; }
  .brand-name{ font-size:.66rem; }
}

/* Comfortable touch targets on small screens without changing the type. */
@media (hover:none){
  .phase-link{ display:inline-block; padding-block:.5rem .45rem; }
  .foot ul a, .nav a{ display:inline-block; padding-block:.45rem; }
  .colophon a{ display:inline-block; padding-block:.35rem; }
  .ledger a{ display:inline-block; padding-block:.3rem; }
}