/* Alajnaf Inc. — ivory, stone and champagne gold.
   Only colours change here; layout, type and motion come from site.css. */
:root {
  --ivory: #f8f7f3;      /* primary background */
  --white: #ffffff;      /* secondary background */
  --mist: #f1eee8;       /* soft stone: alternating sections */
  --pearl: #fcfbf8;      /* elevated surfaces */
  --gold: #b39a6a;       /* champagne gold */
  --gold-2: #a48a5c;     /* muted antique gold */
  --ink: #292a27;        /* elegant graphite */
  --gray: #77756f;       /* warm grey: large secondary text */
  --gray-sm: #6b6963;    /* warm grey, deepened so small text stays readable */
  --line: #e9e4da;       /* light champagne stone */
  --blue: var(--gold);   /* site.css name for the primary accent */
  --link: var(--ink);
  --black: var(--ink);
}

body { background: var(--ivory); color: var(--ink); }
::selection { background: #e9dfca; color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.skip { background: var(--ink); color: var(--ivory); }

/* Navigation */
.nav { background: rgba(248, 247, 243, 0.84); border-bottom-color: var(--line); }
.brand { color: var(--ink); }
.brand span { color: var(--gold-2); }
.links a { color: rgba(41, 42, 39, 0.78); }
.links a:hover, .links a[aria-current="page"] { color: var(--ink); }
.links a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--gold); }
.progress { background: var(--gold); }

