/* ============================================================
   Pharos — pharosacq.com
   Static, no build step. Design tokens per specification.
   ============================================================ */

:root{
  --ink:#0C1A20;        /* text, dark section */
  --ink-soft:#46595F;   /* secondary text */
  --paper:#F3F4F0;      /* primary ground, warm near-white */
  --paper-deep:#E4E7E0; /* secondary ground */
  --paper-cold:#DDE4E5; /* tertiary ground */
  --rule:#B4C2C4;       /* hairlines */
  --beam:#B8862F;       /* free accent, warm brass */
  --signal:#B4341C;     /* semantic only: risk, exception */
  --safe:#1F5F5B;       /* semantic only: healthy state */

  --ease:cubic-bezier(.22,.68,.3,1);
  --t-fast:180ms; --t-base:320ms; --t-slow:560ms; --t-draw:1200ms;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-12:3rem;  --sp-16:4rem;
  --sp-24:6rem;  --sp-32:8rem;  --sp-48:12rem;

  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* --rule at reduced opacity, for hairlines on the ink ground */
  --rule-on-ink:rgba(180,194,196,.35);
  --measure:42rem;
}

/* ---------- Base ---------- */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:5.5rem;
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:1.05rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{list-style:none;padding:0}
svg{display:block}
table{border-collapse:collapse}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Typography ---------- */

.display-1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem);
  line-height:1.02;letter-spacing:-.03em;
}
.display-2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,1.25rem + 2vw,2.7rem);
  line-height:1.1;letter-spacing:-.02em;
}
.heading{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  line-height:1.25;
}
.body-lg{
  font-weight:300;
  font-size:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  line-height:1.6;
}
.label{
  font-family:var(--font-mono);font-weight:500;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
}
.data{
  font-family:var(--font-mono);font-weight:400;
  font-size:.85rem;letter-spacing:0;
}
.data-strong{
  font-family:var(--font-mono);font-weight:500;
}
.measure{max-width:var(--measure)}

/* ---------- Layout ---------- */

.container{
  max-width:72rem;
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem);
}

.section{padding-block:var(--sp-24)}

.ground-paper{background:var(--paper)}
.ground-paper-deep{background:var(--paper-deep)}
.ground-paper-cold{background:var(--paper-cold)}
.ground-ink{background:var(--ink);color:var(--paper)}

/* ---------- Links, focus, tap targets ---------- */

a{color:inherit}

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

.skip-link{
  position:absolute;left:var(--sp-4);top:-4rem;z-index:30;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:.8rem;
  padding:var(--sp-2) var(--sp-4);text-decoration:none;
}
.skip-link:focus{top:var(--sp-4)}

/* Text link: static hairline underline, brass line draws over it on hover */
.cta{
  display:inline-flex;align-items:center;
  min-height:44px;
  color:inherit;text-decoration:none;
}
.link{
  position:relative;display:inline-block;
  padding-bottom:2px;
  border-bottom:1px solid var(--rule);
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--beam);
  transform:scaleX(0);transform-origin:left;
}
@media (prefers-reduced-motion:no-preference){
  .link::after{transition:transform var(--t-fast) var(--ease)}
}
.cta:focus-visible .link::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .cta:hover .link::after{transform:scaleX(1)}
}

/* ---------- 1 · Header ---------- */

.header-sentinel{
  position:absolute;top:0;left:0;
  width:1px;height:400px;
  pointer-events:none;visibility:hidden;
}

.site-header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:var(--sp-3);
  min-height:64px;
}
.brand{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  text-decoration:none;min-height:44px;
}
.brand-mark{color:var(--ink);flex:none}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;
}
.brand-desc{
  font-family:var(--font-mono);font-weight:500;
  font-size:.55rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);line-height:1;
}
.header-contact .link{
  font-family:var(--font-mono);font-weight:500;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;
}

