/* ==========================================================================
   TMF CREATIONS — Design System
   Luxury laser-engraving studio. Palette pulled from brand banner + logo.
   ========================================================================== */

:root{
  /* ---- Brand palette (sampled from client's banner & logo) ---- */
  --pink:        #F0276D;   /* signature magenta/pink   */
  --pink-soft:   #FF6FA3;
  --teal:        #2283C8;   /* signature teal (blue-leaning) */
  --purple:      #C9A6EA;   /* signature lilac (gradient / decorative) */
  --purple-deep: #7439AC;   /* same-hue lilac, deepened for legible text/icons */
  --navy:        #1B2340;   /* script "Creations" ink    */
  --charcoal:    #1B1518;   /* logo badge background     */
  --charcoal-2:  #241C20;
  --gold:        #C9A15A;   /* wood / engraving accent   */
  --teal-dark:   #071D2C;   /* deep blue-teal base for hero/dark bands, same hue as --teal */
  --blush:       #FBF3F1;   /* warm section background   */
  --cream:       #FFFDFB;

  /* ---- New vivid palette (client-directed, Aug 2026) ---- */
  --hotpink:     #FF69B4;
  --vivid-purple:#AB55F7;
  --bright-cyan: #31E7FB;
  --cyan-deep:   #012D32;   /* dark same-hue anchor for hero ombre / text legibility */

  --ink:         #2A2226;   /* body text on light        */
  --ink-soft:    #6B5D62;

  --brand-gradient: linear-gradient(115deg, var(--pink) 0%, var(--purple) 52%, var(--teal) 100%);
  --brand-gradient-soft: linear-gradient(115deg, rgba(240,39,109,.14), rgba(201,166,234,.14), rgba(34,131,200,.14));

  /* ---- Type ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-script:  'Parisienne', cursive;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Layout ---- */
  --maxw: 1220px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 14px;

  --shadow-soft: 0 18px 44px -20px rgba(27,21,24,.28);
  --shadow-card: 0 10px 28px -14px rgba(27,21,24,.22);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

:focus-visible{
  outline:2px solid var(--purple-deep);
  outline-offset:3px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---- Protea sprite ---- */
#protea-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.protea-icon{ width:100%; height:100%; display:block; color:currentColor; }

.protea-mark{ display:inline-block; }
.protea-mark svg{ display:block; width:100%; height:100%; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--purple-deep);
  display:inline-flex;
  align-items:center;
  gap:.65em;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--brand-gradient);
}
.eyebrow.on-dark{ color:var(--gold); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }
.eyebrow.center::after{
  content:"";
  width:28px; height:1px;
  background:var(--brand-gradient);
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--navy);
}
.on-dark h1, .on-dark h2, .on-dark h3, h1.on-dark, h2.on-dark, h3.on-dark{ color:var(--cream); }

h1{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); }

.script{
  font-family:var(--font-script);
  font-weight:400;
  line-height:1;
}

.gradient-text{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

p{ margin:0 0 1.1em; color:var(--ink-soft); line-height:1.75; font-size:1.02rem; }
.on-dark p, p.on-dark{ color:rgba(255,253,251,.78); }
.lede{ font-size:1.16rem; color:var(--ink); }
.on-dark .lede, .lede.on-dark{ color:rgba(255,253,251,.92); }

.section-head{ max-width:680px; margin-bottom:3rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ margin-top:.4em; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-body);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:1em 2em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--navy);
  color:var(--cream);
}
.btn-primary:hover{ background:var(--charcoal); transform:translateY(-2px); box-shadow:var(--shadow-soft); }

.btn-gradient{
  background:var(--brand-gradient);
  color:#fff;
  background-size:160% 160%;
  background-position:0% 50%;
}
.btn-gradient:hover{ background-position:100% 50%; transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(116,57,172,.55); }

.btn-outline{
  background:transparent;
  border-color:rgba(255,253,251,.4);
  color:var(--cream);
}
.btn-outline:hover{ border-color:var(--cream); background:rgba(255,253,251,.08); }

.btn-outline-dark{
  background:transparent;
  border-color:rgba(27,21,24,.25);
  color:var(--navy);
}
.btn-outline-dark:hover{ border-color:var(--navy); background:rgba(27,21,24,.05); }

.btn-whatsapp{
  background:#25D366;
  color:#0B2B18;
}
.btn-whatsapp:hover{ background:#1EBE59; transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(37,211,102,.55); }

.btn-sm{ padding:.75em 1.5em; font-size:.76rem; }
.btn-block{ width:100%; justify-content:center; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(0,0,0,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,253,251,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.85rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
}
.brand-badge{
  width:72px; height:72px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(240,39,109,.5);
  box-shadow:0 0 0 3px rgba(27,21,24,.4), 0 6px 18px -8px rgba(0,0,0,.6);
  flex-shrink:0;
}
.brand-badge img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); }
.brand-word{
  display:flex; flex-direction:column; line-height:1;
}
.brand-word .b1{
  font-family:var(--font-display);
  font-size:1.28rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--cream);
}
.brand-word .b2{
  font-family:var(--font-body);
  font-size:.6rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:.3em;
}

.main-nav{ display:flex; align-items:center; gap:2.1rem; }
.main-nav a{
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,253,251,.78);
  position:relative;
  padding:.3em 0;
  transition:color .3s var(--ease);
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px;
  background:var(--brand-gradient);
  transition:right .35s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--cream); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:.9rem; flex-shrink:0; }
.icon-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  flex-shrink:0;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.icon-btn:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 10px 22px -8px rgba(37,211,102,.6); }
.icon-btn svg{ width:19px; height:19px; }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:none; background:transparent;
  color:var(--cream);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle svg{ width:24px; height:24px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{
  background:#000000;
  color:rgba(255,253,251,.75);
  position:relative;
  overflow:hidden;
}
.footer-protea{
  position:absolute;
  color:var(--gold);
  opacity:.06;
  width:640px; height:640px;
  right:-160px; top:-120px;
  pointer-events:none;
}
.footer-top{
  position:relative;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.1fr;
  gap:3rem;
  padding:5rem 0 3rem;
}
.footer-brand .brand{ margin-bottom:1.1rem; }
.footer-brand .brand-badge{ width:88px; height:88px; }
.footer-brand .brand-word .b1{ font-size:1.4rem; }
.footer-brand p{ max-width:280px; font-size:.92rem; }

.footer-social{ display:flex; gap:.7rem; margin-top:1.4rem; }
.footer-social a{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,253,251,.18);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ border-color:var(--pink); transform:translateY(-3px); background:rgba(240,39,109,.12); }

