/* Interior page components. Tokens, navigation, controls and section furniture live in css/shell.css */

/* brand stages: deep tints that hold a white screenshot */
.stage-plum{--stage:#1b0e15;--stage-glow:rgba(214,124,156,.22)}
.stage-green{--stage:#0c1811;--stage-glow:rgba(86,186,132,.2)}
.stage-rose{--stage:#1e0d16;--stage-glow:rgba(233,146,178,.2)}
.stage-ember{--stage:#1d1109;--stage-glow:rgba(226,138,72,.2)}
.stage-navy{--stage:#0b1220;--stage-glow:rgba(96,140,224,.22)}
.stage{background:radial-gradient(120% 90% at 50% 0,var(--stage-glow),transparent 62%),var(--stage);
  border:1px solid color-mix(in srgb,var(--stage-glow) 55%,var(--line));border-radius:calc(var(--r) - 4px);overflow:hidden}

/* browser plate */
.browser-frame{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.browser-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:26px;background-color:var(--bg2);
  border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle at 16px 13px,var(--mut) 2.5px,transparent 3.5px),radial-gradient(circle at 28px 13px,var(--mut) 2.5px,transparent 3.5px),radial-gradient(circle at 40px 13px,var(--mut) 2.5px,transparent 3.5px)}
.browser-frame img{width:100%;height:auto;display:block;margin-top:26px}
.floating-phone{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);width:clamp(104px,11vw,164px);height:auto;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 50px -28px rgba(0,0,0,.85);z-index:2}

/* page openings */
.page-head,.about-hero,.service-hero,.contact-layout,.case-heading{padding-top:clamp(52px,6vw,88px);padding-bottom:clamp(20px,2.4vw,36px)}
.page-head h1,.about-hero h1,.service-hero h1,.contact-copy h1,.case-heading h1,.home-hero h1{
  font-size:clamp(38px,6.4vw,92px);letter-spacing:-.045em;line-height:.98;max-width:20ch}
.page-head-bottom{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:end;margin-top:clamp(20px,2.4vw,32px)}
.page-head-bottom p:last-child{color:var(--mut);font-size:14px;margin-left:auto}
.page-head-bottom a{color:var(--acc);text-decoration:underline}
.page-head-bottom a:hover{color:var(--tx)}
.eyebrow + h1{margin-top:14px}
.work-gallery{padding-top:clamp(18px,2.2vw,34px)}

/* project tiles */
.work-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.8vw,28px);align-items:start}
.project-tile{grid-column:span 3;display:flex;flex-direction:column;gap:16px}
.project-tile.project-wide{grid-column:span 6}
/* the stage hugs the capture: a fixed ratio cropped client screenshots and left dead stage beneath them */
.project-visual{position:relative;display:block;padding:clamp(18px,2.4vw,40px)}
.project-visual:hover{text-decoration:none}
.project-open{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--tx);transition:background .2s,color .2s}
.project-visual:hover .project-open{background:var(--tx);color:var(--bg)}
.project-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:0 4px}
.project-caption h2,.project-caption h3{font-size:clamp(18px,1.5vw,24px);letter-spacing:-.02em}
.project-caption h2 a:hover,.project-caption h3 a:hover{color:var(--acc);text-decoration:none}
.project-caption p{color:var(--mut);font-size:14px;margin-top:4px}
.project-caption > span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap;padding-top:6px}

/* concept shelf */
.concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,28px)}
.concept-grid figure{margin:0;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:12px;transition:border-color .25s}
.concept-grid figure:hover{border-color:color-mix(in srgb,var(--tx) 34%,transparent)}
.concept-grid img{width:100%;height:auto;border-radius:12px}
.concept-grid figcaption{padding:14px 6px 4px}
.concept-grid h3{font-size:17px;letter-spacing:-.02em}
.concept-grid figcaption p{color:var(--mut);font-size:13px;margin-top:4px}
.concept-more{margin-top:clamp(20px,2.4vw,32px)}

/* shared section head */
.section-head{max-width:760px;margin-bottom:clamp(28px,3.4vw,48px)}
.section-head h2{margin:0 0 12px;font-size:clamp(28px,4.2vw,56px)}
.section-head p{color:var(--mut);font-size:clamp(15px,1.15vw,18px)}

