/* Existing artwork, paper surfaces, and structural base.
Shared typography is defined in design-tokens.css; current components and
responsive contracts are maintained in design-system.css. See DESIGN-SYSTEM.md. */

/* ===== styles.css ===== */

:root {
  color-scheme:light;
  --paper:#e9e3d4;
  --ink:#25362f;
  --muted:#5d665c;
  --pine:#263b37;
  --acid:#d4eb81;
  --rust:#a84c31;
  --white:#f3f0e5;
  --line:#25362f36;
  --font-display:'Barlow Condensed',Impact,sans-serif;
  --font-body:'DM Sans',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-hand:'Caveat',cursive;
  --gutter:clamp(24px,5vw,88px);
  --container:1280px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px;
  background:var(--pine)
}
body {
  margin:0;
  font:400 16px/1.65 var(--font-body);
  background:var(--pine);
  color:var(--white);
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img,svg {
  display:block;
  max-width:100%
}
::selection {
  background:var(--acid);
  color:var(--ink)
}
.container {
  width:min(calc(100% - var(--gutter)*2),var(--container));
  margin-inline:auto
}
.display {
  font-family:var(--font-display);
  font-weight:600;
  line-height:.96;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0
}
.handwritten {
  
  
  }
.section-label {
  
  text-transform:uppercase;
  
  display:flex;
  align-items:center;
  gap:12px;
  margin:0
}
.section-label:before {
  content:'+';
  color:var(--rust);
  font-size:23px;
  line-height:1
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:19px 24px;
  min-height:52px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  
  text-transform:uppercase;
  
  transition:background .2s,color .2s
}
.btn:after {
  content:'↗';
  font-size:24px
}
.btn:hover {
  background:var(--acid);
  color:var(--ink)
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--rust);
  outline-offset:5px
}
.skip {
  position:fixed;
  top:12px;
  left:12px;
  z-index:99;
  transform:translateY(-180%);
  padding:10px 20px;
  background:var(--acid);
  color:var(--ink)
}
.skip:focus {
  transform:none
}
/* PHOTO / OPENING */
.hero {
  height:100svh;
  min-height:740px;
  max-height:1200px;
  position:sticky;
  top:0;
  z-index:0;
  background:var(--pine);
  isolation:isolate;
  overflow:hidden
}
.hero-media {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#152522b3,#15252240 75%),linear-gradient(0deg,#12231f99,transparent 60%),url('assets/alpine-sky-hero.jpg') center 53%/cover
}
.hero-media:after {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/paper-texture.webp');
  opacity:.07;
  mix-blend-mode:soft-light
}
.hero-grid {
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(#e9e3d40a 1px,transparent 1px),linear-gradient(90deg,#e9e3d40a 1px,transparent 1px);
  background-size:140px 140px;
  mask-image:linear-gradient(90deg,#000,transparent 80%)
}
.site-header {
  padding:26px 0;
  position:absolute;
  inset:0 0 auto;
  z-index:6
}
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #f3f0e540;
  padding-bottom:20px
}
.brand img {
  width:220px;
  height:auto
}
.desktop-nav {
  display:flex;
  gap:34px;
  align-items:center
}
.desktop-nav a {
  
  text-transform:uppercase;
  }
.desktop-nav a:last-child {
  border:1px solid #f3f0e560;
  padding:12px 19px
}
.desktop-nav a:hover {
  color:var(--acid)
}
.menu-button {
  display:none;
  color:var(--white);
  border:1px solid #f3f0e560;
  background:transparent;
  width:46px;
  height:46px;
  padding:12px
}
.menu-button span {
  height:1px;
  background:currentColor;
  display:block;
  margin:5px 0
}
.hero-content {
  height:100%;
  display:grid;
  grid-template-columns:1fr 100px;
  align-content:end;
  padding-top:170px;
  padding-bottom:55px;
  position:relative
}
.hero-copy {
  grid-column:1
}
.hero-title {
  
  
  
  }
.hero-title span {
  
  color:var(--acid);
  display:inline-block;
  margin-top:.04em
}
.hero-kicker {
  
  
  text-transform:uppercase;
  margin:30px 0 9px
}
.hero-positioning {
  
  margin:0;
  color:#f3f0e5b3
}

.coordinates {
  position:absolute;
  right:0;
  top:165px;
  text-align:right;
  
  
  color:#f3f0e5b3
}
.scroll-cue {
  grid-column:2;
  grid-row:1;
  align-self:end;
  justify-self:end;
  writing-mode:vertical-rl;
  display:flex;
  gap:24px;
  align-items:center;
  font:400 9px var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase
}
.scroll-cue span {
  font-size:25px;
  color:var(--acid)
}
/* PAPER / ABOUT */
.page-stack {
  position:relative;
  z-index:2
}
.paper-surface,.contact {
  position:relative;
  color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(#25362f08 1px,transparent 1px),linear-gradient(90deg,#25362f08 1px,transparent 1px),url('assets/paper-texture.webp');
  background-size:28px 28px,28px 28px,512px 512px;
  background-blend-mode:multiply
}
.paper-surface {
  padding-top:15px
}
.about {
  padding:110px 0 80px
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7%;
  align-items:center
}
.about-title {
  
  margin:24px 0 28px;
  max-width:650px
}
.about-copy p {
  
  
  max-width:475px;
  margin:0
}
.about-copy p+p {
  margin-top:18px
}
.research-collage {
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:1;
  margin:0
}
.research-photo {
  position:absolute;
  z-index:3;
  left:26.32%;
  top:37.32%;
  width:47.36%;
  aspect-ratio:1;
  box-sizing:content-box;
  background:url('assets/me-n-appa.webp') center/cover;
  border:10px solid #f6f1e4;
  border-bottom-width:37px;
  transform:rotate(-5deg);
  box-shadow:4px 12px 23px #25362f26
}
.research-photo:after {
  content:"Oh hey what's up";
  position:absolute;
  left:0;
  bottom:-30px;
  width:100%;
  
  text-align:center;
  color:var(--ink)
}
.tape {
  position:absolute;
  left:30%;
  top:-28px;
  width:40%;
  height:37px;
  background:#c2b58a99;
  transform:rotate(8deg);
  clip-path:polygon(1% 0,99% 3%,97% 96%,0 100%);
  mix-blend-mode:multiply
}
.bot {
  position:absolute;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.85
}
.bot-leaf {
  z-index:1;
  left:-9%;
  bottom:-3%;
  width:43%;
  transform:rotate(-14deg)
}
.bot-palm {
  z-index:2;
  right:-8%;
  top:-5%;
  width:43%;
  transform:rotate(11deg)
}
.crosshair {
  position:absolute;
  left:3%;
  top:9%;
  width:28px;
  height:28px;
  background:linear-gradient(var(--rust),var(--rust)) center/1px 100% no-repeat,linear-gradient(var(--rust),var(--rust)) center/100% 1px no-repeat;
  opacity:.5
}
/* A ROUTE THROUGH THE PAGE */
.process {
  padding:24px 0 108px
}
.process-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  padding-top:35px;
  border-top:1px solid var(--line);
  margin-bottom:40px
}
.process-title {
  
  margin-top:18px!important;
  }

.process-list {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px dashed #25362f60
}
.process-step {
  position:relative;
  padding:28px 24px 0;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column
}
.process-step:first-child {
  padding-left:0;
  border-left:0
}
.process-step:last-child {
  padding-right:0
}
.process-number {
  display:block;
  
  color:var(--rust);
  }
.process-step h3 {
  
  
  text-transform:uppercase;
  margin:20px 0 15px;
  min-height:53px
}
.process-step p {
  margin:0;
  
  
  min-height:110px
}
.diagram {
  margin-top:20px;
  height:155px;
  display:grid;
  place-items:center
}
.draw-svg {
  width:100%;
  height:100%;
  max-width:210px;
  color:var(--ink);
  mix-blend-mode:multiply;
  opacity:.8
}
.draw-ready .draw-svg path {
  stroke-dasharray:var(--path-length,0);
  stroke-dashoffset:var(--path-length,0);
  transition:stroke-dashoffset 1.2s ease
}
.draw-ready.is-drawn .draw-svg path {
  stroke-dashoffset:0
}
/* BASECAMP / PEOPLE */
.augmented {
  position:relative;
  padding:100px 0 85px;
  isolation:isolate;
  background:transparent
}
.augmented-media {
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  background-image:linear-gradient(90deg,#152522b3,#15252240 75%),linear-gradient(0deg,#12231f99,transparent 60%),url('assets/alpine-sky-solarpunk.jpg');
  background-size:cover;
  background-position:center 53%
}
.augmented.is-scene-active .augmented-media {
  visibility:visible;
  opacity:1
}
.aug-grid {
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('assets/contact-contour-sketch.svg') 115% 0/480px auto no-repeat;
  opacity:.07;
  filter:invert(1)
}
.aug-top {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  column-gap:8%;
  align-items:end
}
.aug-label {
  grid-column:1/-1;
  color:var(--acid);
  margin-bottom:25px
}
.aug-label:before {
  color:var(--acid)
}
.aug-title {
  grid-column:1;
  }
.aug-intro {
  grid-column:1;
  
  
  margin:24px 0 0;
  color:#f3f0e5c4;
  max-width:520px
}
.services-note {
  
  transform:rotate(-2deg);
  margin:30px 0 42px;
  color:var(--acid)
}
.cap-grid {
  display:grid;
}
.cap-card {
  position:relative;
  min-width:0
}
.cap-img {
  position:relative;
}
.cap-img>img:not(.note-clip) {
  filter:saturate(.6) contrast(.95)
}

.cap-body p {
  margin:0;
}
#services .cap-card:nth-child(odd):before {
  inset: 6px 4px;
}
.cap-card:nth-child(odd) .cap-img {
  transform:rotate(-1.4deg)
}
.cap-card:nth-child(even) .cap-img {
  transform:rotate(1.3deg)
}
/* LEAVE A NOTE */
.contact {
  padding:100px 0 28px;
  overflow:hidden
}
.contact>.container {
  position:relative
}
.contact-grid {
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:9%;
  align-items:center
}
.contact-content {
  position:relative;
  z-index:3
}
.contact-heading h2 {
  
  margin:24px 0
}
.contact-copy {
  
  
  margin:0
}

.contact-note {
  font-size:27px;
  color:var(--rust);
  margin:18px 0 23px;
  transform:rotate(-2deg)
}
.contact-action {
  max-width:390px
}
.contact-action .btn {
  width:100%
}
.contact-email {
  display:inline-block;
  margin-top:16px;
  text-decoration:underline;
  text-underline-offset:5px;
  font:400 11px var(--font-mono)
}
.contact-photo {
  position:relative;
  z-index:2;
  width:57.6%;
  aspect-ratio:1;
  box-sizing:content-box;
  background:url('assets/sand-dunes.webp') center/cover;
  border:12px solid #f6f1e4;
  border-bottom:45px solid #f6f1e4;
  transform:rotate(4deg);
  box-shadow:3px 14px 28px #25362f24;
  justify-self:center
}
.contact-photo:before {
  content:'';
  position:absolute;
  top:-28px;
  left:28%;
  height:40px;
  width:45%;
  background:#c2b58a88;
  transform:rotate(-6deg);
  mix-blend-mode:multiply
}
.contact-photo:after {
  content:'See you out there.';
  position:absolute;
  bottom:-36px;
  left:0;
  right:0;
  text-align:center;
  font:400 24px var(--font-hand)
}
.contact-sketch,.field-margin-sketch {
  position:absolute;
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:1
}
.contact-margin-sketch {
  width:220px;
  right:-100px;
  top:-55px;
  opacity:.55;
  transform:rotate(7deg)
}
.contact-sketch--contour {
  width:330px;
  right:-165px;
  bottom:-85px;
  opacity:.18;
  transform:rotate(-17deg)
}
.contact-sketch--circles {
  width:130px;
  left:-95px;
  top:55%;
  opacity:.15
}
.footer {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  margin-top:100px;
  border-top:1px solid var(--line);
  padding-top:27px;
  z-index:3
}
.footer-brand {
  flex-shrink:0
}
.footer-brand img {
  width:200px;
  height:auto
}
.footer-meta {
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:right;
  
  text-transform:uppercase;
  }
.footer-margin-sketch {
  display:none
}
.mobile-nav {
  display:none;
  position:fixed;
  inset:0;
  z-index:50;
  background:var(--pine);
  place-items:center;
  padding:40px
}
.mobile-nav[data-open=true] {
  display:grid
}
.mobile-nav ul {
  list-style:none;
  text-align:center;
  margin:0;
  padding:0
}
.mobile-nav li+li {
  margin-top:25px
}
.mobile-nav a {
  font:500 58px/1 var(--font-display);
  text-transform:uppercase
}
.nav-close {
  position:absolute;
  top:25px;
  right:25px;
  background:transparent;
  border:1px solid #f3f0e560;
  color:var(--white);
  height:46px;
  width:46px;
  font-size:28px
}
@media(min-width:1500px) {
  .hero-content {
    padding-bottom:75px
  }
  .hero-title {
    }
}
@media(max-width:1050px) {
  .brand img {
    width:200px
  }
  .desktop-nav {
    gap:22px
  }
  .about-grid {
    gap:4%
  }
  .about-copy p {
    }

  .process-step {
    padding-inline:16px
  }
  .process-step p {
    }
  .process-step h3 {
    }
  .contact-grid {
    gap:6%
  }
  .contact-heading h2 {
    }
}
@media(max-width:900px) {
  .desktop-nav {
    display:none
  }
  .menu-button {
    display:block
  }
  .hero-title {
    }
  .hero {
    min-height:760px
  }
  .about {
    padding:85px 0 60px
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .about-copy p {
    max-width:570px
  }
  .about-title {
    }
  .research-collage {
    max-width:490px;
    justify-self:center
  }
  .process-head {
    margin-top:15px
  }
  .process-list {
    grid-template-columns:1fr 1fr;
    gap:38px 0
  }
  .process-step:nth-child(3) {
    padding-left:0;
    border-left:0
  }
  .process-step:nth-child(2) {
    padding-right:0
  }
  .process-step p {
    
    min-height:85px
  }
  .process-step h3 {
    
    min-height:0
  }
  .diagram {
    height:165px
  }
  .aug-top {
    grid-template-columns:1fr;
    gap:0
  }
  .aug-title {
    }
  .aug-intro {
    margin-top:27px;
    max-width:520px
  }

  .contact-grid {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .contact-heading h2 {
    }
  .contact-photo {
    width:60.8%;
    aspect-ratio:1;
    box-sizing:content-box
  }
  .contact-copy {
    }
  .contact .btn {
    
    padding:15px
  }
  .footer-brand img {
    width:185px
  }
  .footer-meta {
    }
}
@media(max-width:600px) {
  :root {
    --gutter:24px
  }
  .hero {
    min-height:700px;
    height:100svh;
    max-height:1000px
  }
  .site-header {
    padding-top:20px
  }
  .header-inner {
    padding-bottom:17px
  }
  .brand img {
    width:180px
  }
  .hero-content {
    grid-template-columns:1fr;
    padding-bottom:45px;
    padding-top:145px
  }
  .coordinates {
    
    top:135px
  }

  .coordinates {
    right:auto;
    left:0;
    text-align:left
  }
  .hero-title {
    }
  .hero-title span {
    
    }
  .hero-kicker {
    
    
    margin-top:22px
  }
  .hero-positioning {
    
    max-width:250px
  }
  .scroll-cue {
    grid-column:1;
    grid-row:auto;
    writing-mode:horizontal-tb;
    justify-self:start;
    gap:20px;
    font-size:8px;
    margin-top:32px
  }
  .scroll-cue span {
    font-size:21px
  }
  .about {
    padding-top:70px;
    padding-bottom:50px
  }
  .about-title {
    
    margin:21px 0 25px
  }
  .about-copy p {
    
    }
  .about-grid {
    gap:40px
  }
  .research-collage {
    width:93%;
    margin-top:4px;
    margin-bottom:12px
  }
  .bot-palm {
    right:-11%
  }
  .process {
    padding-bottom:75px
  }
  .process-head {
    display:block;
    padding-top:30px;
    margin-bottom:30px
  }
  .process-title {
    }

  .process-list {
    grid-template-columns:1fr;
    gap:0
  }
  .process-step,.process-step:first-child,.process-step:last-child,.process-step:nth-child(3) {
    border-left:0;
    border-bottom:1px dashed var(--line);
    padding:26px 0;
    display:grid;
    grid-template-columns:1fr 110px;
    gap:8px 16px
  }
  .process-number {
    grid-column:1/-1;
    }
  .process-step h3 {
    grid-column:1/-1;
    
    margin:9px 0 8px
  }
  .process-step p {
    grid-column:1;
    min-height:0;
    
    align-self:center
  }
  .diagram {
    grid-column:2;
    height:120px;
    margin:0;
    align-self:center
  }
  .augmented {
    padding:75px 0 65px
  }
  .aug-title {
    }
  .aug-intro {
    
    margin-top:23px
  }
  .services-note {
    
    margin:27px 0 34px
  }

  .hero-media {
    background-position:62% center
  }
  .augmented-media {
    background-position:62% center
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .draw-ready .draw-svg path {
    stroke-dashoffset:0!important
  }
}

/* Keep the paper light enough for graphite, with the photographic scene beneath its torn edge. */
html {
  overflow-x:clip
}
.paper-surface,.contact {
  background-image:linear-gradient(#25362f07 1px,transparent 1px),linear-gradient(90deg,#25362f07 1px,transparent 1px),linear-gradient(#e9e3d4c9,#e9e3d4c9),url('assets/paper-texture.webp');
  background-size:28px 28px,28px 28px,auto,512px 512px;
  background-blend-mode:normal
}
.paper-surface {
  z-index:2
}
.augmented {
  z-index:1
}
.contact {
  z-index:3
}
@media(max-width:600px) {
  .hero-title {
    }
  .aug-title {
    }
}
/* Both scenes share a viewport-sized canvas, so the journal reveals the same terrain. */
.hero-media {
  position:fixed;
  inset:0
}
.augmented-media::after {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/paper-texture.webp');
  opacity:.07;
  mix-blend-mode:soft-light
}
.aug-content {
  position:relative;
  z-index:1
}
/* Both notebook photographs share the Contact photo's responsive dimensions. */
:root {
  --notebook-content-width:min(calc(100vw - var(--gutter)*2),var(--container));
  --notebook-photo-size:calc(var(--notebook-content-width)*.2496)
}
.research-photo,.contact-photo {
  width:var(--notebook-photo-size)
}
.research-photo {
  left:calc(50% - var(--notebook-photo-size)/2);
  top:calc(61% - var(--notebook-photo-size)/2);
  border-width:12px;
  border-bottom-width:45px
}
.research-photo:after {
  bottom:-36px
}
@media(max-width:1050px) {
  :root {
    --notebook-photo-size:calc(var(--notebook-content-width)*.2578285714)
  }
}
@media(max-width:900px) {
  :root {
    --notebook-photo-size:calc((var(--notebook-content-width) - 25px)*.304)
  }
}
@media(max-width:760px) {
  :root {
    --notebook-photo-size:min(calc(var(--notebook-content-width)*.4672),211.2px)
  }
}
/* Service description layout. */
.cap-body {
  position:relative;
  isolation:isolate;
  margin:6px 4px 0;
}
.cap-card:nth-child(even) .cap-body {
  transform:rotate(-.8deg)
}

.note-clip {
  position:absolute;
  z-index:3;
  pointer-events:none;
}

@media(max-width:600px) {
  .cap-body {
    margin:7px 5px 0;
  }
}
/* The note slips behind the photograph; its clip stays on the front layer. */
.cap-img {
  z-index:3;
  overflow:visible
}
.cap-body {
  z-index:1;
  margin-top:-30px;
}
.cap-img>.note-clip {
  object-fit:contain;
}
@media(max-width:600px) {
  .cap-body {
    margin-top:-30px;
  }
}

/* Graph-paper grain and a close contact shadow distinguish the clipped layers. */

.cap-img {
  box-shadow:0 3px 5px #17221e38,0 10px 16px -10px #17221e59
}
/* Keep the down arrow upright within the vertical desktop scroll label. */
.scroll-cue span {
  writing-mode:horizontal-tb;
  line-height:1
}
.coordinates {
  color:var(--acid)
}
/* Anchor both editions to the same right-hand ridge, including on narrow screens. */
.hero-media,.augmented-media {
  background-position:right 53%
}
/* Contact and its footer switch to the stacked mobile composition at 760px. */
@media(max-width:760px) {
  .contact {
    padding-top:75px
  }
  .contact-grid {
    grid-template-columns:1fr;
    gap:45px
  }
  .contact-heading h2 {
    
    margin:23px 0
  }
  .contact-copy {
    
    max-width:430px
  }
  .contact-action {
    max-width:none
  }
  .contact .btn {
    
    padding:17px 20px
  }
  .contact-photo {
    width:46.72%;
    aspect-ratio:1;
    box-sizing:content-box;
    max-width:211.2px;
    justify-self:center;
    margin:10px 0 0
  }
  .contact-margin-sketch {
    top:58%;
    right:-65px;
    width:175px
  }
  .contact-sketch--contour {
    bottom:-40px;
    right:-130px;
    width:230px
  }
  .contact-sketch--circles {
    top:50%;
    left:-65px
  }
  .footer {
    margin-top:75px;
    align-items:start;
    flex-direction:column;
    gap:25px
  }
  .footer-brand img {
    width:185px
  }
  .footer-meta {
    text-align:left;
    
    gap:9px
  }
  .contact-heading h2 {
    }
}
/* Three stages of the same landscape, separated by complete notebook pages. */
.about-paper,.process-paper {
  min-height:100svh;
  display:grid;
  align-content:center
}
.progress-section {
  position:relative;
  isolation:isolate;
  z-index:1;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding:110px 0 90px;
  background:transparent
}
.progress-media {
  position:fixed;
  inset:0;
  z-index:-2;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background-image:linear-gradient(90deg,#152522b3,#15252240 75%),linear-gradient(0deg,#12231f99,transparent 60%),url('assets/alpine-sky-stage3.jpg');
  background-size:cover;
  background-position:right 53%
}
.progress-section.is-scene-active .progress-media {
  visibility:visible;
  opacity:1
}
.progress-media::after {
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/paper-texture.webp');
  opacity:.07;
  mix-blend-mode:soft-light
}
.progress-content {
  position:relative;
  z-index:1
}
.progress-label {
  color:var(--acid)
}
.progress-label::before {
  color:var(--acid)
}
.progress-heading {
  
  margin:25px 0 20px;
  max-width:650px
}

@media(max-width:600px) {
  .progress-section {
    padding:90px 0 65px
  }
  .progress-heading {
    }
}
/* Approved studio copy: preserve the composition as the text reflows. */
.hero-positioning {
  max-width:580px;
  
  
  margin:25px 0 0;
  color:#f3f0e5d9
}
.hero-kicker {
  margin:20px 0 0
}
.aug-intro p {
  margin:0
}

.contact-start {
  margin-top:16px
}
.contact-heading h2 {
  }
@media(max-width:900px) {
  .hero-positioning {
    
    max-width:520px
  }
}
@media(max-width:760px) {
  .contact-heading h2 {
    }
}
@media(max-width:600px) {
  .hero-title {
    }
  .hero-title span {
    }
  .hero-positioning {
    
    max-width:330px;
    margin-top:24px
  }
  .hero-kicker {
    margin-top:18px
  }
}
/* Six services share the clipped-photo treatment and the fixed stage-two landscape. */
.section-anchor {
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0
}
#services .cap-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:52px 32px
}

@media(max-width:1100px) {
  #services .cap-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:46px 28px
  }
}
@media(max-width:600px) {
  #services .cap-grid {
    grid-template-columns:1fr;
    gap:40px
  }
}

/* ===== hero-atmosphere.css ===== */

/* Photographic vapor stays on the hero's viewport-aligned canvas. */
.hero .hero-media {
  background:var(--pine) url('assets/alpine-sky-hero.jpg') right 53%/cover no-repeat
}
.hero .hero-media::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg,#152522b3,#15252240 75%),linear-gradient(0deg,#12231f99,transparent 60%);
  pointer-events:none
}
.hero .hero-media::after {
  z-index:3;
  pointer-events:none
}
.hero-atmosphere {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  contain:paint
}
.hero-mist {
  position:absolute;
  inset:0;
  background-position:right 53%;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  filter:brightness(1.35);
  will-change:transform,opacity;
  animation-play-state:paused;
  pointer-events:none
}
.hero-mist--ridge {
  background-image:url('assets/hero-mist-ridge.webp');
  animation:hero-ridge-mist 12s linear infinite;
  animation-delay:-3s;
  animation-play-state:paused
}
.hero-mist--ridge-follow {
  animation-delay:-6s
}
.hero-mist--horizon {
  background-image:url('assets/hero-mist-horizon.webp');
  animation:hero-horizon-mist 17s linear infinite;
  animation-delay:-7s;
  animation-play-state:paused
}
.hero.is-atmosphere-active .hero-mist {
  animation-play-state:running
}
@keyframes hero-ridge-mist {
  0% {
    opacity:0;
    transform:translate3d(-7vw,2vh,0) scale(1.18)
  }
  20% {
    opacity:.4
  }
  66% {
    opacity:.28
  }
  100% {
    opacity:0;
    transform:translate3d(9vw,-2vh,0) scale(1.22)
  }
}
@keyframes hero-horizon-mist {
  0% {
    opacity:0;
    transform:translate3d(-4vw,.8vh,0) scale(1.12)
  }
  23% {
    opacity:.26
  }
  72% {
    opacity:.19
  }
  100% {
    opacity:0;
    transform:translate3d(6vw,-.7vh,0) scale(1.15)
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-atmosphere {
    display:none
  }
}

/* ===== paper-edge.css ===== */

.paper-surface,.contact {
  clip-path:polygon(0 8px,0.5% 8px,1.0% 4px,1.5% 11px,2.0% 4px,2.5% 8px,3.0% 7px,3.5% 7px,4.0% 8px,4.5% 5px,5.0% 9px,5.5% 8px,6.0% 11px,6.5% 11px,7.0% 4px,7.5% 8px,8.0% 3px,8.5% 7px,9.0% 8px,9.5% 5px,10.0% 3px,10.5% 3px,11.0% 7px,11.5% 7px,12.0% 5px,12.5% 11px,13.0% 6px,13.5% 8px,14.0% 4px,14.5% 7px,15.0% 11px,15.5% 7px,16.0% 3px,16.5% 9px,17.0% 4px,17.5% 11px,18.0% 4px,18.5% 7px,19.0% 11px,19.5% 9px,20.0% 3px,20.5% 8px,21.0% 5px,21.5% 3px,22.0% 8px,22.5% 6px,23.0% 6px,23.5% 7px,24.0% 9px,24.5% 3px,25.0% 3px,25.5% 11px,26.0% 7px,26.5% 9px,27.0% 5px,27.5% 8px,28.0% 9px,28.5% 8px,29.0% 3px,29.5% 3px,30.0% 9px,30.5% 3px,31.0% 4px,31.5% 6px,32.0% 6px,32.5% 11px,33.0% 9px,33.5% 9px,34.0% 5px,34.5% 9px,35.0% 6px,35.5% 3px,36.0% 8px,36.5% 3px,37.0% 3px,37.5% 8px,38.0% 6px,38.5% 4px,39.0% 9px,39.5% 8px,40.0% 9px,40.5% 4px,41.0% 7px,41.5% 9px,42.0% 6px,42.5% 7px,43.0% 3px,43.5% 9px,44.0% 3px,44.5% 7px,45.0% 11px,45.5% 4px,46.0% 5px,46.5% 11px,47.0% 6px,47.5% 4px,48.0% 7px,48.5% 3px,49.0% 5px,49.5% 3px,50.0% 11px,50.5% 11px,51.0% 8px,51.5% 9px,52.0% 6px,52.5% 8px,53.0% 8px,53.5% 5px,54.0% 7px,54.5% 7px,55.0% 4px,55.5% 8px,56.0% 6px,56.5% 4px,57.0% 11px,57.5% 9px,58.0% 4px,58.5% 9px,59.0% 3px,59.5% 4px,60.0% 11px,60.5% 4px,61.0% 7px,61.5% 5px,62.0% 7px,62.5% 9px,63.0% 8px,63.5% 4px,64.0% 7px,64.5% 5px,65.0% 3px,65.5% 11px,66.0% 8px,66.5% 7px,67.0% 11px,67.5% 3px,68.0% 5px,68.5% 6px,69.0% 9px,69.5% 8px,70.0% 9px,70.5% 11px,71.0% 8px,71.5% 5px,72.0% 8px,72.5% 7px,73.0% 3px,73.5% 4px,74.0% 7px,74.5% 3px,75.0% 5px,75.5% 7px,76.0% 3px,76.5% 5px,77.0% 4px,77.5% 5px,78.0% 3px,78.5% 5px,79.0% 5px,79.5% 4px,80.0% 6px,80.5% 6px,81.0% 11px,81.5% 4px,82.0% 5px,82.5% 8px,83.0% 7px,83.5% 3px,84.0% 4px,84.5% 8px,85.0% 4px,85.5% 6px,86.0% 4px,86.5% 5px,87.0% 11px,87.5% 6px,88.0% 3px,88.5% 5px,89.0% 11px,89.5% 5px,90.0% 9px,90.5% 11px,91.0% 5px,91.5% 3px,92.0% 11px,92.5% 9px,93.0% 3px,93.5% 9px,94.0% 7px,94.5% 11px,95.0% 7px,95.5% 3px,96.0% 4px,96.5% 9px,97.0% 5px,97.5% 9px,98.0% 6px,98.5% 3px,99.0% 8px,99.5% 5px,100.0% 4px,100% calc(100% - 7px),99.5% calc(100% - 11px),99.0% calc(100% - 7px),98.5% calc(100% - 5px),98.0% calc(100% - 7px),97.5% calc(100% - 3px),97.0% calc(100% - 9px),96.5% calc(100% - 8px),96.0% calc(100% - 11px),95.5% calc(100% - 11px),95.0% calc(100% - 9px),94.5% calc(100% - 11px),94.0% calc(100% - 8px),93.5% calc(100% - 11px),93.0% calc(100% - 5px),92.5% calc(100% - 4px),92.0% calc(100% - 5px),91.5% calc(100% - 4px),91.0% calc(100% - 11px),90.5% calc(100% - 6px),90.0% calc(100% - 9px),89.5% calc(100% - 8px),89.0% calc(100% - 8px),88.5% calc(100% - 3px),88.0% calc(100% - 11px),87.5% calc(100% - 8px),87.0% calc(100% - 9px),86.5% calc(100% - 8px),86.0% calc(100% - 5px),85.5% calc(100% - 4px),85.0% calc(100% - 5px),84.5% calc(100% - 11px),84.0% calc(100% - 11px),83.5% calc(100% - 3px),83.0% calc(100% - 9px),82.5% calc(100% - 6px),82.0% calc(100% - 8px),81.5% calc(100% - 11px),81.0% calc(100% - 5px),80.5% calc(100% - 7px),80.0% calc(100% - 9px),79.5% calc(100% - 9px),79.0% calc(100% - 7px),78.5% calc(100% - 5px),78.0% calc(100% - 5px),77.5% calc(100% - 8px),77.0% calc(100% - 3px),76.5% calc(100% - 6px),76.0% calc(100% - 7px),75.5% calc(100% - 6px),75.0% calc(100% - 8px),74.5% calc(100% - 9px),74.0% calc(100% - 6px),73.5% calc(100% - 3px),73.0% calc(100% - 8px),72.5% calc(100% - 3px),72.0% calc(100% - 6px),71.5% calc(100% - 8px),71.0% calc(100% - 4px),70.5% calc(100% - 6px),70.0% calc(100% - 8px),69.5% calc(100% - 5px),69.0% calc(100% - 8px),68.5% calc(100% - 11px),68.0% calc(100% - 7px),67.5% calc(100% - 8px),67.0% calc(100% - 9px),66.5% calc(100% - 3px),66.0% calc(100% - 4px),65.5% calc(100% - 6px),65.0% calc(100% - 11px),64.5% calc(100% - 4px),64.0% calc(100% - 3px),63.5% calc(100% - 9px),63.0% calc(100% - 6px),62.5% calc(100% - 7px),62.0% calc(100% - 11px),61.5% calc(100% - 11px),61.0% calc(100% - 3px),60.5% calc(100% - 7px),60.0% calc(100% - 3px),59.5% calc(100% - 4px),59.0% calc(100% - 7px),58.5% calc(100% - 8px),58.0% calc(100% - 7px),57.5% calc(100% - 6px),57.0% calc(100% - 4px),56.5% calc(100% - 11px),56.0% calc(100% - 3px),55.5% calc(100% - 7px),55.0% calc(100% - 11px),54.5% calc(100% - 6px),54.0% calc(100% - 11px),53.5% calc(100% - 9px),53.0% calc(100% - 11px),52.5% calc(100% - 6px),52.0% calc(100% - 5px),51.5% calc(100% - 6px),51.0% calc(100% - 11px),50.5% calc(100% - 7px),50.0% calc(100% - 3px),49.5% calc(100% - 11px),49.0% calc(100% - 8px),48.5% calc(100% - 4px),48.0% calc(100% - 8px),47.5% calc(100% - 7px),47.0% calc(100% - 3px),46.5% calc(100% - 3px),46.0% calc(100% - 6px),45.5% calc(100% - 11px),45.0% calc(100% - 7px),44.5% calc(100% - 4px),44.0% calc(100% - 5px),43.5% calc(100% - 7px),43.0% calc(100% - 6px),42.5% calc(100% - 11px),42.0% calc(100% - 9px),41.5% calc(100% - 5px),41.0% calc(100% - 7px),40.5% calc(100% - 5px),40.0% calc(100% - 8px),39.5% calc(100% - 3px),39.0% calc(100% - 9px),38.5% calc(100% - 5px),38.0% calc(100% - 6px),37.5% calc(100% - 9px),37.0% calc(100% - 4px),36.5% calc(100% - 4px),36.0% calc(100% - 5px),35.5% calc(100% - 7px),35.0% calc(100% - 4px),34.5% calc(100% - 9px),34.0% calc(100% - 7px),33.5% calc(100% - 11px),33.0% calc(100% - 7px),32.5% calc(100% - 6px),32.0% calc(100% - 9px),31.5% calc(100% - 6px),31.0% calc(100% - 7px),30.5% calc(100% - 6px),30.0% calc(100% - 7px),29.5% calc(100% - 11px),29.0% calc(100% - 11px),28.5% calc(100% - 4px),28.0% calc(100% - 6px),27.5% calc(100% - 6px),27.0% calc(100% - 8px),26.5% calc(100% - 8px),26.0% calc(100% - 6px),25.5% calc(100% - 3px),25.0% calc(100% - 4px),24.5% calc(100% - 4px),24.0% calc(100% - 11px),23.5% calc(100% - 8px),23.0% calc(100% - 4px),22.5% calc(100% - 8px),22.0% calc(100% - 7px),21.5% calc(100% - 11px),21.0% calc(100% - 6px),20.5% calc(100% - 5px),20.0% calc(100% - 5px),19.5% calc(100% - 7px),19.0% calc(100% - 8px),18.5% calc(100% - 6px),18.0% calc(100% - 9px),17.5% calc(100% - 3px),17.0% calc(100% - 5px),16.5% calc(100% - 11px),16.0% calc(100% - 6px),15.5% calc(100% - 11px),15.0% calc(100% - 9px),14.5% calc(100% - 3px),14.0% calc(100% - 11px),13.5% calc(100% - 6px),13.0% calc(100% - 11px),12.5% calc(100% - 9px),12.0% calc(100% - 9px),11.5% calc(100% - 3px),11.0% calc(100% - 6px),10.5% calc(100% - 5px),10.0% calc(100% - 7px),9.5% calc(100% - 6px),9.0% calc(100% - 5px),8.5% calc(100% - 5px),8.0% calc(100% - 6px),7.5% calc(100% - 3px),7.0% calc(100% - 5px),6.5% calc(100% - 6px),6.0% calc(100% - 11px),5.5% calc(100% - 6px),5.0% calc(100% - 4px),4.5% calc(100% - 4px),4.0% calc(100% - 3px),3.5% calc(100% - 4px),3.0% calc(100% - 4px),2.5% calc(100% - 11px),2.0% calc(100% - 4px),1.5% calc(100% - 7px),1.0% calc(100% - 8px),0.5% calc(100% - 6px),0.0% calc(100% - 6px))
}

/* ===== work.css ===== */

/* Field reports sit above the fixed stage-three landscape. */
.progress-section {
  display:block;
  padding:110px 0 80px
}
.work-heading {
  max-width:760px;
  margin-bottom:64px
}
.progress-heading {
  
  max-width:none;
  margin:24px 0 18px;
  }
.work-intro {
  margin:0;
  
  
  color:var(--white);
  max-width:640px
}
.work-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;
  align-items:start
}
.work-card {
  position:relative;
  isolation:isolate;
  color:var(--ink);
  padding:38px 36px 32px;
  min-width:0;
  filter:drop-shadow(2px 9px 8px #0a171b55);
  transform:rotate(-.45deg)
}
.work-card:nth-child(even) {
  transform:rotate(.45deg)
}
.work-card::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:#ded0af;
  background-image:linear-gradient(#52604b14 1px,transparent 1px),linear-gradient(90deg,#52604b10 1px,transparent 1px),linear-gradient(#e3d6b7a3,#e3d6b7a3),url('assets/paper-texture.webp');
  background-size:23px 23px,23px 23px,auto,430px 430px;
  clip-path:polygon(.3% .4%,12% .1%,24% .35%,38% 0,52% .3%,67% .1%,82% .35%,99.6% .1%,100% 23%,99.7% 45%,100% 72%,99.8% 99.3%,97% 99.7%,94% 99.2%,91% 100%,88% 99.5%,85% 99.8%,81% 99.3%,77% 99.8%,73% 99.4%,69% 99.9%,65% 99.4%,60% 99.9%,56% 99.6%,51% 99.9%,47% 99.4%,43% 99.8%,39% 99.5%,35% 100%,31% 99.5%,27% 99.9%,23% 99.4%,19% 99.8%,15% 99.3%,11% 99.7%,7% 99.3%,3% 99.8%,.2% 99.4%,0 76%,.2% 53%,0 27%)
}
.work-clip {
  position:absolute;
  z-index:2;
  top:-39px;
  left:calc(50% - 34px);
  width:68px;
  height:auto;
  filter:drop-shadow(.6px 1.4px .7px #17211a55);
  transform:rotate(1deg);
  pointer-events:none
}
.work-card:nth-child(even) .work-clip {
  transform:rotate(-2deg)
}
.work-reference {
  margin:0 0 20px;
  
  
  text-transform:uppercase
}
.work-card-head {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:8px;
  align-items:start;
  min-height:200px
}
.work-card h3 {
  
  
  margin:0
}
.work-category {
  position:relative;
  margin:28px 0 0;
  
  
  text-transform:uppercase
}
.work-category::before {
  content:'';
  position:absolute;
  left:0;
  top:-13px;
  width:80px;
  height:2px;
  background:#b4c968;
  transform:rotate(-.6deg)
}
.work-diagram {
  width:100%;
  height:auto;
  max-height:205px;
  object-fit:contain;
  opacity:.85;
  transform:rotate(-2deg)
}
.work-card:nth-child(even) .work-diagram {
  transform:rotate(1deg)
}
.work-facts {
  position:relative;
  z-index:1;
  margin:8px 0 25px;
  max-width:calc(100% - 70px)
}
.work-facts>div+div {
  margin-top:20px
}
.work-facts dt {
  
  text-transform:uppercase;
  }
.work-facts dt {
  text-decoration:underline;
  text-decoration-color:#65705645;
  text-underline-offset:4px;
  margin-bottom:6px
}
.work-facts dd {
  
  
  margin:0
}
.work-specimen {
  position:absolute;
  z-index:0;
  right:12px;
  bottom:26px;
  width:100px;
  max-height:225px;
  object-fit:contain;
  mix-blend-mode:multiply;
  opacity:.8;
  pointer-events:none;
  transform:rotate(6deg);
  transform-origin:bottom
}
.work-specimen--flower {
  right:8px;
  width:108px;
  transform:rotate(-7deg)
}
.work-annotation {
  position:absolute;
  right:105px;
  bottom:32px;
  font:500 25px/.85 var(--font-hand);
  transform:rotate(-12deg);
  color:#59604b;
  pointer-events:none
}
.work-disclaimer {
  margin:25px 0 0;
  
  color:#f3f0e5cc
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.work-card::before {
  box-shadow:inset 0 0 48px #92764a2e,inset 0 0 3px #8a6b3c66
}
@media(max-width:1100px) {
  .work-card {
    padding:34px 26px 27px
  }
  .work-card-head {
    min-height:180px
  }
  .work-card h3 {
    }
  .work-category {
    }
  .work-facts {
    max-width:calc(100% - 45px)
  }
  .work-facts dd {
    }
  .work-specimen {
    width:78px;
    right:3px;
    opacity:.65
  }
  .work-annotation {
    right:79px;
    font-size:23px
  }
  .work-grid {
    gap:25px
  }
}
@media(max-width:1000px) {
  .work-grid {
    grid-template-columns:1fr;
    max-width:640px;
    margin-inline:auto;
    gap:45px
  }
  .work-card-head {
    min-height:200px
  }
  .work-card h3 {
    }
  .work-facts {
    max-width:calc(100% - 70px)
  }
  .work-facts dd {
    }
  .work-specimen {
    width:100px;
    right:8px
  }
  .work-annotation {
    right:105px
  }
}
@media(max-width:760px) {
  .progress-section {
    padding:100px 0 65px
  }
  .work-heading {
    margin-bottom:55px
  }
  .progress-heading {
    
    margin-top:22px
  }
  .work-intro {
    
    max-width:390px
  }
  .work-grid {
    grid-template-columns:1fr;
    gap:45px;
    max-width:580px;
    margin-inline:auto
  }
  .work-card {
    padding:32px 28px 25px
  }
  .work-card-head {
    min-height:180px;
    gap:12px
  }
  .work-card h3 {
    }
  .work-diagram {
    max-height:190px
  }
  .work-facts {
    max-width:calc(100% - 65px)
  }
  .work-facts dd {
    }
  .work-specimen {
    width:94px;
    right:8px;
    opacity:.75
  }
  .work-annotation {
    right:98px
  }
  .work-disclaimer {
    }
  .mobile-nav li+li {
    margin-top:20px
  }
}
@media(max-width:420px) {
  .progress-heading {
    }
  .work-card {
    padding:30px 23px 24px
  }
  .work-card-head {
    grid-template-columns:1fr;
    min-height:0
  }
  .work-card h3 {
    }
  .work-category {
    }
  .work-diagram {
    width:215px;
    justify-self:center;
    margin:12px 0 18px
  }
  .work-facts {
    max-width:calc(100% - 24px);
    margin-top:0
  }
  .work-facts dd {
    }
  .work-specimen {
    width:78px;
    opacity:.35;
    bottom:38px
  }
  .work-annotation {
    display:none
  }

  .work-facts>div:last-child {
    padding-right:28px
  }
  .work-intro {
    max-width:290px
  }
  .mobile-nav a {
    font-size:50px
  }
}

/* Services: Polaroid photographs and lined backing paper. */

#services .cap-card:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background-color:#ddcfb3;
  background-image:linear-gradient(90deg,transparent 23px,#a84c3138 24px,transparent 25px),repeating-linear-gradient(transparent 0 29px,#25362f12 29px 30px),linear-gradient(#ddcfb3df,#ddcfb3df),url('assets/paper-texture.webp');
  background-size:auto,auto,auto,340px;
  clip-path:polygon(0 5px,5% 2px,12% 5px,21% 1px,29% 4px,40% 0,49% 3px,58% 1px,69% 4px,79% 0,91% 3px,100% 1px,100% calc(100% - 5px),95% calc(100% - 2px),89% calc(100% - 6px),81% 100%,73% calc(100% - 4px),65% calc(100% - 1px),56% calc(100% - 5px),48% 100%,39% calc(100% - 3px),30% calc(100% - 6px),23% calc(100% - 1px),15% calc(100% - 4px),8% 100%,0 calc(100% - 3px))
}

#services .cap-img {
  width:94%;
  margin-inline:auto;
  height:auto;
  aspect-ratio:auto;
  border:0;
  padding:9px 9px 0;
  background:#f3f0e5;
  transform-origin:calc(100% - 32px) 0
}
#services .cap-img>img:not(.note-clip) {
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover
}
#services .cap-img h3 {
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:72px;
  margin:0;
  padding:10px 8px 16px;
  background:none;
  color:var(--ink);
  text-align:center;
  text-transform:none;
  }
#services .cap-img>.note-clip,#services .cap-card:nth-child(even) .cap-img>.note-clip {
  right:17px;
  top:-4px;
  bottom:auto;
  width:30px;
  height:auto;
  transform:none;
  transform-origin:50% 5px;
  filter:drop-shadow(.5px 1px .6px #17221e66)
}
#services .cap-card {
  isolation:isolate
}
#services .cap-card:before {
  inset:0 4px;
  transform-origin:calc(97% - 36px) 0
}

