/*
Theme Name: The Arrival Collection
Theme URI: https://thearrivalcollection.com
Author: The Hive Co.
Author URI: https://thearrivalcollection.com
Description: A fully dynamic, ACF-powered WordPress theme converted from The Arrival Collection pre-launch site. Every section, image, button, link, and piece of copy in the header, footer, and page body is editable from the WordPress admin via Advanced Custom Fields flexible content, giving the theme a visual-page-builder style editing experience.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: arrival-collection
*/

:root{
  --navy:#0F2437; --sandstone:#D8C7A1; --white:#F8F7F3; --driftwood:#8A857A; --seaglass:#AFC8C6;
  --gold:#C6A15B; --navy-2:#193149; --ink:#1c2b3a; --muted:#6f7d88;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Montserrat',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--navy);background:var(--white);line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:.01em}
.eyebrow{font-family:var(--sans);font-weight:500;letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--gold)}
.divider{display:inline-block;width:54px;height:1px;background:var(--gold);vertical-align:middle}

/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.35s ease;
  background:transparent;padding:18px 0}
header.scrolled{background:rgba(248,247,243,.96);box-shadow:0 1px 0 rgba(15,36,55,.08);backdrop-filter:blur(6px);padding:12px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:30px;height:30px;flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm .t1{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.16em;color:#fff}
.brand .wm .t2{font-family:var(--sans);font-weight:500;font-size:8.5px;letter-spacing:.42em;color:var(--sandstone);margin-top:3px}
header.scrolled .brand .wm .t1{color:var(--navy)}
header.scrolled .brand .wm .t2{color:var(--driftwood)}
header.scrolled .brand .cnavy{fill:var(--navy)}
.arriving{font-family:var(--sans);font-weight:500;letter-spacing:.22em;text-transform:uppercase;font-size:11.5px;color:#fff;display:flex;align-items:center;gap:9px}
.arriving .ar{color:var(--gold);font-size:15px;transition:.3s}
.arriving:hover .ar{transform:translateX(4px)}
header.scrolled .arriving{color:var(--navy)}

/* ---------- placeholder blocks ---------- */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#e9e4d7,#cdbfa4 60%,#b9a888);display:flex;align-items:center;justify-content:center}
.ph.navy{background:linear-gradient(135deg,#1b3651,#0f2437)}
.ph.sea{background:linear-gradient(135deg,#c3d5d2,#9fb9b6)}
.ph .cap{position:relative;z-index:2;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(15,36,55,.55);text-align:center;padding:14px 18px;line-height:1.5}
.ph.navy .cap{color:rgba(248,247,243,.6)}
.ph .wmk{position:absolute;z-index:1;width:40%;max-width:120px;opacity:.14}
.ph.navy .wmk{opacity:.16}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%} /* bias to upper body */

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:linear-gradient(120deg,#1b3651,#26506a 45%,#c9b691);}
.hero .bg .wmk{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);width:300px;opacity:.10}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,36,55,.28) 0%,rgba(15,36,55,0) 30%,rgba(15,36,55,.15) 55%,rgba(15,36,55,.72) 100%)}
.hero .inner{position:relative;z-index:3;padding-bottom:9vh;max-width:1200px;margin:0 auto;width:100%;padding-left:32px;padding-right:32px}
.hero h1{font-size:clamp(44px,8.5vw,104px);font-weight:500;text-shadow:0 2px 30px rgba(15,36,55,.35)}
.hero p.sub{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.6vw,30px);max-width:640px;margin-top:8px;color:#f3efe6;text-shadow:0 2px 20px rgba(15,36,55,.4)}
.hero .cap-note{position:absolute;top:120px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:96px 0}
.sec-navy{background:var(--navy);color:var(--white)}
.sec-sea{background:var(--seaglass);color:var(--navy)}
.sec-white{background:var(--white);color:var(--navy)}
.sec-sand{background:var(--sandstone);color:var(--navy)}
.center{text-align:center}
.sec-title{font-size:clamp(34px,5vw,58px);font-weight:500}
.kicker-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.lede{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);font-weight:400;line-height:1.4}

/* intro */
.intro-box{border:1px solid rgba(216,199,161,.4);padding:46px 48px;max-width:880px;margin:0 auto}
.intro-box p{font-family:var(--serif);font-size:clamp(18px,2vw,23px);font-weight:400;color:#e9e5dc;line-height:1.5}
.intro-box p+p{margin-top:18px}

/* collections */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.card{}
.card .ph{aspect-ratio:1/1;border:1px solid rgba(15,36,55,.08)}
.card h3{font-size:24px;font-weight:600;margin:18px 0 8px;letter-spacing:.02em}
.card .tags{font-family:var(--sans);font-weight:400;font-size:12.5px;letter-spacing:.06em;color:var(--navy);opacity:.72;line-height:1.9;text-transform:uppercase}
.sec-sea .card h3{color:var(--navy)}

/* benefits */
.grid-ben{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:12px}
.ben{border:1px solid rgba(175,200,198,.22);padding:30px 28px}
.ben .bnum{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:.1em}
.ben h3{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.04em;color:#fff;margin:14px 0 10px}
.ben p{font-size:13px;color:#c3ccd3;font-weight:300;letter-spacing:.02em;line-height:1.65}

/* testimonials */
.testi-top{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-bottom:56px}
.testi-top .ph{aspect-ratio:4/5;max-width:440px;margin-left:auto;width:100%}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.quote{border:1px solid rgba(15,36,55,.18);padding:30px 28px;background:rgba(248,247,243,.28)}
.quote p{font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.42;color:var(--navy)}
.quote .by{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);opacity:.62;margin-top:18px}

/* mission */
.mission{position:relative;min-height:74vh;display:flex;align-items:center;color:var(--navy);overflow:hidden}
.mission .bg{position:absolute;inset:0}
.mission .bg .wmk{position:absolute;right:6%;bottom:8%;width:120px;opacity:.16}
.mission .rail{position:absolute;left:0;top:0;bottom:0;width:70px;background:var(--navy);z-index:2}
.mission .inner{position:relative;z-index:3;max-width:1200px;margin:0 auto;width:100%;padding:0 32px}
.mission p{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);font-weight:400;line-height:1.28;max-width:620px;color:var(--navy)}

/* corporate */
.corp{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.corp h2{font-size:clamp(38px,5.4vw,72px);font-weight:500;color:var(--white)}
.corp .body p{color:var(--navy);font-size:15.5px;font-weight:300;margin-bottom:16px;line-height:1.7}
.corp ul{list-style:none;columns:2;column-gap:26px;margin:6px 0 16px}
.corp ul li{font-size:14px;color:var(--navy);padding:5px 0 5px 18px;position:relative;break-inside:avoid}
.corp ul li:before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;background:var(--gold);border-radius:50%}
.corp .close{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--navy)}

/* notify CTA */
.cta{background:var(--navy-2);color:#fff;text-align:center}
.cta .sec-title{color:#fff}
.cta p.sub{font-family:var(--serif);font-size:22px;color:#e9e5dc;margin:12px auto 30px;max-width:600px}
.signup{display:flex;gap:12px;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.signup input{flex:1;min-width:240px;padding:16px 20px;border:1px solid rgba(216,199,161,.5);background:rgba(255,255,255,.06);color:#fff;font-family:var(--sans);font-size:14px;letter-spacing:.02em;outline:none}
.signup input::placeholder{color:rgba(248,247,243,.55)}
.signup input:focus{border-color:var(--gold)}
.btn{padding:16px 30px;background:var(--gold);color:var(--navy);font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;border:none;cursor:pointer;transition:.25s}
.btn:hover{background:#d8b877}
.thanks{color:var(--sandstone);font-family:var(--serif);font-style:italic;font-size:20px;margin-top:8px;min-height:26px}
.partner{margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:#c3ccd3}
.partner a{color:var(--gold);border-bottom:1px solid rgba(198,161,91,.4);padding-bottom:2px}

/* footer */
footer{background:var(--navy);color:var(--white);padding:64px 0 40px;text-align:center}
footer .fbrand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:22px}
footer .fbrand svg{width:44px;height:44px}
footer .fwm{font-family:var(--serif);font-size:20px;letter-spacing:.18em;color:#fff}
footer .ftag{font-family:var(--serif);font-style:italic;color:var(--sandstone);font-size:18px;margin-bottom:26px}
footer .fmeta{font-size:13px;color:#9fb0bd;line-height:2}
footer .fmeta a{color:#cdd6de}
footer .fnote{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5f7183;margin-top:22px}

@media(max-width:900px){
  section{padding:70px 0}
  .grid3,.grid-ben,.quotes{grid-template-columns:1fr 1fr}
  .testi-top{grid-template-columns:1fr;gap:28px}
  .testi-top .ph{margin:0 auto;max-width:360px}
  .corp{grid-template-columns:1fr;gap:26px}
  .mission .rail{width:44px}
}
@media(max-width:600px){
  .wrap,.hero .inner,.mission .inner{padding-left:22px;padding-right:22px}
  .grid3,.grid-ben,.quotes{grid-template-columns:1fr}
  .corp ul{columns:1}
  .brand .wm .t1{font-size:15px}
  .arriving{font-size:10px;letter-spacing:.16em}
  .intro-box{padding:32px 26px}
}
</style>

/* ---------- WP-specific additions (menus, logo image, misc) ---------- */
.brand-logo-img{max-height:34px;width:auto}
.primary-menu{display:flex;gap:26px;list-style:none;align-items:center}
.primary-menu li{position:relative}
.primary-menu a{font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:inherit}
.footer-menu{list-style:none;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:14px 0;font-size:13px;color:#cdd6de}
.fsocial{display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:13px}
.fsocial a{color:var(--sandstone)}
.fcopy{font-size:11px;color:#5f7183;margin-top:10px}
.hero-bg-img,.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.nav-fallback{list-style:none;display:flex}
.search-form{display:flex;gap:10px}
.search-field{flex:1;padding:10px 14px;border:1px solid rgba(15,36,55,.15)}
@media(max-width:900px){
  .primary-menu{display:none}
}

/* ---------- Defensive responsive-image fallback ---------- */
/* Modern browsers use the aspect-ratio rules already defined above (.card .ph, .testi-top .ph).
   This fallback only kicks in for older mobile browsers that don't support aspect-ratio,
   using the classic padding-top technique so images never collapse or overflow. */
@supports not (aspect-ratio: 1 / 1) {
  .card .ph{position:relative;height:0;padding-top:100%}
  .testi-top .ph{position:relative;height:0;padding-top:125%;max-width:440px}
}
@media(max-width:900px){
  @supports not (aspect-ratio: 1 / 1) {
    .testi-top .ph{padding-top:125%;max-width:360px}
  }
}
img.hero-bg-img,img.ph-img{max-width:none} /* let object-fit handle sizing inside their positioned box, without the global img{max-width:100%} rule shrinking them */