/*!
Theme Name: kain-agency
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kain-agency
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

kain-agency is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	/* font-size is set dynamically via Customizer - see functions.php */
	margin-top: 0 !important;
}

/* Override WordPress admin bar margin */
html.admin-bar {
	margin-top: 0 !important;
}

html.admin-bar .site-header {
	margin-top: 0 !important;
	top: 0 !important;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
	overflow-x: hidden;
	/* zoom and min-height are set dynamically via Customizer - see functions.php */
}

/* Counter-zoom for sections with vh/vw to preserve viewport-based heights */
/* Note: zoom is cumulative, so counter-zoom * scale = 1.0 (original size) */
/* Counter-zoom is set dynamically via Customizer - see functions.php */

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	height: 100%;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
	margin: 0;
	padding: 0;
	/* min-height handled in main body selector with zoom counter */
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* ============================================
   KAIN AGENCY DESIGN SYSTEM - TYPOGRAPHY
   ============================================ */

/* Figma styles: accent color and hover underline bar */
:root {
    /* Colors */
    --ka-accent: #FF740A;
    --ka-footer-bg: #181515;
    --ka-footer-text: #847F7F;
    --ka-footer-heading: #EEE4E4;
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ============================================
       FONT FAMILIES
       ============================================ */
    --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: var(--font-primary);
    --font-heading: var(--font-primary);
    
    /* ============================================
       FONT SIZES (Desktop)
       ============================================ */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md: 1.125rem;    /* 18px */
    --font-size-lg: 1.25rem;     /* 20px */
    --font-size-xl: 1.5rem;      /* 24px */
    --font-size-2xl: 1.875rem;   /* 30px */
    --font-size-3xl: 2.25rem;    /* 36px */
    --font-size-4xl: 3rem;       /* 48px */
    --font-size-5xl: 3.75rem;    /* 60px */
    --font-size-6xl: 4.5rem;     /* 72px */
    
    /* ============================================
       FONT WEIGHTS
       ============================================ */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* ============================================
       LINE HEIGHTS
       ============================================ */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.7;
    
    /* ============================================
       LETTER SPACING
       ============================================ */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.0075em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* ============================================
       TYPOGRAPHY SCALE (Predefined Styles)
       ============================================ */
    /* Display - Largest text */
    --text-display-font-family: var(--font-heading);
    --text-display-font-size: var(--font-size-5xl);
    --text-display-font-weight: var(--font-weight-bold);
    --text-display-line-height: var(--line-height-tight);
    --text-display-letter-spacing: var(--letter-spacing-tight);
    
    /* Hero - Large headings */
    --text-hero-font-family: var(--font-heading);
    --text-hero-font-size: var(--font-size-5xl);
    --text-hero-font-weight: var(--font-weight-bold);
    --text-hero-line-height: var(--line-height-tight);
    --text-hero-letter-spacing: var(--letter-spacing-tight);
    
    /* H1 */
    --text-h1-font-family: var(--font-heading);
    --text-h1-font-size: var(--font-size-4xl);
    --text-h1-font-weight: var(--font-weight-bold);
    --text-h1-line-height: var(--line-height-tight);
    --text-h1-letter-spacing: var(--letter-spacing-tight);
    
    /* H2 */
    --text-h2-font-family: var(--font-heading);
    --text-h2-font-size: var(--font-size-3xl);
    --text-h2-font-weight: var(--font-weight-bold);
    --text-h2-line-height: var(--line-height-snug);
    --text-h2-letter-spacing: var(--letter-spacing-normal);
    
    /* H3 */
    --text-h3-font-family: var(--font-heading);
    --text-h3-font-size: var(--font-size-2xl);
    --text-h3-font-weight: var(--font-weight-semibold);
    --text-h3-line-height: var(--line-height-snug);
    --text-h3-letter-spacing: var(--letter-spacing-normal);
    
    /* H4 */
    --text-h4-font-family: var(--font-heading);
    --text-h4-font-size: var(--font-size-xl);
    --text-h4-font-weight: var(--font-weight-semibold);
    --text-h4-line-height: var(--line-height-normal);
    --text-h4-letter-spacing: var(--letter-spacing-normal);
    
    /* H5 */
    --text-h5-font-family: var(--font-heading);
    --text-h5-font-size: var(--font-size-lg);
    --text-h5-font-weight: var(--font-weight-medium);
    --text-h5-line-height: var(--line-height-normal);
    --text-h5-letter-spacing: var(--letter-spacing-normal);
    
    /* H6 */
    --text-h6-font-family: var(--font-heading);
    --text-h6-font-size: var(--font-size-md);
    --text-h6-font-weight: var(--font-weight-medium);
    --text-h6-line-height: var(--line-height-normal);
    --text-h6-letter-spacing: var(--letter-spacing-normal);
    
    /* Body Large */
    --text-body-lg-font-family: var(--font-body);
    --text-body-lg-font-size: var(--font-size-lg);
    --text-body-lg-font-weight: var(--font-weight-normal);
    --text-body-lg-line-height: var(--line-height-relaxed);
    --text-body-lg-letter-spacing: var(--letter-spacing-normal);
    
    /* Body */
    --text-body-font-family: var(--font-body);
    --text-body-font-size: var(--font-size-base);
    --text-body-font-weight: var(--font-weight-normal);
    --text-body-line-height: var(--line-height-relaxed);
    --text-body-letter-spacing: var(--letter-spacing-normal);
    
    /* Body Small */
    --text-body-sm-font-family: var(--font-body);
    --text-body-sm-font-size: var(--font-size-sm);
    --text-body-sm-font-weight: var(--font-weight-normal);
    --text-body-sm-line-height: var(--line-height-normal);
    --text-body-sm-letter-spacing: var(--letter-spacing-normal);
    
    /* Caption */
    --text-caption-font-family: var(--font-body);
    --text-caption-font-size: var(--font-size-sm);
    --text-caption-font-weight: var(--font-weight-normal);
    --text-caption-line-height: var(--line-height-normal);
    --text-caption-letter-spacing: var(--letter-spacing-wide);
    
    /* Label */
    --text-label-font-family: var(--font-secondary);
    --text-label-font-size: var(--font-size-lg);
    --text-label-font-weight: var(--font-weight-semibold);
    --text-label-line-height: var(--line-height-normal);
    --text-label-letter-spacing: var(--letter-spacing-wide);
}

/* ============================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================ */

/* Font Family Utilities */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }
.font-body { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }

/* Font Size Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }

/* Font Weight Utilities */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* Line Height Utilities */
.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Letter Spacing Utilities */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }

/* Predefined Typography Styles */
.text-display {
    font-family: var(--text-display-font-family);
    font-size: var(--text-display-font-size);
    font-weight: var(--text-display-font-weight);
    line-height: var(--text-display-line-height);
    letter-spacing: var(--text-display-letter-spacing);
}

.text-hero {
    font-family: var(--text-hero-font-family);
    font-size: var(--text-hero-font-size);
    font-weight: var(--text-hero-font-weight);
    line-height: var(--text-hero-line-height);
    letter-spacing: var(--text-hero-letter-spacing);
}

.text-h1 {
    font-family: var(--text-h1-font-family);
    font-size: var(--text-h1-font-size);
    font-weight: var(--text-h1-font-weight);
    line-height: var(--text-h1-line-height);
    letter-spacing: var(--text-h1-letter-spacing);
}

.text-h2 {
    font-family: var(--text-h2-font-family);
    font-size: var(--text-h2-font-size);
    font-weight: var(--text-h2-font-weight);
    line-height: var(--text-h2-line-height);
    letter-spacing: var(--text-h2-letter-spacing);
}

.text-h3 {
    font-family: var(--text-h3-font-family);
    font-size: var(--text-h3-font-size);
    font-weight: var(--text-h3-font-weight);
    line-height: var(--text-h3-line-height);
    letter-spacing: var(--text-h3-letter-spacing);
}

.text-h4 {
    font-family: var(--text-h4-font-family);
    font-size: var(--text-h4-font-size);
    font-weight: var(--text-h4-font-weight);
    line-height: var(--text-h4-line-height);
    letter-spacing: var(--text-h4-letter-spacing);
}

.text-h5 {
    font-family: var(--text-h5-font-family);
    font-size: var(--text-h5-font-size);
    font-weight: var(--text-h5-font-weight);
    line-height: var(--text-h5-line-height);
    letter-spacing: var(--text-h5-letter-spacing);
}

.text-h6 {
    font-family: var(--text-h6-font-family);
    font-size: var(--text-h6-font-size);
    font-weight: var(--text-h6-font-weight);
    line-height: var(--text-h6-line-height);
    letter-spacing: var(--text-h6-letter-spacing);
}

.text-body-lg {
    font-family: var(--text-body-lg-font-family);
    font-size: var(--text-body-lg-font-size);
    font-weight: var(--text-body-lg-font-weight);
    line-height: var(--text-body-lg-line-height);
    letter-spacing: var(--text-body-lg-letter-spacing);
}

.text-body {
    font-family: var(--text-body-font-family);
    font-size: var(--text-body-font-size);
    font-weight: var(--text-body-font-weight);
    line-height: var(--text-body-line-height);
    letter-spacing: var(--text-body-letter-spacing);
}

.text-body-sm {
    font-family: var(--text-body-sm-font-family);
    font-size: var(--text-body-sm-font-size);
    font-weight: var(--text-body-sm-font-weight);
    line-height: var(--text-body-sm-line-height);
    letter-spacing: var(--text-body-sm-letter-spacing);
}

.text-caption {
    font-family: var(--text-caption-font-family);
    font-size: var(--text-caption-font-size);
    font-weight: var(--text-caption-font-weight);
    line-height: var(--text-caption-line-height);
    letter-spacing: var(--text-caption-letter-spacing);
}

.text-label {
    font-family: var(--text-label-font-family);
    font-size: var(--text-label-font-size);
    font-weight: var(--text-label-font-weight);
    line-height: var(--text-label-line-height);
    letter-spacing: var(--text-label-letter-spacing);
}

/* Responsive Typography - Mobile Adjustments */
@media (max-width: 1024px) {
    :root {
        --text-hero-font-size: var(--font-size-4xl);
        --text-h1-font-size: var(--font-size-3xl);
        --text-h2-font-size: var(--font-size-2xl);
        --text-h3-font-size: var(--font-size-xl);
    }
}

@media (max-width: 768px) {
    :root {
        --text-hero-font-size: var(--font-size-3xl);
        --text-h1-font-size: var(--font-size-2xl);
        --text-h2-font-size: var(--font-size-xl);
        --text-h3-font-size: var(--font-size-lg);
        --text-h4-font-size: var(--font-size-md);
    }
}

@media (max-width: 480px) {
    :root {
        --text-hero-font-size: var(--font-size-2xl);
        --text-h1-font-size: var(--font-size-xl);
        --text-h2-font-size: var(--font-size-lg);
        --text-h3-font-size: var(--font-size-md);
    }
}

/* Keyframe Animations */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes underlineExpand {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 54px;
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.site{ width: 100%; max-width: none; margin: 0; padding: 0; }
#page.site{ margin: 0; padding: 0; margin-bottom: 0; padding-bottom: 0; }
#primary.site-main{ width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0; padding-bottom: 0; }
.entry-header, .entry-content, .site-footer, .site-info{ margin-left: 0; margin-right: 0; }
.site-footer{ margin-bottom: 0 !important; padding-bottom: 0 !important; }

.site-header {
    background: #fff;
    display: flex;
    align-items: center;
    min-height: auto; /* Height based on content */
    padding: 32px 80px; /* Based on Figma */
    box-sizing: border-box;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 99998;
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0 !important;
    padding-top: 32px !important;
}

@media (min-width: 768px) {
    .site-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* Shadow menggunakan pseudo-element agar tidak mempengaruhi layout */
.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: -1;
}

.site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ka-accent);
    transition: width 0.3s ease;
    z-index: 1;
}

.site-header .header-inner{
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    flex: 1;
}

.site-branding {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    flex-shrink: 0; /* Prevent shrinking */
    height: 100%;
}

.site-branding .custom-logo {
    width: 168.13px;
    height: 81px;
    max-width: 168.13px;
    max-height: 81px;
    object-fit: contain;
}

/* Hide text branding to match logo-only design */
.site-title,
.site-description { display: none; }

