/* ghumanta page styles — used only by the ghumanta page(s). Moved verbatim from global.css
   (Phase 2: architecture only; no rule was edited). */

/* ===== Ghumanta page (legacy components) ===== */
/* "What Ghumanta Does" — two things held together by one idea, so a
   plain two-card layout (not photos) keeps the emphasis on the words
   rather than turning Stories/Experiences into a third visual grid to
   sit alongside the theme cards and place tiles used elsewhere. */
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px;}

.duo-card{background:var(--surface);border:1px solid var(--border);padding:44px 40px;transition:border-color .25s ease;}

.duo-card:hover{border-color:var(--accent);}

.duo-card .duo-label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}

.duo-card h3{font-family:var(--sans);font-weight:700;font-size:25px;color:var(--heading);margin-bottom:16px;letter-spacing:-0.01em;}

.duo-card p{font-family:var(--serif);font-size:16px;line-height:1.75;color:var(--body);}

/* Community — the "does it actually help" trust test. Six short
   answers laid out as an even table of cells (borders on every side,
   like a ledger) rather than cards with shadows/photos — it should
   read as a set of plain facts being stated, not a marketing grid. */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);margin-top:56px;}

.pillar-item{padding:36px 34px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}

.pillar-item .pillar-label{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nature);margin-bottom:14px;}

.pillar-item p{font-family:var(--serif);font-size:15px;line-height:1.68;color:var(--body);}

/* Responsible tourism — a dark, always-dark panel (same family as
   .related/.explore/.stories) so the site's "baseline commitments"
   read with more weight than another cream section would give them.
   Checkmarks, not bullets, since these are commitments being kept,
   not options to pick from. */
.checklist-panel{background:var(--panel-dark);color:#FFFFFF;}

.checklist-panel .section-label{color:#d7a373;}

.checklist-panel .section-label::before{background:#d7a373;}

.checklist-panel .section-title{color:#FFFFFF;}

.checklist-panel .section-title em{color:#d7a373;}

.checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 56px;margin-top:52px;}

.checklist-item{display:flex;gap:16px;align-items:flex-start;}

.checklist-item .check{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;margin-top:2px;}

.checklist-item .check svg{color:var(--accent);}

.checklist-item p{font-family:var(--serif);font-size:16px;line-height:1.65;color:rgba(255,255,255,.82);}

/* Partners — plain bordered cells, matching the ledger-like honesty of
   the pillar grid rather than reaching for logos we don't have. */
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;}

.partner-card{border:1px solid var(--border);padding:38px 34px;transition:border-color .25s ease;}

.partner-card:hover{border-color:var(--nature);}

.partner-card .partner-kicker{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nature);margin-bottom:14px;}

.partner-card h3{font-family:var(--sans);font-weight:700;font-size:20px;color:var(--heading);margin-bottom:14px;letter-spacing:-0.005em;}

.partner-card p{font-family:var(--serif);font-size:15px;line-height:1.68;color:var(--body);}

/* Contact — reuses the footer-signup band's accent-as-background idea
   (the site's other clear call-to-action) but centered and built
   around an email + socials instead of a form. */
.contact-band{background:var(--accent);padding:96px 0;text-align:center;}

.contact-band .wrap{max-width:640px;}

.contact-band .section-label{color:#FCFAF7;margin-bottom:18px;}

.contact-band .section-label::before{background:var(--panel-dark);}

.contact-band h2{font-family:var(--sans);font-weight:700;font-size:clamp(26px,3.2vw,38px);color:var(--panel-dark);letter-spacing:-0.01em;margin-bottom:18px;}

.contact-band > .wrap > p{font-family:var(--serif);font-size:16.5px;line-height:1.65;color:rgba(36,36,36,.75);max-width:46ch;margin:0 auto 36px;}

.contact-actions{display:flex;flex-direction:column;gap:24px;align-items:center;}

.contact-email{font-family:var(--sans);font-weight:700;font-size:19px;color:var(--panel-dark);border-bottom:1px solid var(--panel-dark);padding-bottom:4px;transition:opacity .2s ease;}

.contact-email:hover{opacity:.7;}

.contact-socials{display:flex;gap:14px;}

.contact-socials .icon-btn{background:rgba(252,250,247,.4);color:var(--panel-dark);}

.contact-socials .icon-btn:hover{background:var(--panel-dark);color:#FCFAF7;}

@media (max-width:980px){
.duo-grid,.partner-grid{grid-template-columns:1fr;}
.pillar-grid{grid-template-columns:1fr 1fr;}
.checklist-grid{grid-template-columns:1fr;}
}

@media (max-width:620px){
.pillar-grid{grid-template-columns:1fr;}
.duo-card,.partner-card{padding:32px 26px;}
}

/* ===== Ghumanta page — collective/editorial rebuild =====
   Reuses .hero-standalone, .archive-intro, .pull-quote, .feature,
   .pillar-grid, .breather and .editorial-quote as-is from the blocks
   above. Only the genuinely new shapes this page needs are styled
   here: an offset field-photo pair, a sequential process row, a
   filmstrip, and three full-bleed photo moments (statement, invite,
   closing) — kept to three so the page has room to breathe between
   them rather than turning every section into a photo backdrop. */
/* WHAT IS A GHUMANTA? — a dictionary-entry treatment for the brand
   word itself: giant italic headword + part-of-speech tag (the
   "noun" convention), a lede line standing in for the definition,
   then the fuller text below as a left-aligned reading column. No
   photo — the point is to be a quiet, purely typographic beat right
   after the hero's photograph, so the two sections read as opposites
   rather than more of the same. */
.ghumanta-def{background:var(--bg);padding:140px 0;text-align:center;}

.def-headword{margin-top:8px;}

.def-word{display:inline-block;font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(52px,9vw,116px);color:var(--heading);letter-spacing:-0.01em;line-height:1;}

.def-pos{font-family:var(--sans);font-weight:500;font-style:normal;font-size:clamp(15px,1.6vw,20px);color:var(--accent);letter-spacing:.02em;margin-left:10px;vertical-align:middle;}

.def-phonetic{font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--body);opacity:.6;margin-top:18px;}

.def-lede{font-family:var(--sans);font-weight:700;font-size:clamp(19px,2.1vw,24px);color:var(--heading);letter-spacing:-0.01em;margin-top:28px;}

.def-body{max-width:620px;margin:52px auto 0;text-align:left;}

.def-body .def-line{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.5;color:var(--heading);margin-bottom:36px;}

.def-body p{font-family:var(--serif);font-size:17px;line-height:1.75;color:var(--body);margin-bottom:22px;}

.def-body p:last-child{margin-bottom:0;}

.def-close{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--heading);margin-top:12px;}

.def-close .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}

differently, standing in for a team grid the collective doesn't
   want to present as. */
.who-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;}

