/* ============================================================
   Sara Caetano Property — design tokens
   Concept: a property dossier / land-registry document made
   digital. Ink-dark cover, brass wax-seal signature, parchment
   pages inside. Reference numbers stand in for real filing
   conventions used in property records.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,340..600;1,9..144,400..500&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:        #171B1A;   /* cover / dark ground */
  --ink-2:      #20302A;   /* raised panels on ink */
  --parchment:  #F1ECDD;   /* page */
  --parchment-2:#E8E1CD;   /* recessed panel on parchment */
  --brass:      #B08A4E;   /* seal, primary accent */
  --brass-dim:  #8C6E3D;
  --bottle:     #2B4736;   /* registry-ink green, secondary accent */
  --ink-text:   #23201A;   /* body text on parchment */
  --paper-text: #F1ECDD;   /* body text on ink */
  --line:       rgba(35,32,26,0.14);
  --line-on-ink:rgba(241,236,221,0.16);

  --display: 'Fraunces', serif;
  --body:    'Inter', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink-text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display);font-weight:520;margin:0;letter-spacing:-0.01em;}
p{margin:0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}

/* ---------- utility ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass);
}
.eyebrow.on-parchment{color:var(--brass-dim);}
.ref{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--brass);
  opacity:0.85;
}

/* ---------- seal (signature element) ---------- */
.seal{
  width:84px;height:84px;
  flex:none;
}
.seal .ring{fill:none;stroke:var(--brass);}
.seal .monogram{
  font-family:var(--display);
  font-size:30px;
  fill:var(--brass);
  text-anchor:middle;
}
.seal .arc-text{
  font-family:var(--mono);
  font-size:6.4px;
  letter-spacing:2px;
  fill:var(--brass);
}

/* ---------- header ---------- */
.site-header{
  background:var(--ink);
  color:var(--paper-text);
  border-bottom:1px solid var(--line-on-ink);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:22px;
  padding-bottom:22px;
}
.wordmark{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--paper-text);
}
.wordmark .name{
  font-family:var(--display);
  font-size:21px;
  line-height:1.1;
}
.wordmark .name small{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--brass);
  margin-top:4px;
  font-weight:400;
}
.wordmark .seal{width:44px;height:44px;}

.site-nav{display:flex;gap:26px;align-items:center;font-family:var(--mono);font-size:13px;letter-spacing:0.03em;}
.site-nav a{text-decoration:none;color:var(--paper-text);opacity:0.82;padding-bottom:3px;border-bottom:1px solid transparent;}
.site-nav a:hover,.site-nav a.current{opacity:1;border-color:var(--brass);}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--paper-text);}
.site-footer .wrap{
  padding:48px 28px 40px;
  display:flex;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.site-footer .seal{width:52px;height:52px;opacity:0.9;}
.footer-note{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  color:rgba(241,236,221,0.62);
  max-width:440px;
}
.footer-note strong{color:var(--paper-text);font-weight:500;}
.footer-links{font-family:var(--mono);font-size:12.5px;display:flex;gap:22px;color:rgba(241,236,221,0.7);}
.footer-links a{text-decoration:none;color:inherit;}
.footer-links a:hover{color:var(--brass);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:13.5px;
  letter-spacing:0.03em;
  text-decoration:none;
  padding:15px 26px;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-brass{background:var(--brass);color:var(--ink);}
.btn-brass:hover{background:#c39a5c;}
.btn-outline-ink{border-color:var(--ink-text);color:var(--ink-text);}
.btn-outline-ink:hover{background:var(--ink-text);color:var(--parchment);}
.btn-outline-paper{border-color:var(--line-on-ink);color:var(--paper-text);}
.btn-outline-paper:hover{border-color:var(--brass);color:var(--brass);}
.btn-arrow{transition:transform .15s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}

/* ---------- hero split (index) ---------- */
.hero{
  background:var(--ink);
  color:var(--paper-text);
  padding:88px 0 0;
}
.hero .kicker{display:flex;align-items:center;gap:16px;margin-bottom:34px;}
.hero h1{
  font-size:clamp(40px,6vw,68px);
  max-width:15ch;
  line-height:1.03;
}
.hero h1 em{
  font-style:italic;
  color:var(--brass);
}
.hero .sub{
  font-family:var(--body);
  font-size:18px;
  color:rgba(241,236,221,0.78);
  max-width:46ch;
  margin-top:22px;
}
.hero-inner{padding-bottom:70px;}

.fork{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line-on-ink);
}
.fork-panel{
  padding:52px 28px 64px;
  text-decoration:none;
  color:inherit;
  position:relative;
  transition:background .2s ease;
}
.fork-panel + .fork-panel{border-left:1px solid var(--line-on-ink);}
.fork-panel:hover{background:var(--ink-2);}
.fork-panel .ref{display:block;margin-bottom:18px;}
.fork-panel h2{font-size:30px;max-width:12ch;}
.fork-panel .desc{
  font-family:var(--body);
  font-size:15.5px;
  color:rgba(241,236,221,0.72);
  margin-top:14px;
  max-width:34ch;
}
.fork-panel .go{
  margin-top:28px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--brass);
}
.fork-panel .go svg{transition:transform .15s ease;}
.fork-panel:hover .go svg{transform:translateX(4px);}

@media (max-width:760px){
  .fork{grid-template-columns:1fr;}
  .fork-panel + .fork-panel{border-left:none;border-top:1px solid var(--line-on-ink);}
}

/* ---------- trust strip ---------- */
.trust{
  background:var(--parchment);
  border-bottom:1px solid var(--line);
}
.trust .wrap{
  padding:26px 28px;
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.03em;
  color:var(--brass-dim);
}

/* ---------- page hero (sell/buy) ---------- */
.page-hero{background:var(--ink);color:var(--paper-text);padding:64px 0 58px;}
.page-hero .ref{display:block;margin-bottom:20px;}
.page-hero h1{font-size:clamp(34px,5vw,52px);max-width:16ch;}
.page-hero .sub{
  font-family:var(--body);
  font-size:17px;
  color:rgba(241,236,221,0.78);
  max-width:52ch;
  margin-top:18px;
}
.page-hero .cta-row{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- steps ---------- */
.steps{padding:76px 0;}
.steps .head{max-width:60ch;margin-bottom:52px;}
.steps .head h2{font-size:clamp(26px,3.4vw,36px);margin-top:14px;}
.step-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.step{background:var(--parchment);padding:34px 28px;}
.step .ref{display:block;margin-bottom:22px;}
.step h3{font-size:19px;margin-bottom:10px;}
.step p{font-family:var(--body);font-size:15px;color:rgba(35,32,26,0.72);}
@media (max-width:760px){.step-grid{grid-template-columns:1fr;}}

/* ---------- panel / cta block ---------- */
.panel{
  background:var(--parchment-2);
  border:1px solid var(--line);
  padding:48px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
}
.panel h2{font-size:26px;max-width:18ch;}
.panel .sub{font-family:var(--body);font-size:15px;color:rgba(35,32,26,0.68);margin-top:10px;max-width:40ch;}
.section{padding:0 0 76px;}

/* ---------- honest notes ---------- */
.aside{
  font-family:var(--mono);
  font-size:12.5px;
  color:rgba(35,32,26,0.55);
  line-height:1.7;
  max-width:60ch;
  margin-top:14px;
}