/* ==========================================================================
   Andrew Charles Cooper — overrides on the MegaOne celebrity demo.
   Aviation navy + brass. Serif display face.
   ========================================================================== */
:root{
  /* warm brown house palette */
  --ac-navy:#3B2A1F;        /* brand panel  */
  --ac-navy-2:#2E2118;      /* panel, deeper */
  --ac-brass:#9A5B2D;       /* primary action / accent on light */
  --ac-brass-2:#D6A268;     /* brand accent / accent on dark    */
  --ac-bg:#FBF8F4;          /* page background */
  --ac-border:#E6DED2;      /* borders */
  --ac-ease:cubic-bezier(.22,.61,.36,1);
}

h1,h2,h3,h4,h5,.heading,.card-title{
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif !important;
  font-weight:400 !important;
}

/* ---------- reveal: neutralise WOW's re-hiding, drive it from ac-reveal.js ---------- */
.wow{ visibility:visible !important; animation-name:none !important; }
.ac-anim .wow{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--ac-ease), transform .85s var(--ac-ease);
}
.ac-anim .wow.ac-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .ac-anim .wow{ opacity:1 !important; transform:none !important; }
}

/* ---------- wordmark ---------- */
.ac-wordmark{ display:block; line-height:1.2; }
.ac-wordmark b{
  display:block; font-family:'Source Serif 4',serif; font-weight:600;
  font-size:19px; color:#fff; letter-spacing:.005em;
}
.ac-wordmark small{
  display:block; font-size:9px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ac-brass-2); margin-top:2px;
}
.ac-side-mono{
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:14px; color:#fff; font-weight:700;
  font-size:25px; letter-spacing:.03em;
  background:linear-gradient(140deg,var(--ac-brass) 0%,#8f7314 100%);
}

/* ---------- banner ---------- */
.banner-section .rectangle .text p:first-child{
  color:var(--ac-brass-2) !important; letter-spacing:.18em; text-transform:uppercase;
  font-size:11px; font-weight:600;
}
.banner-section .rectangle .text h2{ letter-spacing:-.02em; }

/* ---------- about facts ---------- */
.ac-facts{ list-style:none; margin:26px 0 0; padding:0; }
.ac-facts li{
  padding:14px 0; border-top:1px solid var(--ac-border);
  font-size:14.5px; color:var(--ac-navy); text-align:left;
}
.ac-facts li:last-child{ border-bottom:1px solid var(--ac-border); }
.ac-facts b{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ac-brass); margin-bottom:3px;
  font-family:'Poppins','Montserrat',sans-serif;
}

/* ---------- career cards ---------- */
.ac-eras{ padding:82px 15px 10px; }
.ac-era{
  background:#fff; border:1px solid var(--ac-border); border-radius:3px;
  padding:34px 30px; height:100%; position:relative; overflow:hidden; text-align:left;
  transition:transform .45s var(--ac-ease), box-shadow .45s var(--ac-ease);
}
.ac-era::after{
  content:''; position:absolute; left:0; top:0; width:0; height:3px;
  background:var(--ac-brass); transition:width .5s var(--ac-ease);
}
.ac-era:hover{ transform:translateY(-6px); box-shadow:0 24px 56px var(--ac-border); }
.ac-era:hover::after{ width:100%; }
.ac-era.is-now{ background:var(--ac-navy); }
.ac-era.is-now h3{ color:#fff; }
.ac-era.is-now p{ color:rgba(255,255,255,.72); }
.ac-era.is-now .ac-era-where{ color:rgba(255,255,255,.6); }
.ac-era-when{
  display:block; font-size:11px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ac-brass); margin-bottom:10px;
}
.ac-era h3{ font-size:1.3rem; margin-bottom:6px; color:var(--ac-navy); }
.ac-era-where{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#4a5566; margin-bottom:15px;
}
.ac-era p{ font-size:14.5px; line-height:1.85; color:#5a636c; margin:0; }

/* ---------- boards ---------- */
.ac-boards{ margin-top:56px; }
.ac-sub{
  font-size:12.5px !important; font-weight:600 !important; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ac-navy); margin-bottom:20px;
  font-family:'Poppins','Montserrat',sans-serif !important;
}
.ac-boards ul{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0; }
.ac-boards li{
  display:flex; align-items:center; gap:12px; padding:16px 24px;
  border:1px solid var(--ac-border); border-radius:3px; background:#fff; text-align:left;
  transition:border-color .35s var(--ac-ease), transform .35s var(--ac-ease);
}
.ac-boards li:hover{ border-color:var(--ac-brass); transform:translateY(-3px); }
.ac-boards i{ color:var(--ac-brass); font-size:18px; }
.ac-boards span{ font-size:14.5px; color:var(--ac-navy); font-weight:500; }
.ac-boards small{
  display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#6a737c; font-weight:600; margin-top:2px;
}

