/* ============================================================
   World of Penguins — components.css
   Hero · marquee · split · sticky roadmap · gallery · accordion
   · blog cards · cta · species/location grids
   ============================================================ */

/* ---------- Image placeholder (until real art lands) ---------- */
.ph{background:linear-gradient(135deg,#dfe7ea,#c3d0d6 55%,#aebfc7);position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.5),transparent 55%)}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,80px)}
.hero-grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr;align-items:center}
.hero-copy h1{margin-bottom:1.4rem}
.hero-copy h1 .g{color:var(--accent-deep)}
.hero-copy .lead{margin-bottom:2rem;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero-collage{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(120px,auto);gap:14px}
.hero-collage figure{overflow:hidden}
.hero-collage img,.hero-collage .ph{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.hero-collage .tall{grid-row:span 2;aspect-ratio:auto}
.hero-collage .tall img,.hero-collage .tall .ph{aspect-ratio:3/4}
.hc-1{margin-top:0}
.hc-2{margin-top:34px}

@media (min-width:860px){
  .hero-grid{grid-template-columns:1.05fr 1.1fr}
  .hero-collage{grid-template-columns:repeat(3,1fr)}
}

/* ---------- MARQUEE (IX2 a-9: translateX -100% / 30s linear infinite) ---------- */
.marquee{background:var(--dark);color:#fff;overflow:hidden;padding-block:22px;white-space:nowrap}
.marquee--light{background:var(--accent);color:var(--ink)}
.marquee__track{display:inline-flex;align-items:center;gap:0;animation:marquee 32s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:.02em;padding-inline:1.4rem;display:inline-flex;align-items:center;gap:1.6rem}
.marquee__item::after{content:"";width:12px;height:12px;background:var(--accent);display:inline-block;transform:rotate(45deg)}
.marquee--light .marquee__item::after{background:var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- SPLIT (Unveiling / about) ---------- */
.split{display:grid;gap:clamp(30px,4vw,60px);grid-template-columns:1fr;align-items:center}
.split__media{overflow:hidden}
.split__media img,.split__media .ph{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__body .eyebrow{margin-bottom:1rem}
.split__body h2{margin-bottom:1.2rem}
.split__body .lead{margin-bottom:1.8rem}
.split__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2rem}
.split__thumbs img,.split__thumbs .ph{width:100%;aspect-ratio:1/1;object-fit:cover}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}.split--rev .split__media{order:2}}

/* ---------- STICKY ROADMAP (services -> four realms) ---------- */
.roadmap{display:grid;grid-template-columns:1fr;gap:2.5rem}
.roadmap__aside{align-self:start}
.roadmap__aside .eyebrow{margin-bottom:1.1rem}
.roadmap__aside h2{margin-bottom:1rem}
.roadmap__progress{display:none;position:relative;width:4px;background:rgba(31,31,31,.12);height:min(60vh,520px);margin-top:2rem}
.roadmap__progress i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent);transition:height .15s linear}
.roadmap__count{font-family:var(--display);font-size:.85rem;letter-spacing:.1em;color:var(--ink-soft);margin-top:1rem}
.roadmap__count b{color:var(--ink);font-size:1.4rem}
.roadmap__track{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
.realm{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);background:#fff;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.realm__media{overflow:hidden;position:relative}
.realm__media img,.realm__media .ph{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.1s var(--ease)}
.realm.is-active .realm__media img{transform:scale(1.04)}
.realm.is-active{border-color:var(--accent)}
.realm__body{padding:clamp(22px,3vw,34px)}
.realm__num{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--accent-deep);letter-spacing:.1em;display:block;margin-bottom:.7rem}
.realm__body h3{margin-bottom:.8rem}
.realm__body p{color:var(--ink-soft);font-size:1rem;margin-bottom:1rem}
.realm__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.realm__tags span{font-family:var(--display);text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;border:2px solid var(--line);padding:5px 10px;color:var(--ink-soft)}
@media (min-width:980px){
  .roadmap{grid-template-columns:.8fr 1.4fr;gap:4rem;align-items:start}
  .roadmap__aside{position:sticky;top:110px}
  .roadmap__progress{display:block}
  .realm{grid-template-columns:1.1fr 1fr}
  .realm--rev .realm__media{order:2}
}

/* ---------- SECTION HEADER row ---------- */
.sec-head{display:grid;gap:1.2rem;margin-bottom:clamp(32px,4vw,52px)}
.sec-head .eyebrow{margin-bottom:.4rem}
.sec-head__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.2rem}
.sec-head p{color:var(--ink-soft);max-width:52ch}

