/* Robogold — websites, imagery and AI in one shared identity. */
html { scrollbar-gutter: stable; }
h1,h2,h3,p { overflow-wrap: break-word; }
.card p,.step p,.industry-panel p,.industry-panel li { font-size: 1rem; }
.expansion-hero { padding: 88px 0 60px; }
.expansion-hero .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 52px; }
.expansion-hero h1 { font-size: clamp(3rem,4.7vw,4.5rem); letter-spacing: -.065em; }
.expansion-hero .hero-copy .lead { max-width: 490px; }
.studio-board { position: relative; min-width: 0; min-height: 568px; padding: 5px 0 35px; }
.board-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.board-label .eyebrow { font-size: .62rem; letter-spacing: .12em; margin: 0; color: #b9b9bd; }
.board-counter { color: var(--orange); font-size: .7rem; font-variant-numeric: tabular-nums; }
.board-web { position: relative; width: 88%; margin-top: 18px; background: #eae6dd; border-radius: 12px; color: #302d25; overflow: hidden; box-shadow: 0 18px 50px #0006; }
.board-browser { height: 36px; display: flex; align-items: center; gap: 16px; padding: 0 13px; background: #252629; color: #c6c5c4; font-size: .6rem; }
.preview-dots { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.preview-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
.board-workspace { width: 100%; height: 247px; object-fit: cover; display: block; }
.board-web-copy { padding: 21px 23px 27px; }
.board-web-copy > span { display: block; font-size: .53rem; letter-spacing: .13em; color: #726c5f; margin-bottom: 7px; }
.board-web-copy strong { display: block; font-size: 2.2rem; letter-spacing: -.045em; font-weight: 550; line-height: 1.07; }
.board-product { position: absolute; right: 0; top: 230px; width: 49%; margin: 0; border: 5px solid #1b1b1c; border-radius: 12px; background: #1b1b1c; transform: rotate(5deg); box-shadow: 0 18px 45px #0008; }
.board-product img { display: block; width: 100%; height: auto; aspect-ratio: 1.15; object-fit: cover; border-radius: 7px; }
.board-product figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 8px 8px; font-size: .65rem; color: #e9e4dc; }
.board-product figcaption span { color: var(--orange); font-size: 1rem; }
.board-phone { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 82%; margin: 24px 0 0 4px; padding: 16px; background: #23201d; border: 1px solid #ff8a3d30; border-radius: 10px; box-shadow: 0 10px 24px #0004; }
.board-phone-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--orange); color: #151515; border-radius: 50%; font-size: 1.25rem; }
.board-phone strong { display: block; font-size: .8rem; font-weight: 550; }
.board-phone div > span { color: #b9afa5; font-size: .65rem; }
.board-note { color: var(--muted); font-size: .62rem; margin: 15px 0 0 4px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillar-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 34px 30px 25px; text-decoration: none; transition: background 180ms ease; }
.pillar-card:first-child { padding-left: 0; }
.pillar-card + .pillar-card { border-left: 1px solid var(--line); }
.pillar-card:hover { background: #ffffff03; }
.pillar-number { color: var(--muted); font-size: .62rem; letter-spacing: .11em; margin-bottom: 38px; }
.pillar-card > .icon { width: 28px; height: 28px; color: var(--orange); margin-bottom: 25px; }
.pillar-card h3 { font-size: clamp(1.4rem,2vw,1.9rem); font-weight: 550; margin-bottom: 17px; }
.pillar-card p { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.pillar-card .text-link { margin-top: auto; padding-top: 20px; font-size: .8rem; }
.audience-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.audience-panel { padding: 36px; border: 1px solid var(--line); border-radius: 16px; background: #151618; }
.audience-panel:nth-child(2) { background: #1c1916; border-color: #ff8a3d25; }
.audience-panel h3 { font-size: 2rem; font-weight: 550; }
.audience-panel p:not(.eyebrow) { color: var(--muted); font-size: 1rem; }
.audience-panel .eyebrow { font-size: .65rem; }
.audience-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.home-phone .split-section { align-items: center; gap: 80px; }
.home-phone h2 { font-size: clamp(2rem,3.15vw,3rem); }
.home-phone .button { margin-top: 15px; }
.home-phone .demo-controls .button { margin-top: 0; }
.creative-hero { padding-top: 40px; }
.creative-hero-grid { display: grid; grid-template-columns: .95fr 1.12fr; gap: 54px; align-items: center; }
.creative-hero-grid > * { min-width: 0; }
.creative-hero h1 { font-size: clamp(2.8rem,4.3vw,4.25rem); letter-spacing: -.06em; }
.creative-hero .lead { font-size: 1.08rem; }
.creative-hero .actions { gap: 10px; }
.creative-hero .actions .button { padding-inline: 17px; font-size: .83rem; }
.web-preview { width: 100%; overflow: hidden; border-radius: 14px; border: 1px solid #ffffff24; background: #202123; box-shadow: 0 24px 60px #0004; }
.preview-toolbar { min-height: 52px; padding: 5px 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .67rem; color: #c3c1bd; border-bottom: 1px solid #ffffff12; }
.preview-controls { margin-left: auto; display: flex; gap: 2px; }
.preview-controls button { background: transparent; color: #bbb7af; border: 1px solid transparent; border-radius: 5px; padding: 9px 10px; min-height: 44px; font-size: .66rem; }
.preview-controls button[aria-pressed="true"] { background: #ffffff0c; border-color: #ffffff20; color: #fff6eb; }
.preview-stage { padding: 18px; min-height: 394px; display: flex; align-items: flex-start; justify-content: center; background: #2a2b2b; }
.preview-viewport { width: 100%; max-width: 900px; color: #373e34; background: #edeee6; border-radius: 4px; overflow: hidden; transition: max-width 260ms ease; }
.concept-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 15px 18px; font-size: .47rem; color: #5e6658; border-bottom: 1px solid #34443120; }
.concept-wordmark { font-weight: 700; font-size: .65rem; white-space: nowrap; color: #343f2e; }
.concept-wordmark span { color: #899479; }
.concept-contact { font-size: .49rem; white-space: nowrap; border-bottom: 1px solid #889380; padding-bottom: 3px; }
.concept-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 25px 18px 18px; }
.concept-kicker { display: block; font-size: .38rem; letter-spacing: .11em; margin-bottom: 15px; color: #657358; }
.concept-hero .concept-title { font-size: 2rem; line-height: 1.02; letter-spacing: -.06em; margin-bottom: 15px; font-weight: 500; }
.concept-hero p { font-size: .58rem; line-height: 1.65; color: #626c5b; }
.concept-button { display: inline-block; margin-top: 5px; font-size: .46rem; padding: 9px 10px; background: #546446; color: #fff; border-radius: 2px; }
.concept-photo { width: 100%; height: 220px; object-fit: cover; border-radius: 80px 80px 2px 2px; object-position: 52%; }
.concept-bottom { display: flex; justify-content: space-between; gap: 10px; padding: 17px 18px; font-size: .45rem; color: #616b58; border-top: 1px solid #34443120; }
.preview-caption { color: #b2b0ad; font-size: .65rem; margin: 0; padding: 12px 14px; }
.web-preview.is-mobile .preview-viewport { max-width: 255px; border-radius: 14px; border: 5px solid #494c47; }
.web-preview.is-mobile .concept-nav-note { display: none; }
.web-preview.is-mobile .concept-nav { padding: 12px; }
.web-preview.is-mobile .concept-hero { grid-template-columns: 1fr; padding: 20px 14px; gap: 18px; }
.web-preview.is-mobile .concept-hero .concept-title { font-size: 2rem; }
.web-preview.is-mobile .concept-photo { height: 130px; border-radius: 4px; }
.web-preview.is-mobile .concept-bottom { flex-wrap: wrap; padding: 12px; }
.product-hero-figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #1b1b1b; }
.product-hero-figure img { display: block; width: 100%; aspect-ratio: 1.18; height: auto; object-fit: cover; }
.product-hero-figure figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-size: .65rem; color: #bbb7b1; }
.product-hero-figure figcaption > span { color: var(--ink); font-size: .8rem; }
.design-explainer { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.design-explainer p:not(.eyebrow) { color: #b8b8c0; max-width: 60ch; }
.scope-card { padding: 32px; border: 1px solid #ff8a3d30; border-radius: 14px; background: #1a1714; }
.scope-card h3 { font-size: 1.65rem; }
.scope-card .eyebrow { font-size: .65rem; margin-bottom: 20px; }
.scope-card .button { margin-top: 12px; }
.check-list { list-style: none; padding-left: 0; margin: 24px 0 0; color: #bebbc0; font-size: .94rem; }
.check-list li { position: relative; padding-left: 25px; margin-top: 14px; }
.check-list li::before { content: "↗"; position: absolute; left: 0; color: var(--orange); }
.scope-note { display: flex; align-items: flex-start; gap: 16px; padding: 24px 28px; border-left: 2px solid var(--orange); background: #ffffff04; }
.scope-note p { color: var(--muted); font-size: .94rem; margin: 0; }
.scope-note .icon { color: var(--orange); margin-top: 3px; }
.image-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.image-gallery figure { margin: 0; min-width: 0; }
.image-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.image-gallery figcaption { padding: 22px 0 0; }
.image-gallery figcaption strong { display: block; font-size: 1.08rem; font-weight: 500; margin-bottom: 7px; }
.image-gallery figcaption span { font-size: .94rem; color: var(--muted); }
.example-disclosure { max-width: 80ch; margin: 30px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.75; }
.interest-guidance { margin: -6px 0 24px; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.article-list:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
@media (max-width: 68rem) {
  .expansion-hero .hero-grid,.creative-hero-grid { gap: 32px; }
  .expansion-hero h1 { font-size: clamp(2.8rem,4.7vw,3.9rem); }
  .studio-board { min-height: 520px; }
  .board-workspace { height: 207px; }
  .board-product { top: 215px; }
  .board-web-copy strong { font-size: 1.8rem; }
  .board-phone { width: 90%; }
  .pillar-card { padding-inline: 20px; }
  .pillar-card .text-link { font-size: .74rem; }
  .creative-hero h1 { font-size: 3.25rem; }
  .creative-hero-grid { grid-template-columns: 1fr 1fr; }
  .preview-toolbar > .preview-dots { display: none; }
  .concept-nav-note { display: none; }
  .concept-hero { grid-template-columns: 1fr; padding-top: 20px; }
  .concept-photo { height: 130px; border-radius: 5px; }
  .concept-hero .concept-title { font-size: 1.7rem; }
  .concept-kicker { margin-bottom: 10px; }
  .design-explainer { gap: 40px; }
}
@media (max-width: 56.25rem) {
  .expansion-hero { padding-top: 52px; }
  .expansion-hero .hero-grid { grid-template-columns: 1fr; gap: 25px; }
  .expansion-hero .hero-copy { max-width: 650px; }
  .expansion-hero h1 { font-size: clamp(3.4rem,6.8vw,4.7rem); }
  .studio-board { width: 100%; max-width: 580px; justify-self: center; min-height: 590px; margin-top: 24px; }
  .board-workspace { height: 260px; }
  .board-product { top: 245px; }
  .board-web-copy strong { font-size: 2.1rem; }
  .board-phone { margin-top: 27px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-card,.pillar-card:first-child { padding: 30px 0; display: grid; grid-template-columns: 46px 1fr; gap: 0 18px; }
  .pillar-card + .pillar-card { border-left: 0; border-top: 1px solid var(--line); }
  .pillar-number { grid-column: 1/-1; margin-bottom: 24px; }
  .pillar-card > .icon { grid-column: 1; margin-top: 3px; }
  .pillar-card h3,.pillar-card p,.pillar-card .text-link { grid-column: 2; }
  .pillar-card p { max-width: 60ch; }
  .pillar-card .text-link { font-size: .85rem; padding-top: 2px; }
  .creative-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .creative-hero .hero-copy { max-width: 650px; }
  .creative-hero h1 { font-size: clamp(2.9rem,6.5vw,4.4rem); }
  .web-preview { max-width: 720px; justify-self: center; }
  .preview-stage { min-height: 390px; }
  .concept-hero { grid-template-columns: 1fr 1fr; padding: 30px 24px; }
  .concept-hero .concept-title { font-size: 2.8rem; }
  .concept-hero p { font-size: .8rem; }
  .concept-photo { height: 250px; border-radius: 100px 100px 2px 2px; }
  .concept-kicker,.concept-button,.concept-bottom { font-size: .56rem; }
  .web-preview.is-mobile .concept-hero p { font-size: .65rem; }
  .product-hero-figure { max-width: 640px; justify-self: center; }
  .home-phone .split-section { gap: 36px; }
}
@media (max-width: 43.75rem) {
  .expansion-hero h1 { font-size: clamp(2.75rem,8.3vw,3.8rem); }
  .studio-board { min-height: 530px; max-width: 500px; }
  .board-workspace { height: 216px; }
  .board-product { top: 220px; }
  .audience-grid,.design-explainer,.image-gallery,.article-list:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
  .audience-panel { padding: 28px; }
  .audience-panel h3 { font-size: 1.75rem; }
  .audience-links { flex-direction: column; align-items: flex-start; }
  .home-phone .assistant-card { justify-self: center; }
  .creative-hero { padding-top: 32px; }
  .creative-hero h1 { font-size: clamp(2.7rem,8.8vw,3.6rem); }
  .creative-hero .actions { align-items: stretch; }
  .creative-hero .actions .button { flex: 1 1 100%; }
  .scope-card { padding: 27px; }
  .scope-note { padding: 22px; gap: 12px; }
  .image-gallery { gap: 36px; }
  .preview-stage { padding: 12px; min-height: 370px; }
  .concept-hero { padding: 22px 14px; gap: 12px; }
  .concept-hero .concept-title { font-size: 2rem; }
  .concept-hero p { font-size: .62rem; }
  .concept-photo { height: 210px; }
  .concept-kicker,.concept-button,.concept-bottom { font-size: .44rem; }
}
@media (max-width: 28.75rem) {
  .studio-board { min-height: 464px; padding-bottom: 5px; }
  .board-label .eyebrow { font-size: .53rem; }
  .board-counter { font-size: .6rem; }
  .board-web { width: 89%; margin-top: 12px; }
  .board-browser { gap: 9px; font-size: .5rem; height: 30px; }
  .board-workspace { height: 165px; }
  .board-web-copy { padding: 16px 17px 22px; }
  .board-web-copy strong { font-size: 1.6rem; }
  .board-product { width: 49%; top: 190px; border-width: 4px; }
  .board-product figcaption { font-size: .51rem; line-height: 1.45; padding: 9px 5px 5px; }
  .board-phone { width: 95%; padding: 12px; gap: 10px; margin-top: 30px; }
  .board-phone strong { font-size: .7rem; }
  .board-phone div > span { font-size: .59rem; }
  .board-phone-icon { width: 29px; height: 29px; }
  .board-note { font-size: .57rem; }
  .pillar-card { gap: 0 8px; }
  .pillar-card h3 { font-size: 1.55rem; }
  .creative-hero h1 { font-size: clamp(2.5rem,10vw,3.3rem); }
  .preview-toolbar { padding-inline: 8px; gap: 5px; font-size: .6rem; }
  .preview-controls button { padding-inline: 8px; }
  .preview-stage { min-height: 325px; padding: 10px; }
  .concept-hero { grid-template-columns: 1fr; padding: 18px 13px; gap: 15px; }
  .concept-hero .concept-title { font-size: 1.8rem; }
  .concept-hero p { font-size: .65rem; }
  .concept-photo { height: 145px; border-radius: 4px; }
  .concept-bottom { gap: 5px; padding: 13px; font-size: .37rem; }
  .preview-caption { font-size: .58rem; }
  .product-hero-figure figcaption { flex-wrap: wrap; gap: 3px 12px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .preview-viewport { transition: none; }
}
@media print {
  .studio-board,.preview-controls { display: none; }
  .pillar-grid,.audience-grid,.image-gallery { grid-template-columns: 1fr; }
  .pillar-card,.audience-panel { break-inside: avoid; color: #111; background: transparent; }
}


/* Project check: native choices, deliberate progress and an editable inquiry. */
.project-check { scroll-margin-top: 90px; }
.quiz-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.quiz-intro { padding-top: 24px; }
.quiz-intro h2 { font-size: clamp(2rem,3.1vw,3rem); }
.quiz-intro > .text-link { margin-top: 14px; }
.quiz-card { min-width: 0; padding: 32px; border: 1px solid rgba(255,138,61,.24); border-radius: 22px; background: linear-gradient(150deg,rgba(255,138,61,.045),transparent 42%),var(--surface); scroll-margin-top: 104px; }
.quiz-progress-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.quiz-progress-head .eyebrow { margin: 0; }
.quiz-counter { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.quiz-progress { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 20px 0 32px; }
.quiz-progress li { border-top: 3px solid #34353d; padding-top: 8px; color: var(--muted); font-size: .7rem; }
.quiz-progress li[aria-current="step"],.quiz-progress li.is-complete { border-color: var(--orange); }
.quiz-progress li[aria-current="step"] { color: var(--ink); font-weight: 650; }
.quiz-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-card legend,.quiz-card [data-quiz-result-title] { padding: 0; margin: 0 0 12px; font-size: clamp(1.35rem,2vw,1.75rem); line-height: 1.3; font-weight: 600; letter-spacing: -.035em; width: 100%; }
.quiz-help { color: var(--muted); font-size: .88rem; line-height: 1.65; margin-bottom: 20px; }
.quiz-choices { display: grid; gap: 10px; }
.quiz-option { display: flex; align-items: flex-start; gap: 13px; min-height: 58px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 9px; background: #101114; cursor: pointer; transition: border-color 160ms ease,background 160ms ease; }
.quiz-option:hover { border-color: rgba(255,138,61,.6); }
.quiz-option:has(input:checked) { border-color: var(--orange); background: rgba(255,138,61,.065); }
.quiz-option:has(input:focus-visible) { outline: 2px solid var(--orange-light); outline-offset: 3px; }
.quiz-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--orange); }
.quiz-option strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.5; }
.quiz-option span > span { display: block; color: var(--muted); font-size: .77rem; line-height: 1.6; margin-top: 3px; }
.quiz-controls { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; }
.quiz-controls [data-quiz-next] { margin-left: auto; min-width: 125px; }
.quiz-error { color: #ffc7aa; padding: 12px 14px; border-left: 3px solid var(--orange); margin: 18px 0 0; background: rgba(255,138,61,.06); font-size: .87rem; }
.quiz-notes-label { display: block; margin-top: 24px; font-size: .87rem; color: var(--ink); }
.quiz-notes-label > span { color: var(--muted); }
.quiz-notes-label textarea { display: block; width: 100%; margin-top: 10px; padding: 13px; min-height: 110px; resize: vertical; background: #101114; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font-size: .88rem; line-height: 1.6; }
.quiz-notes-label textarea::placeholder { color: #94949f; }
.quiz-summary { margin: 18px 0 8px; }
.quiz-summary > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.quiz-summary dt { font-size: .72rem; color: var(--muted); margin-bottom: 3px; }
.quiz-summary dd { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.quiz-edit { background: none; border: 0; color: var(--orange-light); text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; min-height: 44px; margin-bottom: 12px; font-size: .85rem; }
.quiz-card .contact-form { padding: 0; background: none; border: 0; border-radius: 0; }
.quiz-card .contact-form > .button { width: 100%; }
.quiz-card [data-download-request] { margin-top: 10px; }
.quiz-card .form-row { grid-template-columns: 1fr; gap: 0; }
.quiz-privacy { font-size: .72rem; color: var(--muted); padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--line); }
.quiz-fallback { padding: 28px; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); }
@media(max-width: 900px) { .quiz-layout { grid-template-columns: 1fr; gap: 30px; } .quiz-intro { max-width: 630px; } }
@media(max-width: 460px) { .quiz-card { padding: 22px 18px; border-radius: 16px; } .quiz-progress { gap: 6px; } .quiz-progress li { font-size: .62rem; } .quiz-option { padding: 13px; gap: 11px; } .quiz-controls { gap: 8px; } .quiz-controls .button { padding-inline: 14px; min-width: 0; } }
@media(prefers-reduced-motion:reduce) { .quiz-option { transition: none; } }