@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700;800&family=Manrope:wght@400;450;500;550;600;650&display=swap');
:root {
  color-scheme:dark;
  --bg:#151617;
  --ink:#efefed;
  --muted:#a7a8a8;
  --line:#353638;
  --control-border:#77797b;
  --focus-ring:var(--ink);
  --button-fill:var(--ink);
  --button-ink:var(--bg);
  --caption-bg:#151617;
  --caption-ink:#efefed;
  --type-meta:.8125rem;
  --type-label:.875rem;
  --type-body:1rem;
}
* {
  box-sizing:border-box;
}
html {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  font-optical-sizing:auto;
  font-size:var(--type-body);
  line-height:1.55;
}
a {
  color:inherit;
  text-decoration:none;
  overflow-wrap:anywhere;
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:0.25rem;
}
button {
  font:inherit;
}
img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.wrap {
  max-width:100rem;
  margin:auto;
  padding-inline-start:max(clamp(1rem,5vw,5rem),env(safe-area-inset-left));
  padding-inline-end:max(clamp(1rem,5vw,5rem),env(safe-area-inset-right));
}
nav {
  min-height:6.25rem;
  padding-block:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 2rem;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.logo {
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  font-size:1.375rem;
  letter-spacing:-1px;
  font-weight:650;
}
.navlinks {
  display:flex;
  flex-wrap:wrap;
  gap:0.25rem 2rem;
  font-size:var(--type-label);
}
.eyebrow {
  font-size:var(--type-meta);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero {
  padding:4.75rem 0 3.75rem;
}
.hero-top {
  display:flex;
  justify-content:space-between;
  gap:1.875rem;
  align-items:flex-start;
}
.hero-top p {
  max-width:21.25rem;
  margin:0;
  color:var(--muted);
}
.wordmark {
  font-size:clamp(6.25rem,24.5vw,22.8125rem);
  font-weight:550;
  line-height:.96;
  letter-spacing:-.09em;
  margin:2.375rem 0 2.375rem -.065em;
}
.hero-bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1.875rem;
}
.hero-bottom h1 {
  font-size:clamp(1.625rem,3.3vw,3rem);
  line-height:1.16;
  font-weight:450;
  letter-spacing:-.045em;
  margin:0;
  max-width:42.5rem;
}
.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  min-height:3rem;
  gap:1.5rem;
  border:1px solid var(--control-border);
  border-radius:3.125rem;
  padding:0.9375rem 1.4375rem;
  font-size:0.875rem;
  white-space:normal;
  line-height:1.5;
  text-align:center;
}
.pill.light {
  background:var(--button-fill);
  color:var(--button-ink);
  border-color:var(--button-fill);
}
.landscape {
  height:clamp(14.375rem,40vw,35.625rem);
  position:relative;
  overflow:hidden;
}
.landscape img {
  object-position:center 47%;
}
.landscape-caption {
  position:absolute;
  inset-block-end:1rem;
  inset-inline-start:1rem;
  max-width:calc(100% - 2rem);
  padding:0.5rem 1rem;
  border-radius:999px;
  font-size:0.8125rem;
  line-height:1.5;
  background:var(--caption-bg);
  color:var(--caption-ink);
}
.section {
  padding:5.9375rem 0;
  border-bottom:1px solid var(--line);
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1.875rem;
  margin-bottom:2.25rem;
}
.section-head h2 {
  font-size:clamp(2rem,4.4vw,3.875rem);
  font-weight:450;
  letter-spacing:-.055em;
  line-height:1.1;
  margin:0.625rem 0 0;
}
.section-head p {
  color:var(--muted);
  max-width:36ch;
  font-size:1rem;
  margin:0;
}
.projects {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.75rem;
}
.project-preview {
  min-height:23.75rem;
  overflow:hidden;
  padding:2.125rem;
  position:relative;
}
.alder {
  background:#c7c9bc;
  color:#263729;
}
.alder-inner {
  background:#f1f0e8;
  min-height:19.5rem;
  padding:1.25rem;
  position:relative;
  overflow:hidden;
}
.mini-nav {
  font-size:0.75rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1rem;
  justify-content:space-between;
  font-weight:600;
}
.alder-inner h3 {
  font-family:Georgia,serif;
  font-size:clamp(1.75rem,3vw,2.875rem);
  font-weight:400;
  line-height:1.1;
  position:relative;
  z-index:1;
  margin:1.875rem 0 0.625rem;
  max-width:13.75rem;
}
.alder-inner img {
  position:absolute;
  width:49%;
  height:70%;
  right:0;
  bottom:0;
}
.mini-label {
  font-size:0.75rem;
  position:relative;
  z-index:1;
}
.form-preview {
  background:#303236;
  color:#eee;
  padding:2.8125rem 2.1875rem;
}
.form-inner {
  border-top:1px solid #636466;
  padding-top:1.25rem;
}
.form-inner h3 {
  font-size:clamp(2rem,4vw,3.75rem);
  line-height:1.1;
  letter-spacing:-.06em;
  font-weight:500;
  max-width:20.625rem;
  margin:2.5rem 0 1.5rem;
}
.mini-button {
  font-size:0.75rem;
  padding:0.5625rem 1rem;
  border-radius:1.875rem;
  background:#d3e5b3;
  color:#263320;
  display:inline-block;
}
.project-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  padding:1.125rem 0;
  gap:1.25rem;
}
.project-meta h3 {
  margin:0;
  font-size:1.1875rem;
  font-weight:500;
}
.project-meta p {
  margin:0.25rem 0;
  color:var(--muted);
  font-size:0.875rem;
}
.project-action {
  font-size:0.875rem;
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:.25em;
}
.split {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:12%;
}
.split h2 {
  font-size:clamp(1.875rem,4vw,3.375rem);
  line-height:1.15;
  letter-spacing:-.045em;
  font-weight:450;
  margin:1.125rem 0 1.5rem;
}
.muted {
  color:var(--muted);
}
.service {
  border-top:1px solid var(--line);
  padding:1.5rem 0;
  display:grid;
  grid-template-columns:2.5rem minmax(0,1fr);
  gap:0.625rem;
}
.service span {
  color:var(--muted);
  font-size:0.8125rem;
}
.service h3 {
  margin:0 0 0.5rem;
  font-size:1.375rem;
  font-weight:450;
}
.service p {
  margin:0;
  color:var(--muted);
  max-width:26.875rem;
}
.contact {
  padding:6.25rem 0 4.0625rem;
}
.contact h2 {
  font-size:clamp(2.8125rem,7.5vw,6.875rem);
  font-weight:450;
  line-height:1.1;
  letter-spacing:-.06em;
  margin:1.375rem 0 2.1875rem;
  max-width:56.25rem;
}
footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  border-top:1px solid var(--line);
  padding:1.5625rem 0 2.1875rem;
  font-size:0.75rem;
  color:var(--muted);
}
footer div {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem 1.5rem;
}
.demo-banner {
  --focus-ring:#efefed;
  padding:0.625rem max(1rem,5%);
  font-size:0.8125rem;
  background:#151617;
  color:#efefed;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.25rem 1.25rem;
}
.demo-hero {
  padding:5.625rem 0;
}
.demo-hero h1 {
  font-size:clamp(2.75rem,8vw,7.1875rem);
  font-weight:450;
  line-height:1.1;
  letter-spacing:-.055em;
  margin:1.375rem 0 1.875rem;
  max-width:60rem;
}
.demo-hero p {
  max-width:32.5rem;
  font-size:1.125rem;
}
.demo-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.875rem;
}
.demo-grid h3 {
  font-size:1.5rem;
  font-weight:450;
}
.demo-grid article {
  border-top:1px solid var(--line);
  padding:1.25rem 0;
}
.demo-note {
  padding:2.8125rem 0;
}
.alder-page {
  --bg:#efeee5;
  --ink:#263729;
  --muted:#596954;
  --line:#c6ccbf;
  --control-border:#697267;
  --focus-ring:#263729;
  color-scheme:light;
}
.alder-page .demo-hero h1 {
  font-family:Georgia,serif;
  letter-spacing:-.045em;
}
.form-page {
  --bg:#25272a;
  --ink:#f0f0eb;
  --muted:#b8bcbd;
  --line:#55585b;
  --button-fill:#d3e5b3;
  --button-ink:#25272a;
  --focus-ring:#f0f0eb;
}
.skip {
  position:absolute;
  inset-inline-start:-625rem;
  inset-block-start:1rem;
  max-width:calc(100% - 2rem);
  background:white;
  color:black;
  padding:0.75rem;
  z-index:9;
}
.skip:focus {
  inset-inline-start:1rem;
}
details {
  border-top:1px solid var(--line);
  padding:1.25rem 0;
}
summary {
  cursor:pointer;
  min-height:2.75rem;
  padding-block:0.75rem;
  font-size:1.25rem;
  line-height:1.4;
}
details p {
  color:var(--muted);
  max-width:65ch;
}
@media(max-width:43.75rem) {
  nav {
    min-height:5rem;
  }
  .navlinks {
    gap:1.25rem;
  }
  .hero {
    padding-top:2.375rem;
  }
  .hero-top {
    display:block;
  }
  .hero-top p {
    margin-top:1.125rem;
    font-size:1rem;
    max-width:34ch;
  }
  .wordmark {
    margin-top:2rem;
    margin-bottom:1.75rem;
  }
  .hero-bottom {
    display:block;
  }
  .hero-bottom .pill {
    margin-top:1.5625rem;
  }
  .section,.contact {
    padding:3.875rem 0;
  }
  .section-head {
    display:block;
  }
  .section-head p {
    margin-top:1.25rem;
  }
  .projects,.split,.demo-grid {
    grid-template-columns:1fr;
    gap:1.75rem;
  }
  .project-preview {
    min-height:21.25rem;
  }
  .alder-inner h3 {
    font-size:2.5rem;
  }
  .form-inner h3 {
    font-size:3.25rem;
  }
  .split {
    gap:2.125rem;
  }
  footer {
    flex-direction:column;
    align-items:flex-start;
  }
  footer div {
    flex-wrap:wrap;
  }
  .demo-banner {
    font-size:0.75rem;
  }
  .demo-hero {
    padding:3.4375rem 0;
  }
}
h1,h2,h3 {
  text-wrap:balance;
  overflow-wrap:break-word;
}
p {
  text-wrap:pretty;
  overflow-wrap:break-word;
}
main,section[id] {
  scroll-margin-block-start:1.5rem;
}
.navlinks a {
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
}
.pill>span[aria-hidden] {
  flex:none;
}
.projects>a {
  display:block;
  min-width:0;
}
.split>* {
  min-width:0;
}
.split p,.demo-note p {
  max-width:65ch;
}
.split .pill {
  margin-block-start:.5rem;
}
.service>span {
  font-variant-numeric:tabular-nums;
}
.service h3 {
  line-height:1.4;
}
.studio-intro {
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.5;
  margin-block-start:0;
}
.contact>p {
  max-width:55ch;
}
.contact-address {
  font-size:var(--type-label);
  overflow-wrap:anywhere;
}
.contact-address a { display:inline-flex; align-items:center; min-height:2.75rem; text-decoration:underline; text-underline-offset:.25em; }
.not-found-page { min-height:65vh; min-height:65svh; padding-block:clamp(3rem,10vw,8rem); }
.not-found-page h1 { font-size:clamp(2rem,5vw,4rem); line-height:1.15; letter-spacing:-.04em; font-weight:450; }
.not-found-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-block-start:2rem; }
footer a,.demo-banner a {
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  max-width:100%;
  text-decoration:underline;
  text-underline-offset:.25em;
}
.demo-grid h3 {
  line-height:1.3;
}
.demo-grid ul {
  padding-inline-start:1.25rem;
}
.demo-note h2 {
  font-size:1.75rem;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.025em;
  max-width:35ch;
}
.landscape::after {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgb(255 255 255 / .1);
  pointer-events:none;
}
.alder-page .landscape::after {
  border-color:rgb(0 0 0 / .1);
}
@media(hover:hover) {
  .navlinks a:hover,.logo:hover {
    text-decoration:underline;
    text-underline-offset:.3em;
    text-decoration-thickness:from-font;
  }
  .pill:hover {
    border-color:var(--ink);
    text-decoration:underline;
    text-underline-offset:.25em;
  }
  .projects>a:hover .project-meta h3 {
    text-decoration:underline;
    text-underline-offset:.2em;
  }
  .projects>a:hover .project-action,footer a:hover,.demo-banner a:hover {
    text-decoration-thickness:2px;
  }
  summary:hover {
    text-decoration:underline;
    text-underline-offset:.2em;
  }
}
@media(prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior:smooth;
  }
  .pill {
    transition:transform 150ms cubic-bezier(.2,0,0,1),border-color 150ms cubic-bezier(.2,0,0,1);
  }
  .pill:active {
    transform:scale(.96);
  }
}
@media(max-width:55rem) {
  .projects,.split,.demo-grid {
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
  }
  .project-preview {
    min-height:21.25rem;
  }
  .alder-inner {
    min-height:17rem;
  }
  .alder-inner h3 {
    font-size:2.5rem;
  }
  .form-inner h3 {
    font-size:3.25rem;
  }
}
@media(max-width:24rem) {
  .project-preview {
    padding:1.25rem;
  }
  .alder-inner {
    padding:1rem;
  }
  .alder-inner h3 {
    font-size:2rem;
  }
  .form-inner h3 {
    font-size:2.5rem;
  }
}
@media(forced-colors:active) {
  a:focus-visible,button:focus-visible,summary:focus-visible {
    outline-color:Highlight;
  }
  .pill {
    border-color:ButtonText;
  }
}