/* services */
.service-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,72px);align-items:center}
.service-hero .lede{margin:22px 0 28px}
.service-demo{position:relative;padding:clamp(20px,2.6vw,44px) clamp(20px,2.6vw,44px) clamp(96px,10vw,150px)}
.service-demo > p{position:absolute;left:clamp(20px,2.6vw,44px);bottom:clamp(18px,2vw,28px);color:var(--mut);font-size:13px;line-height:1.5;max-width:calc(100% - clamp(124px,13vw,192px))}
.offerings{display:grid;gap:clamp(20px,2.4vw,34px)}
.offering{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,60px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:clamp(24px,2.8vw,44px)}
.offering h2{font-size:clamp(24px,2.8vw,38px);letter-spacing:-.035em}
.offering > div:first-child p{color:var(--mut);margin-top:14px;font-size:15px}
.offering h3{font-size:16px;font-weight:700;color:var(--acc);margin-bottom:12px;letter-spacing:-.01em}
.offering > div:last-child > p{color:var(--mut);font-size:16px}
.plain-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.plain-list li{position:relative;padding-left:22px;color:var(--tx);font-size:15px}
.plain-list li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:1px;background:var(--acc)}
.process{background:var(--bg2)}
.process-list{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,1.8vw,26px);margin:0;padding:0}
.process-list li{border-top:1px solid var(--line);padding-top:18px}
.process-list h3{font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.process-list p{color:var(--mut);font-size:14px;line-height:1.55}
.faq > div{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;cursor:pointer;font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:-.02em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:var(--acc);font-size:22px;font-weight:400;transition:transform .2s}
.faq details[open] summary span{transform:rotate(45deg)}
.faq details p{color:var(--mut);padding:0 4px 22px;max-width:70ch}

/* about */
.about-hero .about-hero-foot{display:flex;flex-wrap:wrap;gap:20px 48px;margin-top:clamp(28px,3.4vw,48px);align-items:end}
.about-hero-foot p{color:var(--mut);max-width:44ch}
.about-hero-foot p:last-child{margin-left:auto;color:var(--tx);font-weight:600}
.about-story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,72px);align-items:start}
.about-story h2{font-size:clamp(28px,4.2vw,56px)}
.about-story p{color:var(--mut);margin-bottom:16px}
.about-story .lede{color:var(--tx);font-size:clamp(17px,1.5vw,22px);line-height:1.5}
.about-story .text-link{margin-top:8px}
.world-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);padding:clamp(24px,3vw,44px) var(--gutter) 0}
.world-strip a{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:12px;transition:border-color .25s}
.world-strip a:hover{border-color:color-mix(in srgb,var(--tx) 34%,transparent);text-decoration:none}
.world-strip figure{margin:0}
.world-strip img{width:100%;height:clamp(220px,26vw,420px);object-fit:cover;border-radius:12px}
.world-strip figcaption{padding:14px 6px 4px;font-weight:700;letter-spacing:-.02em;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.world-strip figcaption span{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:13px;font-weight:500}
.beliefs{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,72px);align-items:start}
.beliefs h2{font-size:clamp(28px,4.2vw,56px)}
.beliefs .lede{margin-top:16px}
.beliefs h3{font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.beliefs h3:not(:first-child){margin-top:26px}
.beliefs div:last-child p{color:var(--mut);font-size:15px}

/* contact */
.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,72px);align-items:start}
.contact-copy .lede{margin:20px 0 26px}
.contact-email{display:inline-flex;align-items:center;gap:9px;font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--acc)}
.contact-email:hover{text-decoration:none;color:var(--tx)}
.contact-copy > p{color:var(--mut);margin-top:10px;font-size:15px}
.contact-proof{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0 18px}
.contact-proof a{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);padding:8px}
.contact-proof img{width:100%;height:auto;border-radius:8px}
.fine{color:var(--mut);font-size:13px;line-height:1.6}
.inquiry-panel{border:1px solid var(--line);border-radius:calc(var(--r) + 6px);background:var(--card);padding:clamp(24px,2.8vw,44px)}
.inquiry-panel > h2{font-size:clamp(22px,2.2vw,32px);letter-spacing:-.03em}
.inquiry-panel > p{color:var(--mut);font-size:15px;margin:12px 0 26px}
.inquiry-panel noscript p{color:var(--mut);font-size:14px;border:1px dashed var(--line);border-radius:12px;padding:14px;margin-bottom:20px}
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font-size:13px;font-weight:600;color:var(--mut)}
.field input,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg2);color:var(--tx);font:inherit;font-size:16px;transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--mut) 75%,transparent)}
.field input:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--tx) 30%,transparent)}
.field input:focus,.field textarea:focus{border-color:var(--acc);outline:none}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.inquiry-panel fieldset{border:0;margin:0 0 18px;padding:0}
.inquiry-panel legend{font-size:13px;font-weight:600;color:var(--mut);margin-bottom:10px}
.service-choices{display:flex;flex-wrap:wrap;gap:10px}
.service-choices label{position:relative;display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;
  background:var(--bg2);font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s,color .2s}
