/* ============================================================
   ELEVATE MEDIA — Subpage shared styles (loads after site.css)
   ============================================================ */

/* solid nav variant for interior pages */
.nav.static{ position:sticky; background:var(--ink); border-bottom:1px solid var(--line-d); height:64px; }
.nav.static + *{ margin-top:0; }
.nav .links a.active{ opacity:1; }
.nav .links a.active::after{ transform:scaleX(1); }

/* page header band ------------------------------------------- */
.page-head{ background:var(--ink); color:var(--bone); padding:clamp(70px,11vh,130px) var(--mx) clamp(56px,8vh,96px); position:relative; }
.page-head .crumbs{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); display:flex; gap:14px; align-items:center; }
.page-head .crumbs .ln{ width:38px; height:1px; background:var(--grey); opacity:.6; }
.page-head h1{ margin:26px 0 0; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; line-height:1.02; font-size:clamp(38px,6.6vw,92px); }
.page-head h1 .ital{ display:block; font-family:var(--accent); font-style:italic; font-weight:500; text-transform:none; letter-spacing:.005em; font-size:.66em; color:var(--limestone); margin-top:.08em; }
.page-head[data-screen-label="Work — Header"] h1 .ital{ font-size:.84em; margin-top:.02em; }
.page-head .lead{ margin:30px 0 0; max-width:46ch; font-size:15px; color:var(--limestone); line-height:1.85; }
.page-head .fig{ position:absolute; right:var(--mx); bottom:26px; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,232,227,.45); }

/* generic light / dark section wrappers ----------------------- */
.sec{ padding:clamp(70px,11vh,140px) var(--mx); }
.sec.light{ background:var(--bone); color:var(--on-light); }
.sec.dark{ background:var(--ink); color:var(--bone); }
.sec.char{ background:var(--char); color:var(--bone); }
.sec-inner{ max-width:1180px; margin:0 auto; }

