/* Quiet typography, useful press states, and the same warm tan palette. */
:root{
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --press-fill:rgb(139 109 80 / .12);
  --press-duration:140ms;
  --press-ease:cubic-bezier(.23,1,.32,1);
}
body{font-family:var(--font-sans)}
h1,h2,h3,.brand,.price,.build-card h3{font-family:var(--font-sans)}
.intro h1,.work-intro h1{font-weight:500;letter-spacing:-.04em;line-height:1.08}
h2{font-weight:500;letter-spacing:-.035em;line-height:1.1}
.brand{letter-spacing:-.025em;line-height:1.2}
.build-card h3,.project-meta h3,.process-steps h3{letter-spacing:-.02em}
.price{letter-spacing:-.065em}

:where(a,button,summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(a,button,summary):not(.skip){
  transition:transform var(--press-duration) var(--press-ease),background-color var(--press-duration) var(--press-ease),color var(--press-duration) var(--press-ease),border-color var(--press-duration) var(--press-ease),box-shadow var(--press-duration) var(--press-ease),opacity var(--press-duration) var(--press-ease);
}
:where(a,button,summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* Press immediately; let only the release ease back into place. */
:where(a,button,summary):is(:active,.is-pressed){transition-duration:0ms}
.btn-label{display:block;overflow:visible;line-height:1.25}
.btn-bg{transition:background-color var(--press-duration) var(--press-ease);transform:none}
.btn:is(:active,.is-pressed){transform:scale(.97)}
.btn-primary:is(:active,.is-pressed) .btn-bg{transform:none;background:var(--ink)}
.closing .btn-primary:is(:active,.is-pressed) .btn-bg{background:var(--paper)}
.brand:is(:active,.is-pressed),.footer-brand:is(:active,.is-pressed){opacity:.7}
.nav-toggle{min-width:44px;border-radius:7px;padding:.5rem .7rem}
.links a:is(:active,.is-pressed),.nav-toggle:is(:active,.is-pressed),.mobile-links a:is(:active,.is-pressed){color:var(--ink);background:var(--press-fill);box-shadow:inset 0 0 0 1px var(--line);transform:scale(.98)}
.mobile-links{padding:.6rem}
.mobile-links a{padding:.65rem .8rem;border-radius:7px;line-height:1.4}
.links a[aria-current],.mobile-links a[aria-current]{color:var(--ink);background:var(--press-fill)}
.link-arrow{padding-inline:.15rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;border-radius:5px}
.link-arrow::before,.link-arrow::after{display:none}
.link-arrow:is(:active,.is-pressed){background:var(--press-fill);transform:scale(.98)}
.project-button:is(:active,.is-pressed){transform:scale(.985);opacity:.86}
.dialog-close:is(:active,.is-pressed){background:var(--paper);transform:scale(.94)}
summary:is(:active,.is-pressed){background:var(--press-fill);border-radius:6px}

.build-card{display:block;cursor:pointer;text-decoration:none}
.build-card:is(:active,.is-pressed){background:var(--paper);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);transform:scale(.985)}
.build-card:is(:active,.is-pressed) .build-icon-wrap{background:var(--press-fill)}
.stage .gallery-hint{left:50%;right:auto;bottom:8px;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;max-width:calc(100% - 2rem);padding:.55rem .85rem;border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:400;letter-spacing:.01em;line-height:1.2;background:var(--bg);transition:background-color var(--press-duration) var(--press-ease)}
.gallery-hint svg{width:14px;height:14px;flex:none}
.tf-root.is-pressed .gallery-hint{background:var(--paper);border-color:var(--accent)}
/* Keep a keyboard/screen-reader pause control without a visible pause icon. */
.stage .tf-toggle{clip-path:inset(50%);opacity:0;background:var(--paper)}
.stage .tf-toggle:focus-visible{clip-path:none;opacity:1}
.tf-root:has(.tf-toggle:focus-visible) .gallery-hint{opacity:0}
.included{column-gap:.75rem}
.included li{gap:.35rem}
.no-wrap{white-space:nowrap}
.faq h2{margin-bottom:1rem}
.faq .section-copy{max-width:35ch}

.footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:3rem;padding:3rem clamp(1.5rem,6vw,7rem)}
.footer-identity{min-width:0}
.footer-brand{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;font-size:1rem;line-height:1.3;letter-spacing:-.02em}
.footer-mark{width:44px;height:44px;object-fit:contain;flex:none}
.footer-identity p{margin:.8rem 0 0;font-size:.75rem;line-height:1.6}
.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;width:100%;max-width:34rem;justify-self:end}
.footer-links>a,.footer-legal{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.footer-links a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:.65rem .5rem;font-size:.8125rem;line-height:1.4;text-align:center;color:var(--ink)}
.footer-legal{display:grid;overflow:visible}
.footer-legal a{min-height:44px;padding:.55rem .4rem;font-size:.75rem}
.footer-legal a:first-child{border-radius:7px 7px 0 0}
.footer-legal a:last-child{border-radius:0 0 7px 7px}
.footer-legal a+a{border-top:1px solid var(--line)}
.footer-links a:is(:active,.is-pressed){background:var(--press-fill);box-shadow:inset 0 0 0 1px var(--accent)}

