/* ==========================================================================
   GRIST · Functions (poured in stout)
   Sections: two over one spaces · accent-filled recommended plan · enquiry
   panel (bone, floating) · sticky-heading FAQ accordion.
   Tap red is display-only on stout (4.93); brick is a fill with bone text.
   ========================================================================== */

/* ---------- 2 two over one: image cards, caption panel inside a 12px inset ---------- */
.fn-spaces .sec-head{ margin-bottom:52px; }
.two-one{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.space{ position:relative; border-radius:20px; padding:12px; background:#2A201B; box-shadow:inset 0 0 0 1px rgba(251,241,222,.1), 0 40px 70px -40px rgba(0,0,0,.7); }
.space--full{ grid-column:1 / -1; }
.space-img{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:5 / 4; background:var(--malt); }
.space--full .space-img{ aspect-ratio:auto; height:clamp(460px, 44vw, 640px); }
.space-img img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
/* crop the top off (a TV in the Yard photo): the image runs taller than its frame, anchored to the bottom */
.space-img--low img{ position:absolute; left:0; bottom:0; height:132%; }
.space-chips{ margin:6px 0 4px; }
.space-chips .chip{ color:var(--bone-80); }
.space-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(12,9,6,.55) 0%, rgba(12,9,6,0) 45%); pointer-events:none; }
/* the caption panel sits inside the card's 12px inset, 12px off the photo's edge */
.space-cap{ position:absolute; left:24px; right:24px; bottom:24px; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding:20px 22px 18px; border-radius:12px; background:var(--stout); color:var(--bone); }
.space-cap-t{ display:grid; gap:8px; min-width:0; }
.space-cap .mono{ color:var(--stone); }
.space-name{ font-size:clamp(40px, 3.6vw, 58px); line-height:.86; }
.space-line{ font-size:16px; line-height:1.45; color:var(--bone-80); max-width:40ch; }
.space-go{ min-height:40px; font-size:15px; justify-self:start; }
.space-go .arr{ color:var(--tap); }
.space-num{ display:grid; justify-items:end; text-align:right; flex:none; }
.space-num b{ font-family:var(--display); font-weight:400; font-size:clamp(84px, 8vw, 128px); line-height:.78; color:var(--tap); }
.space-num span{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); margin-top:8px; }
/* the full card turns its caption into a tall panel on the right */
.space-cap--wide{ left:auto; top:24px; width:min(460px, 38%); flex-direction:column; align-items:stretch; justify-content:space-between; padding:28px 28px 24px; }
.space-nums{ display:flex; justify-content:space-between; gap:18px; border-top:1px solid var(--line-dark); padding-top:18px; }
.space-nums .space-num{ justify-items:start; text-align:left; }
.space-nums .space-num + .space-num{ border-left:1px solid var(--line-dark); padding-left:18px; flex:1; }
.space-nums .space-num b{ font-size:clamp(84px, 7.6vw, 132px); }
.js .space.is-in .space-cap{ animation:cap-in 900ms var(--ease-enter) 250ms both; }
@keyframes cap-in{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

@media (max-width:900px){
  .two-one{ grid-template-columns:1fr; gap:14px; }
  .space{ padding:10px; }
  .space-img, .space--full .space-img{ aspect-ratio:4 / 3; height:auto; }
  .space-cap, .space-cap--wide{ position:relative; left:auto; right:auto; bottom:auto; top:auto; width:auto; margin-top:10px; padding:18px 16px 16px; flex-direction:row; align-items:flex-end; }
  .space-cap--wide{ flex-direction:column; align-items:stretch; }
  .space-num b{ font-size:72px; }
  .space-nums .space-num b{ font-size:72px; }
}
@media (max-width:640px){ .space-cap:not(.space-cap--wide){ flex-direction:column; align-items:stretch; } .space-cap:not(.space-cap--wide) .space-num{ justify-items:start; text-align:left; } }

/* ---------- 3 packages: accent-filled recommended plan ---------- */
.fn-pack{ padding-inline:var(--gutter) var(--gutter-end); }
.fn-pack-in{ max-width:1240px; margin:0 auto; }
.fn-pack-head{ margin-bottom:64px; }
.fn-pack-head h2{ line-height:.84; }
.plans{ display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:18px; align-items:stretch; padding-block:30px; }
.plan{ display:flex; flex-direction:column; gap:14px; padding:30px 28px 28px; border-radius:20px; box-shadow:inset 0 0 0 1.5px rgba(251,241,222,.3); background:rgba(251,241,222,.03); }
.plan--rec{ margin-block:-30px; padding:44px 34px 36px; background:var(--brick); color:var(--bone); box-shadow:0 50px 80px -40px rgba(143,29,19,.85); }
.plan-k, .plan-lbl, .plan-min{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); }
.plan--rec .plan-k, .plan--rec .plan-lbl, .plan--rec .plan-min{ color:var(--bone); }
.plan-name{ font-size:clamp(40px, 3.4vw, 54px); line-height:.86; }
.plan-price{ display:flex; align-items:flex-end; gap:10px; padding:10px 0 16px; border-bottom:1.5px solid currentColor; }
.plan-price b{ font-family:var(--display); font-weight:400; font-size:clamp(96px, 9vw, 140px); line-height:.76; }
.plan-price span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding-bottom:6px; }
.plan-lbl{ margin-top:6px; }
.plan-inc li{ position:relative; padding:10px 0 10px 28px; border-bottom:1px solid var(--line-dark); font-size:16px; line-height:1.4; }
.plan-inc li::before{ content:""; position:absolute; left:2px; top:15px; width:12px; height:7px; border-left:2px solid var(--tap); border-bottom:2px solid var(--tap); transform:rotate(-45deg); }
.plan--rec .plan-inc li{ border-bottom-color:rgba(251,241,222,.35); }
.plan--rec .plan-inc li::before{ border-color:var(--bone); }
.plan-min{ margin-top:auto; padding-top:10px; }
.plan-go{ justify-content:space-between; }
.plan--rec .btn--bone:hover{ background:var(--straw); }
@media (max-width:1100px){ .plans{ grid-template-columns:1fr; max-width:560px; padding-block:0; gap:14px; } .plan--rec{ margin-block:0; order:-1; } }

