/* ============ fonts ============ */
@font-face{
  font-family:"Bricolage";
  src:url("bricolage.woff2") format("woff2-variations"), url("bricolage.woff2") format("woff2");
  font-weight:200 800; font-stretch:75% 100%; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("instrument-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("instrument-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Caveat Var";
  src:url("caveat.woff2") format("woff2-variations"), url("caveat.woff2") format("woff2");
  font-weight:400 700; font-display:swap;
}

/* ============ tokens ============ */
:root{
  --wine:#340910;
  --wine-soft:#4a1019;
  --ivory:#DFDCD7;
  --ivory-dim:#c7c3bb;
  --taupe:#A49B92;
  --espresso:#3A2B24;
  --babyblue:#DEE9F6;
  --babyblue-dim:#c3d3ea;

  --disp:"Bricolage", -apple-system, "Segoe UI", sans-serif;
  --accent-font:"Instrument Serif", Georgia, serif;
  --hand:"Caveat Var", cursive;
  --mono:ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;

  --sp-1:0.5rem; --sp-2:0.9rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4.5rem; --sp-6:8rem;
  --measure:38rem;
  --radius:1.1rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--wine); color:var(--ivory);
  font-family:var(--disp); font-variation-settings:"wght" 500,"wdth" 100,"opsz" 24;
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--babyblue); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){ *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;} }

.wrap{max-width:74rem; margin:0 auto; padding:0 var(--sp-4);}
@media (max-width:640px){ .wrap{padding:0 var(--sp-3);} }

section{position:relative;}
.section-pad{padding:var(--sp-6) 0;}
@media (max-width:720px){ .section-pad{padding:var(--sp-5) 0;} }

h1,h2,h3{margin:0; text-wrap:balance;}
p{margin:0;}

.on-ivory{background:var(--ivory); color:var(--espresso);}
.on-babyblue{background:var(--babyblue); color:var(--espresso);}
.on-espresso{background:var(--espresso); color:var(--ivory);}
.on-wine{background:var(--wine); color:var(--ivory);}

.eyebrow{
  font-family:var(--accent-font); font-style:italic; font-size:1.35rem;
  color:var(--taupe); display:block; margin-bottom:0.3em;
}
.on-ivory .eyebrow, .on-babyblue .eyebrow{ color:var(--wine); opacity:0.78; }

/* ============ film grain overlay ============ */
.grain{
  position:fixed; inset:-10%; z-index:300; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
  animation:grain-shift 0.7s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,1%); }
  50%{ transform:translate(1%,-2%); } 75%{ transform:translate(-1%,-1%); } 100%{ transform:translate(0,0); }
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }

/* ============ custom cursor companion (fine pointer only, never hides system cursor) ============
   Purely passive: a small ring that rides a little behind the real pointer and tints itself
   dark or light depending on what's underneath. It never grows, never shows a label, and
   never reacts to hover/click, so it can't interfere with reading or selecting text. */
.cur{
  position:fixed; top:0; left:0; width:20px; height:20px; z-index:500; pointer-events:none;
  transform:translate3d(-50%,-50%,0); transition:opacity 0.2s ease;
  opacity:0; display:none;
}
body.has-cursor .cur{ display:block; }
.cur .ring{position:absolute; inset:0; border-radius:50%; border:1.3px solid var(--babyblue); opacity:0.7; transition:border-color 0.2s ease;}
.cur .cdot{position:absolute; top:50%; left:50%; width:4px; height:4px; border-radius:50%; background:var(--babyblue); transform:translate(-50%,-50%); transition:background 0.2s ease;}
.cur.dark .ring{ border-color:var(--wine); }
.cur.dark .cdot{ background:var(--wine); }

/* none of this site's copy is meant to be clicked into and edited — clicking any text was
   showing a blinking text-caret as if it were an editable field. Disable selection site-wide
   and explicitly re-enable it only where it's actually needed: real form fields. */
*{ user-select:none; -webkit-user-select:none; }
input, textarea{ user-select:text; -webkit-user-select:text; }

.tag{
  display:inline-block; font-family:var(--disp); font-weight:700; font-size:0.78rem;
  letter-spacing:0.02em; padding:0.4em 0.85em; border-radius:2em; background:var(--taupe); color:var(--wine);
}