.main-navigation a {
    color: #000000; /* Based on Figma */
    padding: 11px 0; /* Based on Figma - vertical padding untuk height 46px dengan text 24px */
    font-weight: 500; /* Inter Medium from Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    font-family: 'Inter', sans-serif;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.main-navigation a:hover {
    color: var(--ka-accent);
}

@media (min-width: 37.5em) {
    /* Align logo left, nav right on desktop */
    .site-header .site-branding { 
        margin-right: 0; 
        height: 100%;
        display: flex;
        align-items: center;
    }
    .site-header .main-navigation { 
        margin-left: auto; 
        display:flex; 
        align-items:center; 
        width: auto; 
        flex: 0 0 auto;
        height: 100%;
    }
    .site-header .header-inner { gap: 72px; }
    .main-navigation > div > ul {
        display: flex;
        align-items: center;
        gap: 36px; /* Based on Figma - spacing between menu items */
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .main-navigation > div > ul > li > a {
        position: relative;
    }
    .main-navigation > div > ul > li > a:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px; /* Based on Figma */
        background: #FF740A; /* Based on Figma */
        transform: scaleX(0);
        transform-origin: center;
    }
    .main-navigation > div > ul > li:hover > a:after,
    .main-navigation > div > ul > li.focus > a:after {
        transform: scaleX(1);
    }
    .main-navigation > div > ul > li.current-menu-item > a:after {
        transform: scaleX(1); /* Always show for active item - Based on Figma */
    }
    
    /* Contact Button Style - Based on Figma */
    .main-navigation > div > ul > li.menu-item-cta > a {
        background-color: #FF740A; /* Based on Figma */
        color: #F9F7F7; /* Based on Figma */
        border-radius: 50px; /* Based on Figma - pill shape */
        padding: 11px 16px; /* Based on Figma - to achieve 110px width and 46px height */
        width: 110px; /* Based on Figma - fixed width */
        height: 46px; /* Based on Figma - fixed height */
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    
    .main-navigation > div > ul > li.menu-item-cta > a:after {
        display: none; /* Remove underline for button */
    }
    
    .main-navigation > div > ul > li.menu-item-cta > a:hover,
    .main-navigation > div > ul > li.menu-item-cta > a:visited,
    .main-navigation > div > ul > li.menu-item-cta > a:active {
        background-color: #e6660a; /* Darker orange on hover */
        color: #F9F7F7; /* Keep white text on hover */
        box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
    }
}

/* Responsive header paddings */
@media (max-width: 1024px) {
    .site-header {
        padding-left: 32px;
        padding-right: 32px;
        min-height: 88px;
    }
    .site-header .header-inner{ 
        max-width: none; 
        gap: 40px; 
        justify-content: space-between;
    }
    .site-header .site-branding {
        flex: 0 0 auto;
        order: 1;
    }
    .site-header .custom-logo{ 
        width: 168.13px !important; /* Same as footer logo */
        height: 81px !important; /* Same as footer logo */
        max-width: 168.13px;
        max-height: 81px;
    }
    .site-header .main-navigation { 
        flex: 0 0 auto;
        order: 2;
    }
    .main-navigation > div > ul { 
        gap: 24px; 
    }
    .main-navigation a {
        font-size: 18px;
        padding: 0.4rem 0.6rem;
    }
}
/* Tablet specific adjustments */
@media (max-width: 768px) and (min-width: 481px) {
    .site-header .header-inner {
        gap: 32px;
    }
    .main-navigation > div > ul {
        gap: 20px;
    }
    .main-navigation a {
        font-size: 16px;
        padding: 0.3rem 0.5rem;
    }
}

@media (max-width: 767px) {
    .site-header {
        padding: 16px 20px;
        min-height: auto;
        position: sticky;
        top: 0;
        z-index: 99998;
        overflow: visible;
    }
    .site-header .header-inner{ 
        max-width: 100%; 
        width: 100%;
        gap: 12px; 
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
        margin: 0;
        padding: 0;
        min-height: 100%;
    }
    
    /* Ensure logo stays visible */
    .site-branding {
        flex: 0 0 auto;
        order: 1;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    
    .site-branding .custom-logo {
        width: 120px !important;
        height: auto !important;
        max-width: 120px;
        max-height: 32px;
        object-fit: contain;
    }
    
    /* Mobile Navigation - Force to right */
    .main-navigation {
        flex: 0 0 auto;
        order: 2;
        position: relative;
        margin-left: auto;
        margin-right: 0;
        width: auto;
    }
    
    /* Hide horizontal menu on mobile */
    .main-navigation ul {
        display: none;
    }
    
    /* Mobile Hamburger Menu */
    .menu-toggle {
        display: flex;
    align-items: center;
    justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        transition: var(--transition-smooth);
        position: relative;
        z-index: 1001;
        width: 32px;
        height: 32px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 4px;
    }
    
    .menu-toggle:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: scale(1.1);
    }
    
    .menu-toggle:active {
        transform: scale(0.95);
    }
    
    .hamburger {
        display: flex;
        flex-direction: column;
        width: 18px;
        height: 12px;
        justify-content: space-between;
        transition: var(--transition-smooth);
    }
    
    .hamburger-line {
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: var(--transition-smooth);
        transform-origin: center;
        border-radius: 2px;
    }
    
    /* Hamburger Animation - Smooth X */
    .menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
        background-color: var(--ka-accent);
    }
    
    .menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    
    .menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
        background-color: var(--ka-accent);
    }
}

/* Mobile Menu Side Panel - Themify Ultra Style */
.sidemenu {
    transition-property: left, right, top, bottom, width, transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    width: 300px;
    padding: 60px 25px 25px;
    padding-bottom: 25px;
    background-color: #fff;
    color: #000;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: -300px;
    z-index: 999999;
    text-align: left;
    box-shadow: -6px 0 30px 10px rgba(0, 0, 0, 0.15);
    will-change: transform;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

#mobile-menu {
    right: -300px;
    transform: translateX(0);
}

#mobile-menu.sidemenu-on {
    right: 0;
    display: flex;
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Menu Close Button */
#menu-icon-close {
    display: flex;
    position: absolute;
    text-decoration: none;
    top: 10px;
    right: 10px;
    min-width: 1em;
    min-height: 1em;
    transform-origin: center;
    transition: var(--transition-smooth);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-size: 20px;
    color: #000;
    padding: 9px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    animation: scaleIn 0.3s ease-out 0.1s both;
}

#menu-icon-close:hover {
    background: rgba(255, 116, 10, 0.1);
    transform: rotate(90deg) scale(1.1);
}

#menu-icon-close:active {
    transform: rotate(90deg) scale(0.95);
}

#menu-icon-close:before,
#menu-icon-close:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #000;
    transform-origin: center;
}

#menu-icon-close:before {
    transform: rotate(45deg);
}

#menu-icon-close:after {
    transform: rotate(-45deg);
}

/* Mobile Menu Navigation */
#mobile-nav-wrap {
	display: block;
    padding: 0;
    margin: 1em 0 1.5em;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

#mobile-menu-list {
    float: none;
    background-color: transparent;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mobile-menu-list li {
    display: block;
    clear: both;
    padding: 0;
    width: 100%;
    margin: 0;
}

/* Mobile Menu Links */
#mobile-menu-list a {
    width: auto;
    display: block;
    border: none;
    padding: 0.6em 0;
    margin: 0;
    color: #000;
    line-height: 1.5em;
    background: none;
    font-weight: 400;
    text-decoration: none;
    box-shadow: none;
    font-size: 16px;
    transition: var(--transition-smooth);
    position: relative;
    padding-left: 0;
    border-radius: 4px;
    animation: fadeInUp 0.4s ease-out both;
}

#mobile-menu-list li:nth-child(1) a { animation-delay: 0.05s; }
#mobile-menu-list li:nth-child(2) a { animation-delay: 0.1s; }
#mobile-menu-list li:nth-child(3) a { animation-delay: 0.15s; }
#mobile-menu-list li:nth-child(4) a { animation-delay: 0.2s; }
#mobile-menu-list li:nth-child(5) a { animation-delay: 0.25s; }
#mobile-menu-list li:nth-child(6) a { animation-delay: 0.3s; }

#mobile-menu-list a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    width: 3px;
    height: 0;
    background: var(--ka-accent);
    border-radius: 2px;
    transition: var(--transition-smooth);
}

#mobile-menu-list a:hover {
    color: var(--ka-accent);
    transform: translateX(8px);
    padding-left: 8px;
}

#mobile-menu-list .current_page_item > a,
#mobile-menu-list .current-menu-item > a {
    color: var(--ka-accent);
    padding-left: 12px;
    transform: translateX(4px);
}

#mobile-menu-list a:hover::before,
#mobile-menu-list .current_page_item > a::before,
#mobile-menu-list .current-menu-item > a::before {
    transform: translateY(-50%) scaleX(1);
    height: 60%;
}

/* Submenu in Mobile */
#mobile-menu-list li > .sub-menu {
    position: static;
    width: auto;
    height: auto;
    border: none;
    margin: 0 0 0 1em;
    background: none;
    padding: 0;
    display: none;
    opacity: 1;
    transform: none;
    color: inherit;
    box-shadow: none;
    list-style: none;
}

#mobile-menu-list li.toggle-on > .sub-menu {
    display: block;
}

/* Body scroll lock when menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Smooth transitions for all mobile menu elements */
.mobile-menu-container,
.mobile-menu-overlay,
.menu-toggle,
.hamburger-line {
    transition: var(--transition-smooth);
}

/* Focus styles for accessibility */
.menu-toggle:focus {
    outline: 2px solid var(--ka-accent);
    outline-offset: 2px;
}

.mobile-menu a:focus {
    outline: 2px solid var(--ka-accent);
    outline-offset: -2px;
}


/* Desktop: Hide menu toggle and mobile menu, show navigation */
@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
	
	#mobile-menu {
		display: none !important;
	}
}



.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Header logo styling - Based on Figma */
.site-header .custom-logo{
    filter: none;
    opacity: 1;
    width: 168.13px !important; /* Same as footer logo */
    height: 81px !important; /* Same as footer logo */
    object-fit: contain;
    max-width: 168.13px;
    max-height: 81px;
}

/* Footer logo styling */
.site-footer .footer-logo img{
    filter: brightness(0.7) contrast(1.2);
    opacity: 0.8;
}

/* Footer logo text fallback */
.site-footer .footer-logo-text{
    color: #EEE4E4;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.8;
}
.site-footer .footer-logo-text:hover{
    color: #FFF;
    opacity: 1;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Footer (Figma)
--------------------------------------------- */
.site-footer{
    background: #181515;
    color: #847F7F;
    position: relative;
    overflow: hidden;
    min-height: 720px; /* Based on Figma */
    margin-bottom: 0;
    padding-bottom: 0;
}
.site-footer a{ 
    color: #847F7F; 
    text-decoration: none; 
    transition: color 0.3s ease;
}
.site-footer a:hover{ 
    color: #EEE4E4; 
}
.site-footer .footer-inner{
    padding: 80px; /* Based on Figma */
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 16px; /* Based on Figma */
    min-height: 720px; /* Based on Figma */
    box-sizing: border-box;
}

/* Row 1: 3 Columns - Takes up available space */
.site-footer .footer-row-1{
    display: flex;
    flex-direction: row;
    align-self: stretch;
    gap: 64px; /* Based on Figma */
    width: 100%;
}

/* Row 2: Logo and Copyright - Pushed to bottom */
.site-footer .footer-row-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    gap: 16px; /* Based on Figma */
    margin-top: 0;
}
.site-footer .footer-left {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Based on Figma */
    flex: 1;
}

.site-footer .footer-heading{
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 48px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #FFFFFF; /* Based on Figma */
    margin: 0;
}
.site-footer .footer-blurb{ 
    margin: 0; 
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    color: #847F7F; /* Based on Figma */
}
.site-footer .footer-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Based on Figma */
    padding: 16px 24px; /* Reduced horizontal padding for fit content */
    border: 3px solid #FF740A; /* Based on Figma */
    border-radius: 999px; /* Based on Figma */
    color: #FF740A; /* Based on Figma - Secondary button */
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2em; /* Based on Figma */
    transition: all 0.3s ease;
    margin: 0;
    background: transparent;
    width: fit-content; /* Fit content exactly */
    height: auto; /* Hug content - Based on Figma */
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking */
    white-space: nowrap; /* Prevent text wrapping */
}
.site-footer .footer-cta:hover,
.site-footer .footer-cta:visited,
.site-footer .footer-cta:active {
    background: #e6660a;
    color: #F9F7F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
}
.site-footer .footer-logo{ 
    margin: 0;
}
.site-footer .footer-logo-img {
    width: 168.13px; /* Based on Figma */
    height: 81px; /* Based on Figma */
    object-fit: contain;
}
.site-footer .footer-middle{ 
    display: flex; 
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px; /* Based on Figma */
    width: 400px; /* Based on Figma */
    flex-shrink: 0;
}
.site-footer .footer-section {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Based on Figma */
}
.site-footer .footer-section h3{
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #FFFFFF; /* Based on Figma */
}
.site-footer .footer-section p{ 
    margin: 0; 
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #847F7F; /* Based on Figma */
}
.site-footer .footer-right{ 
    display: flex; 
    flex-direction: row;
    gap: 128px; /* Based on Figma */
    align-items: flex-start;
    flex-shrink: 0;
}
.site-footer .footer-right-wrapper {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Based on Figma - gap between Menu and Follow Us */
}
.site-footer .footer-nav {
    display: flex;
    flex-direction: column;
}
.site-footer .footer-nav .footer-menu{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column;
    gap: 16px; /* Based on Figma */
    align-items: flex-start; 
}
.site-footer .footer-nav .footer-menu li{
    margin: 0;
}
.site-footer .footer-nav .footer-menu li a{
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #847F7F; /* Based on Figma */
    transition: color 0.3s ease;
}
.site-footer .footer-nav .footer-menu li a:hover{
    color: #FFFFFF;
}
.site-footer .footer-social-section{
    display: flex;
    flex-direction: column;
    gap: 16px; /* Reduced gap between Follow Us and social icons */
}
.site-footer .footer-follow{ 
    margin: 0; 
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #FFFFFF; /* Based on Figma */
}
.site-footer .footer-social{ 
    display: flex; 
    gap: 16px; /* Based on Figma */
    color: #fff; 
}
.site-footer .footer-social .social{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}
.site-footer .footer-social .social:hover{
    background: #FF740A;
    transform: translateY(-2px);
}
.site-footer .footer-social .social svg{
    width: 24px;
    height: 24px;
}
.site-footer .footer-copyright{
    margin: 0;
}
.site-footer .footer-copyright .copyright{ 
    margin: 0; 
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    color: #847F7F; /* Based on Figma */
    white-space: nowrap;
}

