/* Step 11 editorial pages: compact, product-led, and intentionally shared. */
.content-main { padding-bottom:72px; }
.content-breadcrumbs { display:flex; align-items:center; gap:11px; padding-top:19px; color:var(--muted); font-size:12px; }
.content-breadcrumbs a { min-height:32px; display:inline-flex; align-items:center; }
.content-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.8fr); align-items:center; gap:64px; padding:38px 0 54px; }
.content-hero-copy { max-width:650px; }
.content-hero .eyebrow { margin:0 0 10px; font-size:10px; }
.content-hero h1 { color:var(--berry); font:600 clamp(45px,5.2vw,68px)/1.05 var(--display); letter-spacing:-1.8px; margin:0 0 20px; }
.content-lede { color:var(--cocoa); font:500 clamp(19px,2vw,25px)/1.45 var(--display); margin:0 0 18px; }
.content-hero-copy > p:not(.eyebrow):not(.content-lede) { color:var(--muted); font-size:13px; line-height:1.75; max-width:600px; }
.content-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:27px; }
.content-actions .button { min-height:48px; font-size:12px; }
.about-collage { position:relative; min-height:405px; }
.about-photo { position:absolute; overflow:hidden; border:10px solid var(--white); outline:1px solid var(--line); background:var(--soft-pink); box-shadow:8px 10px 0 rgba(232,119,158,.1); }
.about-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.about-photo:first-child { width:55%; aspect-ratio:3/4; left:4%; top:5px; transform:rotate(-4deg); }
.about-photo:nth-child(2) { width:48%; aspect-ratio:3/4; right:3%; bottom:0; transform:rotate(5deg); }
.about-collage > span { position:absolute; right:7%; top:0; width:92px; height:35px; display:grid; place-items:center; background:var(--butter); color:var(--berry); font:600 12px var(--display); transform:rotate(7deg); z-index:2; }
.about-experience { display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:center; padding:45px 48px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,var(--lavender),var(--cream)); }
.about-experience h2 { color:var(--berry); font:500 clamp(31px,4vw,44px)/1.15 var(--display); margin:0; }
.about-experience-copy { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.about-experience-copy article { background:rgba(255,255,255,.75); padding:25px; border-radius:18px; }
.about-experience-copy h3 { font:600 22px/1.2 var(--display); color:var(--berry); margin:0 0 10px; }
.about-experience-copy p { color:var(--muted); font-size:12px; line-height:1.7; margin:0; }
.contact-hero { grid-template-columns:minmax(0,.76fr) minmax(430px,1.04fr); align-items:start; }
.contact-aside { padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--lavender); }
.contact-aside img { width:82px; height:82px; float:right; transform:rotate(8deg); }
.contact-aside h2 { color:var(--berry); font:500 28px/1.2 var(--display); margin:0 0 12px; }
.contact-aside p { color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 14px; }
.contact-aside a { font-weight:800; color:var(--berry); }
.contact-form-card { padding:36px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); box-shadow:8px 10px 0 rgba(232,119,158,.08); }
.contact-form-card h2 { font:500 31px/1.2 var(--display); color:var(--berry); margin:0 0 8px; }
.contact-preview-note { display:flex; gap:10px; margin:0 0 25px; padding:11px 14px; border-radius:12px; background:var(--butter); color:var(--berry); font-size:11px; line-height:1.55; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-field { min-width:0; }
.contact-field.full { grid-column:1 / -1; }
.contact-field label { display:block; font-size:12px; font-weight:800; margin:0 0 7px; color:var(--cocoa); }
.contact-field label span { color:var(--muted); font-weight:400; }
.contact-field input,.contact-field select,.contact-field textarea { width:100%; border:1px solid var(--line); border-radius:12px; background:var(--cream); color:var(--cocoa); padding:13px 14px; font:inherit; }
.contact-field textarea { min-height:130px; resize:vertical; }
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus { outline:3px solid rgba(232,119,158,.28); border-color:var(--strawberry); }
.contact-form-card .field-error { min-height:18px; margin:5px 0 0; }
.contact-form-card > .button { margin-top:20px; }
.contact-privacy { color:var(--muted); font-size:10px; line-height:1.6; margin:13px 0 0; }
.contact-privacy a { color:var(--berry); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.contact-confirmation { margin-top:23px; padding:20px; border-radius:16px; background:var(--soft-pink); color:var(--berry); }
.contact-confirmation:empty { display:none; }
.contact-confirmation h3 { font:600 22px/1.2 var(--display); margin:0 0 7px; }
.contact-confirmation p { font-size:12px; line-height:1.7; margin:0; }
.faq-header { display:flex; justify-content:space-between; align-items:end; gap:50px; padding:35px 0 28px; }
.faq-header h1 { color:var(--berry); font:600 clamp(45px,5.2vw,66px)/1.05 var(--display); letter-spacing:-1.8px; margin:0; }
.faq-header p { color:var(--muted); font-size:13px; line-height:1.7; max-width:490px; margin:0; }
.faq-categories { display:flex; flex-wrap:wrap; gap:8px; padding:21px 0 28px; border-top:1px solid var(--line); }
.faq-categories button { min-height:44px; padding:10px 19px; border:1px solid var(--line); border-radius:var(--pill); background:var(--white); color:var(--muted); font-size:12px; font-weight:800; }
.faq-categories button[aria-pressed="true"] { background:var(--berry); border-color:var(--berry); color:var(--white); }
.faq-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:55px; align-items:start; }
.faq-side { position:sticky; top:25px; padding:25px; border-radius:18px; background:var(--butter); }
.faq-side img { width:72px; height:72px; float:right; transform:rotate(8deg); }
.faq-side h2 { clear:both; color:var(--berry); font:500 24px/1.2 var(--display); margin:18px 0 9px; }
.faq-side p { color:var(--muted); font-size:11px; line-height:1.65; }
.faq-side a { color:var(--berry); font-size:12px; font-weight:800; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item[hidden] { display:none; }
.faq-item h2 { margin:0; }
.faq-question { width:100%; min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:17px 5px; text-align:left; color:var(--cocoa); font:700 14px/1.45 var(--body); }
.faq-question i { width:26px; height:26px; position:relative; flex:none; border-radius:50%; background:var(--soft-pink); }
.faq-question i:before,.faq-question i:after { content:''; position:absolute; width:10px; height:2px; left:8px; top:12px; background:var(--berry); }
.faq-question i:after { transform:rotate(90deg); transition:transform var(--fast); }
.faq-question[aria-expanded="true"] i:after { transform:rotate(0); }
.faq-question:focus-visible { outline:3px solid var(--strawberry); outline-offset:4px; border-radius:8px; }
.faq-answer { padding:0 48px 23px 5px; color:var(--muted); font-size:12px; line-height:1.75; }
.faq-answer p { margin:0; }
.faq-answer a { color:var(--berry); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.faq-status { min-height:20px; margin:0 0 6px; color:var(--muted); font-size:11px; }
@media(max-width:899px) {
  .content-hero { gap:35px; grid-template-columns:1fr 330px; }
  .about-experience { grid-template-columns:1fr; gap:28px; }
  .contact-hero { grid-template-columns:1fr; }
  .contact-aside { order:2; }
  .faq-layout { grid-template-columns:170px 1fr; gap:30px; }
}
@media(max-width:599px) {
  .content-main { padding-bottom:43px; }
  .content-breadcrumbs { padding-top:11px; font-size:11px; }
  .content-hero { display:block; padding:23px 0 39px; }
  .content-hero h1 { font-size:45px; }
  .content-lede { font-size:20px; }
  .content-actions { display:grid; }
  .content-actions .button { width:100%; }
  .about-collage { min-height:315px; margin-top:35px; }
  .about-experience { padding:28px 21px; }
  .about-experience-copy { grid-template-columns:1fr; }
  .contact-form-card { padding:26px 19px; margin-top:28px; }
  .contact-fields { grid-template-columns:1fr; gap:12px; }
  .contact-field.full { grid-column:auto; }
  .contact-form-card > .button { width:100%; }
  .contact-aside { margin-top:22px; padding:24px 20px; }
  .faq-header { display:block; padding:23px 0 23px; }
  .faq-header h1 { font-size:45px; margin-bottom:16px; }
  .faq-categories { gap:6px; padding:17px 0 23px; }
  .faq-categories button { flex:1 1 calc(50% - 6px); padding-inline:9px; }
  .faq-layout { display:block; }
  .faq-side { position:relative; top:auto; margin-bottom:27px; }
  .faq-question { min-height:68px; font-size:13px; }
  .faq-answer { padding-right:32px; }
}
@media(prefers-reduced-motion:reduce) { .faq-question i:after { transition:none; } }