/* Cala display typography; concept brands retain their own type. */
.studio-page :is(.logo,.wordmark,.hero-bottom h1,.section-head h2,.split h2,.service h3,.contact h2,.project-meta h3,.case-heading h1,.case-section h2,.design-decisions h3,.case-next h2,.case-contact h2) {
  font-family:Manrope,Inter,Arial,sans-serif;
}
.studio-page .logo { letter-spacing:-.035em; font-weight:500; }

/* Matte studio chrome keeps the page settled while navigation stays in reach. */
.studio-root {
  --site-header-height:5rem;
  scroll-padding-block-start:calc(var(--site-header-height) + 1rem);
  scroll-padding-block-end:1rem;
}
.studio-page :is(main,section[id]) { scroll-margin-block-start:0; }
.studio-page footer { padding-block-end:2rem; }
.site-header {
  position:sticky;
  inset-block-start:0;
  z-index:30;
  padding-block-start:env(safe-area-inset-top,0px);
  background:var(--bg);
  border-block-end:1px solid var(--line);
}
.site-header>nav {
  min-height:5rem;
  padding-block:.75rem;
  border:0;
}
.studio-page .skip { z-index:50; }
@media(max-width:43.75rem) {
  .studio-root { --site-header-height:4.5rem; }
  .site-header>nav { min-height:4.5rem; gap:.25rem 1.25rem; }
}
.studio-page .wordmark { font-weight:500; letter-spacing:-.065em; line-height:1.05; margin-inline-start:-.035em; }
.studio-page :is(.hero-bottom h1,.section-head h2,.split h2,.contact h2,.case-heading h1,.case-section h2,.case-next h2,.case-contact h2) { letter-spacing:-.04em; }