@media (max-width: 1024px){
    .site-footer{
        min-height: auto;
    }
    .site-footer .footer-inner{ 
        padding: 60px 40px; 
        min-height: auto;
        gap: 40px;
    }
    .site-footer .footer-row-1{ 
        flex-direction: column;
        gap: 48px;
    }
    .site-footer .footer-left {
        width: 100%;
    }
    .site-footer .footer-middle {
        width: 100%;
    }
    .site-footer .footer-right{ 
        width: 100%;
        flex-direction: column;
        gap: 40px;
    }
    .site-footer .footer-right-wrapper {
        width: 100%;
        gap: 40px;
    }
    .site-footer .footer-social-section{
        align-items: flex-start;
        gap: 16px;
    }
    .site-footer .footer-row-2{
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }
}
@media (max-width: 767px){
    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        height: 100%;
    }
    
    body {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        /* min-height is set dynamically via Customizer - see functions.php */
    }
    
    #primary.site-main {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .site-footer{
        min-height: auto;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .site-footer .footer-inner{ 
        padding: 40px 20px; 
        padding-bottom: 40px;
        min-height: auto;
        gap: 32px;
        margin-bottom: 0;
    }
    .site-footer .footer-row-1{ 
        flex-direction: column;
        gap: 32px;
    }
    .site-footer .footer-heading{ 
        font-size: 36px; 
    }
    .site-footer .footer-blurb {
        font-size: 18px;
    }
    .site-footer .footer-cta {
        font-size: 18px;
        padding: 14px 20px;
    }
    .site-footer .footer-middle{ 
        width: 100%;
        gap: 24px; 
    }
    .site-footer .footer-section h3 {
        font-size: 20px;
    }
    .site-footer .footer-section p {
        font-size: 18px;
    }
    .site-footer .footer-right {
        width: 100%;
        gap: 32px;
    }
    .site-footer .footer-right-wrapper {
        width: 100%;
        gap: 32px;
    }
    .site-footer .footer-nav .footer-menu li a {
        font-size: 18px;
    }
    .site-footer .footer-follow {
        font-size: 20px;
    }
    .site-footer .footer-social{ 
        gap: 16px; 
    }
    .site-footer .footer-social .social{
        width: 44px;
        height: 44px;
    }
    .site-footer .footer-social .social svg{
        width: 20px;
        height: 20px;
    }
    .site-footer .footer-row-2{
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
    }
    .site-footer .footer-logo {
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    .site-footer .footer-copyright {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .site-footer .footer-copyright .copyright {
        padding-left: 20px;
        padding-right: 20px;
        display: block;
        box-sizing: border-box;
        font-size: 16px;
        max-width: 100%;
        word-wrap: break-word;
        white-space: normal;
    }
}

/* Portfolio Page Styles
--------------------------------------------- */
.portfolio-page-section {
    padding: 80px 80px; /* 80px top/bottom, 80px left/right */
    background-color: #ffffff;
    min-height: 100vh;
    box-sizing: border-box;
}

.portfolio-page-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px; /* Based on Figma */
}

/* Portfolio Header */
.portfolio-page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Based on Figma */
}

.portfolio-page-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #000000;
    margin: 0;
}

.portfolio-page-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 48px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000;
    margin: 0;
    text-align: center;
    width: 900px; /* Based on Figma */
    max-width: 100%;
}

/* Portfolio Controls */
.portfolio-page-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px; /* Based on Figma */
    width: 100%;
    position: relative;
}

.portfolio-filter-wrapper {
    position: relative;
    display: inline-block;
}

.portfolio-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Based on Figma */
    padding: 16px 32px; /* Based on Figma */
    background-color: #FF740A; /* Based on Figma - Primary button */
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2em;
    border: none;
    border-radius: 999px; /* Based on Figma */
    cursor: pointer;
    position: relative;
    z-index: 10000;
    transition: all 0.3s ease;
}

.portfolio-filter-button:hover {
    background-color: #e6660a;
    color: #F9F7F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
}

.portfolio-filter-button svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.portfolio-filter-button.active svg {
    transform: rotate(180deg);
}

.portfolio-breadcrumb {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #858484; /* Based on Figma */
}

/* Filter Dropdown */
.portfolio-filter-dropdown {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    max-width: 300px;
    z-index: 99999;
    box-shadow: none;
    width: max-content;
}

.portfolio-filter-dropdown.active {
    display: flex;
}

.portfolio-filter-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 20px;
    background-color: #FFFFFF;
    color: #FF740A;
    text-decoration: none;
    border: 2px solid #FF740A;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4em;
    transition: all 0.2s ease;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.portfolio-filter-item:visited {
    color: #FF740A;
}

.portfolio-filter-item:hover {
    background-color: #FF740A;
    transform: translateX(4px);
    color: #FFFFFF;
}

.portfolio-filter-item.active {
    background-color: #FF740A;
    color: #FFFFFF;
    border-color: #FF740A;
    transform: translateX(0);
}

.portfolio-filter-item.active:visited {
    color: #FFFFFF;
}

/* Portfolio Grid */
.portfolio-grid-wrapper {
    width: 100%;
}

.portfolio-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolom dengan proporsi sama */
    gap: 40px; /* Based on Figma */
    margin-bottom: 40px; /* Based on Figma */
    width: 100%;
}

.portfolio-row:last-child {
    margin-bottom: 0;
}

.portfolio-item {
    position: relative;
    width: 100%;
    max-width: 100%; /* Fill grid column */
    height: 424px; /* Based on Figma */
    border-radius: 16px; /* Based on Figma */
    overflow: hidden;
    background-color: #f0f0f0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: portfolioItemFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    box-sizing: border-box;
}

.portfolio-item[data-portfolio-item] {
    animation-delay: calc(var(--item-index, 0) * 100ms);
}

@keyframes portfolioItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.portfolio-item:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    transform: translateY(-6px) scale(1.02);
}

.portfolio-item-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item-link:hover {
    transform: translateY(-4px);
}

.portfolio-item-link:active {
    transform: translateY(-2px) scale(0.98);
}

.portfolio-item-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.portfolio-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.portfolio-item:hover .portfolio-item-image img {
    transform: scale(1.12);
}

.portfolio-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 144px; /* Based on Figma */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.portfolio-item:hover .portfolio-item-overlay {
    opacity: 0.7;
}

.portfolio-item-content {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Based on Figma */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover .portfolio-item-content {
    transform: translateY(-4px);
}

.portfolio-item-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 28px; /* Based on Figma */
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0;
}

.portfolio-item-year {
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2em;
    color: #FFFFFF;
}

.portfolio-item-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
}

.portfolio-no-items {
    text-align: center;
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: #858484;
}

.portfolio-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 64px;
    padding: 40px 0;
}

.portfolio-pagination .page-numbers {
    padding: 12px 20px;
    background-color: #f5f5f5;
    color: #000000;
    text-decoration: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
}

.portfolio-pagination .page-numbers:hover,
.portfolio-pagination .page-numbers.current {
    background-color: #FF740A;
    color: #FFFFFF;
}

/* Portfolio Detail Page */
.portfolio-detail-section {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-left: 320px;
    margin-right: 320px;
    background-color: #ffffff;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Desktop & Tablet: Use CSS variable for margin from customizer */
@media (min-width: 769px) {
    .portfolio-detail-section[data-portfolio-margin] {
        margin-left: var(--portfolio-margin, 320px) !important;
        margin-right: var(--portfolio-margin, 320px) !important;
    }
}

.portfolio-detail-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px; /* Based on Figma */
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

.portfolio-detail-breadcrumb {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #858484; /* Based on Figma */
    margin-top: 0;
    margin-bottom: 40px; /* Spacing before content */
}

.portfolio-detail-breadcrumb a {
    color: #858484;
    text-decoration: none;
    transition: color 0.3s ease;
}

.portfolio-detail-breadcrumb a:hover {
    color: #FF740A;
}

.portfolio-detail-header {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Based on Figma */
    width: 904px; /* Based on Figma */
    max-width: 100%;
    margin-bottom: 0;
}

.portfolio-detail-category {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #858484; /* Based on Figma */
}

.portfolio-detail-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 48px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #FF740A; /* Based on Figma */
    margin: 0;
}

.portfolio-detail-excerpt {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #000000;
    text-align: justify;
    margin: 0;
}

.portfolio-detail-excerpt p {
    margin: 0;
    text-align: justify;
}


.portfolio-detail-content {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #000000;
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.portfolio-detail-content p {
    margin: 0 0 24px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* All images in portfolio detail content should have border-radius 16px and be full width */
/* Exception: Images inside flex layout groups are handled separately below */
.portfolio-detail-content > img,
.portfolio-detail-content > .wp-post-image,
.portfolio-detail-content > .attachment-post-thumbnail,
.portfolio-detail-content > figure img,
.portfolio-detail-content > .wp-block-image img {
    border-radius: 16px;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.portfolio-detail-content > figure:not(.wp-block-group.is-layout-flex) {
    margin: 0 0 24px 0;
    width: 100%;
    max-width: 100%;
}

.portfolio-detail-content > .wp-block-image:not(.wp-block-group.is-layout-flex .wp-block-image) {
    margin: 0 0 24px 0;
    width: 100%;
    max-width: 100%;
}

.portfolio-detail-content > .wp-block-image:not(.wp-block-group.is-layout-flex .wp-block-image) img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

.portfolio-detail-content .wp-block-image.alignleft,
.portfolio-detail-content .wp-block-image.alignright,
.portfolio-detail-content figure.alignleft,
.portfolio-detail-content figure.alignright {
    float: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}

.portfolio-detail-content .wp-block-image.aligncenter,
.portfolio-detail-content figure.aligncenter {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
}

.portfolio-detail-content:last-child p:last-child {
    margin-bottom: 0;
}

/* Grid Layout Groups - Images with border radius */
.portfolio-detail-content .wp-block-group.is-layout-grid .wp-block-image img,
.portfolio-detail-content .wp-block-group.is-layout-grid figure.wp-block-image img,
.portfolio-detail-content .wp-block-group:not(.is-layout-flex) .wp-block-image img,
.portfolio-detail-content .wp-block-group:not(.is-layout-flex) figure.wp-block-image img {
    border-radius: 16px;
}

.portfolio-detail-content .wp-block-group.is-layout-grid {
    align-items: stretch;
    display: grid !important;
    grid-template-columns: 2fr 1fr !important; /* Kiri 2 bagian, kanan 1 bagian */
    grid-template-rows: 1fr 1fr !important; /* 2 rows dengan tinggi sama */
    gap: 24px !important; /* Based on Figma */
    min-height: 400px; /* Minimum height untuk konsistensi */
    max-height: 720px !important; /* Maximum height 1440px */
    height: auto; /* Allow content to determine height within max constraint */
    overflow: hidden; /* Prevent content overflow */
}

/* Memastikan grid layout dengan 3 gambar: 1 besar di kiri, 2 kecil di kanan */
.portfolio-detail-content .wp-block-group.is-layout-grid > .wp-block-image:first-child,
.portfolio-detail-content .wp-block-group.is-layout-grid > figure.wp-block-image:first-child {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important; /* Span 2 rows untuk full height */
    height: 100% !important;
    min-height: 0; /* Allow grid to control height */
    overflow: hidden !important;
}

.portfolio-detail-content .wp-block-group.is-layout-grid > .wp-block-image:nth-child(2),
.portfolio-detail-content .wp-block-group.is-layout-grid > figure.wp-block-image:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0; /* Allow grid to control height */
    overflow: hidden !important;
}

.portfolio-detail-content .wp-block-group.is-layout-grid > .wp-block-image:nth-child(3),
.portfolio-detail-content .wp-block-group.is-layout-grid > figure.wp-block-image:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0; /* Allow grid to control height */
    overflow: hidden !important;
}

.portfolio-detail-content .wp-block-group.is-layout-grid .wp-block-image,
.portfolio-detail-content .wp-block-group.is-layout-grid figure.wp-block-image {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch;
    overflow: hidden !important;
    min-height: 0 !important; /* Allow grid to control height */
    max-height: 100% !important; /* Prevent images from exceeding grid cell */
}

.portfolio-detail-content .wp-block-group.is-layout-grid .wp-block-image img,
.portfolio-detail-content .wp-block-group.is-layout-grid figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important; /* Ensure image fills container height */
    max-height: 100% !important; /* Prevent images from exceeding container */
    object-fit: cover !important;
    object-position: center !important; /* Center crop for all images */
    border-radius: 16px;
    display: block;
    aspect-ratio: unset !important;
}

