/* Urban Web production polish — static cPanel export */
:root{
  --uw-forest:#173c2b;
  --uw-forest-deep:#0d2a1d;
  --uw-leaf:#5f8f45;
  --uw-lime:#a9c85c;
  --uw-orange:#d86f35;
  --uw-cream:#f6f0df;
  --uw-paper:#fffdf7;
  --uw-ink:#193229;
  --uw-muted:#66756e;
  --uw-radius:22px;
  --uw-shadow:0 18px 45px rgba(13,42,29,.13);
}
html{scroll-behavior:smooth}
body{background:var(--uw-paper);color:var(--uw-ink);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.site-header{background:rgba(246,240,223,.97)!important;border-bottom:1px solid rgba(23,60,43,.11)!important;box-shadow:0 8px 30px rgba(13,42,29,.06)!important;backdrop-filter:blur(14px)}
.brand{gap:.78rem!important;min-width:max-content}
.brand-gecko{display:block!important;width:118px!important;height:62px!important;object-fit:contain!important;filter:drop-shadow(0 4px 6px rgba(13,42,29,.14));animation:none!important;transform:none!important}
.brand-copy{line-height:.9}
.brand-wordmark{letter-spacing:-.055em!important}
.brand-copy small{letter-spacing:.17em!important;margin-top:.45rem!important}
.site-header a,.site-header summary{transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease}
.site-header .nav-link:hover,.services-menu summary:hover{color:var(--uw-orange)!important}
.quote-nav-link{box-shadow:0 8px 18px rgba(216,111,53,.17)}
.hero{isolation:isolate;min-height:clamp(690px,82vh,920px)!important}
.hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,31,21,.82) 0%,rgba(8,31,21,.54) 43%,rgba(8,31,21,.06) 76%),linear-gradient(0deg,rgba(8,31,21,.48) 0%,transparent 48%)}
.hero figure,.hero>figure img{height:100%!important}
.hero>figure img{object-fit:cover!important;object-position:center 54%!important}
.hero-copy{position:relative;z-index:2;max-width:780px!important;padding-top:clamp(7rem,12vh,10rem)!important;padding-bottom:clamp(5rem,10vh,8rem)!important}
.hero-title-option-one{max-width:16ch!important;text-wrap:balance;text-shadow:0 3px 24px rgba(0,0,0,.28)}
.hero-main-line{letter-spacing:-.055em!important}
.hero-kicker-line,.hero-since-line{letter-spacing:.14em!important}
.hero-actions a{min-height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px!important;padding-inline:1.45rem!important;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.portfolio-section{padding-top:clamp(5rem,8vw,8rem)!important;padding-bottom:clamp(5rem,8vw,8rem)!important}
.portfolio-intro{max-width:760px!important;margin-bottom:clamp(2.5rem,5vw,4rem)!important}
.project-grid{gap:clamp(1.25rem,2.2vw,2rem)!important;align-items:stretch}
.project-browser{border-radius:var(--uw-radius)!important;overflow:hidden!important;background:#fff!important;border:1px solid rgba(23,60,43,.12)!important;box-shadow:var(--uw-shadow)!important;height:100%;display:flex!important;flex-direction:column!important}
.project-browser img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:#eef1eb}
.project-card-copy{padding:clamp(1.35rem,2.2vw,2rem)!important;display:flex!important;flex-direction:column!important;gap:.72rem!important;flex:1}
.project-card-copy h3{margin:0!important;line-height:1.12!important}
.project-service{margin:0!important;letter-spacing:.12em!important}
.project-summary{margin:0!important;line-height:1.68!important;color:var(--uw-muted)!important}
.project-live-link{margin-top:auto!important;padding-top:.55rem!important;font-weight:750!important}
.content-section,.service-section,.process-section,.pricing-section,.blog-section,.faq-section{content-visibility:auto;contain-intrinsic-size:1px 850px}
.content-section h2,.service-section h2,.process-section h2,.pricing-section h2,.blog-section h2,.faq-section h2{text-wrap:balance}
.pricing-card{border-radius:var(--uw-radius)!important;border:1px solid rgba(23,60,43,.12)!important;box-shadow:0 12px 35px rgba(13,42,29,.09)!important}
.site-footer{border-top:1px solid rgba(246,240,223,.15)}
:focus-visible{outline:3px solid var(--uw-orange)!important;outline-offset:4px!important}
@media (max-width:1120px){.brand-gecko{width:96px!important;height:52px!important}.desktop-nav{gap:.75rem!important}}
@media (max-width:760px){
 .site-header{padding-block:.7rem!important}
 .brand-gecko{width:82px!important;height:46px!important}
 .brand-copy small{font-size:.54rem!important;letter-spacing:.11em!important}
 .hero{min-height:720px!important}
 .hero:after{background:linear-gradient(0deg,rgba(8,31,21,.88) 0%,rgba(8,31,21,.54) 60%,rgba(8,31,21,.15) 100%)}
 .hero-copy{padding-top:8rem!important;padding-bottom:4rem!important}
 .hero-title-option-one{max-width:12ch!important}
 .hero-actions{align-items:stretch!important}
 .hero-actions a{width:100%}
 .project-grid{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-header a,.site-header summary{transition:none!important}*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* Hydration-safe static identity: compiled React may restore the former inline SVG. */
.brand::before{content:"";display:block;flex:0 0 118px;width:118px;height:62px;background:url('/images/urbanweb-gecko-mark.svg') center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(13,42,29,.14))}
.brand>.brand-gecko{display:none!important}
.brand .gecko-animal,.brand .gecko-tail,.brand .gecko-leg,.brand .gecko-body,.brand .gecko-shadow{animation:none!important;transform:none!important}
@media (max-width:1120px){.brand::before{flex-basis:96px;width:96px;height:52px}}
@media (max-width:760px){.brand::before{flex-basis:82px;width:82px;height:46px}}

/* === 2026 Funky West Coast visual pass === */
:root{
  --uw-pacific:#2f6f78;
  --uw-sunset:#e27a38;
  --uw-sun:#f0b34b;
  --uw-moss:#6f9346;
  --uw-driftwood:#cba77b;
}

/* Restored archived gecko, paired with the existing clean wordmark. */
.brand::before{
  flex-basis:132px!important;
  width:132px!important;
  height:64px!important;
  background-image:url('/images/urbanweb-original-gecko-restored.webp')!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  filter:drop-shadow(0 5px 7px rgba(13,42,29,.18)) saturate(1.03)!important;
}
.brand-wordmark{
  color:var(--uw-forest-deep)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.brand-copy small{color:#587060!important}

/* Rich golden-hour hero rather than a pale overlay. */
.hero>figure img{
  filter:saturate(1.22) contrast(1.1) brightness(.9) sepia(.04)!important;
  transform:scale(1.012);
}
.hero:after{
  background:
    radial-gradient(circle at 76% 28%,rgba(240,179,75,.22) 0%,rgba(226,122,56,.10) 22%,transparent 43%),
    linear-gradient(90deg,rgba(7,31,22,.88) 0%,rgba(7,31,22,.62) 39%,rgba(7,31,22,.13) 72%,rgba(7,31,22,.02) 100%),
    linear-gradient(0deg,rgba(7,31,22,.52) 0%,rgba(7,31,22,.08) 46%,transparent 68%)!important;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.hero-copy{z-index:3!important}
.hero-kicker-line{color:#f5d89f!important}
.hero-title-option-one{filter:drop-shadow(0 7px 22px rgba(0,0,0,.27))}
.hero-actions .button:first-child{background:var(--uw-sunset)!important;border-color:var(--uw-sunset)!important;box-shadow:0 15px 34px rgba(226,122,56,.28)!important}
.hero-actions .button:first-child:hover{transform:translateY(-2px) rotate(-.4deg)!important}
.hero-actions .button.outline:hover{transform:translateY(-2px) rotate(.35deg)!important}

/* Organic section details and handcrafted accents. */
.portfolio-section,.service-section,.blog-section,.pricing-section,.faq-section{position:relative;overflow:hidden}
.portfolio-section:before{
  content:"";
  position:absolute;
  width:260px;height:260px;
  right:-110px;top:50px;
  border:3px solid rgba(47,111,120,.13);
  border-radius:46% 54% 58% 42%/45% 48% 52% 55%;
  transform:rotate(17deg);
  pointer-events:none;
}
.portfolio-intro:after{
  content:"";
  display:block;
  width:118px;height:13px;
  margin-top:1.25rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='118' height='13' viewBox='0 0 118 13'%3E%3Cpath d='M2 8c18-8 34 4 52-1s37-5 62 1' fill='none' stroke='%23e27a38' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.project-browser{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
.project-browser:nth-child(odd){transform:rotate(-.25deg)}
.project-browser:nth-child(even){transform:rotate(.25deg)}
.project-browser:hover{transform:translateY(-7px) rotate(0)!important;box-shadow:0 25px 60px rgba(13,42,29,.18)!important;border-color:rgba(226,122,56,.35)!important}
.project-browser:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--uw-sunset),var(--uw-sun),var(--uw-pacific));
  z-index:2;
}
.project-browser{position:relative}
.project-service{color:var(--uw-sunset)!important}
.project-live-link{color:var(--uw-forest)!important;text-decoration-thickness:2px;text-underline-offset:4px}

/* Funky but restrained badges/cards. */
.eyebrow,.pricing-label,.since-badge{
  display:inline-flex!important;
  align-items:center;
  gap:.45rem;
  border-radius:999px!important;
  padding:.45rem .8rem!important;
  background:rgba(111,147,70,.11)!important;
  color:var(--uw-forest)!important;
}
.since-badge{transform:rotate(-1.5deg)}
.service-grid>*:nth-child(2n),.pricing-card:nth-child(2n){transform:translateY(8px)}
.service-grid>*{transition:transform .2s ease,box-shadow .2s ease}
.service-grid>*:hover{transform:translateY(-5px) rotate(.25deg)!important}

/* West Coast footer destination. */
.site-footer{position:relative;overflow:hidden;background:
  radial-gradient(circle at 85% 18%,rgba(240,179,75,.10),transparent 24%),
  var(--uw-forest-deep)!important}
.site-footer:before{
  content:"";
  position:absolute;
  left:0;right:0;top:-1px;height:58px;
  opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='58' viewBox='0 0 1440 58' preserveAspectRatio='none'%3E%3Cpath d='M0 43c90-14 143-3 225-13 100-12 161 18 262 8 118-12 172-30 302-20 104 8 161 29 277 18 135-13 202-43 374-17v39H0z' fill='%23f6f0df'/%3E%3C/svg%3E") center top/100% 100% no-repeat;
}
.site-footer>*{position:relative;z-index:1}

@media (max-width:1120px){
  .brand::before{flex-basis:110px!important;width:110px!important;height:56px!important}
}
@media (max-width:760px){
  .brand::before{flex-basis:88px!important;width:88px!important;height:48px!important}
  .hero>figure img{object-position:63% 52%!important;filter:saturate(1.16) contrast(1.08) brightness(.86)!important}
  .hero:after{background:linear-gradient(0deg,rgba(7,31,22,.92) 0%,rgba(7,31,22,.61) 58%,rgba(7,31,22,.16) 100%)!important}
  .project-browser:nth-child(n){transform:none}
  .service-grid>*:nth-child(n),.pricing-card:nth-child(n){transform:none}
}
@media (prefers-reduced-motion:reduce){.project-browser,.service-grid>*{transition:none!important}.project-browser:hover,.service-grid>*:hover,.hero-actions .button:hover{transform:none!important}}

/* === Hero clarity correction: brighter image, clean white type, no green wash === */
.hero>figure img{
  filter:saturate(1.08) contrast(1.04) brightness(1.04)!important;
  transform:scale(1.006)!important;
}
.hero:after{
  background:
    linear-gradient(90deg,rgba(8,18,15,.64) 0%,rgba(8,18,15,.42) 34%,rgba(8,18,15,.12) 62%,rgba(8,18,15,0) 82%),
    linear-gradient(0deg,rgba(8,18,15,.22) 0%,rgba(8,18,15,0) 46%)!important;
}
.hero:before{display:none!important}
.hero-copy,.hero-copy p,.hero-copy h1,.hero-copy span{opacity:1!important}
.hero-copy{color:#fff!important}
.hero-copy .eyebrow,.hero-kicker-line,.hero-since-line{
  color:#fff!important;
  background:rgba(12,35,27,.22)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.48)!important;
}
.hero-title-option-one,.hero-title-option-one span{
  color:#fff!important;
  text-shadow:0 3px 18px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.45)!important;
  filter:none!important;
}
.hero-copy .hero-description,.hero-copy .lede,.hero-copy>p:not(.eyebrow){
  color:rgba(255,255,255,.96)!important;
  text-shadow:0 2px 12px rgba(0,0,0,.5)!important;
}
@media (max-width:760px){
  .hero>figure img{filter:saturate(1.06) contrast(1.03) brightness(1.02)!important}
  .hero:after{
    background:linear-gradient(0deg,rgba(8,18,15,.74) 0%,rgba(8,18,15,.38) 55%,rgba(8,18,15,.07) 100%)!important;
  }
}

/* === Hero overlay experiment: Pacific dusk — mobile-first readability === */
.hero > figure img {
  filter: saturate(1.12) contrast(1.06) brightness(1.03) !important;
}
.hero::after {
  background:
    radial-gradient(circle at 82% 24%, rgba(244,166,74,.16) 0%, rgba(244,166,74,.05) 24%, transparent 44%),
    linear-gradient(90deg, rgba(12,22,31,.76) 0%, rgba(12,22,31,.54) 32%, rgba(12,22,31,.18) 58%, rgba(12,22,31,0) 80%),
    linear-gradient(0deg, rgba(12,22,31,.24) 0%, rgba(12,22,31,0) 48%) !important;
}
.hero-copy {
  color:#fff !important;
}
.hero-copy .eyebrow,
.hero-kicker-line,
.hero-since-line {
  background: rgba(14,27,36,.28) !important;
  border-color: rgba(255,255,255,.30) !important;
  color:#fff !important;
}
.hero-title-option-one,
.hero-title-option-one span {
  color:#fff !important;
  text-shadow:0 4px 22px rgba(0,0,0,.62),0 1px 3px rgba(0,0,0,.58) !important;
}
.hero-copy .hero-description,
.hero-copy .lede,
.hero-copy > p:not(.eyebrow) {
  color:rgba(255,255,255,.98) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.64) !important;
}

@media (max-width:760px) {
  .hero {
    min-height:760px !important;
  }
  .hero > figure img {
    object-position:66% 50% !important;
    filter:saturate(1.10) contrast(1.06) brightness(1.05) !important;
  }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(12,22,31,.10) 0%, rgba(12,22,31,.16) 30%, rgba(12,22,31,.54) 59%, rgba(12,22,31,.88) 100%) !important;
  }
  .hero-copy {
    width:calc(100% - 1.5rem) !important;
    max-width:620px !important;
    margin-inline:auto !important;
    padding:1.35rem 1.15rem 1.5rem !important;
    border-radius:24px !important;
    background:linear-gradient(145deg,rgba(10,22,31,.82),rgba(10,22,31,.64)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 18px 46px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(5px) saturate(1.05);
    -webkit-backdrop-filter:blur(5px) saturate(1.05);
    position:absolute !important;
    left:50% !important;
    bottom:1.1rem !important;
    transform:translateX(-50%) !important;
  }
  .hero-copy .eyebrow,
  .hero-kicker-line,
  .hero-since-line {
    background:rgba(255,255,255,.08) !important;
  }
  .hero-title-option-one {
    max-width:14ch !important;
  }
}

@media (max-width:420px) {
  .hero { min-height:735px !important; }
  .hero-copy {
    width:calc(100% - 1rem) !important;
    padding:1.15rem .95rem 1.25rem !important;
    border-radius:20px !important;
    bottom:.65rem !important;
  }
}

/* === Hero flow refinement — open West Coast composition, July 2026 === */
.hero {
  min-height: clamp(680px, 80vh, 860px) !important;
  display: grid !important;
  align-items: center !important;
  background: #13231f !important;
}
.hero > figure img {
  object-position: center 52% !important;
  filter: saturate(1.08) contrast(1.05) brightness(1.04) !important;
}
.hero::before {
  display: none !important;
}
.hero::after {
  background:
    linear-gradient(90deg,
      rgba(7, 16, 21, .78) 0%,
      rgba(7, 16, 21, .58) 28%,
      rgba(7, 16, 21, .28) 48%,
      rgba(7, 16, 21, .06) 72%,
      rgba(7, 16, 21, 0) 100%),
    linear-gradient(0deg,
      rgba(7, 16, 21, .30) 0%,
      rgba(7, 16, 21, .08) 42%,
      rgba(7, 16, 21, 0) 70%) !important;
}
.hero-copy {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(760px, 88vw) !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding: clamp(5.5rem, 9vh, 8rem) 0 clamp(4.5rem, 8vh, 7rem) clamp(1.4rem, 6vw, 7rem) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-copy .eyebrow {
  width: fit-content !important;
  padding: .48rem .78rem !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 999px !important;
  background: rgba(8, 22, 25, .34) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}
.hero-title-option-one,
.hero-title-option-one span {
  text-shadow: 0 4px 24px rgba(0,0,0,.54), 0 1px 2px rgba(0,0,0,.6) !important;
}
.hero-copy .lede {
  max-width: 650px !important;
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.55) !important;
}
.hero-actions {
  margin-top: clamp(1.5rem, 3vw, 2.2rem) !important;
}

/* Make the heritage badge intentional and readable. */
.since-badge {
  display: grid !important;
  right: clamp(1.4rem, 5vw, 5.5rem) !important;
  bottom: clamp(1.5rem, 4vw, 4.5rem) !important;
  width: 168px !important;
  height: 168px !important;
  padding: 1.1rem !important;
  border: 3px solid rgba(255,255,255,.78) !important;
  outline: 7px solid rgba(17,65,49,.86) !important;
  border-radius: 50% !important;
  background: rgba(255,250,236,.94) !important;
  color: #183a2f !important;
  text-shadow: none !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
  transform: rotate(-5deg) !important;
  line-height: 1.05 !important;
  letter-spacing: .08em !important;
  font-size: .78rem !important;
}
.since-badge strong {
  display: block !important;
  margin: .18rem 0 !important;
  color: #d86832 !important;
  font-size: 2.45rem !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
}
.gecko-walk { display: none !important; }

@media (max-width: 950px) {
  .since-badge {
    display: grid !important;
    width: 132px !important;
    height: 132px !important;
    right: 1.25rem !important;
    bottom: 1.35rem !important;
    outline-width: 5px !important;
    font-size: .66rem !important;
  }
  .since-badge strong { font-size: 1.9rem !important; }
}

@media (max-width: 760px) {
  .hero {
    min-height: 710px !important;
    align-items: end !important;
  }
  .hero > figure img {
    object-position: 64% 48% !important;
    filter: saturate(1.08) contrast(1.04) brightness(1.03) !important;
  }
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(7,16,21,.04) 0%,
        rgba(7,16,21,.10) 28%,
        rgba(7,16,21,.42) 56%,
        rgba(7,16,21,.82) 82%,
        rgba(7,16,21,.94) 100%),
      linear-gradient(90deg,
        rgba(7,16,21,.58) 0%,
        rgba(7,16,21,.24) 62%,
        rgba(7,16,21,.04) 100%) !important;
  }
  .hero-copy {
    width: 100% !important;
    max-width: none !important;
    padding: 7rem 1.25rem 7.5rem !important;
  }
  .hero-copy .eyebrow {
    padding: .42rem .68rem !important;
    font-size: .7rem !important;
  }
  .hero-title-option-one {
    max-width: 13ch !important;
  }
  .hero-actions {
    gap: .75rem !important;
  }
  .hero-actions a {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 150px !important;
  }
  .since-badge {
    width: auto !important;
    height: auto !important;
    right: 1rem !important;
    bottom: 1rem !important;
    padding: .56rem .72rem !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    outline: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,250,236,.95) !important;
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    transform: rotate(-2deg) !important;
    font-size: .62rem !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.24) !important;
  }
  .since-badge strong {
    display: inline !important;
    margin: 0 !important;
    font-size: 1.02rem !important;
    letter-spacing: -.02em !important;
  }
}