/* work page filters ------------------------------------------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.filters button{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--limestone); background:none; border:1px solid var(--line-d); padding:10px 18px; cursor:pointer; transition:background .3s, color .3s, border-color .3s; }
.filters button:hover{ border-color:var(--bone); color:var(--bone); }
.filters button.on{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.tile.hide{ display:none; }

/* service detail rows ----------------------------------------- */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; padding:clamp(56px,9vh,110px) 0; border-bottom:1px solid var(--line); }
.svc-detail:last-child{ border-bottom:0; }
.svc-detail .media{ aspect-ratio:4/3; --emptybg:#DAD7D0; position:relative; }
.svc-detail .media img{ width:100%; height:100%; object-fit:cover; }
.svc-detail .media .corner{ position:absolute; top:14px; right:14px; z-index:3; font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }
.svc-detail .svc-ic{ width:42px; height:42px; color:var(--limestone); margin-bottom:16px; }
.svc-more{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-light); border-bottom:1px solid var(--line); padding-bottom:7px; transition:gap .35s, border-color .35s; }
.svc-more:hover{ gap:18px; border-color:var(--on-light); }
.page-head .svc-ic-hd{ width:46px; height:46px; color:var(--bone); margin-bottom:24px; display:block; }
.svc-other{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-d); border:1px solid var(--line-d); }
.svc-other a{ background:var(--ink); padding:24px 22px; display:flex; align-items:center; gap:16px; transition:background .3s; }
.svc-other a:hover{ background:var(--char); }
.svc-other .svc-ic{ width:26px; height:26px; color:var(--limestone); flex:none; }
.svc-other .t{ font-family:var(--head); font-stretch:110%; font-weight:400; text-transform:uppercase; letter-spacing:.03em; font-size:14px; color:var(--bone); }
.svc-other .ar{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--grey); }
@media (max-width:760px){ .svc-other{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .svc-other{ grid-template-columns:1fr; } }
.svc-detail .no{ font-family:var(--accent); font-style:italic; font-weight:500; font-size:42px; line-height:1; color:var(--limestone); display:block; }
.svc-detail h2{ margin:20px 0 0; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(24px,3vw,40px); line-height:1.05; }
.svc-detail .ds{ margin:22px 0 0; font-size:14.5px; color:var(--soft); line-height:1.85; max-width:46ch; }
.svc-detail .inc{ margin:30px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.svc-detail .inc li{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-light); }
.svc-detail .inc li span{ color:var(--soft); letter-spacing:.1em; text-transform:none; font-size:11px; }
.svc-detail.flip .media{ order:2; }
@media (max-width:900px){ .svc-detail{ grid-template-columns:1fr; } .svc-detail.flip .media{ order:0; } }

/* packages ----------------------------------------------------- */
.packs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-d); border:1px solid var(--line-d); }
.pack{ background:var(--ink); padding:40px 34px 46px; display:flex; flex-direction:column; }
.pack.feature{ background:var(--char); }
.pack .tier{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--grey); }
.pack h3{ margin:18px 0 0; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:24px; line-height:1.05; }
.pack .pr{ margin:14px 0 0; font-family:var(--accent); font-style:italic; font-weight:500; font-size:34px; color:var(--limestone); }
.pack .pr small{ font-family:var(--mono); font-style:normal; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-left:8px; }
.pack ul{ margin:28px 0 0; padding:0; list-style:none; }
.pack ul li{ padding:11px 0; border-bottom:1px solid var(--line-d); font-size:12.5px; color:var(--limestone); }
.pack ul li:last-child{ border-bottom:0; }
.pack .go{ margin-top:auto; padding-top:32px; }
.pack .go a{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); border-bottom:1px solid var(--line-d); padding-bottom:7px; transition:gap .35s, border-color .35s; }
.pack .go a:hover{ gap:20px; border-color:var(--bone); }
.pack .base{ margin:22px 0 0; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
@media (max-width:1100px){ .packs{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .packs{ grid-template-columns:1fr; } }

/* à la carte add-ons ----------------------------------------------- */
.addons{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.addons li{ padding:26px 0; border-bottom:1px solid var(--line); }
.addons .a-h{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.addons .a-n{ font-family:var(--head); font-stretch:110%; font-weight:400; text-transform:uppercase; letter-spacing:.03em; font-size:16px; color:var(--on-light); }
.addons .a-p{ font-family:var(--accent); font-style:italic; font-weight:500; font-size:22px; color:var(--on-light); white-space:nowrap; }
.addons p{ margin:9px 0 0; max-width:66ch; font-size:13px; color:var(--soft); line-height:1.75; }

/* service area ------------------------------------------------------ */
.area{ text-align:center; }
.area .chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
.area .chips span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); border:1px solid var(--line-d); padding:11px 18px; border-radius:100px; }

/* studio page --------------------------------------------------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px); align-items:start; }
@media (max-width:900px){ .duo{ grid-template-columns:1fr; } }
.principles{ margin:0; padding:0; list-style:none; counter-reset:pr; border-top:1px solid var(--line); }
.principles li{ counter-increment:pr; display:grid; grid-template-columns:56px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); }
.principles li::before{ content:counter(pr,decimal-leading-zero); font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--soft); padding-top:5px; }
.principles .nm{ font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:17px; display:block; }
.principles .ds{ margin:8px 0 0; font-size:13px; color:var(--soft); line-height:1.75; }
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.team-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(30px,5vh,56px); }
.team-gallery img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
@media (max-width:560px){ .team-gallery{ gap:10px; } }
.member{ position:relative; }
.member .ph{ aspect-ratio:3/3.7; --emptybg:#1B1916; position:relative; overflow:hidden; }
.member .ph img{ width:100%; height:100%; object-fit:cover; }
.member .nm{ margin-top:18px; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:16px; }
.member .rl{ margin-top:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
@media (max-width:900px){ .team{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .team{ grid-template-columns:1fr; } }

/* journal -------------------------------------------------------- */
.feature-post{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,5vw,70px); align-items:end; margin-bottom:clamp(56px,9vh,100px); }
.feature-post .media{ aspect-ratio:16/10; --emptybg:var(--char); position:relative; }
.feature-post .media img{ width:100%; height:100%; object-fit:cover; }
.feature-post .cat{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--limestone); }
.feature-post h2{ margin:18px 0 0; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(24px,3vw,40px); line-height:1.08; }
.feature-post p{ margin:20px 0 0; font-size:13.5px; color:var(--limestone); line-height:1.85; max-width:44ch; }
.feature-post .dt{ margin-top:24px; display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
@media (max-width:900px){ .feature-post{ grid-template-columns:1fr; } }

.post-list{ border-top:1px solid var(--line-d); }
.post{ display:grid; grid-template-columns:110px 1.3fr 2fr auto; gap:clamp(18px,4vw,56px); align-items:center; padding:30px 0; border-bottom:1px solid var(--line-d); transition:padding .4s ease; }
.post .dt{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.post .ti{ font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(16px,1.9vw,22px); line-height:1.15; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.post .ex{ font-size:12.5px; color:var(--grey); line-height:1.75; max-width:52ch; }
.post .cat{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--limestone); border:1px solid var(--line-d); padding:7px 13px; white-space:nowrap; }
.post:hover{ padding-left:14px; }
.post:hover .ti{ transform:translateX(4px); }
@media (max-width:900px){ .post{ grid-template-columns:1fr; gap:10px; } .post .ex{ display:none; } .post .cat{ justify-self:start; } }

/* contact --------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(40px,7vw,110px); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:34px 28px; }
.form .full{ grid-column:1 / -1; }
.field label{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin-bottom:12px; }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  font-family:var(--sans); font-weight:300; font-size:15px; color:var(--on-light);
  padding:6px 0 14px; outline:none; border-radius:0; transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.7; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--on-light); }
.field ::placeholder{ color:var(--limestone); }
.checks{ display:flex; flex-wrap:wrap; gap:10px; }
.checks label{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); border:1px solid var(--line); padding:10px 16px; cursor:pointer; transition:background .3s, color .3s, border-color .3s; }
.checks input{ position:absolute; opacity:0; pointer-events:none; }
.checks label:has(input:checked){ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.form .submit{ margin-top:8px; }
.form button[type=submit]{
  display:inline-flex; align-items:center; gap:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  background:var(--ink); color:var(--bone); border:0; padding:18px 34px; cursor:pointer;
  transition:transform .4s cubic-bezier(.16,1,.3,1), gap .4s;
}
.form button[type=submit]:hover{ gap:26px; transform:translateY(-2px); }
.form-done{ display:none; border:1px solid var(--line); padding:44px 40px; }
.form-done .ital{ font-size:clamp(22px,2.6vw,32px); }
.form-done p{ margin:16px 0 0; font-size:13.5px; color:var(--soft); line-height:1.8; }
.contact-aside .blk{ padding:26px 0; border-bottom:1px solid var(--line); }
.contact-aside .blk:first-child{ padding-top:0; }
.contact-aside h4{ margin:0 0 14px; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); font-weight:400; }
.contact-aside a, .contact-aside .li{ display:block; font-size:14px; color:var(--on-light); margin-bottom:9px; }
.contact-aside a:hover{ color:var(--soft); }

/* faq ------------------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(15px,1.8vw,19px); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ font-family:var(--mono); font-size:14px; color:var(--soft); transition:transform .3s; }
.faq details[open] summary .pm{ transform:rotate(45deg); }
.faq .a{ padding:0 0 28px; font-size:13.5px; color:var(--soft); line-height:1.85; max-width:64ch; }

/* journal article (single post) ------------------------------------ */
.page-head .crumbs a{ color:var(--grey); transition:color .3s; }
.page-head .crumbs a:hover{ color:var(--bone); }
.article-hero{ max-width:1180px; margin:0 auto clamp(40px,6vh,72px); aspect-ratio:16/8; overflow:hidden; }
.article-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.article{ max-width:720px; margin:0 auto; }
.article p{ margin:0 0 22px; font-size:15px; line-height:1.85; color:var(--on-light); }
.article p:first-of-type{ font-size:17px; color:var(--on-light); }
.article h2{ margin:46px 0 16px; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(19px,2.3vw,26px); line-height:1.1; }
.article .pull{ margin:40px 0; padding:6px 0 6px 26px; border-left:1px solid var(--on-light); font-family:var(--accent); font-style:italic; font-weight:500; font-size:clamp(22px,3vw,32px); line-height:1.4; }
.article .signoff{ margin-top:40px; padding-top:26px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
.article-back{ display:inline-flex; align-items:center; gap:12px; margin-top:40px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-light); border-bottom:1px solid var(--line); padding-bottom:7px; transition:gap .35s, border-color .35s; }
.article-back:hover{ gap:20px; border-color:var(--on-light); }
.feature-post, a.post{ cursor:pointer; }

/* small cta band --------------------------------------------------- */
.band{ background:var(--char); color:var(--bone); padding:clamp(64px,10vh,110px) var(--mx); text-align:center; }
.band h2{ margin:0; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(26px,4vw,52px); line-height:1.05; }
.band h2 .ital{ font-family:var(--accent); font-style:italic; font-weight:500; text-transform:none; color:var(--limestone); }
.band .btn{ margin-top:38px; display:inline-flex; align-items:center; gap:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; background:var(--bone); color:var(--ink); padding:17px 32px; transition:transform .4s cubic-bezier(.16,1,.3,1), gap .4s; }
.band .btn:hover{ gap:26px; transform:translateY(-2px); }

/* section headers on subpages -------------------------------------- */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,7vh,64px); }
.sec-head h2{ margin:0; font-family:var(--head); font-stretch:125%; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(24px,3.6vw,46px); line-height:1.05; }
.sec-head h2 .ital{ font-family:var(--accent); font-style:italic; font-weight:500; text-transform:none; letter-spacing:.005em; color:var(--limestone); }
.sec.light .sec-head h2 .ital{ color:var(--soft); }
.sec-head .note{ max-width:38ch; font-size:13.5px; color:var(--soft); line-height:1.8; margin:0; }
.sec.dark .sec-head .note, .sec.char .sec-head .note{ color:var(--limestone); }

/* ============================================================
   RESPONSIVE (subpages)
   ============================================================ */
@media (max-width:600px){
  .form{ grid-template-columns:1fr; gap:26px; }
  .page-head .fig{ position:static; display:block; right:auto; bottom:auto; margin-top:30px; }
  .addons .a-h{ flex-direction:column; align-items:flex-start; gap:6px; }
  .team-gallery{ grid-template-columns:1fr 1fr; }
}