/* ============================================================
   Paralian Technology — paraliantech.com
   Harbor Standard implementation (brand tokens v1.0, July 2026)
   ~60% paper · ~30% navy/mist · ~10% harbor+brass. No gradients.
   ============================================================ */

:root{
  /* core brand */
  --pt-navy:#0B2B47;
  --pt-harbor:#2A5F8F;
  --pt-brass:#B9905A;
  --pt-mist:#E8F0F5;
  --pt-ink:#1C2830;
  --pt-white:#FFFFFF;
  --pt-paper:#FBFCFD;

  /* extended ramp */
  --pt-navy-700:#123A5E;
  --pt-navy-300:#5B84A8;
  --pt-harbor-200:#9DBBD6;
  --pt-mist-50:#F4F8FB;
  --pt-brass-600:#9A7444;
  --pt-brass-200:#E2CBA6;
  --pt-gray-600:#5A6B77;
  --pt-gray-400:#7A8A94;
  --pt-line:#E3E9ED;

  /* sub-brand: AI Venus (accent replaces brass inside Venus sections) */
  --pt-venus:#1E7A72;
  --pt-venus-100:#D9EBE9;

  /* semantic */
  --surface-page:var(--pt-paper);
  --surface-card:var(--pt-white);
  --surface-tint:var(--pt-mist);
  --surface-inverse:var(--pt-navy); /* reverted to Anchor Navy for CEO final check (lighter option was --pt-navy-700) */
  --text-heading:var(--pt-navy);
  --text-body:var(--pt-ink);
  --text-secondary:var(--pt-gray-600);
  --link:var(--pt-harbor);
  --accent:var(--pt-brass);
  --border-default:var(--pt-line);

  /* type */
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-sans:'Public Sans',Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;

  /* rhythm */
  --measure:68ch;
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:12px;
  --shadow-soft:0 1px 2px rgba(11,43,71,.05),0 4px 14px rgba(11,43,71,.06);
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section-pad:clamp(3.5rem,9vw,6.5rem);
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font:400 1.0625rem/1.65 var(--font-sans);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pt-navy)}
:focus-visible{outline:2px solid var(--pt-harbor);outline-offset:3px;border-radius:2px}

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:600;
  color:var(--text-heading);
  line-height:1.12;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,6.5vw,4.25rem);letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.25}
p{margin:0 0 1.1em;max-width:var(--measure)}
strong{font-weight:600}

.wrap{max-width:1140px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-pad)}

/* mono label — JetBrains Mono, caps, +0.1em tracking (brand rule) */
.label{
  font:500 .78rem/1 var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--pt-harbor);
  margin:0 0 1.1rem;
}
.label--muted{color:var(--pt-gray-400)}
.label--venus{color:var(--pt-venus)}

/* brass rule — the "beginnings" motif: short 3px bar above titles */
.rule{width:56px;height:3px;background:var(--accent);border:0;margin:0 0 1.4rem}
.rule--venus{background:var(--pt-venus)}
.rule--center{margin-inline:auto}

