/* Marinella A. Chvatal - site overrides. Forest green scheme, custom hero, focus grid, recognition band. */

:root{
    --gt-ink:#1E4B3C;
    --gt-ink-deep:#12332A;
    --gt-accent:#D08C4A;
}

html, body { overflow-x: hidden; }

/* ---------- Header: monogram mark and menu button ----------
   The mark is set in the site's own typeface rather than a raster file, so it
   stays sharp on any display and never needs a second asset for retina. */
.navbar .logo{
    display:flex !important;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:background-color .35s ease;
}
.navbar .logo:hover{ background-color:#1B4B7E !important; }

.gt-mark{
    font-family:'Montserrat', sans-serif;
    font-weight:700;
    font-size:31px;
    line-height:1;
    letter-spacing:.16em;
    text-indent:.16em;          /* optical centring: cancels the trailing letter-space */
    color:#ffffff;
    display:block;
    text-align:center;
}
.gt-mark::after{
    content:"";
    display:block;
    width:24px;
    height:2px;
    margin:8px auto 0;
    text-indent:0;
    background:var(--gt-accent);
}
.gt-mark-lg{ font-size:38px; }
.gt-mark-lg::after{ width:30px; margin-top:10px; }

.gt-menu-logo{ display:inline-block; text-decoration:none; }
.gt-menu-name{
    display:block;
    margin-top:14px;
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    letter-spacing:.20em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
}

/* A bare <button> inherits the UA grey fill and outset border. Reset it. */
.sidemenu_btn#sidemenu_toggle{
    -webkit-appearance:none;
    appearance:none;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0;
    width:34px;
    height:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
    cursor:pointer;
}
.sidemenu_btn#sidemenu_toggle:focus{ outline:none; }
.sidemenu_btn#sidemenu_toggle:focus-visible{ outline:2px solid var(--gt-accent); outline-offset:6px; }
.sidemenu_btn#sidemenu_toggle span{
    display:block;
    height:2px;
    width:100%;
    margin:0;
    border-radius:2px;
    background:#ffffff;
    transition:width .3s ease, background-color .3s ease;
}
.sidemenu_btn#sidemenu_toggle span:nth-child(2){ width:64%; }
.sidemenu_btn#sidemenu_toggle:hover span{ width:100%; background:var(--gt-accent); }

/* ---------- Hero: full-bleed image with a forest gradient, text on the left ---------- */
.gt-hero{
    position:relative;
    overflow:hidden;
    background:var(--gt-ink-deep);
}
.gt-hero-media{
    position:absolute;
    inset:0;
    background-image:url("../images/hero.jpg");
    background-size:cover;
    background-position:72% center;
    background-repeat:no-repeat;
    z-index:0;
}
.gt-hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,
        rgba(18,51,42,.97) 0%,
        rgba(18,51,42,.93) 34%,
        rgba(18,51,42,.62) 58%,
        rgba(18,51,42,.28) 100%);
}
.gt-hero-inner{ position:relative; z-index:2; }