.site-header.is-stuck{
  position:fixed;
  background:rgba(243,244,240,.85); /* --paper, translucent */
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
@media (prefers-reduced-motion:no-preference){
  .site-header.is-stuck{animation:header-in var(--t-base) var(--ease)}
  @keyframes header-in{from{transform:translateY(-100%)}}
}

/* ---------- 2 · Hero ---------- */

.hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(9rem,24vh,13rem);
  padding-bottom:var(--sp-32);
  min-height:88vh;
  display:flex;align-items:flex-start;
}
.hero .container{position:relative;z-index:1;width:100%}

.hero-copy .label{color:var(--ink-soft);margin-bottom:var(--sp-6)}
.hero-copy .display-1{max-width:64rem;margin-bottom:var(--sp-8)}
.hero-copy .body-lg{color:var(--ink-soft);margin-bottom:var(--sp-8)}

/* 6.2 Beam construction: once, behind the hero, bleeding off top and right */
.beam-wrap{
  position:absolute;inset:0;
  overflow:hidden;pointer-events:none;
  z-index:0;
}
.beam{
  position:absolute;
  top:-14vh;right:-16vh;
  height:120vh;width:120vh;
  color:var(--beam);
  opacity:.08;
}
@media (max-width:46rem){
  .beam{height:80vh;width:80vh;top:-10vh;right:-24vh}
}

/* ---------- 3 · Who this is for ---------- */

.section-lead{color:var(--ink-soft);margin-top:var(--sp-4)}

.who-grid{
  display:grid;grid-template-columns:1fr;
  gap:var(--sp-12);
  margin-top:var(--sp-16);
}
@media (min-width:64rem){
  .who-grid{grid-template-columns:5fr 7fr;gap:var(--sp-16)}
}

.block-label{
  display:block;color:var(--ink-soft);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--sp-6);
}

.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{
  font-family:var(--font-mono);font-weight:500;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
  border:1px solid var(--rule);border-radius:2px;
  padding:.6rem .85rem;
}

.situations li{
  border-top:1px solid var(--rule);
  padding-block:var(--sp-4);
  font-size:1.05rem;
}
.situations li:first-child{border-top:0;padding-top:0}

/* ---------- 4 · What you get ---------- */

.caps-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12)}
@media (min-width:64rem){
  .caps-grid{grid-template-columns:4fr 8fr;gap:var(--sp-16)}
}

.cap .heading{margin-bottom:var(--sp-4)}
.cap p{color:var(--ink-soft)}

.threshold{
  display:block;width:100%;max-width:var(--measure);
  height:auto;overflow:visible;
  margin-block:var(--sp-12);
}
.t-dot{transform-box:fill-box;transform-origin:center}

/* ---------- 5 · The analytics layer ---------- */

.section-analytics{padding-block:var(--sp-16)}

.analytics-inner{max-width:38rem}
@media (min-width:64rem){
  .analytics-inner{margin-left:25%}
}
.analytics-inner .heading{margin-bottom:var(--sp-6)}
.analytics-inner p{color:var(--ink-soft)}

.analytics-points{margin-top:var(--sp-8)}
.analytics-points li{
  position:relative;
  border-top:1px solid var(--rule);
  padding:var(--sp-3) 0 var(--sp-3) var(--sp-6);
  font-size:1rem;
}
.analytics-points li::before{
  content:"";position:absolute;left:0;top:1.25rem;
  width:7px;height:7px;background:var(--ink-soft);
}
/* semantic colour, used once each on this page */
.analytics-points li.mark-safe::before{background:var(--safe)}
.analytics-points li.mark-signal::before{background:var(--signal)}

/* ---------- 6 · How it works (the only ink section) ---------- */

.section-process{padding-block:var(--sp-16)}
.section-process .display-2{margin-bottom:var(--sp-12)}