.btn{
  display:inline-flex; align-items:center; gap:0.5em; font-family:var(--disp);
  font-variation-settings:"wght" 700; font-size:0.98rem; padding:0.85em 1.6em;
  border-radius:3em; background:var(--wine); color:var(--ivory); border:1px solid var(--wine);
  text-decoration:none; cursor:pointer; transition:background 0.2s ease, box-shadow 0.2s ease;
  will-change:transform;
}
.btn-ghost{background:transparent; color:var(--ivory); border:1.5px solid color-mix(in srgb, var(--ivory) 45%, transparent);}
.btn-ghost:hover{background:color-mix(in srgb, var(--ivory) 10%, transparent);}
.btn-light{background:var(--ivory); color:var(--wine); border-color:var(--ivory);}
.btn-light:hover{background:var(--ivory-dim);}
.on-ivory .btn-ghost, .on-babyblue .btn-ghost{color:var(--wine); border-color:color-mix(in srgb, var(--wine) 45%, transparent);}
.on-ivory .btn-ghost:hover, .on-babyblue .btn-ghost:hover{background:color-mix(in srgb, var(--wine) 8%, transparent);}

/* ============ viewfinder motif (decorative frames) ============ */
.vf-frame{position:relative;}
.vf-frame::before,.vf-frame::after,.vf-frame .vf-bl,.vf-frame .vf-br{
  content:""; position:absolute; width:1.1rem; height:1.1rem; border-color:currentColor; border-style:solid;
}
.vf-frame::before{top:-0.5rem; left:-0.5rem; border-width:2px 0 0 2px;}
.vf-frame::after{top:-0.5rem; right:-0.5rem; border-width:2px 2px 0 0;}
.vf-frame .vf-bl{bottom:-0.5rem; left:-0.5rem; border-width:0 0 2px 2px;}
.vf-frame .vf-br{bottom:-0.5rem; right:-0.5rem; border-width:0 2px 2px 0;}

.rec-dot{
  width:0.55em; height:0.55em; border-radius:50%; background:var(--babyblue); display:inline-block;
  animation:pulse 1.8s ease-in-out infinite; box-shadow:0 0 10px 1px color-mix(in srgb, var(--babyblue) 70%, transparent);
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* real logo + live REC glow overlay */
.brandmark{position:relative; display:inline-block; line-height:0;}
.brandmark img{display:block; filter:drop-shadow(0 2px 14px rgba(0,0,0,0.25));}
.brandmark .glow{
  position:absolute; left:77%; top:9%; width:12%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--babyblue) 90%, transparent) 0%, transparent 72%);
  animation:glow-pulse 1.8s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%,100%{opacity:0.9; transform:translate(-50%,-50%) scale(1);} 50%{opacity:0.25; transform:translate(-50%,-50%) scale(0.72);} }

.nav-mark img{height:2.6rem; width:auto; transition:height 0.3s cubic-bezier(.2,.8,.2,1);}
.nav:hover .nav-mark img{height:2.9rem;}
.foot-mark img{height:3.1rem; width:auto;}

/* shutter flash on logo hover */
.brandmark.shutter{overflow:hidden; border-radius:0.4rem;}
.brandmark.shutter::after{
  content:""; position:absolute; inset:0; background:var(--ivory); opacity:0; transform:translateX(-120%);
}
.nav-mark:hover .brandmark.shutter::after{ animation:shutter-sweep 0.5s ease; }
@keyframes shutter-sweep{ 0%{ transform:translateX(-120%); opacity:0.9;} 60%{ transform:translateX(10%); opacity:0.55;} 100%{ transform:translateX(120%); opacity:0;} }

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--wine) 86%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ivory) 14%, transparent);
  transition:padding 0.3s cubic-bezier(.2,.8,.2,1);
}
.nav:hover{ padding-bottom:0.5rem; }
.nav .wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:var(--sp-3);
  padding-top:1rem; padding-bottom:1rem; transition:padding 0.3s cubic-bezier(.2,.8,.2,1);
}
.nav:hover .wrap{ padding-top:1.3rem; padding-bottom:1.3rem; }
.nav-mark{display:flex; align-items:center; text-decoration:none; color:var(--ivory); justify-self:start;}
.nav-links{display:flex; align-items:center; gap:1.6rem; font-size:0.94rem; justify-self:center;}
.nav-cta{ justify-self:end; }
.nav-links a{text-decoration:none; opacity:0.85; transition:opacity 0.15s; position:relative;}
.nav-links a[aria-current="page"]{opacity:1;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-0.3em; width:0; height:1px; background:var(--babyblue); transition:width 0.25s ease;}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:var(--sp-3);}
.nav-burger{display:none; background:none; border:none; color:var(--ivory); padding:0.4rem;}
@media (max-width:1040px){
  .nav-links{display:none;}
  .nav-burger{display:block;}
}

