:root{
  --paper:#fffaf3; --ink:#17345b; --coral:#d95f6f; --teal:#4f8f8a;
  --mustard:#e6b63f; --lav:#b9a8cd; --soft:#f6e7e0; --line:#dfd1c2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.23;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:24px clamp(22px,5vw,72px);position:relative;z-index:10}
.brand{text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-family:Georgia,serif;font-size:1.55rem;line-height:1.05}
.brand small{display:block;color:var(--coral);font:700 .7rem Arial,sans-serif;letter-spacing:.2em;margin-top:10px}
nav{display:flex;gap:32px}
nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--coral)}
.menu-button{display:none}
.hero{min-height:680px;padding:30px clamp(22px,5vw,72px) 70px;display:grid;grid-template-columns:minmax(280px,.78fr) minmax(420px,1.22fr);gap:4vw;align-items:center;position:relative;overflow:hidden}
.hero-copy{z-index:2}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.76rem;color:var(--teal)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:500}
h1{font-size:clamp(3rem,6vw,6.5rem);line-height:.94;margin:.2em 0 .32em}
h1 em{font-style:normal;color:var(--coral)}
.hero-copy>p:not(.eyebrow){max-width:560px;font-size:1.12rem}
.button{display:inline-block;margin-top:18px;padding:14px 22px;background:var(--coral);color:white;text-decoration:none;border-radius:3px;font-weight:700;letter-spacing:.06em}
.hero-art{position:relative;transform:rotate(-1deg)}
.hero-art:before{content:"";position:absolute;inset:-28px;background:#bddbd8;border-radius:48% 52% 45% 55%;z-index:-1;opacity:.7}
.hero-art img{width:100%;height:520px;object-fit:cover;border-radius:48% 52% 44% 56% / 10% 14% 9% 12%;box-shadow:0 18px 40px rgba(23,52,91,.18)}
.paper-label{position:absolute;right:2%;bottom:2%;background:#fffaf3;padding:13px 18px;transform:rotate(1.5deg);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.hero-compass{position:absolute;width:180px;height:180px;object-fit:cover;border-radius:50%;left:48%;bottom:10px;border:8px solid #fffaf3;box-shadow:0 8px 20px rgba(0,0,0,.12);transform:rotate(8deg)}
.section{padding:90px clamp(22px,5vw,72px)}
.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:38px}
.section-heading h2,.about h2,.contact h2{font-size:clamp(2.3rem,4vw,4.8rem);line-height:1;margin:.1em 0}
.section-heading>p{max-width:520px}
.work-section{background:linear-gradient(180deg,#fffaf3,#f8efe7)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work-card{background:#fff;padding:10px 10px 18px;box-shadow:0 10px 28px rgba(23,52,91,.08);transform:rotate(.3deg)}
.work-card:nth-child(even){transform:rotate(-.45deg)}
.work-card.large{grid-column:span 2}
.work-card img{width:100%;height:280px;object-fit:cover}
.work-card.large img{height:430px}
.work-card div{padding:10px 8px 0}
.work-card h3{font-size:1.7rem;margin:.2em 0}
.work-card p{margin:0;color:#4f6176}
.sketchbook{background:#fffdf9}
.sketch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.taped{position:relative;margin:0;background:#fff;padding:12px 12px 18px;box-shadow:0 10px 26px rgba(0,0,0,.1)}
.taped:before{content:"";position:absolute;width:80px;height:24px;background:rgba(217,95,111,.28);top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg)}
.taped img{height:340px;width:100%;object-fit:contain;background:#f5f1eb}
.taped figcaption{padding-top:12px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:70px}
.process div{padding:26px;background:#edf6f2;border-radius:47% 53% 45% 55% / 9% 11% 8% 10%;text-align:center}
.process div:nth-child(2){background:#f9e8e8}.process div:nth-child(3){background:#ece8f4}.process div:nth-child(4){background:#faefc9}
.process span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--coral);color:white;font-weight:700}
.process h3{margin:.6em 0 .2em}
.quote-band{padding:80px clamp(22px,10vw,170px);background:#153a54;color:white;text-align:center}
.quote-band blockquote{font:italic clamp(1.7rem,3vw,3.2rem)/1.25 Georgia,serif;margin:0 auto 20px;max-width:1100px}
.quote-band cite{color:#f2c75c}
.about{display:grid;grid-template-columns:.8fr 1.1fr .65fr;gap:50px;align-items:center}
.about-photo{position:relative}
.about-photo:before{content:"";position:absolute;inset:-16px;background:#f2d9d7;transform:rotate(-3deg);z-index:-1}
.about-photo img{width:100%;max-height:600px;object-fit:cover;object-position:center}
.about-copy p{font-size:1.04rem}
.about-detail{margin:0;transform:rotate(3deg)}
.about-detail img{aspect-ratio:1;object-fit:cover;border-radius:50%;border:10px solid white;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.about-detail figcaption{text-align:center;margin-top:14px}
.clients{padding-top:30px}
.client-list{display:flex;flex-wrap:wrap;gap:12px}
.client-list span{padding:12px 18px;border:1px solid var(--line);background:white;border-radius:999px}
.contact{padding:90px clamp(22px,7vw,110px);background:#dcecea;display:flex;justify-content:space-between;align-items:center;gap:50px}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.contact-links a{font:500 clamp(1.25rem,2vw,2rem) Georgia,serif;text-decoration:none;border-bottom:2px solid var(--coral)}
.contact-links a:hover{color:var(--coral)}
footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(22px,5vw,72px);font-size:.85rem}

@media(max-width:900px){
  nav{display:none;position:absolute;top:100%;right:20px;background:white;padding:20px;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.15)}
  nav.open{display:flex}.menu-button{display:block;background:none;border:1px solid var(--ink);padding:9px 13px}
  .hero{grid-template-columns:1fr;padding-top:10px}.hero-art img{height:420px}.hero-compass{left:auto;right:20px;bottom:15px;width:130px;height:130px}
  .work-grid{grid-template-columns:repeat(2,1fr)}.work-card.large{grid-column:span 2}
  .sketch-grid{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr 1fr}.about-detail{grid-column:1/-1;max-width:320px;justify-self:center}
}
@media(max-width:600px){
  .brand{font-size:1.2rem}.hero{min-height:auto}.hero-art img{height:330px}.hero-compass{display:none}
  .section{padding:65px 20px}.section-heading{display:block}.work-grid,.sketch-grid,.process,.about{grid-template-columns:1fr}
  .work-card.large{grid-column:auto}.work-card img,.work-card.large img{height:280px}
  .contact{display:block;padding:65px 22px}.contact-links{margin-top:30px}.contact-links a{word-break:break-word}
  footer{display:block}footer span{display:block;margin:5px 0}
}
.company-section {
  padding: 70px clamp(22px, 5vw, 72px) 90px;
  text-align: center;
  background: #fffaf3;
}

.company-section h2 {
  max-width: 760px;
  margin: 8px auto 45px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  color: #17345b;
}

.company-logo-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.company-logo {
  min-height: 150px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5d9cc;
  border-radius: 46% 54% 48% 52% / 8% 10% 8% 10%;
  box-shadow: 0 8px 22px rgba(23, 52, 91, 0.08);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.company-logo:nth-child(even) {
  transform: rotate(-1deg);
}

.company-logo:nth-child(odd) {
  transform: rotate(1deg);
}

.company-logo:hover {
  transform: translateY(-5px) rotate(0);
  box-shadow: 0 14px 30px rgba(23, 52, 91, 0.14);
}

.company-logo img {
  display: block;
  width: 100%;
  max-width: 180px;
  max-height: 85px;
  object-fit: contain;
  filter: saturate(0.9);
}

@media (max-width: 950px) {
  .company-logo-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 600px) {
  .company-section {
    padding: 60px 20px;
  }

  .company-logo-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 15px;
  }

  .company-logo {
    min-height: 120px;
    padding: 18px;
  }

  .company-logo img {
    max-height: 65px;
  }
}
.company-logo a {
  width: 100%;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.company-logo a:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 6px;
  border-radius: 8px;
}
/* Header navigation and Instagram */

.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.header-instagram {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.header-instagram:hover {
  color: white;
  background: var(--coral);
  transform: translateY(-2px);
}

.header-instagram:focus-visible,
.contact-instagram:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
}

/* Instagram link beneath contact details */

.contact-instagram {
  gap: 11px;
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 0 !important;
}


.contact-instagram:hover {
  color: var(--coral);
}

/* Mobile header */

@media (max-width: 900px) {
  .header-right {
    gap: 12px;
  }

  .header-right nav {
    right: 65px;
  }

  .header-instagram {
    width: 38px;
    height: 38px;
  }


}
.header-instagram span,
.instagram-symbol {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
}

.contact-instagram .instagram-symbol {
  font-size: 34px;
}
.header-instagram i {
  font-size: 26px;
}
.header-insta {
  color: inherit;
}

.contact-insta {
  font: 500 clamp(1.25rem, 2vw, 2rem) Georgia, serif;
  text-decoration: none;
  border-bottom: 2px solid var(--coral);
}

.contact-insta:hover,
.header-insta:hover {
  color: var(--coral);
}
.contact-instagram i {
  font-size: 32px;
}
/* Final Instagram text-link styling */

.header-instagram {
  width: auto;
  height: auto;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
}

.header-instagram:hover {
  color: inherit;
  background: none;
  transform: none;
  border-bottom: 2px solid var(--coral);
}

.contact-instagram {
  display: inline-block;
  width: auto;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  font: 500 clamp(1.25rem, 2vw, 2rem) Georgia, serif;
  text-decoration: none;
  border-bottom: 2px solid var(--coral) !important;
}

.contact-instagram:hover {
  color: var(--coral);
}