/* =========================================================
   ANIOMA — Design tokens
   A property investment company's site, styled like a page
   from the title register: reference numbers, corner
   registration marks, ledger strips, deed-stamp seal.
   ========================================================= */

:root{
  --ink:        #14171F;
  --ink-70:     rgba(20,23,31,.7);
  --ink-45:     rgba(20,23,31,.45);
  --paper:      #FAF8F3;
  --stone:      #EEE8DA;
  --stone-2:    #E2DACB;
  --line:       #D6CDB8;
  --brass:      #93702F;
  --brass-ink:  #6E5423;
  --brass-tint: #EFE2C4;
  --forest:     #2B4A3D;
  --forest-tint:#DDE7E1;
  --white:      #FFFFFF;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --max: 1180px;
  --gap: clamp(1.25rem, 2.6vw, 2.5rem);
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ 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(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 5.6vw, 4.6rem); font-weight:560; }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size:clamp(1.2rem, 1.8vw, 1.5rem); }
p{ margin:0 0 1em; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-ink);
  display:inline-flex;
  align-items:center;
  gap:.55em;
}
.eyebrow::before{
  content:"";
  width:.5em; height:.5em;
  background:var(--brass);
  display:inline-block;
  transform:rotate(45deg);
}

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

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* -------------------------------------------------------
   Blueprint grid backdrop — used behind hero + section breaks
------------------------------------------------------- */
.blueprint{
  position:relative;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: -1px -1px;
  background-color:var(--stone);
}

/* Registration corner ticks — the recurring signature device */
.reg-marks{ position:absolute; inset:0; pointer-events:none; }
.reg-marks span{
  position:absolute;
  width:22px; height:22px;
  border:1px solid var(--ink-45);
}
.reg-marks span:nth-child(1){ top:18px; left:18px; border-right:none; border-bottom:none; }
.reg-marks span:nth-child(2){ top:18px; right:18px; border-left:none; border-bottom:none; }
.reg-marks span:nth-child(3){ bottom:18px; left:18px; border-right:none; border-top:none; }
.reg-marks span:nth-child(4){ bottom:18px; right:18px; border-left:none; border-top:none; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,243,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  max-width:var(--max); margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--serif); font-size:1.28rem; font-weight:600;
  text-decoration:none; letter-spacing:-.01em;
}
.logo .mark{
  width:30px; height:30px;
  border:1.4px solid var(--ink);
  position:relative;
  display:inline-block;
  transform:rotate(45deg);
}
.logo .mark::after{
  content:"";
  position:absolute; inset:5px;
  border:1px solid var(--brass);
}
.nav-links{
  display:flex; gap:clamp(1rem,2vw,2rem);
  list-style:none; margin:0; padding:0;
  font-size:.92rem;
}
.nav-links a{
  text-decoration:none;
  padding:.3rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  border-bottom-color:var(--brass);
}
.nav-cta{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  text-decoration:none;
  border:1px solid var(--ink);
  padding:.55rem 1.1rem;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--ink); padding:.5rem .7rem;
  font-family:var(--mono); font-size:.8rem; cursor:pointer;
}

@media (max-width:820px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    flex-direction:column; gap:0;
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .nav-links.open{ max-height:400px; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:1rem clamp(1.25rem,4vw,3rem); border-bottom:none; }
  .nav-cta{ display:none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,4rem);
}
.hero-inner{
  position:relative;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3.5rem);
}
.hero .eyebrow{ margin-bottom:1.4rem; }
.hero h1{ max-width:16ch; }
.hero .lede{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--ink-70);
  max-width:52ch;
  margin-top:1.1rem;
}
.hero-actions{
  display:flex; gap:1rem; flex-wrap:wrap;
  margin-top:2rem;
}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
  text-decoration:none; cursor:pointer;
  padding:.85rem 1.5rem;
  border:1px solid var(--ink);
  background:transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--brass-ink); border-color:var(--brass-ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }

/* =========================================================
   LEDGER STRIP — the six-strategy legend / metric row
   ========================================================= */
.ledger{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  overflow-x:auto;
}
.ledger-row{
  display:flex;
  min-width:max-content;
}
.ledger-cell{
  flex:1 1 0;
  min-width:150px;
  padding:1.1rem 1.4rem;
  border-right:1px solid var(--line);
}
.ledger-cell:last-child{ border-right:none; }
.ledger-code{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--brass-ink); display:block; margin-bottom:.35rem;
}
.ledger-label{ font-size:.88rem; color:var(--ink-70); }

/* =========================================================
   SECTIONS
   ========================================================= */
section{ padding:clamp(3rem,7vw,5.5rem) 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:clamp(2rem,4vw,3rem);
  flex-wrap:wrap;
}
.section-head h2{ max-width:22ch; margin:.4rem 0 0; }
.section-note{
  max-width:34ch; color:var(--ink-70); font-size:.95rem;
}

.divider{ border:none; border-top:1px solid var(--line); margin:0; }

/* Process steps — a genuine sequence, numbering is earned here */
.process{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line);
}
.process-step{
  padding:2rem 1.6rem;
  border-right:1px solid var(--line);
}
.process-step:last-child{ border-right:none; }
.process-num{
  font-family:var(--mono); color:var(--brass);
  font-size:.85rem; display:block; margin-bottom:1.2rem;
}
.process-step h3{ margin-bottom:.5rem; }
.process-step p{ color:var(--ink-70); font-size:.92rem; margin:0; }