.footer-col h4{
  font-family:var(--font-body);
  color:var(--cream);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:1.3rem;
}
.footer-col ul li{ margin-bottom:.8rem; }
.footer-col a{
  font-size:.9rem;
  color:rgba(255,253,251,.68);
  transition:color .3s var(--ease), padding-left .3s var(--ease);
}
.footer-col a:hover{ color:var(--cream); padding-left:4px; }

.footer-contact li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; }
.footer-contact svg{ width:16px; height:16px; flex-shrink:0; margin-top:.2em; color:var(--gold); }

.footer-partners{
  position:relative;
  border-top:1px solid rgba(255,253,251,.1);
  padding:2rem 0;
}
.footer-partners-label{
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,253,251,.4);
  margin-bottom:1rem;
}
.partner-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:stretch; }
.partner-badge{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  padding:.65em 1.3em .65em .9em;
  border:1px solid rgba(255,253,251,.14);
  border-radius:12px;
  background:rgba(255,253,251,.02);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.partner-badge:hover{ border-color:var(--gold); background:rgba(255,253,251,.06); transform:translateY(-2px); }
.partner-badge .pb-logo{
  height:34px; width:auto;
  max-width:120px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}
.partner-badge .pb-logo.pb-logo-icon{
  height:30px; width:30px;
  border-radius:50%;
  background:rgba(255,253,251,.06);
  padding:6px;
  object-fit:contain;
}
.partner-badge .pb-logo-chip{
  height:38px; width:44px;
  border-radius:8px;
  background:#000000;
  border:1px solid rgba(255,253,251,.1);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  padding:4px;
}
.partner-badge .pb-logo-chip img{
  height:100%; width:100%;
  object-fit:contain;
}
.partner-badge .pb-text{ display:flex; flex-direction:column; line-height:1.25; }
.partner-badge .pb-name{
  font-size:.78rem; font-weight:600; letter-spacing:.03em;
  color:rgba(255,253,251,.85);
}
.partner-badge .pb-sub{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}

.footer-bottom{
  position:relative;
  border-top:1px solid rgba(255,253,251,.1);
  padding:1.6rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.78rem;
  color:rgba(255,253,251,.45);
}
.footer-bottom a{ color:rgba(255,253,251,.6); }
.footer-bottom a:hover{ color:var(--gold); }

/* ==========================================================================
   LEGAL PAGES (Privacy / Terms)
   ========================================================================== */

.legal-content{
  max-width:760px;
  margin:0 auto;
  padding:1rem 0 2rem;
}
.legal-updated{
  font-size:.82rem;
  font-style:italic;
  color:var(--ink-soft);
  margin-bottom:2rem;
}
.legal-content h2{
  font-size:1.4rem;
  margin:2.4rem 0 .8rem;
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{ margin-bottom:1.1em; }
.legal-content ul{
  margin:0 0 1.1em;
  padding-left:1.4rem;
}
.legal-content li{
  margin-bottom:.5em;
  line-height:1.7;
  color:var(--ink-soft);
}
.legal-content a{ color:var(--purple-deep); text-decoration:underline; }
.legal-contact-list{ list-style:none; padding-left:0; }
.legal-contact-list li{ margin-bottom:.3em; }

/* ==========================================================================
   PAGE HERO (interior pages)
   ========================================================================== */

.page-hero{
  position:relative;
  background:var(--bright-cyan);
  overflow:hidden;
  padding:6.5rem 0 5rem;
}
.page-hero::before{ content:none; }
.page-hero .protea-mark{
  position:absolute; color:var(--navy); opacity:.08;
}
.page-hero-content{ position:relative; max-width:700px; }
.page-hero-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3rem;
  align-items:center;
  max-width:none;
}
.page-hero-media{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:3/4;
  max-height:560px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
  border:1px solid rgba(255,253,251,.14);
}
.page-hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
}
@media (max-width: 980px){
  .page-hero-inner{ grid-template-columns:1fr; }
  .page-hero-media{ order:-1; max-width:320px; max-height:420px; margin:0 auto 2rem; }
}
.page-hero .eyebrow.on-dark,
.page-hero .on-dark h1, .page-hero h1.on-dark,
.page-hero .on-dark p, .page-hero p.on-dark,
.page-hero .on-dark .lede, .page-hero .lede.on-dark,
.home-hero .eyebrow.on-dark,
.home-hero .on-dark h1, .home-hero h1.on-dark,
.home-hero .on-dark p, .home-hero p.on-dark,
.home-hero .on-dark .lede, .home-hero .lede.on-dark{
  color:var(--navy);
}
.page-hero .on-dark p, .page-hero p.on-dark,
.home-hero .on-dark p, .home-hero p.on-dark{ color:rgba(27,35,64,.8); }
.page-hero .on-dark .lede, .page-hero .lede.on-dark,
.home-hero .on-dark .lede, .home-hero .lede.on-dark{ color:rgba(27,35,64,.9); }
.page-hero .btn-outline, .home-hero .btn-outline{
  border-color:rgba(27,35,64,.4);
  color:var(--navy);
}
.page-hero .btn-outline:hover, .home-hero .btn-outline:hover{
  border-color:var(--navy);
  background:rgba(27,35,64,.08);
}

/* ==========================================================================
   HOME HERO
   ========================================================================== */

.home-hero{
  position:relative;
  background:var(--bright-cyan);
  overflow:hidden;
  padding:7.5rem 0 6rem;
}
.home-hero .protea-mark.p1{
  position:absolute; top:-8%; right:-6%; width:620px; height:620px;
  color:var(--gold); opacity:.09;
  transform:rotate(12deg);
}
.home-hero .protea-mark.p2{
  position:absolute; bottom:-14%; left:-10%; width:420px; height:420px;
  color:var(--pink); opacity:.08;
  transform:rotate(-18deg);
}
.home-hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:3.5rem;
  align-items:center;
  max-width:none;
}
.home-hero-text{ max-width:600px; }
.home-hero .script{
  font-size:clamp(2.1rem, 4.4vw, 3.2rem);
  color:var(--navy);
  display:block;
  margin-bottom:.1em;
}
.home-hero h1{ margin-bottom:.3em; }
.home-hero .lede{ max-width:560px; }
.home-hero-slogan{
  font-family:var(--font-script);
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  color:var(--navy);
  margin:1.8rem 0 2.2rem;
  line-height:1.35;
}
.home-hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.6rem; }
.home-hero-tags{
  margin-top:3.2rem;
  display:flex; gap:2.2rem; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(27,35,64,.65);
}
.home-hero-tags span{ position:relative; padding-left:1.2rem; }
.home-hero-tags span::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:6px; height:6px; border-radius:50%; background:var(--brand-gradient);
}

