:root{
    --ink: #101B2D;
    --ink-soft: #1B2A44;
    --ink-line: rgba(246,239,227,0.14);
    --paper: #F6EFE3;
    --paper-soft: #ECE1CC;
    --paper-line: rgba(16,27,45,0.12);
    --coral: #FF6B4A;
    --yellow: #F2C14E;
    --moss: #6FAE8B;

    --font-display: 'Fraunces', serif;
    --font-body: 'Space Grotesk', sans-serif;

    --max: 1120px;
    --pad: clamp(1.25rem, 4vw, 3rem);

    --sp-1: 0.5rem;
    --sp-2: 1rem;
    --sp-3: 1.5rem;
    --sp-4: 2.5rem;
    --sp-5: 4rem;
    --sp-6: 6rem;
    --sp-7: 8rem;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  h1,h2,h3{ font-family: var(--font-display); margin:0; line-height:1.08; font-weight:600; }
  p{ margin:0; }
  a{ color: inherit; text-decoration: none; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family: inherit; cursor:pointer; }

  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

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

  .section--ink{ background: var(--ink); color: var(--paper); position:relative; overflow:hidden; }
  .section--paper{ background: var(--paper); color: var(--ink); position:relative; overflow:hidden; }

  .section--ink::after{
    content:"";
    position:absolute; inset:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events:none;
  }

  /* ---------- NAV ---------- */
  .nav{
    position: sticky; top:0; z-index: 50;
    background: rgba(16,27,45,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--ink-line);
  }
  .nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top: var(--sp-2); padding-bottom: var(--sp-2);
  }
  .nav-mark{
    font-family: var(--font-display); font-weight:700; font-size:1.15rem;
    color: var(--paper); letter-spacing: 0.01em;
  }
  .nav-right{ display:flex; align-items:center; gap: var(--sp-4); }
  .nav-links{ display:flex; align-items:center; gap: var(--sp-4); }
  .nav-links a{ color: var(--paper); font-size:0.95rem; opacity:0.85; transition: opacity 0.2s ease; }
  .nav-links a:hover{ opacity:1; }
  .nav-cta{
    background: var(--coral); color: var(--ink) !important; opacity:1 !important;
    padding: 0.5rem 1.1rem; border-radius: 999px; font-weight:600; font-size:0.9rem;
  }
  .lang-switch{
    display:inline-flex; align-items:center;
    background: rgba(246,239,227,0.08);
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    padding: 3px 6px;
    gap: 3px;
  }
  .lang-btn{
    background: transparent; border: none; color: var(--paper);
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
    line-height: 1; padding: 0.35rem 0.6rem; border-radius: 999px;
    opacity: 0.65; cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .lang-btn:hover{ opacity: 1; }
  .lang-btn.is-active{
    background: var(--coral); color: var(--ink); opacity: 1;
  }
  .lang-divider{
    color: rgba(246,239,227,0.28); font-size: 0.72rem; line-height: 1; user-select: none;
  }
  .nav-toggle{
    display:none; background:none; border:none; color: var(--paper);
    width:2rem; height:2rem; position:relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; position:absolute; left:6px; right:6px; height:2px; background:var(--paper);
  }
  .nav-toggle span{ top:15px; }
  .nav-toggle span::before{ top:-7px; }
  .nav-toggle span::after{ top:7px; }

  @media (max-width: 760px){
    .nav-right{ gap: var(--sp-2); }
    .nav-links{
      position:fixed; inset: 56px 0 0 0; background: var(--ink);
      flex-direction:column; align-items:flex-start; gap: var(--sp-3);
      padding: var(--sp-4) var(--pad);
      transform: translateY(-8px); opacity:0; pointer-events:none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .nav-links.is-open{ opacity:1; transform:none; pointer-events:auto; }
    .nav-links a{ font-size:1.2rem; }
    .nav-toggle{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding-top: clamp(3rem, 8vw, var(--sp-7));
    padding-bottom: clamp(3rem, 8vw, var(--sp-7));
    min-height: min(88vh, 760px);
    display:flex; align-items:center;
    background:
      radial-gradient(circle at 18% 20%, rgba(242,193,78,0.18), transparent 24%),
      radial-gradient(circle at 76% 32%, rgba(255,107,74,0.16), transparent 28%),
      linear-gradient(135deg, rgba(16,27,45,0.98), rgba(16,27,45,0.94));
  }
  .hero::before,
  .hero::after{
    content:"";
    position:absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events:none;
    opacity: 0.7;
    animation: blobFloat 18s ease-in-out infinite alternate;
  }
  .hero::before{
    width: 22rem; height: 22rem;
    background: rgba(255,107,74,0.2);
    top: -4rem; right: 10%;
  }
  .hero::after{
    width: 26rem; height: 26rem;
    background: rgba(111,174,139,0.18);
    bottom: -6rem; left: 8%;
    animation-delay: 0.7s;
  }
  .hero-copy{ position:relative; z-index:2; max-width: 42rem; }
  .hero-title,
  .hero-sub,
  .hero-actions{
    opacity:0;
    transform: translateY(18px);
    animation: heroRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .hero-title{
    font-size: clamp(2.2rem, 5.4vw, 3.75rem);
    letter-spacing: -0.01em;
    animation-delay: 0ms;
  }
  .hero-sub{
    margin-top: var(--sp-3);
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    max-width: 34rem;
    color: rgba(246,239,227,0.82);
    animation-delay: 120ms;
  }
  .hero-actions{
    margin-top: var(--sp-4);
    display:flex; flex-wrap:wrap; gap: var(--sp-2);
    animation-delay: 240ms;
  }
  .reveal{
    opacity:0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible{
    opacity:1;
    transform: none;
  }
  @keyframes heroRise {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes blobFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-14px, 10px, 0) scale(1.06); }
    100% { transform: translate3d(18px, -12px, 0) scale(0.96); }
  }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 0.85rem 1.5rem; border-radius: 999px;
    font-size:0.95rem; font-weight:600; border:1px solid transparent;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn--primary{ background: var(--coral); color: var(--ink); }
  .btn--secondary{ background: transparent; border-color: rgba(246,239,227,0.5); color: var(--paper); }
  .btn--secondary:hover{ border-color: var(--paper); }
  .btn--ghost-light{ background: rgba(246,239,227,0.96); color: var(--ink); border-color: rgba(246,239,227,0.96); }
  .btn--ghost-light:hover{ background: #fffdf8; border-color: #fffdf8; }
  .btn--ghost-dark{ border-color: rgba(16,27,45,0.35); color: var(--ink); }
  .btn--ghost-dark:hover{ border-color: var(--ink); }

  .modal-backdrop{
    position: fixed; inset: 0; background: rgba(16,27,45,0.68); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 1.25rem; opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 200;
  }
  .modal-backdrop.is-open{
    opacity: 1; visibility: visible;
  }
  .modal {
    width: min(100%, 620px); background: #fffaf3; color: var(--ink); border-radius: 22px; border: 1px solid rgba(16,27,45,0.08);
    box-shadow: 0 28px 70px rgba(16,27,45,0.18); overflow: hidden;
  }
  .modal-head{
    display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: 1.15rem 1.3rem; border-bottom: 1px solid rgba(16,27,45,0.08);
  }
  .modal-head h3{ font-size: 1.2rem; }
  .modal-close{
    border: none; background: rgba(16,27,45,0.06); color: var(--ink); width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.2rem; cursor:pointer;
  }
  .modal-body{ padding: 1.3rem; }
  .contact-list{ display:grid; gap: 1rem; }
  .contact-list h4,
  .contact-form-wrap h4{ font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.8rem; }
  .social-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .social-link,
  .action-link{
    display:flex; align-items:center; justify-content:space-between; gap: 0.7rem; width:100%; padding: 0.85rem 0.9rem; border-radius: 14px;
    border: 1px solid rgba(16,27,45,0.12); background: rgba(16,27,45,0.02); color: var(--ink); font-weight: 600; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease; text-align:left;
  }
  .social-link:hover,
  .action-link:hover{ border-color: rgba(255,107,74,0.8); background: rgba(255,107,74,0.12); color: var(--ink); transform: translateY(-1px); }
  .contact-actions{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .action-link{ justify-content:center; cursor:pointer; background: rgba(16,27,45,0.04); }
  .contact-form-wrap form,
  #quickContactForm{ display:grid; gap: 0.9rem; }
  .contact-shell{ display:grid; gap: 1rem; }
  .contact-shell.is-form-mode .contact-quick-links{ display:none; }
  .contact-shell.is-form-mode .contact-form-wrap{ display:block; }
  .contact-quick-links{ display:grid; gap: 1rem; }
  .contact-form-wrap{ display:none; }
  .field{ display:grid; gap: 0.4rem; }
  .field label{ font-size: 0.79rem; font-weight: 600; opacity: 0.75; }
  .field input,
  .field textarea{
    width:100%; border: 1px solid rgba(16,27,45,0.15); border-radius: 12px; padding: 0.75rem 0.85rem; font: inherit; background: rgba(255,255,255,0.7);
  }
  .field textarea{ min-height: 110px; resize: vertical; }
  .submit-btn{ border: none; background: var(--coral); color: var(--ink); font: inherit; padding: 0.8rem 1rem; font-weight:700; border-radius: 999px; cursor:pointer; }
  .quick-modal-copy{
    margin: 0 0 1rem; color: rgba(16,27,45,0.78); font-size: 0.98rem; line-height: 1.6;
  }
  .contact-form-panel{ display:none; }
  .contact-form-panel.is-visible{ display:block; }

  @media (max-width: 720px){
    .modal { width: min(100%, 520px); }
    .social-grid, .contact-actions{ grid-template-columns: 1fr; }
    .modal-body{ padding: 1rem; }
  }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
  .section-head{ max-width: 34rem; margin-bottom: var(--sp-5); position:relative; z-index:2; }
  .section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
  .section-head p{ margin-top: var(--sp-2); font-size:1.05rem; opacity:0.85; }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5);
    position:relative; z-index:2;
  }
  .about-copy p{ margin-bottom: var(--sp-3); font-size:1.05rem; max-width: 38ch; }
  .facts{ border-top:1px solid var(--paper-line); }
  .fact{
    display:flex; justify-content:space-between; gap: var(--sp-3);
    padding: var(--sp-2) 0; border-bottom:1px solid var(--paper-line);
    font-size:0.95rem;
  }
  .fact dt{ opacity:0.6; }
  .fact dd{ margin:0; font-weight:600; text-align:right; }

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

  /* ---------- WORK ---------- */
  .grid-3{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
    position:relative; z-index:2;
  }
  @media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr; } }

  .card{ position:relative; overflow:hidden; border-radius: 4px; }
  .work-card{
    background: var(--ink-soft);
    padding: var(--sp-4) var(--sp-3);
    border-left: 3px solid transparent;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }
  .work-card:hover{ border-left-color: var(--coral); transform: translateX(4px); }
  .work-card h3{ font-size:1.25rem; color: var(--paper); }
  .work-card p{ margin-top: var(--sp-1); font-size:0.95rem; color: rgba(246,239,227,0.78); }
  .tag{
    display:inline-block; margin-top: var(--sp-2); font-size:0.78rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    border:1px solid rgba(246,239,227,0.3); color: rgba(246,239,227,0.8);
  }

  .card-curtain{
    position:absolute; inset:0; transform-origin: right center; z-index:3;
  }
  .work-card .card-curtain{ background: var(--ink-soft); }
  .friend-card .card-curtain{ background: var(--paper); }

  /* ---------- FRIENDS ---------- */
  .friend-card{
    background: var(--paper-soft);
    padding: var(--sp-4) var(--sp-3);
    transform: rotate(-1deg);
    transition: transform 0.25s ease;
  }
  .friend-card:hover{ transform: rotate(0deg); }
  .friend-ribbon{
    display:inline-block; background: var(--moss); color: var(--ink);
    font-size:0.75rem; font-weight:600; padding:0.2rem 0.6rem; border-radius: 3px;
    margin-bottom: var(--sp-2);
  }
  .friend-card h3{ font-size:1.15rem; }
  .friend-card p{ margin-top:var(--sp-1); font-size:0.92rem; opacity:0.85; }
  .friend-card .visit{
    display:inline-block; margin-top: var(--sp-2); font-size:0.9rem; font-weight:600;
    border-bottom:1px solid var(--ink); padding-bottom:1px;
  }

  /* ---------- SERVICES ---------- */
  .service{
    background: var(--ink-soft); padding: var(--sp-4) var(--sp-3); border-radius:4px;
  }
  .service h3{ font-size:1.2rem; color: var(--paper); }
  .service p{ margin-top:var(--sp-1); font-size:0.95rem; color: rgba(246,239,227,0.78); }
  .services-cta{ margin-top: var(--sp-5); position:relative; z-index:2; }

  /* ---------- CONTACT ---------- */
  .contact-inner{ position:relative; z-index:2; max-width:34rem; }
  .contact-inner h2{ font-size: clamp(1.9rem, 4vw, 2.8rem); }
  .contact-inner p{ margin-top: var(--sp-2); font-size:1.05rem; opacity:0.85; }
  .contact-email{
    display:inline-block; margin-top: var(--sp-4); font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.8rem); border-bottom: 2px solid var(--coral);
  }
  .socials{ margin-top: var(--sp-4); display:flex; gap: var(--sp-3); font-size:0.9rem; }
  .socials a{ opacity:0.75; }
  .socials a:hover{ opacity:1; }

  /* ---------- FOOTER ---------- */
  footer{
    padding: var(--sp-3) 0; border-top:1px solid var(--paper-line);
    font-size:0.85rem; opacity:0.7;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--sp-1);
  }