/* Studio foundations: fluid scales from 360px to 1440px at a 16px root.
   Method: https://utopia.fyi/clamp/calculator/
   Locally owned custom properties keep sizing consistent without a runtime dependency.
   Concept demos retain their own visual systems. */
.studio-page {
  --bg:#222321;
  --ink:#e7e3da;
  --muted:#b6b3aa;
  --line:#41423d;
  --surface:#292a26;
  --control-border:#87887f;
  --focus-ring:var(--ink);
  --button-fill:#dcd9d0;
  --button-ink:#222321;
  --display-ink:#d4d5ce;
  --caption-bg:var(--surface);
  --caption-ink:var(--muted);
  --font-editorial:Georgia,'Times New Roman',serif;
  --photo-mat:clamp(.75rem,.5rem + .555556vw,1rem);
  --type-body:clamp(1rem,.958333rem + .185185vw,1.125rem);
  --type-subhead:clamp(1.375rem,1.291667rem + .370370vw,1.625rem);
  --type-hero:clamp(1.875rem,1.5rem + 1.666667vw,3rem);
  --type-heading:clamp(2rem,1.375rem + 2.777778vw,3.875rem);
  --type-case-heading:clamp(1.875rem,1.583333rem + 1.296296vw,2.75rem);
  --type-contact:clamp(2.8125rem,1.916667rem + 3.981481vw,5.5rem);
  --space-s:clamp(1rem,.916667rem + .370370vw,1.25rem);
  --space-m:clamp(1.5rem,1.333333rem + .740741vw,2rem);
  --space-l:clamp(2rem,1.666667rem + 1.481481vw,3rem);
  --space-xl:clamp(3rem,2.666667rem + 1.481481vw,4rem);
  --space-section:clamp(4rem,3rem + 4.444444vw,7rem);
  --page-gutter:clamp(1rem,-.166667rem + 5.185185vw,4.5rem);
  --radius-control:3.125rem;
  --feedback-fill:rgb(231 227 218 / .07);
  font-size:var(--type-body);
}
.studio-root { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.studio-page ::selection { background:var(--ink); color:var(--bg); }
.studio-page .wrap {
  max-width:86rem;
  padding-inline-start:max(var(--page-gutter),env(safe-area-inset-left));
  padding-inline-end:max(var(--page-gutter),env(safe-area-inset-right));
}
.studio-page :is(.hero-top p,.section-head p,.service p,.case-section p) { font-size:var(--type-body); }
.studio-page .section-head h2 { font-size:var(--type-heading); }
.studio-page .split h2 { font-size:var(--type-heading); }
.studio-page :is(.service h3,.studio-intro) { font-size:var(--type-subhead); }
.studio-page .contact h2 { font-size:var(--type-contact); }
.studio-page .case-section { padding-block:var(--space-section); gap:var(--space-xl); }
.studio-page .case-section h2 { font-size:var(--type-case-heading); }
.studio-page .case-section .lead { font-size:var(--type-subhead); }
.studio-page .case-contact,.studio-page .case-next { padding-block:var(--space-xl); }
.studio-page .case-heading { gap:var(--space-l); margin-block-end:var(--space-l); }
.studio-page .case-heading p { font-size:var(--type-body); }
.studio-page .pill { border-radius:var(--radius-control); }
/* UI Skills: a complete 44px target, with feedback independent of animation. */
.studio-page .navlinks a { min-width:2.75rem; padding-inline:.375rem; justify-content:center; }
.studio-page :is(.pill,.navlinks a,.back-to-top) { touch-action:manipulation; }
.studio-page :is(.pill,.navlinks a,.text-link):active { background:var(--feedback-fill); }
.studio-page .pill.light:active { background:var(--ink); color:var(--button-ink); }
.studio-page .projects>a:active .project-meta { background:var(--feedback-fill); }
.studio-page .projects>a:focus-visible { outline-offset:.5rem; }
@media(hover:hover) and (pointer:fine) {
  .studio-page .pill:not(.light):hover { background:var(--feedback-fill); }
}
@media(forced-colors:active) {
  .studio-page ::selection { background:Highlight; color:HighlightText; }
  .studio-page :is(.pill,.navlinks a,.text-link):active { background:Highlight; color:HighlightText; }
}

/* A print-inspired hierarchy: serif headlines, quiet labels, and readable sans body. */
.studio-page :is(.hero-bottom h1,.section-head h2,.split h2,.contact h2,.case-heading h1,.case-section h2,.case-next h2,.case-contact h2) {
  font-family:var(--font-editorial);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.2;
}
.studio-page .eyebrow { text-transform:none; letter-spacing:.035em; font-size:var(--type-label); }
.studio-page :is(.hero-top p,.section-head p,.service p,.studio-intro,.case-section p,.case-heading p) { line-height:1.65; }
.cala-home .wrap { max-width:86rem; }
.cala-home .hero { padding-block:var(--space-xl) var(--space-l); }
.cala-home .hero-top { align-items:baseline; }
.cala-home .hero-top p { max-width:35ch; }
.cala-home .wordmark {
  font-size:clamp(7rem,23vw,20rem);
  font-weight:450;
  letter-spacing:-.055em;
  margin-block:2rem 3rem;
  color:var(--display-ink);
}
.cala-home .hero-bottom { align-items:end; gap:var(--space-m); }
.cala-home .hero-bottom h1 { font-size:var(--type-hero); max-width:28ch; line-height:1.3; }
.cala-home .hero-bottom h1 em { color:var(--muted); font-weight:400; }
.hero-actions { display:flex; flex-direction:column; align-items:flex-start; gap:.625rem; }
.hero-actions .text-link { padding-inline:.5rem; gap:.75rem; }
.cala-home .landscape {
  height:auto;
  margin:0;
  padding:var(--photo-mat);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:2px;
}
.cala-home .landscape::after { content:none; }
.landscape-image { height:clamp(15rem,31vw,27rem); overflow:hidden; }
.cala-home .landscape-caption {
  position:static;
  max-width:none;
  padding:.875rem 0 .125rem;
  background:transparent;
  color:var(--muted);
  border-radius:0;
  font-size:var(--type-label);
  line-height:1.5;
}
.studio-page .case-image { padding:var(--photo-mat); background:var(--surface); border:1px solid var(--line); }
.studio-page .case-image :is(img,.motion-image) { outline:none; }
.studio-page .case-image>figcaption { padding-block:.875rem .125rem; line-height:1.6; }
.cala-home .section { padding-block:var(--space-section); }
.cala-home .section-head { margin-block-end:var(--space-xl); }
.cala-home .section-head p { max-width:39ch; }
.cala-home .projects {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:var(--space-m);
}
.cala-home .projects>a {
  display:flex;
  flex-direction:column;
  container-type:inline-size;
  container-name:project-card;
}
.cala-home .project-preview {
  height:auto;
  min-height:clamp(24rem,35vw,31rem);
  display:grid;
  padding:var(--space-m);
  border:1px solid rgb(255 255 255 / .1);
}
.cala-home .alder-inner { height:auto; min-height:0; }
.cala-home .form-inner { height:auto; display:flex; flex-direction:column; }
.cala-home .form-inner .mini-button { align-self:flex-start; }
.cala-home .form-preview-photo { flex:1; min-height:7rem; }
.cala-home .form-preview-photo img { position:absolute; inset:0; }
.cala-home .project-meta { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:1.125rem; padding-block:1.5rem 0; }
.cala-home .project-meta h3 { font-size:1.375rem; letter-spacing:-.025em; }
.cala-home .project-meta .project-summary { font-size:var(--type-body); max-width:45ch; }
.cala-home .project-action { margin-block-start:auto; min-height:2.75rem; display:inline-flex; align-items:center; gap:.75rem; }
.cala-home .service { padding-block:var(--space-m); }
.cala-home .contact { padding-block:var(--space-section); }
.cala-home .contact h2 { color:var(--display-ink); margin-block:1.5rem; }
.cala-home .contact .pill { margin-block-start:1rem; }
.cala-home .contact-address { margin-block-start:1.25rem; }
.cala-home footer { font-size:.8125rem; }
@media(min-width:70rem) { .hero-actions { align-items:flex-end; } }
@media(max-width:43.75rem) {
  .cala-home .wordmark { margin-block:1.5rem 2rem; }
  .cala-home .hero-bottom { display:block; }
  .hero-actions { margin-block-start:1.75rem; }
  .cala-home .hero-bottom .pill { margin:0; }
  .cala-home .projects { gap:var(--space-xl); }
  .cala-home .project-preview { min-height:24rem; }
}

/* A compact disclosure on phones; one row of navigation on tablets. */
.menu-toggle {
  align-items:center;
  justify-content:center;
  min-inline-size:4.5rem;
  min-block-size:2.75rem;
  padding:.5rem 1rem;
  border:1px solid var(--control-border);
  border-radius:var(--radius-control);
  background:transparent;
  color:var(--ink);
  font-size:var(--type-label);
  line-height:1.5;
  touch-action:manipulation;
  cursor:pointer;
}
.menu-toggle[aria-expanded="true"],.menu-toggle:active { background:var(--feedback-fill); }
.site-header>nav { column-gap:1.25rem; }
.site-header .navlinks { column-gap:clamp(.5rem,2vw,1.5rem); }
.site-header .logo { white-space:nowrap; }
.header-actions { display:none; }
.header-contact {
  display:inline-flex;
  align-items:center;
  min-block-size:2.75rem;
  padding-inline:.375rem;
  font-size:var(--type-label);
  text-decoration:underline;
  text-underline-offset:.3em;
}
.case-nav .text-link { gap:.5rem; }
@media(max-width:43.75rem) {
  .studio-root { --site-header-height:4rem; }
  .site-header>nav { min-height:4rem; padding-block:.5rem; }
  .site-header[data-nav-ready]>nav {
    display:flex;
    flex-wrap:wrap;
    gap:.25rem .75rem;
  }
  .site-header[data-nav-ready] .logo { margin-inline-end:auto; min-inline-size:0; white-space:normal; }
  .site-header[data-nav-ready] .header-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.625rem; }
  .site-header[data-nav-ready] .menu-toggle { display:inline-flex; }
  .site-header[data-nav-ready] .navlinks {
    flex-basis:100%;
    display:grid;
    gap:0;
    margin-block-start:.5rem;
    padding-block:.5rem;
    border-block-start:1px solid var(--line);
    max-block-size:calc(100dvh - 5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .site-header[data-nav-ready] .navlinks a {
    justify-content:flex-start;
    min-block-size:3rem;
    padding:.625rem .75rem;
    font-size:1rem;
    border-radius:.5rem;
  }
  .site-header[data-nav-ready] .navlinks a:last-child { color:var(--ink); font-weight:600; }
}
@media(hover:hover) {
  .menu-toggle:hover { background:var(--feedback-fill); }
}
@media(forced-colors:active) {
  .menu-toggle { border-color:ButtonText; }
  .menu-toggle[aria-expanded="true"] { background:Highlight; color:HighlightText; }
}
/* Let the card adapt to its own column, including iPad split view. */
@container project-card (max-width:23rem) {
  .cala-home .project-preview { padding:1.125rem; }
  .cala-home .alder-inner { padding:1rem; }
  .cala-home .alder-inner h3 { font-size:clamp(1.75rem,9cqi,2.5rem); }
  .cala-home .form-preview .form-inner h3 { font-size:clamp(1.75rem,9cqi,2.5rem); }
}
@media(max-width:60rem) {
  .cala-home .hero-bottom { display:block; }
  .cala-home .hero-bottom h1 { max-width:28ch; }
  .hero-actions {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:.75rem 1.5rem;
    margin-block-start:1.5rem;
  }
  .studio-page .case-hero { padding-block:var(--space-l); }
}
@media(max-width:30rem) {
  .cala-home .hero-bottom h1 { line-height:1.4; }
  .cala-home .hero-bottom h1 br { display:none; }
  .hero-actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .hero-actions .text-link { justify-content:center; }
  .cala-home .contact>.pill { inline-size:100%; }
}

/* An open, editorial contact layout with a usable alternative to a mail app. */
.contact-grid {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--space-xl);
  align-items:start;
}
.cala-home .contact-grid h2 {
  font-size:clamp(2.75rem,5.5vw,5rem);
  line-height:1.2;
}
.contact-intro>p { max-width:39ch; }
.contact-intro .contact-note { font-size:var(--type-label); margin-block:1rem 0; }
.contact-email { margin-block-start:1.5rem; }
.contact-email .contact-address { margin:0; font-size:var(--type-label); }
.copy-email {
  color:var(--ink);
  background:transparent;
  border:0;
  padding:.5rem 0;
  min-block-size:2.75rem;
  cursor:pointer;
  touch-action:manipulation;
}
.copy-status {
  font-size:var(--type-label);
  line-height:1.6;
  min-block-size:1.6em;
  margin-block:.25rem 0;
  max-width:45ch;
}
.inquiry-details { padding-block-start:1.75rem; }
.inquiry-details h3 {
  font-size:var(--type-subhead);
  font-weight:400;
  line-height:1.4;
  margin:0;
}
.inquiry-prompts { display:grid; gap:1.5rem; margin-block:2rem 2.5rem; }
.inquiry-prompts dt { font-size:var(--type-body); margin-block-end:.375rem; }
.inquiry-prompts dd { color:var(--muted); margin:0; line-height:1.65; max-width:42ch; }
.inquiry-prompts dt span { font-size:var(--type-label); font-weight:400; }
.inquiry-next { border-block-start:1px solid var(--line); padding-block-start:2rem; }
.inquiry-next p { margin-block:1rem 0; max-width:43ch; line-height:1.65; }
@media(max-width:60rem) {
  .contact-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-l); }
  .inquiry-details { padding-block-start:0; }
}
@media(max-width:30rem) {
  .contact-intro>.pill { inline-size:100%; }
}
@media(forced-colors:active) {
  .copy-email { color:LinkText; }
}