@media(hover:hover) and (pointer:fine){
  .btn-primary:hover .btn-bg{transform:none;background:var(--ink)}
  .closing .btn-primary:hover .btn-bg{background:var(--paper)}
  .mobile-links a:hover,.nav-toggle:hover,.footer-links a:hover{background:var(--press-fill);color:var(--ink)}
  .build-card:hover{border-color:var(--accent);box-shadow:0 5px 18px var(--press-fill)}
}
@media(min-width:1101px) and (max-width:1280px){.status{display:none}}
@media(max-width:760px){
  .brand{font-size:1rem}
  .intro h1{font-size:clamp(2rem,9.2vw,4.25rem)}
  .footer{grid-template-columns:1fr;gap:1.75rem;padding:2.25rem 1.5rem}
  .footer-links{max-width:none;justify-self:stretch}
  .footer-brand{font-size:.9375rem}
  .faq{gap:2rem}
}
@media(max-width:380px){
  .brand{font-size:.875rem;gap:.4rem}
  .nav{column-gap:.75rem}
  .intro h1{font-size:1.95rem}
  .footer-brand{font-size:.875rem}
  .footer-links a{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){
  :where(a,button,summary),.btn-bg,.gallery-hint{transition:none!important}
  .btn:is(:active,.is-pressed),.build-card:is(:active,.is-pressed),.project-button:is(:active,.is-pressed),.dialog-close:is(:active,.is-pressed),.links a:is(:active,.is-pressed),.nav-toggle:is(:active,.is-pressed),.mobile-links a:is(:active,.is-pressed),.link-arrow:is(:active,.is-pressed){transform:none}
}

/* Keep the gallery cue inside short desktop windows. */
@media(min-width:1000px) and (max-height:700px){.stage{min-height:12rem}}

/* Website examples use the same warm frame and press feedback as the site. */
.example-preview{aspect-ratio:16/9;background:#e8e2d8;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.example-preview img{display:block;width:100%;height:100%;object-fit:contain}
.website-example .project-meta{gap:.8rem;align-items:center;flex-wrap:nowrap}
.website-example .project-meta>div{flex:1;min-width:0}
.example-label{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--accent);border-radius:999px;min-height:44px;min-width:100px;padding:.5rem .8rem;background:transparent;color:var(--ink);font-family:inherit;font-size:.8125rem;font-weight:500;line-height:1.4;white-space:nowrap;flex:none;cursor:pointer}
.example-label:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.example-label:is(:active,.is-pressed){background:var(--ink);border-color:var(--ink);color:var(--bg)}
.example-image-button{border-radius:10px}
.example-image-button:is(:active,.is-pressed) .example-preview{border-color:var(--accent);opacity:.88}
@media(hover:hover) and (pointer:fine){.example-label:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}.example-image-button:hover .example-preview{border-color:var(--accent)}}
.selection .section-heading .section-copy{margin:.8rem 0 0;font-size:1rem}
.work-collection.example-collection .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.work-collection.example-collection .project:first-child{grid-column:auto}
.work-collection.example-collection .example-preview{aspect-ratio:16/9}
.concept-dialog .dialog-header{position:sticky;top:0;z-index:1;background:var(--bg);border-bottom:1px solid var(--line)}
.dialog-art .example-preview{aspect-ratio:auto;border:0;border-radius:0}
.dialog-art .example-preview img{width:100%;height:auto}
.dialog-footer .example-description{max-width:53ch}
.dialog-footer .example-description p{max-width:none}
.dialog-footer .example-disclosure{margin-top:.6rem;font-size:.75rem;color:var(--muted)}
.tf-still{object-fit:contain}
@media(max-width:760px){
 .work-collection.example-collection .project-grid{grid-template-columns:1fr}
 .website-example .project-meta{padding-top:.8rem}
 .dialog-footer .btn{width:100%;justify-content:center}
}