.gt-eyebrow{
    color:#9FC4B2;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:13px;
    margin-bottom:18px;
}
.gt-name-accent{ color:#E8B87A !important; }
.gt-lede{ font-size:19px; line-height:1.65; max-width:640px; }
.slider-area .content-margin{ margin-bottom:210px; }

.author-skills.bg-red{ background-color:rgba(18,51,42,.90) !important; }

/* ---------- Focus grid ---------- */
.gt-focus{ padding:110px 0 90px; }
.gt-focus-grid{ margin-top:46px; }
.gt-card{
    height:100%;
    padding:34px 32px;
    margin-bottom:30px;
    background:rgba(30,75,60,.22);
    border:1px solid rgba(159,196,178,.20);
    border-left:4px solid var(--gt-accent);
    border-radius:4px;
    transition:transform .35s ease, background .35s ease, border-color .35s ease;
}
.gt-card:hover{ transform:translateY(-6px); background:rgba(30,75,60,.38); border-color:rgba(232,184,122,.45); }
.gt-card-icon{ font-size:34px; color:var(--gt-accent); display:block; margin-bottom:14px; }
.gt-card h5{ font-size:21px; font-weight:700; color:#ffffff; margin-bottom:12px; }
.gt-card p{ font-size:16px; line-height:1.65; color:rgba(255,255,255,.72); margin-bottom:0; }

/* ---------- Quote band ---------- */
.gt-quote{ padding:86px 0; }
.gt-quote-mark{ font-size:44px; color:#E8B87A; display:block; margin-bottom:14px; }
.gt-quote-text{
    color:#fff; font-size:34px; line-height:1.4; font-weight:600;
    margin:0 0 18px; border:0; padding:0;
}
.gt-quote-cite{ color:rgba(255,255,255,.72); font-size:15px; margin:0; }

/* ---------- Contact ---------- */
.gt-contact{ padding:96px 0 60px; }
.gt-contact .user-img img{ width:170px; height:170px; object-fit:cover; }
.gt-contact .user-name{ color:#fff; margin-top:20px; }
.gt-contact .user-designation{ color:rgba(255,255,255,.75); }
.gt-contact-body .sub-heading{
    color:#E8B87A; letter-spacing:.16em; text-transform:uppercase; font-size:13px;
}
.gt-contact-body .heading{ color:#fff; }
.gt-contact-note{ color:rgba(255,255,255,.85); font-size:17px; line-height:1.7; max-width:640px; }
.gt-colophon{ margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.18); }
.gt-colophon p{ color:rgba(255,255,255,.6); font-size:13px; line-height:1.7; }

/* ---------- Path carousel ---------- */
.gt-path-head{ padding:100px 0 46px; text-align:center; }
.gt-path-head .sub-heading{ color:var(--gt-accent); letter-spacing:.16em; text-transform:uppercase; font-size:13px; }
.gt-path-head .heading{ color:#fff; margin:14px 0 16px; }
.gt-path-head p{ color:rgba(255,255,255,.7); max-width:720px; margin:0 auto; font-size:17px; line-height:1.7; }

/* White overlay type needs a scrim: several of these photographs are bright. */
.project-sec .project-area .project-img{ position:relative; }
.project-sec .project-area .project-img::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg,
        rgba(14,40,33,.93) 0%,
        rgba(14,40,33,.80) 28%,
        rgba(14,40,33,.34) 58%,
        rgba(14,40,33,0) 88%);
    pointer-events:none;
}
.project-sec .project-area .project-detail{ z-index:2; }
.project-sec .project-area .project-detail .project-text{ opacity:.85; }
.gt-project-org{
    color:#E8B87A; letter-spacing:.14em; text-transform:uppercase;
    font-size:12px; margin-bottom:8px;
}
@media (max-width:991px){
    .project-sec .project-area .project-img::after{
        background:linear-gradient(180deg, rgba(14,40,33,.35) 0%, rgba(14,40,33,.75) 100%);
    }
    .gt-path-head{ padding:70px 0 30px; }
}

/* ---------- Mobile ---------- */
@media (hover:none){
    .gt-hero-media{ background-attachment:scroll; background-size:cover; }
}
@media (max-width:991px){
    .area-heading h1{ font-size:46px; }
    .gt-lede{ font-size:17px; }
    .slider-area .content-margin{ margin-bottom:0; }
    .slider-area{ height:auto; padding:150px 0 60px; }
    .author-skills{ position:relative; }
    .gt-quote-text{ font-size:24px; }
    /* Keep her visible on small screens rather than flattening the photograph to a colour field,
       while holding enough contrast under the headline. */
    .gt-hero-media{
        background-image:url("../images/hero-mob.jpg");
        background-position:center top;
    }
    .gt-hero-media::after{
        background:linear-gradient(180deg, rgba(18,51,42,.62) 0%, rgba(18,51,42,.80) 38%, rgba(18,51,42,.93) 100%);
    }
}
@media (max-width:575px){
    .area-heading h1{ font-size:38px; }
    .gt-quote-text{ font-size:21px; }
    .gt-focus{ padding:70px 0 50px; }
}

/* ---------- Recognition band (replaces the quote band; she has awards, no quotes) ---------- */
.gt-recog-label{
    display:block; color:#E8B87A; letter-spacing:.18em; text-transform:uppercase;
    font-size:13px; margin-bottom:34px;
}
.gt-recog-row{ margin-bottom:30px; }
.gt-recog-item{
    color:#fff; font-family:'Montserrat',sans-serif; font-weight:600;
    font-size:17px; line-height:1.45; padding:0 12px;
    border-left:2px solid rgba(232,184,122,.55); text-align:left;
}
@media (max-width:575px){ .gt-recog-item{ font-size:15px; margin-bottom:18px; } }
.gt-quote .gt-quote-cite{ max-width:820px; margin:0 auto; line-height:1.7; }

/* Pending CTA reads as unfinished on purpose, so it cannot be mistaken for live. */
.gt-cta-pending{ opacity:.55; cursor:not-allowed; }

.gt-contact-mark{
    width:150px; height:150px; margin:0 auto;
    display:flex; align-items:center; justify-content:center;
    border:2px solid rgba(232,184,122,.5); border-radius:50%;
}

/* Two trailing-space fixes.
   1. The template gives .contact-sec a 288px bottom margin, which left a dead band
      of page background below the last section.
   2. .go-top was in normal flow; it is meant to be a floating control. */
.gt-contact{ margin-bottom:0 !important; }
.go-top{
    position:fixed;
    right:26px;
    bottom:26px;
    z-index:30;
    margin:0;
}
body{ background-color:var(--gt-ink-deep); }

/* ============================================================
   PALETTE REFINEMENT
   Problem: neutral sections, the accent bands and the cards had all
   collapsed to nearly the same green, so the page read as one flat
   field. The section eyebrows were the same green as their own
   background, making them invisible.
   Fix: neutral ground goes to a near-black with a faint green cast;
   the forest green is reserved for the bands so they read as bands.
   ============================================================ */

/* 1. Neutral ground, not green. */
body{ background-color:#0F1210 !important; }

/* 2. Bands keep the brand green and now sit against something. */
.gt-quote.bg-red, .gt-contact.bg-red{
    background-color:#1E4B3C !important;
    border-top:1px solid rgba(232,184,122,.28);
}
.author-skills.bg-red{ background-color:rgba(15,18,16,.86) !important; }

/* 3. Hero: let the photograph through rather than flooding it. */
.gt-hero{ background:#0F1210; }
.gt-hero-media::after{
    background:linear-gradient(100deg,
        rgba(15,18,16,.95) 0%,
        rgba(15,18,16,.86) 30%,
        rgba(16,34,27,.45) 62%,
        rgba(20,44,35,.10) 100%);
}

/* 4. Cards: light glass instead of green on green. */
.gt-card{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.09);
    border-left:3px solid var(--gt-accent);
}
.gt-card:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(208,140,74,.4);
    border-left-color:var(--gt-accent);
}

/* 5. Carousel scrim follows the neutral ground. */
.project-sec .project-area .project-img::after{
    background:linear-gradient(90deg,
        rgba(15,18,16,.93) 0%,
        rgba(15,18,16,.80) 28%,
        rgba(15,18,16,.34) 58%,
        rgba(15,18,16,0) 88%);
}

/* 6. Eyebrows were the same green as their background. */
#about .text-red, .gt-focus .text-red, .heading-area .text-red{ color:var(--gt-accent) !important; }

/* ---------- enquiry form ---------- */
.mc-form{ margin-top:22px; }
.mc-form input, .mc-form textarea{
  width:100%; margin-bottom:14px; padding:13px 15px;
  border:1px solid rgba(255,255,255,.26); border-radius:2px;
  background:rgba(255,255,255,.06); color:#fff;
  font-family:inherit; font-size:15px;
  transition:border-color .3s ease, background .3s ease;
}
.mc-form input::placeholder, .mc-form textarea::placeholder{ color:rgba(255,255,255,.55); }
.mc-form textarea{ min-height:118px; resize:vertical; }
.mc-form input:focus, .mc-form textarea:focus{
  outline:none; border-color:#D08C4A; background:rgba(255,255,255,.10);
}
.mc-form .row > [class*="col-"]{ padding-left:8px; padding-right:8px; }
.mc-form .row{ margin-left:-8px; margin-right:-8px; }