/* Text */
.sub, .body-lg { color: var(--gray); }
.body-lg strong { color: var(--ink); }
.reading p { color: #4a4945; }
.essay > p:first-child { color: var(--ink); }

/* Links: graphite words, a champagne chevron */
a { color: var(--ink); }
a:hover { text-decoration-color: var(--gold); text-underline-offset: 3px; }
.more { color: var(--ink); }
.more::after { color: var(--gold-2); }
.reading a, .essay a, .facts a, .legal a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* Buttons keep their shape and motion; only colour changes */
.pill { background: var(--gold); color: var(--ink); font-weight: 500; }
.pill:hover { background: var(--gold-2); color: var(--ink); box-shadow: 0 10px 26px rgba(164, 138, 92, 0.28); }

/* Sections */
.mist { background: var(--mist); }
.bleed { background: var(--mist); }
.bleed.expand { background: var(--ivory); }

/* Scroll-lit statements, now on soft stone instead of black */
.scrub { background: var(--mist); }
.scrub__text { color: var(--ink); }
.scrub__text cite { color: var(--gray-sm); }
.motion .scrub .sw { color: #d6d0c4; }
.motion .scrub .sw.lit { color: var(--ink); }
.motion .scrub .sw.gold.lit { color: var(--gold-2); }

/* Tiles */
.tile { background: var(--mist); color: var(--ink); }
.tile:hover { box-shadow: 0 24px 60px rgba(41, 42, 39, 0.10); }
.tile::before { background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.55), transparent 40%); }
.tile.photo { background: #d9d3c7; color: #fff; }
.tile.photo::after { background: linear-gradient(180deg, rgba(41, 42, 39, 0.56) 0%, rgba(41, 42, 39, 0.08) 45%, rgba(41, 42, 39, 0) 100%); }
.posts .tile.photo::after, .tiles.one .tile.photo::after { background: linear-gradient(180deg, rgba(41, 42, 39, 0.64) 0%, rgba(41, 42, 39, 0.26) 55%, rgba(41, 42, 39, 0.05) 100%); }
.tile.photo .more, .tile.photo a.more { color: #fff; }
.tile.photo .more::after { color: #e6d5b3; }
.tile.photo .sub { color: rgba(255, 255, 255, 0.9); }

/* Cards, notes, author box */
.note { background: var(--pearl); border: 1px solid var(--line); }
.note:hover { box-shadow: 0 20px 50px rgba(41, 42, 39, 0.08); }
.note time, .crumbs, .crumbs a, .byline, .facts dt, .note .cat { color: var(--gray-sm); }
.note .more { color: var(--ink); }
.author { background: var(--pearl); border: 1px solid var(--line); }

/* Lists, steps, numbers */
.checks li, .checks li:last-child { border-color: var(--line); }
.facts, .facts div { border-color: var(--line); }
.step-n { color: var(--gold-2); font-weight: 500; font-size: 15px; letter-spacing: .14em; margin-bottom: 18px; }
.stepper__tabs button[aria-selected="true"] { background: var(--mist); }
.stepper__tabs button[aria-selected="true"] .n { color: var(--gold-2); }
.stepper__tabs .bar { background: rgba(41, 42, 39, 0.08); }
.stepper__tabs .bar::after { background: var(--gold); }

/* Copy email */
.copy { background: var(--pearl); border-color: var(--line); color: var(--ink); }
.copy:hover { background: var(--mist); }
.copy.done { background: #f3ecdf; border-color: #dcc9a6; color: #5f4b27; }

/* ---------- Site search ---------- */
.nav__right { display: flex; align-items: center; gap: 26px; }
.nav__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: -6px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: rgba(41, 42, 39, 0.8);
  transition: background .2s, color .2s;
}
.nav__search:hover { background: rgba(41, 42, 39, 0.06); color: var(--ink); }
.nav__search svg { width: 16px; height: 16px; }
.search {
  width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px));
  margin: 10vh auto 0; padding: 0; border: 0; border-radius: 22px;
  background: rgba(252, 251, 248, 0.97); color: var(--ink);
  box-shadow: 0 40px 100px rgba(41, 42, 39, 0.22), 0 0 0 1px var(--line);
  overflow: hidden;
}
.search::backdrop { background: rgba(241, 238, 232, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.search[open] { animation: searchIn .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes searchIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.search__top { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.search__top svg { width: 18px; height: 18px; color: var(--gray); flex: none; }
.search__top input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 19px; color: var(--ink); }
.search__top kbd { font: inherit; font-size: 12px; color: var(--gray-sm); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
.search__list { overflow-y: auto; max-height: calc(min(560px, 100vh - 120px) - 64px); padding: 10px 10px 14px; }
.search__group { font-size: 12px; color: var(--gray-sm); padding: 12px 12px 6px; margin: 0; }
.search__item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 12px; border-radius: 12px; color: var(--ink); }
.search__item small { color: var(--gray-sm); font-size: 13px; white-space: nowrap; }
.search__item:hover, .search__item.on { background: var(--mist); text-decoration: none; }
.search__item.on { box-shadow: inset 2px 0 0 var(--gold); }
.search__empty { padding: 22px 12px; color: var(--gray-sm); margin: 0; }
.search [hidden] { display: none !important; }

/* ---------- Footer ---------- */
footer { background: var(--mist); color: var(--gray-sm); border-top: 1px solid var(--line); }
.foot a { color: #4a4945; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding: 48px 0 36px; border-bottom: 1px solid var(--line); }
.foot__brand strong { display: block; color: var(--ink); font-size: 14px; letter-spacing: .16em; font-weight: 600; }
.foot__brand span { display: block; margin-top: 8px; font-size: 13px; }
.foot__brand i { display: block; width: 28px; height: 1px; background: var(--gold); margin-top: 16px; }
.foot__col h2 { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .02em; margin: 0 0 12px; }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li { margin: 0 0 9px; font-size: 13px; }
.foot .foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 16px 0 0; border: 0; }
.foot .foot__legal p { padding: 0; border: 0; }
.foot .foot__credit { padding: 14px 0 0; border: 0; font-size: 11px; }

/* ---------- Corporate pages ---------- */
.kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); font-weight: 500; margin: 0 0 18px; }
.hero .kicker { margin-bottom: 22px; }
.lede { max-width: 760px; margin: 0 auto; }
.rule { width: 40px; height: 1px; background: var(--gold); border: 0; margin: 28px auto; }
.cols.six { grid-template-columns: repeat(3, 1fr); }
.cols .tag { font-size: 14px; color: var(--gray-sm); margin: 14px 0 0; }
.sector { padding-top: 28px; border-top: 1px solid var(--line); }
.sector .checks { font-size: 17px; margin-top: 18px; }
.sector .checks li { padding: 10px 0; }
.notice { max-width: 760px; margin: 48px auto 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--pearl); font-size: 15px; color: var(--gray-sm); text-align: left; }
.notice strong { color: var(--ink); font-weight: 600; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; text-align: left; }
.cat-card { background: var(--pearl); border: 1px solid var(--line); border-radius: 24px; padding: 28px 24px; }
.cat-card h3 { font-size: 21px; margin-bottom: 8px; }
.cat-card p { color: var(--gray-sm); font-size: 15px; margin: 0; }
.note .cat { font-size: 13px; letter-spacing: .04em; }
.legal { max-width: var(--read); margin: 0 auto; }
.legal h2 { font-size: 24px; margin: 48px 0 10px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; color: #4a4945; }
.legal .updated { color: var(--gray-sm); font-size: 15px; }

/* ---------- Inquiry form ---------- */
.inquiry { max-width: 760px; margin: 56px auto 0; text-align: left; background: var(--pearl); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 44px); }
.inquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label, .field legend { font-size: 14px; font-weight: 500; color: var(--ink); padding: 0; }
.field label .opt { font-weight: 400; color: var(--gray-sm); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(179, 154, 106, 0.22); }
.field [aria-invalid="true"] { border-color: #a24a3b; }
.field .err { font-size: 13px; color: #9a3f30; min-height: 0; }
.field fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.field fieldset legend { margin-bottom: 8px; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.radio input { width: 16px; height: 16px; accent-color: var(--gold-2); margin: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.inquiry__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.inquiry__foot .privacy { font-size: 13px; color: var(--gray-sm); margin: 0; max-width: 420px; }
.inquiry button.pill { border: 0; cursor: pointer; font: inherit; font-size: 17px; font-weight: 500; }
.inquiry button.pill[disabled] { opacity: .6; cursor: progress; transform: none; }
.inquiry__status { margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; font-size: 15px; }
.inquiry__status.ok { background: #f3ecdf; border: 1px solid #dcc9a6; color: #4d3d1f; }
.inquiry__status.bad { background: #f7ece9; border: 1px solid #e3c2ba; color: #7a3326; }
.inquiry__status[hidden] { display: none; }
.inquiry.sent .inquiry__grid, .inquiry.sent .inquiry__foot { display: none; }

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .cats { grid-template-columns: 1fr 1fr; }
  .cols.six { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .nav__right { gap: 12px; }
  .nav__search { margin-right: -4px; }
  .inquiry__grid { grid-template-columns: 1fr; }
  .cats { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .brand span { display: none; }
  .links { gap: 12px; }
  .links a { font-size: 12px; }
  .links a.nav-opt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search[open] { animation: none; }
}
.cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; margin-top: 0; }
@media (max-width: 860px) { .cols.two { grid-template-columns: 1fr; gap: 40px; } }
.cat-card { gap: 10px; }
.cat-card:hover { text-decoration: none; }
.sector h3 { font-size: 28px; }
.motion .cols.reveal.in li { opacity: 1; transform: none; }
.cat-card { display: flex; flex-direction: column; }
.cat-card p { flex: 1; }
.cat-mail { font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; word-break: break-word; }
.sector__img { overflow: hidden; border-radius: 22px; margin-bottom: 26px; background: var(--mist); }
.sector__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.sector:hover .sector__img img { transform: scale(1.04); }
.sector { border-top: 0; padding-top: 0; }

/* Team-authored articles: no portrait */
.author.team { grid-template-columns: 1fr; }

/* ---------- Motion refinements ---------- */
/* A fine gold rule draws itself under section headings. */
.motion .gr::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 22px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .2s; }
.motion .center .gr::after { margin-left: auto; margin-right: auto; transform-origin: center; }
.motion .essay h2.gr::after { width: 32px; margin-top: 14px; }
.motion .gr.drawn::after { transform: scaleX(1); }

/* Pull quotes in articles. */
.pull { position: relative; margin: 56px 0 8px; padding: 6px 0 6px 28px; }
.pull::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); transform-origin: top center; }
.pull p, .reading .pull p { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; font-weight: 400; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.motion .pull p { opacity: 0; transform: translateY(18px); transition: opacity 1s ease .25s, transform 1s cubic-bezier(.2, .7, .2, 1) .25s; }
.motion .pull::before { transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.motion .pull.in p { opacity: 1; transform: none; }
.motion .pull.in::before { transform: scaleY(1); }

/* Article tiles: a brighter photo, a gold underline and arrow on hover. */
.tile.photo img.bg { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.tile-link.photo:hover img.bg { filter: brightness(1.07) saturate(1.05); }
.tile-link .more { background: linear-gradient(#e6d5b3, #e6d5b3) left bottom / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .5s cubic-bezier(.2, .7, .2, 1); }
.tile-link:hover .more { background-size: calc(100% - 1.3em) 1px; }
.tile-link .more::after { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.tile-link:hover .more::after { transform: translateX(6px); }

/* Photos ease in from a slight zoom as they scroll into view. */
@supports (animation-timeline: view()) {
  .motion .tile.photo img.bg { animation: alj-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  @keyframes alj-settle { from { scale: 1.08; } to { scale: 1; } }
}