/* New category concepts lead each capability; labels remain visible. */
#services .build-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:2.75rem 1.5rem}
#services .website-type{cursor:default;padding:0;border:0;border-radius:0;background:none;overflow:visible;isolation:auto;box-shadow:none}
#services .website-type-preview{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#e8e2d8}
#services .website-type-preview img{display:block;width:100%;height:100%;object-fit:contain;object-position:top}
#services .website-type-meta{padding:1.15rem .1rem .25rem}
#services .website-type-heading{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:nowrap;margin-bottom:.35rem}
#services .website-type-heading h3{flex:1;min-width:0}
#services .website-type-heading .example-label{font-size:.8125rem;flex:none;margin:0}
#services .website-type h3{max-width:none;margin:0 0 .35rem;font-size:1.4rem}
#services .website-type p{max-width:none}
#services .website-type-project{margin:0 0 .8rem;color:var(--ink);font-size:.8125rem;line-height:1.5}
#services .website-type-description{max-width:46ch;font-size:.9375rem;line-height:1.65}
@media(hover:hover) and (pointer:fine){
 #services .website-type:hover{box-shadow:none}
}
@media(max-width:760px){
 #services .build-grid{grid-template-columns:1fr;gap:2.2rem}
 #services .website-type h3{font-size:1.3rem}
}