/* Override inline aspect-ratio:1 for grid layout images */
.portfolio-detail-content .wp-block-group.is-layout-grid .wp-block-image img[style*="aspect-ratio"],
.portfolio-detail-content .wp-block-group.is-layout-grid figure.wp-block-image img[style*="aspect-ratio"] {
    aspect-ratio: unset !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important; /* Center crop untuk square images */
}

/* Override inline width/height untuk memastikan grid mengontrol ukuran */
.portfolio-detail-content .wp-block-group.is-layout-grid .wp-block-image img[style*="width"],
.portfolio-detail-content .wp-block-group.is-layout-grid figure.wp-block-image img[style*="width"] {
    width: 100% !important;
}

.portfolio-detail-content .wp-block-group.is-layout-grid .wp-block-image img[style*="height"],
.portfolio-detail-content .wp-block-group.is-layout-grid figure.wp-block-image img[style*="height"] {
    height: 100% !important;
}

/* Responsive: Mobile - Single column layout */
@media (max-width: 768px) {
    .portfolio-detail-content .wp-block-group.is-layout-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        min-height: auto;
    }
    
    .portfolio-detail-content .wp-block-group.is-layout-grid > .wp-block-image:first-child,
    .portfolio-detail-content .wp-block-group.is-layout-grid > figure.wp-block-image:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    .portfolio-detail-content .wp-block-group.is-layout-grid > .wp-block-image:nth-child(2),
    .portfolio-detail-content .wp-block-group.is-layout-grid > figure.wp-block-image:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    .portfolio-detail-content .wp-block-group.is-layout-grid > .wp-block-image:nth-child(3),
    .portfolio-detail-content .wp-block-group.is-layout-grid > figure.wp-block-image:nth-child(3) {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

/* Flex Layout Groups - Images Full Width/Height */
/* Override portfolio-detail-content rules for flex layout groups */
.wp-block-group.is-layout-flex {
    align-items: stretch;
}

.wp-block-group.is-layout-flex .wp-block-image,
.portfolio-detail-content .wp-block-group.is-layout-flex .wp-block-image {
    margin: 0;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    align-self: stretch;
}

.wp-block-group.is-layout-flex .wp-block-image img,
.portfolio-detail-content .wp-block-group.is-layout-flex .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}

.wp-block-group.is-layout-flex figure.wp-block-image,
.portfolio-detail-content .wp-block-group.is-layout-flex figure.wp-block-image {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.wp-block-group.is-layout-flex figure.wp-block-image img,
.portfolio-detail-content .wp-block-group.is-layout-flex figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.portfolio-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Based on Figma */
    width: 100vw;
    max-width: none;
    position: relative;
    left: calc(50% - 50vw);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.portfolio-gallery-item {
    width: 100%;
    border-radius: 0; /* No border radius for full width edge-to-edge images */
    overflow: hidden;
    background-color: #f0f0f0;
}

.portfolio-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0; /* No border radius for full width edge-to-edge images */
}

.portfolio-gallery-item-full {
    height: 720px; /* Based on Figma */
}

.portfolio-gallery-row {
    display: flex;
    flex-direction: row;
    gap: 24px; /* Based on Figma */
}

.portfolio-gallery-section {
    display: flex;
    flex-direction: row;
    gap: 24px; /* Based on Figma */
    align-items: flex-start;
    width: 100%;
}

.portfolio-gallery-item-square {
    width: 720px; /* Based on Figma */
    height: 720px; /* Based on Figma */
    flex-shrink: 0;
}

.portfolio-gallery-column {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Based on Figma */
    flex: 1;
    min-width: 0;
}

.portfolio-gallery-item-half {
    flex: 1;
    height: 348px; /* Based on Figma */
    min-height: 348px;
}

.portfolio-detail-content-final {
    margin-top: 24px;
}

/* Portfolio Related Section (You Might Like) */
.portfolio-related-section {
    padding: 0;
    background-color: #ffffff;
}

.portfolio-related-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.portfolio-related-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
}

.portfolio-related-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0;
}

.portfolio-related-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

.portfolio-related-item {
    display: block;
    width: 656px;
    min-width: 656px;
    max-width: 656px;
    height: 424px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background-color: #f0f0f0;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}

.portfolio-related-item:hover {
    transform: translateY(-4px);
}

.portfolio-related-slider-wrapper {
    position: relative;
    width: 100%;
}

.portfolio-related-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #FF740A;
    color: #FF740A;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.portfolio-related-nav-prev {
    left: 20px;
}

.portfolio-related-nav-next {
    right: 20px;
}

.portfolio-related-nav:hover {
    background-color: #FF740A;
    color: #FFFFFF;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.portfolio-related-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.portfolio-related-nav svg {
    width: 24px;
    height: 24px;
    display: block;
}

.portfolio-related-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.portfolio-related-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.portfolio-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    display: block;
}

.portfolio-related-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 144px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

.portfolio-related-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
}

.portfolio-related-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1;
    width: 360px;
}

.portfolio-related-item-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0;
}

.portfolio-related-item-year {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0;
}

/* Responsive Portfolio Page */
/* Tablet: 768px - 1024px - 2 columns */
@media (max-width: 1024px) and (min-width: 768px) {
    .portfolio-page-section {
        padding: 60px 40px;
    }
    
    .portfolio-detail-section {
        padding-top: 60px;
        padding-bottom: 60px;
        margin-left: 40px !important;
        margin-right: 40px !important;
    }
    
    /* Portfolio Related Section - Tablet */
    .portfolio-related-section {
        padding: 0;
    }
    
    .portfolio-related-container {
        gap: 24px;
    }
    
    .portfolio-related-title {
        font-size: 40px;
    }
    
    .portfolio-related-grid {
        gap: 24px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    
    .portfolio-related-nav {
        width: 44px;
        height: 44px;
    }
    
    .portfolio-related-nav-prev {
        left: 16px;
    }
    
    .portfolio-related-nav-next {
        right: 16px;
    }
    
    .portfolio-related-item {
        width: 500px;
        min-width: 500px;
        max-width: 500px;
        height: 350px;
    }
    
    .portfolio-related-content {
        width: 100%;
        padding: 24px;
    }
    
    .portfolio-page-subtitle {
        font-size: 36px;
    }
    
    /* Tablet: 2 columns layout */
    .portfolio-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
        margin-bottom: 32px;
    }
    
    .portfolio-item {
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: 380px;
    }
}

/* Desktop smaller: 1024px+ but keep 3 columns */
@media (max-width: 1200px) and (min-width: 1025px) {
    .portfolio-row {
        gap: 32px;
    }
    
    .portfolio-item {
        height: 400px;
    }
}

/* General 1024px and below adjustments */
@media (max-width: 1024px) {
    .portfolio-detail-title {
        font-size: 36px;
    }
    
    .portfolio-detail-gallery {
        padding-left: 0;
        padding-right: 0;
    }
    
    .portfolio-gallery-row {
        flex-direction: column;
    }
    
    .portfolio-gallery-section {
        flex-direction: column;
    }
    
    .portfolio-gallery-item-square {
        width: 100%;
        height: 500px;
        max-width: 100%;
    }
    
    .portfolio-gallery-column {
        width: 100%;
    }
    
    .portfolio-gallery-item-half {
        height: 400px;
    }
}