/* nav dropdown (Oferta) */
.nav-drop{position:relative;}
.nav-drop > a{display:flex; align-items:center; gap:0.35em;}
.nav-drop .chev{font-size:0.6rem; transition:transform 0.2s ease; display:inline-block;}
.nav-drop:hover .chev, .nav-drop.open .chev{ transform:rotate(180deg); }
.nav-drop-menu{
  /* top sits flush against the trigger (no dead gap, or hovering through it drops the menu) —
     the illusion of breathing room comes from padding-top instead of a position offset */
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--espresso); border:1px solid color-mix(in srgb, var(--ivory) 16%, transparent); border-radius:0.9rem;
  padding:1.4rem 0.5rem 0.5rem; margin-top:0.5rem; min-width:14rem; display:flex; flex-direction:column; gap:0.1rem;
  opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease;
  box-shadow:0 20px 40px -16px rgba(0,0,0,0.5);
}
.nav-drop-menu::before{
  content:""; position:absolute; top:-0.5rem; left:0; right:0; height:0.5rem; background:transparent;
}
.nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-drop-menu a{display:block; padding:0.55em 0.8em; border-radius:0.5rem; font-size:0.88rem; opacity:0.85; text-decoration:none;}
.nav-drop-menu a::after{display:none;}
.nav-drop-menu a:hover{opacity:1; background:color-mix(in srgb, var(--ivory) 8%, transparent);}

/* contact CTA dropdown (nav top-right): same mechanism, right-aligned, button-styled trigger */
.nav-drop.cta-drop > a{
  display:inline-flex; align-items:center; gap:0.5em; font-family:var(--disp);
  font-variation-settings:"wght" 700; font-size:0.88rem; padding:0.65em 1.3em;
  border-radius:3em; background:var(--ivory); color:var(--wine); text-decoration:none; opacity:1;
}
.nav-drop.cta-drop > a:hover{ background:var(--ivory-dim); }
.nav-drop.cta-drop > a::after{ display:none; }
.nav-drop.cta-drop .nav-drop-menu{ left:auto; right:0; transform:translateY(6px); min-width:15rem; }
.nav-drop.cta-drop:hover .nav-drop-menu, .nav-drop.cta-drop.open .nav-drop-menu{ transform:translateY(0); }
.nav-drop-menu .phone-row{display:flex; align-items:center; gap:0.6em;}
.nav-drop-menu .mini{font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--taupe); padding:0.5em 0.8em 0.2em;}
.nav-drop-menu hr{border:none; border-top:1px solid color-mix(in srgb, var(--ivory) 14%, transparent); margin:0.3rem 0.4rem;}