.home-hero-media{
  position:relative;
  height:100%;
  min-height:460px;
}
.home-hero-media .hp{
  position:absolute;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
  border:1px solid rgba(255,253,251,.14);
}
.home-hero-media .hp img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-hero-media .hp-board{
  width:72%;
  aspect-ratio:3/5;
  top:0;
  right:0;
  z-index:2;
}
.home-hero-media .hp-clock{
  width:52%;
  aspect-ratio:4/5;
  bottom:-6%;
  left:0;
  z-index:3;
  transform:rotate(-4deg);
}

/* ==========================================================================
   VALUE STRIP
   ========================================================================== */

.value-strip{
  background:var(--blush);
  border-bottom:1px solid rgba(116,57,172,.1);
  position:relative;
  overflow:hidden;
}
.value-strip::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle 340px at 8% 20%, rgba(240,39,109,.14), transparent 70%),
    radial-gradient(circle 380px at 50% 110%, rgba(34,131,200,.16), transparent 70%),
    radial-gradient(circle 340px at 95% 10%, rgba(201,166,234,.14), transparent 70%);
  pointer-events:none;
}
.value-strip-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  padding:2.6rem 0;
  position:relative;
}
.value-item{
  display:flex; align-items:center; gap:1rem;
  justify-content:center;
  text-align:left;
}
.value-item .protea-mark{ width:34px; height:34px; flex-shrink:0; }
.value-item:nth-child(1) .protea-mark{ color:var(--pink); }
.value-item:nth-child(2) .protea-mark{ color:var(--teal); }
.value-item:nth-child(3) .protea-mark{ color:var(--purple); }
.value-item .vt{
  font-family:var(--font-display);
  font-size:1.02rem;
  color:var(--navy);
  display:block;
}
.value-item .vs{
  font-size:.76rem;
  color:var(--ink-soft);
  letter-spacing:.02em;
}

/* ==========================================================================
   SECTIONS / GENERIC
   ========================================================================== */

.section{ padding:6.5rem 0; }
.section-sm{ padding:4.5rem 0; }
.bg-blush{ background:var(--blush); position:relative; overflow:hidden; }
.bg-blush::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle 420px at -5% 15%, rgba(240,39,109,.09), transparent 65%),
    radial-gradient(circle 460px at 105% 85%, rgba(34,131,200,.1), transparent 65%);
  pointer-events:none;
}
.bg-blush > *{ position:relative; z-index:1; }
.bg-cream{ background:var(--cream); position:relative; overflow:hidden; }
.bg-cream::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle 460px at 102% 8%, rgba(201,166,234,.07), transparent 65%),
    radial-gradient(circle 420px at -4% 92%, rgba(240,39,109,.07), transparent 65%);
  pointer-events:none;
}
.bg-cream > *{ position:relative; z-index:1; }
.bg-dark{ background:linear-gradient(165deg, var(--teal-dark) 0%, var(--charcoal) 85%); color:rgba(255,253,251,.8); position:relative; overflow:hidden; }
.bg-dark > *{ position:relative; z-index:1; }

.bg-photo{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.bg-photo-collection{ background-image:url('assets/bg-collection.jpg'); }
.bg-photo-shop{ background-image:url('assets/bg-shop.jpg'); }
.section-head.on-photo{
  background:rgba(255,253,251,.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:var(--radius-lg);
  padding:2.4rem 2.2rem;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.25);
}

.dark-band-group{
  position:relative;
  overflow:hidden;
}
.dark-band-group .features-strip,
.dark-band-group .bespoke{ position:relative; z-index:1; }
.dark-band-flower{
  position:absolute;
  right:-7rem;
  top:38%;
  width:460px;
  height:900px;
  z-index:2;
  pointer-events:none;
  opacity:.85;
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image:linear-gradient(100deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.dark-band-flower img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 1180px){
  .dark-band-flower{ display:none; }
}
.bg-navy{ background:linear-gradient(150deg,var(--navy),var(--charcoal)); color:rgba(255,253,251,.8); position:relative; overflow:hidden; }

.digital-intro-band{
  min-height:420px;
  display:flex;
  align-items:center;
  padding:3.5rem 0;
}
.digital-intro-band .protea-mark{ position:absolute; z-index:0; }
.digital-intro-band .wrap{ position:relative; z-index:1; width:100%; }
.digital-intro-band .section-head{ max-width:760px; }
.digital-intro-band h2{ font-size:clamp(2rem, 4vw, 2.7rem); }
.digital-intro-band .lede{ font-size:1.2rem; }
.digital-intro-band p:not(.lede){ font-size:1.05rem; }

.divider-protea{
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin:0 auto 2.6rem;
  color:var(--purple-deep);
}
.divider-protea .line{ width:64px; height:1px; background:linear-gradient(90deg,transparent,currentColor); opacity:.4; }
.divider-protea .line.r{ background:linear-gradient(270deg,transparent,currentColor); }
.divider-protea .protea-mark{ width:26px; height:26px; }

/* ==========================================================================
   COLLECTION / PRODUCT CARDS
   ========================================================================== */

.collection-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
}
.collection-card{
  position:relative;
  background:var(--cream);
  border:1px solid rgba(116,57,172,.12);
  border-radius:var(--radius-lg);
  padding:2.4rem 2rem 2.2rem;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.collection-card::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--brand-gradient);
  opacity:.85;
}
.collection-card::before{
  content:"";
  position:absolute; inset:0;
  background:var(--brand-gradient);
  opacity:0;
  transition:opacity .4s var(--ease);
  z-index:0;
}
.collection-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card);
  border-color:transparent;
}
.collection-card:hover::before{ opacity:.06; }
.collection-card > *{ position:relative; z-index:1; }
.collection-card .protea-mark{
  width:44px; height:44px;
  color:var(--purple-deep);
  margin-bottom:1.3rem;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.collection-card:nth-child(4n+1) .protea-mark{ color:var(--pink); }
.collection-card:nth-child(4n+2) .protea-mark{ color:var(--teal); }
.collection-card:nth-child(4n+3) .protea-mark{ color:var(--purple); }
.collection-card:nth-child(4n+4) .protea-mark{ color:var(--gold); }
.collection-card:hover .protea-mark{ transform:rotate(-8deg) scale(1.06); }
.collection-card h3{ margin-bottom:.5rem; }
.collection-card p{ font-size:.92rem; margin-bottom:1.2rem; }
.collection-card .card-link{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--purple-deep);
  display:inline-flex; align-items:center; gap:.5em;
}
.collection-card .card-link svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
.collection-card:hover .card-link svg{ transform:translateX(4px); }