@media (max-width: 767px) {
    .portfolio-page-section {
        padding: 40px 20px;
    }
    
    .portfolio-detail-section {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
    
    .portfolio-detail-gallery {
        padding-left: 0;
        padding-right: 0;
    }
    
    .portfolio-page-container,
    .portfolio-detail-container {
        gap: 40px;
    }
    
    .portfolio-page-title {
        font-size: 20px;
    }
    
    .portfolio-page-subtitle {
        font-size: 28px;
    }
    
    .portfolio-page-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .portfolio-filter-button {
        font-size: 18px;
        padding: 14px 28px;
    }
    
    .portfolio-breadcrumb {
        display: none;
    }
    
    /* Mobile: 1 column layout - stack vertically */
    .portfolio-row {
        display: grid;
        grid-template-columns: 1fr; /* Single column for mobile */
        gap: 24px;
        margin-bottom: 24px;
    }
    
    .portfolio-item {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        margin: 0;
        height: 300px;
        min-height: 300px;
        max-height: 300px;
    }
    
    .portfolio-item-image {
        height: 100%;
        min-height: 100%;
    }
    
    .portfolio-item-image img {
        height: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .portfolio-item-title {
        font-size: 24px;
    }
    
    .portfolio-item-year {
        font-size: 18px;
    }
    
    .portfolio-detail-title {
        font-size: 36px;
    }
    
    .portfolio-detail-category,
    .portfolio-detail-breadcrumb,
    .portfolio-detail-excerpt,
    .portfolio-detail-content {
        font-size: 20px;
    }
    
    .portfolio-gallery-item-full {
        height: 400px;
    }
    
    .portfolio-gallery-section {
        flex-direction: column;
    }
    
    .portfolio-gallery-item-square {
        width: 100%;
        height: 300px;
    }
    
    .portfolio-gallery-column {
        width: 100%;
    }
    
    .portfolio-gallery-item-half {
        height: 300px;
    }
    
    /* Portfolio Related Section - Mobile */
    .portfolio-related-section {
        padding: 0;
    }
    
    .portfolio-related-container {
        gap: 24px;
    }
    
    .portfolio-related-title {
        font-size: 36px;
    }
    
    .portfolio-related-grid {
        flex-direction: row;
        gap: 20px;
        align-items: center;
        flex-wrap: nowrap;
    }
    
    .portfolio-related-nav {
        width: 40px;
        height: 40px;
    }
    
    .portfolio-related-nav svg {
        width: 20px;
        height: 20px;
    }
    
    .portfolio-related-nav-prev {
        left: 12px;
    }
    
    .portfolio-related-nav-next {
        right: 12px;
    }
    
    .portfolio-related-item {
        width: 320px;
        min-width: 320px;
        max-width: 320px;
        height: 300px;
    }
    
    .portfolio-related-content {
        width: 100%;
        padding: 24px;
    }
    
    .portfolio-related-item-title {
        font-size: 24px;
    }
    
    .portfolio-related-item-year {
        font-size: 18px;
    }
}


/* Inside portfolio detail - stay within container, inherit parent padding */


/* For full-width blocks (alignfull), no padding - full width */

/* Ensure inner container also respects full width */

/* Portfolio detail - ensure inner container is full width */

/* Inside portfolio detail section - stay within container, inherit parent padding */

/* Remove alignfull break out for portfolio detail - keep within container */

/* Ensure columns are full width */

/* Override inline styles on columns */

/* Override any inline styles that add padding */

/* Override any inline styles that limit width */

/* Override any inline styles that limit width for inner container */

/* For wide blocks (alignwide), use theme's wide padding */

/* Columns Layout - Frontend */

/* Portfolio detail - ensure columns container uses full width */

/* Ensure columns stretch to full width in alignfull */


/* Left Column - Fixed 720px */

/* Portfolio detail - ensure left column stretches to match right column height */

/* Portfolio detail - ensure left column image fills height */


/* Right Column - Fixed 608px (ratio 720:608) */

/* Override inline styles on columns */

/* Portfolio detail - ensure right column is full width */

/* Ensure images fill their containers */

/* Portfolio detail - ensure images are full width */


/* Images - Frontend */




/* Responsive Block Patterns - Frontend */
/* Tablet: 768px - 1024px - Keep 2 columns but adjust sizes */
@media (max-width: 1024px) and (min-width: 768px) {
    
    
    /* Keep 2 columns on tablet */
    
    
    
    /* Make left column image fill available height */
    
    
    /* Right column images - calculate height to match left */
    /* Left: 100% height, Right: 2 images + gap = should equal left */
    
}

/* Mobile: < 768px - Stack to 1 column */
@media (max-width: 767px) {
    
    
    
    
    
    
    
}


/* Menu Page Hero Section */
.menu-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 858px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.menu-hero-background-video {
    background: none;
    overflow: hidden;
}

.menu-hero-video-iframe,
.menu-hero-video-file {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

.menu-hero-video-iframe {
    pointer-events: none;
    border: none;
}

.menu-hero-video-file {
    pointer-events: none;
}

.menu-hero-video-mute-toggle {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 48px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0;
    margin: 0;
    pointer-events: auto;
}

.menu-hero-video-mute-toggle:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.menu-hero-video-mute-toggle:active {
    transform: scale(0.95);
}

.menu-hero-video-mute-toggle svg {
    width: 24px;
    height: 24px;
    stroke: #000000;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(32, 27, 27, 0.43);
    z-index: 2;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.menu-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    /* Default padding 80px - inline style from customizer will override */
    padding-left: 80px;
    padding-right: 80px;
    animation: fadeInUp 0.8s ease-out;
}

/* Desktop & Tablet: Ensure inline style works - must be after base rule */
@media (min-width: 769px) {
    /* For desktop/tablet, use CSS variable to set padding - this overrides base rule */
    .menu-hero-content[data-hero-padding] {
        /* CSS variable will be set via inline style and JavaScript */
        padding-left: var(--hero-padding, 80px) !important;
        padding-right: var(--hero-padding, 80px) !important;
    }
    
    /* Ensure padding is applied even with inline style */
    .menu-hero-content[style*="padding-left"] {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}


.menu-hero-inner {
    max-width: 1008px;
    margin-left: 0; /* Removed fixed margin - padding from parent will handle spacing */
}

.menu-hero-title {
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #FFF2F2;
    margin: 0 0 40px 0;
    text-align: left;
    animation: fadeInUp 0.8s ease-out 0.2s both;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.menu-hero-copyright {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.0075em;
    color: #F6F6F6;
    margin: 0;
    animation: fadeInUp 0.8s ease-out 0.4s both;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.menu-content {
    padding: 80px 0;
    background: #fff;
}

.menu-content .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive Design for Menu Page */
/* Note: Padding is controlled by inline style from customizer */
/* Base rule sets default 80px, but inline style will override */

/* Tablet Large: Only apply fallback if no inline style */
@media (max-width: 1440px) and (min-width: 1025px) {
    .menu-hero-content:not([style*="padding-left"]) {
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .menu-hero-inner {
        margin-left: 0; /* Removed fixed margin - padding from parent will handle spacing */
        max-width: 900px;
    }
}

@media (max-width: 1024px) {
    .menu-hero-section {
        min-height: 700px;
    }
    
    .menu-hero-video-iframe,
    .menu-hero-video-file {
        width: 100vw;
        height: 100vh;
    }
    
    .menu-hero-video-mute-toggle {
        bottom: 30px;
        right: 30px;
        width: 44px;
        height: 44px;
    }
    
    .menu-hero-video-mute-toggle svg {
        width: 20px;
        height: 20px;
    }
    
    /* Only apply if no inline style - inline style has higher priority */
    .menu-hero-content:not([style*="padding-left"]) {
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .menu-hero-inner {
        margin-left: 0;
        max-width: 100%;
    }
    
    .menu-hero-title {
        font-size: 48px;
        margin-bottom: 32px;
    }
    
    .menu-hero-copyright {
        font-size: 18px;
    }
}

/* Desktop & Tablet: Inline style should work naturally */
/* Note: Inline style has highest CSS priority, but mobile !important can override */
/* Solution: Ensure mobile rules only apply to mobile screens */

@media (max-width: 768px) {
    .menu-hero-section {
        min-height: 600px;
        align-items: flex-start;
        padding-top: 120px;
    }
    
    .menu-hero-video-mute-toggle {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    
    .menu-hero-video-mute-toggle svg {
        width: 18px;
        height: 18px;
    }
    
    /* Mobile: Force smaller padding for better UX - override inline style */
    .menu-hero-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Remove inline style priority for mobile */
    .menu-hero-content[style*="padding-left"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .menu-hero-inner {
        margin-left: 0;
        max-width: 100%;
    }
    
    .menu-hero-title {
        font-size: 36px;
        line-height: 1.3;
        margin-bottom: 24px;
    }
    
    .menu-hero-copyright {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .menu-hero-section {
        min-height: 500px;
        padding-top: 100px;
    }
    
    /* Mobile: Force smaller padding for better UX - override inline style */
    .menu-hero-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Remove inline style priority for mobile */
    .menu-hero-content[style*="padding-left"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .menu-hero-title {
        font-size: 28px;
        line-height: 1.4;
        margin-bottom: 20px;
    }
    
    .menu-hero-copyright {
        font-size: 14px;
    }
}

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Introduction Section - Based on Figma Design */
.introduction-section {
    padding: 128px 80px;
    background-color: #ffffff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.introduction-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
}

.introduction-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 1110.5px;
    height: 431px;
    margin: 0 auto;
}

/* Decorative Rectangle - Based on Figma */
.introduction-decoration {
    position: absolute;
    left: 0;
    top: 0;
    width: 259px;
    height: 260px;
    background-color: #D9D9D9;
    border-radius: 26px;
    z-index: 1;
}

.introduction-text {
    position: absolute;
    left: 200.5px;
    top: 140px;
    width: 910px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    z-index: 2;
}

.introduction-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
    text-align: left;
}

.introduction-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
    text-align: left;
}

.introduction-cta {
    position: relative;
    display: block;
    margin: 0;
    z-index: 2;
    width: fit-content;
}

.introduction-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Based on Figma */
    padding: 16px 32px; /* Based on Figma */
    background-color: #FF740A; /* Based on Figma */
    color: #FFFFFF; /* Based on Figma */
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    text-decoration: none;
    border-radius: 999px; /* Based on Figma - fully rounded */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.introduction-cta-button:hover,
.introduction-cta-button:visited,
.introduction-cta-button:active {
    background-color: #e6660a;
    color: #F9F7F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
}

.introduction-cta-button:active {
    transform: translateY(0);
}

/* Introduction Section Responsive - Based on Figma */
@media (max-width: 1440px) {
    .introduction-section {
        padding: 128px 40px;
    }
    
    .introduction-content {
        width: 100%;
        max-width: 1110.5px;
        height: auto;
        min-height: 431px;
    }
    
    .introduction-text {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 910px;
        margin-left: 200.5px;
    }
}

@media (max-width: 1200px) {
    .introduction-content {
        width: 100%;
        max-width: 100%;
    }
    
    .introduction-decoration {
        width: 200px;
        height: 200px;
    }
    
    .introduction-text {
        margin-left: 150px;
        max-width: calc(100% - 150px);
    }
    
    .introduction-title {
        font-size: 42px;
    }
    
    .introduction-subtitle {
        font-size: 22px;
    }
}

@media (max-width: 1024px) {
    .introduction-section {
        padding: 100px 32px;
    }
    
    .introduction-text {
        margin-left: 120px;
        max-width: calc(100% - 120px);
    }
    
    .introduction-decoration {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .introduction-section {
        padding: 80px 20px;
    }
    
    .introduction-content {
        height: auto;
        min-height: auto;
    }
    
    .introduction-decoration {
        width: 150px;
        height: 150px;
        border-radius: 20px;
    }
    
    .introduction-text {
        position: relative;
        margin-left: 100px;
        margin-top: 20px;
        max-width: calc(100% - 100px);
    }
    
    .introduction-title {
        font-size: 32px;
        line-height: 1.2;
    }
    
    .introduction-subtitle {
        font-size: 18px;
        line-height: 1.2;
    }
    
    .introduction-cta-button {
        font-size: 18px;
        padding: 14px 28px;
        width: fit-content;
    }
}

@media (max-width: 480px) {
    .introduction-section {
        padding: 60px 20px;
    }
    
    .introduction-decoration {
        width: 100px;
        height: 100px;
        border-radius: 15px;
    }
    
    .introduction-text {
        margin-left: 50px;
        max-width: calc(100% - 50px);
    }
    
    .introduction-title {
        font-size: 28px;
    }
    
    .introduction-subtitle {
        font-size: 16px;
    }
    
    .introduction-cta-button {
        font-size: 16px;
        padding: 12px 24px;
        width: fit-content;
    }
}

/* Our Services Section - Based on Figma */
.services-section {
    padding: 80px; /* Based on Figma */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px; /* Based on Figma - gap between title and content */
}

.services-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px; /* Based on Figma */
}

.services-header {
    text-align: center;
    margin: 0;
    width: 1140px; /* Fixed width from Figma */
    max-width: 1140px;
}

.services-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000;
    margin: 0;
    text-align: center; /* Based on Figma */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px; /* Based on Figma */
    width: 100%;
    align-items: stretch;
}

.service-card {
    position: relative;
    min-height: 547px;
    border-radius: 16px; /* Based on Figma */
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Based on Figma */
    padding: 32px; /* Based on Figma */
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.service-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-image,
.service-card:hover .service-image img {
    transform: scale(1.1);
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Based on Figma: Dark gradient overlay for better white text readability */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through - best practice */
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.service-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Based on Figma */
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-content {
    transform: translateY(-4px);
}

.service-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #FFFFFF; /* Based on Figma - can vary per card */
    margin: 0;
    text-align: left; /* Based on Figma */
}

.service-description {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: #FFFFFF; /* Based on Figma - can vary per card */
    margin: 0;
    min-height: 168px; /* Fixed height from Figma */
    text-align: left; /* Based on Figma */
}

/* Disable hover effects on mobile for better performance */
@media (max-width: 768px) {
    .service-card:hover,
    .about-service-card:hover {
        transform: none;
        box-shadow: none;
    }
    
    .service-card:hover .service-image,
    .service-card:hover .service-image img,
    .about-service-card:hover .about-service-image,
    .about-service-card:hover .about-service-image img {
        transform: none;
    }
    
    .service-card:hover .service-content,
    .about-service-card:hover .about-service-content {
        transform: none;
    }
    
    .service-card:hover .service-overlay,
    .about-service-card:hover .about-service-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.5) 100%
        );
    }
}

/* Services Section Responsive - Based on Figma */
@media (max-width: 1440px) {
    .services-section {
        padding: 80px 60px;
    }
    
    .services-header {
        width: 100%;
        max-width: 1140px;
    }
}

@media (max-width: 1200px) {
    .services-section {
        padding: 80px 50px;
        gap: 48px;
    }
    
    .services-container {
        gap: 48px;
    }
    
    .services-header {
        width: 100%;
        max-width: 100%;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .service-card {
        min-height: 400px;
    }
    
    .services-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 60px 30px;
        gap: 40px;
    }
    
    .services-container {
        gap: 40px;
    }
    
    .services-header {
        width: 100%;
        max-width: 100%;
    }
    
    .services-title {
        font-size: 32px;
        line-height: 1.2;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .service-card {
        min-height: 350px;
        padding: 24px;
    }
    
    .service-title {
        font-size: 24px;
    }
    
    .service-description {
        font-size: 18px;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: 40px 20px;
        gap: 32px;
    }
    
    .services-container {
        gap: 32px;
    }
    
    .services-title {
        font-size: 28px;
    }
    
    .service-card {
        min-height: 300px;
        padding: 20px;
    }
    
    .service-title {
        font-size: 22px;
    }
    
    .service-description {
        font-size: 16px;
        min-height: auto;
    }
}

/* Contact Page Styles - Based on Figma */
.contact-page-section {
    padding: 128px 80px; /* Based on Figma */
    background-color: #ffffff; /* Based on Figma */
    min-height: auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.contact-page-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.contact-page-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Based on Figma */
    gap: 64px; /* Based on Figma */
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.contact-message {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Based on Figma */
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Based on Figma */
    gap: 64px; /* Based on Figma */
    width: 688px; /* Based on Figma */
    max-width: 100%;
    min-width: 0;
    min-height: 512px; /* Based on Figma */
    flex-shrink: 1;
    box-sizing: border-box;
}

/* Left Column: Contact Message - Based on Figma */
.contact-message {
    padding: 0;
}

.contact-main-title {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #000000; /* Based on Figma */
    margin: 0;
}

.contact-main-description {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 600; /* Based on Figma */
    font-size: 80px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    width: 100%;
    max-width: 682px; /* Based on Figma */
    box-sizing: border-box;
    word-wrap: break-word;
}

/* Right Column: Contact Information - Based on Figma */
.contact-info {
    padding: 0;
    margin: 0;
}

/* Reach Us Section - Based on Figma */
.contact-reach-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Based on Figma */
    gap: 32px; /* Based on Figma */
    align-items: flex-start;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.contact-section-title {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 600; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #000000; /* Based on Figma */
    margin: 0;
    width: 200px; /* Based on Figma */
    max-width: 100%;
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Based on Figma */
    width: 320px; /* Based on Figma */
    max-width: 100%;
    min-width: 0;
    flex: 1;
    box-sizing: border-box;
}

.contact-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Based on Figma - gap between multiple values in same wrapper */
}

.contact-value {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #847F7F; /* Based on Figma */
    margin: 0;
}

.contact-separator {
    width: 100%;
    height: 1px;
    background-color: #CCCCCC; /* Based on Figma */
    margin: 0;
    border: none;
}

/* Collaboration Section - Based on Figma */
.contact-collaboration-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Based on Figma */
    gap: 32px; /* Based on Figma */
    align-items: flex-start;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.contact-collaboration-title {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 600; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #000000; /* Based on Figma */
    margin: 0;
    width: 200px; /* Based on Figma */
    max-width: 100%;
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
}

.contact-collaboration-content {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Based on Figma */
    width: 320px; /* Based on Figma */
    max-width: 100%;
    min-width: 0;
    flex: 1;
    box-sizing: border-box;
}

.contact-collaboration-text {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #847F7F; /* Based on Figma */
    margin: 0;
}

.contact-cta {
    margin: 0;
}

.contact-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Based on Figma */
    background-color: #FF740A; /* Based on Figma */
    color: #FFFFFF; /* Based on Figma */
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 500; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    padding: 16px 32px; /* Based on Figma */
    border-radius: 999px; /* Based on Figma - fully rounded */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.contact-cta-button:hover,
.contact-cta-button:visited,
.contact-cta-button:active {
    background-color: #e6660a;
    color: #F9F7F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
}

/* Contact Form Section (Additional) */
.contact-form-section {
    padding: 128px 240px;
    background-color: #ffffff;
}

.contact-form-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

.contact-form-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
    width: 100%;
}

.contact-form-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    max-width: 682px;
}

.contact-form-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    color: #000000;
    margin: 0;
}

.contact-form-description {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 80px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
    width: 682px;
}

.contact-form-wrapper {
    width: 688px;
    flex-shrink: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form-field label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
}

.contact-form-field .required {
    color: #FF740A;
}

.contact-form-field input,
.contact-form-field textarea {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #847F7F;
    padding: 16px;
    border: 1px solid #CCCCCC;
    border-radius: 16px;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
    color: #847F7F;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
    outline: none;
    border-color: #FF740A;
}

.contact-form-field textarea {
    resize: vertical;
    min-height: 200px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.contact-form-message {
    padding: 16px 20px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.contact-form-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.contact-form-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contact-form-submit {
    margin-top: 8px;
}

.contact-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #FF740A;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    padding: 16px 32px;
    border-radius: 999px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
}

.contact-form-button:hover:not(:disabled) {
    background-color: #e6660a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
}

.contact-form-button:active:not(:disabled) {
    transform: translateY(0);
}

.contact-form-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contact-form-button.button-loading-state {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.contact-form-button.button-loading-state::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #FFFFFF;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.button-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.button-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #FFFFFF;
    animation: spin 0.8s linear infinite;
}

/* Contact Form Section Responsive */
@media (max-width: 1440px) {
    .contact-form-section {
        padding: 128px 120px;
    }
    
    .contact-form-content {
        gap: 48px;
    }
    
    .contact-form-description {
        font-size: 64px;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 1200px) {
    .contact-form-section {
        padding: 100px 80px;
    }
    
    .contact-form-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
    }
    
    .contact-form-header {
        max-width: 100%;
        width: 100%;
    }
    
    .contact-form-description {
        font-size: 56px;
        width: 100%;
    }
    
    .contact-form-wrapper {
        width: 100%;
        max-width: 688px;
    }
}

@media (max-width: 1200px) {
    .contact-page-section {
        padding: 100px 50px;
    }
    
    .contact-form-section {
        padding: 100px 50px;
    }
    
    .contact-form-title {
        font-size: 40px;
    }
    
    .contact-page-content {
        gap: 48px;
    }
    
    .contact-main-description {
        font-size: 64px;
        width: 100%;
        max-width: 100%;
    }
    
    .contact-info {
        width: 100%;
        max-width: 100%;
        min-height: auto;
    }
    
    .contact-section-title,
    .contact-collaboration-title {
        width: 180px;
        max-width: 100%;
    }
    
    .contact-details,
    .contact-collaboration-content {
        width: 100%;
        max-width: 100%;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .contact-form-section {
        padding: 80px 40px;
    }
    
    .contact-form-content {
        gap: 32px;
    }
    
    .contact-form-title {
        font-size: 20px;
    }
    
    .contact-form-description {
        font-size: 40px;
    }
    
    .contact-form-field label {
        font-size: 18px;
    }
    
    .contact-form-field input,
    .contact-form-field textarea {
        font-size: 16px;
        padding: 12px;
    }
    
    .contact-form-button {
        font-size: 18px;
        padding: 14px 28px;
    }
    
    .contact-form-field input,
    .contact-form-field textarea {
        font-size: 16px;
        padding: 10px 14px;
    }
    
    .contact-form-button {
        font-size: 18px;
        padding: 14px 28px;
    }
    
    .contact-page-content {
        flex-direction: column;
        gap: 60px;
    }
    
    .contact-main-description {
        font-size: 48px;
        width: 100%;
    }
    
    .contact-info {
        width: 100%;
        min-height: auto;
        justify-content: flex-start;
        gap: 48px;
    }
    
    .contact-reach-section,
    .contact-collaboration-section {
        flex-direction: column;
        gap: 24px;
    }
    
    .contact-section-title,
    .contact-collaboration-title {
        width: 100%;
        font-size: 22px;
    }
    
    .contact-details,
    .contact-collaboration-content {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contact-page-section {
        padding: 60px 20px;
    }
    
    .contact-page-content {
        gap: 40px;
    }
    
    .contact-main-title {
        font-size: 20px;
    }
    
    .contact-main-description {
        font-size: 36px;
    }
    
    .contact-info {
        gap: 32px;
    }
    
    .contact-section-title,
    .contact-collaboration-title {
        font-size: 20px;
    }
    
    .contact-value,
    .contact-collaboration-text {
        font-size: 18px;
    }
    
    .contact-cta-button {
        font-size: 18px;
        padding: 14px 28px;
    }
}

/* Portfolio Section Styles - Redesigned based on Figma */
.portfolio-section {
    padding: 80px; /* Based on Figma - same as other sections */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px; /* Based on Figma - gap between header and content */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 80vh; /* Ensure section takes at least 80% of viewport height */
}

.portfolio-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px; /* Based on Figma */
}

.portfolio-header {
    display: flex;
    flex-direction: row;
    gap: 16px; /* Based on Figma */
    align-items: stretch;
    width: 100%;
    max-width: 100%;
}

.portfolio-title {
    flex: 0 0 calc(50% - 8px); /* 50% minus half of gap */
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 48px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-description {
    flex: 0 0 calc(50% - 8px); /* 50% minus half of gap */
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000;
    margin: 0;
}

.portfolio-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1760 / 830;
    border-radius: 16px; /* Based on Figma */
    overflow: hidden;
    background-color: #f0f0f0;
    margin: 0 auto;
}

.portfolio-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.08) translateY(10px);
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    will-change: opacity, transform;
}

.portfolio-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    z-index: 1;
}

.portfolio-slide .portfolio-image img {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-slide.active .portfolio-image img {
    transform: scale(1);
}

.portfolio-slide:not(.active) .portfolio-image img {
    transform: scale(1.1);
}

.portfolio-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    display: block;
}

.portfolio-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Gradient overlay dengan proporsi tinggi 144:650 (updated from 144:536) */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    height: 174px; /* Updated proportion: ~27% of 650px height */
    z-index: 1;
}

.portfolio-featured-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 32px; /* Increased from 28px for better visibility */
    line-height: 1.2;
    color: #FFF7F7; /* Based on Figma */
    margin: 0;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 98px; /* Based on Figma: y: 438, height: 536, so bottom = 536 - 438 = 98px */
    width: auto;
    max-width: 90%; /* Allow more width for full text */
    z-index: 3;
    white-space: nowrap;
}

.portfolio-featured-title a {
    color: #FFF7F7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.portfolio-featured-title a:hover {
    color: #FFFFFF;
}

/* Carousel Indicators - Based on Figma */
.portfolio-indicators {
    position: absolute;
    bottom: 40px; /* Based on Figma: y: 496, height: 536, so bottom = 536 - 496 = 40px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px; /* Based on Figma */
    z-index: 4;
    align-items: center;
    justify-content: center;
}

.portfolio-indicator {
    width: 48px; /* Based on Figma */
    height: 8px; /* Based on Figma */
    border-radius: 4px; /* Pill shape: half of height for perfect pill */
    border: none;
    background: #D9D9D9; /* Based on Figma - unselected state */
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: block;
    box-sizing: border-box;
}

.portfolio-indicator.active {
    background: #FFFFFF; /* Based on Figma - active/selected state */
}

.portfolio-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

.portfolio-indicator.active:hover {
    background: #FFFFFF;
}

/* Explore Portfolio Link - Based on Figma */
.portfolio-explore-link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
}

