/* ======================================================================
   ARACO — Abdul Rahim Architectural Consultants
   Design system: "Blueprint & Stone"
   Palette keyed to the brand logo (navy wordmark + brand-red "A" mark)
   ====================================================================== */

:root{
  --bg:        #F4F2EC;   /* warm stone — page background */
  --bg-deep:   #ECE8DF;   /* slightly deeper stone band */
  --surface:   #FFFFFF;   /* cards, panels */
  --ink:       #19243A;   /* deep navy ink — headings & body */
  --ink-soft:  #2B3852;
  --muted:     #5C6675;   /* slate grey — secondary text */
  --faint:     #8A93A0;   /* captions, meta */
  --primary:   #19243A;   /* structural navy */
  --secondary: #8A4A33;   /* warm terracotta */
  --accent:    #C5342A;   /* brand red — single CTA colour */
  --accent-deep:#A52A22;
  --gold:      #C9A24B;   /* hairline divider only — sparing */
  --border:    #E4E0D7;   /* stone hairline */
  --border-2:  #D8D3C7;
  --ink-12:    rgba(25,36,58,.12);
  --ink-06:    rgba(25,36,58,.06);
  --focus:     #C5342A;

  /* fonts (tweakable) */
  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 72px);
  --header-h: 76px;

  --shadow-sm: 0 1px 2px rgba(25,36,58,.05), 0 2px 8px rgba(25,36,58,.04);
  --shadow-md: 0 8px 30px rgba(25,36,58,.10), 0 2px 8px rgba(25,36,58,.05);
  --shadow-lg: 0 30px 70px -20px rgba(25,36,58,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
*::selection{ background:var(--accent); color:#fff; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
p{ margin:0; }

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

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,128px); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }
.deep{ background:var(--bg-deep); }
.dark{ background:var(--primary); color:#EAEBEF; }
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff; }

/* ---------- eyebrow / mono label ---------- */
.kicker{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:700;
}
.kicker::before{
  content:"";
  width:26px; height:1px; background:var(--accent); opacity:.6;
}
.kicker--center{ justify-content:center; }
.dark .kicker{ color:var(--gold); }
.dark .kicker::before{ background:var(--gold); }

.idx{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.2em; color:var(--faint);
  text-transform:uppercase;
}

/* ---------- section heading ---------- */
.s-head{ max-width:760px; }
.s-head h2{
  font-size:clamp(30px,4.6vw,54px);
  margin-top:18px;
}
.s-head p{
  color:var(--muted); font-size:clamp(16px,1.6vw,19px);
  margin-top:18px; max-width:60ch; text-wrap:pretty;
}
.s-head--center{ margin-inline:auto; text-align:center; }
.s-head--center .kicker{ justify-content:center; }
.s-head--center p{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  letter-spacing:.01em;
  padding:15px 26px; border-radius:2px; border:1px solid transparent;
  transition:all .35s var(--ease); min-height:50px; white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-deep); box-shadow:0 12px 28px -10px rgba(197,52,42,.6); }
.btn--primary:hover svg{ transform:translateX(4px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn--ghost:hover svg{ transform:translateX(4px); }
.btn--ondark{ background:#fff; color:var(--ink); }
.btn--ondark:hover{ background:var(--gold); color:var(--ink); }
.btn--lineDark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn--lineDark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* arrow link */
.alink{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:var(--ink);
}
.alink svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.alink:hover{ color:var(--accent); }
.alink:hover svg{ transform:translateX(4px); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- hairline rule ---------- */
.rule{ height:1px; background:var(--border); border:0; margin:0; }
.rule-gold{ height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); border:0; }

/* utility */
.mono{ font-family:var(--font-mono); }
.no-scroll{ overflow:hidden; }