/* =========================================================
   STORY & STILL COLLECTIVE — portfolio call
   Mobile first. Cream ground, ink structure, one sea accent.
   The photographs carry the color. Nothing else competes.
   ========================================================= */

:root{
  --cream:  #F3EDE3;
  --sand:   #E7DCCB;
  --ink:    #14222A;
  --ink-80: rgba(20,34,42,.80);
  --ink-62: rgba(20,34,42,.62);
  --ink-38: rgba(20,34,42,.38);
  --ink-14: rgba(20,34,42,.14);
  --sea:    #1C6B82;
  --sea-lift:#2A8AA6;
  --paper:  rgba(243,237,227,.86);
  --paper-38: rgba(243,237,227,.38);
  --paper-16: rgba(243,237,227,.16);

  --display:"Fraunces","Hoefler Text",Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gut:20px;
  color-scheme:light;
}
@media (min-width:640px){ :root{ --gut:36px; } }
@media (min-width:1080px){ :root{ --gut:60px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gut); }

h1,h2,h3{
  font-family:var(--display);
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 120;
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.02;
  text-wrap:balance;
  margin:0;
}
p{ margin:0 0 1em; } p:last-child{ margin-bottom:0; }

.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}
.tag{ color:var(--ink-38); }
.on-dark .tag{ color:var(--paper-38); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  padding:15px 22px;
  background:var(--ink);
  color:var(--cream);
  border:1px solid var(--ink);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
  min-height:48px;
}
.btn:hover,.btn:focus-visible{ background:var(--sea); border-color:var(--sea); }
.btn.line{ background:transparent; color:var(--ink); }
.btn.line:hover,.btn.line:focus-visible{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn.pale{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn.pale:hover,.btn.pale:focus-visible{ background:var(--sea-lift); border-color:var(--sea-lift); color:#fff; }

/* ---------- header ---------- */
.bar{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:60;
  background:var(--paper);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ink-14);
}
.bar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-block:11px;
}
.mark{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 40;
  font-size:17px; line-height:1.1; letter-spacing:-.01em;
}
.mark i{ font-style:italic; color:var(--sea); }
.mark small{
  display:block; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-38); margin-top:2px;
}
.bar .btn{ padding:11px 15px; min-height:42px; }

/* ---------- hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--ink); }
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,34,42,.52) 0%,rgba(20,34,42,.22) 34%,rgba(20,34,42,.72) 100%);
}
.hero-in{
  min-height:540px;
  height:min(84svh,820px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:26px 26px;
  color:var(--cream);
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  align-self:flex-start;
  border:1px solid var(--paper-38);
  padding:7px 12px; margin-bottom:auto;
  color:var(--cream);
}
.dot{ width:6px; height:6px; border-radius:50%; background:#8FD4E8; flex:none; }
.hero h1{
  font-size:clamp(40px,12.5vw,104px);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 144;
  margin-bottom:14px;
}
.hero h1 em{ font-style:italic; color:#BFE6F2; }
.hero-line{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 60;
  font-size:clamp(19px,5.2vw,30px);
  line-height:1.16; margin:0 0 20px; color:var(--cream);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.hero-note{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-38); }

/* ---------- marquee ---------- */
.mq{ background:var(--ink); color:var(--cream); overflow:hidden; padding-block:13px; border-block:1px solid var(--ink); }
.mq-track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.mq-track span{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  padding-inline:22px; white-space:nowrap;
}
.mq-track span b{ color:#8FD4E8; font-weight:500; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .mq-track{ animation:none; } }

/* ---------- sections ---------- */
.sec{ padding-block:clamp(52px,9vw,110px); }
.sec-head{ margin-bottom:clamp(26px,5vw,48px); }
.sec-head .mono{ display:block; margin-bottom:14px; }
.sec h2{ font-size:clamp(30px,8vw,62px); max-width:15ch; }
.sec h2 em{ font-style:italic; color:var(--sea); }
.lede{ font-size:clamp(16px,2.2vw,19px); line-height:1.55; color:var(--ink-80); max-width:52ch; margin-top:18px; }

/* ---------- offer ---------- */
.two{ display:grid; gap:0; border-top:1px solid var(--ink-14); }
@media (min-width:860px){ .two{ grid-template-columns:1fr 1fr; } }
.col{ padding-block:26px 30px; border-bottom:1px solid var(--ink-14); }
@media (min-width:860px){
  .col:first-child{ padding-right:48px; border-right:1px solid var(--ink-14); }
  .col:last-child{ padding-left:48px; }
}
.col h3{ font-size:clamp(23px,4vw,31px); margin:10px 0 4px; }
.col .price{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sea); }
.list{ list-style:none; margin:20px 0 0; padding:0; }
.list li{ padding:13px 0; border-bottom:1px solid var(--ink-14); display:grid; grid-template-columns:18px 1fr; gap:12px; }
.list li:last-child{ border-bottom:0; }
.list .n{ font-family:var(--mono); font-size:10px; color:var(--ink-38); padding-top:4px; }
.list strong{ font-weight:600; display:block; }
.list span.sub{ color:var(--ink-62); font-size:15px; }

