/* Hidden Habitat Media - premium layer
   Loaded last so it overrides the earlier theme and inline styles. */

/* One type system across the whole site */
:root{ --ink:#2a1f14; --bark:#7a4f24; --sand:#f4ecdc; --paper:#fbf7ee; --forest:#2b3a2a; --gold:#c9a25a; --muted:#5a4630; --line:rgba(122,79,36,.22); }
body{ font-family:"Source Sans 3",Arial,sans-serif; font-size:17px; line-height:1.7; background:var(--sand); color:var(--ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; letter-spacing:.005em; line-height:1.05; }
h1{ font-size:clamp(56px,8vw,118px); }
h2.section-title{ font-size:clamp(40px,5vw,64px); margin-bottom:20px; }
.eyebrow{ font-size:12px; letter-spacing:.22em; font-weight:600; }

/* Spacing: more air between sections */
section{ padding:120px 0; }
section + section{ border-top:1px solid var(--line); }

/* Navigation: quieter, with a clear brand mark */
.nav{ background:rgba(244,236,220,.92); border-bottom:1px solid transparent; }
.nav-inner{ height:84px; }
.brand{ font-size:26px; font-weight:600; }
.nav-links{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; gap:40px; }

/* Hero: full-screen photograph with a soft shade for legibility */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; color:var(--sand); overflow:hidden; padding:0 !important; border-top:0 !important; }
.hero-bg{ position:absolute; inset:0; background-size:cover !important; background-position:center !important; transform:scale(1.04); animation:hhSettle 2.4s ease-out forwards; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,14,8,.25) 0%,rgba(20,14,8,.15) 40%,rgba(20,14,8,.78) 100%); }
.hero-content{ position:relative; z-index:1; padding-bottom:110px; }
.hero .eyebrow{ color:var(--gold) !important; }
.hero h1{ color:var(--sand); max-width:14ch; margin:14px 0 22px; }
.hero p{ color:rgba(244,236,220,.86); font-size:19px; max-width:560px; margin-bottom:36px; }
.hero-btns{ display:flex; gap:14px; flex-wrap:wrap; }
@keyframes hhSettle{ to{ transform:scale(1); } }

/* Buttons */
.btn{ padding:16px 30px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.btn-light{ background:var(--sand); color:var(--ink); border-color:var(--sand); }
.btn-light:hover{ background:transparent; color:var(--sand); }
.btn-ghost{ background:transparent; color:var(--sand); border-color:rgba(244,236,220,.6); }
.btn-ghost:hover{ background:var(--sand); color:var(--ink); border-color:var(--sand); }
.btn-dark{ padding:16px 30px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }

/* Portfolio: larger images, fewer borders */
.portfolio-grid{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:44px 36px; }
.portfolio-card{ background:transparent; border:0; box-shadow:none; border-radius:0; }
.portfolio-card:hover{ box-shadow:none; }
.portfolio-card .card-image img{ height:460px; }
.portfolio-card .card-body{ padding:22px 2px 0; }
.portfolio-card h3{ font-size:30px; margin-bottom:6px; }
.portfolio-card .card-body p{ color:var(--muted); font-size:15px; }

/* Gallery and misc text */
.lead{ font-size:19px; color:var(--muted); }
.services{ background:var(--forest); }

/* Footer: quiet and tidy */
footer{ background:var(--forest); color:rgba(244,236,220,.7); padding:48px 0; font-size:14px; letter-spacing:.02em; }
footer .brand{ color:var(--sand); font-size:24px; }

@media (max-width:900px){
  section{ padding:84px 0; }
  .nav-inner{ height:72px; }
  .hero{ min-height:92vh; }
  .hero-content{ padding-bottom:72px; }
  .hero p{ font-size:17px; }
  .portfolio-grid{ grid-template-columns:1fr; gap:48px; }
  .portfolio-card .card-image img{ height:380px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation:none; transform:none; }
}

/* Nav call-to-action: the generic nav link rules were overriding its padding */
.nav-links a.nav-cta{ padding:12px 24px; background:var(--ink); color:var(--sand) !important; border-radius:2px; line-height:1; display:inline-block; white-space:nowrap; }
.nav-links a.nav-cta::after{ display:none; }
.nav-links a.nav-cta:hover{ background:var(--bark); }
@media (max-width:900px){
  .nav-links a.nav-cta{ padding:16px 24px; border-radius:0; }
}

/* Get in touch: stronger rule so it wins over inline styles */
header.nav .nav-links a.nav-cta,
.nav .nav-links a.nav-cta{ display:inline-flex !important; align-items:center; justify-content:center; height:auto !important; padding:12px 24px !important; margin-left:10px; background:var(--ink) !important; color:var(--sand) !important; border-radius:2px; font-weight:600; }

/* Photos fade in from a soft blur as they load */
@keyframes hhPhotoIn{ from{ opacity:0; filter:blur(14px); } to{ opacity:1; filter:blur(0); } }
.portfolio-card img, .card-img img, .shot img, .slide img, .film img, .gallery-grid img, .trip-hero img, img[loading="lazy"]{
  animation:hhPhotoIn 1s ease-out both;
}
/* Pages fade in softly, and move between pages smoothly where the browser supports it */
@keyframes hhPageIn{ from{ opacity:0; } to{ opacity:1; } }
body{ animation:hhPageIn .6s ease-out both; }
@view-transition{ navigation:auto; }

/* Client logos */
.clients{ padding:72px 0 !important; background:var(--paper); }
.client-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:48px 64px; margin-top:28px; }
.client-row img{ height:52px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(100%); opacity:.6; transition:opacity .4s, filter .4s; animation:none; }
.client-row img:hover{ filter:none; opacity:1; }

