:root {
  /* Palette sampled from the supplied Zarin Art brand board */
  --parchment: #F5EFD9;
  --cream: #FBF8EE;
  --deep-teal: #0A4D53;
  --mustard: #C3912E;
  --plaster: #D0A062;
  --persian-green: #1B6554;
  --persian-orange: #D5610A;
  --chinese-rust: #802C00;
  --turquoise: #249B97;
  --ink: #36220D;
  --ink-soft: #6A5948;
  --line: rgba(54,34,13,.20);
  --shadow: 0 22px 50px rgba(54,34,13,.16);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Compatibility aliases used in the layout */
  --paper: var(--parchment);
  --paper-light: var(--cream);
  --paper-warm: var(--plaster);
  --terracotta: var(--persian-orange);
  --terracotta-dark: var(--chinese-rust);
  --saffron: var(--mustard);
  --rose: var(--plaster);
  --indigo: var(--deep-teal);
  --teal-soft: var(--turquoise);
  --olive: var(--persian-green);
  --gold: var(--mustard);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(195,145,46,.10), transparent 28rem),
    radial-gradient(circle at 90% 30%, rgba(36,155,151,.06), transparent 34rem),
    var(--paper-light);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: -1;
  background-image:
    repeating-linear-gradient(0deg, rgba(54,34,13,.045) 0, rgba(54,34,13,.045) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, transparent 1px, transparent 7px);
  mix-blend-mode: multiply;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.shell { width: min(1180px, calc(100% - 42px)); margin-inline: auto; }
