/* SZARA · October 2026 visual refresh
   A calm, editorial system shared across every page.
   Keep individual client project imagery in its original colors.
*/
:root{
  --paper:#FAF9F6;
  --ink:#1B1B1B;
  --white:#FFFFFF;
  --line:#DAD6D0;
  --muted:#69635F;
  --sage:#EEEAE5;
  --orange:#795961;
  --cobalt:#795961;
  --lime:#E6C7CB;
  --sz-rose:#C99DA3;
  --sz-rose-dark:#795961;
  --sz-stone:#ADA59B;
  --sz-ivory:#FAF9F6;
  --sz-surface:#F2EFEA;
  --sz-dark:#211F20;
}
html{scroll-padding-top:96px}
body{background:var(--paper);color:var(--ink)}
::selection{background:#E6C7CB;color:#1B1B1B}
:focus-visible{outline:2px solid var(--sz-rose-dark);outline-offset:4px}
header{background:rgba(250,249,246,.96);border-color:var(--line);box-shadow:none}
.nav{min-height:82px}
.brand{letter-spacing:-2.1px}
.brand span,.footer .brand span{color:var(--sz-rose)}
.nav nav a:hover,.nav nav .text-link:hover,.text-link:hover{color:var(--sz-rose-dark)}
.mobile-jumps{background:var(--paper);border-color:var(--line)}
.mobile-jumps a{color:var(--ink)}
.mobile-jumps a:hover{color:var(--sz-rose-dark)}

/* Buttons: elegant square corners, strong contrast, no floating pill effects. */
.button,.nav .button,.hero-actions .button,.bs-plan .button,.bs-plan:not(.featured) .button,.bs-teaser .button{
  background:var(--ink);border:1px solid var(--ink);color:#fff;
  border-radius:2px;box-shadow:none;transform:none;
  min-height:48px;padding:12px 20px;gap:14px;
  justify-content:center;font-weight:650;letter-spacing:.005em;
}
.button>span,.nav .button>span{
  background:none;color:inherit;display:inline;width:auto;height:auto;
  font-size:17px;font-weight:400;border:0;border-radius:0;line-height:1;
}
.button:hover,.nav nav .button:hover,.hero-actions .button:hover,.bs-plan .button:hover,.bs-plan:not(.featured) .button:hover{
  background:#373334;border-color:#373334;color:#fff;box-shadow:none;transform:none;
}
.button.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.button.light:hover{background:#ECE7E1;color:var(--ink);border-color:#ECE7E1}
.text-link{border-color:currentColor;text-decoration:none}
.eyebrow{letter-spacing:1.35px;color:inherit}
.eyebrow::before{background:var(--sz-rose);transform:none;border-radius:0;width:5px;height:5px}
h1,h2,h3{color:inherit}
em{font-weight:400}
.intro,.micro{color:var(--muted)}

/* Homepage: let the words and the actual work speak. */
.studio-hero{background:var(--paper);padding-top:42px}
.studio-topline{margin-bottom:23px}
.studio-hero h1,.studio-hero .szara-headline{
  color:var(--ink);line-height:1.065;letter-spacing:-.065em;
}
.studio-hero h1 em,.studio-hero .szara-headline em,
.bs-hero h1 em,.bs-section-title h2 em,.problem h2 em,
.section-top h2 em{color:inherit}
.studio-hero .intro{max-width:465px;line-height:1.7}
.studio-hero .micro{max-width:425px}
.studio-ribbon{
  background:var(--sz-surface);color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  letter-spacing:1.1px;font-weight:650;
}
.studio-ribbon b{color:var(--sz-rose-dark)}
.work-backdrop{
  background:#DBD2CB;border-color:#AFA49A;border-radius:2px;
  transform:none;box-shadow:none;
}
.work-backdrop span{color:#8F817C;opacity:.25}
.work-window{
  background:#fff;border:1px solid #BEB7B0;border-radius:2px;
  box-shadow:0 9px 26px rgba(35,31,31,.10);
}
.work-main,.work-front{transform:none}
.work-window:hover{transform:translateY(-4px);box-shadow:0 12px 25px rgba(35,31,31,.13)}
.window-top{background:#F5F2EF;border-color:#D5CEC8;color:#3C3836}
.work-ticket{
  background:#ECE2DF;border:1px solid #D4C7C3;
  transform:none;box-shadow:0 4px 15px rgba(35,31,31,.10);
}
.work-spark,.scene-cross,.scene-scribble{display:none}
.work-stamp,.scene-index{display:none}
.work-stage .work-main{left:0}
.work-stage .work-front{right:0}
.pour-frame{background:#D7CAC7;border-color:#9E938C;border-radius:2px;transform:none;box-shadow:none}
.pour-bar{background:#EEE8E3;border-color:#9E938C}
.pour-word{color:#A89491}
.pour-project{border-radius:2px;box-shadow:0 8px 20px rgba(35,31,31,.13)}
.pour-star{color:var(--sz-rose-dark)}
.pour-note{background:#E6C7CB;box-shadow:none;transform:none}
.studio-stage::before{
  background:radial-gradient(ellipse at 60% 40%,#E4D8D3 0%,#CEBDB7 90%);
  box-shadow:none
}
.scene-orbit{border-color:#C6B7B1}
.scene-type{color:#9D8884}
.studio-stage .desktop,.studio-stage .mini-browser{border-radius:2px;box-shadow:0 12px 28px rgba(35,31,31,.15)}
.studio-stage .sticker,.scene-label,.campaign-cutout{background:#E6C7CB;color:var(--ink);box-shadow:none}
.scene-label-icon{background:var(--ink);border-radius:2px}

/* Alternate charcoal and ivory sections without clashing palettes. */
.section-cream,#work,.problem,.bs-examples{background:var(--sz-surface)}
.services,.client-voices,.package,.bs-pricing{background:var(--sz-dark);color:var(--paper)}
.client-voices+.services{background:#2B2829}
.services h2 em,.client-voices h2 em,.package h2 em,
.bs-pricing .bs-section-title h2 em{color:#E6C7CB}
.services .eyebrow::before,.client-voices .eyebrow::before,
.package .eyebrow::before{background:var(--sz-rose)}
.services .section-top>p,.client-voices .section-top>p,
.service p,.package-fit,.care-purpose{color:#D8D1CD}
.service h3 span,.service a:hover,.service-offer strong,
.care-price,.voice-label{color:#E6C7CB}
.service-grid,.service+.service{border-color:#605A58}
.service .number{color:#D9C5C1;font-family:'DM Sans',Arial,sans-serif;font-size:10px;letter-spacing:1px}
.service h3{letter-spacing:-.055em}
.service a{border-color:#807675}
.service-offer{border-color:#605A58}
.service-offer small,.voice-org,.voices-note{color:#D8D1CD}
.client-voices .voice{border:1px solid #5B5553;border-radius:2px;background:#2B2829}
.voice-text{color:#FAF9F6}
.fit-section{background:#EDE6E2}
.step{border-color:#C99DA3}
.step>span{color:var(--sz-rose-dark)}
.offer-strip,.care-example{background:#F4F0EB;border:1px solid var(--line);border-radius:2px;box-shadow:none}
.care-example{background:#FFFFFF0C;border-color:#605A58;color:var(--paper)}
.about-watermark{color:#E6E0DA}
.team-photo{background:#fff;transform:none;box-shadow:none;border:1px solid var(--line)}
.team-photo::after{background:#E6C7CB;transform:none;box-shadow:none}
.project-visual,.case-image{background:#E6DFDA;border:1px solid #DED7D1;border-radius:2px}
.project:nth-child(2) .project-visual,
.case-study:nth-child(2) .case-image{background:#E4E3DF}
.project:nth-child(3) .project-visual,
.case-study:nth-child(3) .case-image{background:#EADDDD}
.project-visual::before{border-color:#FFFFFF85;border-radius:0}
.project-visual img,.project:nth-child(2) .project-visual img,
.case-image img,.case-study:nth-child(2) .case-image img{
  border:5px solid #fff;border-radius:1px;transform:none;
  box-shadow:0 8px 22px rgba(35,31,31,.13)
}
.project-visual:hover img,.project:nth-child(2) .project-visual:hover img,
.case-image:hover img,.case-study:nth-child(2) .case-image:hover img{
  transform:translateY(-3px);box-shadow:0 11px 26px rgba(35,31,31,.16)
}
.tool-visual{background:#403739;border:1px solid #5E5354;border-radius:2px;box-shadow:none;color:#fff}
.tool-line b{color:#E6C7CB!important}
.tool-visual .eyebrow::before{background:var(--sz-rose)}
.row-arrow{color:var(--sz-rose-dark)!important}

/* Dark inquiry sections with clear, comfortable form fields. */
.contact,.bs-contact{background:#302B2D;color:var(--paper)}
.contact::before{display:none}
.contact h2 em,.bs-contact h2 em{color:#E6C7CB}
.contact .eyebrow::before{background:var(--sz-rose)}
.contact .intro,.bs-contact .intro,
.contact .micro,.bs-contact .micro{color:#E6DFD9}
.brief,.bs-contact .brief{background:var(--paper);color:var(--ink);border:1px solid #E3DED8;border-radius:2px;box-shadow:none}
.brief h3,.brief p,.brief label,.brief .micro{color:var(--ink)}
.brief input,.brief textarea,.brief select,
input,textarea,select{
  border-radius:2px;border-color:#BBB3AD;background:#fff;color:var(--ink);
}
.brief input:focus,.brief textarea:focus,.brief select:focus{outline:2px solid var(--sz-rose-dark);outline-offset:2px}
.brief .form-fallback{border-color:var(--line)}
.contact :focus-visible,.services :focus-visible,.package :focus-visible,
.footer :focus-visible{outline-color:#E6C7CB}
.contact .brief :focus-visible{outline-color:var(--sz-rose-dark)}
.footer{background:#1B1B1B;color:var(--paper)}
.footer-bottom{border-color:#595452;color:#CDC5BF}

/* Business support: same palette and straight edges throughout. */
.bs-hero{background:var(--paper)}
.bs-board{background:#292627;color:var(--paper);border:1px solid #514B4A;border-radius:2px;box-shadow:none;transform:none}
.bs-board:before{background:#DCC5C1;width:58px;height:58px;border-radius:0}
.bs-board-head{border-color:#625958}
.bs-board-head span,.bs-board-note,.bs-row small{color:#D8D1CD}
.bs-board-head .bs-dot{background:#E6C7CB;color:var(--ink);border-radius:2px}
.bs-pill{background:#595052;color:#fff;border-radius:2px}
.bs-pill.is-new{background:#E6C7CB;color:var(--ink)}
.bs-row{border-color:#544D4B}
.bs-proofline span{border-color:var(--sz-rose)}
.bs-feature,.bs-example{background:#fff;border:1px solid var(--line);border-radius:2px}
.bs-feature .bs-no{color:var(--sz-rose-dark);font-family:'DM Sans',Arial,sans-serif;letter-spacing:1px;margin-bottom:34px}
.bs-plan{background:#2C292A;border-color:#625B58;border-radius:2px}
.bs-plan.featured{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.bs-plan .bs-label{font-family:'DM Sans',Arial,sans-serif;letter-spacing:1px}
.bs-plan .bs-hours,.bs-terms,.bs-pricing .bs-section-title>p:last-child{color:#D8D1CD;border-color:#5B5553}
.bs-plan.featured .bs-hours{color:var(--muted);border-color:var(--line)}
.bs-plan .button,.bs-plan:not(.featured) .button{background:#FAF9F6;border-color:#FAF9F6;color:#1B1B1B}
.bs-plan .button:hover,.bs-plan:not(.featured) .button:hover{background:#E6E0DA;border-color:#E6E0DA;color:#1B1B1B}
.bs-plan.featured .button{background:#1B1B1B;border-color:#1B1B1B;color:#fff}
.bs-plan.featured .button:hover{background:#373334;border-color:#373334;color:#fff}
.bs-sample-table th{border-color:#D0C8C2}
.bs-sample-table td{border-color:#E4DFDA}
.bs-sample-table td:last-child{color:var(--sz-rose-dark)}
.bs-steps li{border-color:var(--line)}
.bs-steps li::before,.bs-approach-grid .bs-checks li::before{color:var(--sz-rose-dark)}
.bs-teaser{background:#F0E8E5;border-color:#DED4D0}
.bs-teaser p:last-child{color:var(--muted)}
.bs-contact .brief label{color:var(--ink)}
/* Shared case-study, price, FAQ and editorial UI. */
.detail-page figure img{border-radius:2px;box-shadow:none}
.detail-page .detail-cta{border-color:var(--line)}
.work-row[href*="ontymerides"],.work-row[href*="truluvhomes"]{border-color:var(--sz-rose)}
.faq details{border-color:var(--line)}
:where(.package,.services,.bs-pricing,.client-voices) a:not(.button){color:inherit}

/* Mobile: preserve usability and reduce header noise. */
@media(max-width:900px){
  .nav{min-height:72px}
  .mobile-jumps{gap:20px;padding:0 16px 12px;justify-content:center}
  .mobile-jumps a{font-size:11px;font-weight:650;padding:10px 0}
}
@media(max-width:720px){
  .studio-hero{padding:30px 0 20px}
  .studio-topline{margin-bottom:15px}
  .studio-hero .szara-headline{font-size:clamp(36px,9.2vw,49px);line-height:1.095;letter-spacing:-.061em;max-width:100%}
  .studio-hero .intro{line-height:1.65}
  .hero-actions{gap:14px}
  .hero-actions .button{min-height:48px}
  .work-stage .work-main{left:1%}
  .work-stage .work-front{right:1%}
  .bs-board{margin-right:0;box-shadow:none}
  .bs-feature .bs-no{margin-bottom:24px}
  .bs-actions{gap:16px}
}
@media(max-width:480px){
  .nav .button{padding:10px 12px;min-height:43px;font-size:11px}
  .nav .button>span{font-size:14px}
  .mobile-jumps{gap:14px}
  .bs-row{grid-template-columns:1fr}
  .bs-pill{justify-self:start}
  .studio-ribbon{background:var(--sz-surface)}
  .work-backdrop{box-shadow:none;border-radius:2px}
  .work-window{box-shadow:0 7px 17px rgba(35,31,31,.11);border-radius:2px}
  .bs-plan .button,.bs-plan:not(.featured) .button{min-height:48px}
}
@media(prefers-reduced-motion:reduce){
  .button,.work-window,.project-visual img,.case-image img{transition:none}
}

/* Finishing details: no dark-on-dark calls to action or leftover playful shapes. */
.button.orange{background:var(--ink);border-color:var(--ink);color:#fff}
.button.orange:hover{background:#373334;border-color:#373334;color:#fff}
.services .button,.package .button,.client-voices .button,.service-offer .button{
  background:var(--paper);border-color:var(--paper);color:var(--ink);
}
.services .button:hover,.package .button:hover,.client-voices .button:hover,.service-offer .button:hover{
  background:#E6E0DA;border-color:#E6E0DA;color:var(--ink);
}
.studio-stage .sticker{border-radius:2px;transform:none;filter:none}
.services::after{display:none}
.bs-board::before{display:none}


/* Mobile review, 17 Oct: spacing, arrows, and service hierarchy. */
.client-voices.quick-feedback .voice{
  padding:28px 30px;
  border:1px solid #5B5553;
  background:#2B2829;
  border-radius:2px;
}
.client-voices.quick-feedback .voice-text{
  max-width:62ch;margin:0 0 20px;line-height:1.6;
}
.service .number{display:block}
@media (max-width:720px){
  .services{padding-top:55px;padding-bottom:52px}
  .services .section-top{margin-bottom:30px}
  .services .section-top h2{font-size:clamp(37px,10vw,46px);line-height:1.08}
  .services .service-grid{gap:0}
  .services .service{padding:26px 0 28px}
  .services .service + .service{padding-top:27px}
  .services .service .number{margin-bottom:14px;font-size:10px;letter-spacing:1.1px}
  .services .service h3{font-size:clamp(37px,10vw,46px);line-height:1.04;letter-spacing:-.045em;margin:0 0 15px}
  .services .service h3 span{display:block;font-size:13px;line-height:1.3;letter-spacing:0;margin-top:7px}
  .services .service p{font-size:15px;line-height:1.58;max-width:38rem;margin:0 0 13px}
  .services .service ul{font-size:14px;line-height:1.65;padding:0;margin:12px 0 0}
  .services .service a{margin-top:12px;padding:10px 0;font-size:13px}
  .services .service-offer{margin-top:9px;padding-top:24px;gap:19px}
  .services .service-offer strong{font-size:19px}
  .client-voices.quick-feedback .voice{padding:22px 22px}
  .client-voices.quick-feedback .voice-text{font-size:17px;line-height:1.55}
}

/* Brand signature in the homepage hero: rose with accessible contrast on ivory. */
.studio-hero .szara-headline em{color:#8B6268}


/* Screenshot-driven mobile audit: project headings, review cards, contact and footer. */
#more-work .section-top{margin-bottom:24px}
#more-work .work-more{margin-top:0}
#more-work .work-row:first-child{border-top:0}
.review-destinations{grid-template-columns:minmax(0,1fr);min-width:0}
.review-destinations article{min-width:0;border-color:var(--sz-rose-dark);padding-left:20px}
.review-destinations article p{max-width:48ch}
.review-destinations article a{overflow-wrap:anywhere;text-underline-offset:4px}
.independent-reviews .eyebrow{color:#E6C7CB}
.contact .brief .reply-time{font-size:12px;line-height:1.55;color:var(--muted);margin:-2px 0 18px}
.contact .brief .enquiry-privacy{font-size:12px;line-height:1.65;color:var(--muted);margin-top:18px}
.footer .analytics-preferences{
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;padding:4px 0;border:0;border-bottom:1px solid #8D817F;
  border-radius:0;box-shadow:none;background:transparent;color:#EDE5E0;
  min-height:36px;font:500 12px 'DM Sans',Arial,sans-serif;
}
.footer .analytics-preferences:hover{color:#fff;border-color:#fff}
.analytics-preferences:focus-visible{outline:2px solid #E6C7CB;outline-offset:3px}
.analytics-choice{background:var(--paper);border:1px solid var(--line);border-radius:2px;color:var(--ink);box-shadow:0 12px 35px #0003}
.analytics-choice a{color:var(--sz-rose-dark)}
.analytics-choice button{background:var(--ink);border-color:var(--ink);border-radius:2px}
@media(max-width:720px){
  #more-work .section-top{margin-bottom:22px}
  #more-work .work-row{padding:20px 0 22px}
  #more-work .work-row h3{font-size:clamp(19px,5.3vw,23px);line-height:1.25}
  .independent-reviews{margin-top:35px;padding-top:25px;gap:18px}
  .independent-reviews h3{font-size:clamp(26px,7.1vw,34px)}
  .review-destinations{grid-template-columns:minmax(0,1fr)}
  .review-destinations article{padding-left:17px}
  .review-destinations h4{font-size:22px}
  .review-destinations article p,.review-destinations article a{font-size:14px;line-height:1.6}
  .founder-grid{gap:22px}
  .contact .contact-grid{align-items:start}
  .contact .brief{width:100%;max-width:650px;padding:24px}
  .contact .brief h3{font-size:clamp(25px,7vw,30px)}
  .contact .brief>p{line-height:1.65}
  .contact .brief .reply-time{font-size:12px;margin:0 0 14px}
  .contact .brief .enquiry-privacy{font-size:12px;line-height:1.6}
  .footer .analytics-preferences{min-height:36px;margin-top:2px}
}