/* ---------- media panels ---------- */
.panels{ display:grid; gap:4px; }
@media (min-width:560px){ .panels{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .panels{ grid-template-columns:repeat(4,1fr); } }
.panel.type-only{ background:var(--ink); display:flex; align-items:flex-end; min-height:320px; }
.panel.type-only::after{ display:none; }
.panel.type-only .panel-txt{ position:static; }
.panel{ position:relative; overflow:hidden; background:var(--sand); isolation:isolate; }
.panel img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
@media (min-width:1040px){ .panel img{ aspect-ratio:3/4.4; } }
.panel:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .panel img{ transition:none; } .panel:hover img{ transform:none; } }
.panel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,34,42,0) 44%,rgba(20,34,42,.78) 100%);
}
.panel-txt{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px; color:var(--cream); }
.panel-txt .mono{ color:#BFE6F2; display:block; margin-bottom:7px; }
.panel-txt h3{ font-size:clamp(22px,4.6vw,30px); margin-bottom:7px; }
.panel-txt p{ font-size:14.5px; line-height:1.48; color:rgba(243,237,227,.82); margin:0; max-width:34ch; }

/* ---------- clip rail ---------- */
.rail-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.rail{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(212px,58vw);
  gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:14px; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  scrollbar-width:thin;
}
@media (min-width:900px){ .rail{ grid-auto-columns:minmax(260px,1fr); overflow-x:visible; grid-auto-flow:row; grid-template-columns:repeat(4,1fr); margin-inline:0; padding-inline:0; } }
.clip{ position:relative; scroll-snap-align:start; background:var(--ink); overflow:hidden; }
.clip video,.clip img{ width:100%; aspect-ratio:9/16; object-fit:cover; }
.clip figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:13px;
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(180deg,rgba(20,34,42,0),rgba(20,34,42,.8));
}

/* ---------- statement (dark) ---------- */
.on-dark{ background:var(--ink); color:var(--cream); }
.on-dark h2{ color:var(--cream); }
.on-dark h2 em{ color:#8FD4E8; }
.on-dark p{ color:rgba(243,237,227,.76); }
.say{ padding-block:clamp(56px,10vw,120px); }
.say-grid{ display:grid; gap:clamp(22px,4vw,54px); }
@media (min-width:880px){ .say-grid{ grid-template-columns:1fr 1fr; } }
.say-grid p{ max-width:46ch; }
.big{ font-size:clamp(28px,7.4vw,58px); max-width:17ch; margin-bottom:clamp(22px,4vw,42px); }

/* ---------- steps ---------- */
.steps{ border-top:1px solid var(--ink-14); }
.step{ display:grid; gap:4px 28px; padding-block:22px; border-bottom:1px solid var(--ink-14); }
@media (min-width:760px){ .step{ grid-template-columns:64px 1.1fr 1.3fr; align-items:baseline; } }
.step .n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--sea); }
.step h3{ font-size:clamp(20px,3.4vw,27px); }
.step p{ color:var(--ink-62); margin:0; max-width:46ch; font-size:15.5px; }

/* ---------- the two of us ---------- */
.us{ display:grid; gap:clamp(24px,4vw,44px); }
@media (min-width:780px){ .us{ grid-template-columns:1fr 1fr; } }
.card img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--sand); }
.card .mono{ display:block; margin:16px 0 8px; color:var(--sea); }
.card h3{ font-size:clamp(25px,4.4vw,35px); margin-bottom:10px; }
.card p{ color:var(--ink-62); font-size:15.5px; }
.card a.site{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--sea); border-bottom:1px solid var(--ink-14); padding-bottom:3px;
}
.card a.site:hover{ border-bottom-color:var(--sea); }