/* ---------- 4 enquiry: floating bone panel, photo side wipes open ---------- */
.fn-enq{ padding:calc(var(--section) * .6) 0 var(--section); }
.enq-panel{ margin:0 max(var(--gutter-end), 5vw) 0 max(var(--gutter), 5vw); display:grid; grid-template-columns:38fr 62fr; background:var(--bone); color:var(--ink);
  border-radius:var(--r-card); overflow:clip; box-shadow:0 60px 100px -50px rgba(0,0,0,.8); }
.enq-side{ position:relative; min-height:100%; color:var(--bone); background:var(--malt); display:flex; }
.enq-side img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); }
.enq-side-c{ position:relative; z-index:1; margin-top:auto; padding:40px 36px 36px; display:grid; gap:18px; width:100%;
  background:linear-gradient(0deg, rgba(12,9,6,.95) 0%, rgba(12,9,6,.82) 55%, rgba(12,9,6,0) 100%); padding-top:140px; }
.enq-side-c .kick{ color:var(--stone); }
.enq-h{ font-size:clamp(64px, 6.4vw, 112px); line-height:.84; }
.enq-promise{ font-size:17px; line-height:1.45; max-width:32ch; color:var(--bone-80); }
.enq-contact{ display:grid; gap:4px; font-size:16px; }
.enq-contact a{ text-decoration:none; background:linear-gradient(var(--tap), var(--tap)) left bottom / 100% 1.5px no-repeat; justify-self:start; padding:4px 0; }
.enq-form-wrap{ padding:clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px); }
@media (max-width:900px){
  .enq-panel{ grid-template-columns:1fr; margin:0 var(--gutter); }
  .enq-side{ min-height:420px; }
}

/* ---------- 5 FAQ: sticky heading beside an accordion ---------- */
.faq-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:5fr 7fr; gap:40px clamp(40px, 6vw, 96px); }
.faq-side{ position:sticky; top:calc(var(--nav-h) + 40px); align-self:start; display:grid; gap:20px; justify-items:start; }
.faq-side h2{ line-height:.84; }
.faq-note{ font-size:16px; color:var(--bone-80); max-width:28ch; }
.faq-note a{ color:var(--bone); text-decoration-color:var(--tap); text-decoration-thickness:1.5px; text-underline-offset:4px; }
.acc{ border-top:1.5px solid rgba(251,241,222,.5); }
.acc-item{ border-bottom:1px solid var(--line-dark); }
.acc-btn{ display:flex; align-items:center; gap:20px; width:100%; min-height:84px; padding:14px 0; background:none; border:0; text-align:left; cursor:pointer; color:var(--bone); }
.acc-n{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--stone); width:26px; flex:none; }
.acc-q{ font-family:var(--display); font-size:clamp(28px, 2.5vw, 38px); line-height:.95; text-transform:uppercase; flex:1; transition:color var(--dur-hover) var(--ease-hover); }
.acc-btn:hover .acc-q, .acc-btn[aria-expanded="true"] .acc-q{ color:var(--tap); }
.acc-i{ position:relative; flex:none; width:44px; height:44px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(251,241,222,.5); transition:background-color var(--dur-hover) var(--ease-hover); }
.acc-i::before, .acc-i::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:currentColor; transition:transform 400ms var(--ease-enter); }
.acc-i::after{ transform:rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-i{ background:var(--tap); color:var(--ink); box-shadow:none; }
.acc-btn[aria-expanded="true"] .acc-i::after{ transform:rotate(0deg); }
.acc-panel p{ padding:0 60px 26px 46px; font-size:17px; line-height:1.55; color:var(--bone-80); max-width:60ch; }
.js .acc-panel:not(.is-open){ display:none; }
.js .acc-panel.is-open p{ animation:acc-in 500ms var(--ease-enter) both; }
@keyframes acc-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (max-width:900px){
  .faq-grid{ grid-template-columns:1fr; }
  .faq-side{ position:static; }
  .acc-btn{ gap:14px; min-height:72px; }
  .acc-panel p{ padding:0 0 22px 40px; }
}
@media (prefers-reduced-motion: reduce){
  .js .space.is-in .space-cap, .js .acc-panel.is-open p{ animation:none; }
}