/* Dharti Group — reset, type, shared elements
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font);
  font-weight:400;
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.intro-lock{ overflow:hidden; height:100vh; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }

/* ---------- section background image + navy grade ---------- */
.sec-bg{ position:relative; isolation:isolate; }
.sec-bg::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--bg); background-size:cover; background-position:center;
}
.sec-bg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,13,28,.94), rgba(6,13,28,.86) 50%, rgba(6,13,28,.96));
}

/* ---------- page-head background image ---------- */
/* The inner pages opened on flat navy, which read as unfinished. Each page head
   now carries an image behind it, treated so it stays atmosphere rather than
   becoming the subject: pulled most of the way to greyscale so the stock blue
   cannot fight the navy and gold, held under a veil, and faded to solid --ink
   at the bottom edge so the section dissolves into the page instead of ending
   on a seam. The nav is fixed and transparent until scrolled, so the top stop
   stays dark enough to carry the nav links over it.

   Pages set --bg in their own stylesheet, plus --bg-pos where the crop needs
   steering, --bg-op where the image is unusually light or dark, and --bg-bright
   for a frame too dark to register at any opacity. Bump --bg-op rather than
   lightening the veil: the veil is what keeps the h1 legible. */
.head-bg{ position:relative; isolation:isolate; }
.head-bg::before{
  content:""; position:absolute; z-index:-2;
  /* A band anchored to the top of the head, not a stretch over all of it. A
     head grows tall when its copy wraps — most of all on a phone — and an
     image stretched to that height is zoomed until nothing in it is legible.
     Capping the band keeps the same crop on every page and lets the mask below
     do the fading out. */
  inset:0 0 auto 0;
  height:min(100%, var(--bg-h,44rem));
  background-image:var(--bg);
  background-size:cover;
  background-position:var(--bg-pos,center);
  background-repeat:no-repeat;
  opacity:var(--bg-op,.42);
  filter:grayscale(.74) contrast(1.05) brightness(var(--bg-bright,.9));
  /* The image is masked out before it reaches the bottom edge rather than being
     covered by an opaque stop in the veil below. A veil ramping to solid ends
     on a visible line whenever the picture behind it is bright; a mask has
     nothing left to hide by the time the section ends. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.5) 74%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.5) 74%,transparent 96%);
}
.head-bg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(6,13,28,.88) 0%,
      rgba(6,13,28,.58) 34%,
      rgba(6,13,28,.74) 100%),
    linear-gradient(90deg,
      rgba(6,13,28,.76) 0%,
      rgba(6,13,28,.24) 62%,
      rgba(6,13,28,.44) 100%);
}
/* A centred head has no quiet side to give the image, so it takes the vertical
   veil only and carries it a little heavier. */
.head-bg--center::after{
  background:linear-gradient(180deg,
    rgba(6,13,28,.88) 0%,
    rgba(6,13,28,.7)  34%,
    rgba(6,13,28,.82) 100%);
}

@media (max-width:700px){
  /* Narrow and tall is the worst case for a 21:9 frame, so the band gets
     shorter rather than letting cover zoom into a sliver of it. */
  .head-bg::before{ --bg-h:26rem; }
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-weight:400; font-size:.68rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.eyebrow--light{ color:var(--gold-2); }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.4rem; border-radius:2px;
  transition:all .4s var(--ease); cursor:pointer;
}
.btn--ghost{
  color:var(--bone); border:1px solid var(--line); background:rgba(243,239,230,.03);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-2); background:rgba(198,161,91,.08); }
.btn--ghost svg{ transition:transform .4s var(--ease); }
.btn--ghost:hover svg{ transform:translateY(3px); }
.btn--solid{ background:var(--gold); color:#14100a; border:1px solid var(--gold); font-weight:700; }
.btn--solid:hover{ background:var(--gold-2); border-color:var(--gold-2); }

/* ============================================================
   FOCUS
   One visible ring for the whole site. :focus-visible rather than :focus so
   it appears for keyboard and assistive navigation without ringing every
   mouse click. Components that need a tighter ring override it locally.
   ============================================================ */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
.sec-light :focus-visible{ outline-color:var(--gold-deep); }

[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none; }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  max-width:var(--maxw,none); margin:0 auto clamp(2rem,4vw,3rem);
  padding-bottom:1.2rem; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.section-head--center{
  flex-direction:column; align-items:center; text-align:center;
  border-bottom:none; padding-bottom:0; margin-bottom:clamp(1.8rem,3vw,2.4rem);
}
.section-title{
  font-weight:500; font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.18; letter-spacing:-.02em; margin-top:.6rem;
}
.section-link{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim);
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; transition:color .3s;
}
.section-link span{ transition:transform .4s var(--ease); }
.section-link:hover{ color:var(--gold-2); }
.section-link:hover span{ transform:translateX(5px); }

/* image slot */
.ph{
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
  border:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:flex-start;
}
/* just enough scrim at the foot to keep the label legible */
.ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(6,13,28,.6));
}