/* ---------- apply ---------- */
.apply{ padding-block:clamp(52px,9vw,110px); }
.apply h2{ font-size:clamp(32px,9vw,72px); max-width:13ch; }
.apply .lede{ color:rgba(243,237,227,.76); }
.slot{ background:var(--cream); color:var(--ink); padding:clamp(18px,3.4vw,32px); margin-top:clamp(26px,4vw,44px); }
.slot > .mono{ display:block; color:var(--ink-38); margin-bottom:14px; }
.ph{
  border:1px dashed var(--ink-14); padding:clamp(26px,6vw,52px) 20px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.ph h3{ font-size:23px; }
.ph p{ color:var(--ink-62); font-size:15px; max-width:44ch; margin:0; }
.ph code{ font-family:var(--mono); font-size:12px; background:var(--sand); padding:1px 5px; }

.fine{ display:grid; gap:0; margin-top:clamp(26px,4vw,40px); border-top:1px solid var(--paper-16); }
@media (min-width:760px){ .fine{ grid-template-columns:repeat(3,1fr); } }
.fine div{ padding-block:17px; border-bottom:1px solid var(--paper-16); }
@media (min-width:760px){
  .fine div{ padding-inline:26px; border-right:1px solid var(--paper-16); }
  .fine div:first-child{ padding-left:0; }
  .fine div:last-child{ padding-right:0; border-right:0; }
}
.fine .mono{ display:block; color:#8FD4E8; margin-bottom:7px; }
.fine p{ font-size:14.5px; color:rgba(243,237,227,.72); margin:0; max-width:40ch; }

/* counters */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--ink-14); margin-top:clamp(24px,4vw,38px); }
@media (min-width:700px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:16px 0; border-bottom:1px solid var(--ink-14); }
@media (min-width:700px){
  .stat{ padding-inline:22px; border-right:1px solid var(--ink-14); }
  .stat:first-child{ padding-left:0; }
  .stat:last-child{ padding-right:0; border-right:0; }
}
.stat .k{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-38); margin-bottom:6px; }
.stat .v{ font-family:var(--display); font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 90; font-size:clamp(24px,5vw,36px); line-height:1; font-variant-numeric:tabular-nums; }
.stat .v s{ text-decoration:none; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-38); margin-left:5px; vertical-align:.4em; }

/* ---------- footer ---------- */
.foot{ padding-block:clamp(32px,5vw,54px); border-top:1px solid var(--ink-14); }
.foot-in{ display:flex; flex-wrap:wrap; gap:18px 30px; align-items:baseline; justify-content:space-between; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:16px; }
.foot-nav a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--ink-62); }
.foot-nav a:hover{ color:var(--sea); }
.foot .fine-print{ margin-top:22px; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-38); }

/* sticky mobile apply bar */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--ink); color:var(--cream);
  padding:12px var(--gut); padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  transform:translateY(110%); transition:transform .3s ease;
}
.dock.show{ transform:translateY(0); }
.dock .d-l{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-38); }
.dock .d-l b{ display:block; color:var(--cream); font-size:12px; letter-spacing:.1em; font-weight:500; margin-top:2px; }
.dock .btn{ padding:12px 18px; min-height:44px; }
@media (min-width:900px){ .dock{ display:none; } }
@media (prefers-reduced-motion:reduce){ .dock{ transition:none; } }

/* =========================================================
   HOMEPAGE ADDITIONS
   ========================================================= */

/* nav links in the header */
.nav{ display:none; gap:20px; align-items:center; }
@media (min-width:880px){ .nav{ display:flex; } }
.nav a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-62);
}
.nav a:hover{ color:var(--sea); }

/* home hero: brand statement, not a pitch */
.home-hero .hero-in{ min-height:560px; height:min(88svh,880px); justify-content:flex-end; }
.home-hero h1{
  font-size:clamp(42px,11vw,96px);
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 144;
  margin-bottom:18px;
}
.home-hero h1 em{ font-style:italic; color:#BFE6F2; }
.home-hero .credit{
  font-family:var(--mono); font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--paper-38); margin:0 0 22px;
}