/* ---------- GALLERY (portfolio — parallax rows) ---------- */
.gallery{display:flex;flex-direction:column;gap:16px;overflow:hidden}
.gallery__row{display:flex;gap:16px;will-change:transform}
.gallery__row figure{flex:0 0 auto;width:min(42vw,340px);overflow:hidden}
.gallery__row img,.gallery__row .ph{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .9s var(--ease)}
.gallery__row figure:hover img{transform:scale(1.05)}
.gallery__full{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gallery__full figure{overflow:hidden}
.gallery__full img,.gallery__full .ph{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .9s var(--ease)}
.gallery__full figure:hover img{transform:scale(1.05)}
@media (min-width:760px){.gallery__full{grid-template-columns:repeat(4,1fr)}}

/* ---------- ACCORDION (FAQ — IX2 a-6: height + icon rotate, ~550ms) ---------- */
.faq{display:flex;flex-direction:column;gap:14px;max-width:880px;margin-inline:auto}
.acc{border:2px solid var(--line);background:#fafafa;transition:border-color .3s var(--ease),background .3s var(--ease)}
.acc.is-open{border-color:var(--accent);background:#fff}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;padding:20px clamp(18px,2.4vw,28px);font-family:var(--display);text-transform:uppercase;font-weight:500;font-size:clamp(.92rem,1.5vw,1.08rem);letter-spacing:.02em;color:var(--ink)}
.acc__icon{flex:0 0 auto;width:26px;height:26px;position:relative}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:var(--accent-deep);transition:transform .5s var(--ease),opacity .5s var(--ease)}
.acc__icon::before{left:50%;top:0;width:3px;height:100%;transform:translateX(-50%)}
.acc__icon::after{top:50%;left:0;height:3px;width:100%;transform:translateY(-50%)}
.acc.is-open .acc__icon::before{transform:translateX(-50%) rotate(90deg);opacity:0}
.acc__panel{overflow:hidden;height:0;transition:height .5s var(--ease)}
.acc__panel-inner{padding:0 clamp(18px,2.4vw,28px) 24px;color:var(--ink-soft);font-size:1rem;line-height:1.6}

/* ---------- BLOG / JOURNAL cards ---------- */
.cards{display:grid;gap:clamp(20px,3vw,30px);grid-template-columns:1fr}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -24px rgba(0,0,0,.4)}
.card__media{overflow:hidden;aspect-ratio:3/2}
.card__media img,.card__media .ph{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:.7rem;flex:1}
.card__meta{display:flex;gap:.8rem;align-items:center;font-family:var(--display);text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;color:var(--ink-soft)}
.card__meta .tag{background:var(--accent);color:var(--ink);padding:4px 9px;font-weight:600}
.card__body h3{font-size:1.2rem;font-weight:600;line-height:1.2}
.card__body p{color:var(--ink-soft);font-size:.96rem;flex:1}
.card__link{font-family:var(--display);text-transform:uppercase;font-size:.75rem;letter-spacing:.1em;color:var(--accent-deep);font-weight:600;display:inline-flex;gap:.4rem;align-items:center}
.card__link::after{content:"→";transition:transform .3s var(--ease)}
.card:hover .card__link::after{transform:translateX(4px)}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards--3{grid-template-columns:repeat(3,1fr)}}

