/* About page foundation (preliminary, not visually approved). Page-scoped; reuses the Website Design page's
   approved body background, header and footer through body.website-design-marketing, and mirrors its hero
   typography values (website-design.css .lw-hero-copy h1 / p). Sections and artwork are intentionally open. */
.lw-about-hero { padding:72px 0 40px; }
.lw-about-hero .lw-about-copy { max-width:760px; }
.lw-about-hero h1 { margin:0 0 18px; color:#f4f7ff; font-size:clamp(44px,4.65vw,67px); line-height:1.08; letter-spacing:-.04em; text-wrap:balance; }
.lw-about-hero .lw-about-intro { margin:0 0 14px; max-width:68ch; font-size:17px; line-height:1.6; color:#b9cce1; }
.lw-about-hero .lw-about-intro:last-child { margin-bottom:0; }
.lw-about-hero .lw-about-intro strong { color:#f4f7ff; font-weight:700; }
.lw-about-sections { padding-bottom:24px; }
/* Section 2: typography-led editorial layout. Heading left with the short blue accent rule used on the Homepage
   service headings; copy right at a narrower measure behind the thin divider used in the Homepage "Our approach"
   section. No card or background of its own, so the page texture continues uninterrupted. */
.lw-about-section { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:0 64px; align-items:start; padding:88px 0 80px; }
.lw-about-section h2 { position:relative; margin:0; padding-top:30px; max-width:14ch; color:#f4f7ff; font-size:clamp(32px,3.1vw,46px); line-height:1.14; letter-spacing:-.03em; text-wrap:balance; }
.lw-about-section h2::before { content:""; position:absolute; left:0; top:0; width:42px; height:3px; background:#318aca; }
.lw-about-section-copy { position:relative; max-width:62ch; padding:36px 0 0 44px; }
.lw-about-section-copy::before { content:""; position:absolute; left:0; top:42px; bottom:6px; width:1px; background:#245473; }
.lw-about-section-copy p { margin:0 0 16px; font-size:17px; line-height:1.65; color:#b9cce1; }
.lw-about-section-copy p:last-child { margin-bottom:0; }
/* Section 3: same editorial split. Heading (with the shared accent rule) and intro left; three unnumbered
   assurances right, divided by fine hairlines in the Section 2 divider colour. */
.lw-about-expect { padding-top:16px; }
.lw-about-expect-intro p { margin:16px 0 0; max-width:46ch; font-size:17px; line-height:1.65; color:#b9cce1; }
.lw-about-expect-intro h2 + p { margin-top:22px; }
.lw-about-assurances { list-style:none; margin:0; padding:30px 0 0 44px; max-width:calc(58ch + 44px); }
.lw-about-assurances li { padding:20px 0; border-top:1px solid #245473; }
.lw-about-assurances li:last-child { border-bottom:1px solid #245473; }
.lw-about-assurances h3 { margin:0 0 6px; color:#f4f7ff; font-size:19px; line-height:1.3; letter-spacing:-.01em; }
.lw-about-assurances p { margin:0; font-size:16px; line-height:1.6; color:#b9cce1; }
@media (max-width:900px) {
  .lw-about-section { grid-template-columns:1fr; gap:20px 0; padding:64px 0 72px; }
  .lw-about-section-copy { padding:0; max-width:68ch; }
  .lw-about-section-copy::before { display:none; }
  .lw-about-expect { padding-top:8px; }
  .lw-about-expect-intro p { max-width:68ch; }
  .lw-about-assurances { padding:8px 0 0; max-width:68ch; }
}
@media (max-width:760px) {
  .lw-about-hero { padding:34px 0 28px; }
  .lw-about-hero h1 { margin-bottom:14px; }
  .lw-about-hero .lw-about-intro { font-size:16px; }
  .lw-about-section { padding:48px 0 56px; }
  .lw-about-section h2 { padding-top:24px; }
  .lw-about-section-copy p { font-size:16px; }
}
/* Section 4: a showcase of Lorenwick's own website (not client work) using genuine captures of the accepted Homepage.
   Shares the Section 2 heading and accent rule through .lw-about-section. Large framed desktop capture with the phone
   capture overlapping its lower corner; phones get the phone capture plus a legible desktop-menu detail instead of a
   shrunken desktop screenshot. Images not shown at a width are display:none and lazy, so they are never fetched. */
.lw-about-details { grid-template-columns:minmax(0,4fr) minmax(0,8fr); grid-template-areas:"intro show" "notes show"; grid-template-rows:auto 1fr; }
.lw-about-details-intro { grid-area:intro; }
.lw-about-provenance { margin:22px 0 0; max-width:40ch; font-size:17px; line-height:1.65; color:#b9cce1; }
.lw-about-notes { grid-area:notes; list-style:none; margin:40px 0 0; padding:0; max-width:46ch; }
.lw-about-notes li { padding:18px 0; border-top:1px solid #245473; }
.lw-about-notes li:last-child { border-bottom:1px solid #245473; }
.lw-about-notes h3 { margin:0 0 6px; color:#f4f7ff; font-size:18px; line-height:1.3; letter-spacing:-.01em; }
.lw-about-notes p { margin:0; font-size:16px; line-height:1.6; color:#b9cce1; }
.lw-about-showcase { grid-area:show; align-self:center; margin:0; padding-top:30px; }
.lw-about-stage { position:relative; isolation:isolate; padding:0 16% 8% 0; }
.lw-about-stage::before { content:""; position:absolute; z-index:-1; inset:-6% -4% -4% -6%; background:radial-gradient(ellipse at 46% 52%,rgba(49,138,202,.16),transparent 64%); pointer-events:none; }
.lw-about-frame img { display:block; width:100%; height:auto; }
.lw-about-frame-desktop { overflow:hidden; border:1px solid #24598b; border-radius:12px; background:#04101b; box-shadow:0 40px 80px -32px rgba(0,0,0,.8); }
.lw-about-frame-mobile { position:absolute; right:0; bottom:0; width:22%; padding:5px; border:1px solid #2f6a95; border-radius:24px; background:#06111d; box-shadow:0 28px 56px -14px rgba(0,0,0,.75); }
.lw-about-frame-mobile img { border-radius:18px; }
.lw-about-frame-detail { display:none; }
.lw-about-showcase figcaption { max-width:calc(78% - 24px); margin-top:calc(16px - 8%); font-size:13px; line-height:1.5; letter-spacing:.01em; color:#9db3ca; }
@media (max-width:1023px) {
  .lw-about-details { grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "show" "notes"; grid-template-rows:auto; gap:0; }
  .lw-about-provenance { max-width:62ch; }
  .lw-about-showcase { align-self:auto; padding-top:40px; }
  .lw-about-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px; max-width:none; margin-top:48px; }
  .lw-about-notes li, .lw-about-notes li:last-child { border-bottom:0; padding:18px 0 0; }
}
@media (max-width:759px) {
  .lw-about-notes { grid-template-columns:minmax(0,1fr); max-width:68ch; margin-top:40px; }
  .lw-about-notes li { padding:18px 0; }
  .lw-about-notes li:last-child { border-bottom:1px solid #245473; }
  .lw-about-provenance { font-size:16px; }
}
@media (max-width:599px) {
  .lw-about-stage { padding:0; }
  .lw-about-stage::before { inset:0 max(-8%, calc((100% - 100vw) / 2)) 30%; }
  .lw-about-frame-desktop { display:none; }
  .lw-about-frame-mobile { position:static; width:min(280px,78%); margin:0 auto; }
  .lw-about-frame-detail { display:block; margin-top:24px; overflow:hidden; border:1px solid #24598b; border-radius:10px; background:#04101b; }
  .lw-about-showcase { padding-top:32px; }
  .lw-about-showcase figcaption { max-width:none; margin-top:14px; }
}
/* Robot Ambassador artwork (DRAFT, pending owner acceptance). The images carry their own transparent, navy-toned
   edges, so no CSS mask, frame or cut-out is needed: they dissolve into the continuous page texture. */
.lw-about-hero-art, .lw-about-ai-art { margin:0; }
.lw-about-hero-art img, .lw-about-ai-art img { display:block; width:100%; height:auto; }
/* Hero: approved heading and introduction left, seated robot right. The copy keeps its 760px measure. */
.lw-about-hero-with-art .container { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:0 40px; align-items:center; }
.lw-about-hero-with-art .lw-about-hero-art { justify-self:end; width:100%; max-width:540px; margin-right:-12px; }   /* 1080px source: never enlarged on 2x screens */
/* Section 5: standing robot left, technology philosophy right (text first in reading order). */
.lw-about-ai { align-items:center; }
.lw-about-ai-copy { grid-column:2; grid-row:1; }
.lw-about-ai-art { grid-column:1; grid-row:1; justify-self:end; width:100%; max-width:460px; }
.lw-about-ai-copy p { margin:0 0 16px; max-width:56ch; font-size:17px; line-height:1.65; color:#b9cce1; }
.lw-about-ai-copy h2 + p { margin-top:26px; }
.lw-about-ai-copy p:last-child { margin-bottom:0; }
@media (max-width:1023px) {
  .lw-about-hero-with-art .container { grid-template-columns:minmax(0,1fr); }
  .lw-about-hero-with-art .lw-about-hero-art { justify-self:start; max-width:540px; margin:28px 0 0 -8px; }
}
@media (max-width:900px) {
  .lw-about-ai-copy { grid-column:1; grid-row:1; }
  .lw-about-ai-art { grid-column:1; grid-row:2; justify-self:start; max-width:400px; margin-top:28px; }
}
@media (max-width:760px) {
  .lw-about-ai-copy p { font-size:16px; }
  .lw-about-hero-with-art .lw-about-hero-art { max-width:min(360px,100%); margin-top:20px; }   /* 3x phones: 360 x 3 = 1080 */
  .lw-about-ai-art { max-width:min(340px,100%); margin-left:-6px; }
}
/* ===== Text presentation and rhythm (candidate pending owner review) =====
   Open editorial base shared by both layout variants: no per-section text windows. */
/* Hero: a comfortable measure; the closing statement stays on one line where it fits. */
.lw-about-hero-with-art .lw-about-copy { max-width:700px; }
.lw-about-hero-with-art .lw-about-intro { max-width:60ch; }
.lw-about-hero-with-art .lw-about-intro:last-child { max-width:none; }
.lw-about-hero-with-art .lw-about-intro strong { white-space:nowrap; }   /* keep the closing emphasis together */
/* Section rhythm: slightly tighter, consistent spacing between sections. */
.lw-about-section { padding:80px 0 64px; }
.lw-about-expect { padding-top:12px; }
/* Section 2: avoid a single-word final line (e.g. "touch." at 1440); ignored by browsers without text-wrap:pretty. */
.lw-about-section-copy p { text-wrap:pretty; }
/* Section 6: closing invitation, an open centred composition. */
.lw-about-close { padding:56px 0 104px; }
.lw-about-close-window { max-width:820px; margin:0 auto; text-align:center; }
.lw-about-close h2 { position:relative; margin:0 auto; padding-top:30px; max-width:18ch; color:#f4f7ff; font-size:clamp(32px,3.3vw,48px); line-height:1.12; letter-spacing:-.03em; text-wrap:balance; }
.lw-about-close h2::before { content:""; position:absolute; left:50%; top:0; width:42px; height:3px; margin-left:-21px; background:#318aca; }
.lw-about-close-window > p { margin:18px auto 0; max-width:54ch; font-size:17px; line-height:1.65; color:#b9cce1; }
.lw-about-close h2 + p { margin-top:24px; }
.lw-about-close-actions { display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:34px; }
.lw-about-close-email { margin:0; font-size:15px; line-height:1.5; color:#9db3ca; }
.lw-about-close-email a { color:#8ccaff; text-underline-offset:3px; }
.lw-about-close-email a:hover { color:#bfe1ff; }
@media (max-width:1023px) {
  .lw-about-hero-with-art .lw-about-copy { max-width:none; }
  .lw-about-hero-with-art .lw-about-intro { max-width:64ch; }
}
@media (max-width:900px) {
  .lw-about-section { padding:64px 0 56px; }
}
@media (max-width:760px) {
  .lw-about-section { padding:48px 0 48px; }
  .lw-about-close { padding:40px 0 72px; }
  .lw-about-close-window { text-align:left; }
  .lw-about-close h2 { margin:0; max-width:none; }
  .lw-about-close h2::before { left:0; margin-left:0; }
  .lw-about-close-window > p { margin-left:0; margin-right:0; font-size:16px; }
  .lw-about-close-actions { align-items:stretch; }
}
/* ===== Variant B: one continuous outlined composition (candidate pending owner selection) =====
   A single thin outline around all six sections. The page's own illuminated texture (painted once on <main>) runs
   continuously through the frame; inside, a light navy veil makes it slightly calmer. Hairline dividers between sections run the full interior width. */
.lw-about-canvas { --fp:clamp(28px,4.4vw,64px); position:relative; width:min(calc(100% - 2 * clamp(16px,7vw,120px)),1240px); margin:32px auto 80px; padding:0 var(--fp); border:1px solid rgba(122,170,218,.22); border-radius:4px; background:rgba(2,9,18,.36); }   /* veil over the SAME continuous page texture on <main>: calmer inside, no repaint */
.lw-about-canvas > .lw-about-hero > .container, .lw-about-canvas > .lw-about-sections { width:auto; max-width:none; margin-inline:0; }
.lw-about-canvas > .lw-about-hero { padding:64px 0 52px; }
.lw-about-canvas > .lw-about-sections { padding-bottom:0; }
.lw-about-canvas .lw-about-sections > section { margin-inline:calc(-1 * var(--fp)); padding-inline:var(--fp); border-top:1px solid rgba(118,166,214,.15); }
.lw-about-canvas .lw-about-close { padding-bottom:88px; }
@media (max-width:1023px) {
  .lw-about-canvas > .lw-about-hero { padding:48px 0 44px; }
}
@media (max-width:760px) {
  .lw-about-canvas { --fp:18px; width:calc(100% - 20px); margin:16px auto 48px; }
  .lw-about-canvas > .lw-about-hero { padding:32px 0 32px; }
  .lw-about-canvas .lw-about-close { padding-bottom:56px; }
}
@media (max-width:400px) {
  .lw-about-canvas { --fp:16px; width:calc(100% - 16px); }
}