/* ============================================================================
   Base styles — loaded on every page, first.

   1. Tokens    colours, fonts, sizes. Change a colour here, not in each rule.
   2. Reset     element defaults
   3. Layout    .rp-container
   4. Buttons   .rp-btn and its variants
   5. Header    logo, navigation, header button, mobile menu
   6. Eyebrow   small uppercase label
   7. Footer
   8. Form fields
   9. Motion    reduced-motion safety net
   10. Mobile

   Load order: base.css → components.css → pages/<page>.css → motion.css
   ========================================================================= */

/* ============================================================== 1. TOKENS */
:root{
  /* Base palette: text, form fields, focus ring, mobile menu */
  --rp-navy:      #0B1220;
  --rp-navy-2:    #0F2038;
  --rp-gold:      #C9A227;
  --rp-gold-soft: #E7C97A;
  --rp-cream:     #F5F2EB;
  --rp-cream-2:   #FAF9F8;
  --rp-white:     #FFFFFF;
  --rp-ink:       #0B1220;
  --rp-body:      #55607A;
  --rp-body-d:    #A8B2C4;
  --rp-line:      #E3DED2;
  --rp-line-d:    #1E3050;

  /* Colours taken from the Figma designs */
  --rp-ink-blue:    #16335E;  /* headings */
  --rp-gold-bright: #E8B63E;  /* buttons, numbers, accents */
  --rp-navy-deep:   #091D36;  /* active tab, dark bands */
  --rp-text-muted:  #6B7280;  /* secondary body text */
  --rp-bronze:      #80610F;  /* small uppercase labels */

  /* Warm peach-to-grey wash behind every page hero (from the home hero) */
  --rp-hero-bg:
    radial-gradient(55% 60% at 12% 18%, rgba(252,228,205,.75), transparent 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(196,199,206,.95), transparent 70%),
    linear-gradient(160deg, #F4EFE8 0%, #EEEDEB 55%, #DEDFE2 100%);

  --rp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --rp-sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --rp-width: 1200px;
  --rp-gutter: 24px;
  --rp-header-h: 84px;

  --rp-radius: 2px;
  --rp-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================== 2. RESET */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--rp-cream-2);
  color:var(--rp-body);
  font-family:var(--rp-sans);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

a{ color:var(--rp-ink); text-decoration:none; }
a:hover{ color:var(--rp-gold); }

h1,h2,h3,h4,h5,h6{
  font-family:var(--rp-serif);
  color:var(--rp-ink);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.2rem,5.2vw,4rem); letter-spacing:-.03em; }
h2{ font-size:clamp(1.8rem,3.8vw,2.9rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.5rem); }
h4{ font-size:1.125rem; }

p{ margin:0 0 1.15em; }
ul,ol{ margin:0 0 1.15em; padding-left:1.2em; }

blockquote{
  margin:2em 0;
  padding:0 0 0 1.4em;
  border-left:2px solid var(--rp-gold);
  font-family:var(--rp-serif);
  font-size:1.35rem;
  font-style:italic;
  line-height:1.5;
  color:var(--rp-ink);
}

code,pre{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
pre{ background:var(--rp-navy); color:var(--rp-cream); padding:20px; overflow:auto; border-radius:var(--rp-radius); }

table{ width:100%; border-collapse:collapse; margin:0 0 1.5em; }
th,td{ padding:12px 14px; border-bottom:1px solid var(--rp-line); text-align:left; }
th{ font-family:var(--rp-sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rp-ink); }

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}
.rp-skip-link:focus{
  position:fixed; top:12px; left:12px;
  width:auto; height:auto; clip-path:none;
  z-index:9999;
  background:var(--rp-gold); color:var(--rp-navy);
  padding:12px 18px; font-weight:600;
}

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

/* ============================================================ 3. LAYOUT */
.rp-container{
  width:100%;
  max-width:var(--rp-width);
  margin-inline:auto;
  padding-inline:var(--rp-gutter);
}

.rp-main{ min-height:40vh; }

