/* ============================================================
   AJIRA — Brand System stylesheet
   Physiotherapy · Domlur, Bengaluru
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- Orchid Violet (primary) ---- */
  --violet-50:#F3EEF6;  --violet-100:#E4D8EC; --violet-200:#C9B2D6;
  --violet-300:#AC8BBF; --violet-400:#9268A8; --violet-500:#7A4F95;
  --violet-600:#653E7E; --violet-700:#503066; --violet-800:#3C244C;
  --violet-900:#281832;
  --violet:var(--violet-500);

  /* ---- Clay Terracotta (secondary) ---- */
  --clay-50:#FBF0EA;  --clay-100:#F4D9CB; --clay-200:#E8B49C;
  --clay-300:#DA8E6D; --clay-400:#C9744D; --clay-500:#B5613C;
  --clay-600:#984E2F; --clay-700:#793D25; --clay-800:#5A2D1C;
  --clay-900:#3D1F14;
  --clay:var(--clay-500);

  /* ---- Eucalyptus Sage (supporting) ---- */
  --sage-50:#EFF3EF;  --sage-100:#DBE4DC; --sage-200:#BACBBC;
  --sage-300:#97AF9A; --sage-400:#7D9A80; --sage-500:#6E8E72;
  --sage-600:#56735A; --sage-700:#435A46; --sage-800:#324233;
  --sage-900:#222C23;
  --sage:var(--sage-500);

  /* ---- Warm neutrals ---- */
  --bone-50:#FAF7F1;  --bone-100:#F5F1E9; --bone-200:#ECE6DA;
  --bone-300:#DED7C7; --bone-400:#CBC2AD;
  --ink-900:#221B28; --ink-700:#443B4C; --ink-500:#6B6172;
  --ink-400:#8C8392; --ink-300:#ABA3B2;
  --white:#FFFFFF;

  /* ---- Roles ---- */
  --bg:var(--bone-100);
  --surface:var(--bone-50);
  --text:var(--ink-900);
  --muted:var(--ink-500);
  --line:var(--bone-300);

  /* ---- Type ---- */
  --display:'Bricolage Grotesque', sans-serif;
  --body:'Hanken Grotesk', sans-serif;
  --mono:'Space Mono', monospace;

  /* ---- Spacing & shape ---- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(34,27,40,.06), 0 2px 8px rgba(34,27,40,.05);
  --shadow-md:0 4px 14px rgba(34,27,40,.08), 0 14px 40px rgba(34,27,40,.07);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.6;
  font-weight:400;
}
img{display:block; max-width:100%;}
a{color:inherit;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 48px;}
.section{padding:104px 0; border-top:1px solid var(--line);}
.section:first-of-type{border-top:none;}

/* ---------- Type helpers ---------- */
.kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--clay-600);
  display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:26px; height:2px; background:var(--clay-500); display:inline-block;}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ink-900);}
.display{font-size:clamp(56px,9vw,128px); font-weight:800; letter-spacing:-.045em; line-height:.92;}
h2{font-size:clamp(34px,4.4vw,58px); font-weight:700;}
h3{font-size:clamp(22px,2.3vw,30px); font-weight:600; letter-spacing:-.015em;}
h4{font-size:19px; font-weight:600; letter-spacing:-.01em;}
.lead{font-size:clamp(20px,2.1vw,25px); line-height:1.5; color:var(--ink-700); max-width:46ch; font-weight:400;}
p{margin:0 0 1em;}
.muted{color:var(--muted);}
.mono{font-family:var(--mono);}
.sec-head{margin-bottom:56px; max-width:62ch;}
.sec-head h2{margin:18px 0 18px;}
.sec-head p{font-size:19px; color:var(--ink-700); max-width:54ch;}

/* ---------- Logo / wordmark ---------- */
.ajira-mark{display:inline-block; color:var(--ink-900);}
.ajira-mark svg{display:block; height:100%; width:auto; fill:currentColor;}

/* Horizontal lockup — the vertical artwork is built to read top-to-bottom and
   does not read when rotated sideways (the a's twist into o's). So the
   horizontal lockup sets the name in the display face: clean and readable.
   The inner <svg><use> stays in markup but is hidden, so no per-file markup
   change is needed. Sized by --h. */
.ajira-h{display:inline-flex; align-items:center; height:var(--h,56px); line-height:1; color:var(--ink-900); font-family:var(--display); font-weight:800; letter-spacing:-.05em;}
.ajira-h svg{display:none;}
.ajira-h::after{content:"ajira"; font-size:calc(var(--h,56px) * 1.18);}

/* ---------- Swatch grid ---------- */
.scale{display:grid; grid-template-columns:repeat(10,1fr); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm);}
.scale .step{aspect-ratio:1/1.25; display:flex; align-items:flex-end; padding:10px; font-family:var(--mono); font-size:10.5px; font-weight:700;}
.swatch-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.swatch-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
.swatch-chip{height:168px; display:flex; align-items:flex-end; justify-content:space-between; padding:18px 20px;}
.swatch-meta{padding:18px 20px 22px;}
.swatch-meta .name{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em;}
.swatch-meta .role{color:var(--muted); font-size:14px; margin-top:2px;}
.swatch-meta dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:16px 0 0; font-family:var(--mono); font-size:12px;}
.swatch-meta dt{color:var(--ink-400); text-transform:uppercase; letter-spacing:.08em;}
.swatch-meta dd{margin:0; color:var(--ink-700); text-align:right;}

/* ---------- Cards / specimen ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-sm);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

/* ---------- Photo placeholder ---------- */
.ph{
  position:relative; background:url("assets/Ajira-Hero-image-of-Physiotherapist-and-elderly-patient.jpg");
  border:1px dashed var(--bone-400); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; color:var(--ink-400);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-align:center; padding:18px;
}

/* ---------- Misc ---------- */
.tag{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px;}
.do{background:var(--sage-100); color:var(--sage-700);}
.dont{background:var(--clay-100); color:var(--clay-700);}
.divider{height:1px; background:var(--line); border:none; margin:0;}

/* top nav */
.topnav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bone-100) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.topnav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px;}
.topnav .brand{display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:700; letter-spacing:-.01em;}
.topnav nav{display:flex; gap:30px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.topnav nav a{text-decoration:none; color:var(--ink-500); transition:color .15s;}
.topnav nav a:hover{color:var(--violet-600);}

@media(max-width:860px){
  .wrap{padding:0 24px;}
  .grid-2,.swatch-row,.grid-3{grid-template-columns:1fr;}
  .scale{grid-template-columns:repeat(5,1fr);}
  .topnav nav{display:none;}
  .section{padding:72px 0;}
}