/* ============ marquee ============ */
.marquee-band{background:var(--espresso); padding:1.1rem 0; overflow:hidden; border-top:1px solid color-mix(in srgb, var(--ivory) 10%, transparent); border-bottom:1px solid color-mix(in srgb, var(--ivory) 10%, transparent);}
.marquee-track{display:flex; gap:3rem; width:max-content; animation:scroll-x 32s linear infinite;}
.marquee-track.rev{animation-direction:reverse; animation-duration:26s;}
@keyframes scroll-x{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-track span{font-family:var(--disp); font-variation-settings:"wght" 600; font-size:1.05rem; color:var(--taupe); white-space:nowrap; display:flex; align-items:center; gap:0.8em;}
.marquee-track span::after{content:"◆"; font-size:0.6rem; color:var(--babyblue);}

/* ============ reveal ============ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:none;}

/* ============ mobile menu ============ */
.mobile-menu{
  position:fixed; inset:0; background:var(--wine); z-index:50; display:flex; flex-direction:column;
  padding:var(--sp-4); gap:var(--sp-4); transform:translateX(100%); transition:transform 0.3s ease;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{text-decoration:none; color:var(--ivory); font-size:1.6rem; font-variation-settings:"wght" 600;}
.mobile-menu-top{display:flex; justify-content:space-between; align-items:center;}
.mobile-menu-close{background:none; border:none; color:var(--ivory); font-size:1.5rem; cursor:pointer;}

/* ============ footer ============ */
footer{background:var(--espresso); padding:var(--sp-5) 0 var(--sp-4); border-top:1px solid color-mix(in srgb, var(--ivory) 12%, transparent);}
.foot-grid{display:grid; grid-template-columns:1.3fr 0.7fr 0.7fr; gap:var(--sp-4);}
@media (max-width:720px){ .foot-grid{grid-template-columns:1fr; gap:var(--sp-4);} }
.foot-grid h4{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--taupe); margin-bottom:0.8em;}
.foot-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5em; font-size:0.92rem;}
.foot-links a{text-decoration:none; opacity:0.85;}
.foot-links a:hover{opacity:1; text-decoration:underline;}
.foot-bottom{display:flex; justify-content:space-between; margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid color-mix(in srgb, var(--ivory) 10%, transparent); font-family:var(--mono); font-size:0.72rem; color:var(--taupe); flex-wrap:wrap; gap:0.6em;}

/* ============ page hero banner (subpages) ============ */
.page-hero{padding:var(--sp-5) 0 var(--sp-4);}
.page-hero .eyebrow{margin-bottom:0.3em;}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem); font-variation-settings:"wght" 740,"opsz" 96; max-width:18ch;}
.page-hero p{margin-top:var(--sp-3); font-size:1.1rem; color:var(--ivory-dim); max-width:36rem;}

/* scribble */
.scribble-arrow{font-family:var(--hand); font-variation-settings:"wght" 600; color:var(--taupe); font-size:1.2rem; display:inline-block; transform:rotate(-3deg);}

/* ============ shared final CTA band ============ */
.final-cta{text-align:center; padding:var(--sp-6) 0;}
.final-cta h2{font-size:clamp(2.2rem,6vw,4rem); font-variation-settings:"wght" 760,"opsz" 96; max-width:18ch; margin:0 auto;}
.final-cta .ac{font-family:var(--accent-font); font-style:italic; font-weight:400; color:var(--babyblue);}
.final-cta p{margin:var(--sp-3) auto 0; max-width:28rem; color:var(--ivory-dim);}
.final-ctas{display:flex; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-4); flex-wrap:wrap;}

/* ============ realistic iPhone mockup ============ */
.iphone{
  width:14.5rem; margin:0 auto; aspect-ratio:9/19.5; background:#0b0c10; border-radius:2.6rem;
  padding:0.45rem; box-shadow:0 30px 70px -20px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.06);
  position:relative;
}
.iphone::before{ /* side buttons */
  content:""; position:absolute; left:-2px; top:4.2rem; width:2px; height:1.6rem; background:#0b0c10; box-shadow:0 2.4rem 0 #0b0c10, 0 -3.1rem 0 1.1rem #0b0c10;
}
.iphone-screen{
  width:100%; height:100%; border-radius:2.15rem; overflow:hidden; position:relative;
  background:#0b0c10;
}
.iphone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:34%; height:1.5rem; background:#0b0c10;
  border-radius:0 0 1rem 1rem; z-index:5;
}
.iphone-chip{
  position:absolute; background:#fff; border-radius:1.1rem; padding:0.4em 0.7em; font-size:0.62rem; font-family:var(--disp);
  font-variation-settings:"wght" 600; color:#2B2420; box-shadow:0 10px 24px -10px rgba(0,0,0,0.5);
  display:flex; align-items:center; gap:0.35em; z-index:6;
}
.iphone-wrap{position:relative; display:inline-block;}
.iphone-tap{text-align:center; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--taupe); margin-top:var(--sp-2);}