@media (prefers-reduced-motion: reduce){
  .portfolio-card img, .card-img img, .shot img, .slide img, img[loading="lazy"], body{ animation:none !important; }
}

/* ---- Consistent photo frames (approved mock) ---- */
/* Homepage: every project uses the same 4:5 frame instead of mixed sizes */
.work-grid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important; gap:44px 32px !important; }
.work-grid .shot{ grid-column:auto !important; grid-row:auto !important; height:auto !important; }
.work-grid .shot img{ width:100%; height:auto !important; aspect-ratio:4/5; object-fit:cover; display:block; }
.work-grid .shot-cap{ position:static !important; background:none !important; color:var(--ink) !important; padding:18px 2px 0 !important; }
.work-grid .shot-cap small{ color:var(--bark) !important; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.work-grid .shot-cap h3{ color:var(--ink) !important; font-size:26px; margin:8px 0 4px; }
.shot-meta, .card-meta{ font-size:14px; color:var(--muted); margin:2px 0 0; }
.work-grid .shot{ transition:transform .4s ease; }
.work-grid .shot:hover{ transform:translateY(-4px); }
.work-grid .shot:hover img{ transform:none; }

/* Portfolio page: same frame for every card */
.portfolio-card .card-img img, .card-img img{ aspect-ratio:4/5; height:auto !important; object-fit:cover; }
.card-body h3{ transition:color .3s ease; }
.card:hover .card-body h3, a.card:hover h3{ color:var(--bark); }

/* Trip page hero keeps the photo whole at its natural crop */
.trip-hero img{ object-position:center; }

@media (max-width:900px){
  .work-grid{ grid-template-columns:1fr !important; }
}

/* ---- Hero refinements (approved mock) ---- */
/* Headline and buttons sit low on the left */
.hero{ align-items:flex-end; }
.hero-content{ padding-bottom:120px; }
.hero .hero-content{ text-align:left; }
.hero h1{ max-width:12ch; }
.hero p{ max-width:44ch; color:#e6dcc8; }

/* Gentle rise-in for the text on load */
@keyframes hhRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.hero-content > *{ animation:hhRise 1.1s cubic-bezier(.2,.6,.2,1) both; }
.hero-content > *:nth-child(2){ animation-delay:.12s; }
.hero-content > *:nth-child(3){ animation-delay:.24s; }
.hero-content > *:nth-child(4){ animation-delay:.36s; }

/* Single primary action, plus a quiet text link */
.hero-btns{ align-items:center; gap:28px; margin-top:28px; }
.hero-text-link{ font-size:14px; color:#e6dcc8; text-decoration:underline; text-underline-offset:5px; text-decoration-color:rgba(230,220,200,.5); transition:color .3s, text-decoration-color .3s; }
.hero-text-link:hover{ color:var(--sand); text-decoration-color:var(--sand); }

/* Photo credit, bottom right, linked to its trip */
.hero-credit{ position:absolute; right:clamp(20px,4vw,56px); bottom:26px; z-index:1; font-size:13px; letter-spacing:.04em; color:#e6dcc8; opacity:.9; transition:opacity .3s; }
.hero-credit:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

/* Scroll cue: a thin line at the bottom centre */
.hero-scroll{ position:absolute; left:50%; bottom:0; width:1px; height:56px; transform:translateX(-50%); z-index:1; overflow:hidden; background:rgba(244,236,220,.25); }
.hero-scroll span{ display:block; width:1px; height:22px; background:var(--sand); animation:hhCue 2.2s ease-in-out infinite; }
@keyframes hhCue{ 0%{ transform:translateY(-22px); } 100%{ transform:translateY(56px); } }

@media (max-width:900px){
  .hero-content{ padding-bottom:96px; }
  .hero-credit{ left:20px; right:auto; bottom:14px; font-size:12px; }
  .hero-scroll{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-content > *, .hero-scroll span{ animation:none !important; }
}