/* Company pages (About, Team, Careers, Our work, News, Contact, founder profile).
   Fixes scoped by body[data-area=company], so shared templates.css stays untouched. */

/* FAQs and open roles run the full width of the page; the +/− sits at the end of the row. */
[data-area=company] .detail-faq summary{max-width:none;align-items:baseline}
[data-area=company] .detail-faq summary:after{flex-shrink:0}

/* Careers: open roles as the same accordion rows as the FAQs. */
[data-area=company] .roles{margin-top:28px;border-top:1px solid var(--rule)}
[data-area=company] .roles .role{border-bottom:1px solid var(--rule);padding:0}
[data-area=company] .roles .role>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:none;padding:22px 0;min-height:44px;cursor:pointer}
[data-area=company] .roles .role>summary::-webkit-details-marker{display:none}
[data-area=company] .roles .role>summary h3{margin:0;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.02em}
[data-area=company] .roles .faq-icon:after{content:"+";display:block;font:16px 'IBM Plex Mono',monospace;color:var(--accent);transition:transform 200ms var(--ease-out,ease)}
[data-area=company] .roles .role[open] .faq-icon:after{transform:rotate(45deg)}
[data-area=company] .roles .faq-a{padding:0 0 26px}
[data-area=company] .roles .faq-a .detail-chips{margin:16px 0}

/* Founder block on About: text beside the portrait, not a half-page away. */
@media(min-width:801px){[data-area=company] .detail-split.split--profile{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:center}}

/* Numbered steps: the number lines up with the step title. */
[data-area=company] .detail-steps li:before{top:.55em}

/* Our work: brands by year as compact rows of tags, not one name per line. */
[data-area=company] .brand-years{display:grid;margin-top:28px}
[data-area=company] .brand-year{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 32px;align-items:start;padding:18px 0;border-top:1px solid var(--rule)}
[data-area=company] .brand-year h3{margin:2px 0 0;font:400 20px/1.3 'Space Grotesk',sans-serif;color:var(--heading)}
[data-area=company] .brand-year .detail-chips{margin:0;gap:8px}
[data-area=company] .brand-year .detail-chips li{max-width:none}
@media(max-width:800px){[data-area=company] .brand-year{grid-template-columns:1fr;gap:10px}}