/* ==========================================================================
   FEATURES STRIP (Why TMF Creations)
   ========================================================================== */

.features-strip{ position:relative; overflow:hidden; background:var(--hotpink); }
.features-strip .eyebrow.on-dark{ color:var(--navy); opacity:.75; }
.features-strip h2.on-dark{ color:var(--navy); }
.features-strip p.on-dark{ color:rgba(27,35,64,.75); }
.features-strip .feature-title{ color:var(--navy); }
.features-strip .features-tagline{ color:var(--navy); }
.features-strip .protea-mark{
  position:absolute; top:-10%; left:-8%; width:420px; height:420px;
  color:var(--gold); opacity:.07; transform:rotate(-10deg);
}
.features-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1.6rem;
  margin-top:1rem;
}
.feature-item{ text-align:center; padding:0 .4rem; }
.feature-icon{
  width:64px; height:64px;
  margin:0 auto 1rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(49,231,251,.14);
  border:1px solid rgba(49,231,251,.55);
  color:var(--bright-cyan);
}
.feature-icon svg{ width:26px; height:26px; }
.feature-title{
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--cream);
  line-height:1.4;
}
.features-tagline{
  text-align:center;
  margin-top:3.2rem;
  font-family:var(--font-script);
  font-size:clamp(1.3rem, 2.2vw, 1.7rem);
  color:var(--gold);
}

/* ==========================================================================
   PAGE PROTEA DECOR — pure decoration, non-interactive, fills side margins
   ========================================================================== */

.page-decor{
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:14px;
  overflow:hidden;
  width:340px;
  height:260px;
}
.page-decor img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-decor.on-light{ opacity:.92; }
.page-decor.on-dark{ opacity:.9; mix-blend-mode:normal; }