#services .cap-body {
  padding:46px 29px 40px 37px;
  filter:none
}
#services .cap-body p {
  
  color:var(--ink)
}
@media(max-width:1100px) {
  #services .cap-img h3 {
    }
}
@media(max-width:600px) {
  #services .cap-img h3 {
    }
}

/* Contact: the open form sits beside the section copy and Polaroid. */
#contact .contact-grid {
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-rows:auto 1fr;
  align-items:start;
  gap:28px 7%;
}
#contact .contact-content { grid-column:1; grid-row:1; }
#contact .contact-heading h2 {   margin:22px 0; }
.contact-title-accent {
  text-decoration:underline;
  text-decoration-color:var(--rust);
  text-decoration-thickness:4px;
  text-underline-offset:7px;
  text-decoration-skip-ink:none;
}
#contact .contact-copy {   }
#contact .contact-photo {
  grid-column:1;
  grid-row:2;
  width:min(62%,260px);
  margin:0 0 24px;
  justify-self:center;
  align-self:start;
}
.contact-form {
  position:relative;
  z-index:3;
  grid-column:2;
  grid-row:1 / span 2;
  min-width:0;
  margin:0;
  padding:26px clamp(22px,3vw,42px) 28px;
  color:var(--ink);
  background-color:#f3ebda;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,#8e795b14 27px,#8e795b14 28px),linear-gradient(#f3ebdadb,#f3ebdadb),url('assets/paper-texture.webp');
  background-size:auto,auto,340px;
  box-shadow:2px 5px 13px #25362f1a;
  border-top:2px solid #25362f40;
}
.contact-form:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:8px;
  background:#f3ebda;
  clip-path:polygon(0 0,100% 0,100% 60%,95% 95%,88% 55%,82% 100%,75% 65%,68% 90%,60% 45%,52% 100%,43% 60%,35% 90%,26% 50%,18% 100%,9% 65%,0 90%);
}
.contact-form-heading { margin-bottom:22px; }
.contact-form-section {
  margin:0 0 8px;
  color:var(--rust);
  
  
  text-transform:uppercase;
}
.contact-project-title { margin:28px 0 14px; }
.contact-form-heading p,.contact-field-hint {
  margin:0;
  color:var(--muted);
  
}
.contact-form-fields,.contact-form-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 24px;
}
.contact-form-options { align-items:start; }
.contact-field { min-width:0; }
.contact-field>label,.contact-choice-group legend {
  display:block;
  padding:0;
  
}
.contact-field>label { margin-bottom:7px; }
.contact-field label>span:not(.contact-optional),.contact-choice-group legend>span { color:var(--rust); }
.contact-optional { color:var(--muted);   margin-left:5px; }
.contact-field input,.contact-field textarea {
  display:block;
  width:100%;
  min-width:0;
  min-height:46px;
  padding:10px 11px;
  border:1px solid #25362f59;
  border-radius:0;
  background:#fffaf0d9;
  color:var(--ink);
  
  box-shadow:none;
}
.contact-field textarea { resize:vertical; min-height:125px; }
.contact-field textarea::placeholder { color:#687068; opacity:1;  }
.contact-field input:focus-visible,.contact-field textarea:focus-visible,.contact-choice input:focus-visible {
  outline:2px solid var(--rust);
  outline-offset:3px;
}
.contact-field input[aria-invalid=true] { border-color:var(--rust); }
.contact-choice-group { min-width:0; margin:0; padding:0; border:0; }
.contact-choice-group legend { margin-bottom:8px; }
.contact-budget-options,.contact-help-options { display:grid; grid-template-columns:1fr; gap:0; }
.contact-choice {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:3px 0;
  cursor:pointer;
  color:var(--ink);
  font:400 14px/1.45 var(--font-body);
}
.contact-choice input { flex:0 0 auto; width:17px; height:17px; margin:0; accent-color:var(--ink); cursor:pointer; }
.contact-choice span { overflow-wrap:anywhere; }
.contact-field-hint { margin:-3px 0 5px; }
.contact-field-hint.is-error { color:var(--rust); }
.contact-additional { margin-top:28px; }
.contact-form-footer { margin-top:20px; }
#contact .contact-submit {
  width:100%;
  min-height:40px;
  padding:10px 18px;
  
  justify-content:center;
  gap:0;
  text-align:center;
  cursor:pointer;
  background:var(--pine);
  color:var(--acid);
}
#contact .contact-submit:hover,#contact .contact-submit:focus-visible {
  background:var(--acid);
  color:var(--ink);
}
#contact .contact-submit:after { content:none; display:none; }
.contact-form-status { margin:14px 0 0;  }
.contact-form-status:empty { display:none; }
#contact .contact-margin-sketch { top:38%; right:auto; left:-100px; opacity:.35; }
#contact .contact-sketch--circles { top:68%; }
@media(max-width:1100px) {
  #contact .contact-heading h2 {  }
  .contact-choice-group legend {  }
  .contact-form { padding-inline:24px; }
  .contact-form-fields,.contact-form-options { column-gap:16px; }
}
@media(max-width:900px) {
  #contact .contact-grid { grid-template-columns:1fr; grid-template-rows:auto; gap:30px; }
  #contact .contact-content { grid-column:1; grid-row:1; }
#contact .contact-heading h2 {   margin:22px 0; }
#contact .contact-copy {   }
  #contact .contact-heading h2 {  }
  #contact .contact-message { max-width:560px; }
  #contact .contact-photo { grid-column:1; grid-row:3; width:min(48%,180px); margin:18px 0 28px; justify-self:center; }
  .contact-form { grid-column:1; grid-row:2; padding:26px 30px; }
  #contact .contact-margin-sketch { top:auto; bottom:45px; left:auto; right:-65px; }
}
@media(max-width:480px) {
  .contact-form { padding:24px 19px; }
  .contact-form-fields,.contact-form-options { grid-template-columns:1fr; gap:18px; }
  .contact-choice { font-size:14px; }
}