.section { padding-block: clamp(76px, 9vw, 136px); }
.skip-link { position: fixed; top: -5rem; left: 1rem; background: white; padding: .7rem 1rem; z-index: 1000; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,239,217,.92);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(10,77,83,.15);
}
.header-inner { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { text-decoration: none; display: grid; grid-template-columns: auto auto; align-items: center; gap: 10px; }
.brand-persian { font-family: var(--serif); font-size: 1.2rem; color: var(--terracotta); border-right: 1px solid var(--line); padding-right: 10px; }
.brand-name { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .13em; text-transform: uppercase; }
.site-nav { display: flex; gap: clamp(18px,3vw,38px); align-items: center; }
.site-nav a { text-decoration: none; font-family: var(--serif); font-size: .98rem; }
.site-nav a:hover { color: var(--terracotta); }
.menu-toggle { display: none; border: 1px solid var(--line); border-radius: 999px; background: transparent; padding: .55rem .9rem; }

.hero { position: relative; overflow: hidden; padding: clamp(58px,8vw,112px) 0 clamp(90px,10vw,150px); }
.hero-pattern { position: absolute; right: -180px; top: -180px; width: 620px; aspect-ratio: 1; opacity: .16; border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 10%, var(--gold) 10.5% 11.5%, transparent 12% 19%, var(--terracotta) 19.5% 20.5%, transparent 21% 29%, var(--indigo) 29.5% 30.5%, transparent 31% 39%, var(--gold) 39.5% 40.5%, transparent 41% 100%);
}
.hero-pattern::before, .hero-pattern::after { content:""; position:absolute; inset: 24%; border: 2px solid var(--terracotta); transform: rotate(45deg); }
.hero-pattern::after { inset: 34%; transform: rotate(22.5deg); border-color: var(--indigo); }
.hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(48px,7vw,100px); position: relative; }
.kicker { margin: 0 0 1rem; color: var(--terracotta); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.kicker-light { color: #F1C76C; }
h1,h2,h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3.4rem,7vw,7rem); max-width: 720px; letter-spacing: -.035em; }
h1 em { color: var(--terracotta); font-weight: 400; }
h2 { font-size: clamp(2.5rem,5vw,5rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.55rem,2.6vw,2.35rem); }
.hero-lede { margin: 2rem 0 0; max-width: 580px; font-family: var(--serif); color: var(--ink-soft); font-size: clamp(1.2rem,2vw,1.55rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 2.25rem; }
.soft-button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:.9rem 1.35rem; border-radius: 999px; background: var(--terracotta); color:#FFF8E8; text-decoration:none; border:1px solid var(--terracotta); box-shadow: 0 8px 18px rgba(128,44,0,.14); transition:.2s ease; cursor:pointer; }
.soft-button:hover { transform: translateY(-2px); background: var(--terracotta-dark); }
.soft-button-outline { background: transparent; color: var(--terracotta-dark); border-color: rgba(128,44,0,.48); box-shadow: none; }
.soft-button-outline:hover { color: white; }
.text-link { font-family: var(--serif); text-decoration: none; border-bottom: 1px solid rgba(54,34,13,.34); padding-bottom: 3px; }
.text-link span { margin-left: 5px; }
.small-note { margin-top: 2.3rem; color: var(--ink-soft); font-size: .8rem; letter-spacing: .06em; }
.hero-art-wrap { position: relative; padding: 28px 30px 40px; }
.hero-art-wrap::before { content:""; position:absolute; inset: 0 18px 20px 0; background: var(--paper-warm); border-radius: 52% 48% 48% 52% / 46% 46% 54% 54%; transform: rotate(-2deg); }
.hero-art { position: relative; margin: 0; overflow: hidden; border: 9px solid #D0A062; box-shadow: var(--shadow); transform: rotate(1.1deg); }
.hero-art img { width:100%; height: clamp(520px,63vw,760px); object-fit: cover; }
.ornament-one { position:absolute; width:110px; height:110px; right:-3px; bottom:-3px; z-index:3; border:2px solid var(--gold); transform: rotate(45deg); opacity:.65; }
.ornament-one::before { content:""; position:absolute; inset:18px; border:2px solid var(--terracotta); transform: rotate(22.5deg); }
.art-caption { position:absolute; left:4px; bottom:2px; background:#F5EFD9; padding:.7rem 1rem; border:1px solid var(--line); font-family:var(--serif); font-style:italic; z-index:3; }
.caption-mark { color:var(--terracotta); margin-right:.5rem; }

.welcome { background: var(--paper); border-top: 1px solid rgba(10,77,83,.12); border-bottom: 1px solid rgba(10,77,83,.12); }
.welcome-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap: clamp(48px,8vw,120px); align-items:center; }
.welcome-quote { background: var(--indigo); color:#F5EFD9; padding: clamp(38px,5vw,72px); position:relative; box-shadow: 14px 14px 0 #C3912E; }
.quote-mark { position:absolute; left:22px; top:0; font-family:var(--serif); font-size:6rem; color:rgba(245,239,217,.22); line-height:1; }
blockquote { margin:0; font-family:var(--serif); font-size:clamp(1.8rem,3.2vw,3.25rem); line-height:1.12; font-style:italic; }
.welcome-copy h2 { max-width: 670px; }
.welcome-copy p:not(.kicker) { max-width:690px; color:var(--ink-soft); font-size:1.05rem; }

.commission-section { background: #F5EFD9; position:relative; overflow:hidden; }
.commission-section::before { content:""; position:absolute; inset:0; opacity:.08; background-image: linear-gradient(45deg,var(--terracotta) 1px,transparent 1px),linear-gradient(-45deg,var(--gold) 1px,transparent 1px); background-size:38px 38px; }
.section-intro { position:relative; max-width:780px; margin-bottom: clamp(42px,6vw,78px); }
.section-intro > p:last-child { max-width:660px; color:var(--ink-soft); font-family:var(--serif); font-size:1.18rem; }
.commission-cards { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.commission-card { min-height:360px; padding: clamp(28px,3.5vw,46px); display:flex; flex-direction:column; border-radius: 48% 52% 7% 7% / 16% 16% 4% 4%; box-shadow: 0 14px 32px rgba(91,54,38,.13); }
.commission-card p { color:rgba(54,34,13,.80); }
.commission-card a { margin-top:auto; text-decoration:none; font-family:var(--serif); border-bottom:1px solid currentColor; align-self:flex-start; }
.card-number { font-family:var(--serif); font-size:.82rem; letter-spacing:.15em; margin-bottom:4rem; }
.card-clay { background:#D0A062; }
.card-saffron { background:#C3912E; transform:translateY(22px); }
.card-rose { background:#1B6554; }

.artworks { background: #F0E2C7; }
.artworks-heading { display:grid; grid-template-columns:1.2fr .65fr; gap:60px; align-items:end; margin-bottom:60px; }
.artworks-note { color:var(--ink-soft); font-size:.9rem; max-width:380px; justify-self:end; }
.art-wall { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,2vw,25px); align-items:start; }
.piece { margin:0; }
.piece button { padding:0; border:0; width:100%; background:transparent; cursor:zoom-in; box-shadow: 0 12px 28px rgba(54,34,13,.13); transition:.22s ease; }
.piece button:hover { transform:translateY(-4px) rotate(.3deg); box-shadow: 0 18px 34px rgba(54,34,13,.18); }
.piece img { width:100%; height:100%; object-fit:cover; }
.piece-a { grid-column:1 / span 5; }
.piece-b { grid-column:7 / span 3; margin-top:70px; }
.piece-c { grid-column:10 / span 3; }
.piece-d { grid-column:2 / span 3; margin-top:26px; }
.piece-e { grid-column:5 / span 4; margin-top:-52px; }
.piece-f { grid-column:9 / span 4; margin-top:30px; }
.piece-a img { aspect-ratio:.76; }
.piece-b img,.piece-c img,.piece-d img { aspect-ratio:.70; }
.piece-e img { aspect-ratio:.78; }
.piece-f img { aspect-ratio:.9; }
.artworks-cta { margin-top:70px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; font-family:var(--serif); }

.story { position:relative; background:#FBF8EE; overflow:hidden; }
.story-pattern { position:absolute; left:-90px; bottom:-120px; width:520px; aspect-ratio:1; opacity:.13; background:repeating-radial-gradient(circle at 50% 50%,var(--teal-soft) 0 2px,transparent 2px 19px); border-radius:50%; }
.story-grid { position:relative; display:grid; grid-template-columns:1fr .92fr; gap:clamp(50px,8vw,110px); align-items:center; }
.story-images { min-height:680px; position:relative; }
.story-main { margin:0; position:absolute; inset:0 22% 0 0; overflow:hidden; border:10px solid #C3912E; box-shadow:var(--shadow); }
.story-main img { width:100%; height:100%; object-fit:cover; }
.story-small { margin:0; position:absolute; right:0; bottom:38px; width:44%; border:8px solid #F5EFD9; box-shadow:0 15px 35px rgba(54,34,13,.20); transform:rotate(2.5deg); }
.story-copy h2 { margin-bottom:1.8rem; }
.story-copy p { color:var(--ink-soft); }
.story-lede { font-family:var(--serif); font-size:1.3rem; color:var(--ink)!important; }

.contact { background:#D5610A; padding-bottom:clamp(70px,8vw,110px); }
.contact-card { background:#0A4D53; color:#F5EFD9; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(42px,7vw,90px); padding:clamp(40px,6vw,80px); border-radius: 100px 18px 100px 18px; box-shadow:0 24px 50px rgba(80,39,29,.22); }
.contact-copy > p:not(.kicker) { color:rgba(245,239,217,.84); max-width:570px; }
.contact-details { display:grid; gap:14px; margin-top:34px; }
.contact-details div { border-top:1px solid rgba(245,239,217,.28); padding-top:12px; display:flex; justify-content:space-between; gap:20px; }
.contact-details span { color:rgba(245,239,217,.66); }
.enquiry-form { display:grid; gap:16px; background:#F5EFD9; color:var(--ink); padding:clamp(28px,4vw,46px); border-radius: 42px 10px 42px 10px; }
.enquiry-form label { display:grid; gap:7px; font-size:.82rem; letter-spacing:.04em; }
.enquiry-form input,.enquiry-form textarea,.enquiry-form select { width:100%; border:0; border-bottom:1px solid rgba(54,34,13,.34); background:rgba(255,255,255,.26); padding:.75rem .2rem; color:var(--ink); outline:none; border-radius:0; }
.enquiry-form textarea { resize:vertical; }
.contact-button { width:max-content; background:var(--terracotta-dark); }
.form-note { margin:0; font-size:.75rem; color:var(--ink-soft); }

.site-footer { background:#0A4D53; color:#F5EFD9; padding:55px 0; }
.footer-inner { display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; align-items:center; }
.footer-brand { display:grid; gap:2px; }
.footer-brand span { color:#C3912E; font-family:var(--serif); font-size:1.25rem; }
.footer-brand strong { font-family:var(--serif); font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase; }
.footer-brand small { color:rgba(245,239,217,.66); }
.footer-phrase { text-align:center; font-family:var(--serif); font-style:italic; color:#D0A062; }
.site-footer nav { display:flex; justify-content:flex-end; gap:18px; flex-wrap:wrap; }
.site-footer nav a { text-decoration:none; font-size:.82rem; }

.lightbox { width:min(92vw,1000px); max-height:92vh; padding:0; border:0; background:#36220D; box-shadow:0 20px 80px rgba(0,0,0,.45); }
.lightbox::backdrop { background:rgba(54,34,13,.84); backdrop-filter:blur(4px); }
.lightbox img { max-height:88vh; width:100%; object-fit:contain; }
.lightbox-close { position:absolute; right:12px; top:10px; z-index:3; width:42px; height:42px; border:0; border-radius:50%; color:white; background:rgba(54,34,13,.78); font-size:1.5rem; cursor:pointer; }

@media (max-width: 900px) {
  .hero-grid,.welcome-grid,.story-grid,.contact-card { grid-template-columns:1fr; }
  .hero-art-wrap { max-width:680px; margin-inline:auto; }
  .commission-cards { grid-template-columns:1fr; }
  .commission-card { min-height:290px; border-radius:40px 40px 12px 12px; }
  .card-saffron { transform:none; }
  .artworks-heading { grid-template-columns:1fr; gap:18px; }
  .artworks-note { justify-self:start; }
  .story-images { min-height:620px; }
  .footer-inner { grid-template-columns:1fr; text-align:center; }
  .site-footer nav { justify-content:center; }
}

@media (max-width: 720px) {
  .shell { width:min(100% - 28px,1180px); }
  .header-inner { min-height:72px; }
  .brand-persian { display:none; }
  .site-nav { display:none; position:absolute; top:72px; left:14px; right:14px; flex-direction:column; align-items:stretch; background:#F5EFD9; padding:16px; border:1px solid var(--line); box-shadow:var(--shadow); }
  .site-nav.open { display:flex; }
  .site-nav a { padding:.6rem .25rem; }
  .menu-toggle { display:block; }
  .hero { padding-top:46px; }
  h1 { font-size:clamp(3rem,14vw,4.7rem); }
  .hero-art-wrap { padding:14px 14px 34px; }
  .hero-art img { height:500px; }
  .art-caption { left:0; }
  .commission-card { padding:30px; }
  .card-number { margin-bottom:2rem; }
  .art-wall { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .piece-a,.piece-b,.piece-c,.piece-d,.piece-e,.piece-f { grid-column:auto; margin-top:0; }
  .piece-e,.piece-f { grid-column:1 / -1; }
  .piece img { aspect-ratio:auto!important; height:100%; max-height:520px; }
  .story-images { min-height:520px; }
  .story-main { right:16%; }
  .story-small { width:46%; bottom:24px; }
  .contact-card { border-radius:52px 12px 52px 12px; padding:28px 20px; }
  .contact-details div { display:grid; }
}

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

/* Brand-board refinements */
.card-rose { color: var(--parchment); }
.card-rose p { color: rgba(245,239,217,.82); }
.card-rose a { color: var(--parchment); }
.card-saffron { color: var(--ink); }
.brand-persian { color: var(--persian-orange); }
.site-nav a:hover { color: var(--persian-orange); }
.kicker { color: var(--chinese-rust); }
h1 em { color: var(--persian-orange); }
.soft-button { background: var(--deep-teal); border-color: var(--deep-teal); color: var(--parchment); }
.soft-button:hover { background: var(--persian-green); }
.soft-button-outline { background: transparent; color: var(--chinese-rust); border-color: var(--chinese-rust); }
.soft-button-outline:hover { background: var(--chinese-rust); color: var(--parchment); }
.welcome-quote { background: var(--deep-teal); box-shadow: 14px 14px 0 var(--mustard); }
.contact { background: var(--persian-orange); }
.contact-card { background: var(--deep-teal); }
.contact-button { background: var(--chinese-rust); border-color: var(--chinese-rust); }
.contact-button:hover { background: var(--persian-green); }
.site-footer { background: var(--deep-teal); }
.footer-brand span { color: var(--mustard); }
.footer-phrase { color: var(--plaster); }