/* ============================================================
   LIGHT SECTIONS — relief from the dark
   ============================================================ */
.sec-light{ background:var(--cream); color:var(--ink); }
.sec-light .eyebrow{ color:var(--gold-deep); }
.sec-light .section-title,
.sec-light .ethos__statement,
.sec-light .why__title{ color:var(--ink); }
.sec-light .ethos__statement em{ color:var(--gold-deep); }
.sec-light .ethos__rule{ background:var(--gold-deep); }
.sec-light .ethos__sign{ color:#6b7486; }
.sec-light .why__idx{ color:var(--gold-deep); }
.sec-light .why__text{ color:#4a5468; }
.sec-light .stat__num,
.sec-light .stat__suf{ color:var(--gold-deep); }
.sec-light .stat__label{ color:#5a6478; }
.sec-light .stats__note{ color:#8a93a3; }
.sec-light .why__cols{ border-top-color:rgba(6,13,28,.14); }
.sec-light .section-head{ border-bottom-color:rgba(6,13,28,.14); }
/* the ghost button was drawn for navy; on the cream band it needs ink */
.sec-light .btn--ghost{
  color:var(--ink); border-color:rgba(6,13,28,.22); background:rgba(6,13,28,.02);
}
.sec-light .btn--ghost:hover{
  border-color:var(--gold-deep); color:var(--gold-deep); background:rgba(138,106,47,.06);
}
.ph__label{
  position:relative; z-index:1; margin:.7rem;
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  padding:.3rem .6rem; border:1px solid var(--line); border-radius:2px;
  background:rgba(6,13,28,.5);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .hero__img{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ============================================================
   INNER PAGE SHELL
   Every page except the homepage puts .page__main on <main>. Each page then
   brings its own head section in its own partial. The stub scaffolding that
   used to live here (.page__head, .page__title, .page__stub) went out with
   the last stub.
   ============================================================ */
.page__main{ padding-top:clamp(7rem,14vh,10rem); min-height:60vh; }
/* A head that carries a background image has to start at the very top of the
   viewport, so the image runs up behind the fixed nav rather than beginning on
   a navy band below it. The head's own top padding already holds the text
   clear of the bar, so main gives its padding up. */
.page__main:has(> .head-bg:first-child){ padding-top:0; }

/* ============================================================
   FORMS — shared bits
   The four enquiry forms each keep their own layout in their own partial.
   What lives here is only what all of them share: the honeypot, the reply
   line, and the button's busy state.
   ============================================================ */

/* Web3Forms' spam trap. A real visitor never sees it, so it must be out of
   the layout, out of the tab order and out of the accessibility tree; a bot
   filling the form from the markup ticks it and the submission is dropped. */
.hp{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; border:0;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}

/* The reply line. It is a live region, so it is in the DOM from first paint
   and only ever changes its text — announced to a screen reader without
   moving focus away from the form. */
.form-status{
  margin:1.25rem 0 0;
  font-size:.9375rem;
  line-height:1.55;
  max-width:46ch;
  color:var(--bone-dim);
  border-left:2px solid var(--line);
  padding-left:.875rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.form-status[data-state="busy"]{ color:var(--muted); }
.form-status[data-state="ok"]{ color:var(--gold-2); border-left-color:var(--gold); }
.form-status[data-state="error"]{ color:#e9a98f; border-left-color:#b4643f; }

/* On cream, --muted (3.2:1) and --gold-deep (4.3:1) both fall under AA for
   body-size text, so the reply line uses darker siblings of each. */
.sec-light .form-status{ color:#5c6678; border-left-color:rgba(6,13,28,.16); }
.sec-light .form-status[data-state="busy"]{ color:#5c6678; }
.sec-light .form-status[data-state="ok"]{ color:#7a5c26; border-left-color:#7a5c26; }
.sec-light .form-status[data-state="error"]{ color:#8f3c1c; border-left-color:#8f3c1c; }

/* While a submit is in flight the button stays in place and reads as busy,
   rather than disappearing or shifting the layout under the cursor. */
.btn[data-busy]{ opacity:.55; cursor:progress; }
.btn:disabled{ cursor:not-allowed; }

/* A field the browser has rejected, once the visitor has had a go at it.
   :user-invalid rather than :invalid so an empty required field is not marked
   red before it has been touched. */
.ct-field input:user-invalid,
.ct-field textarea:user-invalid,
.rd-field input:user-invalid,
.rd-field textarea:user-invalid{ border-color:#b4643f; }

/* ============================================================
   TOUCH FORMS
   iOS Safari zooms the page into any field set below 16px and does not
   zoom back out. Every form on the site styles its inputs at .85-.9rem,
   so on phones they are lifted to 16px here, in one place. The labels
   above them come up a step too; at .58rem they are about 9px on a phone.
   ============================================================ */
@media (max-width:820px){
  input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  textarea, select{ font-size:16px !important; }
  .ct-field__label, .eq__label, .rd-field__label, .fs-hear__label,
  .ct-form__note, .ct-block__k{ font-size:.68rem; }
}