*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;color:var(--ink);background:var(--white);font:var(--weight-regular) var(--font-body)/var(--leading-body) var(--font-family-base);-webkit-font-smoothing:antialiased}
a {color:inherit}
img {max-width:100%;height:auto}
button,input,textarea {font:inherit}
button {cursor:pointer}
:focus-visible {outline:3px solid var(--focus);outline-offset:4px}
.container {width:calc(100% - 2 * var(--container-gutter));max-width:var(--container-max);margin-inline:auto;min-width:0}
.skip-link {position:fixed;top:10px;left:10px;z-index:9999;transform:translateY(-130%);padding:12px 20px;background:var(--white);border:2px solid var(--ink)}
.skip-link:focus {transform:translateY(0)}
/* HEADER */
.site-header {background:var(--white);position:relative;z-index:100;border-bottom:1px solid color-mix(in srgb, var(--ink) 4%, transparent)}
.header-inner {height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand {display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand-symbol {width:44px;height:44px;display:grid;place-items:center;background:var(--ink);color:var(--white);font-size:var(--font-30);line-height:1;font-weight:var(--weight-display);letter-spacing:-.02em}
.brand-text {display:flex;flex-direction:column;line-height:1.04}
.brand-text strong {font-size:var(--font-21);font-weight:var(--weight-bold);letter-spacing:-.024em}
.brand-text small {font-size:var(--font-8-1);letter-spacing:.15em;font-weight:var(--weight-bold);margin-top:4px}
.brand-image {width:auto;max-width:250px;max-height:60px;object-fit:contain}
.primary-nav {margin-left:auto}
.nav-list {display:flex;align-items:center;list-style:none;padding:0;margin:0;gap:clamp(24px,3.2vw,55px)}
.nav-list a {font-size:var(--font-15);font-weight:var(--weight-bold);text-decoration:none;white-space:nowrap}
.nav-list a:hover,.nav-list .current-menu-item>a {color:var(--accent-green);text-decoration:underline;text-underline-offset:5px}
.header-contact {height:48px;min-width:145px;padding:0 22px;background:var(--surface-dark);display:inline-flex;align-items:center;justify-content:space-between;gap:16px;color:var(--white);text-decoration:none;font-size:var(--font-14);font-weight:var(--weight-bold)}
.header-contact:hover {background:var(--surface-dark-hover)}
.nav-toggle,.nav-mobile-contact {display:none}
/* BUTTONS */
.button {min-height:var(--button-height);display:inline-flex;align-items:center;justify-content:space-between;gap:28px;text-decoration:none;font-size:var(--font-14);font-weight:var(--weight-bold);line-height:1.35;padding:16px 20px;transition:background-color .18s,color .18s,transform .18s}
.button:hover {transform:translateY(-2px)}
.button-orange {background:var(--orange);color:var(--white)}
.button-orange:hover {background:var(--orange-hover)}
.button-text {background:transparent;color:var(--ink);padding-inline:12px;justify-content:flex-start;gap:10px}
.button-text:hover {color:var(--accent-green)}
.button span {font-size:var(--font-20);font-weight:550;line-height:1}
/* HERO */
.hero {height:600px;position:relative;isolation:isolate;background:var(--surface-hero)}
.hero-grid-pattern {position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);background-size:72px 72px;background-position:0 -1px}
.hero-layout {height:100%;display:grid;grid-template-columns:43% minmax(0,57%);align-items:center}
.hero-copy {min-width:0;position:relative;z-index:2;margin-top:-8px}
.hero-copy h1 {font-size:var(--fluid-home-legacy);font-weight:var(--weight-display);letter-spacing:-.043em;line-height:1.035;margin:0 0 33px;max-width:590px}
.hero-copy>p {font-size:var(--font-19);color:var(--ink);max-width:380px;line-height:1.58;margin:0 0 30px}
.hero-actions {display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.hero-actions .button-orange {width:250px}
.hero-visual {position:relative;min-width:0;display:flex;align-items:center;justify-content:center;height:100%}
.hero-visual img {display:block;width:min(100%,755px);max-width:none;transform:translate(12px,8px)}
/* THREE QUICK LINKS CROSS THE HERO BOUNDARY */
.quick-section {position:relative;z-index:3;margin-top:-65px}
.quick-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap-home)}
.quick-card {min-width:0;height:130px;padding:24px 26px 20px;background:var(--surface-dark);color:var(--white);display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;transition:background-color .18s,transform .18s}
.quick-card:hover {background:var(--surface-dark-hover);transform:translateY(-3px)}
.quick-kicker {font-size:var(--font-11);letter-spacing:.105em;font-weight:var(--weight-bold);line-height:1.3}
.quick-title {display:flex;align-items:end;justify-content:space-between;gap:14px;font-size:var(--font-25);line-height:1.15;font-weight:var(--weight-bold);letter-spacing:var(--tracking-heading)}
.quick-title span {font-size:var(--font-28);font-weight:400;line-height:1}
/* PROJECTS */
.projects-section {padding:var(--projects-section-top) 0 var(--projects-section-bottom)}
.projects-intro {display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,374px);align-items:end;column-gap:35px;min-height:160px;margin-bottom:40px}
.projects-intro h2,.areas-layout h2,.place-content h2,.citizens-layout h2 {font-size:var(--fluid-section-title);font-weight:var(--weight-bold);letter-spacing:var(--tracking-heading);line-height:1.12;margin:0}
.projects-intro-side {display:flex;flex-direction:column;align-items:stretch;justify-self:end;width:100%;max-width:305px;gap:17px;padding:0 0 5px}
.projects-intro-side p {font-size:var(--font-17);line-height:1.5;color:var(--muted);max-width:305px;margin:0}
.projects-intro-side .button {width:100%;min-width:0}
.projects-grid {display:grid;grid-template-columns:minmax(0,762fr) minmax(0,525fr);grid-template-rows:repeat(2,341px);gap:18px 21px}
.project-card {min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:var(--surface-card);text-decoration:none;color:var(--ink);position:relative}
.project-card-1 {grid-row:span 2}
.project-photo {flex:1 1 auto;min-height:0;overflow:hidden;background:var(--image-fallback)}
.project-photo img {display:block;height:100%;width:100%;max-width:none;object-fit:cover;transition:transform .4s ease}
.project-card:hover img {transform:scale(1.03)}
.project-caption {height:145px;min-height:145px;flex:0 0 145px;background:var(--surface-card);padding:25px 26px;display:flex;flex-direction:column;justify-content:center;position:relative}
.project-category {font-size:var(--font-11);letter-spacing:.095em;color:var(--orange);font-weight:var(--weight-bold);line-height:1.2;margin-bottom:16px}
.project-caption h3 {color:var(--ink);margin:0;font-size:var(--fluid-project-card);font-weight:var(--weight-bold);letter-spacing:-.024em;line-height:1.15}
.project-arrow {position:absolute;right:23px;bottom:30px;font-size:var(--font-25);color:var(--ink);opacity:0;transition:opacity .2s}
.project-card:hover .project-arrow,.project-card:focus-visible .project-arrow {opacity:1}
/* SERVICES: FOUR EXACTLY EQUAL ROWS */
.areas-section {padding:38px 0 44px}
.areas-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,587px);gap:45px;align-items:start}
.areas-layout h2 {padding-top:7px}
.areas-list {list-style:none;padding:0;margin:0;counter-reset:area}
.areas-list li {height:106px;margin:0;border-top:1px solid var(--border-soft)}
.areas-list li:last-child {border-bottom:1px solid var(--border-soft)}
.areas-list li a {height:100%;display:grid;grid-template-columns:45px minmax(0,1fr) 24px;gap:16px;align-items:center;text-decoration:none}
.areas-list li a:hover .area-name {color:var(--accent-green)}
.area-num {font-size:var(--font-11);letter-spacing:.07em;font-weight:var(--weight-bold);color:var(--accent-green)}
.area-name {font-size:var(--font-23);font-weight:var(--weight-bold);letter-spacing:-.018em;line-height:1.26}
.area-arrow {font-size:var(--font-22);color:var(--accent-green);line-height:1;text-align:right}
/* FULL-BLEED PLACE BANNER */
.place-banner {height:540px;position:relative;isolation:isolate;overflow:hidden;background:var(--surface-dark)}
.place-photo,.place-overlay {position:absolute;inset:0;width:100%;height:100%}
.place-photo {object-fit:cover;z-index:0}
.place-overlay {z-index:1;background:linear-gradient(90deg,color-mix(in srgb, var(--banner-shadow-left) 36%, transparent),color-mix(in srgb, var(--banner-shadow-right) 12%, transparent) 85%),color-mix(in srgb, var(--banner-shadow-base) 10%, transparent)}
.place-content {position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:75px;color:var(--white)}
.place-content h2 {font-size:var(--fluid-place-title);line-height:1.06;margin:0 0 32px}
.place-content p {font-size:var(--font-19);max-width:550px;line-height:1.45;margin:0}
/* CTA */
.citizens-cta {min-height:var(--cta-height-desktop);display:flex;align-items:center}
.citizens-layout {display:flex;justify-content:space-between;gap:32px;align-items:center}
.citizens-layout h2 {font-size:var(--fluid-cta-title)}
.citizens-layout .button {min-width:380px}
/* FOOTER */
.site-footer {background:var(--surface-dark);color:var(--white);padding:42px 0 21px;min-height:289px}
.footer-grid {display:grid;grid-template-columns:1.06fr .92fr 1fr 1fr;gap:35px;min-height:188px}
.footer-grid--columns-3{grid-template-columns:1.06fr 1fr 1fr}
.footer-grid--columns-2{grid-template-columns:1fr 1fr}
.footer-column {min-width:0}
.footer-brand {display:inline-block;max-width:100%;margin-bottom:15px;line-height:0;text-decoration:none}
.footer-brand-image {display:block;width:245px;max-width:100%;height:auto}
.footer-column h2 {font-size:var(--font-11);letter-spacing:.135em;font-weight:var(--weight-bold);margin:4px 0 24px;color:var(--white)}
.footer-column p,.footer-column a {font-size:var(--font-14);line-height:1.55;overflow-wrap:anywhere;margin:0;color:var(--white);text-decoration:none}
.footer-column a:hover,.footer-bottom a:hover {text-decoration:underline;text-underline-offset:3px}
.footer-menu {padding:0;margin:0;list-style:none}
.footer-menu li {margin-bottom:3px}
.footer-bottom {border-top:1px solid color-mix(in srgb, var(--white) 28%, transparent);padding-top:18px;display:flex;justify-content:space-between;gap:24px;font-size:var(--font-12)}
.footer-bottom small,.footer-bottom a {font-size:var(--font-12);color:var(--white);text-decoration:none}
.footer-bottom{align-items:center}
.footer-legal{display:flex;gap:6px;flex-wrap:wrap}
.footer-credit{margin-left:auto;text-align:right;white-space:nowrap}
/* SECONDARY TEMPLATES */
.page-shell {padding-top:88px;padding-bottom:140px}
.breadcrumbs {color:var(--breadcrumb);font-size:var(--font-15);margin:0 0 38px}
.breadcrumbs a {color:var(--surface-dark);text-decoration:none}
.article-header h1,.listing-header h1,.error-layout h1 {font-size:var(--fluid-article-title);font-weight:var(--weight-bold);letter-spacing:var(--tracking-heading);line-height:1.08;margin:0 0 42px;max-width:1040px}
.article-date {font-size:var(--font-15);color:var(--surface-dark);font-weight:var(--weight-bold);margin:0 0 14px}
.article-featured {margin-bottom:44px;max-width:990px}
.article-featured img {width:100%;max-height:630px;object-fit:cover}
.entry-lead {font-size:var(--fluid-entry-lead);line-height:1.5;color:var(--muted);max-width:800px;margin:-6px 0 42px}
.entry-cta {margin:55px 0 10px}
.prose {max-width:810px;font-size:var(--font-19);line-height:1.8;overflow-wrap:anywhere}
.prose p,.prose ul,.prose ol {margin:0 0 1.45em}
.prose h2,.prose h3 {line-height:1.2;letter-spacing:-.024em;margin:1.6em 0 .7em}
.prose h2 {font-size:var(--font-36)}.prose h3 {font-size:var(--font-28)}
.prose a,.post-navigation a {color:var(--surface-dark);text-underline-offset:3px}
.prose img,.prose iframe {max-width:100%}
.prose figure {max-width:100%;margin:2em 0}
.prose .wp-block-table {overflow-x:auto}
.prose table {border-collapse:collapse;max-width:100%}
.prose td,.prose th {padding:10px;border:1px solid var(--border-table)}
.post-navigation {display:flex;justify-content:space-between;gap:20px;max-width:810px;margin-top:55px}
.listing-header {margin-bottom:60px}
.eyebrow {font-size:var(--font-12);letter-spacing:.14em;color:var(--surface-dark);font-weight:var(--weight-bold)}
.post-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.post-list-card {border:1px solid var(--border-list);padding:32px;min-width:0}
.post-list-card h2 {font-size:var(--font-29);line-height:1.18;letter-spacing:-.022em;margin:0 0 17px}
.post-list-card h2 a {text-decoration:none}
.post-list-card>p:not(.article-date) {color:var(--muted)}
.read-more {display:inline-flex;gap:12px;font-size:var(--font-15);color:var(--surface-dark);font-weight:var(--weight-bold)}
.pagination {margin-top:45px}.pagination .nav-links {display:flex;gap:15px;flex-wrap:wrap}
.error-page {min-height:70vh;display:flex;align-items:center}
.error-layout {padding-top:100px;padding-bottom:110px}
.error-label {font-size:var(--font-13);letter-spacing:.14em;font-weight:var(--weight-bold);color:var(--surface-dark)}
.error-layout h1 {margin:30px 0}
.error-layout>p:not(.error-label) {font-size:var(--font-19);max-width:680px;color:var(--muted)}
.error-actions {margin-top:42px;display:flex;gap:38px;flex-wrap:wrap;align-items:end}
.site-search label {display:block;font-size:var(--font-14);font-weight:var(--weight-bold);margin-bottom:7px}
.search-row {display:flex;gap:0;min-height:54px}
.search-row input {min-width:0;width:220px;padding:12px;border:1px solid var(--border-input);border-radius:0;background:var(--white);color:var(--ink)}
.search-row button {border:0;border-radius:0;padding:12px 18px;color:var(--white);background:var(--surface-dark);font-weight:var(--weight-bold)}
/* Responsive adaptations intentionally live ONLY in these breakpoints. */
@media (max-width:1199px) {
  .hero {height:590px}
  .hero-copy h1 {font-size:var(--fluid-home-old-laptop)}
  .hero-copy>p {font-size:var(--font-17)}
  .hero-visual img {transform:translate(0,15px)}
  .projects-grid {grid-template-rows:repeat(2,minmax(280px,1fr));height:655px}
  .projects-intro h2,.areas-layout h2 {font-size:var(--fluid-section-old-laptop)}
  .areas-layout {grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:30px}
  .area-name {font-size:var(--font-19)}
  .footer-grid {gap:22px}
}
@media (max-width:900px) {
  
  .header-inner {height:76px}
  .header-contact {margin-left:auto;min-width:120px}
  .nav-toggle {width:48px;height:48px;border:1px solid var(--border-menu);background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
  .nav-toggle span {height:2px;width:23px;background:var(--ink);display:block}
  .primary-nav {display:none;position:absolute;left:0;top:100%;width:100%;margin:0;background:var(--white);padding:24px var(--container-gutter) 30px;box-shadow:0 15px 25px color-mix(in srgb, var(--shadow-ink) 12%, transparent)}
  .primary-nav.is-open {display:block}
  .nav-list {display:flex;flex-direction:column;align-items:stretch;gap:0}
  .nav-list a {font-size:var(--font-21);display:block;min-height:52px;padding:12px 0}
  .nav-mobile-contact {display:block;background:var(--surface-dark);color:var(--white);text-decoration:none;margin-top:17px;padding:15px 18px;font-weight:var(--weight-bold)}
  .hero {height:auto;min-height:680px}
  .hero-layout {min-height:680px;grid-template-columns:1fr;grid-template-rows:auto auto;padding-top:48px;padding-bottom:45px}
  .hero-copy {margin:0}.hero-copy h1 {font-size:var(--fluid-home-old-tablet);margin-bottom:22px}
  .hero-copy>p {margin-bottom:28px;max-width:450px}
  .hero-visual {height:auto;max-width:600px;margin:auto}
  .hero-visual img {max-width:100%;width:100%;transform:none}
  .quick-section {margin-top:-58px}
  .quick-grid {gap:12px}
  .quick-card {height:125px;padding:20px 14px}
  .quick-title {font-size:var(--font-18)}
  .quick-title span {font-size:var(--font-21)}
  .quick-kicker {font-size:var(--font-9)}
  .projects-section {padding-top:80px;padding-bottom:75px}
  .projects-intro {grid-template-columns:1fr 230px;gap:24px;min-height:0;margin-bottom:35px}
  .projects-intro h2 {font-size:var(--fluid-projects-tablet)}
  .projects-intro-side p {font-size:var(--font-15)}
  .projects-intro-side .button {width:100%;min-width:0}
  .projects-grid {height:610px;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
  .project-caption {height:115px;min-height:115px;flex-basis:115px;padding:20px}
  .project-caption h3 {font-size:var(--font-23)}
  .project-category {font-size:var(--font-10);margin-bottom:10px}
  .areas-section {padding:30px 0 85px}
  .areas-layout {grid-template-columns:1fr 1.25fr;gap:24px}
  .areas-layout h2 {font-size:var(--fluid-services-tablet)}
  .areas-list li {height:98px}
  .areas-list li a {gap:9px;grid-template-columns:29px minmax(0,1fr) 21px}
  .area-name {font-size:var(--font-17)}
  .place-banner {height:440px}.place-content {padding-top:15px}
  .citizens-cta {min-height:280px}
  .citizens-layout h2 {font-size:var(--fluid-cta-tablet)}
  .citizens-layout .button {min-width:250px}
  .footer-grid {grid-template-columns:repeat(2,1fr);row-gap:35px}
  .site-footer {padding-top:50px}
}
@media (max-width:620px) {
  
  body {font-size:var(--font-body-mobile)}
  .header-inner {height:72px;gap:10px}
  .brand-symbol {height:38px;width:38px;font-size:var(--font-26)}
  .brand {gap:8px}.brand-text strong {font-size:var(--font-17)}.brand-text small {font-size:var(--font-6-5);letter-spacing:.1em}
  .header-contact {display:none}
  .nav-toggle {margin-left:auto}
  .hero {min-height:0}
  .hero-grid-pattern {background-size:46px 46px;background-image:linear-gradient(to right,color-mix(in srgb, var(--grid-ink) 17%, transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb, var(--grid-ink) 17%, transparent) 1px,transparent 1px)}
  .hero-layout {display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:38px;padding-bottom:54px}
  .hero-copy h1 {font-size:var(--fluid-home-old-mobile);line-height:1.03;letter-spacing:-.022em;margin:0 0 28px}
  .hero-copy>p {font-size:var(--font-17);line-height:1.5;margin-bottom:28px;max-width:330px}
  .hero-actions {gap:8px;flex-wrap:wrap}
  .hero-actions .button-orange {width:210px}
  .hero-actions .button {min-height:56px;padding:13px 14px;font-size:var(--font-13)}
  .hero-actions .button-text {padding-inline:9px}
  .hero-visual {margin:16px -10px -31px;align-self:stretch;max-width:none}
  .hero-visual img {width:100%;transform:none}
  .quick-section {margin-top:-49px}
  .quick-grid {grid-template-columns:1fr;gap:11px}
  .quick-card {height:98px;padding:17px 21px 16px}
  .quick-kicker {font-size:var(--font-10)}
  .quick-title {font-size:var(--font-22)}.quick-title span {font-size:var(--font-23)}
  .projects-section {padding:var(--projects-section-top-mobile) 0 var(--projects-section-bottom-mobile)}
  .projects-intro {display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:32px}
  .projects-intro h2,.areas-layout h2 {font-size:var(--fluid-sections-mobile);line-height:1.12}
  .projects-intro-side {align-self:flex-start;max-width:305px;gap:16px;padding:0}
  .projects-intro-side p {font-size:var(--font-16)}
  .projects-intro-side .button {width:100%;min-width:0}
  .projects-grid {display:flex;flex-direction:column;height:auto;gap:14px}
  .project-card {height:335px;flex:none}
  .project-card:first-child {height:470px}
  .project-caption {height:110px;flex-basis:110px;min-height:110px;padding:18px 20px}
  .project-caption h3 {font-size:var(--font-25)}
  .project-category {margin-bottom:8px}
  .areas-section {padding:0 0 86px}
  .areas-layout {grid-template-columns:1fr;gap:38px}
  .areas-list li {height:91px}
  .area-name {font-size:var(--font-17)}
  .place-banner {height:450px}
  .place-content {justify-content:flex-end;padding-top:0;padding-bottom:65px}
  .place-content h2 {font-size:var(--fluid-place-mobile);margin-bottom:22px}
  .place-content p {font-size:var(--font-16)}
  .citizens-cta {min-height:275px}
  .citizens-layout {align-items:flex-start;flex-direction:column;gap:30px;padding-block:55px}
  .citizens-layout h2 {font-size:var(--fluid-cta-mobile)}
  .citizens-layout .button {min-width:min(100%,310px)}
  .footer-grid,.footer-grid--columns-2,.footer-grid--columns-3 {grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 19px;min-height:0;margin-bottom:40px}
  .footer-identity,.footer-contact {grid-column:1/-1}
  .footer-column h2 {margin-bottom:16px}
  .footer-column p,.footer-column a {font-size:var(--font-14)}
  .footer-bottom {flex-direction:column;gap:9px;align-items:stretch}
  .footer-credit{align-self:flex-end}
  .page-shell {padding-top:55px;padding-bottom:90px}
  .article-header h1,.listing-header h1,.error-layout h1 {font-size:var(--fluid-article-mobile)}
  .prose {font-size:var(--font-17)}.prose h2 {font-size:var(--font-30)}
  .post-list {grid-template-columns:1fr}.post-list-card {padding:24px}
  .error-layout {padding-top:80px;padding-bottom:80px}
  .error-actions {align-items:stretch;flex-direction:column}
  .search-row input {width:100%}
}
@media (max-width:360px) {
  
  .hero-copy h1 {font-size:var(--font-49)}
  .hero-actions .button-orange {width:185px}
  .hero-actions .button {font-size:var(--font-12);gap:11px}
  .project-caption h3 {font-size:var(--font-23)}
  .footer-grid {grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Gutenberg home block wrapper creates no new box on the public website. */
.homepage > .wp-block-kalastar-homepage { display:contents; }

/* 2.3 accessibility: small unobtrusive explanation for not-yet-published destinations. */
.kalastar-link-message{position:fixed;z-index:10000;bottom:22px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--white);padding:12px 20px;box-shadow:0 10px 40px color-mix(in srgb, var(--black) 20%, transparent);font-size:var(--font-15);font-weight:var(--weight-bold);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(100vw - 32px);text-align:center}
.kalastar-link-message.is-visible{opacity:1;transform:translate(-50%,0)}


/* Header, hero, homepage sections, footer and page templates now share .container. */
@media(min-width:1450px){
  .site-header .header-inner{height:var(--header-height-wide)}
}
/* === KALASTAR 2.7.5 / COMPACT, CENTERED HERO ========================
   The approved high-resolution PNG stays intact. The desktop text block is
   vertically centered with flex, and the illustration remains crisp instead
   of being enlarged or covered in a heavy milky overlay.
   =================================================================== */
.hero {
  position:relative; isolation:isolate; overflow:hidden;
  height:var(--hero-height-desktop); min-height:var(--hero-height-desktop); background:var(--surface-hero);
}
.hero-grid-pattern {
  position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.14;
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:none;
}
/* Neutral background grid: avoid introducing green into new visual system. Only
   the reading side of the hero gets the foreground grid; the illustration
   itself is kept intact and unobscured on the right. */
.hero .hero-grid-pattern {
  z-index:2;
  opacity:.12;
  background-image:linear-gradient(to right,var(--grid-ink) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-ink) 1px,transparent 1px);
  mask-image:linear-gradient(90deg,var(--black) 0%,var(--black) 45%,transparent 76%);
}
.hero::before {
  content:""; position:absolute;z-index:0;inset:0;pointer-events:none;
  background:transparent;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Stronger left-side fade for headline legibility, while keeping the scene visible. */
  background:
    linear-gradient(180deg,transparent 63%,color-mix(in srgb, var(--surface-hero) 5%, transparent) 80%,color-mix(in srgb, var(--surface-hero) 34%, transparent) 100%),
    linear-gradient(90deg,var(--surface-hero) 0%,color-mix(in srgb, var(--surface-hero) 96%, transparent) 15%,color-mix(in srgb, var(--surface-hero) 88%, transparent) 24%,color-mix(in srgb, var(--surface-hero) 70%, transparent) 33%,color-mix(in srgb, var(--surface-hero) 38%, transparent) 43%,color-mix(in srgb, var(--surface-hero) 12%, transparent) 52%,transparent 61%);
}
.hero-world {position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.hero-world img {
  position:absolute;display:block;max-width:none;
  width:min(112%,1840px);height:auto;left:auto;right:-72px;top:-26px;
  transform:none;animation:none;
}
.hero-layout {
  position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-start;
  height:100%;min-height:0;padding-block:0;pointer-events:none;
}
.hero-copy {position:relative;z-index:2;width:min(540px,48%);margin:0;pointer-events:auto}
.hero-copy h1 {font-size:var(--fluid-home-title);line-height:1.035;letter-spacing:-.035em;font-weight:var(--weight-display);margin:0 0 30px;max-width:560px}
.hero-copy>p {font-size:var(--font-19);line-height:1.56;color:var(--ink);max-width:390px;margin:0 0 30px}
.hero-actions{gap:18px;flex-wrap:wrap}
.hero-actions .button-orange{width:270px;min-height:64px;box-shadow:0 11px 22px color-mix(in srgb, var(--shadow-ink) 9%, transparent)}
.hero-actions .button-text{min-height:64px}
.quick-section{margin-top:-71px;z-index:3;position:relative}
.quick-card{height:139px;padding:24px 26px 21px}
@media(min-width:1100px) and (max-width:1549px){
  .hero-copy>p{font-size:var(--font-18)}
}
@media(min-width:901px) and (max-width:1099px){
  .hero-world img{width:1320px;right:-245px;top:-12px}
  .hero-copy{width:min(495px,54%)}
  .hero-copy h1{font-size:var(--fluid-home-laptop)}
  .hero-copy>p{font-size:var(--font-17)}
  .hero-actions{gap:7px}
  .hero-actions .button-orange{width:215px;min-height:58px}
  .hero-actions .button-text{min-height:58px}
}
@media(max-width:900px){
  .hero{height:760px;min-height:0}
  .hero-layout{display:block;min-height:0;height:100%;padding:52px 0 0}
  .hero-copy{margin:0;width:min(550px,100%)}
  .hero-copy h1{font-size:var(--fluid-home-tablet);margin:0 0 23px}
  .hero-copy>p{font-size:var(--font-17);max-width:440px;margin:0 0 26px}
  .hero-world img{
     width:1350px;height:auto;top:auto;bottom:-2px;left:60%;right:auto;
     transform:translateX(-60%);object-fit:initial
  }
  .hero::after{
     content:"";position:absolute;z-index:1;pointer-events:none;inset:0;
     background:linear-gradient(180deg,var(--surface-hero) 0%,color-mix(in srgb, var(--surface-hero) 97%, transparent) 29%,color-mix(in srgb, var(--surface-hero) 86%, transparent) 44%,color-mix(in srgb, var(--surface-hero) 18%, transparent) 67%,transparent 88%);
  }
  .quick-section{margin-top:-52px}
  .quick-card{height:122px}
}
@media(max-width:620px){
  .hero{height:785px}
  .hero-layout{padding:37px 0 0}
  .hero-copy h1{font-size:var(--fluid-home-mobile);line-height:1.035;margin:0 0 25px}
  .hero-copy>p{font-size:var(--font-17);max-width:345px;margin:0 0 25px}
  .hero-actions{gap:6px}
  .hero-actions .button-orange{width:210px;min-height:54px}
  .hero-actions .button-text{min-height:54px}
  .hero-actions .button{font-size:var(--font-13);padding:12px 14px}
  .hero-world img{width:1150px;left:60%;bottom:-4px;transform:translateX(-64%)}
  .hero::after{background:linear-gradient(180deg,var(--surface-hero) 0%,var(--surface-hero) 26%,color-mix(in srgb, var(--surface-hero) 98%, transparent) 40%,color-mix(in srgb, var(--surface-hero) 86%, transparent) 53%,color-mix(in srgb, var(--surface-hero) 14%, transparent) 76%,transparent 92%)}
  .quick-section{margin-top:-47px}
  .quick-card{height:99px;padding:17px 21px 16px}
}
@media(max-width:380px){
  .hero{height:772px}
  .hero-world img{width:1090px}
  .hero-actions .button-orange{width:190px}
  .hero-actions .button{font-size:var(--font-12)}
}
@media(prefers-reduced-motion:reduce){.hero-world img{animation:none}}

/* === KALASTAR 2.7.6 / SHARED INNER PAGE HERO =======================
   Desktop pages use the same 720px hero token as the homepage; the page
   body remains below the hero rather than being stretched to fill it.
   ================================================================ */
.hero-copy h1 .hero-title-line { display:block; color:var(--ink); }
.page-hero {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:var(--hero-height-desktop); display:flex; align-items:center;
  background:var(--surface-hero);
}
.page-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 55% 76% at 96% 45%,color-mix(in srgb, var(--accent-green) 5.5%, transparent),transparent 73%);
}
.page-hero>.hero-grid-pattern { z-index:0; opacity:.42; }
.page-hero-layout {
  position:relative; z-index:1; display:flex; align-items:center;
  min-height:var(--hero-height-desktop); padding-block:72px;
}
.page-hero-copy { max-width:min(100%,980px); min-width:0; }
.page-hero .breadcrumbs { margin:0 0 28px; color:var(--muted); }
.page-hero h1 {
  margin:0; font-size:var(--fluid-page-title); font-weight:var(--weight-bold);
  letter-spacing:-.022em; line-height:1.07; overflow-wrap:break-word;
}
.page-hero .entry-lead {
  max-width:650px; margin:28px 0 0; color:var(--muted);
  line-height:1.55; font-size:var(--fluid-page-lead);
}
@media(max-width:900px){
  .page-hero,.page-hero-layout { min-height:760px; }
  .page-hero-layout { padding-block:64px; }
  .page-hero h1 { font-size:var(--fluid-page-tablet); }
}
@media(max-width:620px){
  .page-hero,.page-hero-layout { min-height:785px; }
  .page-hero-layout { padding-block:45px; }
  .page-hero h1 { font-size:var(--fluid-page-mobile); }
  .page-hero .breadcrumbs { margin-bottom:22px; }
}
@media(max-width:380px){
  .page-hero,.page-hero-layout { min-height:772px; }
}

/* 2.7.7: restrained, single-word emphasis in secondary headings. */
.heading-accent--surface-dark{color:var(--surface-dark)}
.heading-accent--orange{color:inherit}

/* 2.7.8 — Mobile headings align to the same .container gutter as body content.
   No nested left/right padding; the responsive .container keeps the safe edge inset. */
@media (max-width:620px) {
  .homepage h1, .homepage h2,
  .content-page h1, .content-page h2,
  .kal-contact-page h1, .kal-contact-page h2 {
    padding-left:0;
    padding-right:0;
  }
}

/* Buttons and card corners also follow the shared design tokens. */
.button,.header-contact,.nav-toggle,.search-row button,.kalastar-link-message{border-radius:var(--radius-control)}
.quick-card,.project-card,.post-list-card{border-radius:var(--radius-card)}

/* 2.8.1: thin neutral brand line from the supplied projects layouts. */
.site-topline{background:var(--surface-dark);color:var(--white)}
.site-topline-inner{height:30px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.125em;font-weight:var(--weight-bold)}
.site-topline-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.site-header{background:#fff}
@media(max-width:620px){
  .site-topline-inner{height:26px;font-size:8px;letter-spacing:.07em}
  .site-topline-inner>span:last-child{display:none}
}

/* Kalastar 2.8.4: supplied visual identity and two active homepage shortcuts. */
.site-header .brand-image--kalastar {display:block;width:245px;max-width:min(245px,45vw);height:auto;max-height:70px;object-fit:contain}
.quick-grid--two-items {grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-credit {font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.045em}
@media (max-width:900px) {
  .site-header .brand-image--kalastar {width:210px;max-height:65px}
}
@media (max-width:620px) {
  .site-header .brand-image--kalastar {width:185px;max-width:47vw;max-height:60px}
  .quick-grid--two-items {grid-template-columns:1fr}
}