/* ---------- contact ---------- */
.ac-submit{ border:none; cursor:pointer; }
.contact-section .form-control{ border-radius:2px; }
.ac-source{ padding:26px 15px 0; }
.ac-source p{ font-size:12px; color:rgba(255,255,255,.55); margin:0; }
.ac-source a{ color:var(--ac-brass-2); }

@media (max-width:991px){
  .ac-eras{ padding:56px 15px 0; }
  .ac-era{ margin-bottom:22px; }
  .ac-boards li{ width:100%; }
}

/* the demo's press cards sit on a negative offset; keep the boards row clear of them */
.media-section .cards-section{ position:relative; z-index:2; }
.ac-boards{ margin-top:150px !important; position:relative; z-index:1; clear:both; }
@media (max-width:991px){ .ac-boards{ margin-top:60px !important; } }

/* ==========================================================================
   RESPONSIVE FIXES
   The celebrity demo pins the hero panel to fixed pixel widths (340px, then
   768px, then 375px) and absolutely positions the copy and social icons
   inside it. Below ~400px that panel is wider than the screen and clips the
   text; above it, it leaves a dead gutter. Everything below makes the hero
   flow instead of being pinned.
   ========================================================================== */

@media (max-width: 991px){
  .banner-section{
    height:auto !important;
    min-height:0 !important;
    margin-bottom:0 !important;
    padding-top:58vw;              /* photo strip above the panel */
    padding-bottom:0;
    background-position:center top;
  }
  .banner-section .container{ padding-left:0; padding-right:0; max-width:none; }

  .banner-section .rectangle{
    position:relative !important;
    top:0 !important; left:0 !important; right:0 !important;
    width:100% !important; height:auto !important;
    padding:42px 22px 30px;
  }
  .banner-section .rectangle .text{
    position:static !important; bottom:auto !important; left:auto !important;
    text-align:center;
  }
  .banner-section .rectangle .text h2{
    font-size:clamp(1.85rem, 8.4vw, 2.7rem) !important;
    line-height:1.12; margin:10px 0 14px;
  }
  .banner-section .rectangle .text p{ padding-right:0 !important; }
  .banner-section .rectangle .text p:first-child{ font-size:10.5px; }
  .banner-section .rectangle .media{ justify-content:center; margin-top:22px; }

  .banner-section .social-icons{
    position:static !important; left:auto !important; bottom:auto !important;
    transform:none !important; padding:0 22px 34px; background:var(--ac-navy);
  }
  .banner-section .social-icons ul{
    display:flex; justify-content:center; gap:10px; margin:0; padding:0;
  }
}

/* very small handsets: nothing may exceed the viewport */
@media (max-width: 400px){
  .banner-section{ padding-top:64vw; }
  .banner-section .rectangle{ padding:34px 16px 26px; }
  .banner-section .rectangle .text h2{ font-size:1.75rem !important; }
  .ac-eras{ padding-left:0; padding-right:0; }
}

/* the navbar wordmark was flush against the screen edge */
.navbar .navbar-brand{ padding-left:18px; }
@media (min-width: 992px){ .navbar .navbar-brand{ padding-left:26px; } }

