/* NightDesign — paper layer for the older pages. Loads after site.css. */
:root { --ivory: #f7f5ef; --paper: #fffdf8; --char: #1c1c1c; --dim: #5f5d58; --rule: rgba(28,28,28,.14); --coral: #e75c53; --blue: #4d8ed3; --yellow: #e7a03f; --sage: #72a781; --display: "Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif; --body: "Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif; --hand: "Caveat","Segoe Print","Bradley Hand",cursive; --ease: cubic-bezier(.2,.75,.15,1); color-scheme: light; }
* { box-sizing: border-box; }
html, body { background: var(--ivory); color: var(--char); }
body { margin: 0px; font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1240px; margin: 0px auto; padding-inline: clamp(16px, 4vw, 48px); }
.hdr { position: sticky; top: env(safe-area-inset-top,0px); z-index: 30; background: rgba(247, 245, 239, 0.88); backdrop-filter: blur(10px); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.brand svg { display: block; width: 84px; fill: var(--char); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { padding: 10px 12px; font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 999px; }
.nav a:hover { background: rgba(28, 28, 28, 0.06); }
.nav a[aria-current="page"] { text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav a.cta { background: var(--char); color: var(--ivory); margin-left: 6px; }
.nav a.cta:hover { background: var(--coral); }
.lang { display: inline-flex; border: 1.5px solid var(--char); border-radius: 999px; overflow: hidden; margin-left: 8px; }
.lang button { min-width: 44px; min-height: 36px; border: 0px; background: none; font: 600 12px var(--body); letter-spacing: 0.06em; cursor: pointer; color: var(--char); }
.lang button[aria-pressed="true"] { background: var(--char); color: var(--ivory); }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0px 0px 18px; font: 600 12px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kicker i { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.hnote { margin: 6px 0px 0px; font: 600 clamp(24px,2.3vw,32px)/1.1 var(--hand); color: var(--coral); transform: rotate(-2deg); display: inline-flex; align-items: center; gap: 8px; }
.hnote a { color: inherit; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0px 22px; border-radius: 999px; border: 1.5px solid var(--char); font: 600 15px var(--body); text-decoration: none; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.btn:hover { background: var(--c,var(--coral)); border-color: var(--c,var(--coral)); color: rgb(255, 255, 255); }
.btn .ar { transition: transform .3s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }
.btn.solid { background: var(--char); color: var(--ivory); }
.foot { background: var(--char); color: var(--ivory); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; padding-block: 56px; }
.foot b { display: block; margin-bottom: 6px; font: 600 12px var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(169, 166, 159); }
.foot div { font-size: 16px; line-height: 1.55; }
.foot svg { width: 120px; fill: var(--ivory); }
@media (max-width: 860px) { .nav a:not(.cta) { display: none; } }
.nav a.mk{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--char)}
.nav a.mk:hover{background:var(--char);color:var(--ivory)}
.nav a.mk .bdg{padding:2px 7px;border-radius:999px;background:var(--coral);color:#fff;font:700 10px var(--body);letter-spacing:.08em;text-transform:uppercase}
.nav a.mk[aria-current="page"]{background:var(--char);color:var(--ivory);text-decoration:none}
@media (max-width:860px){.nav a.mk{display:inline-flex!important;padding:8px 10px;font-size:14px}.nav a.mk .bdg{display:none}}


/* ---- adapter: older pages (site.css components) in the storytelling style ---- */
:root{
  --color-ink:#1c1c1c;--color-paper:#f7f5ef;--color-surface:#fffdf8;--color-muted:#5f5d58;--color-line:rgba(28,28,28,.14);
  --color-brand:#e75c53;--color-brand-dark:#c94a42;--color-dark:#1c1c1c;--color-dark-soft:#2a2a2a;
  --font-display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --font-body:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --radius-sm:12px;--radius-md:18px;--radius-lg:24px;
  --shadow:0 30px 50px -40px rgba(28,28,28,.45);
  --container:1240px;--header-height:68px;
}
body{font-family:var(--body);line-height:1.6;overflow-wrap:normal}
::selection{background:var(--coral);color:#fff}
.skip-link{background:var(--char);color:var(--ivory);border-radius:999px}
.hdr .brand{display:block;width:auto;height:auto;padding:0;background:none}
.lang a{display:inline-grid;place-items:center;min-width:44px;min-height:36px;font:600 12px var(--body);letter-spacing:.06em;text-decoration:none;color:var(--char)}
.lang a[aria-current]{background:var(--char);color:var(--ivory)}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--coral)}
.foot .more a{display:block}

/* type */
main h1,main h2,main h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;color:var(--char);text-transform:none}
main h1{font-size:clamp(40px,6vw,88px);line-height:1.02;letter-spacing:-.03em}
main h2{font-size:clamp(28px,3.4vw,48px);line-height:1.08}
main h3{font-size:clamp(20px,1.7vw,24px);line-height:1.2}
.container{max-width:1240px;padding-inline:clamp(16px,4vw,48px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--coral);flex:none}
.lede{color:var(--dim);font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:56ch}
.text-link{font-weight:600;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:5px}

/* page hero: a hand-drawn line under the title */
.page-hero{background:var(--ivory);color:var(--char);padding-block:clamp(48px,8vw,110px) clamp(28px,4vw,56px);border:0}
.page-hero::before,.page-hero::after{display:none}
.page-hero h1{position:relative;display:inline-block;padding-bottom:.18em;max-width:18ch}
.page-hero h1::after{content:"";position:absolute;left:0;bottom:0;width:min(240px,60%);height:14px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cpath d='M3 9 C40 3 70 12 110 7 S190 2 237 8' fill='none' stroke='%23e75c53' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.page-hero .lede{color:var(--dim)}
.page-hero-grid{align-items:end}

/* sections */
.section{background:transparent;padding-block:clamp(48px,7vw,96px)}
.section--surface{background:var(--paper);border-top:1.5px solid var(--char)}
.section--dark{background:var(--char);color:var(--ivory)}
.section--dark h2,.section--dark h3{color:var(--ivory)}
.section--dark .lede,.section--dark p{color:#cfccc5}
.section--dark .eyebrow{color:#a9a69f}
.section-heading{gap:16px 48px;margin-bottom:clamp(28px,4vw,48px)}

/* buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;border:1.5px solid var(--char);background:var(--char);color:var(--ivory);font:600 15px var(--body);letter-spacing:0;text-transform:none;text-decoration:none;box-shadow:none;transition:background .25s,color .25s,border-color .25s}
.button:hover,.button:focus-visible{background:var(--coral);border-color:var(--coral);color:#fff;transform:none}
.button--ghost,.button--outline{background:transparent;color:var(--char)}
.button--light{background:var(--ivory);color:var(--char);border-color:var(--ivory)}
.section--dark .button--ghost,.section--dark .button--outline{color:var(--ivory);border-color:var(--ivory)}

/* cards */
.info-card,.principle,.quote-card,.quote-sidebar-card,.portfolio-card,.quality-panel,.success-panel,.workflow-step{background:var(--paper);color:var(--char);border:0;border-radius:20px;box-shadow:0 30px 50px -40px rgba(28,28,28,.45)}
.section--surface .info-card,.section--surface .principle,.section--surface .quote-card,.section--surface .quote-sidebar-card,.section--surface .portfolio-card,.section--surface .quality-panel,.section--surface .workflow-step{background:var(--ivory)}
.section--dark .principle,.section--dark .info-card,.section--dark .workflow-step{background:#262626;color:var(--ivory);box-shadow:none}
.principles-grid{counter-reset:pr}
.principle{counter-increment:pr;padding:24px}
.principle::before{content:"0" counter(pr);display:block;margin-bottom:12px;font:500 44px/.9 var(--display);color:transparent;-webkit-text-stroke:1.2px var(--coral)}
.principle-mark{display:none}
.info-card{padding:24px}
.workflow{counter-reset:wf}
.workflow-step{padding:24px}
.audience-band{background:var(--ivory);color:var(--char);border-block:1.5px solid var(--char)}
.audience-band h2{color:var(--char)}
.audience-list li{border:1.5px solid var(--char);border-radius:999px;background:transparent;color:var(--char);font-weight:600}
.studio-photo img{border-radius:20px}
.quality-list li::marker{color:var(--coral)}

/* projects */
.portfolio-grid{gap:clamp(18px,2.4vw,30px)}
.portfolio-card{overflow:hidden;padding:10px 10px 18px;transition:transform .5s var(--ease)}
.portfolio-card:hover{transform:translateY(-6px) rotate(-.4deg)}
.portfolio-visual,.portfolio-card picture,.portfolio-card img{border-radius:14px;overflow:hidden}
.portfolio-body{padding:14px 8px 0}
.portfolio-type{font:700 22px/1 var(--hand);color:var(--coral);letter-spacing:0;text-transform:none}
.portfolio-body h2,.portfolio-body h3{font-size:clamp(20px,1.8vw,26px);margin:6px 0}
.portfolio-client{font-weight:600;color:var(--char)}

/* questions */
.faq-list details{background:transparent;border:0;border-top:1.5px solid var(--char);border-radius:0;padding:0}
.faq-list details:last-child{border-bottom:1.5px solid var(--char)}
.faq-list summary{position:relative;list-style:none;padding:20px 48px 20px 0;font:600 clamp(17px,1.4vw,20px)/1.35 var(--body);cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:500 30px/1 var(--display);color:var(--coral);transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{margin:0 0 22px;color:var(--dim);max-width:68ch}

/* call to action band */
.cta{background:var(--ivory);color:var(--char);border-top:1.5px solid var(--char)}
.cta::before,.cta::after{display:none}
.cta h2{color:var(--char)}
.cta p{color:var(--dim)}

/* quote form */
.quote-shell{gap:clamp(20px,3vw,48px)}
.quote-card{padding:clamp(20px,3vw,36px)}
.quote-progress{color:var(--dim)}
.quote-progress [aria-current],.quote-progress .is-active{color:var(--char)}
.form-step-header h2{font-size:clamp(24px,2.4vw,32px)}
.field label,.fieldset legend{font:600 14px var(--body);color:var(--char)}
.field input,.field select,.field textarea,.quote-card input[type=text],.quote-card input[type=email],.quote-card input[type=tel],.quote-card input[type=url],.quote-card input[type=date],.quote-card select,.quote-card textarea{background:var(--paper);color:var(--char);border:1.5px solid rgba(28,28,28,.25);border-radius:12px;padding:12px 14px;font:500 16px var(--body);box-shadow:none}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(231,92,83,.18)}
.choice-card{border:1.5px solid rgba(28,28,28,.3);border-radius:14px;background:var(--paper);transition:border-color .2s,background .2s}
.choice-card:hover{border-color:var(--char)}
.choice-card:has(input:checked){border-color:var(--char);background:var(--char);color:var(--ivory)}
.choice-card input,.checkbox input{accent-color:var(--coral)}
.upload-box{border:2px dashed rgba(28,28,28,.35);border-radius:18px;background:var(--paper)}
.upload-box:hover,.upload-box:focus-within{border-color:var(--coral)}
.field-error,.form-status[data-state=error]{color:#b83f37}
.quote-sidebar-card{padding:24px}
.required-mark{color:var(--coral)}
.success-panel{padding:clamp(24px,4vw,48px)}

@media (max-width:860px){.nav .lang a{display:inline-grid!important}.nav .lang{margin-left:4px}}

/* form fields keep their own height */
.field{align-content:start;align-self:start}
.field input,.field select{height:auto}
/* the contact card in the form stays dark, like the footer */
.section--surface .quote-sidebar-card,.quote-shell .quote-sidebar-card{background:var(--char);color:var(--ivory);box-shadow:none}
.quote-sidebar-card h2,.quote-sidebar-card h3,.quote-sidebar-card a{color:var(--ivory)}
.quote-sidebar-card p,.quote-sidebar-card li{color:#cfccc5}
.quote-sidebar-card .eyebrow{color:#a9a69f}
.quote-sidebar-card .button{background:var(--coral);border-color:var(--coral);color:#fff}
.quote-sidebar-card .button--ghost,.quote-sidebar-card .button--outline{background:transparent;border-color:var(--ivory);color:var(--ivory)}
.quote-sidebar-card .button:hover{background:var(--ivory);border-color:var(--ivory);color:var(--char)}

/* process steps: big outlined numbers, no corner shape */
.workflow-step::before{display:block;position:static;margin:0 0 14px;font:500 44px/.9 var(--display);color:transparent;-webkit-text-stroke:1.2px var(--coral);background:none;letter-spacing:0}
.workflow-step::after{display:none}
.workflow-step h2{font-size:clamp(22px,2vw,28px);margin-top:0}

/* the closing band is light now: its light buttons become dark */
.cta .button--light{background:var(--char);border-color:var(--char);color:var(--ivory)}
.cta .button--ghost,.cta .button--outline{background:transparent;border-color:var(--char);color:var(--char)}
.cta .button:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.cta-actions{gap:10px}

/* dark boxes inside light sections */
.workflow-note{background:var(--char);color:var(--ivory);border-radius:20px}
.workflow-note h2,.workflow-note h3{color:var(--ivory)}
.workflow-note p{color:#cfccc5}
.workflow-note .button,.section--dark .button{background:var(--coral);border-color:var(--coral);color:#fff}
.workflow-note .button:hover,.section--dark .button:hover{background:var(--ivory);border-color:var(--ivory);color:var(--char)}

/* light panels inside the dark band keep dark text */
.section--dark .quality-panel,.section--dark .quality-panel h2,.section--dark .quality-panel h3,.section--dark .quality-panel strong{color:var(--char)}
.section--dark .quality-panel p,.section--dark .quality-panel li{color:var(--dim)}
.section--dark .quality-panel .eyebrow{color:var(--dim)}

/* small icons, direct-contact buttons and the floating WhatsApp button */
.ico{width:18px;height:18px;flex:none}
.quote-direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--char);color:var(--ivory);box-shadow:0 18px 30px -16px rgba(28,28,28,.6);transition:background .25s,transform .3s var(--ease)}
.wa-float svg{width:26px;height:26px}
.wa-float:hover{background:var(--coral);transform:translateY(-3px)}
@media print{.wa-float{display:none}}

.faq-list summary::after,.faq-list details[open] summary::after{content:"+";width:auto;height:auto;border-radius:0;background:none;color:var(--coral);display:block}
.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page-hero h1{display:block;width:fit-content}
.eyebrow{display:flex;width:fit-content}