.who-photos{position:relative;padding-right:15%;padding-bottom:20%;}

.who-photos img{width:100%;display:block;object-fit:cover;}

.who-photos .photo-a{aspect-ratio:4/5;}

.who-photos .photo-b{position:absolute;right:0;bottom:0;width:62%;aspect-ratio:4/3;border:6px solid var(--bg);}

/* Always-dark panel (same pattern as .explore/.stories elsewhere on
   the site) rather than --stone — --stone barely differs from
   --surface in dark mode, so the tint disappeared for anyone with
   the toggle on. This reads as a clear color block in both themes. */
.lens-section{background:var(--panel-dark);padding:88px 0;}

.lens-section .section-label{color:#d7a373;}

.lens-section .section-label::before{background:#d7a373;}

.lens-section .section-title{color:#FFFFFF;}

.lens-section .section-title em{color:var(--accent);}

.lens-intro{font-family:var(--serif);font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);max-width:56ch;margin-top:20px;margin-bottom:36px;}

.lens-outro{font-family:var(--serif);font-style:italic;font-size:18px;color:#FFFFFF;margin-top:44px;}

.lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 48px;}

.lens-card{border-left:3px solid var(--accent);padding:2px 0 2px 20px;}

.lens-role{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#e3a468;margin-bottom:10px;}

.lens-card p{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:#FFFFFF;}

/* OUR CONNECTION TO THE GROUND — genuinely sequential (field work
   leads to understanding, then contribution, and only then a story),
   so a numbered row is information here, not decoration. A hairline
   rule stands in for an arrow rather than an icon. */
.process-panel{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:96px 0;}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);margin-top:56px;}

.process-stage{padding:28px 32px 4px 0;border-right:1px solid var(--border);}

.process-stage:last-child{border-right:none;padding-right:0;}

.process-num{font-family:var(--sans);font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.04em;margin-bottom:16px;}

.process-stage h4{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--heading);letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}

.process-stage ul{list-style:none;}

.process-stage li{font-family:var(--serif);font-size:15px;line-height:1.85;color:var(--body);}

/* WHAT WE LOOK AT — a short filmstrip ahead of the .pillar-grid ledger
   already used elsewhere on this page, so the list of subjects reads
   as documentary rather than a services menu. */
/* WHAT WE LOOK AT — each subject gets its own photo instead of a
   plain ledger row, using the same image-tile language as
   .theme-card elsewhere on the site (sharp corners, bottom scrim,
   gentle hover zoom) rather than inventing a new one. */
.curiosity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}

.curiosity-card{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--border);}

.curiosity-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}

.curiosity-card:hover img{transform:scale(1.08);}

.curiosity-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,18,15,0) 38%, rgba(20,18,15,.9) 100%);}

.curiosity-content{position:absolute;left:0;bottom:0;z-index:1;padding:26px;width:100%;}