/* legibility floor: nothing below 11px */
.ac-wordmark small{ font-size:10.5px; letter-spacing:.18em; }
.ac-boards small{ font-size:11px; }
.ac-source p{ font-size:12.5px; }

/* touch targets: 44px minimum on anything tappable */
@media (hover: none), (max-width: 1024px){
  .navbar-nav .nav-link,
  .side-nav .nav-link{ padding-top:12px; padding-bottom:12px; min-height:44px; display:flex; align-items:center; }
  .sidemenu_btn{
    width:44px !important; height:44px !important;
    display:flex !important; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  }
  .social-icons-simple li a,
  .side-menu-footer .banner-icons ul li a{ min-width:44px; min-height:44px; line-height:42px; }
  .banner-section .media i{ height:44px; width:44px; line-height:42px; font-size:18px; }
  .contact-section .form-control{ min-height:46px; }
  .ac-submit{ min-height:48px; }
  .carousel-control-prev, .carousel-control-next{ width:56px; }
}

/* landscape phones: the hero photo strip must not eat the whole screen */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px){
  .banner-section{ padding-top:34vh; }
  .banner-section .rectangle .text h2{ font-size:1.9rem !important; }
}

/* --- decorative navy blocks are fixed-width too; cap them to the viewport --- */
@media (max-width: 991px){
  .about-section .rectangle,
  .contact-section .rectangle{
    width:min(78vw, 350px) !important;
    max-width:calc(100vw - 40px) !important;
    right:0 !important; left:auto !important;
  }
  .project-section .rectangle{
    position:relative !important;
    left:0 !important; right:auto !important; top:0 !important;
    width:100% !important; height:auto !important;
    padding:38px 22px;
  }
  .project-section .rectangle .project-text{
    position:static !important; left:auto !important; top:auto !important;
    text-align:center;
  }
  .project-section .rectangle .project-text h2{ font-size:clamp(1.6rem,7vw,2.2rem); }
  .project-section .rectangle .project-text br{ display:none; }
}

/* --- bootstrap rows inside my own full-width sections were adding 30px --- */
@media (max-width: 991px){
  .ac-eras{ padding-left:15px !important; padding-right:15px !important; }
  .ac-eras > .row,
  .ac-boards > .row,
  .media-section .ac-boards{ margin-left:0 !important; margin-right:0 !important; }
  .ac-eras > .row > [class*="col-"],
  .ac-boards > [class*="col-"]{ padding-left:0 !important; padding-right:0 !important; }
}

/* --- legibility floor and the last small tap target --- */
.ac-wordmark small{ font-size:11px; }
.banner-section .rectangle .text p:first-child{ font-size:11px !important; }
.ac-source a{ display:inline-block; padding:6px 2px; }
.side-menu .sidemenu-image a{ display:inline-block; padding:8px; }

/* the photo strip meets the navy panel on a hard seam; blend it */
@media (max-width: 991px){
  .banner-section{ position:relative; background-color:var(--ac-navy); }
  .banner-section::after{
    content:''; position:absolute; left:0; right:0; top:0; height:58vw;
    background:linear-gradient(to bottom, rgba(13,31,53,0) 52%, var(--ac-border) 82%, var(--ac-navy) 100%);
    pointer-events:none; z-index:0;
  }
  .banner-section .container, .banner-section .social-icons{ position:relative; z-index:1; }
}
@media (max-width: 400px){
  .banner-section::after{ height:64vw; }
}

/* ==========================================================================
   WARM BROWN PALETTE
   panel #3B2A1F · action #9A5B2D · accent #D6A268 · bg #FBF8F4 · border #E6DED2
   The demo hard-codes its accent everywhere, so surfaces, borders and buttons
   are re-pointed here rather than by find-and-replace in the vendor CSS.
   ========================================================================== */

body{ background:var(--ac-bg); }
.about-section,
.media-section,
.contact-section,
.ac-eras,
.project-section{ background-color:var(--ac-bg); }