.service-choices label:has(input:checked){border-color:var(--acc);color:var(--tx);background:color-mix(in srgb,var(--acc) 14%,var(--bg2))}
.service-choices input{accent-color:var(--acc);margin:0}
.form-note{color:var(--mut);font-size:13px;margin-top:12px}
.email-preview{margin-top:26px;border:1px solid var(--line);border-radius:16px;background:var(--bg2);padding:22px}
.email-preview h3{font-size:17px;margin-bottom:12px}
.email-body{white-space:pre-wrap;font-size:15px;color:var(--tx);margin-bottom:18px}
.contact-next{background:var(--bg2)}
.contact-next .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(20px,4vw,72px);align-items:end}
.contact-next h2{font-size:clamp(24px,2.6vw,36px);margin-bottom:12px}
.contact-next p{color:var(--mut)}

/* case pages */
.case-heading-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,60px);align-items:end;margin-top:clamp(20px,2.4vw,36px)}
.case-meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);margin:clamp(30px,4vw,56px) 0 0;padding:0}
.case-meta > div{display:grid;gap:6px}
.case-meta dt{font-size:13px;font-weight:600;color:var(--mut)}
.case-meta dd{margin:0;font-weight:600}
.case-presentation{padding:clamp(20px,3vw,52px)}
.case-presentation-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(18px,2.6vw,44px);align-items:center;padding-inline:0}
/* no project photography for this client: two real captures share the band instead of a photo and a screen */
.case-presentation-pair{grid-template-columns:1fr 1fr}
.case-photo img{width:100%;height:clamp(260px,30vw,460px);object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.case-screen{padding:0}
.story-opening{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);align-items:start}
.story-opening h2{font-size:clamp(26px,3.4vw,46px)}
.story-opening h3{font-size:14px;font-weight:600;color:var(--mut);margin-bottom:12px}
.decision-section{background:var(--bg2)}
.decision-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:center}
.decision-grid h2{font-size:clamp(26px,3.4vw,46px);margin-bottom:16px}
.decision-grid p{color:var(--mut)}
.decision-grid figure{margin:0}
.decision-grid img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.decision-grid figcaption{color:var(--mut);font-size:13px;margin-top:12px}
.site-viewer{border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:var(--card);overflow:hidden}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg2);font-size:13px;color:var(--mut)}
.viewer-controls{display:flex;gap:6px}
.viewer-controls button{padding:7px 15px;border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:600;color:var(--mut);transition:color .2s,border-color .2s,background .2s}
.viewer-controls button[aria-pressed=true]{color:var(--bg);background:var(--tx);border-color:var(--tx)}
.viewer-canvas{padding:clamp(16px,2.4vw,36px)}
.viewer-canvas.stage{border:0;border-radius:0}
.viewer-canvas[data-surface] img,.viewer-canvas [data-surface] img{width:100%;height:auto;border-radius:12px}
.viewer-canvas [data-surface=mobile]{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:clamp(14px,2vw,26px);justify-content:center}
.viewer-caption{padding:14px 18px 16px;color:var(--mut);font-size:13px}
.case-result{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px);align-items:start;margin-top:clamp(28px,3.4vw,48px)}
.case-result h3{font-size:19px;margin-bottom:10px}
.case-result p{color:var(--mut);font-size:15px}
.next-project{background:var(--bg2)}
.next-project .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(40px,5vw,72px)}
.next-project p{color:var(--mut);font-size:14px;margin-bottom:10px}
.next-project h2{font-size:clamp(26px,3.4vw,46px);margin-bottom:22px}
.next-project > .wrap > a{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:10px;overflow:hidden}
.next-project img{width:100%;height:auto;border-radius:12px}

@media(max-width:1000px){
  .process-list{grid-template-columns:repeat(3,1fr)}
  .viewer-canvas [data-surface=mobile]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .work-gallery,.concept-grid,.world-strip{grid-template-columns:repeat(2,1fr)}
  .project-tile,.project-tile.project-wide{grid-column:span 2}
  .service-hero-grid,.about-story,.beliefs,.contact-layout,.case-presentation-grid,.case-heading-grid,.story-opening,.decision-grid,.case-result,.contact-next .wrap,.next-project .wrap{grid-template-columns:1fr}
  .offering{grid-template-columns:1fr;gap:22px}
  .page-head-bottom p:last-child{margin-left:0}
  .about-hero-foot p:last-child{margin-left:0}
}
@media(max-width:600px){
  .work-gallery,.concept-grid,.world-strip,.process-list{grid-template-columns:1fr}
  .project-tile,.project-tile.project-wide{grid-column:span 1}
  .contact-proof{grid-template-columns:1fr}
  .viewer-canvas [data-surface=mobile]{grid-template-columns:1fr}
  .case-meta{gap:20px 32px}
}
@media(prefers-reduced-motion:reduce){
  .project-visual:hover .project-open{transition:none}
  .faq details[open] summary span{transform:none}
  .faq summary span{transition:none}
}