/* ============ offer / service blocks (oferta.html) ============ */
.svc-block{padding:var(--sp-6) 0; border-top:1px solid color-mix(in srgb, var(--ivory) 12%, transparent);}
.svc-block:nth-child(even){background:color-mix(in srgb, var(--espresso) 40%, var(--wine));}
.svc-block-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-5); align-items:start;}
@media (max-width:860px){ .svc-block-grid{grid-template-columns:1fr;} }
.svc-block-num{font-family:var(--mono); font-size:0.8rem; color:var(--babyblue); letter-spacing:0.06em;}
.svc-block h2{font-size:clamp(1.9rem,4.2vw,2.8rem); font-variation-settings:"wght" 740,"opsz" 60; margin-top:0.4em; max-width:14ch;}
.svc-block .tagline{font-family:var(--accent-font); font-style:italic; color:var(--babyblue); font-size:1.15rem; margin-top:0.3em; display:block;}
.svc-deliver{list-style:none; margin:var(--sp-3) 0 0; padding:0; display:flex; flex-direction:column; gap:0.6em;}
.svc-deliver li{display:flex; gap:0.7em; font-size:0.95rem; color:var(--ivory-dim); align-items:flex-start;}
.svc-deliver li::before{content:"✓"; color:var(--babyblue); flex:none; font-weight:700;}
.svc-block .lede{font-size:1.05rem; color:var(--ivory-dim); margin-top:var(--sp-2); max-width:30rem;}

/* ============ portfolio tabs ============ */
.port-tabs{display:flex; gap:0.6em; flex-wrap:wrap; margin:var(--sp-4) 0;}
.port-tab{
  font-family:var(--disp); font-variation-settings:"wght" 700; font-size:0.9rem; padding:0.6em 1.2em;
  border-radius:2em; border:1.5px solid color-mix(in srgb, var(--ivory) 30%, transparent); background:transparent;
  color:var(--ivory-dim); cursor:pointer; transition:all 0.15s ease;
}
.port-tab:hover{border-color:var(--babyblue);}
.port-tab[aria-pressed="true"]{background:var(--babyblue); color:var(--wine); border-color:var(--babyblue);}
.port-panel{display:none;}
.port-panel.active{display:block;}

/* ============ about page ============ */
.about-hero{padding:var(--sp-6) 0 var(--sp-5);}
.about-hero h1{font-size:clamp(2.6rem,6.5vw,4.6rem); font-variation-settings:"wght" 740,"opsz" 96; max-width:16ch;}
.about-hero .ac{font-family:var(--accent-font); font-style:italic; font-weight:400; color:var(--babyblue);}
.about-copy{max-width:42rem; font-size:1.08rem; color:var(--ivory-dim); display:flex; flex-direction:column; gap:1.1em; margin-top:var(--sp-4);}
.about-copy strong{color:var(--ivory); font-weight:600;}
.about-values{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-5);}
@media (max-width:760px){ .about-values{grid-template-columns:1fr;} }
.about-value{background:var(--wine); border-radius:1rem; padding:var(--sp-3); border:1px solid color-mix(in srgb, var(--ivory) 14%, transparent);}
.about-value .num{font-family:var(--mono); color:var(--babyblue); font-size:0.78rem;}
.about-value h3{font-size:1.1rem; font-variation-settings:"wght" 700; margin-top:0.5em;}
.about-value p{font-size:0.9rem; color:var(--ivory-dim); margin-top:0.4em;}

/* ============ contact / legal page ============ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin-top:var(--sp-5);}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{background:var(--wine); border-radius:1.2rem; padding:var(--sp-4); border:1px solid color-mix(in srgb, var(--ivory) 16%, transparent);}
.contact-card h3{font-size:1.1rem; font-variation-settings:"wght" 700; margin-bottom:0.8em;}
.contact-rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.7em; font-size:0.95rem;}
.contact-rows a{text-decoration:underline; text-underline-offset:0.2em;}
.contact-rows .k{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--taupe); display:block; margin-bottom:0.15em;}

/* ============ simple contact form (mailto-based, no backend) ============ */
.contact-form{display:flex; flex-direction:column; gap:1rem;}
.contact-form label{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--taupe); display:block; margin-bottom:0.4em;}
.contact-form input, .contact-form textarea{
  width:100%; background:color-mix(in srgb, var(--ivory) 7%, transparent); border:1px solid color-mix(in srgb, var(--ivory) 20%, transparent);
  border-radius:0.6rem; padding:0.75em 0.9em; color:var(--ivory); font-family:var(--disp); font-size:0.95rem;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--taupe); opacity:0.7; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--babyblue); }
.contact-form textarea{ min-height:7rem; resize:vertical; }
.contact-form .hint{font-family:var(--mono); font-size:0.76rem; color:var(--taupe); margin-top:-0.3rem;}