.portfolio-explore-link-inner {
    display: flex;
    align-items: center;
    gap: 25px; /* Based on Figma: arrow starts at x:212, text ends at ~187px, so gap = 212 - 187 = 25px */
    text-decoration: none;
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: -0.02em; /* -2% from Figma */
    height: 24px; /* Based on Figma */
}

.portfolio-explore-link-inner:link,
.portfolio-explore-link-inner:visited,
.portfolio-explore-link-inner:hover,
.portfolio-explore-link-inner:active {
    color: #000000;
}

.portfolio-explore-text {
    white-space: nowrap;
}

.portfolio-explore-arrow {
    flex-shrink: 0;
    width: 144px; /* Based on Figma */
    height: 24px; /* Based on Figma - matches text height */
    display: block;
}

.portfolio-explore-link-inner:hover .portfolio-explore-arrow path {
    stroke: #e6660a; /* Darker orange on hover */
}

/* Portfolio Section Responsive - Based on Figma */
@media (max-width: 1024px) {
    .portfolio-section {
        padding: 80px 40px;
    }
    
    .portfolio-title {
        font-size: 40px;
    }
    
    .portfolio-description {
        font-size: 18px;
    }
    
    .portfolio-content {
        aspect-ratio: 1760 / 830;
        max-width: 100%;
    }
    
    .portfolio-overlay {
        height: 174px;
    }
    
    .portfolio-explore-link-inner {
        font-size: 18px;
    }
    
    .portfolio-explore-arrow {
        width: 120px;
    }
}

@media (max-width: 768px) {
    .portfolio-section {
        padding: 60px 20px;
        min-height: 70vh; /* Slightly smaller on mobile for better fit */
    }
    
    .portfolio-container {
        gap: 24px;
    }
    
    .portfolio-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .portfolio-title {
        font-size: 32px;
        min-width: auto;
    }
    
    .portfolio-description {
        font-size: 16px;
    }
    
    .portfolio-content {
        aspect-ratio: 1760 / 830;
        border-radius: 12px;
    }
    
    .portfolio-explore-link-inner {
        font-size: 16px;
        gap: 20px;
    }
    
    .portfolio-explore-arrow {
        width: 100px;
        height: 20px;
    }
    
    .portfolio-overlay {
        /* Proporsi updated: ~27% of content height */
        height: calc(480px * 0.27); /* ~129.6px, proportional to new height */
    }
    
    .portfolio-featured-title {
        left: 50%;
        transform: translateX(-50%);
        bottom: 60px;
        font-size: 20px;
        width: auto;
        max-width: 90%;
        padding: 0 20px;
        text-align: center;
        white-space: nowrap;
    }
    
    .portfolio-indicators {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
    }
    
    .portfolio-indicator {
        width: 36px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .portfolio-section {
        padding: 40px 20px;
        min-height: 60vh; /* Smaller on very small screens */
    }
    
    .portfolio-container {
        gap: 20px;
    }
    
    .portfolio-title {
        font-size: 28px;
    }
    
    .portfolio-description {
        font-size: 14px;
    }
    
    .portfolio-content {
        aspect-ratio: 1760 / 830;
    }
    
    .portfolio-overlay {
        height: 174px;
    }
    
    .portfolio-featured-title {
        bottom: 40px;
        font-size: 18px;
        padding: 0 15px;
    }
    
    .portfolio-indicators {
        bottom: 15px;
    }
    
    .portfolio-indicator {
        width: 30px;
        height: 5px;
    }
}

/* Partners Section Styles - Based on Figma */
.partners-section {
    padding: 80px; /* Based on Figma */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 128px; /* Based on Figma - gap between header and logos */
}

.partners-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 128px; /* Based on Figma */
}

.partners-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Based on Figma */
    align-items: center;
    gap: 16px; /* Based on Figma */
    width: 100%;
}

.partners-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 48px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: left; /* Based on Figma */
    width: 640px; /* Based on Figma */
    max-width: 100%;
    flex-shrink: 0;
}

.partners-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: left; /* Based on Figma */
    width: 480px; /* Based on Figma */
    max-width: 100%;
    flex-shrink: 0;
}

.partners-logos-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners-logos-container {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.partners-logos {
    display: inline-flex;
    flex-direction: row;
    gap: 72px; /* Based on Figma */
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    animation: partners-scroll 20s linear infinite;
    will-change: transform;
}

@keyframes partners-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.partner-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px; /* Based on Figma */
    flex: 0 0 auto;
}

.partner-logo-link,
.partner-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.partner-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 120px; /* Based on Figma max height */
    object-fit: contain;
    display: block;
}

/* Partners Section Responsive */
@media (max-width: 1440px) {
    .partners-section {
        padding: 80px 60px;
    }
    
    .partners-title {
        width: 50%;
    }
    
    .partners-description {
        width: 45%;
    }
}