/* Four related cards: one row of four instead of three plus an orphan. */
@media(min-width:1001px){[data-area=company] .detail-grid:has(>article:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* News: "Descriptions to use" stacks label over text, so the text gets the full width. */
[data-area=company] dl.facts--stacked{grid-template-columns:1fr;gap:0}
[data-area=company] dl.facts--stacked dt{color:var(--heading);margin-top:14px}
[data-area=company] dl.facts--stacked dd{margin:2px 0 0}

/* Links inside running text are underlined, so they read as links. */
[data-area=company] .detail-main p a:not([class]){text-decoration:underline;text-decoration-color:#97d4f966;text-underline-offset:4px}
[data-area=company] .detail-main p a:not([class]):hover{text-decoration-color:currentColor}

/* Phone spacing: contact details clear the form; founder photo clears the link above it. */
@media(max-width:800px){
 [data-area=company] .contact-aside{margin-top:32px;padding-top:28px;border-top:1px solid var(--rule)}
 [data-area=company] .detail-hero .detail-aside{margin-top:20px!important}
 [data-area=company] dl.facts{gap:8px 20px}
}

/* Portraits are 400px files: show them at 200px at most, so they stay sharp on 2x screens. */
[data-area=company] .member{grid-template-columns:200px minmax(0,1fr)}
[data-area=company] .member-photo{width:200px;aspect-ratio:1}
@media(min-width:801px){[data-area=company] .detail-split.split--profile{grid-template-columns:200px minmax(0,1fr)}}
[data-area=company] .detail-main img.monogram--photo{max-width:200px}
@media(max-width:800px){[data-area=company] .member{grid-template-columns:1fr}}

/* Leadership cards on About: shorter card, photo fills the left edge top to bottom
   and fades into the card behind the text. */
[data-area=company] .team-members .member{display:block;padding:30px 40px 30px max(280px,30%);min-height:0;align-items:initial}
[data-area=company] .team-members .member-photo{position:absolute;inset:0 auto 0 0;width:min(42%,500px);aspect-ratio:auto;border-radius:0;z-index:-1;background:none;
 -webkit-mask-image:linear-gradient(90deg,#000 0,#000 34%,transparent 96%);mask-image:linear-gradient(90deg,#000 0,#000 34%,transparent 96%)}
[data-area=company] .team-members .member-photo img{object-position:50% 18%;filter:saturate(.85) brightness(.72) contrast(1.05)}
[data-area=company] .team-members .member-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d111b33,transparent 30%,#0d111bdd 88%),linear-gradient(0deg,#0b0d12aa,transparent 45%);pointer-events:none}
[data-area=company] .team-members .member-body{padding:0;position:relative;display:flex;flex-wrap:wrap;align-items:center;column-gap:28px}
[data-area=company] .team-members .member-body>*{flex:1 1 100%}
[data-area=company] .team-members .member-summary{margin-top:6px;max-width:none}
[data-area=company] .team-members .member-highlights{margin-top:12px;gap:4px;max-width:72ch}
[data-area=company] .team-members .member-highlights li{line-height:1.55}
/* Focus tags and links share one row. */
[data-area=company] .team-members .member-focus,[data-area=company] .team-members .member-links{flex:0 1 auto;margin-top:18px}
@media(max-width:800px){
 [data-area=company] .team-members .member{padding:200px 20px 24px}
 [data-area=company] .team-members .member-photo{inset:0 0 auto 0;width:auto;height:280px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 40%,transparent 100%)}
 [data-area=company] .team-members .member-photo:after{background:linear-gradient(0deg,#0d111b,transparent 60%)}
}

/* ---- Contact form revamp (30 Oct): guide on the left, the form in a framed card on the right.
   Three numbered steps, grouped topic chips, inline errors, and a thank-you panel after sending. */
[data-area=company] .contact-block{padding-top:clamp(40px,5vw,72px)}
[data-area=company] .contact-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(40px,6vw,96px);align-items:start}
[data-area=company] .contact-guide{position:sticky;top:120px}
[data-area=company] .contact-guide>h2{font-size:clamp(26px,2.3vw,34px);line-height:1.18;max-width:18ch;margin:14px 0 32px}
[data-area=company] .contact-next{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:22px}
[data-area=company] .contact-next li{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start}
[data-area=company] .contact-next-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);color:var(--landing-ice);font:12px 'IBM Plex Mono',monospace}
[data-area=company] .contact-next h3{font-size:16px;margin:4px 0 4px;letter-spacing:-.01em}
[data-area=company] .contact-next p{margin:0;font-size:14px;line-height:1.6}
[data-area=company] .contact-guide .contact-aside{border-top:1px solid var(--rule);padding-top:28px;margin:0}
[data-area=company] .contact-guide .contact-aside h2{font-size:15px!important;margin:22px 0 6px!important;color:var(--heading)}
[data-area=company] .contact-guide .contact-aside h2:first-child{margin-top:0!important}
[data-area=company] .contact-guide .contact-aside p{margin:0;font-size:14px;line-height:1.6}

/* The card */
[data-area=company] .contact-card{position:relative;border:1px solid var(--rule);border-radius:24px;padding:clamp(24px,3.2vw,44px);background:linear-gradient(180deg,#0d1824 0%,#0a121b 100%);box-shadow:0 30px 80px -40px #0066ff40,inset 0 1px 0 #96e4ff12}
[data-area=company] .contact-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,#58c8ff66,transparent 32%,transparent 70%,#0066ff55);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
[data-area=company] .contact-card .form{margin:0}
[data-area=company] .form-step{border:0;margin:0;padding:0 0 30px;min-width:0}
[data-area=company] .form-step+.form-step{border-top:1px solid #329fff1f;padding-top:28px}
[data-area=company] .form-step>legend{float:left;width:100%;display:flex;align-items:center;gap:12px;padding:0;margin:0 0 18px;font-size:17px;color:var(--heading);letter-spacing:-.01em}
[data-area=company] .form-step>legend+*{clear:both}
[data-area=company] .step-n{font:12px 'IBM Plex Mono',monospace;color:var(--accent);letter-spacing:.04em}

/* Topic: one grouped dropdown (native select + optgroups), styled like the fields */
[data-area=company] .select-wrap{position:relative}
[data-area=company] .select-wrap::after{content:"";position:absolute;right:18px;top:calc(50% - 9px);width:18px;height:18px;background:var(--landing-ice);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
[data-area=company] .contact-card select{-webkit-appearance:none;appearance:none;width:100%;min-height:56px;padding:0 52px 0 18px;border:1px solid #329fff33;border-radius:12px;background:#07101a;color:#e6f5ff;font:15px/1.5 Inter,Arial,sans-serif;cursor:pointer;transition:border-color 160ms,box-shadow 160ms,background 160ms}
[data-area=company] .contact-card select.is-empty{color:#7ac1ef99}
[data-area=company] .contact-card select:hover{border-color:#58c8ff66}
[data-area=company] .contact-card select:focus{outline:0;border-color:var(--accent);background:#0a1622;box-shadow:0 0 0 4px #58c8ff24}
[data-area=company] .contact-card select[aria-invalid=true]{border-color:#ff8a8a99}
[data-area=company] .contact-card select :is(option,optgroup){background:#0d1824;color:#e6f5ff}
[data-area=company] .contact-card select optgroup{color:#7ac1ef;font-style:normal}
[data-area=company] .enquiry-types .field{margin-bottom:0}
[data-area=company] .topic-hint{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:#329fff12;font-size:14px;line-height:1.55;color:var(--text)}

/* Fields */
[data-area=company] .contact-card .field-row{gap:16px}
[data-area=company] .contact-card .field{gap:8px;margin:0 0 16px}
[data-area=company] .contact-card .field label{font-size:13px;color:var(--text)}
[data-area=company] .contact-card .opt{margin-left:6px;font-size:12px;color:#7ac1ef99}
[data-area=company] .contact-card .field input,[data-area=company] .contact-card .field textarea{min-height:52px;padding:14px 16px;border:1px solid #329fff33;border-radius:12px;background:#07101a;color:#e6f5ff;font:15px/1.5 Inter,Arial,sans-serif;transition:border-color 160ms,box-shadow 160ms,background 160ms}
[data-area=company] .contact-card .field textarea{min-height:150px;resize:vertical}
[data-area=company] .contact-card .field :is(input,textarea)::placeholder{color:#7ac1ef66}
[data-area=company] .contact-card .field :is(input,textarea):hover{border-color:#58c8ff66}
[data-area=company] .contact-card .field :is(input,textarea):focus{outline:0;border-color:var(--accent);background:#0a1622;box-shadow:0 0 0 4px #58c8ff24}
[data-area=company] .contact-card .is-invalid :is(input,textarea),[data-area=company] .contact-card :is(input,textarea)[aria-invalid=true]{border-color:#ff8a8a99}
[data-area=company] .field-error{margin:2px 0 0;font-size:13px!important;line-height:1.4;color:#ffb3b3!important}
[data-area=company] .field-foot{display:flex;justify-content:space-between;gap:12px;min-height:18px}
[data-area=company] .field-count{margin-left:auto;font:11px 'IBM Plex Mono',monospace;color:#7ac1ef80}

/* Submit row: the landing pill (from subpages.css) with the privacy line beside it */
[data-area=company] .form-submit{display:flex;align-items:center;gap:20px 28px;flex-wrap:wrap;padding-top:6px}
[data-area=company] .form-submit .form-note{margin:0;max-width:34ch;line-height:1.5;color:#7ac1efb0}
[data-area=company] .contact-card .form-status:not(:empty){margin:18px 0 0;padding:12px 16px;border-radius:12px;background:#329fff12}

/* Thank-you panel */
[data-area=company] .form-done{text-align:center;padding:40px 8px 24px}
[data-area=company] .form-done:focus{outline:0}
[data-area=company] .form-done-mark{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 22px;border-radius:50%;background:#c9f2ff;box-shadow:0 0 0 10px #58c8ff14;animation:contact-pop 520ms var(--ease-out) both}
[data-area=company] .form-done-mark::after{content:"";width:28px;height:28px;background:#101923;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
[data-area=company] .form-done h2{font-size:clamp(24px,2.2vw,30px);margin:0 auto 10px;max-width:22ch}
[data-area=company] .form-done p{margin:0 auto 26px;max-width:42ch}
@keyframes contact-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-area=company] .form-done-mark{animation:none}[data-area=company] .contact-card *{transition:none!important}}

@media(max-width:900px){
 [data-area=company] .contact-layout{grid-template-columns:1fr;gap:36px}
 [data-area=company] .contact-guide{position:static;order:2}
 [data-area=company] .contact-card{order:1}
 [data-area=company] .contact-guide .contact-aside{margin-top:0;padding-top:28px}
}
@media(max-width:600px){
 [data-area=company] .contact-card{margin:0 -4px;border-radius:20px;padding:22px 18px}
 [data-area=company] .contact-card .field-row{grid-template-columns:1fr;gap:0}
 [data-area=company] .contact-card .field input{font-size:16px}
 [data-area=company] .form-submit{flex-direction:column;align-items:stretch}
 [data-area=company] .form-submit .btn-primary{width:100%}
 [data-area=company] .form-submit .form-note{max-width:none}
}

/* Topic picker (built by site.js over the native select): button styled like the fields, list as a dark rounded panel. */
[data-area=company] .select-wrap.has-picker select{position:absolute;inset:0;opacity:0;pointer-events:none}
[data-area=company] .select-wrap.has-picker::after{transition:transform 200ms var(--ease-out)}
[data-area=company] .select-wrap.is-open::after{transform:rotate(180deg)}
[data-area=company] .picker-button{display:flex;align-items:center;width:100%;min-height:56px;padding:0 52px 0 18px;border:1px solid #329fff33;border-radius:12px;background:#07101a;color:#e6f5ff;font:15px/1.5 Inter,Arial,sans-serif;text-align:left;cursor:pointer;transition:border-color 160ms,box-shadow 160ms,background 160ms}
[data-area=company] .picker-button.is-empty{color:#7ac1ef99}
[data-area=company] .picker-button:hover{border-color:#58c8ff66}
[data-area=company] .picker-button:focus-visible,[data-area=company] .is-open .picker-button{outline:0;border-color:var(--accent);background:#0a1622;box-shadow:0 0 0 4px #58c8ff24}
[data-area=company] .picker-button[aria-invalid=true]{border-color:#ff8a8a99}
[data-area=company] .picker-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);max-height:min(380px,60vh);overflow:auto;overscroll-behavior:contain;padding:8px;border:1px solid #329fff38;border-radius:16px;background:#0b1520;box-shadow:0 24px 60px -20px #000c,0 0 0 1px #96e4ff08 inset;animation:picker-in 180ms var(--ease-out)}
[data-area=company] .picker-list:focus{outline:0}
[data-area=company] .picker-group+.picker-group{margin-top:6px;padding-top:6px;border-top:1px solid #329fff1f}
[data-area=company] .picker-group-label{padding:10px 12px 6px;font:11px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
[data-area=company] .picker-option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 12px;border-radius:10px;color:var(--text);font-size:15px;cursor:pointer;transition:background 120ms,color 120ms}
[data-area=company] .picker-option.is-active{background:#329fff1f;color:#fff}
[data-area=company] .picker-option[aria-selected=true]{color:var(--landing-ice)}
[data-area=company] .picker-option[aria-selected=true]::after{content:"";width:16px;height:16px;flex-shrink:0;background:var(--landing-ice);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes picker-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-area=company] .picker-list{animation:none}}
@media(max-width:600px){[data-area=company] .picker-button{font-size:16px}}