/*
 * Compiled Tailwind CSS — IreneTanarro Portfolio 2026
 * Generated from cdn.tailwindcss.com + inline config.
 * No build step required — link directly.
 */

/* ─── Preflight (minimal reset) ─────────────────────────────── */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif;
  tab-size: 4;
}
body { margin: 0; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; margin: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
blockquote, dl, dd, p, pre, figure { margin: 0; }
fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }

/* Selection */
::selection { background-color: #a03b22; color: #ffffff; }

/* ─── Position ───────────────────────────────────────────────── */
.fixed    { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky   { position: sticky; }

/* ─── Inset / edges ──────────────────────────────────────────── */
.inset-0  { inset: 0px; }
.top-0    { top: 0px; }
.left-0   { left: 0px; }
.right-0  { right: 0px; }
.bottom-0 { bottom: 0px; }
.-bottom-6 { bottom: -1.5rem; }
.-right-6  { right: -1.5rem; }

/* ─── Display ────────────────────────────────────────────────── */
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ─── Flex / Grid ────────────────────────────────────────────── */
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }

.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* ─── Gap ────────────────────────────────────────────────────── */
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }
.gap-24 { gap: 6rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-y-8  { row-gap: 2rem; }

/* ─── Overflow ───────────────────────────────────────────────── */
.overflow-hidden  { overflow: hidden; }
.overflow-y-auto  { overflow-y: auto; }

/* ─── Z-index ────────────────────────────────────────────────── */
.z-10      { z-index: 10; }
.z-\[100\] { z-index: 100; }

/* ─── Width ──────────────────────────────────────────────────── */
.w-0    { width: 0px; }
.w-1    { width: 0.25rem; }
.w-2    { width: 0.5rem; }
.w-6    { width: 1.5rem; }
.w-8    { width: 2rem; }
.w-12   { width: 3rem; }
.w-full { width: 100%; }
.w-auto { width: auto; }

/* ─── Height ─────────────────────────────────────────────────── */
.h-px   { height: 1px; }
.h-1    { height: 0.25rem; }
.h-2    { height: 0.5rem; }
.h-full { height: 100%; }

/* ─── Max-width ──────────────────────────────────────────────── */
.max-w-xs          { max-width: 20rem; }
.max-w-sm          { max-width: 24rem; }
.max-w-xl          { max-width: 36rem; }
.max-w-\[200px\]   { max-width: 200px; }
.max-w-\[1440px\]  { max-width: 1440px; }

/* ─── Margin ─────────────────────────────────────────────────── */
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }
.mt-auto { margin-top: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── Padding ────────────────────────────────────────────────── */
.p-8      { padding: 2rem; }
.px-3     { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-6     { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-10    { padding-left: 2.5rem;  padding-right: 2.5rem; }
.px-12    { padding-left: 3rem;    padding-right: 3rem; }
.py-1\.5  { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-4     { padding-top: 1rem;     padding-bottom: 1rem; }
.py-6     { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
.py-8     { padding-top: 2rem;     padding-bottom: 2rem; }
.py-12    { padding-top: 3rem;     padding-bottom: 3rem; }
.pt-4     { padding-top: 1rem; }
.pt-10    { padding-top: 2.5rem; }
.pt-12    { padding-top: 3rem; }
.pt-20    { padding-top: 5rem; }
.pt-24    { padding-top: 6rem; }
.pb-12    { padding-bottom: 3rem; }
.pb-24    { padding-bottom: 6rem; }
.pr-24    { padding-right: 6rem; }

/* ─── Typography — font families ────────────────────────────── */
.font-headline { font-family: "Newsreader", serif; }
.font-body     { font-family: "Manrope", sans-serif; }
.font-label    { font-family: "Manrope", sans-serif; }

/* ─── Typography — weight / style ───────────────────────────── */
.font-light { font-weight: 300; }
.italic     { font-style: italic; }
.not-italic { font-style: normal; }
.uppercase  { text-transform: uppercase; }

/* ─── Typography — size ──────────────────────────────────────── */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.text-6xl  { font-size: 3.75rem;  line-height: 1; }
.text-7xl  { font-size: 4.5rem;   line-height: 1; }
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[clamp\(3rem\,10vw\,8rem\)\] { font-size: clamp(3rem, 10vw, 8rem); }

/* ─── Typography — tracking ──────────────────────────────────── */
.tracking-tight    { letter-spacing: -0.025em; }
.tracking-tighter  { letter-spacing: -0.05em; }
.tracking-widest   { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }

/* ─── Typography — leading ───────────────────────────────────── */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.1\] { line-height: 1.1; }

/* ─── Typography — alignment ─────────────────────────────────── */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ─── Colors — text ──────────────────────────────────────────── */
.text-on-surface         { color: #1b1c1a; }
.text-on-surface-variant { color: #57423d; }
.text-primary            { color: #a03b22; }
.text-white              { color: #ffffff; }
.text-\[\#1b1c1a\]       { color: #1b1c1a; }
.text-\[\#57423d\]       { color: #57423d; }
.text-on-surface\/10     { color: rgba(27, 28, 26, 0.1); }

/* ─── Colors — background ────────────────────────────────────── */
.bg-background              { background-color: #fbf9f6; }
.bg-surface                 { background-color: #fbf9f6; }
.bg-surface-container       { background-color: #efeeeb; }
.bg-surface-container-low   { background-color: #f5f3f0; }
.bg-surface-container-highest { background-color: #e4e2df; }
.bg-primary                 { background-color: #a03b22; }
.bg-outline-variant         { background-color: #dec0b9; }
.bg-outline-variant\/30     { background-color: rgba(222, 192, 185, 0.9); }
.bg-outline-variant\/90     { background-color: rgba(222, 192, 185, 0.9); }
.bg-\[\#f5f3f0\]            { background-color: #f5f3f0; }
.bg-primary\/20             { background-color: rgba(160, 59, 34, 0.2); }
.bg-primary\/30             { background-color: rgba(160, 59, 34, 0.3); }

/* ─── Border — width ─────────────────────────────────────────── */
.border   { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }

/* ─── Border — color ─────────────────────────────────────────── */
.border-outline-variant\/10 { border-color: rgba(222, 192, 185, 0.1); }
.border-outline-variant\/20 { border-color: rgba(222, 192, 185, 0.2); }
.border-outline-variant\/30 { border-color: rgba(222, 192, 185, 0.3); }
.border-outline-variant\/40 { border-color: rgba(222, 192, 185, 0.4); }

/* ─── Border — radius ────────────────────────────────────────── */
.rounded     { border-radius: 0.25rem; }
.rounded-sm  { border-radius: 0.125rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* ─── Shadow ─────────────────────────────────────────────────── */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* ─── Opacity ────────────────────────────────────────────────── */
.opacity-0  { opacity: 0; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }

/* ─── Aspect ratio ───────────────────────────────────────────── */
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }

/* ─── Object fit ─────────────────────────────────────────────── */
.object-cover { object-fit: cover; }

/* ─── Cursor ─────────────────────────────────────────────────── */
.cursor-default { cursor: default; }

/* ─── Pointer events ─────────────────────────────────────────── */
.pointer-events-none { pointer-events: none; }

/* ─── Whitespace ─────────────────────────────────────────────── */
.whitespace-nowrap { white-space: nowrap; }

/* ─── Transforms ─────────────────────────────────────────────── */
/*
 * transform-gpu uses translate3d(0,0,0) to force GPU layer.
 * CSS custom properties allow group-hover skew to compose cleanly.
 */
.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
             rotate(var(--tw-rotate))
             skewX(var(--tw-skew-x))
             skewY(var(--tw-skew-y))
             scaleX(var(--tw-scale-x))
             scaleY(var(--tw-scale-y));
}

/* ─── Transitions ────────────────────────────────────────────── */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-500  { transition-duration: 500ms; }
.duration-700  { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }
.ease-out    { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ─── Hover state ────────────────────────────────────────────── */
.hover\:opacity-70:hover        { opacity: 0.7; }
.hover\:text-primary:hover      { color: #a03b22; }
.hover\:bg-primary\/85:hover    { background-color: rgba(160, 59, 34, 0.85); }
.hover\:translate-x-0\.5:hover  { transform: translateX(0.125rem); }
.hover\:translate-y-0\.5:hover  { transform: translateY(0.125rem); }

/* ─── Group & group-hover ────────────────────────────────────── */
.group { /* marker class — no styles */ }

.group:hover .group-hover\:w-full        { width: 100%; }
.group:hover .group-hover\:opacity-100   { opacity: 1; }
.group:hover .group-hover\:text-primary  { color: #a03b22; }
.group:hover .group-hover\:text-primary\/20 { color: rgba(160, 59, 34, 0.2); }

/* scale-105: for portrait image (no transform-gpu, simple override) */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* -skew-x-12: for service card numbers and titles (uses transform-gpu) */
.group:hover .group-hover\:-skew-x-12 {
  --tw-skew-x: -12deg;
}

/* translate for material-symbols icons inside buttons */
.group:hover .group-hover\:translate-x-0\.5 {
  transform: translateX(0.125rem);
}
.group:hover .group-hover\:translate-y-0\.5 {
  transform: translateY(0.125rem);
}

/* ─── Responsive: md (≥768px) ────────────────────────────────── */
@media (min-width: 768px) {
  .md\:block        { display: block; }
  .md\:flex-row     { flex-direction: row; }
  .md\:items-end    { align-items: flex-end; }
  .md\:text-right   { text-align: right; }

  .md\:px-12  { padding-left: 3rem;  padding-right: 3rem; }
  .md\:py-12  { padding-top: 3rem;   padding-bottom: 3rem; }
  .md\:pr-12  { padding-right: 3rem; }
  .md\:pl-12  { padding-left: 3rem; }
  .md\:pb-20  { padding-bottom: 5rem; }
  .md\:pb-32  { padding-bottom: 8rem; }
  .md\:pb-48  { padding-bottom: 12rem; }

  .md\:text-5xl { font-size: 3rem;   line-height: 1; }
  .md\:text-7xl { font-size: 4.5rem; line-height: 1; }

  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:col-span-5   { grid-column: span 5 / span 5; }
  .md\:col-span-7   { grid-column: span 7 / span 7; }

  .md\:border-r   { border-right-width: 1px; }
  .md\:border-t-0 { border-top-width: 0px; }

  .md\:w-\[55\%\] { width: 55%; }
  .md\:w-auto     { width: auto; }
  .md\:gap-16     { gap: 4rem; }
}

/* ─── Responsive: lg (≥1024px) ───────────────────────────────── */
@media (min-width: 1024px) {
  .lg\:block        { display: block; }
  .lg\:w-\[45\%\]   { width: 45%; }
}

/* ─── Responsive: xl (≥1280px) ───────────────────────────────── */
@media (min-width: 1280px) {
  .xl\:w-\[38\%\] { width: 38%; }
}

/* ─── Responsive: 2xl (≥1536px) ─────────────────────────────── */
@media (min-width: 1536px) {
  .\32xl\:w-\[32\%\] { width: 32%; }
}