/* ==========================================================================
   home.css — Golden Wings Digital · homepage sections only
   Requires shell.css (tokens, header, drawer, footer, modal) to be loaded first.
   ========================================================================== */

/* ── 6. HERO ───────────────────────────────────────────────────────────── */
.gw-hero{
    position:relative; overflow:hidden;
    /* Warm wash under the copy, then the artwork's exact cream (#FFFCF5) — no seam. */
    background:linear-gradient(100deg,#FFF6E6 0%,#FFFAF0 16%,#FFFCF5 30%,#FFFCF5 100%);
}
/* Full-width fade into the white page below */
.gw-hero::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:26%;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 62%,#FFFFFF 100%);
    z-index:1; pointer-events:none;
}
.gw-hero-in{
    position:relative; z-index:2;
    display:flex; align-items:center;
    min-height:clamp(460px,58vw,600px);
    padding-block:clamp(38px,5vw,64px);
}
.gw-hero-copy{ max-width:min(560px,100%); }

.gw-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1px solid #DCE6F8; color:var(--ink);
    font-size:.83rem; font-weight:600; padding:8px 15px; border-radius:999px;
    box-shadow:0 2px 8px rgba(18,43,84,.05); margin-bottom:20px;
}
.gw-eyebrow i{ color:var(--blue); font-size:.78rem; }

.gw-hero h1{
    font-size:clamp(2.15rem,6vw,3.55rem);
    font-weight:800; line-height:1.05; letter-spacing:-.035em;
    margin-bottom:16px;
}
.gw-hero p{
    font-size:clamp(.96rem,1.9vw,1.09rem); color:var(--body);
    max-width:430px; margin-bottom:28px;
}
.gw-hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* Hero artwork — desktop image pinned right */
.gw-hero-art{
    position:absolute; inset:0 0 0 auto; width:60%;
    z-index:1;
}
.gw-hero-art img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center right;
}
/* Feather the image into the cream so there is no hard edge */
.gw-hero-art::after{
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(90deg,#FFFCF5 0%,rgba(255,252,245,.88) 14%,rgba(255,252,245,.34) 36%,rgba(255,252,245,0) 56%),
      linear-gradient(180deg,rgba(255,252,245,.45) 0%,rgba(255,252,245,0) 20%);
}

/* ── 7. TRUST BAR ──────────────────────────────────────────────────────── */
.gw-trust{
    position:relative; z-index:3;
    background:#fff; border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--sh-1);
    display:grid; grid-template-columns:repeat(3,1fr);
    margin-top:-26px;
}
.gw-trust-i{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:18px 10px; text-align:center;
    font-size:clamp(.8rem,1.6vw,.97rem); font-weight:600; color:var(--ink);
}
.gw-trust-i + .gw-trust-i{ border-left:1px solid var(--line); }
.gw-trust-i i{ color:var(--gold); font-size:1.12em; }

/* ── 8. SERVICE CARDS ──────────────────────────────────────────────────── */
.gw-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,20px); }
.gw-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--r);
    padding:clamp(16px,2.4vw,28px) clamp(10px,1.6vw,20px);
    text-align:center; box-shadow:var(--sh-1);
    transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.gw-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#E4D9BF; }
.gw-ico{
    width:clamp(46px,6.4vw,64px); aspect-ratio:1; margin:0 auto clamp(10px,1.6vw,16px);
    border-radius:50%; background:var(--gold-l);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-d); font-size:clamp(1.05rem,2.4vw,1.5rem);
}
.gw-card h3{ font-size:clamp(.86rem,1.9vw,1.06rem); font-weight:700; margin-bottom:6px; }
.gw-card p{ font-size:clamp(.72rem,1.5vw,.9rem); color:var(--body); line-height:1.5; }

/* ── 9. HOW WE WORK ────────────────────────────────────────────────────── */
.gw-steps{
    display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:start; gap:clamp(6px,1.6vw,20px);
}
.gw-step{ text-align:center; }
.gw-step-ico{
    position:relative; width:clamp(62px,9vw,92px); aspect-ratio:1; margin:0 auto 12px;
    border-radius:50%; background:var(--gold-l);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-d); font-size:clamp(1.25rem,3.2vw,2rem);
}
.gw-step-n{
    position:absolute; top:-4px; left:-4px;
    width:clamp(22px,3.2vw,30px); aspect-ratio:1; border-radius:50%;
    background:var(--gold); color:var(--ink); font-family:var(--head); font-weight:700;
    font-size:clamp(.72rem,1.5vw,.9rem);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(239,161,38,.4);
}
.gw-step h3{ font-size:clamp(.82rem,1.8vw,1.06rem); font-weight:700; }
.gw-step p{ font-size:clamp(.72rem,1.4vw,.88rem); margin-top:5px; color:var(--body); }
.gw-arrow{
    align-self:center; margin-top:-14px;
    color:var(--gold); font-size:clamp(1rem,2.4vw,1.5rem);
}