.page-decor.d-tl{
  top:-2rem; left:-6rem;
  -webkit-mask-image:linear-gradient(115deg, #000 40%, transparent 88%);
  mask-image:linear-gradient(115deg, #000 40%, transparent 88%);
}
.page-decor.d-tr{
  top:-2rem; right:-6rem;
  -webkit-mask-image:linear-gradient(245deg, #000 40%, transparent 88%);
  mask-image:linear-gradient(245deg, #000 40%, transparent 88%);
}
.page-decor.d-bl{
  bottom:-2rem; left:-6rem;
  -webkit-mask-image:linear-gradient(65deg, #000 40%, transparent 88%);
  mask-image:linear-gradient(65deg, #000 40%, transparent 88%);
}
.page-decor.d-br{
  bottom:-2rem; right:-6rem;
  -webkit-mask-image:linear-gradient(295deg, #000 40%, transparent 88%);
  mask-image:linear-gradient(295deg, #000 40%, transparent 88%);
}

@media (max-width: 1180px){
  .page-decor{ display:none; }
}

/* ==========================================================================
   BESPOKE STRIP
   ========================================================================== */


.bespoke{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:6rem 0;
  background:var(--vivid-purple);
}
.bespoke::before{ content:none; }
.bespoke .protea-mark{
  position:absolute; top:50%; left:50%;
  translate:-50% -50%;
  width:520px; height:520px;
  color:rgba(27,35,64,.12); opacity:1;
}
.bespoke-inner{ position:relative; max-width:620px; margin:0 auto; }
.bespoke h2{ color:var(--navy); }
.bespoke .eyebrow.on-dark{ color:var(--navy); opacity:.7; }
.bespoke p.on-dark{ color:rgba(27,35,64,.78); }

/* ==========================================================================
   ABOUT TEASER / SPLIT SECTIONS
   ========================================================================== */

.split{
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:4rem;
  align-items:center;
}
.split.reverse{ grid-template-columns:1fr .85fr; }
.split.reverse .split-media{ order:2; }
.split-media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.split-media::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-lg);
  pointer-events:none;
}
.split-media .protea-mark{
  position:absolute; bottom:-30px; right:-30px;
  width:150px; height:150px;
  color:var(--gold);
  opacity:.9;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.split-media .protea-mark svg circle,
.split-media .protea-mark svg path,
.split-media .protea-mark svg line{ }
.split-body .btn{ margin-top:.6rem; }

/* ==========================================================================
   SHOP — CONFIGURATOR (Product > Font > Design)
   ========================================================================== */

.shop-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.8rem;
}
.shop-card{
  background:var(--cream);
  border:1px solid rgba(116,57,172,.14);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.shop-card.is-open{ border-color:var(--purple); box-shadow:var(--shadow-card); }

.shop-card-studio{
  border:2px solid transparent;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,
             var(--brand-gradient) border-box;
  box-shadow:0 20px 50px -20px rgba(171,85,247,.4);
}
.studio-head{
  display:flex; align-items:center; gap:1.1rem;
  width:100%; padding:1.4rem 1.6rem;
  text-decoration:none;
  cursor:pointer;
}
.studio-icon{
  flex-shrink:0;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-gradient);
  color:#fff;
}
.studio-badge{
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:var(--brand-gradient);
  padding:.2em .55em;
  border-radius:20px;
  margin-left:.5em;
  vertical-align:middle;
}
.studio-arrow{ color:var(--purple-deep); flex-shrink:0; }

.shop-card-head{
  display:flex;
  align-items:center;
  gap:1.4rem;
  padding:1.8rem 2rem;
  cursor:pointer;
  background:none;
  border:none;
  width:100%;
  text-align:left;
  font-family:inherit;
}
.shop-card-icon{
  width:56px; height:56px;
  border-radius:50%;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-gradient-soft);
  color:var(--purple-deep);
}
.shop-card-icon .protea-mark{ width:30px; height:30px; }
.shop-card-text{ flex:1; }
.shop-card-text h3{ margin-bottom:.2rem; }
.shop-card-text span{ font-size:.86rem; color:var(--ink-soft); }
.shop-card-chevron{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(116,57,172,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--purple-deep);
  flex-shrink:0;
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.shop-card-chevron svg{ width:14px; height:14px; }
.shop-card.is-open .shop-card-chevron{ transform:rotate(180deg); background:var(--brand-gradient); border-color:transparent; color:#fff; }

.shop-card-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease);
}
.shop-card.is-open .shop-card-panel{ max-height:2400px; }
.shop-card-panel-inner{ padding:0 2rem 2.2rem; }

.config-tabs{
  display:flex;
  gap:.4rem;
  border-bottom:1px solid rgba(116,57,172,.14);
  margin-bottom:1.6rem;
}
.config-tab{
  background:none; border:none; cursor:pointer;
  font-family:var(--font-body);
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.9rem 0;
  margin-right:1.6rem;
  color:var(--ink-soft);
  position:relative;
}
.config-tab .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  border:1px solid currentColor;
  font-size:.62rem; margin-right:.5em;
}
.config-tab::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px;
  background:var(--brand-gradient); transition:right .3s var(--ease);
}
.config-tab.is-active{ color:var(--navy); }
.config-tab.is-active::after{ right:0; }

.config-panel{ display:none; }
.config-panel.is-active{ display:block; animation:fadeUp .4s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.option-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.85rem;
}
.option-card{
  position:relative;
  border:1px solid rgba(116,57,172,.18);
  border-radius:10px;
  padding:1.1rem .9rem;
  cursor:pointer;
  text-align:left;
  background:var(--blush);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.option-card:hover{ transform:translateY(-2px); border-color:var(--purple); }
.option-card input{ position:absolute; opacity:0; pointer-events:none; }
.option-card .oc-title{
  font-family:var(--font-display);
  font-size:.98rem;
  color:var(--navy);
  display:block;
  margin-bottom:.15rem;
}
.option-card .oc-sub{ font-size:.72rem; color:var(--ink-soft); }
.option-card .oc-check{
  position:absolute; top:.7rem; right:.7rem;
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(116,57,172,.4);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.option-card:has(input:checked){
  border-color:var(--purple);
  background:#fff;
  box-shadow:0 0 0 1px var(--purple);
}
.option-card:has(input:checked) .oc-check{ background:var(--brand-gradient); border-color:transparent; }

.option-card.font-sample .oc-title{ font-size:1.3rem; }
.font-sample.font-script .oc-title{ font-family:var(--font-script); font-size:1.7rem; }
.font-sample.font-serif .oc-title{ font-family:'Playfair Display', serif; }
.font-sample.font-sans .oc-title{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.08em; font-size:1.05rem; }
.font-sample.font-classic .oc-title{ font-family:Georgia, serif; font-style:italic; }

.font-grid{ grid-template-columns:repeat(2,1fr); }
@media (min-width: 720px){
  .font-grid{ grid-template-columns:repeat(4,1fr); }
}
.option-card.font-live{ text-align:center; padding:1.2rem 1rem; }
.font-live-sample{
  display:block;
  font-size:1.5rem;
  line-height:1.2;
  color:var(--navy);
  margin-bottom:.4rem;
  min-height:1.8rem;
  overflow:hidden;
  white-space:nowrap;
}
.font-live .oc-title{ font-family:var(--font-body) !important; font-size:.78rem; font-weight:600; text-transform:none; letter-spacing:0; }
.font-live .oc-sub{ font-size:.68rem; }

.design-swatch{ padding-top:0; overflow:hidden; }
.design-swatch .swatch-art{
  width:100%; aspect-ratio:1.3/1;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(201,166,234,.08), rgba(240,39,109,.08));
  color:var(--purple-deep);
  margin-bottom:.7rem;
}
.design-swatch .swatch-art .protea-mark{ width:46%; height:46%; }
.design-swatch .oc-title, .design-swatch .oc-sub{ padding:0 .9rem; }
.design-swatch .oc-title{ display:block; margin-top:0; }
.design-swatch .oc-sub{ display:block; padding-bottom:.9rem; }
.design-swatch .oc-check{ top:.9rem; right:.9rem; }

/* light visual variation between design swatches so they don't read as identical */
.option-grid .design-swatch:nth-child(4n+1) .swatch-art{ color:var(--purple); }
.option-grid .design-swatch:nth-child(4n+2) .swatch-art{ color:var(--pink); }
.option-grid .design-swatch:nth-child(4n+2) .swatch-art svg{ transform:rotate(18deg); }
.option-grid .design-swatch:nth-child(4n+3) .swatch-art{ color:var(--teal); }
.option-grid .design-swatch:nth-child(4n+3) .swatch-art svg{ transform:rotate(-14deg); }
.option-grid .design-swatch:nth-child(4n+4) .swatch-art{ color:var(--gold); }
.option-grid .design-swatch:nth-child(4n+4) .swatch-art svg{ transform:scale(.82) rotate(8deg); }

/* product-swatch: real photo thumbnail option (used for board/board-shape pickers) */
.product-swatch{ padding-top:0; overflow:hidden; }
.product-swatch .swatch-art{
  width:100%; aspect-ratio:1/1;
  overflow:hidden;
  background:#0b0b0b;
  margin-bottom:.7rem;
}
.product-swatch .swatch-art img{
  width:100%; height:100%; object-fit:contain;
  display:block;
  transition:transform .4s var(--ease);
}
.product-swatch:hover .swatch-art img{ transform:scale(1.06); }
.product-swatch .oc-title, .product-swatch .oc-sub{ padding:0 .9rem; }
.product-swatch .oc-title{ display:block; margin-top:0; }
.product-swatch .oc-sub{ display:block; padding-bottom:.9rem; }
.product-swatch .oc-check{ top:.9rem; right:.9rem; }

.config-summary{
  margin-top:1.8rem;
  padding-top:1.6rem;
  border-top:1px dashed rgba(116,57,172,.25);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  flex-wrap:wrap;
}
.config-summary-text{ font-size:.86rem; color:var(--ink-soft); }
.config-summary-text strong{ color:var(--navy); font-weight:600; }
.config-summary-text .cs-chip{
  display:inline-block;
  margin:.15rem .3rem .15rem 0;
  padding:.25rem .65rem;
  border-radius:20px;
  background:var(--blush);
  font-size:.76rem;
  color:var(--navy);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */

.gallery-filters-band{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  padding:1.8rem 1.8rem;
  margin-bottom:2.8rem;
  background-image:url('assets/decor/decor-bouquet-white.jpg');
  background-size:cover;
  background-position:75% center;
}
.gallery-filters-band::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,253,251,.94) 0%, rgba(255,253,251,.8) 55%, rgba(255,253,251,.55) 100%);
}
.gallery-filters{
  position:relative;
  z-index:1;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.filter-pill{
  background:var(--cream);
  border:1px solid rgba(116,57,172,.25);
  color:var(--ink-soft);
  border-radius:30px;
  padding:.6rem 1.3rem;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.04em;
  cursor:pointer;
  transition:all .3s var(--ease);
}
.filter-pill:hover{ border-color:var(--purple); color:var(--navy); }
.filter-pill.is-active{ background:var(--brand-gradient); border-color:transparent; color:#fff; }

.masonry{
  columns:3 260px;
  column-gap:1.3rem;
}
.masonry-item{
  break-inside:avoid;
  margin-bottom:1.3rem;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.masonry-item:hover{ transform:translateY(-4px); box-shadow:0 0 0 3px rgba(116,57,172,.35), 0 16px 34px -14px rgba(116,57,172,.45); }
.masonry-item img{ width:100%; display:block; }
.masonry-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.2rem 1.1rem 1rem;
  background:linear-gradient(to top, rgba(27,21,24,.88), transparent);
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.masonry-item:hover .masonry-caption{ opacity:1; transform:translateY(0); }
.masonry-caption .mc-cat{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.2rem; }
.masonry-caption .mc-title{ font-family:var(--font-display); font-size:1.05rem; }

.placeholder-tile{
  aspect-ratio:4/5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem;
  background:var(--blush);
  border:1px dashed rgba(116,57,172,.3);
  color:var(--purple-deep);
  text-align:center;
  padding:1.5rem;
}
.placeholder-tile .protea-mark{ width:52px; height:52px; opacity:.55; }
.placeholder-tile .pt-cat{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); }
.placeholder-tile .pt-note{ font-size:.76rem; color:var(--ink-soft); max-width:170px; }

/* ==========================================================================
   ABOUT PAGE EXTRAS
   ========================================================================== */

.philosophy{
  position:relative;
  text-align:center;
  padding:6.5rem 0;
  background:var(--hotpink);
}
.philosophy::before{ content:none; }
.philosophy .protea-mark{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:60vw; max-width:640px; aspect-ratio:1;
  color:rgba(27,35,64,.1); opacity:1;
}
.philosophy blockquote{
  position:relative;
  margin:0 auto; max-width:760px;
  font-family:var(--font-script);
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  color:var(--navy);
  line-height:1.4;
}
.philosophy cite{
  position:relative;
  display:block;
  margin-top:1.6rem;
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(27,35,64,.7);
}

.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  text-align:center;
}
.pillar{ padding:0 1rem; }
.pillar .protea-mark{ width:48px; height:48px; margin:0 auto 1.2rem; color:var(--purple); }
.pillar:nth-child(1) .protea-mark{ color:var(--pink); }
.pillar:nth-child(2) .protea-mark{ color:var(--teal); }
.pillar:nth-child(3) .protea-mark{ color:var(--purple); }
.pillar h3{ margin-bottom:.6rem; }
.pillar p{ font-size:.92rem; }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.contact-grid{
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:3.5rem;
  align-items:start;
}
.contact-card{
  background:var(--charcoal);
  color:rgba(255,253,251,.85);
  border-radius:var(--radius-lg);
  padding:2.6rem;
  position:relative;
  overflow:hidden;
}
.contact-card .protea-mark{
  position:absolute; bottom:-40px; right:-40px; width:220px; height:220px;
  color:var(--gold); opacity:.1;
}
.contact-card h3{ color:var(--cream); position:relative; }
.contact-list{ position:relative; margin:1.6rem 0 2rem; display:flex; flex-direction:column; gap:1.3rem; }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact-list .ci-icon{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,253,251,.06);
  border:1px solid rgba(255,253,251,.14);
  color:var(--gold);
}
.contact-list .ci-icon svg{ width:18px; height:18px; }
.contact-list .ci-label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,253,251,.45); display:block; margin-bottom:.15rem; }
.contact-list .ci-value{ font-size:.98rem; color:var(--cream); }
.contact-list a.ci-value:hover{ color:var(--pink-soft); }