@media (max-width:900px){
  .process{ grid-template-columns:1fr 1fr; }
  .process-step{ border-bottom:1px solid var(--line); }
  .process-step:nth-child(2n){ border-right:none; }
}
@media (max-width:560px){
  .process{ grid-template-columns:1fr; }
}

/* Pillars / value cards */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  border:1px solid var(--line);
  padding:2rem;
}
.card .eyebrow{ margin-bottom:1rem; }
.card p{ color:var(--ink-70); font-size:.94rem; margin:0; }

/* Strategy cards (Investment Strategy page) */
.strategy-card{
  background:var(--white);
  border:1px solid var(--line);
  padding:2rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.strategy-card .code{
  font-family:var(--mono); font-size:.78rem; color:var(--brass-ink);
  letter-spacing:.08em;
}
.strategy-card h3{ margin:0; }
.strategy-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-family:var(--mono); font-size:.74rem; color:var(--ink-45);
  border-top:1px solid var(--line); padding-top:.9rem; margin-top:.3rem;
}
.strategy-meta strong{ color:var(--ink-70); font-weight:600; }

/* Appraisal metrics list */
.metric-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.metric-list div{ background:var(--white); padding:1.4rem 1.2rem; }
.metric-list .m-code{ font-family:var(--mono); font-size:.72rem; color:var(--brass-ink); display:block; margin-bottom:.4rem; }
.metric-list .m-name{ font-size:.92rem; }
@media (max-width:820px){ .metric-list{ grid-template-columns:repeat(2,1fr); } }

/* Project / case-study cards */
.project-card{
  border:1px solid var(--line);
  background:var(--white);
}
.project-figure{
  aspect-ratio:4/3;
  background:var(--stone);
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.project-body{ padding:1.6rem; }
.project-status{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--forest);
  display:inline-block; margin-bottom:.7rem;
}
.project-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem;
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.82rem;
}
.project-meta dt{ font-family:var(--mono); font-size:.68rem; color:var(--ink-45); text-transform:uppercase; letter-spacing:.05em; }
.project-meta dd{ margin:0; color:var(--ink-70); }

/* Opportunities status board */
.status-board{ border:1px solid var(--line); }
.status-row{
  display:grid; grid-template-columns:1fr 1fr 1fr auto;
  gap:1rem; align-items:center;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--line);
}
.status-row:last-child{ border-bottom:none; }
.status-row .s-name{ font-family:var(--serif); font-size:1.05rem; }
.status-row .s-type{ font-family:var(--mono); font-size:.76rem; color:var(--ink-45); }
.status-tag{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.3rem .6rem; border:1px solid var(--line); justify-self:start;
}
.status-tag.open{ border-color:var(--forest); color:var(--forest); }
.status-tag.closed{ color:var(--ink-45); }
@media (max-width:700px){
  .status-row{ grid-template-columns:1fr; row-gap:.4rem; }
}

/* Notify form */
.inline-form{
  display:flex; gap:0; border:1px solid var(--ink); max-width:520px;
}
.inline-form input{
  flex:1; border:none; background:transparent; padding:.9rem 1.1rem;
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
}
.inline-form input:focus{ outline:none; }
.inline-form button{
  border:none; border-left:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:.8rem; padding:0 1.4rem; cursor:pointer;
}
.inline-form button:hover{ background:var(--brass-ink); }

/* Contact form */
.contact-form{ display:grid; gap:1.3rem; max-width:640px; }
.field label{
  display:block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-70);
  margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem;
  border:1px solid var(--line); background:var(--white);
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brass);
}
.form-status{ font-family:var(--mono); font-size:.85rem; margin-top:.5rem; }

/* Quote / pull statement */
.statement{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  line-height:1.3; max-width:26ch;
}

/* Info list (About page facts) */
.fact-list{ display:grid; gap:1.4rem; }
.fact-list dt{ font-family:var(--mono); font-size:.72rem; color:var(--brass-ink); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.3rem; }
.fact-list dd{ margin:0; font-size:1rem; color:var(--ink-70); }

/* =========================================================
   PLACEHOLDER NOTE (visible only to the site owner in source)
   ========================================================= */
.owner-note{
  background:var(--brass-tint);
  border:1px dashed var(--brass);
  padding:1rem 1.3rem;
  font-family:var(--mono); font-size:.78rem;
  color:var(--brass-ink);
  margin-bottom:2rem;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--ink); color:var(--stone);
  padding:clamp(3rem,6vw,4.5rem) 0 2rem;
}
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--gap);
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-brand .logo{ color:var(--paper); }
.footer-brand .logo .mark{ border-color:var(--paper); }
.footer-brand p{ color:rgba(250,248,243,.6); font-size:.9rem; margin-top:1rem; max-width:32ch; }
.footer-col h4{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(250,248,243,.5); margin-bottom:1rem; font-weight:500;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer-col a{ text-decoration:none; color:rgba(250,248,243,.85); font-size:.92rem; }
.footer-col a:hover{ color:var(--brass-tint); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:1.6rem; font-size:.78rem; color:rgba(250,248,243,.45);
}
.disclaimer{
  font-size:.76rem; color:rgba(250,248,243,.45);
  max-width:80ch; margin:1.6rem 0 0; line-height:1.6;
}
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-top{ grid-template-columns:1fr; }
}

/* Page hero variant for interior pages (shorter) */
.page-hero{ padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,4vw,3rem); }
.page-hero h1{ max-width:20ch; font-size:clamp(2rem,4.4vw,3.2rem); }
.page-hero .lede{ max-width:60ch; }