/* --- primary action --- */
.btn.red-btn{
  background:var(--ac-brass) !important;
  border-color:var(--ac-brass) !important;
  color:#fff !important;
}
.btn.btn-hvr-red:hover{
  background-color:var(--ac-navy) !important;
  border-color:var(--ac-navy) !important;
  color:#fff !important;
}
.ac-submit{ background:var(--ac-brass); border-color:var(--ac-brass); color:#fff; }
.ac-submit:hover{ background:var(--ac-navy); border-color:var(--ac-navy); }

/* --- borders --- */
.ac-era,
.ac-boards li,
.media-section .card{ border-color:var(--ac-border) !important; }
.ac-facts li{ border-top-color:var(--ac-border); }
.ac-facts li:last-child{ border-bottom-color:var(--ac-border); }
.contact-section .form-control{
  border-color:var(--ac-border);
  background:#fff;
}
.contact-section .form-control:focus{
  border-color:var(--ac-brass);
  box-shadow:0 0 0 3px rgba(154,91,45,.14);
}

/* --- surfaces stay white so cards lift off the warm background --- */
.ac-era,
.ac-boards li,
.media-section .card{ background:#fff; }
.ac-era.is-now{ background:var(--ac-navy); }
.media-section .card.active.selected{ background:var(--ac-navy); }
.media-section .card.active.selected *{ color:#fff; }
.media-section .card.active.selected .card-title{ color:#fff; }

/* --- accents: darker on light surfaces, lighter on dark ones --- */
.ac-era-when,
.ac-boards i,
.ac-sub,
.about-section .subheading,
.media-section .subheading{ color:var(--ac-brass); }
.ac-era.is-now .ac-era-when,
.banner-section .rectangle .text p:first-child,
.ac-wordmark small,
.media-section .card.active.selected p:first-child{ color:var(--ac-brass-2) !important; }

/* headings pick up the panel brown rather than pure black */
.heading, .ac-era h3, .card-title{ color:var(--ac-navy); }

/* hover states */
.ac-era:hover::after{ background:var(--ac-brass); }
.ac-boards li:hover{ border-color:var(--ac-brass) !important; }
.ac-side-mono{ background:linear-gradient(140deg,var(--ac-brass) 0%,#6E3F1E 100%); }

/* --- CONTRAST FIXES exposed by the light background ---
   1. The demo's sticky navbar stays transparent above 1200px. Over a cream
      page that leaves white nav links on a near-white background once you
      scroll past the hero. Give the scrolled state a solid panel.
   2. The footer citation used the light accent, which fails on cream. */
.navbar-fixed-top.scrolled{
  background-color:var(--ac-navy) !important;
  box-shadow:0 6px 28px rgba(59,42,31,.20);
}
.navbar-fixed-top.scrolled .nav-link,
.navbar-fixed-top.scrolled .ac-wordmark b{ color:#fff; }
.navbar-fixed-top.scrolled .ac-wordmark small{ color:var(--ac-brass-2); }

.ac-source p{ color:#6B5B4C; }
.ac-source a{ color:var(--ac-brass) !important; text-decoration:underline; text-underline-offset:3px; }
.ac-source a:hover{ color:var(--ac-navy); }

/* the contact copyright row was authored for a dark panel */
.contact-section .copyright-section p{ color:#6B5B4C; }
.contact-section .copyright-section i{ color:var(--ac-brass); }
.contact-section .subheading{ color:var(--ac-brass); }

/* the demo hard-codes a black navbar below 1200px; use the brand panel */
@media (max-width: 1200px){
  .navbar{ background-color:var(--ac-navy) !important; }
}

/* ==========================================================================
   UI/UX PASS
   ========================================================================== */

/* --- the name is now an h1; keep the banner's visual scale --- */
.banner-section .rectangle .text h1{
  font-size:80px; color:#fff; font-weight:600; margin:0 0 10px;
  font-family:'Source Serif 4',Georgia,serif; letter-spacing:-.02em; line-height:1.05;
}
@media (max-width:1200px){ .banner-section .rectangle .text h1{ font-size:55px; } }
@media (max-width:991px){
  .banner-section .rectangle .text h1{
    font-size:clamp(1.85rem, 8.4vw, 2.7rem) !important; line-height:1.12; margin:10px 0 14px;
  }
}
@media (max-width:400px){ .banner-section .rectangle .text h1{ font-size:1.75rem !important; } }

/* --- skip link: the first thing a keyboard user meets --- */
.ac-skip{
  position:absolute; left:16px; top:-60px; z-index:2000;
  background:var(--ac-navy); color:#fff; padding:12px 20px; border-radius:3px;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:top .2s var(--ac-ease);
}
.ac-skip:focus{ top:16px; color:#fff; outline:3px solid var(--ac-brass-2); outline-offset:2px; }

/* --- visible focus. The demo removes outlines everywhere; 27 of 32 focusable
       elements had no indicator at all. --- */
/* bundle.min.css ships `a:focus,button:focus,input:focus{outline:0}` plus an
   `outline:0!important` rule, so the indicator needs matching weight. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible,
html body .nav-link:focus-visible,
html body .navbar-brand:focus-visible,
html body .btn:focus-visible,
html body .media:focus-visible,
html body .carousel-control-prev:focus-visible,
html body .carousel-control-next:focus-visible{
  /* longhands, not the shorthand: `outline: 3px solid var(--x)` becomes a
     pending-substitution value and loses to the vendor reset */
  outline-width:3px !important;
  outline-style:solid !important;
  outline-color:#9A5B2D !important;
  outline-offset:3px !important;
  border-radius:2px;
}
html body .banner-section a:focus-visible,
html body .navbar a:focus-visible,
html body .navbar button:focus-visible,
html body .side-menu a:focus-visible,
html body .side-menu button:focus-visible,
html body .ac-era.is-now a:focus-visible,
html body .media-section .card.active.selected a:focus-visible{
  outline-color:#D6A268 !important;
}
.contact-section .form-control:focus-visible{ outline-offset:0; }

/* --- anchor targets must clear the fixed header --- */
section[id], main[id]{ scroll-margin-top:104px; }
@media (max-width:991px){ section[id], main[id]{ scroll-margin-top:88px; } }

/* --- form: labels are visible now, not placeholder-only --- */
.contact-section .form-group label{
  display:block; margin-bottom:7px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#6B5B4C;
}
.ac-opt{
  font-weight:500; letter-spacing:.04em; text-transform:none;
  color:#6B5B4C; font-size:11px;
}
.ac-help{
  font-size:12.5px; color:#6B5B4C; margin:8px 0 0; line-height:1.6;
}
.contact-section .form-control::placeholder{ color:#A0938A; opacity:1; }
.contact-section .form-control:invalid:not(:placeholder-shown){ border-color:#B4472F; }

/* --- carousel: no autoplay, so make the controls obvious --- */
.carousel-control-prev, .carousel-control-next{ opacity:.85; }
.carousel-control-prev:hover, .carousel-control-next:hover{ opacity:1; }
.carousel:focus-visible{ outline:3px solid var(--ac-brass-2); outline-offset:-3px; }

/* --- the drawer toggle is a <button> now, not a link --- */
button.sidemenu_btn{ background:transparent; border:0; padding:0; cursor:pointer; }

/* --- focus ring, final say ---
   The outline longhands were still being clobbered somewhere in the vendor
   bundle. box-shadow is not reset anywhere in this stack, so the indicator
   is drawn with a ring instead and is guaranteed to render. */
html body *:focus-visible{
  box-shadow:0 0 0 3px #FBF8F4, 0 0 0 6px #9A5B2D !important;
  border-radius:3px;
  position:relative;
  z-index:5;
}
html body .navbar *:focus-visible,
html body .side-menu *:focus-visible,
html body .banner-section *:focus-visible,
html body .ac-era.is-now *:focus-visible,
html body .media-section .card.active.selected *:focus-visible,
html body .project-section *:focus-visible{
  box-shadow:0 0 0 3px #3B2A1F, 0 0 0 6px #D6A268 !important;
}
html body .contact-section .form-control:focus-visible{
  box-shadow:0 0 0 3px rgba(154,91,45,.22) !important;
  border-radius:2px;
}