.contact-form{
  background:var(--cream);
  border:1px solid rgba(116,57,172,.14);
  border-radius:var(--radius-lg);
  padding:2.6rem;
  box-shadow:var(--shadow-card);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:1.3rem; }
.field label{
  display:block; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%;
  font-family:inherit;
  font-size:.95rem;
  padding:.85em 1em;
  border:1px solid rgba(116,57,172,.22);
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(116,57,172,.12);
}
.field textarea{ resize:vertical; min-height:120px; }
.form-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.6rem; align-items:center; }
.form-note{ font-size:.78rem; color:var(--ink-soft); margin-top:.9rem; }

/* ==========================================================================
   DESIGN STUDIO (Plaque configurator)
   ========================================================================== */

.studio-layout{
  display:grid;
  grid-template-columns:260px 1fr 320px;
  gap:2.2rem;
  align-items:start;
}
@media (max-width: 1180px){
  .studio-layout{ grid-template-columns:1fr; }
}

.studio-panel-title{
  font-size:.95rem;
  margin:1.6rem 0 .8rem;
  color:var(--navy);
}
.studio-panel-title:first-child{ margin-top:0; }

.studio-designs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.7rem;
}
.studio-design-thumb{
  background:var(--cream);
  border:2px solid rgba(116,57,172,.14);
  border-radius:10px;
  padding:.5rem;
  cursor:pointer;
  text-align:center;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.studio-design-thumb img{ width:100%; aspect-ratio:1; object-fit:contain; display:block; margin-bottom:.4rem; }
.studio-design-thumb span{ font-size:.68rem; font-weight:600; color:var(--navy); line-height:1.25; display:block; }
.studio-design-thumb:hover{ transform:translateY(-2px); border-color:var(--purple-deep); }
.studio-design-thumb.is-active{ border-color:var(--pink); box-shadow:0 8px 20px -10px rgba(0,0,0,.25); }

.studio-preview{
  position:sticky;
  top:6.5rem;
}
.studio-canvas-wrap{
  background:#111;
  border-radius:var(--radius-lg);
  padding:1.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-card);
  position:relative;
}
.studio-preview-note{
  font-size:.8rem;
  color:var(--ink-soft);
  text-align:center;
  margin-top:.9rem;
}