.steps{
  display:grid;grid-template-columns:1fr;
  gap:var(--sp-8);
  counter-reset:step;
}
@media (min-width:46rem){
  .steps{grid-template-columns:1fr 1fr}
}
@media (min-width:64rem){
  .steps{grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
}

.step{
  border-top:1px solid var(--rule-on-ink);
  padding-top:var(--sp-4);
}
.step-index{display:block;color:var(--beam);margin-bottom:var(--sp-3)}
.step .heading{margin-bottom:var(--sp-3)}
.step p{
  color:var(--paper-cold);
  font-size:.98rem;line-height:1.55;
}

/* ---------- Contact (deliberately empty) ---------- */

.section-contact{padding-block:var(--sp-32)}
.section-contact .display-2{margin-bottom:var(--sp-6)}
.section-contact .body-lg{color:var(--ink-soft)}

.contact-actions{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-2);
  margin-top:var(--sp-12);
}
.contact-mail .link{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(1.15rem,.9rem + 1.6vw,2rem);
  padding-bottom:4px;
}

/* ---------- 10 · Footer ---------- */

.site-footer{padding-block:var(--sp-12)}
.footer-inner{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-6);
}
@media (min-width:64rem){
  .footer-inner{flex-direction:row;align-items:baseline;gap:var(--sp-16)}
}
.brand-small{min-height:0;gap:var(--sp-2)}
.brand-small .brand-name{font-size:.8rem}
.footer-note{
  max-width:var(--measure);
  color:var(--ink-soft);
  font-size:.95rem;
}
.footer-year{color:var(--ink-soft)}
@media (min-width:64rem){
  .footer-year{margin-left:auto}
}

/* ============================================================
   Motion. Reveals structure; transform and opacity only.
   Hidden states exist only when motion is allowed AND JS is
   present, so no-JS and reduced-motion both render everything.
   ============================================================ */

@media (prefers-reduced-motion:no-preference){

  /* On load: hero sequence, 90ms stagger */
  .hero-reveal{
    animation:rise var(--t-slow) var(--ease) both;
  }
  .hero-copy .hero-reveal:nth-child(2){animation-delay:90ms}
  .hero-copy .hero-reveal:nth-child(3){animation-delay:180ms}
  .hero-copy .hero-reveal:nth-child(4){animation-delay:270ms}
  @keyframes rise{
    from{opacity:0;transform:translateY(14px)}
  }

  /* On load: beam rays draw once, staggered 120ms, starting 200ms in */
  .beam .ray{
    stroke-dasharray:64;
    stroke-dashoffset:64;
    animation:beam-draw var(--t-draw) var(--ease) forwards;
  }
  .beam .ray:nth-child(1){animation-delay:200ms}
  .beam .ray:nth-child(2){animation-delay:320ms}
  .beam .ray:nth-child(3){animation-delay:440ms}
  .beam .ray:nth-child(4){animation-delay:560ms}
  .beam .ray:nth-child(5){animation-delay:680ms}
  @keyframes beam-draw{
    to{stroke-dashoffset:0}
  }

  /* On scroll: one-shot reveals (JS adds .is-visible) */
  html.js .reveal,
  html.js [data-stagger] > *{
    opacity:0;
    transform:translateY(20px);
    transition:
      opacity var(--t-slow) var(--ease),
      transform var(--t-slow) var(--ease);
  }
  html.js .reveal.is-visible,
  html.js [data-stagger].is-visible > *{
    opacity:1;
    transform:none;
  }

  /* Threshold rule: the dashed line draws left to right via
     stroke-dashoffset. The dash list is the visible 6/7 pattern
     (52 pairs, 676 units, covering the 672-unit line) followed by a
     terminal gap of the same length; starting inside that gap and
     transitioning the offset to 0 sweeps the dashes in from the left.
     Then the dot scales in with a slight overshoot. */
  html.js .threshold .t-line{
    stroke-dasharray:6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 6 7 0 676;
    stroke-dashoffset:678;
    transition:stroke-dashoffset 700ms var(--ease);
  }
  html.js .threshold .t-dot{
    transform:scale(0);
    transition:transform 240ms cubic-bezier(.34,1.56,.64,1) 700ms;
  }
  html.js .threshold.is-visible .t-line{stroke-dashoffset:0}
  html.js .threshold.is-visible .t-dot{transform:scale(1)}
}

/* Reduced motion: everything in its final state, immediately */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto}
}