:root {
      --ink: #211c14;
      --paper: #faf7f0;
      --cream: #f1eadd;
      --white: #fffdf8;
      --bronze: #a07e4e;
      --bronze-deep: #7c6238;
      --line: rgba(33,28,20,.14);
      --muted: #6f6656;
      --pad: clamp(20px, 4vw, 64px);
      --serif: "Cormorant Garamond", "Source Serif 4", Georgia, serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: "Archivo", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }
    button, input, select, textarea { font: inherit; }
    img { display: block; max-width: 100%; }
    .skip { position: fixed; left: 12px; top: 12px; z-index: 100; transform: translateY(-180%); background: var(--white); padding: 10px 14px; }
    .skip:focus { transform: translateY(0); }

    .overline {
      margin: 0 0 18px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--bronze-deep);
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 14px var(--pad);
      background: rgba(250,247,240,.94);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--line);
    }
    .nav-note { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
    .nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; }
    .nav-links a { text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
    .nav-links a:hover, .nav-links a:focus-visible { color: var(--bronze-deep); }
    .nav-links a.active { color: var(--bronze-deep); }

    /* ---------- home hero : full-bleed ---------- */
    .hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ink); }
    .hero-visual { position: absolute; inset: 0; margin: 0; }
    .hero-visual img { width: 100%; height: 100%; object-fit: cover; }
    .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,10,.42) 0%, rgba(20,16,10,.28) 40%, rgba(20,16,10,.55) 100%); }
    .hero-copy { position: relative; z-index: 2; text-align: center; padding: 120px var(--pad) 90px; max-width: 1000px; color: var(--white); }
    .hero-copy .overline { color: #e8d9bd; }
    .hero h1 { margin: 0 0 26px; font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 8.5vw, 118px); line-height: 1.02; letter-spacing: .005em; }
    .hero h1 em { font-style: italic; color: #ecd9ae; }
    .hero-sub { margin: 0 auto 38px; max-width: 620px; font-family: var(--serif); font-size: clamp(19px, 2.2vw, 26px); font-style: italic; line-height: 1.4; color: #f3ece0; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 13px 34px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: var(--white);
      text-decoration: none;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      border-radius: 999px;
      transition: background .25s, color .25s, border-color .25s;
    }
    .cta:hover, .cta:focus-visible { background: var(--bronze-deep); border-color: var(--bronze-deep); color: var(--white); }
    .cta.secondary { background: transparent; color: var(--ink); }
    .cta.secondary:hover, .cta.secondary:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); }
    .cta.light { background: var(--white); border-color: var(--white); color: var(--ink); }
    .cta.light:hover, .cta.light:focus-visible { background: transparent; color: var(--white); border-color: var(--white); }
    .cta.light-outline { background: transparent; border-color: rgba(255,255,255,.75); color: var(--white); }
    .cta.light-outline:hover, .cta.light-outline:focus-visible { background: var(--white); color: var(--ink); border-color: var(--white); }

    /* ---------- category cards ---------- */
    .categories { padding: 30px 0 110px; }
    .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.5vw, 34px); padding: 26px var(--pad) 0; }
    .cat-card { position: relative; display: block; overflow: hidden; text-decoration: none; aspect-ratio: 4 / 5; max-height: 78vh; background: var(--cream); }
    .cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.6,.2,1); }
    .cat-card:hover img, .cat-card:focus-visible img { transform: scale(1.045); }
    .cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,10,0) 45%, rgba(20,16,10,.62) 100%); }
    .cat-text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 34px; color: var(--white); display: grid; gap: 8px; }
    .cat-num { font-size: 11px; letter-spacing: .28em; color: #ecd9ae; }
    .cat-name { font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); font-weight: 500; line-height: 1; }
    .cat-desc { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #e9e2d4; }

    section { scroll-margin-top: 70px; }
    .section-head { max-width: 860px; margin: 0 auto; text-align: center; padding: 96px var(--pad) 44px; }
    .section-head h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; letter-spacing: .005em; }
    .section-head p { margin: 0 auto; max-width: 620px; color: var(--muted); font-family: var(--serif); font-size: 20px; font-style: italic; }

    .services { border-bottom: 1px solid var(--line); }
    .service-list { border-top: 1px solid var(--line); }
    .service {
      display: grid;
      grid-template-columns: 64px minmax(180px, .48fr) minmax(0, 1fr);
      gap: 28px;
      align-items: baseline;
      padding: 30px var(--pad);
      border-bottom: 1px solid var(--line);
    }
    .service:last-child { border-bottom: 0; }
    .service .num { color: var(--bronze-deep); font-weight: 700; font-size: 12px; letter-spacing: .2em; }
    .service h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 38px); letter-spacing: .01em; }
    .service p { margin: 0; max-width: 660px; color: var(--muted); font-size: 15px; }

    .work { padding-bottom: 90px; }
    .work .section-head { padding-bottom: 36px; }
    .gallery {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(10px, 1.6vw, 22px);
      padding: 0 var(--pad) 30px;
    }
    .gallery figure { margin: 0; overflow: hidden; background: var(--cream); }
    .gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
    .gallery figure:hover img { transform: scale(1.05); }
    .work-link { display: flex; justify-content: center; padding: 26px var(--pad) 0; }
    .work-link a { font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-underline-offset: 6px; }
    .work-link a:hover, .work-link a:focus-visible { color: var(--bronze-deep); }
    .social-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }

    .about-copy { padding: 0 var(--pad) 10px; max-width: 860px; margin: 0 auto; }
    .about-copy p { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 29px); line-height: 1.42; margin: 0 0 22px; }

    .process { padding-bottom: 96px; border-bottom: 1px solid var(--line); }
    .steps { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
    .step { padding: 38px var(--pad) 50px; border-right: 1px solid var(--line); }
    .step:last-child { border-right: 0; }
    .step span { display: block; color: var(--bronze-deep); font-weight: 700; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 40px; }
    .step h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 500; font-size: 28px; }
    .step p { margin: 0; color: var(--muted); max-width: 380px; }

    .pricing { background: var(--cream); border-bottom: 1px solid var(--line); }
    .pricing-bar { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
    .price-item { padding: 34px var(--pad) 48px; border-right: 1px solid var(--line); }
    .price-item:last-child { border-right: 0; }
    .price-item h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 500; font-size: 26px; }
    .price-item p { margin: 0; font-size: 14px; color: var(--muted); }
    .price-item strong { display: block; margin-top: 22px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-deep); }

    .contact { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 760px; background: var(--white); border-top: 1px solid var(--line); }
    .contact-intro { padding: 90px var(--pad); border-right: 1px solid var(--line); }
    .contact-intro h2 { margin: 0 0 28px; font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6vw, 88px); line-height: 1; letter-spacing: .005em; }
    .contact-intro p { margin: 0 0 28px; max-width: 450px; font-family: var(--serif); font-size: 21px; font-style: italic; color: var(--muted); }
    .contact-intro a { font-weight: 700; text-underline-offset: 4px; overflow-wrap: anywhere; }
    .contact-form { padding: 90px var(--pad); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field.full { grid-column: 1 / -1; }
    label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
    input, select, textarea {
      width: 100%;
      border: 0;
      border-bottom: 1px solid #a89e8c;
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      padding: 13px 0;
      outline: none;
    }
    textarea { min-height: 110px; resize: vertical; }
    input:focus, select:focus, textarea:focus { border-bottom: 2px solid var(--bronze-deep); }
    .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-top: 10px; }
    .form-actions button { cursor: pointer; }
    .form-note { margin: 0; color: var(--muted); font-size: 12px; }
    .status { grid-column: 1 / -1; min-height: 22px; font-size: 13px; font-weight: 700; color: #8d5a17; }

    footer { display: flex; justify-content: space-between; gap: 20px; padding: 30px var(--pad); background: #1d1811; color: #cfc8b8; font-size: 12px; letter-spacing: .06em; }
    footer a { color: var(--white); }

    @media (max-width: 1050px) {
      .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .service { grid-template-columns: 48px minmax(180px,.6fr) 1fr; }
    }
    @media (max-width: 760px) {
      .nav { align-items: flex-start; }
      .nav-note { padding-top: 3px; font-size: 21px; }
      .nav-links { gap: 7px 13px; }
      .nav-links a { font-size: 10px; }
      .hero { min-height: 100svh; }
      .hero-copy { padding: 110px var(--pad) 70px; }
      .cat-grid { grid-template-columns: 1fr; }
      .cat-card { aspect-ratio: 4 / 3; max-height: none; }
      .section-head { padding-top: 70px; }
      .service { grid-template-columns: 34px 1fr; gap: 18px 12px; }
      .service p { grid-column: 2; }
      .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .steps, .pricing-bar { grid-template-columns: 1fr; }
      .step, .price-item { border-right: 0; border-bottom: 1px solid var(--line); }
      .step:last-child, .price-item:last-child { border-bottom: 0; }
      .contact { grid-template-columns: 1fr; }
      .contact-intro { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 60px; }
      .contact-form { padding-top: 60px; }
      .form-grid { grid-template-columns: 1fr; }
      .field.full, .form-actions, .status { grid-column: 1; }
      .form-actions { align-items: flex-start; flex-direction: column; }
      footer { flex-direction: column; }
    }
    @media (max-width: 480px) {
      .nav { position: static; display: block; }
      .nav-note { margin-bottom: 10px; }
      .nav-links { justify-content: flex-start; }
      .hero-actions { align-items: stretch; flex-direction: column; }
      .hero-actions .cta { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

    .nav-links a.active { color: var(--bronze-deep); }
    @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
    body { animation: pageIn .28s ease; }