.studio-field{ margin-bottom:.9rem; }
.studio-field label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.35rem;
}
.studio-field input{
  width:100%;
  padding:.65rem .9rem;
  border-radius:8px;
  border:1px solid rgba(116,57,172,.22);
  background:var(--cream);
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--navy);
}
.studio-field input:focus{ outline:2px solid var(--purple-deep); outline-offset:1px; }

.studio-select{
  width:100%;
  padding:.7rem .9rem;
  border-radius:8px;
  border:1px solid rgba(116,57,172,.22);
  background:var(--cream);
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--navy);
  cursor:pointer;
}

.studio-range{
  width:100%;
  accent-color:var(--pink);
}

.studio-hint{
  font-size:.74rem;
  color:var(--ink-soft);
  margin-top:.6rem;
  line-height:1.5;
}

.studio-actions{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-top:1.4rem;
}
.studio-actions .btn{ width:100%; text-align:center; }

.studio-obj-toolbar{
  display:none;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin-top:1rem;
  padding:.6rem;
  background:var(--navy);
  border-radius:10px;
}
.studio-obj-toolbar button{
  width:38px; height:38px;
  border-radius:8px;
  border:none;
  background:rgba(255,253,251,.1);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s var(--ease);
}
.studio-obj-toolbar button:hover{ background:rgba(255,253,251,.22); }
.studio-obj-toolbar button svg{ width:18px; height:18px; }
.studio-obj-toolbar button.obj-toolbar-danger:hover{ background:#c0334a; }

.studio-engraving-btn{ width:100%; margin-top:1rem; }
.studio-engraving-btn.is-active{ background:var(--navy); color:#fff; }
.studio-randomize-btn{ width:100%; margin:1.4rem 0 0; }

.style-packs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
}
.style-pack-btn{
  padding:.6rem .7rem;
  font-size:.76rem;
  font-weight:600;
  border-radius:8px;
  border:1.5px solid rgba(116,57,172,.2);
  background:var(--cream);
  color:var(--navy);
  cursor:pointer;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.style-pack-btn:hover{ border-color:var(--pink); transform:translateY(-2px); }

.wood-tone-grid{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.wood-tone-swatch{
  padding:.6rem .8rem;
  border-radius:8px;
  border:1.5px solid rgba(116,57,172,.18);
  background:var(--cream);
  color:var(--navy);
  font-size:.82rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s var(--ease);
}
.wood-tone-swatch:hover{ border-color:var(--purple-deep); }
.wood-tone-swatch.is-active{ border-color:var(--pink); background:#fff; box-shadow:0 0 0 1px var(--pink); }

.studio-add-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.studio-add-row .btn{ flex:1; text-align:center; }
.studio-upload-label{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }

.studio-undo-redo{
  display:flex;
  gap:.6rem;
  justify-content:center;
  margin-top:.9rem;
}
.studio-undo-redo button{
  display:flex; align-items:center; gap:.35rem;
  padding:.5rem .9rem;
  border-radius:8px;
  border:1px solid rgba(116,57,172,.22);
  background:var(--cream);
  color:var(--navy);
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
}
.studio-undo-redo button svg{ width:16px; height:16px; }
.studio-undo-redo button:hover:not(:disabled){ border-color:var(--purple-deep); }
.studio-undo-redo button:disabled{ opacity:.35; cursor:not-allowed; }

/* Help / instructions modal */
.studio-help-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(27,21,24,.72);
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.studio-help-modal.is-open{ display:flex; }
.studio-help-inner{
  position:relative;
  background:var(--cream);
  border-radius:var(--radius-lg);
  max-width:640px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  padding:2.6rem;
  box-shadow:0 60px 100px -30px rgba(0,0,0,.6);
}
.studio-help-inner h2{ margin-bottom:1.2rem; }
.studio-help-close{
  position:absolute; top:1.2rem; right:1.4rem;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(116,57,172,.1);
  color:var(--navy);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.studio-help-close:hover{ background:rgba(116,57,172,.2); }
.studio-help-steps{
  padding-left:1.3rem;
  margin:0 0 1.4rem;
}
.studio-help-steps li{
  margin-bottom:.9rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.studio-help-steps strong{ color:var(--navy); }
.studio-help-note{
  font-size:.8rem;
  color:var(--ink-soft);
  border-top:1px solid rgba(116,57,172,.15);
  padding-top:1.2rem;
  margin:0;
}

.favorites-list{
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
}
.favorite-card{
  display:grid;
  grid-template-columns:52px 1fr auto auto;
  align-items:center;
  gap:.6rem;
  background:var(--cream);
  border:1px solid rgba(116,57,172,.14);
  border-radius:10px;
  padding:.5rem;
}
.favorite-card img{ width:52px; height:52px; object-fit:contain; border-radius:6px; background:#fff; }
.favorite-card span{ font-size:.78rem; font-weight:600; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-btn{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:.4em .7em;
  border-radius:6px;
  border:1px solid rgba(116,57,172,.25);
  background:transparent;
  color:var(--navy);
  cursor:pointer;
}
.fav-load:hover{ background:var(--purple-deep); color:#fff; border-color:transparent; }
.fav-delete:hover{ background:#c0334a; color:#fff; border-color:transparent; }

.studio-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  flex-wrap:wrap;
  background:var(--blush);
  border-radius:var(--radius-lg);
  padding:1.2rem 1.4rem;
  margin-bottom:1.4rem;
}
.studio-cta strong{ display:block; font-size:.92rem; color:var(--navy); margin-bottom:.2rem; }
.studio-cta span{ font-size:.82rem; color:var(--ink-soft); }
.studio-cta .btn{ flex-shrink:0; }

/* ==========================================================================
   CORPORATE BRANDING PAGE
   ========================================================================== */

.corp-hero-banner{
  margin-top:2.6rem;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.5);
  border:1px solid rgba(255,253,251,.14);
}
.corp-hero-banner img{ width:100%; display:block; }

.inhouse-band{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:flex;
  align-items:center;
  padding:4rem 0;
  background:linear-gradient(150deg,var(--navy),var(--charcoal));
}
.inhouse-band .protea-mark{ position:absolute; z-index:0; }
.inhouse-band .wrap{ position:relative; z-index:1; width:100%; }
.inhouse-panel{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:4rem 3.5rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg, rgba(49,231,251,.16), rgba(171,85,247,.16));
  border:1px solid rgba(49,231,251,.35);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.inhouse-panel .eyebrow{ color:var(--bright-cyan); }
.inhouse-panel h2{
  font-size:clamp(2.3rem, 4.6vw, 3.2rem);
  line-height:1.15;
  margin:.5em 0 .5em;
}
.inhouse-panel p{
  font-size:1.15rem;
  max-width:600px;
  margin:0 auto;
}

.digital-cta-band{
  position:relative;
  overflow:hidden;
  padding:4.5rem 0;
  background:linear-gradient(150deg,var(--navy),var(--charcoal));
}
.digital-cta-panel{
  position:relative;
  max-width:760px;
  margin:0 auto;
  text-align:center;
  padding:3.2rem 3rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg, rgba(255,105,180,.18), rgba(171,85,247,.18), rgba(49,231,251,.18));
  border:1px solid rgba(255,253,251,.16);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.digital-cta-panel .eyebrow{ color:var(--gold); }
.digital-cta-panel h2{ font-size:clamp(1.9rem, 3.6vw, 2.5rem); margin:.5em 0 .5em; }
.digital-cta-panel p{ max-width:480px; margin:0 auto 1.6rem; }

.capability-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.6rem;
  margin-top:1rem;
}
.capability-item{
  display:flex; align-items:center; gap:1rem;
  background:var(--cream);
  border:1px solid rgba(116,57,172,.14);
  border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.capability-item:hover{ transform:translateY(-3px); border-color:var(--purple-deep); }
.capability-icon{
  flex-shrink:0;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-gradient-soft);
  color:var(--purple-deep);
}
.capability-icon svg{ width:24px; height:24px; }
.capability-title{ font-weight:600; color:var(--navy); font-size:.96rem; line-height:1.35; }

@media (max-width: 900px){
  .capability-grid{ grid-template-columns:1fr; }
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.6rem;
}
.service-card{
  position:relative;
  background:var(--cream);
  border:1px solid rgba(116,57,172,.14);
  border-radius:var(--radius-lg);
  padding:2rem 1.6rem;
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--brand-gradient);
  opacity:.85;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.service-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--brand-gradient-soft);
  color:var(--purple-deep);
  margin-bottom:1.2rem;
}
.service-icon svg{ width:24px; height:24px; }
.service-card h3{ font-size:1.08rem; margin-bottom:.5rem; }
.service-card p{ font-size:.86rem; margin-bottom:0; }
.service-card:nth-child(4n+1) .service-icon{ color:var(--pink); }
.service-card:nth-child(4n+2) .service-icon{ color:var(--teal); }
.service-card:nth-child(4n+3) .service-icon{ color:var(--purple-deep); }
.service-card:nth-child(4n+4) .service-icon{ color:var(--gold); }

@media (max-width: 1180px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .service-grid{ grid-template-columns:1fr; }
}

.handles-it-all{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.8rem 1.6rem;
  margin-top:2.2rem;
}
.handles-it-all span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  color:var(--navy);
  position:relative;
  padding-right:1.6rem;
}
.handles-it-all span:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0; top:50%; translate:0 -50%;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--brand-gradient);
}
@media (max-width: 640px){
  .handles-it-all span{ padding-right:0; }
  .handles-it-all span::after{ display:none; }
}

/* ==========================================================================
   MISC STRIPS
   ========================================================================== */

.custom-strip{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  padding:3rem 2.6rem;
  border-radius:var(--radius-lg);
  background:var(--brand-gradient);
  color:#fff;
}
.custom-strip h3{ color:#fff; margin-bottom:.3rem; }
.custom-strip p{ color:rgba(255,255,255,.88); margin-bottom:0; max-width:480px; }
.custom-strip-eyebrow{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-bottom:.6rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px){
  .main-nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .collection-grid{ grid-template-columns:repeat(2,1fr); }
  .shop-grid{ grid-template-columns:1fr; }
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:2.4rem 1.6rem; }
  .pillars{ grid-template-columns:1fr; gap:2.6rem; }
  .masonry{ columns:2 220px; }
  .home-hero-inner{ grid-template-columns:1fr; }
  .home-hero-media{ width:100%; min-height:380px; max-width:420px; margin:2.5rem auto 0; }
}

@media (max-width: 640px){
  .value-strip-inner{ grid-template-columns:1fr; gap:1.4rem; }
  .value-item{ justify-content:flex-start; }
  .collection-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .masonry{ columns:1 100%; }
  .section{ padding:4.5rem 0; }
  .home-hero{ padding:6rem 0 4rem; }
  .custom-strip{ flex-direction:column; align-items:flex-start; }
  .config-tabs{ overflow-x:auto; }

  /* mobile nav drawer */
  .main-nav.is-open{
    display:flex;
    position:fixed; inset:0 0 0 auto; top:73px;
    width:78vw; max-width:320px; height:calc(100vh - 73px);
    background:var(--charcoal);
    flex-direction:column; align-items:flex-start;
    padding:2.4rem var(--gutter);
    gap:1.6rem;
    box-shadow:-20px 0 40px -20px rgba(0,0,0,.5);
    overflow-y:auto;
  }
}

@media (min-width: 641px) and (max-width: 980px){
  .main-nav.is-open{
    display:flex;
    position:fixed; inset:0 0 0 auto; top:77px;
    width:340px; height:calc(100vh - 77px);
    background:var(--charcoal);
    flex-direction:column; align-items:flex-start;
    padding:2.4rem var(--gutter);
    gap:1.7rem;
    overflow-y:auto;
  }
}