/* Screen-recording polish: persistent navigation, closer brand lockup, visual process. */
:root{--nav-height:80px}
html{scroll-padding-top:calc(var(--nav-height) + 24px)}
#home-view>.nav,#work-view>.nav{position:sticky;top:0;z-index:50;min-height:var(--nav-height);padding-block:16px;background:rgb(241 237 229 / .97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 9px 25px rgb(48 41 34 / .035)}
.hero{height:calc(100vh - var(--nav-height) + clamp(24px,3vh,32px));height:calc(100svh - var(--nav-height) + clamp(24px,3svh,32px));min-height:calc(34rem - var(--nav-height) + 24px)}
.brand,.footer-brand{gap:4px;font-weight:500;letter-spacing:-.045em}
.brand-mark,.footer-mark{width:32px;height:44px;object-fit:cover;flex:none}
.brand{font-size:1.075rem}
.brand>span,.footer-brand>span{white-space:nowrap}
.mobile-links{top:calc(100% - 2px);box-shadow:0 18px 36px rgb(48 41 34 / .12)}
:where(main,section,h1,h2,h3)[tabindex="-1"]:focus{outline:none}
#process.process-visual{display:block;border:0;background:#e8ded1;max-width:none}
.process-visual>.process-heading,.process-visual>.process-steps{max-width:1232px;margin-inline:auto}
.process-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.75rem}
.process-heading .section-label{margin-bottom:.9rem;color:#77634e}
.process-visual h2{max-width:none;margin-bottom:0}
.process-heading .section-copy{max-width:35ch;font-size:1rem}
.process-visual .process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.process-visual .process-steps>li{display:flex;flex-direction:column;gap:0;min-width:0;padding:1.4rem 1.25rem 1.6rem;border:1px solid rgb(83 61 39 / .13);border-radius:14px;background:#f6f0e7;overflow:hidden}
.process-visual .process-steps>li::before{display:none}
.process-step-title{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1.5rem}
.process-number{font-size:1.9rem;line-height:1;letter-spacing:-.06em;color:#b7a38b}
.process-visual .process-step-title h3{font-size:1.4rem;line-height:1.12;letter-spacing:-.045em;margin:0}
.process-art{height:255px;position:relative;display:flex;align-items:center;justify-content:center;flex:none;margin:0 -1.25rem 1.5rem;padding:1rem 1.25rem;overflow:hidden}
.process-art-brief{background:#e4d4bf}
.mini-brief{width:84%;max-width:250px;background:#fffaf2;border-radius:9px;box-shadow:0 12px 28px #6b4c2b17;padding:1.2rem}
.mini-eyebrow{display:block;font-size:.5rem;letter-spacing:.12em;color:#8a735b;margin-bottom:.45rem}
.mini-brief>strong{display:block;font-size:1.55rem;line-height:1.03;letter-spacing:-.06em;font-weight:500;margin-bottom:.85rem}
.mini-field{font-size:.51rem;margin-top:.55rem;color:#786954}
.mini-field>span{display:block;font-size:.58rem;border-bottom:1px solid #ddcfbc;color:#56432f;padding:.35rem 0}
.mini-button{display:flex;justify-content:space-between;margin-top:.85rem;padding:.5rem .6rem;background:#473b30;color:#fff7ed;border-radius:4px;font-size:.6rem}
.mini-button b{font-weight:400}
.process-art-review{background:#d4b9c1}
.mini-review{width:96%;border-radius:7px;overflow:hidden;box-shadow:0 12px 26px #60334825;transform:rotate(-4deg);background:#fff5ed}
.mini-browser-bar{display:flex;align-items:center;gap:3px;height:23px;padding:0 9px;color:#7a6b64;font-size:.4rem}
.mini-browser-bar i{width:3px;height:3px;border-radius:50%;background:#b9aaa4}
.mini-browser-bar span{margin-left:6px}
.mini-review img{display:block;width:100%;height:auto}
.mini-feedback{position:absolute;right:12px;bottom:23px;background:#fffaf2;border-radius:7px;box-shadow:0 6px 18px #67444219;padding:.55rem .6rem;font-size:.55rem;color:#4b343c;transform:rotate(2deg)}
.mini-feedback>span{margin-right:3px}
.process-art-launch{background:#c8c7b5;flex-direction:column}
.mini-launch{width:92%;border-radius:8px;background:#f8f4ea;overflow:hidden;box-shadow:0 12px 26px #4c49311a}
.mini-url{display:block;background:#eee8dc;padding:.55rem .7rem;font-size:.55rem;color:#726656}
.mini-launch-body{padding:1.15rem .8rem 1.25rem;text-align:center;background:#473b30;color:#fff7eb}
.mini-launch-check{display:grid;place-items:center;border:1px solid #b7a188;border-radius:50%;width:28px;height:28px;margin:0 auto .6rem;color:#e7d4b9;font-size:1rem}
.mini-launch-body strong{display:block;font-size:1.4rem;line-height:1.04;letter-spacing:-.04em;font-weight:500}
.mini-launch-body>span:last-child{display:block;font-size:.48rem;color:#d1c0aa;margin-top:.55rem}
.mini-live-label{display:flex;align-items:center;gap:5px;font-size:.55rem;padding:.5rem .65rem;background:#f7f1e7;border-radius:99px;position:absolute;right:12px;bottom:15px;box-shadow:0 4px 12px #484b3420}
.mini-live-label i{display:block;width:5px;height:5px;border-radius:50%;background:#69734e}
.process-step-copy{margin-top:auto}
.process-visual .process-step-copy h4{font-size:.95rem;line-height:1.4;letter-spacing:-.025em;font-weight:500;margin:0 0 .65rem}
.process-visual .process-step-copy p{font-size:.875rem;line-height:1.65;color:#756855;max-width:none}
@media(max-width:1100px) and (min-width:761px){.process-visual .process-steps{gap:1rem}.process-visual .process-step-title{flex-direction:column;gap:.45rem}.process-art{height:230px;padding-inline:1rem}.mini-brief{width:96%;padding:1rem}.mini-brief>strong{font-size:1.35rem}.process-visual .process-step-title h3{font-size:1.25rem}}
@media(max-width:760px){
 :root{--nav-height:calc(72px + env(safe-area-inset-top,0px))}
 #home-view>.nav,#work-view>.nav{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}
 .brand{gap:3px;font-size:1rem}.brand-mark{width:28px;height:40px}
 .footer-brand{gap:3px}.footer-mark{width:30px;height:42px}
 .process-heading{display:block;margin-bottom:2rem}.process-heading .section-copy{margin-top:1rem;max-width:38ch}
 .process-visual .process-steps{grid-template-columns:1fr;gap:1.25rem}
 .process-visual .process-steps>li{padding:1.4rem 1.35rem 1.6rem}
 .process-step-title{margin-bottom:1.25rem}.process-visual .process-step-title h3{font-size:1.6rem}
 .process-art{height:265px;margin-inline:-1.35rem;padding-inline:1.35rem}
 .mini-brief{max-width:245px}.mini-review{max-width:350px}.mini-launch{max-width:325px}
}
@media(max-width:380px){.brand{font-size:.9rem}.brand-mark{width:26px;height:38px}.process-visual .process-step-title h3{font-size:1.35rem}.process-art{height:245px}}

/* Make the main project action distinct inside both mobile menus. */
.mobile-links a[href^="/project-inquiry"]{margin-top:.45rem;min-height:48px;background:#806044;color:#fff8ef;font-weight:500}
.mobile-links a[href^="/project-inquiry"]:is(:hover,:active,.is-pressed){background:#624a35;color:#fff8ef;box-shadow:none}
.mobile-links a[href^="/project-inquiry"]:focus-visible{outline:2px solid #806044;outline-offset:3px}

/* StoryVerve approved brand lockup */
img.storyverve-lockup{display:block;width:228px;height:58px;max-width:100%;object-fit:cover;object-position:50% 50%;mix-blend-mode:multiply;flex:none}
@media(max-width:380px){img.storyverve-lockup{width:190px;height:50px}}