/* ============================================================ 4. BUTTONS */
.rp-btn,
button,
input[type="submit"]{
  display:inline-block;
  font-family:var(--rp-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  padding:16px 30px;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:background-color .3s var(--rp-ease), color .3s var(--rp-ease), border-color .3s var(--rp-ease), transform .3s var(--rp-ease);
}
.rp-btn--gold{ background:var(--rp-gold); color:var(--rp-navy); }
.rp-btn--gold:hover{ background:var(--rp-gold-soft); color:var(--rp-navy); transform:translateY(-1px); }

.rp-btn--dark{ background:var(--rp-navy); color:var(--rp-cream); }
.rp-btn--dark:hover{ background:var(--rp-navy-2); color:var(--rp-gold); }

.rp-btn--ghost{ background:transparent; color:var(--rp-cream); border-color:rgba(245,242,235,.18); }
.rp-btn--ghost:hover{ background:var(--rp-cream); color:var(--rp-navy); border-color:var(--rp-cream); }

/* ============================================================= 5. HEADER */
.rp-header{
  background:#F5F3EB;
  border-bottom:1px solid rgba(22,51,94,.07);
  position:relative;
  z-index:500;
}
.rp-header--sticky{ position:sticky; top:0; }

.rp-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:var(--rp-header-h);
}

/* Logo: brand mark image + "REMARK PLUS" text (the footer restyles it) */
.rp-wordmark,
.rp-wordmark:hover{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--rp-sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#111827;
}
.rp-wordmark__mark{ width:auto; height:44px; flex:none; }
.rp-header .rp-wordmark__name{ margin-top:12px; }
.custom-logo-link img{ max-height:44px; width:auto; }

/* Main navigation — gold underline grows in on hover and marks the current page */
.rp-nav__list{
  display:flex;
  align-items:center;
  gap:40px;
  list-style:none;
  margin:0;
  padding:0;
}
.rp-nav__list a{
  position:relative;
  padding-block:6px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#4B5563;
  transition:color .25s var(--rp-ease);
}
.rp-nav__list a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background:var(--rp-gold-bright);
  transition:width .3s var(--rp-ease);
}
.rp-nav__list a:hover,
.rp-nav__list .current-menu-item > a{ color:var(--rp-ink-blue); }
.rp-nav__list a:hover::after,
.rp-nav__list .current-menu-item > a::after{ width:100%; }

/* "Request a Consultation" button (also shown in the mobile drawer) */
.rp-header__actions{ display:flex; align-items:center; gap:16px; }
.rp-header__cta{
  white-space:nowrap;
  background:var(--rp-gold-bright);
  color:var(--rp-ink-blue);
  font-size:12.5px;
  font-weight:600;
  padding:12px 26px;
  box-shadow:0 8px 20px -12px rgba(232,182,62,.9);
}
.rp-header__cta::after{ content:" \2192"; }
.rp-header__cta:hover{ background:#F0C55A; color:var(--rp-ink-blue); }

/* Mobile menu button — three lines that turn into an X */
.rp-burger{
  display:none;
  background:transparent;
  border:1px solid rgba(22,51,94,.18);
  padding:12px 11px;
  width:44px; height:42px;
}
.rp-burger span{
  display:block;
  width:20px; height:1.5px;
  background:var(--rp-ink-blue);
  transition:transform .3s var(--rp-ease), opacity .2s var(--rp-ease);
}
.rp-burger span + span{ margin-top:5px; }
.rp-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.rp-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.rp-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1024px){
  .rp-nav{ display:none; }
  .rp-burger{ display:block; }
  .rp-header__cta{ display:none; }
}

/* -------------------------------------------------------- mobile drawer */
.rp-mobile-nav{
  position:fixed;
  inset:var(--rp-header-h) 0 0;
  background:var(--rp-navy);
  z-index:480;
  overflow-y:auto;
  animation:rp-fade .25s var(--rp-ease);
}
.rp-mobile-nav[hidden]{ display:none; }
.rp-mobile-nav__inner{ padding:32px 24px 64px; }
.rp-mobile-nav__list{ list-style:none; margin:0 0 28px; padding:0; }
.rp-mobile-nav__list a{
  display:block;
  padding:15px 0;
  border-bottom:1px solid var(--rp-line-d);
  color:var(--rp-cream);
  font-family:var(--rp-serif);
  font-size:1.3rem;
}
.rp-mobile-nav .rp-btn{ display:block; text-align:center; }
.rp-mobile-nav__contact{ margin-top:32px; }
body.rp-menu-open{ overflow:hidden; }