/* ---------- header ---------- */
.site-header{
  background:var(--surface-page);
  border-top:3px solid var(--accent);      /* brass marks the beginning */
  border-bottom:1px solid var(--border-default);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding-block:.9rem;
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand svg{width:44px;height:44px;flex:none}
.brand-name{display:flex;flex-direction:column;line-height:1;align-items:center}
.brand-name .word{font:600 1.5rem/1 var(--font-serif);color:var(--pt-navy)}
.brand-name .caps{font:700 .511rem/1 var(--font-sans);letter-spacing:.34em;margin-right:-.34em;color:var(--pt-harbor);margin-top:.3rem} /* lockup ratio 15/44 + 0.34em tracking; 700 for optical weight at small size; caps centered under word, negative margin cancels trailing letter-space */
.site-nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem)}
.site-nav a{
  font:500 .95rem/1 var(--font-sans);color:var(--pt-ink);
  text-decoration:none;padding-block:.4rem;
}
.site-nav a:hover{color:var(--pt-harbor)}
.site-nav a[aria-current="page"]{
  color:var(--pt-navy);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.btn{
  display:inline-block;
  font:600 .95rem/1 var(--font-sans);
  padding:.85rem 1.5rem;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn--navy{background:var(--pt-navy);color:var(--pt-white)}
.btn--navy:hover{background:var(--pt-navy-700);color:var(--pt-white);transform:translateY(-1px)}
.btn--white{background:var(--pt-white);color:var(--pt-navy)}
.btn--white:hover{background:var(--pt-mist);color:var(--pt-navy);transform:translateY(-1px)}
.site-nav .btn{padding:.7rem 1.2rem}
.site-nav a.btn--navy{color:var(--pt-white)}
.site-nav a.btn--navy:hover{color:var(--pt-white)}

/* ---------- hero (navy bookend) ---------- */
.hero{
  background:var(--surface-inverse);
  color:var(--pt-white);
  position:relative;
  overflow:hidden;
}
.hero .wrap{position:relative;padding-block:clamp(4.5rem,11vw,8.5rem);z-index:1}
.hero h1{color:var(--pt-white);max-width:14ch}
.hero .label{color:var(--pt-harbor-200)}
.hero .lede{
  font-size:clamp(1.1rem,1.9vw,1.3rem);line-height:1.55;
  color:var(--pt-mist);max-width:52ch;margin-bottom:2.2rem;
}
.hero .meta{
  font:400 .75rem/1.6 var(--font-mono);
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--pt-harbor-200);margin:2.6rem 0 0;
}
/* ghosted anchor watermark — line art, barely there */
.hero-anchor{
  position:absolute;right:-4%;top:50%;
  width:min(46vw,520px);height:auto;
  transform:translateY(-50%) rotate(8deg);
  opacity:.07;pointer-events:none;
}
.hero--page .wrap{padding-block:clamp(3.5rem,8vw,5.5rem)}

/* page-load reveal (hero only) */
@media (prefers-reduced-motion:no-preference){
  .hero .reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .hero .reveal:nth-child(2){animation-delay:.08s}
  .hero .reveal:nth-child(3){animation-delay:.16s}
  .hero .reveal:nth-child(4){animation-delay:.24s}
  .hero .reveal:nth-child(5){animation-delay:.32s}
  .hero .reveal:nth-child(6){animation-delay:.4s}
  @keyframes rise{to{opacity:1;transform:none}}
  .fade{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
  .fade.in{opacity:1;transform:none}
}

/* ---------- practice cards ---------- */
.card-grid{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:2.5rem;
}
.card{
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--radius);
  padding:1.8rem 1.6rem 1.6rem;
  box-shadow:var(--shadow-soft);
  transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:var(--pt-harbor-200);transform:translateY(-2px)}
.card img{width:56px;height:56px;margin-bottom:1.1rem}
.card h3{margin-bottom:.4rem}
.card p{font-size:.98rem;color:var(--text-secondary);margin:0}

/* ---------- mist panel ---------- */
.panel-tint{background:var(--surface-tint)}
.panel-tint--50{background:var(--pt-mist-50)}

.epigraph{
  font:italic 400 clamp(1.15rem,2.2vw,1.4rem)/1.5 var(--font-serif);
  color:var(--pt-harbor);margin:0 0 1.2rem;
}

/* trust points row */
.trust-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:2.4rem;
}
.trust-grid h3{font-family:var(--font-sans);font-weight:600;font-size:1.05rem;color:var(--pt-navy);margin-bottom:.35rem}
.trust-grid p{font-size:.98rem;color:var(--text-secondary);margin:0}
.trust-grid .tick{width:26px;height:3px;background:var(--accent);margin-bottom:.9rem}

/* ---------- CTA band (navy bookend) ---------- */
.cta{
  background:var(--surface-inverse);color:var(--pt-white);
  text-align:center;
}
.cta h2{color:var(--pt-white);max-width:24ch;margin-inline:auto}
.cta p{color:var(--pt-mist);margin-inline:auto}
.cta .email{
  display:inline-block;
  font:600 clamp(1.25rem,2.6vw,1.7rem)/1.2 var(--font-serif);
  color:var(--pt-white);margin-top:1.2rem;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;
}
.cta .email:hover{color:var(--pt-brass-200)}