/* promo strip pointing at the campaign */
.promo{ background:var(--sea); color:#fff; }
.promo-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 24px; padding-block:18px;
}
.promo .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.7); display:block; margin-bottom:5px;
}
.promo .t{
  font-family:var(--display); font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
  font-size:clamp(19px,3vw,27px); line-height:1.12; margin:0;
}
.promo .btn{ background:#fff; color:var(--sea); border-color:#fff; }
.promo .btn:hover,.promo .btn:focus-visible{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* offer trio */
.trio{ display:grid; gap:0; border-top:1px solid var(--ink-14); }
@media (min-width:820px){ .trio{ grid-template-columns:repeat(3,1fr); } }
.tcard{ padding-block:26px 30px; border-bottom:1px solid var(--ink-14); }
@media (min-width:820px){
  .tcard{ padding-inline:clamp(22px,2.6vw,36px); border-right:1px solid var(--ink-14); }
  .tcard:first-child{ padding-left:0; }
  .tcard:last-child{ padding-right:0; border-right:0; }
}
.tcard .mono{ display:block; color:var(--sea); margin-bottom:12px; }
.tcard h3{ font-size:clamp(22px,3.2vw,29px); margin:0 0 10px; }
.tcard p{ color:var(--ink-62); font-size:15.5px; margin:0; }

/* portfolio mosaic */
.mosaic{ display:grid; gap:4px; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .mosaic{ grid-template-columns:repeat(4,1fr); } }
.mz{ position:relative; overflow:hidden; background:var(--sand); }
.mz img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.mz:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .mz img{ transition:none; } .mz:hover img{ transform:none; } }
.mz.wide{ grid-column:span 2; }
.mz.wide img{ aspect-ratio:16/10; }
.mz cap,.mz .cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(180deg,rgba(20,34,42,0),rgba(20,34,42,.78));
}

/* collections */
.tiers{ display:grid; gap:0; border-top:1px solid var(--ink-14); }
@media (min-width:880px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
.tier{ padding-block:28px 32px; border-bottom:1px solid var(--ink-14); display:flex; flex-direction:column; }
@media (min-width:880px){
  .tier{ padding-inline:clamp(22px,2.6vw,36px); border-right:1px solid var(--ink-14); }
  .tier:first-child{ padding-left:0; }
  .tier:last-child{ padding-right:0; border-right:0; }
}
.tier.feature{ background:var(--sand); }
@media (min-width:880px){ .tier.feature{ margin-block:-1px; padding-block:29px 33px; } }
.tier .flag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--sea); display:block; margin-bottom:10px; min-height:14px;
}
.tier h3{ font-size:clamp(24px,3.4vw,32px); margin:0 0 6px; }
.tier .amt{
  font-family:var(--display); font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 90;
  font-size:clamp(30px,4.4vw,42px); line-height:1; font-variant-numeric:tabular-nums;
  margin-bottom:18px; display:block;
}
.tier .amt s{ text-decoration:none; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-38); margin-left:6px; vertical-align:.45em; }
.tier ul{ list-style:none; margin:0 0 22px; padding:0; }
.tier li{
  padding:9px 0; border-bottom:1px solid var(--ink-14);
  font-size:15px; color:var(--ink-80); display:grid; grid-template-columns:14px 1fr; gap:10px;
}
.tier li:last-child{ border-bottom:0; }
.tier li::before{ content:""; width:5px; height:5px; margin-top:8px; background:var(--sea); }
.tier .btn{ margin-top:auto; align-self:flex-start; }
.tier-note{ margin-top:20px; color:var(--ink-62); font-size:14.5px; max-width:60ch; }

/* inquire */
.inq-grid{ display:grid; gap:clamp(24px,4vw,54px); }
@media (min-width:880px){ .inq-grid{ grid-template-columns:1.05fr .95fr; align-items:start; } }
.inq-facts{ border-top:1px solid var(--paper-16); }
.inq-facts div{ padding-block:15px; border-bottom:1px solid var(--paper-16); }
.inq-facts .mono{ display:block; color:#8FD4E8; margin-bottom:6px; }
.inq-facts p{ margin:0; font-size:14.5px; color:rgba(243,237,227,.74); max-width:44ch; }

/* =========================================================
   PLACEHOLDER FORM  (swap for the HoneyBook embed later)
   ========================================================= */
.pform .notice{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--sea); background:rgba(28,107,130,.07);
  padding:13px 15px; margin-bottom:22px;
}
.pform .notice .mono{ color:var(--sea); display:block; margin-bottom:4px; }
.pform .notice p{ margin:0; font-size:14.5px; color:var(--ink-80); }
.pform .notice a{ color:var(--sea); }
.frow{ display:grid; gap:14px; margin-bottom:14px; }
@media (min-width:620px){ .frow.two{ grid-template-columns:1fr 1fr; } }
.fld label{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-62); margin-bottom:6px;
}
.fld input,.fld select,.fld textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--cream); border:1px solid var(--ink-14); border-radius:0;
  padding:12px 13px; min-height:46px; -webkit-appearance:none; appearance:none;
}
.fld textarea{ min-height:116px; resize:vertical; }
.fld input:disabled,.fld select:disabled,.fld textarea:disabled{
  background:var(--sand); color:var(--ink-38); cursor:not-allowed;
}
.fld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-38) 50%),linear-gradient(135deg,var(--ink-38) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.pform .btn[disabled]{ opacity:.45; pointer-events:none; }
.pform .foot-note{
  margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-38);
}