@media (max-width: 1200px) {
    .partners-section {
        padding: 80px 50px;
        gap: 80px;
    }
    
    .partners-container {
        gap: 80px;
    }
    
    .partners-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .partners-title {
        width: 100%;
        font-size: 40px;
    }
    
    .partners-description {
        width: 100%;
        font-size: 18px;
    }
    
    .partners-logos {
        gap: 48px;
        animation-duration: 10s;
    }
}

@media (max-width: 768px) {
    .partners-section {
        padding: 60px 30px;
        gap: 60px;
    }
    
    .partners-container {
        gap: 60px;
    }
    
    .partners-title {
        font-size: 32px;
    }
    
    .partners-description {
        font-size: 16px;
    }
    
    .partners-logos {
        gap: 32px;
        justify-content: flex-start;
        animation-duration: 10s;
    }
    
    .partner-logo-item {
        padding: 12px;
    }
    
    .partner-logo {
        max-height: 80px;
    }
}

@media (max-width: 480px) {
    .partners-section {
        padding: 40px 20px;
        gap: 40px;
    }
    
    .partners-container {
        gap: 40px;
    }
    
    .partners-title {
        font-size: 28px;
    }
    
    .partners-description {
        font-size: 14px;
    }
    
    .partners-logos {
        gap: 24px;
        animation-duration: 8s;
    }
    
    .partner-logo-item {
        padding: 10px;
    }
    
    .partner-logo {
        max-height: 60px;
    }
}

/* CTA Section Styles - Based on Figma (Reusable) */
.cta-section {
    padding: 80px; /* Based on Figma */
    min-height: 1080px; /* Based on Figma */
    background-color: #ffffff; /* Based on Figma */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px; /* Based on Figma */
    box-sizing: border-box;
}

.cta-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px; /* Based on Figma */
    width: 910px; /* Based on Figma */
    max-width: 100%;
}

.cta-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Based on Figma */
    font-size: 58px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: center; /* Based on Figma */
    width: 100%;
    max-width: 910px; /* Based on Figma for About Page */
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Based on Figma */
    padding: 16px 32px; /* Based on Figma */
    background-color: #FF740A; /* Based on Figma */
    color: #FFFFFF; /* Based on Figma */
    font-family: 'Inter', sans-serif;
    font-weight: 500; /* Based on Figma */
    font-size: 20px; /* Based on Figma */
    line-height: 1.2;
    text-decoration: none;
    border-radius: 999px; /* Based on Figma - fully rounded */
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.cta-button:hover,
.cta-button:visited,
.cta-button:active {
    background-color: #e6660a;
    color: #F9F7F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
}

.cta-button:active {
    transform: translateY(0);
}

/* CTA Section Responsive */
@media (max-width: 1440px) {
    .cta-section {
        padding: 80px 60px;
        min-height: 900px;
    }
}

@media (max-width: 1200px) {
    .cta-section {
        padding: 80px 50px;
        min-height: 800px;
    }
    
    .cta-content {
        width: 100%;
    }
    
    .cta-title {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: 60px 30px;
        min-height: 600px;
        gap: 20px;
    }
    
    .cta-content {
        gap: 20px;
    }
    
    .cta-title {
        font-size: 36px;
    }
    
    .cta-button {
        font-size: 18px;
        padding: 14px 28px;
        width: fit-content;
    }
}

@media (max-width: 480px) {
    .cta-section {
        padding: 60px 20px;
        min-height: 500px;
        gap: 24px;
    }
    
    .cta-content {
        gap: 24px;
    }
    
    .cta-title {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .cta-button {
        font-size: 16px;
        padding: 12px 24px;
        width: fit-content;
    }
}

/* About Page Styles - Based on Figma */
.about-page-section {
    padding: 180px 80px 128px 80px; /* Extra top padding untuk header sticky */
    background-color: #ffffff; /* Based on Figma */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px; /* Based on Figma */
    box-sizing: border-box;
}

.about-page-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px; /* Based on Figma */
    box-sizing: border-box;
}

.about-page-header {
    display: flex;
    flex-direction: column;
    align-items: center; /* Based on Figma */
    gap: 16px; /* Based on Figma */
    width: 100%;
    max-width: 100%;
}

.about-page-title {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 400; /* Based on Figma */
    font-size: 24px; /* Based on Figma */
    line-height: 1.2;
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: left; /* Based on Figma */
}

.about-page-description {
    font-family: 'Inter', sans-serif; /* Based on Figma */
    font-weight: 700; /* Based on Figma */
    font-size: 48px; /* Based on Figma */
    line-height: 1.2;
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: center; /* Based on Figma */
    width: 900px; /* Based on Figma */
    max-width: 100%;
    box-sizing: border-box;
}

.about-page-content {
    width: 100%;
    max-height: 600px;
    height: auto;
    min-height: 400px;
    border-radius: 16px; /* Based on Figma */
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
    box-sizing: border-box;
}

.about-page-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Based on Figma */
    object-position: center;
    display: block;
}

.about-page-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    color: #999;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

/* About Page Responsive */
@media (max-width: 1440px) {
    .about-page-section {
        padding: 128px 60px;
    }
}

@media (max-width: 1200px) {
    .about-page-section {
        padding: 160px 50px 100px 50px;
        gap: 48px;
    }
    
    .about-page-container {
        gap: 48px;
    }
    
    .about-page-description {
        font-size: 40px;
        width: 100%;
    }
    
    .about-page-content {
        max-height: 500px;
        min-height: 350px;
    }
}

@media (max-width: 768px) {
    .about-page-section {
        padding: 140px 30px 80px 30px;
        gap: 40px;
    }
    
    .about-page-container {
        gap: 40px;
    }
    
    .about-page-title {
        font-size: 20px;
    }
    
    .about-page-description {
        font-size: 32px;
        width: 100%;
    }
    
    .about-page-content {
        max-height: 450px;
        min-height: 300px;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .about-page-section {
        padding: 120px 20px 60px 20px;
        gap: 32px;
    }
    
    .about-page-container {
        gap: 32px;
    }
    
    .about-page-title {
        font-size: 18px;
    }
    
    .about-page-description {
        font-size: 28px;
    }
    
    .about-page-content {
        max-height: 350px;
        min-height: 250px;
        border-radius: 8px;
    }
}

/* ============================================
   ABOUT SERVICES SECTION (Second Section)
   ============================================ */

.about-services-section {
    padding: 128px 80px; /* Based on Figma */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px; /* Based on Figma */
    box-sizing: border-box;
}

.about-services-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px; /* Based on Figma */
    box-sizing: border-box;
}

.about-services-header {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Based on Figma */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.about-services-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: left; /* Based on Figma */
    max-width: 994px; /* Based on Figma */
}

.about-services-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 24px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: left; /* Based on Figma */
    max-width: 996px; /* Based on Figma */
}

.about-services-subtitle .accent {
    color: #FF740A; /* Orange accent color */
}

.about-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px; /* Based on Figma */
    width: 100%;
    align-items: stretch;
}

.about-service-card {
    position: relative;
    border-radius: 16px; /* Based on Figma */
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Based on Figma */
    padding: 32px; /* Based on Figma */
    min-height: 547px; /* Match service card height from home */
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.about-service-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-service-card:hover .about-service-image,
.about-service-card:hover .about-service-image img {
    transform: scale(1.1);
}

.about-service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark gradient overlay like home page for better text readability */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-service-card:hover .about-service-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
}

.about-service-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Based on Figma */
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-service-card:hover .about-service-content {
    transform: translateY(-4px);
}

.about-service-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    color: #FFFFFF; /* White text like home page */
    margin: 0;
    text-align: left; /* Based on Figma */
}

.about-service-title .accent {
    color: #FF740A; /* Orange accent color */
}

.about-service-description {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 20px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    color: #FFFFFF; /* White text like home page */
    margin: 0;
    min-height: 168px; /* Fixed height from Figma */
    text-align: left; /* Based on Figma */
}

.about-service-description .accent {
    color: #FF740A; /* Orange accent color */
}

/* About Services Section Responsive */
@media (max-width: 1440px) {
    .about-services-section {
        padding: 128px 60px;
    }
}

@media (max-width: 1200px) {
    .about-services-section {
        padding: 80px 50px;
        gap: 48px;
    }
    
    .about-services-container {
        gap: 48px;
    }
    
    .about-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .about-service-card {
        min-height: 400px;
    }
    
    .about-services-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .about-services-section {
        padding: 60px 30px;
        gap: 40px;
    }
    
    .about-services-container {
        gap: 40px;
    }
    
    .about-services-title {
        font-size: 32px;
        line-height: 1.2;
    }
    
    .about-services-subtitle {
        font-size: 20px;
    }
    
    .about-services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .about-service-card {
        min-height: 350px;
        padding: 24px;
    }
    
    .about-service-title {
        font-size: 24px;
    }
    
    .about-service-description {
        font-size: 18px;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .about-services-section {
        padding: 60px 20px;
        gap: 32px;
    }
    
    .about-services-container {
        gap: 32px;
    }
    
    .about-services-title {
        font-size: 28px;
    }
    
    .about-services-subtitle {
        font-size: 18px;
    }
    
    .about-service-card {
        min-height: 300px;
        padding: 20px;
    }
    
    .about-service-title {
        font-size: 22px;
    }
    
    .about-service-description {
        font-size: 16px;
    }
}

/* ============================================
   ABOUT VALUES SECTION (Third Section)
   ============================================ */

.about-values-section {
    padding: 80px 228px; /* Based on Figma: top/bottom 80px, left/right 228px */
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.about-values-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 32px; /* Based on Figma */
    margin: 0 auto;
    box-sizing: border-box;
}

.about-values-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 64px; /* Based on Figma */
    flex: 0 0 auto;
    box-sizing: border-box;
}

.about-value-item {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Based on Figma */
    width: 527px; /* Based on Figma */
    max-width: 100%;
    box-sizing: border-box;
}

.about-value-number {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #FF740A; /* Orange color from Figma */
    margin: 0;
    text-align: left;
}

.about-value-separator {
    width: 100%;
    height: 3px; /* Based on Figma */
    background-color: #000000;
    opacity: 0.2; /* Based on Figma */
    margin: 0;
}

.about-value-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 32px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: left;
}

.about-value-description {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 24px; /* Based on Figma */
    line-height: 1.2; /* Based on Figma */
    letter-spacing: -0.02em; /* -2% from Figma */
    color: #000000; /* Based on Figma */
    margin: 0;
    text-align: left;
}

.about-value-description .accent {
    color: #FF740A; /* Orange accent color */
}

/* About Values Section Responsive */
@media (max-width: 1440px) {
    .about-values-section {
        padding: 80px 200px;
    }
}

@media (max-width: 1200px) {
    .about-values-section {
        padding: 80px 100px;
    }
    
    .about-values-container {
        flex-direction: column;
        gap: 64px;
        max-width: 100%;
    }
    
    .about-values-column {
        width: 100%;
        gap: 48px;
        flex: 1;
    }
    
    .about-value-item {
        width: 100%;
        max-width: 527px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .about-values-section {
        padding: 60px 30px;
        gap: 48px;
    }
    
    .about-values-container {
        gap: 48px;
    }
    
    .about-values-column {
        gap: 40px;
    }
    
    .about-value-number {
        font-size: 40px;
    }
    
    .about-value-title {
        font-size: 28px;
    }
    
    .about-value-description {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .about-values-section {
        padding: 60px 20px;
        gap: 40px;
    }
    
    .about-values-container {
        gap: 40px;
    }
    
    .about-values-column {
        gap: 32px;
    }
    
    .about-value-item {
        gap: 12px;
    }
    
    .about-value-number {
        font-size: 36px;
    }
    
    .about-value-title {
        font-size: 24px;
    }
    
    .about-value-description {
        font-size: 18px;
    }
}

/* About Team Section - Key Team Members */
.about-team-section {
    padding: 80px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-sizing: border-box;
}

.about-team-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-sizing: border-box;
}

.about-team-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    color: #000000;
    margin: 0;
    width: 100%;
}

.about-team-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
}

.about-team-row:has(.team-member-container-large:only-child),
.about-team-row:has(.team-member-container-small:only-child) {
    justify-content: center;
}

.about-team-row:last-child {
    margin-bottom: 0;
}

