/* =========================================================
   PTC — Navy & Royal Gold build
   Layout follows the reference site's structure; code is original.
   Primary: Midnight Navy (#07132c) — very dark, near-black navy.
   Accent:  Royal Gold (#c9a227) — highlights, hovers, active states.
   ========================================================= */

:root{
  /* ── Navy scale (dark → light) ──────────────────────────────
     --black:    header, footer, dark sections
     --ink / --ink-2: body text
     --grey-6 → --grey-1: supporting tones (blue-grey cool scale)
     Contrast on white: grey-6 ≥ 6:1 | grey-5 ≥ 4.5:1
     Contrast on --black: white 14:1 | grey-3 7:1 | grey-4 4.5:1
     black/ink/ink-2 are the same navy hue (11:31:74) scaled to
     0.60/0.60/0.68 of the original — darker, never re-hued. */
  --black:#07132c;        /* midnight navy — header, footer, dark panels */
  --ink:#081735;          /* primary body text on light backgrounds       */
  --ink-2:#122752;        /* secondary ink, sub-headings                  */

  /* blue-grey supporting scale */
  --grey-6:#2e4a7a;       /* dark support — 6:1 on white              */
  --grey-5:#3d5f9a;       /* 4.5:1 on white — captions, meta          */
  --grey-4:#7a9abf;       /* mid — disabled, placeholder              */
  --grey-3:#b0c4de;       /* light accent — on-dark body text         */
  --grey-2:#dce8f5;       /* subtle tint backgrounds                  */
  --grey-1:#f0f5fb;       /* page-level light background              */
  --white:#ffffff;

  /* ── Royal Gold accent ──────────────────────────────────────
     Used for CTAs, active-nav underlines, hover fills, accents. */
  --gold:#c9a227;
  --gold-light:#e8c94a;
  --gold-dark:#a07c10;

  --line:#cdd9ea;
  --line-dark:rgba(255,255,255,.18);

  --scrim:linear-gradient(to right,rgba(7,19,44,.85) 0%,rgba(7,19,44,.55) 45%,rgba(7,19,44,.15) 100%);
  --scrim-rtl:linear-gradient(to left,rgba(7,19,44,.85) 0%,rgba(7,19,44,.55) 45%,rgba(7,19,44,.15) 100%);

  --head-h:74px;
  --container:1320px;
  --gut:clamp(18px,4vw,48px);
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--white);
  color:var(--ink);
  font-size:16px;
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--gold)}
/* headings on dark navy panels stay white for contrast */
.sec--black h1,.sec--black h2,.sec--black h3,.sec--black h4,.sec--black h5,
.header h1,.header h2,.header h3,.header h4,.header h5,
.foot h1,.foot h2,.foot h3,.foot h4,.foot h5,
.phero h1,.phero h2,.phero h3,
.promo__in h2,
.hero__copy h1,.hero__copy h2{color:var(--white)}
.news h2{color:var(--white)}

::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dark :focus-visible,.header :focus-visible{outline-color:var(--white)}

/* ---------- layout ---------- */
.wrap{width:min(100% - (var(--gut) * 2),var(--container));margin-inline:auto}
/* the bar overlaps the page, so anchor targets must stop below it */
section[id]{scroll-margin-top:calc(var(--head-h) + 20px)}
.sec{padding:clamp(56px,7vw,104px) 0}
.sec--grey{background:var(--grey-1)}
.sec--black{background:var(--black);color:var(--white)}
.sec--tight{padding:clamp(40px,5vw,72px) 0}

/* ---------- section heading ---------- */
.eyebrow{
  display:inline-block;margin-bottom:14px;
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
.sec--black .eyebrow{color:var(--gold-light)}
.sec__h{font-size:clamp(1.7rem,3.6vw,2.9rem);margin-bottom:16px;color:var(--black)}
.sec--black .sec__h{color:var(--white)}
.sec__p{max-width:68ch;color:var(--grey-6);font-size:1.02rem}
.sec--black .sec__p{color:var(--grey-3)}
.sec__head{margin-bottom:clamp(30px,4vw,52px)}
.sec__head--mid{text-align:center}
.sec__head--mid .sec__p{margin-inline:auto}

/* thin rule used as a section divider, echoing the reference */
.rule{height:1px;background:var(--line);border:0;margin:0}
.sec--black .rule{background:var(--line-dark)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;font-size:.92rem;font-weight:700;letter-spacing:.02em;
  border:1px solid var(--black);background:var(--black);color:var(--white);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{background:var(--white);color:var(--black)}
.btn--ghost{background:transparent;color:var(--black)}
.btn--ghost:hover{background:var(--black);color:var(--gold)}
.btn--onDark{border-color:var(--gold);background:var(--gold);color:var(--black)}
.btn--onDark:hover{background:transparent;color:var(--gold)}
.btn--outlineDark{border-color:var(--gold);background:transparent;color:var(--gold)}
.btn--outlineDark:hover{background:var(--gold);color:var(--black)}
.btn--sm{padding:10px 20px;font-size:.84rem}
.btn--block{width:100%}

/* text link with an animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.9rem;letter-spacing:.02em;color:var(--gold);
  padding-bottom:3px;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--ease),color .25s var(--ease);
}
.tlink:hover{background-size:0 1px;color:var(--gold-dark)}
.tlink i{font-style:normal;transition:transform .3s var(--ease)}
.tlink:hover i{transform:translateX(-4px)}
[dir="ltr"] .tlink:hover i{transform:translateX(4px)}
.sec--black .tlink{color:var(--gold-light);background-image:linear-gradient(var(--gold-light),var(--gold-light))}
.sec--black .tlink:hover{color:var(--gold)}

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

/* ---------- English typography ---------- */
[dir="ltr"] body{font-family:'Inter',system-ui,sans-serif;line-height:1.65}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4,[dir="ltr"] h5{
  font-family:'Outfit',system-ui,sans-serif;letter-spacing:-.02em;
}