@keyframes rp-fade{ from{ opacity:0 } to{ opacity:1 } }

/* ======================================================= 6. EYEBROW
   Small uppercase label above headings. Sections restyle it as needed. */
.rp-eyebrow{
  font-family:var(--rp-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rp-gold);
  margin:0 0 14px;
}
.rp-eyebrow__tight{ letter-spacing:0; }

/* ============================================================ 7. FOOTER */
.rp-footer{
  background:#0B1220;
  border-top:2px solid #E8B63E;
  color:#C9CCD4;
  font-size:11px;
}
.rp-footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) repeat(3, minmax(0,1fr));
  gap:40px 32px;
  padding-block:clamp(56px,6vw,80px) clamp(44px,5vw,64px);
}
.rp-footer .rp-wordmark{
  flex-direction:column;
  align-items:center;
  gap:14px;
  font-size:clamp(20px,2.3vw,30px);
  letter-spacing:.02em;
  color:#fff;
}
.rp-footer .rp-wordmark__mark{ width:auto; height:110px; }
.rp-footer .custom-logo-link img{ max-height:96px; }
.rp-footer__title{
  font-family:var(--rp-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#E8B63E;
  margin:6px 0 18px;
}
.rp-footer__links,
.rp-footer__contact{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rp-footer__links a{
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#C9CCD4;
  transition:color .25s var(--rp-ease);
}
.rp-footer__contact{ margin-top:26px; }
.rp-footer__contact a{ font-size:12px; color:#9CA3AF; }
.rp-footer__contact .rp-footer__email{ font-weight:600; color:#fff; word-break:break-all; }
.rp-footer a:hover{ color:#E8B63E; }

.rp-footer__bar{ border-top:1px solid rgba(255,255,255,.06); }
.rp-footer__bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:26px;
}
.rp-footer__copy{
  margin:0;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9CA3AF;
}
.rp-footer__sep{ margin:0 10px; color:#4B5563; }
.rp-footer__copy a{ color:#E8B63E; }
.rp-footer__copy a:hover{ color:#fff; }
.rp-footer__icons{ display:flex; align-items:center; gap:16px; }
.rp-footer__icons a,
.rp-footer__share{
  display:inline-flex;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  color:#9CA3AF;
  cursor:pointer;
}
.rp-footer__icons svg{ width:17px; height:17px; }
.rp-footer__socials{ display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0; }
.rp-footer__socials a,
.rp-footer__socials span{ display:inline-flex; color:#9CA3AF; }
.rp-footer__share:hover,
.rp-footer__share.is-copied{ color:#E8B63E; }

@media (max-width:900px){
  .rp-footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rp-footer .rp-wordmark{ align-items:flex-start; }
}
@media (max-width:520px){
  .rp-footer__grid{ grid-template-columns:1fr; }
  .rp-footer__bar-inner{ flex-direction:column-reverse; text-align:center; }
  .rp-footer .rp-wordmark__mark{ height:80px; }
}

.rp-contact-list{ list-style:none; margin:0; padding:0; }
.rp-contact-list li{ padding:6px 0; }
.rp-contact-list a{ color:var(--rp-body-d); }
.rp-contact-list a:hover{ color:var(--rp-gold); }

/* ====================================================== 8. FORM FIELDS */
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],
input[type="search"],input[type="password"],input[type="number"],textarea,select{
  width:100%;
  font-family:var(--rp-sans);
  font-size:15px;
  color:var(--rp-ink);
  background:var(--rp-white);
  border:1px solid var(--rp-line);
  border-radius:var(--rp-radius);
  padding:14px 16px;
  transition:border-color .25s var(--rp-ease);
}
input:focus,textarea:focus,select:focus{ border-color:var(--rp-gold); outline:none; }
label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rp-ink);
  margin-bottom:8px;
}

/* ========================================================= 9. MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ========================================================== 10. MOBILE */
@media (max-width:600px){
  :root{ --rp-gutter:20px; --rp-header-h:72px; }
  body{ font-size:16px; }
  /* Full-width buttons; justify-content centres the label on inline-flex
     buttons too, and the taller line-height keeps a wrapped label readable. */
  .rp-btn{ width:100%; text-align:center; justify-content:center; line-height:1.4; }
}