/* ---------- CTA band ---------- */
.cta{background:var(--dark);color:#fff;overflow:hidden}
.cta__grid{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch}
.cta__body{padding:clamp(40px,6vw,80px) var(--gutter)}
.cta__body .eyebrow{color:#fff;margin-bottom:1.1rem}
.cta__body .eyebrow::before{background:var(--accent)}
.cta__body h2{color:#fff;margin-bottom:1.3rem;max-width:16ch}
.cta__body p{color:#c6c6c6;margin-bottom:2rem;max-width:46ch}
.cta__media{position:relative;min-height:280px}
.cta__media img,.cta__media .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:860px){.cta__grid{grid-template-columns:1.2fr 1fr}}

/* ---------- SPECIES / LOCATION grids (inner pages) ---------- */
.grid-cards{display:grid;gap:clamp(18px,2.6vw,26px);grid-template-columns:1fr}
@media (min-width:620px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid-cards--3{grid-template-columns:repeat(3,1fr)}}
.spec{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .4s var(--ease)}
.spec:hover{transform:translateY(-5px);border-color:var(--accent)}
.spec__media{aspect-ratio:4/3;overflow:hidden}
.spec__media img,.spec__media .ph{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.spec:hover .spec__media img{transform:scale(1.05)}
.spec__body{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:.5rem;flex:1}
.spec__body h3{font-size:1.15rem;font-weight:600}
.spec__sci{font-style:italic;color:var(--accent-deep);font-size:.88rem;font-family:var(--body)}
.spec__body p{color:var(--ink-soft);font-size:.94rem;flex:1}
.spec__facts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.spec__facts span{font-family:var(--display);text-transform:uppercase;font-size:.66rem;letter-spacing:.06em;border:1.5px solid var(--line);padding:4px 8px;color:var(--ink-soft)}

/* ---------- Location (where) block ---------- */
.loc{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);background:#fff;overflow:hidden}
.loc--feature{border-color:var(--accent);border-width:2px}
.loc__media{aspect-ratio:16/10;overflow:hidden;position:relative}
.loc__media img,.loc__media .ph{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.loc:hover .loc__media img{transform:scale(1.04)}
.loc__flag{position:absolute;left:14px;top:14px;background:var(--ink);color:#fff;font-family:var(--display);text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;padding:6px 11px}
.loc--feature .loc__flag{background:var(--accent);color:var(--ink)}
.loc__body{padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:.7rem}
.loc__body h3{font-size:1.3rem;font-weight:600}
.loc__where{font-family:var(--display);text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft)}
.loc__body p{color:var(--ink-soft);font-size:.98rem}
.loc__facts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;margin-top:.4rem;font-size:.86rem}
.loc__facts div{border-top:1px solid var(--line);padding-top:.5rem}
.loc__facts dt{font-family:var(--display);text-transform:uppercase;font-size:.64rem;letter-spacing:.08em;color:var(--ink-soft)}
.loc__facts dd{font-weight:500;margin-top:2px}
.loc__body h3 a{color:inherit;transition:color .25s var(--ease)}
.loc:hover .loc__body h3 a,.loc__body h3 a:hover{color:var(--accent-deep)}
.loc__link{margin-top:.6rem;font-family:var(--display);text-transform:uppercase;font-size:.72rem;font-weight:600;letter-spacing:.1em;color:var(--accent-deep);display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start}
.loc__link span{transition:transform .25s var(--ease)}
.loc__link:hover span,.loc:hover .loc__link span{transform:translateX(4px)}
@media (min-width:820px){.loc{grid-template-columns:1.1fr 1fr}.loc--rev .loc__media{order:2}}

/* ---------- Fact strip ---------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.facts div{background:#fff;padding:clamp(20px,3vw,34px)}
.facts b{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.7rem);display:block;color:var(--ink);line-height:1}
.facts span{display:block;margin-top:.5rem;color:var(--ink-soft);font-size:.92rem}
@media (min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}

/* ---------- Prose (legal / articles) ---------- */
.prose{max-width:760px;margin-inline:auto}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:2.4rem 0 1rem}
.prose h3{font-size:1.2rem;margin:1.8rem 0 .7rem;text-transform:none;font-weight:600;font-family:var(--body)}
.prose p,.prose li{color:var(--ink-soft);line-height:1.7;margin-bottom:1rem;max-width:none}
.article-hero{max-width:900px;margin-inline:auto;overflow:hidden;border:1px solid var(--line)}
.article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);margin:0 0 1.4rem;max-width:100%}
.table-wrap table{border-collapse:collapse;width:100%;min-width:640px;margin:0;font-size:.9rem}
.table-wrap th,.table-wrap td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.table-wrap th{font-family:var(--display);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;color:var(--ink);background:var(--bg-soft,#f6f6f4);white-space:nowrap}
.table-wrap td{color:var(--ink-soft)}
.table-wrap tbody tr:last-child td{border-bottom:0}
.prose ul{padding-left:1.3rem;margin-bottom:1rem}
.prose li{list-style:disc;margin-bottom:.5rem}
.prose a{color:var(--accent-deep);text-decoration:underline}
.prose strong{color:var(--ink)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr}
.contact-card{border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.contact-card h2{font-size:1.1rem;margin-bottom:.6rem}
.contact-card a,.contact-card address{color:var(--ink-soft);font-style:normal;line-height:1.6}
.contact-card a:hover{color:var(--accent-deep)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:var(--ink)}
.field input,.field textarea{border:2px solid var(--line);padding:12px 14px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.contact-card a.btn,.contact-card a.btn:hover{color:#fff}
.contact-list{list-style:none;margin:1.1rem 0 0;display:flex;flex-direction:column;gap:.75rem}
.contact-list li{position:relative;padding-left:1.4rem;color:var(--ink-soft);font-size:.96rem;line-height:1.55}
.contact-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--accent);border-radius:0}
.contact-list b{color:var(--ink);font-weight:600}
@media (min-width:860px){.contact-grid{grid-template-columns:1fr 1fr}}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--dark);color:#fff;border-top:3px solid var(--accent);padding:16px var(--gutter);display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;transform:translateY(100%);transition:transform .45s var(--ease)}
.cookie-banner.is-in{transform:none}
.cookie-banner p{margin:0;max-width:60ch;font-size:.92rem;color:#d8d8d8}
.cookie-banner a{color:var(--accent);text-decoration:underline}
.cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-actions button{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:600;padding:11px 18px;border:2px solid var(--accent);background:transparent;color:#fff;transition:background .25s,color .25s}
.cookie-actions button[data-consent="accept"]{background:var(--accent);color:var(--ink)}
.cookie-actions button:hover{background:var(--accent);color:var(--ink)}
.cookie-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(0,0,0,.6)}
.cookie-modal.is-open{display:flex}
.cookie-modal__box{background:#fff;color:var(--ink);max-width:540px;width:100%;padding:clamp(22px,4vw,34px);max-height:90vh;overflow:auto;border-top:4px solid var(--accent)}
.cookie-modal__box h3{font-size:1.4rem;margin-bottom:.4rem}
.cookie-modal__box p.intro{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.2rem}
.cookie-row{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.cookie-row h4{font-size:1rem;margin-bottom:.2rem;text-transform:none;font-family:var(--body);font-weight:700}
.cookie-row p{font-size:.86rem;color:var(--ink-soft);margin:0}
.switch{position:relative;width:46px;height:26px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#ccc;transition:.3s;cursor:pointer}
.switch span::before{content:"";position:absolute;height:18px;width:18px;left:4px;bottom:4px;background:#fff;transition:.3s}
.switch input:checked+span{background:var(--accent-deep)}
.switch input:checked+span::before{transform:translateX(20px)}
.switch input:disabled+span{background:var(--accent-deep);opacity:.5;cursor:not-allowed}
.cookie-modal__save{margin-top:1.4rem;width:100%}