.about-team-row-1 {
    display: flex;
    flex-direction: row;
    gap: 144px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.about-team-row-2,
.about-team-row-3,
.about-team-row-4,
.about-team-row-5,
.about-team-row-6,
.about-team-row-7,
.about-team-row-8,
.about-team-row-9,
.about-team-row-10 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.team-member-container-large {
    position: relative;
    width: 320px;
    height: 396px;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.team-member-container-small {
    position: relative;
    width: 240px;
    height: 356px;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.team-member-container-large[data-scroll-animation],
.team-member-container-small[data-scroll-animation] {
    --animation-duration: 800ms;
    --animation-delay: 0ms;
}

.team-member-container-large[data-scroll-animation]:nth-child(1),
.team-member-container-small[data-scroll-animation]:nth-child(1) {
    --animation-delay: 100ms;
}

.team-member-container-large[data-scroll-animation]:nth-child(2),
.team-member-container-small[data-scroll-animation]:nth-child(2) {
    --animation-delay: 200ms;
}

.team-member-container-small[data-scroll-animation]:nth-child(3) {
    --animation-delay: 300ms;
}

.team-member-container-small[data-scroll-animation]:nth-child(4) {
    --animation-delay: 400ms;
}

.team-member-container-small[data-scroll-animation]:nth-child(5) {
    --animation-delay: 500ms;
}

.team-member-container-large[data-scroll-animation].scroll-pre-animate,
.team-member-container-small[data-scroll-animation].scroll-pre-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(2px);
}

.team-member-container-large[data-scroll-animation].scroll-animated,
.team-member-container-small[data-scroll-animation].scroll-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.team-member-container-large:hover,
.team-member-container-small:hover {
    transform: scale(1.08) translateY(-8px) !important;
}

.team-member-container-large:hover .team-member-image,
.team-member-container-small:hover .team-member-image {
    transform: scale(1.02);
}


.team-member-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-member-container-large .team-member-image {
    width: 320px;
    height: 320px;
}

.team-member-container-small .team-member-image {
    width: 240px;
    height: 240px;
}

.team-member-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    box-sizing: border-box;
}

.team-member-container-large .team-member-placeholder {
    width: 320px;
    height: 320px;
}

.team-member-container-small .team-member-placeholder {
    width: 240px;
    height: 240px;
}

.team-member-wrapper {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.team-member-container-large .team-member-wrapper {
    top: 316px;
    width: 320px;
}

.team-member-container-small .team-member-wrapper {
    top: 236px;
    width: 240px;
}

.team-member-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-align: center;
    color: #000000;
    margin: 0;
}

.team-member-container-large .team-member-name {
    font-size: 32px;
    line-height: 1.21;
    letter-spacing: -0.02em;
}

.team-member-container-small .team-member-name {
    font-size: 28px;
    line-height: 1.2;
}

.team-member-role {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-align: center;
    color: #000000;
    margin: 0;
}

.team-member-container-large .team-member-role {
    font-size: 24px;
    line-height: 1.21;
    letter-spacing: -0.02em;
}

.team-member-container-small .team-member-role {
    font-size: 20px;
    line-height: 1.2;
}

@media (max-width: 1400px) {
    .about-team-row-1 {
        gap: 80px;
    }
    
    .about-team-row-2,
    .about-team-row-3,
    .about-team-row-4,
    .about-team-row-5,
    .about-team-row-6,
    .about-team-row-7,
    .about-team-row-8,
    .about-team-row-9,
    .about-team-row-10 {
        gap: 12px;
    }
}

@media (max-width: 1200px) {
    .about-team-section {
        padding: 80px 50px;
    }
    
    .about-team-row-1 {
        gap: 60px;
    }
    
    .team-member-container-large {
        width: 280px;
        height: 350px;
    }
    
    .team-member-container-large .team-member-image {
        width: 280px;
        height: 280px;
    }
    
    .team-member-container-large .team-member-wrapper {
        width: 280px;
        top: 276px;
    }
    
    .team-member-container-small {
        width: 200px;
        height: 300px;
    }
    
    .team-member-container-small .team-member-image {
        width: 200px;
        height: 200px;
    }
    
    .team-member-container-small .team-member-wrapper {
        width: 200px;
        top: 196px;
    }
}

@media (max-width: 992px) {
    .about-team-section {
        padding: 60px 30px;
    }
    
    .about-team-title {
        font-size: 40px;
    }
    
    .about-team-row-1 {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    .about-team-row-2,
    .about-team-row-3,
    .about-team-row-4,
    .about-team-row-5,
    .about-team-row-6,
    .about-team-row-7,
    .about-team-row-8,
    .about-team-row-9,
    .about-team-row-10 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .team-member-container-large {
        width: 300px;
        height: 370px;
    }
    
    .team-member-container-large .team-member-image {
        width: 300px;
        height: 300px;
    }
    
    .team-member-container-large .team-member-wrapper {
        width: 300px;
        top: 296px;
    }
    
    .team-member-container-small {
        width: 220px;
        height: 320px;
    }
    
    .team-member-container-small .team-member-image {
        width: 220px;
        height: 220px;
    }
    
    .team-member-container-small .team-member-wrapper {
        width: 220px;
        top: 216px;
    }
}

@media (max-width: 767px) {
    .about-team-section {
        padding: 60px 20px;
        gap: 24px;
    }
    
    .about-team-container {
        gap: 24px;
    }
    
    .about-team-title {
        font-size: 32px;
    }
    
    .about-team-row-1 {
        gap: 32px;
    }
    
    .about-team-row-2,
    .about-team-row-3,
    .about-team-row-4,
    .about-team-row-5,
    .about-team-row-6,
    .about-team-row-7,
    .about-team-row-8,
    .about-team-row-9,
    .about-team-row-10 {
        gap: 16px;
    }
    
    .team-member-container-large {
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 396px;
    }
    
    .team-member-container-large .team-member-image {
        position: relative;
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    
    .team-member-container-large .team-member-wrapper {
        position: relative;
        width: 100%;
        max-width: 320px;
        top: auto;
        left: auto;
        margin-top: -4px;
    }
    
    .team-member-container-small {
        width: calc(50% - 8px);
        max-width: 240px;
        height: auto;
        min-height: 356px;
    }
    
    .team-member-container-small .team-member-image {
        position: relative;
    }
    
    .team-member-container-small .team-member-wrapper {
        position: relative;
        width: 100%;
        max-width: 240px;
        top: auto;
        left: auto;
        margin-top: -4px;
    }
    
    .team-member-container-large .team-member-name {
        font-size: 28px;
    }
    
    .team-member-container-large .team-member-role {
        font-size: 20px;
    }
    
    .team-member-container-small .team-member-name {
        font-size: 24px;
    }
    
    .team-member-container-small .team-member-role {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .about-team-section {
        padding: 40px 16px;
    }
    
    .about-team-title {
        font-size: 28px;
    }
    
    .about-team-row-2,
    .about-team-row-3,
    .about-team-row-4,
    .about-team-row-5,
    .about-team-row-6,
    .about-team-row-7,
    .about-team-row-8,
    .about-team-row-9,
    .about-team-row-10 {
        flex-direction: column;
        align-items: center;
    }
    
    .team-member-container-small {
        width: 100%;
        max-width: 240px;
    }
}

/* ============================================
   SCROLL ANIMATIONS MODULE
   ============================================ */

/* Base animation styles */
[data-scroll-animation] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--animation-duration, 800ms) cubic-bezier(0.4, 0, 0.2, 1),
                transform var(--animation-duration, 800ms) cubic-bezier(0.4, 0, 0.2, 1),
                filter var(--animation-duration, 800ms) cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--animation-delay, 0ms);
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Pre-animate state - subtle initial state */
[data-scroll-animation].scroll-pre-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    filter: blur(4px);
}

/* Animated state */
[data-scroll-animation].scroll-animated {
    opacity: 1;
    transform: translateY(0) scale(var(--scroll-scale, 1)) translateY(var(--parallax-y, 0px)) scale(var(--proximity-scale, 1));
    filter: blur(0);
}

/* Micro interaction enhancements */
[data-scroll-animation].scroll-micro-interaction {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade Up Animation */
.scroll-animation-fade-up {
    transform: translateY(40px) scale(0.96);
}

.scroll-animation-fade-up.scroll-animated {
    transform: translateY(0) scale(var(--scroll-scale, 1)) translateY(var(--parallax-y, 0px)) scale(var(--proximity-scale, 1));
}

/* Fade Down Animation */
.scroll-animation-fade-down {
    transform: translateY(-40px);
}

.scroll-animation-fade-down.scroll-animated {
    transform: translateY(0);
}

/* Fade Left Animation */
.scroll-animation-fade-left {
    transform: translateX(40px);
}

.scroll-animation-fade-left.scroll-animated {
    transform: translateX(0);
}

/* Fade Right Animation */
.scroll-animation-fade-right {
    transform: translateX(-40px);
}

.scroll-animation-fade-right.scroll-animated {
    transform: translateX(0);
}

/* Fade In Animation */
.scroll-animation-fade {
    transform: none;
}

.scroll-animation-fade.scroll-animated {
    transform: none;
}

/* Scale Up Animation */
.scroll-animation-scale-up {
    transform: scale(0.9);
}

.scroll-animation-scale-up.scroll-animated {
    transform: scale(1);
}

/* Scale Down Animation */
.scroll-animation-scale-down {
    transform: scale(1.1);
}

.scroll-animation-scale-down.scroll-animated {
    transform: scale(1);
}

/* Rotate Animation */
.scroll-animation-rotate {
    transform: rotate(-5deg);
}

.scroll-animation-rotate.scroll-animated {
    transform: rotate(0deg);
}

/* Blur Animation */
.scroll-animation-blur {
    filter: blur(10px);
}

.scroll-animation-blur.scroll-animated {
    filter: blur(0);
}

/* Combined: Fade + Scale */
.scroll-animation-fade-scale {
    transform: translateY(30px) scale(0.92);
}

.scroll-animation-fade-scale.scroll-animated {
    transform: translateY(0) scale(var(--scroll-scale, 1)) translateY(var(--parallax-y, 0px)) scale(var(--proximity-scale, 1));
    transition: transform var(--animation-duration, 900ms) cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity var(--animation-duration, 900ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth scroll behavior for better micro interactions */
html {
    scroll-behavior: smooth;
}

/* Enhanced micro interactions on hover (desktop only) */
@media (min-width: 768px) {
    [data-scroll-animation].scroll-animated:hover {
        transform: translateY(-2px) scale(1.01) translateY(var(--parallax-y, 0px)) scale(var(--proximity-scale, 1));
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Disable animation on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    [data-scroll-animation] {
        opacity: 1;
        transform: none !important;
        filter: none !important;
        transition: none;
    }
    
    [data-scroll-animation].scroll-animated {
        transform: none !important;
    }
}

/* 404 Error Page - Apple Style Design */
.error-404 {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background-color: #ffffff;
}

.error-404-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.error-404-content {
    text-align: center;
}

.error-404-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 24px 0;
}

.error-404-description {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
    margin: 0 0 64px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.error-404-portfolio-section {
    margin: 0 0 48px 0;
    text-align: left;
}

.error-404-portfolio-header {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 32px;
}

.error-404-portfolio-header .error-404-section-title {
    flex: 0 0 auto;
    margin: 0;
    min-width: 200px;
}

.error-404-section-description {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
}

.error-404-portfolio-section:last-child {
    margin-bottom: 0;
}

.error-404-section-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #000000;
    margin: 0 0 20px 0;
}

.error-404-portfolio-list,
.error-404-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-404-portfolio-item,
.error-404-category-item {
    margin: 0 0 12px 0;
}

.error-404-portfolio-item:last-child,
.error-404-category-item:last-child {
    margin-bottom: 0;
}

.error-404-portfolio-link,
.error-404-category-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px 0;
    position: relative;
}

.error-404-portfolio-link::after,
.error-404-category-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--ka-accent, #FF740A);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.error-404-portfolio-link:hover,
.error-404-category-link:hover {
    color: var(--ka-accent, #FF740A);
}

.error-404-portfolio-link:hover::after,
.error-404-category-link:hover::after {
    width: 100%;
}

.error-404-category-count {
    font-size: 15px;
    color: #666666;
    font-weight: 400;
}

.error-404-empty {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
    margin: 0;
}

.error-404-archive-description {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #666666;
    margin: 0 0 16px 0;
}

.error-404-archive-link {
    display: inline-block;
    padding: 12px 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: #000000;
    background-color: #f5f5f7;
    border: 2px solid var(--ka-accent, #FF740A);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.error-404-archive-link:hover {
    background-color: var(--ka-accent, #FF740A);
    color: #ffffff;
    border-color: var(--ka-accent, #FF740A);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.3);
}

.error-404-archive-link:active {
    transform: translateY(0);
}

/* 404 Page Responsive */
@media (max-width: 768px) {
    .error-404 {
        padding: 60px 20px;
        min-height: calc(100vh - 150px);
    }
    
    .error-404-title {
        font-size: 48px;
        margin-bottom: 20px;
    }
    
    .error-404-description {
        font-size: 18px;
        margin-bottom: 40px;
    }
    
    .error-404-portfolio-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .error-404-portfolio-header .error-404-section-title {
        min-width: auto;
    }
    
    .error-404-section-description {
        font-size: 18px;
    }
    
    .error-404-portfolio-section {
        margin-bottom: 40px;
    }
    
    .error-404-section-title {
        font-size: 22px;
        margin-bottom: 16px;
    }
    
    .error-404-portfolio-link,
    .error-404-category-link {
        font-size: 16px;
    }
    
    .error-404-archive-link {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .error-404 {
        padding: 40px 20px;
    }
    
    .error-404-title {
        font-size: 36px;
    }
    
    .error-404-description {
        font-size: 16px;
    }
    
    .error-404-section-title {
        font-size: 20px;
    }
}