@media (max-width: 420px) {
  .hero { min-height: 690px !important; }
  .hero-copy { padding: 6rem 1rem 7.25rem !important; }
  .since-badge {
    left: 1rem !important;
    right: auto !important;
    bottom: .85rem !important;
  }
}

/* =========================================================
   URBAN WEB — PACIFIC WORKSHOP VISUAL SYSTEM
   Handcrafted West Coast modernism. July 2026.
   ========================================================= */
:root {
  --uw-ink:#17363a;
  --uw-cedar:#28533d;
  --uw-kelp:#61754a;
  --uw-sunset:#d76332;
  --uw-salmon:#e8845c;
  --uw-seaglass:#82a9a5;
  --uw-paper:#f4ebdd;
  --uw-drift:#b89e7b;
  --uw-white:#fffdf8;
  --uw-line:rgba(23,54,58,.18);
}
html { background:var(--uw-paper); }
body {
  background:var(--uw-paper) !important;
  color:var(--uw-ink) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before {
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* Header: print-studio clarity, not glass UI. */
.site-header {
  background:rgba(255,253,248,.97) !important;
  border-bottom:1px solid var(--uw-line) !important;
  box-shadow:0 4px 24px rgba(23,54,58,.05) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.brand { gap:.5rem !important; }
.brand-gecko { filter:none !important; transform:rotate(-1deg); }
.brand-wordmark { color:var(--uw-ink) !important; letter-spacing:-.045em !important; }
.brand-wordmark span { color:var(--uw-sunset) !important; }
.brand-copy small { color:var(--uw-cedar) !important; letter-spacing:.18em !important; }
.nav-link, .services-menu summary { color:var(--uw-ink) !important; }
.nav-link:hover, .nav-link.is-active, .services-menu summary:hover { color:var(--uw-sunset) !important; }
.quote-nav-link { background:var(--uw-sunset) !important; color:var(--uw-white) !important; border-radius:2px !important; box-shadow:4px 4px 0 var(--uw-ink) !important; transform:rotate(-.35deg); }
.quote-nav-link:hover { transform:translate(2px,2px) rotate(0); box-shadow:2px 2px 0 var(--uw-ink) !important; }

/* Hero: one continuous photographic composition. */
.hero {
  min-height:clamp(650px,82vh,900px) !important;
  isolation:isolate;
  background:var(--uw-ink) !important;
  border-bottom:8px solid var(--uw-sunset);
  overflow:hidden;
}
.hero > figure img {
  object-position:58% 52% !important;
  filter:saturate(1.12) contrast(1.07) brightness(1.02) !important;
  transform:scale(1.012);
}
.hero::after {
  background:
    linear-gradient(90deg,rgba(12,35,39,.94) 0%,rgba(12,35,39,.82) 25%,rgba(12,35,39,.48) 49%,rgba(12,35,39,.10) 72%,transparent 100%),
    linear-gradient(0deg,rgba(10,25,27,.34),transparent 42%) !important;
}
.hero-copy {
  width:min(760px,90vw) !important;
  padding-left:clamp(1.25rem,6vw,7.5rem) !important;
  padding-right:1rem !important;
}
.hero-copy::after {
  content:"48°25′N  ·  123°22′W";
  display:block;
  margin-top:2rem;
  color:rgba(255,253,248,.68);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  writing-mode:horizontal-tb;
}
.hero-copy .eyebrow {
  padding:0 0 .45rem !important;
  border:0 !important;
  border-bottom:2px solid var(--uw-sunset) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  letter-spacing:.19em !important;
}
.hero-title-option-one {
  max-width:12ch !important;
  color:var(--uw-white) !important;
  font-size:clamp(3.7rem,7.4vw,7.7rem) !important;
  line-height:.91 !important;
  letter-spacing:-.048em !important;
  text-transform:none !important;
  text-wrap:balance;
}
.hero-title-option-one .hero-kicker-line,
.hero-title-option-one .hero-main-line,
.hero-title-option-one .hero-since-line {
  background:none !important;
  border:0 !important;
  padding:0 !important;
  color:inherit !important;
}
.hero-title-option-one .hero-since-line { color:#f3aa76 !important; }
.hero-copy .lede {
  max-width:580px !important;
  font-size:clamp(1.02rem,1.5vw,1.22rem) !important;
  line-height:1.58 !important;
}
.hero-actions .button {
  border-radius:2px !important;
  padding:1rem 1.35rem !important;
  letter-spacing:.04em;
}
.hero-actions .button:first-child { background:var(--uw-sunset) !important; color:#fff !important; box-shadow:5px 5px 0 var(--uw-white) !important; }
.hero-actions .button.outline { border:1px solid rgba(255,255,255,.75) !important; color:#fff !important; background:rgba(10,30,32,.18) !important; }
.since-badge {
  width:150px !important;
  height:150px !important;
  padding:1rem !important;
  border:2px solid var(--uw-sunset) !important;
  outline:0 !important;
  background:rgba(244,235,221,.96) !important;
  color:var(--uw-ink) !important;
  box-shadow:8px 8px 0 rgba(23,54,58,.78) !important;
  transform:rotate(4deg) !important;
  font-size:.68rem !important;
}
.since-badge strong { color:var(--uw-sunset) !important; font-size:2.2rem !important; }

/* Paper foundation; remove the flat yellow cast. */
.trust-strip,.service-section,.portfolio-section,.blog-section,.faq-section,.content-section,.pricing-section {
  background:var(--uw-paper) !important;
}
.split-band,.location-band { background:var(--uw-seaglass) !important; }
.process-section,.site-footer { background:var(--uw-ink) !important; }
.cta { background:var(--uw-sunset) !important; }

/* Editorial section rhythm. */
main section { position:relative; }
.service-section,.portfolio-section,.blog-section,.process-section,.faq-section,.pricing-section {
  padding-top:clamp(5rem,9vw,8.5rem) !important;
  padding-bottom:clamp(5rem,9vw,8.5rem) !important;
}
.portfolio-intro { max-width:860px !important; }
.portfolio-intro::after {
  content:"";
  display:block;
  width:128px;
  height:10px;
  margin-top:1.4rem;
  background:var(--uw-sunset);
  clip-path:polygon(0 35%,100% 0,96% 68%,3% 100%);
  transform:rotate(-1deg);
}

/* Service menu: editorial list instead of generic app cards. */
.service-grid {
  gap:0 !important;
  border-top:1px solid var(--uw-line);
  border-left:1px solid var(--uw-line);
  background:transparent !important;
}
.service-grid > * {
  background:transparent !important;
  border:0 !important;
  border-right:1px solid var(--uw-line) !important;
  border-bottom:1px solid var(--uw-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:clamp(1.7rem,3vw,3rem) !important;
  transition:background .2s ease,transform .2s ease;
}
.service-grid > *:hover { background:var(--uw-white) !important; transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--uw-sunset) !important; }
.service-grid svg { color:var(--uw-sunset) !important; }

/* Portfolio: project posters rather than card grid. */
.project-grid { gap:clamp(1.5rem,3vw,3.5rem) !important; }
.project-grid > * {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.project-grid > *:nth-child(odd) { transform:rotate(-.35deg); }
.project-grid > *:nth-child(even) { transform:rotate(.35deg); }
.project-browser {
  border:1px solid var(--uw-ink) !important;
  border-radius:2px !important;
  box-shadow:10px 10px 0 var(--uw-seaglass) !important;
  overflow:hidden !important;
}
.project-card-copy { padding:1.55rem .35rem .25rem !important; }
.project-service { color:var(--uw-sunset) !important; letter-spacing:.15em !important; }
.project-summary { color:rgba(23,54,58,.78) !important; }
.project-live-link { color:var(--uw-cedar) !important; border-bottom:2px solid var(--uw-sunset); }

/* Proof/process: turn boxes into an illustrated route. */
.process-list { position:relative; }
.process-list::before {
  content:"";
  position:absolute;
  top:2rem; bottom:2rem; left:1.15rem;
  border-left:2px dashed rgba(244,235,221,.42);
}
.process-list > * { position:relative; padding-left:3.5rem !important; }
.process-list > *::before {
  content:"";
  position:absolute;
  left:.72rem; top:1.25rem;
  width:.9rem; height:.9rem;
  border-radius:50%;
  background:var(--uw-sunset);
  outline:5px solid var(--uw-ink);
  border:1px solid var(--uw-paper);
}

/* Testimonials, CTA and footer. */
.testimonial { background:var(--uw-cedar) !important; }
.cta { border-top:1px solid rgba(23,54,58,.25); border-bottom:1px solid rgba(23,54,58,.25); }
.cta .button { background:var(--uw-white) !important; color:var(--uw-ink) !important; border-radius:2px !important; box-shadow:5px 5px 0 var(--uw-ink) !important; }
.site-footer { position:relative; overflow:hidden; }
.site-footer::before {
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:22px;
  background:var(--uw-paper);
  clip-path:polygon(0 0,100% 0,100% 25%,88% 70%,74% 35%,57% 85%,41% 45%,25% 82%,10% 38%,0 72%);
}
.site-footer::after {
  content:"MADE ON THE WEST COAST  ·  BUILT FOR THE REAL WORLD";
  position:absolute;
  right:2rem; bottom:1rem;
  color:rgba(244,235,221,.27);
  font-size:.63rem;
  letter-spacing:.17em;
}

/* Interior pages: calm editorial hero rather than yellow gradients. */
.page-hero,.article-page header {
  background:var(--uw-paper) !important;
  border-bottom:1px solid var(--uw-line) !important;
}
.page-hero.teal,.page-hero.coral,.page-hero.orange,.page-hero.yellow {
  background:
    linear-gradient(120deg,var(--uw-paper) 0 67%,rgba(130,169,165,.44) 67% 100%) !important;
}
.page-hero::after {
  content:"URBAN WEB  /  VICTORIA BC";
  position:absolute;
  right:2.5rem; bottom:1.2rem;
  color:rgba(23,54,58,.42);
  font-size:.62rem;
  letter-spacing:.16em;
}
.page-icon svg,.content-section svg { color:var(--uw-sunset) !important; }
.pricing-card,.blog-grid > *, .faq details {
  border-radius:2px !important;
  border-color:var(--uw-line) !important;
  box-shadow:none !important;
}
.pricing-card.featured { box-shadow:8px 8px 0 var(--uw-seaglass) !important; }

@media (min-width:900px) {
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .project-grid > *:first-child { grid-column:span 2; }
  .project-grid > *:first-child .project-browser { min-height:460px; }
}

@media (max-width:760px) {
  body::before { opacity:.012; }
  .hero {
    min-height:730px !important;
    border-bottom-width:5px;
  }
  .hero > figure img {
    object-position:65% 50% !important;
    filter:saturate(1.08) contrast(1.04) brightness(1.02) !important;
  }
  .hero::after {
    background:
      linear-gradient(180deg,rgba(12,35,39,.08) 0%,rgba(12,35,39,.13) 24%,rgba(12,35,39,.52) 57%,rgba(12,35,39,.96) 100%),
      linear-gradient(90deg,rgba(12,35,39,.42),transparent 75%) !important;
  }
  .hero-copy {
    padding:8rem 1.15rem 5.8rem !important;
    align-self:end !important;
  }
  .hero-title-option-one {
    font-size:clamp(3rem,14.4vw,4.45rem) !important;
    max-width:11ch !important;
    line-height:.93 !important;
  }
  .hero-copy .lede { font-size:1rem !important; max-width:36ch !important; }
  .hero-copy::after { margin-top:1.2rem; font-size:.6rem; }
  .hero-actions { flex-wrap:wrap; }
  .hero-actions a { flex:0 1 auto !important; width:auto !important; }
  .since-badge {
    left:auto !important; right:1rem !important; bottom:1rem !important;
    width:auto !important; height:auto !important;
    padding:.48rem .65rem !important;
    border-radius:2px !important;
    box-shadow:4px 4px 0 var(--uw-ink) !important;
    transform:rotate(2deg) !important;
  }
  .since-badge strong { font-size:1rem !important; }
  .service-grid { grid-template-columns:1fr !important; }
  .project-grid > * { transform:none !important; }
  .project-browser { box-shadow:6px 6px 0 var(--uw-seaglass) !important; }
  .site-footer::after { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .quote-nav-link,.service-grid > *,.project-grid > * { transform:none !important; }
}

/* === Pacific Workshop v2: readable field-notebook services + final visual QA === */
.service-section{
  background:#f8f3e8!important;
  color:#2f3e3d!important;
  padding-block:clamp(5rem,8vw,8.5rem)!important;
  border-block:1px solid rgba(23,55,59,.12)!important;
  position:relative!important;
  isolation:isolate;
}
.service-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.07'/%3E%3C/svg%3E");
}
.service-section::after{
  content:"+";
  position:absolute;
  right:clamp(1.25rem,5vw,5rem);
  top:clamp(1.25rem,4vw,3.25rem);
  color:#d76832;
  font:700 2rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  transform:rotate(4deg);
  opacity:.72;
}
.service-section>header{
  max-width:760px!important;
  margin:0 auto clamp(2.75rem,5vw,4.75rem)!important;
  text-align:center!important;
}
.service-section>header .eyebrow{
  background:transparent!important;
  border:0!important;
  color:#d76832!important;
  padding:0!important;
  border-radius:0!important;
  letter-spacing:.16em!important;
  font-size:.78rem!important;
  font-weight:800!important;
}
.service-section>header h2{
  color:#16373b!important;
  font-size:clamp(2.2rem,4.4vw,3.65rem)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  margin:.85rem 0 0!important;
  text-wrap:balance!important;
}
.service-grid{
  gap:clamp(1.25rem,2.4vw,2rem)!important;
  align-items:stretch!important;
}
.service-grid>article{
  background:#fffdf8!important;
  color:#2f3e3d!important;
  border:1px solid rgba(184,158,123,.42)!important;
  border-radius:2px!important;
  padding:clamp(1.7rem,3vw,2.45rem)!important;
  box-shadow:0 14px 32px rgba(23,55,59,.08)!important;
  min-height:100%!important;
  transform:none!important;
  position:relative!important;
}
.service-grid>article:nth-child(3n+1)::before{
  content:"";
  position:absolute;
  top:-1px;left:1.35rem;
  width:44px;height:4px;
  background:#d76832;
}
.service-grid>article:nth-child(3n+2)::before{background:#28533d!important}
.service-grid>article:nth-child(3n)::before{background:#82a9a5!important}
.service-grid>article>svg{
  width:34px!important;
  height:34px!important;
  color:#d76832!important;
  stroke-width:1.7!important;
  margin-bottom:1.3rem!important;
}
.service-grid>article:nth-child(3n+2)>svg{color:#28533d!important}
.service-grid>article:nth-child(3n)>svg{color:#527f7c!important}
.service-grid h3{
  color:#16373b!important;
  font-size:clamp(1.25rem,1.8vw,1.5rem)!important;
  line-height:1.2!important;
  letter-spacing:-.018em!important;
  margin:0 0 .8rem!important;
}
.service-grid p{
  color:#334744!important;
  font-size:1rem!important;
  line-height:1.72!important;
  margin:0 0 1.45rem!important;
}
.service-grid a{
  color:#28533d!important;
  font-weight:800!important;
  text-decoration-thickness:2px!important;
  text-underline-offset:4px!important;
}
.service-grid>article:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 20px 42px rgba(23,55,59,.12)!important;
  border-color:rgba(215,104,50,.36)!important;
}
/* Calm the typography and improve reading rhythm site-wide. */
main p:not(.eyebrow):not(.project-service):not(.pricing-label){max-width:72ch}
.content-section p,.blog-section p,.faq-section p{line-height:1.72}
.button{letter-spacing:.01em!important}
/* Smooth section joins instead of hard colour blocks. */
.service-section + .portfolio-section{border-top:0!important}
.portfolio-section{padding-top:clamp(5rem,8vw,8rem)!important}
@media (max-width:760px){
  .service-section{padding-block:4.25rem!important}
  .service-section>header{text-align:left!important;margin-bottom:2.25rem!important}
  .service-section>header h2{font-size:clamp(2rem,10vw,2.75rem)!important;line-height:1.08!important}
  .service-grid{gap:1rem!important}
  .service-grid>article{padding:1.55rem!important}
  .service-grid>article:hover{transform:none!important}
  .service-section::after{right:1.1rem;top:1.1rem;font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){.service-grid>article{transition:none!important}}

/* === Service section contrast correction === */
.service-section .service-grid > article,
.service-section .service-grid > article *{
  text-shadow:none!important;
}
.service-section .service-grid h3,
.service-section .service-grid h3 a,
.service-section .service-grid strong{
  color:#15383b!important;
}
.service-section .service-grid p,
.service-section .service-grid li{
  color:#283d3b!important;
}
.service-section .service-grid a{
  color:#1f514f!important;
}
.service-section .service-grid > article:nth-child(3n) > svg{
  color:#245e5b!important;
}
.service-section .service-grid > article:nth-child(3n)::before{
  background:#3b7470!important;
}
.service-section .service-grid .eyebrow,
.service-section .service-grid .service-label,
.service-section .service-grid small,
.service-section .service-grid span{
  color:#245e5b!important;
}
@media (max-width:680px){
  .service-section .service-grid h3{font-size:1.3rem!important}
  .service-section .service-grid p{font-size:1rem!important;line-height:1.68!important}
}