.team-section, .faq-section { background: var(--paper); color: var(--ink); }
.team-grid, .contact-grid { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1fr); gap: clamp(50px,8vw,124px); align-items: center; }
.team-portrait { position: relative; margin: 0; background: #222421; color: white; }
.team-portrait img { display: block; width: 100%; height: clamp(420px,43vw,600px); object-fit: cover; object-position: center 42%; }
.team-portrait figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 58px 26px 22px; background: linear-gradient(transparent, rgb(0 0 0 / .86)); }
.team-portrait figcaption strong { font-size: 1rem; }
.team-portrait figcaption span { font-size: .84rem; color: #e1e0d8; }
.team-copy > p:not(.kicker), .contact-copy > p:not(.kicker) { margin: 20px 0 0; line-height: 1.65; max-width: 52ch; }
.team-copy > p:not(.kicker) { color: var(--muted); }
.team-copy > p.team-lead { font-size: clamp(1.05rem,1.5vw,1.3rem); color: var(--ink); }
.team-figures { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; border-top: 1px solid #c9c8be; margin-top: 32px; padding-top: 20px; }
.team-figures b { display: block; font-size: clamp(3.15rem,6vw,5rem); line-height: .96; }
.team-figures span { display: block; max-width: 19ch; margin-top: 8px; font-size: .84rem; line-height: 1.45; color: var(--muted); }

.plans-section, .contact-section, .site-footer { background: var(--ink); color: var(--paper); }
.plans-intro { display: flex; align-items: end; justify-content: space-between; gap: 34px; }
.plans-intro > p { margin: 0; max-width: 37ch; padding-bottom: 5px; font-size: 1.04rem; line-height: 1.55; color: #d1d1c9; }
.plans-section .section-title, .contact-section .section-title { color: var(--paper); }
.plans-section .kicker, .contact-section .kicker { color: var(--orange); }
.plans-section .section-title em, .contact-section .section-title em { font-style: normal; color: var(--orange); }
.plan-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: clamp(32px,4vw,58px); }
.plan-item { display: flex; flex-direction: column; border: 1px solid #51524c; padding: clamp(20px,2.35vw,38px); background: #20211f; }
.plan-emphasis { border-color: var(--orange); border-top-width: 4px; padding-top: calc(clamp(20px,2.35vw,38px) - 3px); }
.plan-name { margin: 0 0 24px; color: var(--paper); font-size: clamp(1.15rem,1.6vw,1.4rem); line-height: 1.2; }
.plan-emphasis .plan-name { color: var(--orange); }
.plan-rate { display: flex; gap: 10px; align-items: baseline; margin: 0; line-height: 1; }
.plan-rate strong { font-size: clamp(4.5rem,7.4vw,7rem); line-height: .9; }
.plan-rate > span, .plan-price span { font-size: .9rem; color: #c8c9c0; }
.plan-price { margin: 18px 0 22px; }
.plan-price b { font-size: 1.25rem; }
.plan-includes { list-style: none; margin: 0 0 26px; padding: 20px 0 0; border-top: 1px solid #4b4c45; font-size: .94rem; }
.plan-includes li { position: relative; padding: 0 0 7px 21px; line-height: 1.38; }
.plan-includes li::before { position: absolute; left: 1px; top: .27em; content: ""; width: 6px; height: 10px; border: solid var(--orange); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan-link { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: auto; min-height: 46px; padding: 12px 15px; font-size: .95rem; font-weight: 700; line-height: 1.3; text-decoration: none; border: 1px solid #797a72; color: var(--paper); }
.plan-link:hover, .plan-link:focus-visible, .plan-emphasis .plan-link { background: var(--orange); border-color: var(--orange); color: #171613; }
.plan-emphasis .plan-link:hover, .plan-emphasis .plan-link:focus-visible { background: #ff7443; }
.plan-link .icon, .contact-form .icon { flex: 0 0 20px; }

.stories-section { background: #e8e8df; color: var(--ink); }
.stories-header { margin-bottom: clamp(28px,4vw,56px); }
.story-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,245px),1fr)); gap: clamp(20px,3vw,46px); }
.story-item { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; border-top: 2px solid var(--ink); padding-top: 16px; scroll-margin-top: 95px; }
.story-item img { width: 100%; height: clamp(280px,30vw,400px); object-fit: cover; object-position: center 27%; }
.story-copy { align-self: start; padding: 18px 0 0; }
.story-copy h3 { margin: 0; font-size: clamp(2.25rem,3.6vw,3.75rem); line-height: .95; }
.story-copy p { margin: 16px 0 0; max-width: 32ch; line-height: 1.55; font-size: .94rem; }

.story-trigger {
  position: relative; display: block; width: 100%; min-width: 0; align-self: stretch;
  padding: 0; border: 0; background: var(--ink); color: var(--paper); text-align: left;
}
.story-action {
  position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 6px; padding: 10px 12px;
  font: 700 .76rem/1.2 var(--body); color: var(--paper); background: #171815ed;
}
.story-action .icon { width: 15px; height: 15px; color: var(--orange); }
.story-trigger:hover .story-action, .story-trigger:focus-visible .story-action { background: var(--orange); color: var(--ink); }
.story-trigger:hover .icon, .story-trigger:focus-visible .icon { color: var(--ink); }
html:has(.story-dialog[open]) { overflow: hidden; }
.story-dialog {
  --dialog-pad: clamp(16px,2.5vw,30px);
  width: min(690px,calc(100% - 28px)); max-width: none;
  max-height: calc(100dvh - 32px); padding: 0 var(--dialog-pad) var(--dialog-pad);
  overflow-y: auto; overscroll-behavior: contain; border: 0; border-top: 4px solid var(--orange);
  background: var(--paper); color: var(--ink); margin: auto; box-shadow: 0 22px 80px #0005;
}
.story-dialog::backdrop { background: rgb(11 12 10 / .84); }
.dialog-heading {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: var(--dialog-pad) 0 16px; background: var(--paper);
}
.dialog-heading .kicker { margin: 0 0 5px; }
.dialog-heading h3 { font-size: clamp(34px,4.5vw,52px); line-height: 1; }
.dialog-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  color: var(--ink); border: 1px solid #bebfb4; background: transparent; border-radius: 50%;
}
.dialog-close:hover { border-color: var(--ink); background: #e1e1d7; }
.comparison-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(6px,1.5vw,14px); }
.comparison-photos img { display: block; width: 100%; height: auto; max-height: 52dvh; object-fit: contain; background: #121310; }
.story-quote { margin: 18px 0 0; border-left: 3px solid var(--orange); padding-left: 12px; }
.story-quote p { line-height: 1.6; }
.story-quote p + p { margin-top: .75em; }
.story-quote cite { display: block; margin-top: 12px; font-size: .8rem; font-style: normal; color: var(--muted); }
.story-closing { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #bebfb4; line-height: 1.55; }

.faq-grid { display: grid; grid-template-columns: minmax(0,.74fr) minmax(0,1.2fr); align-items: start; gap: clamp(40px,7vw,98px); }
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid #b6b8ae; }
.faq-list summary { position: relative; display: block; cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-size: clamp(1rem,1.5vw,1.16rem); font-weight: 700; line-height: 1.45; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-list summary::after { content: ""; position: absolute; width: 14px; height: 2px; background: var(--ink); right: 5px; top: calc(50% - 1px); }
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: scale(0); }
.faq-list details[open] summary::before { background: #ba411b; }
.faq-list details p { margin: 0; padding: 0 40px 23px 0; line-height: 1.65; color: #51534e; }
.faq-list summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

.contact-grid { align-items: start; }
.contact-copy > p:not(.kicker) { color: #d1d2c8; }
.contact-info { margin-top: 30px; font-style: normal; }
.contact-info > div { display: grid; grid-template-columns: 75px minmax(0,1fr); gap: 14px; border-top: 1px solid #42443d; padding: 12px 0; font-size: .9rem; line-height: 1.5; }
.contact-info b { font-weight: 400; color: #b6b8ae; }
.contact-info a, .site-footer a { width: fit-content; color: inherit; text-decoration: none; }
.contact-info a { overflow-wrap: anywhere; }
.contact-info a:hover, .footer-terms:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-form { padding: clamp(22px,3.5vw,46px); background: #262724; border: 1px solid #43453e; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; color: var(--paper); margin: 0; font-size: .9rem; font-weight: 700; }
.contact-field-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin: 19px 0; }
.contact-form input, .contact-form textarea { box-sizing: border-box; margin: 0; width: 100%; min-width: 0; border: 1px solid #64675e; border-radius: 0; background: #20211f; color: var(--paper); font: inherit; font-weight: 400; padding: 12px; line-height: 1.45; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #b1b3a9; opacity: 1; }
.contact-form textarea { resize: vertical; min-height: 94px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 2px; }
.contact-form .button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 21px; text-align: left; }
.contact-form small { display: block; margin-top: 12px; color: #c3c5ba; font-size: .79rem; line-height: 1.4; }
.site-footer { border-top: 1px solid #45463f; }
.footer-inner { display: flex; align-items: center; gap: 22px; padding-block: 22px; color: #c0c2b8; font-size: .84rem; }
.footer-brand { display: inline-flex; flex: 0 0 auto; }
.footer-brand img { width: 72px; height: auto; }
.footer-terms { margin-left: auto; }
.cookie-choices { padding: 4px 0; color: inherit; background: transparent; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.cookie-notice { position: fixed; z-index: 20; inset: auto auto max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); width: min(380px,calc(100% - 32px)); padding: 18px 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--orange); box-shadow: 0 5px 26px #0003; }
.cookie-notice h2 { font-size: 1.08rem; line-height: 1.3; }
.cookie-notice p { margin-top: 6px; font-size: .9rem; line-height: 1.45; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.cookie-actions button { min-height: 44px; flex: 1; padding: 6px 12px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; }
.cookie-actions button:hover, .cookie-actions button:focus-visible { background: var(--ink); color: var(--paper); }

@media (max-width: 900px) {
  .team-grid, .contact-grid, .faq-grid { gap: 34px; }
  .plan-list { gap: 10px; }
  .plan-item { padding-inline: 18px; }
  .story-item { grid-template-columns: 1fr; }
  .story-item img { height: clamp(260px,40vw,400px); min-height: 0; }
  .story-copy { align-self: start; padding: 18px 0 0; }
  .story-copy h3 br { display: none; }
  .story-copy h3 br::after { content: " "; }
  .story-copy p { max-width: 44ch; }
  .contact-field-pair { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .team-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .team-grid { gap: 28px; }
  .team-portrait img { height: clamp(355px,95vw,510px); }
  .team-figures { margin-top: 22px; }
  .plans-intro { display: block; }
  .plans-intro > p { margin-top: 20px; }
  .plan-list { grid-template-columns: 1fr; gap: 14px; }
  .plan-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 12px; padding: 24px; }
  .plan-emphasis { padding-top: 21px; }
  .plan-name { grid-column: 1 / -1; margin-bottom: 14px; }
  .plan-rate strong { font-size: 4.4rem; }
  .plan-price { align-self: end; text-align: right; margin-bottom: 0; }
  .plan-includes, .plan-link { grid-column: 1 / -1; }
  .plan-includes { margin: 20px 0 12px; padding-top: 16px; }
  .story-list { gap: 16px; }
  .story-item img { height: clamp(220px,51vw,340px); }
  .story-copy h3 { font-size: clamp(1.95rem,5vw,2.55rem); }
  .story-copy p { margin-top: 10px; font-size: .88rem; }
  .faq-grid, .contact-grid { gap: 26px; }
  .contact-field-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-inner { flex-wrap: wrap; gap: 12px 18px; }
  .footer-terms { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 440px) {
  .story-list, .contact-field-pair { grid-template-columns: 1fr; }
  .story-list { gap: 28px; }
  .story-item { grid-template-columns: .85fr 1fr; }
  .story-item img { height: auto; min-height: 205px; }
  .story-copy { padding: 0 0 0 16px; align-self: end; }
  .story-copy h3 br { display: initial; }
  .plan-rate { gap: 6px; }
  .plan-rate > span, .plan-price span { font-size: .8rem; }
  .contact-info > div { grid-template-columns: 65px minmax(0,1fr); }
}