.curiosity-label{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#e3c19f;margin-bottom:10px;}

.curiosity-content p{font-family:var(--serif);font-size:15px;line-height:1.5;color:rgba(255,255,255,.92);}

/* WHY WE TELL STORIES — the quote itself stays plain (reuses
   .editorial-quote as-is, no image); the photo sits behind the
   paragraph that follows it instead. */
.photo-text-band{position:relative;padding:130px 0;overflow:hidden;}

.photo-text-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.photo-text-band .scrim{position:absolute;inset:0;background:rgba(20,18,15,.66);}

.photo-text-content{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center;}

.photo-text-content .section-label{color:#e3c19f;}

.photo-text-content .section-label::before{background:#e3c19f;}

.photo-text-content .section-title{color:#FFFFFF;max-width:none;margin-bottom:22px;}

.photo-text-content .section-title em{color:#e3c19f;}

.photo-text-content p{font-family:var(--serif);font-size:18px;line-height:1.72;color:rgba(255,255,255,.92);}

/* STORIES & RURAL ECONOMY — the .feature two-up, mirrored so it
   doesn't read as the same block repeated straight down the page. */
@media (min-width:981px){
.feature-reverse .feature-grid{grid-template-columns:1fr 1.55fr;}
}

.feature-reverse .feature-img{order:2;}

.feature-reverse .feature-text{order:1;}

/* HOW WE TELL — four formats, unranked, so no numbering; the same
   ledger language as .pillar-grid at a different column count. */
.formats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);margin-top:56px;}

.formats-item{padding:32px 28px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}

.formats-item .formats-label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nature);margin-bottom:14px;}

.formats-item p{font-family:var(--serif);font-size:14.5px;line-height:1.62;color:var(--body);}

/* WHO CAN BE PART OF GHUMANTA — a warm, full-bleed invitation; the
   one place on this page a button sits directly over a photograph. */
.invite-section{position:relative;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden;}

.invite-section img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.invite-section .scrim{position:absolute;inset:0;background:linear-gradient(0deg, rgba(20,18,15,.88) 0%, rgba(20,18,15,.1) 66%);}

.invite-content{position:relative;z-index:1;padding:64px 0;max-width:640px;}

.invite-content .section-label{color:#e3c19f;}

.invite-content .section-label::before{background:#e3c19f;}

.invite-content h2{font-family:var(--sans);font-weight:700;font-size:clamp(26px,3.2vw,40px);color:#FFFFFF;letter-spacing:-0.01em;margin-bottom:18px;max-width:14ch;}

.invite-content p{font-family:var(--serif);font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.82);max-width:52ch;margin-bottom:32px;}

/* CLOSING — full-bleed and centered, a shorter cousin of
   .hero-standalone built for a stacked line-by-line close rather than
   a single headline. */
.closing-section{position:relative;height:82vh;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;}

.closing-section img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.closing-section .scrim{position:absolute;inset:0;background:rgba(20,18,15,.55);}

.closing-content{position:relative;z-index:1;text-align:center;padding:0 24px;}

.closing-lines p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3.4vw,34px);line-height:1.5;color:#FFFFFF;}

.closing-tagline{margin-top:36px;font-family:var(--sans);font-size:14px;letter-spacing:.03em;color:rgba(255,255,255,.68);}

.closing-content .btn{margin-top:36px;}

@media (max-width:980px){
.who-grid{grid-template-columns:1fr;gap:40px;}
.who-photos{padding-right:15%;padding-bottom:22%;}
.lens-grid{grid-template-columns:1fr 1fr;}
.process-grid{grid-template-columns:1fr 1fr;}
.process-stage{border-right:none;border-bottom:1px solid var(--border);padding:28px 0;}
.process-stage:nth-child(odd){border-right:1px solid var(--border);padding-right:28px;}
.formats-grid{grid-template-columns:1fr 1fr;}
.curiosity-grid{grid-template-columns:1fr 1fr;}
.ghumanta-def{padding:100px 0;}
}

@media (max-width:620px){
.lens-grid{grid-template-columns:1fr;gap:28px;}
.lens-card p{font-size:19px;max-width:none;}
.process-grid{grid-template-columns:1fr;}
.process-stage{border-right:none !important;padding:24px 0 !important;}
.formats-grid{grid-template-columns:1fr;}
.formats-item{border-right:none;}
.curiosity-grid{grid-template-columns:1fr;}
.ghumanta-def{padding:80px 0;}
.def-body .def-line{font-size:19px;}
.photo-text-band{padding:80px 0;}
.who-photos{padding-right:20%;padding-bottom:26%;}
}

/* CONNECT WITH [NAME] — reuses the site's existing (previously
   unused) .contact-band/.contact-socials component as-is, so this
   needed no new visual language of its own. */
.contact-band .contact-socials{justify-content:center;margin:0 auto;}