/* ── 10. SUCCESS STORY ─────────────────────────────────────────────────── */
.gw-story{
    display:grid; grid-template-columns:minmax(150px,.34fr) 1fr;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden; box-shadow:var(--sh-1);
}
.gw-story-img{ position:relative; min-height:100%; background:#F3ECFB; }
.gw-story-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gw-story-body{ padding:clamp(16px,3vw,36px); display:flex; flex-direction:column; justify-content:center; }
.gw-kicker{
    color:var(--blue); font-size:clamp(.66rem,1.3vw,.76rem); font-weight:700;
    letter-spacing:.13em; text-transform:uppercase; margin-bottom:8px;
}
.gw-story-body h2{ font-size:clamp(1.05rem,3.1vw,1.85rem); font-weight:800; margin-bottom:10px; }
.gw-story-meta{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
    color:var(--body); font-size:clamp(.76rem,1.5vw,.95rem);
}
.gw-story-meta span{ display:inline-flex; align-items:center; gap:12px; }
.gw-story-meta span::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.gw-story-meta span:last-child::after{ display:none; }
.gw-story-link{
    margin-top:16px; align-self:flex-start;
    display:inline-flex; align-items:center; gap:8px;
    color:var(--blue); font-weight:600; font-size:clamp(.8rem,1.5vw,.94rem);
}
.gw-story-link:hover{ color:var(--blue-d); gap:11px; }

/* ── 11. WORK GRID ─────────────────────────────────────────────────────── */
.gw-work{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:clamp(14px,2vw,24px); }
.gw-work-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--r);
    overflow:hidden; box-shadow:var(--sh-1); text-align:center;
    display:flex; flex-direction:column;
    transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.gw-work-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.gw-work-thumb{ position:relative; aspect-ratio:16/10; background:#111827; overflow:hidden; }
.gw-work-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gw-work-card:hover .gw-work-thumb img{ transform:scale(1.05); }
.gw-tag{
    position:absolute; top:10px; right:10px; z-index:2;
    font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
    padding:5px 10px; border-radius:999px; color:#fff; background:var(--gold-d);
}
.gw-tag--live{ background:#0A7A4E; }
.gw-tag--social{ background:#7C3AED; }
.gw-tag--video{ background:#B4530A; }
.gw-work-body{ padding:18px 16px 20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.gw-work-body h3{ font-size:1.02rem; font-weight:700; }
.gw-work-body p{ font-size:.86rem; color:var(--body); margin-bottom:12px; }
.gw-work-body .gw-btn{ margin-top:auto; }
.gw-more{ text-align:center; margin-top:clamp(22px,3vw,34px); }

/* ── 12. TEAM ──────────────────────────────────────────────────────────── */
.gw-team-rail{ position:relative; }

.gw-team-track{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(14px,1.8vw,22px);
}

.gw-person{
    background:#fff; border:1px solid var(--line); border-radius:var(--r);
    box-shadow:var(--sh-1); text-align:center;
    padding:clamp(18px,2.2vw,26px) clamp(12px,1.6vw,20px) clamp(16px,2vw,22px);
    display:flex; flex-direction:column; align-items:center;
    transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.gw-person:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:#E4D9BF; }

.gw-person-photo{
    width:clamp(84px,9vw,116px); aspect-ratio:1; border-radius:50%;
    padding:3px; background:linear-gradient(135deg,var(--gold),#F7D08A);
    margin-bottom:14px; flex-shrink:0;
}
.gw-person-photo img{
    width:100%; height:100%; border-radius:50%; object-fit:cover;
    background:var(--cream-2); display:block;
}

.gw-person h3{ font-size:clamp(.94rem,1.6vw,1.06rem); font-weight:700; }
.gw-person-role{
    color:var(--gold-d); font-weight:700; margin-top:3px;
    font-size:clamp(.74rem,1.3vw,.85rem);
}
.gw-person-bio{
    color:var(--body); margin-top:10px;
    font-size:clamp(.75rem,1.3vw,.87rem); line-height:1.6;
}

.gw-person-social{ display:flex; gap:8px; margin-top:14px; }
.gw-person-social a{
    width:32px; height:32px; border-radius:50%; background:var(--cream);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); font-size:.82rem;
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.gw-person-social a:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }

.gw-person-tags{
    display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px;
}
.gw-person-tags span{
    background:var(--blue-l); border:1px solid #D6E3FB; color:#1749B0;
    font-size:clamp(.65rem,1.1vw,.73rem); font-weight:600;
    padding:4px 10px; border-radius:999px; white-space:nowrap;
}

/* ── 13. FINAL CTA ─────────────────────────────────────────────────────── */
.gw-cta{
    position:relative; overflow:hidden; text-align:center;
    background:linear-gradient(135deg,#FFF3DE 0%,#FFFAF0 60%,#FFF6E6 100%);
    border:1px solid #F3E4C6; border-radius:var(--r-lg);
    padding:clamp(30px,5vw,54px) clamp(20px,4vw,40px);
}
.gw-cta::after{
    content:''; position:absolute; right:-14px; bottom:-18px;
    width:clamp(96px,17vw,190px); aspect-ratio:1;
    background:url('../images/branding/eagle-mark.webp') no-repeat center/contain;
    opacity:.28; pointer-events:none;
}
.gw-cta h2{ font-size:clamp(1.35rem,4vw,2.25rem); font-weight:800; margin-bottom:6px; }
.gw-cta p{ color:var(--body); font-size:clamp(.88rem,1.7vw,1.02rem); margin-bottom:22px; }
.gw-cta .gw-btn{ position:relative; z-index:2; }
.gw-cta-note{ margin-top:14px; font-size:.82rem; color:var(--mute); }

/* ── 18. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:1024px){
    .gw-hero-art{ width:66%; }
}

@media (max-width:900px){
    /* Hero becomes a full-bleed photo background (mobile artwork) */
    .gw-hero-in{ min-height:clamp(430px,88vw,560px); align-items:flex-start; padding-block:clamp(26px,7vw,40px); }
    .gw-hero-copy{ max-width:none; }
    .gw-hero p{ max-width:70%; }
    .gw-hero-art{
        inset:0; width:100%;
    }
    .gw-hero-art img{ object-position:42% top; }
    .gw-hero-art::after{
        background:
          linear-gradient(102deg,rgba(255,250,242,.95) 0%,rgba(255,250,242,.78) 36%,rgba(255,251,244,.30) 64%,rgba(255,252,245,0) 86%),
          linear-gradient(180deg,rgba(255,250,242,.72) 0%,rgba(255,251,244,.12) 30%,rgba(255,252,245,0) 62%);
    }
    .gw-hero-btns{ flex-direction:column; align-items:stretch; max-width:300px; }

    /* ── WORK: swipeable rail, two projects in view ── */
    .gw-work-rail{ margin-inline:calc(var(--pad) * -1); }
    .gw-work{
        display:flex;
        grid-template-columns:none;
        gap:12px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        padding:4px var(--pad) 6px;
        scrollbar-width:none;
    }
    .gw-work::-webkit-scrollbar{ display:none; }
    .gw-work-card{
        flex:0 0 calc(50% - 6px);
        scroll-snap-align:start;
    }
    .gw-work-body{ padding:14px 12px 16px; }
    .gw-work-body h3{ font-size:.92rem; }
    .gw-work-body p{ font-size:.78rem; margin-bottom:10px; }

    /* ── TEAM: swipeable rail, two members in view ── */
    .gw-team-rail{ margin-inline:calc(var(--pad) * -1); }
    .gw-team-track{
        display:flex;
        gap:12px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        padding:4px var(--pad) 6px;
        scrollbar-width:none;
    }
    .gw-team-track::-webkit-scrollbar{ display:none; }
    .gw-person{
        flex:0 0 calc(50% - 6px);
        scroll-snap-align:start;
        padding:18px 12px 16px;
    }
    .gw-person-photo{ width:76px; margin-bottom:11px; }
    .gw-person-bio{
        margin-top:8px;
        display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .gw-person-social{ margin-top:11px; }
    .gw-person-tags{ margin-top:11px; }

}

@media (max-width:640px){
    .gw-trust{ margin-top:-18px; border-radius:12px; }
    .gw-trust-i{ flex-direction:column; gap:6px; padding:14px 6px; }
    .gw-story{ grid-template-columns:minmax(108px,.38fr) 1fr; }
    .gw-team{ gap:12px; }
    .gw-team-txt a{ font-size:.82rem; }
    .gw-cta::after{ opacity:.20; right:-26px; bottom:-26px; }
}

/* Very small phones — services fall back to 2×2 so text stays readable */
@media (max-width:379px){
    .gw-cards{ grid-template-columns:repeat(2,1fr); }
    .gw-steps{ grid-template-columns:1fr; gap:16px; }
    .gw-arrow{ display:none; }
    .gw-story{ grid-template-columns:1fr; }
    .gw-story-img{ aspect-ratio:16/10; min-height:0; }
}