/* ---------- services page ---------- */
.svc{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:88px 1fr;
  align-items:start;
  padding-block:clamp(2.6rem,5vw,3.6rem);
  border-bottom:1px solid var(--border-default);
  scroll-margin-top:110px;
}
.svc:last-of-type{border-bottom:0}
.svc img{width:88px;height:88px;position:sticky;top:110px}
.svc h2{font-size:clamp(1.5rem,2.8vw,1.9rem);margin-bottom:.5em}
.svc .cols{
  display:grid;gap:1.25rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:1.4rem;
}
.svc h3{
  font-family:var(--font-mono);font-weight:500;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--pt-gray-600);
  margin-bottom:.6rem;
}
.svc ul{margin:0;padding-left:1.15rem}
.svc li{margin-bottom:.45rem;color:var(--text-body)}
.svc li::marker{color:var(--accent)}

/* AI Venus section — teal accent per sub-brand rule */
.venus{
  background:var(--pt-mist-50);
  border:1px solid var(--pt-venus-100);
  border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,3.2rem);
  margin-block:var(--section-pad);
}
.venus li::marker{color:var(--pt-venus)}
.venus .kicker{font-style:italic;font-family:var(--font-serif);color:var(--pt-venus);font-size:1.1rem}

/* ---------- about ---------- */
.values-grid{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:2.4rem;
}
.value{
  background:var(--surface-tint);
  border-radius:var(--radius);
  padding:1.8rem 1.6rem;
}
.value h3{margin-bottom:.5rem}
.value p{font-size:.98rem;color:var(--text-body);margin:0}

.stat-row{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-block:2.2rem;
}
.stat{
  border:1px solid var(--border-default);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  padding:1.5rem 1.6rem;
  box-shadow:var(--shadow-soft);
}
.stat .num{font:600 clamp(2.1rem,4vw,2.8rem)/1 var(--font-serif);color:var(--pt-navy)}
.stat .desc{font-size:.95rem;color:var(--text-secondary);margin:.5rem 0 0}

.leader{
  display:flex;gap:1.6rem;align-items:center;
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft);
  padding:1.7rem 1.9rem;
  max-width:720px;
}
.leader img{width:72px;height:72px;flex:none;border-radius:50%}
.leader p{
  margin:0;
  font:600 clamp(1.1rem,1.8vw,1.3rem)/1.5 var(--font-serif);
  color:var(--pt-navy);
}
@media (max-width:560px){.leader{flex-direction:column;align-items:flex-start}}

.placeholder{
  border:1px dashed var(--pt-harbor-200);
  border-radius:var(--radius);
  background:var(--pt-mist-50);
  padding:2rem;
  color:var(--text-secondary);
  font-size:.95rem;
}

/* ---------- contact ---------- */
.contact-hero .email-big{
  display:inline-block;
  font:600 clamp(1.6rem,4.5vw,2.9rem)/1.2 var(--font-serif);
  color:var(--pt-navy);
  text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px;
  margin-block:.5rem 1.6rem;
  overflow-wrap:anywhere;
}
.contact-hero .email-big:hover{color:var(--pt-harbor)}

/* ---------- footer (navy bookend) ---------- */
.site-footer{
  background:var(--surface-inverse);
  color:var(--pt-mist);
  padding-block:3.2rem 2.4rem;
  margin-top:0;
}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:2rem;
  align-items:flex-start;justify-content:space-between;
}
.site-footer .brand-name .word{color:var(--pt-white)}
.site-footer .brand-name .caps{color:var(--pt-harbor-200)}
.site-footer nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.site-footer a{color:var(--pt-mist);text-decoration:none;font-size:.95rem}
.site-footer a:hover{color:var(--pt-white);text-decoration:underline}
.site-footer a.brand:hover{text-decoration:none} /* the lockup is a logo, not a text link */
.site-footer .legal{
  width:100%;
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:1.6rem;padding-top:1.6rem;
  font:400 .72rem/1.7 var(--font-mono);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--pt-harbor-200);
}
.site-footer .legal p{margin:0;max-width:none}

/* ---------- prose (privacy, 404) ---------- */
.prose h2{font-size:1.4rem;margin-top:2.2em}
.prose{max-width:var(--measure)}

/* ---------- small screens ---------- */
@media (max-width:720px){
  .site-header{position:static}
  .site-header .wrap{justify-content:center;text-align:center}
  .svc{scroll-margin-top:1rem}
  .svc{grid-template-columns:1fr}
  .svc img{position:static;width:64px;height:64px}
  .hero-anchor{width:70vw;right:-25%;opacity:.05}
}