:root { --quote-ink:#101210; --quote-paper:#e7e1d4; --quote-muted:#77766e; --quote-green:#0a1d12; --quote-lime:#b9ff2d; --quote-red:#a84646; --quote-mono:"DM Mono", monospace; --quote-serif:"Playfair Display", Georgia, serif; --quote-sans:"DM Sans", sans-serif; }
.quote-page { overflow-x:clip; background:#050907; color:#f2eee5; font-family:var(--quote-sans); }
.quote-page .skip-link { position:fixed; z-index:70; top:1rem; left:1rem; padding:.7rem .9rem; transform:translateY(-170%); background:var(--quote-paper); color:var(--quote-ink); font:500 .65rem/1 var(--quote-mono); letter-spacing:.08em; transition:transform .2s ease; }.quote-page .skip-link:focus { transform:translateY(0); outline:2px solid var(--quote-lime); outline-offset:3px; }
.quote-page .creative-page-header { background:rgb(5 9 7 / 88%); }
.quote-hero { position:relative; overflow:hidden; min-height:min(42rem,72svh); padding:clamp(10rem,18vw,15rem) clamp(1.4rem,7vw,8rem) clamp(5.5rem,10vw,8rem); background:radial-gradient(circle at 75% 55%,rgb(54 112 47 / 34%),transparent 28rem),linear-gradient(120deg,#07130d 0%,#0d2517 53%,#050907 100%); }
.quote-hero::after { content:"QUOTE"; position:absolute; right:-.1em; bottom:-.34em; color:rgb(212 255 191 / 6%); font:600 clamp(7rem,22vw,23rem)/.78 var(--quote-serif); letter-spacing:-.08em; pointer-events:none; }
.quote-hero-grid { position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgb(204 255 169 / 10%) 1px,transparent 1px),linear-gradient(90deg,rgb(204 255 169 / 10%) 1px,transparent 1px); background-size:4rem 4rem; mask-image:linear-gradient(90deg,transparent,black 25%,black 74%,transparent); }
.quote-hero > :not(.quote-hero-grid) { position:relative; z-index:1; max-width:54rem; }
.quote-kicker,.quote-form-label { margin:0 0 1.1rem; color:var(--quote-lime); font:500 clamp(.58rem,.8vw,.72rem)/1.3 var(--quote-mono); letter-spacing:.14em; }
.quote-hero h1 { margin:0; font:600 clamp(2.8rem,7.8vw,8.3rem)/.86 var(--quote-serif); letter-spacing:-.065em; }
.quote-intro { margin:1.55rem 0 0; font:500 clamp(1.65rem,3.6vw,4rem)/1.03 var(--quote-serif); letter-spacing:-.045em; }
.quote-support { max-width:32rem; margin:1.8rem 0 0; color:rgb(242 238 229 / 74%); font-size:clamp(.92rem,1.2vw,1.08rem); line-height:1.65; }
.quote-section { display:grid; grid-template-columns:minmax(12rem,.72fr) minmax(0,2fr); max-width:88rem; margin:0 auto; padding:clamp(3.5rem,8vw,8rem) clamp(1.25rem,6vw,5.5rem) clamp(5rem,9vw,10rem); gap:clamp(2rem,7vw,8rem); }
.quote-aside { align-self:start; position:sticky; top:8.5rem; color:rgb(242 238 229 / 75%); font:500 clamp(1.15rem,2.1vw,2rem)/1.1 var(--quote-serif); letter-spacing:-.045em; }
.quote-aside-index { margin:0; color:var(--quote-lime); font:500 .62rem/1.2 var(--quote-mono); letter-spacing:.14em; }
.quote-aside-line { width:1px; height:clamp(4rem,12vw,10rem); margin:1.3rem 0; background:linear-gradient(var(--quote-lime),transparent); }
.quote-aside p:last-child { margin:0; }.quote-aside em { color:var(--quote-lime); }
.quote-form { position:relative; padding:clamp(1.6rem,5vw,4.5rem); background:var(--quote-paper); color:var(--quote-ink); box-shadow:1.2rem 1.2rem 0 rgb(185 255 45 / 12%); }
.quote-form::before { content:"TARUZ CREATIVE / PROJECT BRIEF"; position:absolute; top:.75rem; right:1rem; color:rgb(16 18 16 / 35%); font:500 .47rem/1 var(--quote-mono); letter-spacing:.12em; }
.quote-form-heading { padding:1.6rem 0 clamp(2.2rem,4vw,3.5rem); border-bottom:1px solid rgb(16 18 16 / 22%); }.quote-form-heading .quote-form-label { color:#56731b; }.quote-form-heading h2 { margin:0; font:600 clamp(2rem,4.3vw,4.6rem)/.94 var(--quote-serif); letter-spacing:-.06em; }.quote-form-heading h2 em { color:#56731b; }.quote-form-heading > p:last-child { margin:.95rem 0 0; color:#56564f; font-size:.76rem; }.quote-form-heading > p:last-child span { color:var(--quote-red); }
.quote-form-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2.3rem); }.quote-form-row--three { grid-template-columns:.8fr 1.2fr; }
.quote-service-info { display:grid; grid-template-columns:clamp(6.5rem,17%,9rem) minmax(0,1fr); gap:1rem; margin-top:clamp(1.8rem,3vw,2.5rem); padding:clamp(1.15rem,2.5vw,1.7rem); border-left:2px solid #6f921c; background:rgb(99 132 30 / 9%); }.quote-service-info-label { margin:0; color:#56731b; font:500 .56rem/1.35 var(--quote-mono); letter-spacing:.11em; }.quote-service-info h3 { margin:0; font:500 clamp(1.15rem,2.2vw,1.65rem)/1.05 var(--quote-serif); letter-spacing:-.035em; }.quote-service-info p:not(.quote-service-info-label) { margin:.55rem 0 0; color:#55584e; font-size:.77rem; line-height:1.5; }.quote-service-info-price { color:#486512!important; font:500 .62rem/1.35 var(--quote-mono)!important; letter-spacing:.06em; }.quote-service-info a { display:inline-block; margin-top:.85rem; padding-bottom:.2rem; border-bottom:1px solid #607d19; color:#3c5210; font:500 .57rem/1.3 var(--quote-mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.quote-service-info a span { color:#6f921c; }.quote-service-info a:hover,.quote-service-info a:focus-visible { color:#6f921c; outline:2px solid #6f921c; outline-offset:4px; }
.quote-field { padding-top:clamp(1.65rem,3vw,2.55rem); }.quote-field--full { width:100%; }.quote-field label,.quote-contact-method legend { display:block; margin-bottom:.65rem; color:#2e302b; font:500 .63rem/1.25 var(--quote-mono); letter-spacing:.09em; text-transform:uppercase; }.quote-field label [aria-hidden="true"] { color:var(--quote-red); }.quote-field-hint { color:#75766c; font-size:.52rem; letter-spacing:.06em; }
.quote-field input,.quote-field select,.quote-field textarea { box-sizing:border-box; width:100%; border:0; border-bottom:1px solid rgb(16 18 16 / 38%); border-radius:0; padding:.6rem 0 .68rem; background:transparent; color:var(--quote-ink); font:400 .96rem/1.45 var(--quote-sans); outline:none; }.quote-field textarea { min-height:9rem; resize:vertical; }.quote-field input::placeholder { color:#77786f; }.quote-field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#101210 50%),linear-gradient(135deg,#101210 50%,transparent 50%); background-position:calc(100% - 11px) calc(50% - 2px),calc(100% - 6px) calc(50% - 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; }.quote-field input:focus,.quote-field select:focus,.quote-field textarea:focus { border-color:#5f8613; box-shadow:0 2px 0 #5f8613; }.quote-field p { margin:.56rem 0 0; color:#66675e; font-size:.72rem; line-height:1.45; }
.quote-contact-method { margin:clamp(1.8rem,4vw,3.2rem) 0 0; padding:clamp(1.25rem,2.5vw,1.75rem); border:1px solid rgb(16 18 16 / 20%); }.quote-contact-method legend { padding:0 .4rem; }.quote-contact-options { display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; }.quote-contact-options label { display:flex; align-items:center; gap:.46rem; cursor:pointer; font-size:.87rem; }.quote-contact-options input { width:1rem; height:1rem; accent-color:#5f8613; }.quote-whatsapp-field { padding-top:1.5rem; }
.quote-form-action { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:clamp(2.4rem,5vw,4rem); }.quote-submit { border:1px solid #101210; padding:1rem 1.25rem; background:#101210; color:var(--quote-paper); cursor:pointer; font:500 .66rem/1 var(--quote-mono); letter-spacing:.08em; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }.quote-submit span { color:var(--quote-lime); margin-left:.55rem; font-size:1rem; }.quote-submit:hover,.quote-submit:focus-visible { background:#5f8613; color:white; transform:translate(-2px,-2px); }.quote-submit:focus-visible { outline:2px solid var(--quote-lime); outline-offset:3px; }.quote-form-status { flex:1 1 14rem; margin:0; color:#4d6440; font-size:.78rem; line-height:1.45; }
.quote-submit:disabled { cursor:wait; opacity:.78; transform:none; }.quote-form-status.is-error { color:#8b2d2d; }.quote-honeypot { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }.quote-success { padding:clamp(3rem,7vw,6rem) clamp(1.2rem,4vw,3rem); border-left:2px solid #6f921c; background:linear-gradient(135deg,rgb(99 132 30 / 14%),transparent 62%); }.quote-success .quote-form-label { color:#56731b; }.quote-success h2 { margin:0; font:600 clamp(2.6rem,6vw,5.8rem)/.9 var(--quote-serif); letter-spacing:-.065em; }.quote-success h2 em { color:#56731b; }.quote-success h2 + p { max-width:29rem; margin:1.25rem 0 0; color:#56564f; font-size:clamp(.92rem,1.3vw,1.05rem); line-height:1.6; }.quote-success:focus { outline:2px solid #6f921c; outline-offset:5px; }
.quote-success-support { max-width:31rem; margin:1.4rem 0 0; color:#56564f; font-size:.82rem; line-height:1.55; }.quote-success-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1rem; margin-top:clamp(1.75rem,4vw,2.5rem); }.quote-success-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:2.9rem; padding:.78rem 1rem; font:500 .62rem/1.15 var(--quote-mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }.quote-success-actions a span { margin-left:.55rem; font-size:.95rem; }.quote-success-primary { border:1px solid #0a1d12; background:#0a1d12; color:#f3f0e5; box-shadow:inset 3px 0 0 #8faa62; }.quote-success-primary span { color:#b9ff2d; }.quote-success-primary:hover,.quote-success-primary:focus-visible { background:#173e24; transform:translate(-2px,-2px); }.quote-success-secondary { border:1px solid #173e24; background:transparent; color:#173e24; }.quote-success-secondary:hover { background:rgb(99 132 30 / 12%); }.quote-success-tertiary { padding-right:.15rem!important; padding-left:.15rem!important; color:#173e24; text-decoration:underline!important; text-decoration-thickness:1px!important; text-underline-offset:.28em!important; }.quote-success-tertiary:hover { color:#6f921c; }.quote-success-actions a:focus-visible { outline:2px solid #6f921c; outline-offset:4px; }
.quote-privacy-note { flex-basis:100%; max-width:34rem; margin:0; padding-top:1rem; border-top:1px solid rgb(16 18 16 / 18%); color:#5d6056; font-size:.72rem; line-height:1.55; }.quote-privacy-note a { color:#385313; text-decoration:underline; text-underline-offset:.18em; }.quote-privacy-note a:hover,.quote-privacy-note a:focus-visible { color:#6f921c; outline:2px solid #6f921c; outline-offset:3px; }.quote-footer { display:flex; justify-content:space-between; gap:1rem; padding:1.4rem 4vw; border-top:1px solid rgb(242 238 229 / 15%); color:rgb(242 238 229 / 65%); font:500 .57rem/1.4 var(--quote-mono); letter-spacing:.08em; }.quote-footer p { margin:0; }.quote-footer a:hover,.quote-footer a:focus-visible { color:var(--quote-lime); outline:2px solid var(--quote-lime); outline-offset:4px; }
@media (max-width:800px) { .quote-hero { min-height:auto; padding-top:8.5rem; }.quote-section { grid-template-columns:1fr; gap:2.2rem; }.quote-aside { position:static; display:flex; align-items:center; gap:1rem; }.quote-aside-line { width:3.5rem; height:1px; margin:0; background:linear-gradient(90deg,var(--quote-lime),transparent); }.quote-aside p:last-child { font-size:1.15rem; }.quote-aside br { display:none; } }
@media (max-width:560px) { .quote-hero { padding-bottom:4rem; }.quote-kicker { max-width:17rem; }.quote-form { padding:1.35rem; box-shadow:.55rem .55rem 0 rgb(185 255 45 / 12%); }.quote-form-row,.quote-form-row--three,.quote-service-info { grid-template-columns:1fr; gap:0; }.quote-field { padding-top:1.55rem; }.quote-service-info { gap:.65rem; }.quote-field textarea { min-height:8rem; }.quote-contact-options { gap:.75rem 1rem; }.quote-form-action { align-items:flex-start; flex-direction:column; }.quote-form-status { flex-basis:auto; }.quote-success-actions { align-items:stretch; flex-direction:column; width:100%; }.quote-success-actions a { width:100%; box-sizing:border-box; }.quote-success-tertiary { width:auto!important; align-self:flex-start; }.quote-footer { flex-direction:column; } }

.quote-selection-summary { grid-column:1 / -1; width:min(100%,780px); margin:0 auto 1.5rem; padding:clamp(1.2rem,3vw,2rem); border:1px solid rgb(16 18 16 / 22%); background:#e6eadc; color:#163a23; box-shadow:.45rem .5rem 0 rgb(185 255 45 / 13%); }.quote-selection-summary > p:first-child,.quote-selection-summary article small { margin:0; color:#5b7546; font:500 .55rem/1.3 var(--quote-mono); letter-spacing:.1em; text-transform:uppercase; }.quote-selection-summary h3 { margin:.8rem 0 1.25rem; font:500 clamp(1.8rem,3.8vw,3rem)/.88 var(--quote-serif); letter-spacing:-.055em; }.quote-selection-summary > div { display:grid; gap:1px; background:rgb(22 58 35 / 19%); }.quote-selection-summary article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.28rem 1rem; padding:.8rem; background:#f5f1e6; }.quote-selection-summary article small { grid-column:1 / -1; }.quote-selection-summary article strong { font:500 1rem/1.2 var(--quote-sans); }.quote-selection-summary article span { color:#596357; font-size:.75rem; line-height:1.45; }.quote-selection-summary article b { grid-row:2 / span 2; grid-column:2; align-self:center; color:#385313; font:500 .62rem/1.3 var(--quote-mono); white-space:nowrap; }.quote-selection-total { margin:1rem 0 0; color:#4f5f49; font-size:.76rem; line-height:1.5; }.quote-selection-summary > a { display:inline-block; margin-top:1rem; padding-bottom:.35rem; border-bottom:1px solid #385313; color:#28451e; font:500 .58rem/1.2 var(--quote-mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.quote-selection-summary > a:hover,.quote-selection-summary > a:focus-visible { color:#6f921c; outline:2px solid #6f921c; outline-offset:4px; }@media (max-width:560px) { .quote-selection-summary article { grid-template-columns:1fr; }.quote-selection-summary article b { grid-row:auto; grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { .quote-submit { transition:none; } }

/* Keep the editorial introduction separate from the working form column. */
@media (min-width:801px) { .quote-section { grid-template-columns:minmax(15rem,.8fr) minmax(0,1.7fr); align-items:start; }.quote-aside { grid-column:1; grid-row:1 / span 2; width:min(100%,24rem); }.quote-selection-summary,.quote-form { grid-column:2; min-width:0; }.quote-selection-summary { width:100%; margin:0 0 1.5rem; }.quote-form { width:100%; } }
@media (max-width:800px) { .quote-aside,.quote-selection-summary,.quote-form { grid-column:1; grid-row:auto; }.quote-selection-summary { width:100%; margin:0 0 1.5rem; } }

/* Public CTA palette: forest carries the action; lime stays a precise accent. */
.quote-submit { border-color:#173e24; background:#173e24; color:#f3f0e5; box-shadow:inset 3px 0 0 #8faa62; }.quote-submit:hover { background:#294e34; color:#f3f0e5; }.quote-submit:focus-visible { background:#173e24; color:#f3f0e5; outline-color:var(--quote-lime); }